diff --git a/src/demo/app/app.module.ts b/src/demo/app/app.module.ts index 47ea861a..322e40fe 100644 --- a/src/demo/app/app.module.ts +++ b/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 diff --git a/src/lib/css/plex-group.scss b/src/lib/css/plex-group.scss new file mode 100644 index 00000000..71b42418 --- /dev/null +++ b/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; + } + } +} \ No newline at end of file diff --git a/src/lib/group/group-item.component.ts b/src/lib/group/group-item.component.ts new file mode 100644 index 00000000..faf00c35 --- /dev/null +++ b/src/lib/group/group-item.component.ts @@ -0,0 +1,17 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'plex-group-item', + template: ` + + + {{label}} + + `, +}) + +export class PlexGroupItemComponent { + @Input() label: string; + @Input() icon?: string; + @Input() link?: string; +} diff --git a/src/lib/group/group.component.ts b/src/lib/group/group.component.ts new file mode 100644 index 00000000..17e20307 --- /dev/null +++ b/src/lib/group/group.component.ts @@ -0,0 +1,33 @@ +import { AfterViewInit, Component, ElementRef, Input } from '@angular/core'; + +@Component({ + selector: 'plex-group', + template: ` +
+
+ + + + + +
+
+ `, +}) + +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'; + } + } +} diff --git a/src/lib/styles.scss b/src/lib/styles.scss index f63a4340..2c6ac535 100644 --- a/src/lib/styles.scss +++ b/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";