feat(plex-group): implementa botonera agrupada (#326)

src/demo/app/app.module.ts

@@ -50,6 +50,7 @@ import { GridDemoComponent } from './grid/grid.component';
 import { CardDemoComponent } from './card/card.component';
 import { SliderDemoComponent } from './slider/slider.component';
 
+
 // Template
 import { ListadoSidebarComponent } from './templates/listado-sidebar/listado-sidebar';
 import { SidebarDetalleComponent } from './templates/listado-sidebar/sidebar/detalle/sidebar-detalle.component';
@@ -79,6 +80,9 @@ import { RecursosListadoComponent } from './templates/modulos/internacion/listad
 import { RecursoDetalleComponent } from './templates/modulos/internacion/sidebar/detalle/recurso-detalle.component';
 
 
+import { PlexGroupComponent } from './../../lib/group/group.component';
+import { PlexGroupItemComponent } from './../../lib/group/group-item.component';
+
 @NgModule({
     declarations: [
         AppComponent,
@@ -146,7 +150,9 @@ import { RecursoDetalleComponent } from './templates/modulos/internacion/sidebar
         AlignDemoComponent,
         InternacionComponent,
         RecursosListadoComponent,
-        RecursoDetalleComponent
+        RecursoDetalleComponent,
+        PlexGroupComponent,
+        PlexGroupItemComponent
     ],
     entryComponents: [
         HeaderPacienteComponent

src/lib/css/plex-group.scss

@@ -0,0 +1,42 @@
+$tags: 1, 2, 3, 4;
+
+@each $tag in $tags {
+    .spacing-#{$tag} {
+        plex-button {
+            margin-right: $tag * 4 + px;
+
+            &:last-child {
+                margin-right: 0
+            }
+        }
+    }
+}
+
+plex-group {
+    .group-dropdown {
+        display: none;
+
+        &.display {
+            display: block;
+        }
+    }
+
+    plex-badge {
+        margin-right: 5px;
+        :last-child {
+            margin-right: 0;
+        }
+    }
+
+    .group-item {
+        display: flex;
+        padding: 5px 10px;
+        cursor: pointer;
+        color: $text-dark;
+
+        &:hover {
+            color: $blue;
+            text-decoration: none;
+        }
+    }
+}

src/lib/group/group-item.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'plex-group-item',
+    template: `
+        <a href="{{link}}" class="group-item">
+            <plex-icon style="margin-right: 10px" name="{{icon}}" type="light" size="sm"></plex-icon>
+            <span style="margin: 0">{{label}}</span>
+        </a>
+    `,
+})
+
+export class PlexGroupItemComponent {
+    @Input() label: string;
+    @Input() icon?: string;
+    @Input() link?: string;
+}

src/lib/group/group.component.ts

@@ -0,0 +1,33 @@
+import { AfterViewInit, Component, ElementRef, Input } from '@angular/core';
+
+@Component({
+    selector: 'plex-group',
+    template: `
+        <div>
+            <div class="plex-group" class="spacing-{{spacing}}">
+                <ng-content select="plex-badge[size=sm]"></ng-content>
+                <ng-content select="plex-button[size=sm]"></ng-content>
+                <plex-dropdown icon="dots-vertical" type="link" size="sm" class="group-dropdown ml-1" [right]="true">
+                    <ng-content select="plex-group-item"></ng-content>
+                </plex-dropdown>
+            </div>
+        </div>
+    `,
+})
+
+export class PlexGroupComponent implements AfterViewInit {
+    @Input() spacing = 1;
+
+    constructor(
+        private elementRef: ElementRef,
+    ) { }
+
+    ngAfterViewInit() {
+        const group = this.elementRef.nativeElement.querySelector('plex-group-item');
+
+        if (group) {
+            const dropdown = this.elementRef.nativeElement.querySelector('plex-dropdown');
+            dropdown.className = 'd-inline-block';
+        }
+    }
+}

src/lib/styles.scss

@@ -111,3 +111,4 @@ $mdi-font-path: "~@mdi/font/fonts/";
 @import "css/plex-grid";
 @import "css/plex-table";
 @import "css/plex-slider";
+@import "css/plex-group";