diff --git a/src/demo/app/help/help.component.ts b/src/demo/app/help/help.component.ts index 480993d8..ac2ea49c 100644 --- a/src/demo/app/help/help.component.ts +++ b/src/demo/app/help/help.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { from, Observable } from 'rxjs'; import { tap, switchMap } from 'rxjs/operators'; import { PlexHelpComponent } from '../../../lib/help/help.component'; @@ -12,13 +12,12 @@ import { Paciente } from '../templates/service/paciente'; templateUrl: 'help.html', }) export class HelpDemoComponent implements OnInit { - showItem = false; showContent = false; - pacientes$: Observable; paciente$: Observable; selectedId: string; + timer = 3; asyncContent = from([1, 2, 3, 4]).pipe( tap((index) => { @@ -33,6 +32,8 @@ export class HelpDemoComponent implements OnInit { private router: Router ) { } + @ViewChild('toggleTest') toggleTest: PlexHelpComponent; + ngOnInit() { this.pacientes$ = this.pacienteService.getPacientes(); @@ -49,4 +50,22 @@ export class HelpDemoComponent implements OnInit { this.router.navigate(['help', this.selectedId]); } + onHelpOpen() { + console.log('Help abierto'); + } + + onHelpClose() { + console.log('Help cerrado'); + } + + timerCerrar() { + const interval = setInterval(() => { + this.timer--; + if (this.timer === 0) { + clearInterval(interval); + this.toggleTest.toggle(); + this.timer = 3; + } + }, 1000); + } } diff --git a/src/demo/app/help/help.html b/src/demo/app/help/help.html index 738755f4..73db18cc 100644 --- a/src/demo/app/help/help.html +++ b/src/demo/app/help/help.html @@ -1,53 +1,14 @@ - - + - -
- - prestacion.solicitud.organizacion.nombre - - prestacion.solicitud.fecha | date - - prestacion.solicitud.prestacionOrigen - {{ asyncContent | async | json }} - - prestacion.solicitud.organizacion.nombre - - prestacion.solicitud.fecha | date - - prestacion.solicitud.prestacionOrigen - {{ asyncContent | async | json }} - - - prestacion.solicitud.organizacion.nombre - - prestacion.solicitud.fecha | date - - prestacion.solicitud.prestacionOrigen - {{ asyncContent | async | json }} - - prestacion.solicitud.organizacion.nombre - - prestacion.solicitud.fecha | date - - prestacion.solicitud.prestacionOrigen - {{ asyncContent | async | json }} - - prestacion.solicitud.organizacion.nombre - - prestacion.solicitud.fecha | date - - prestacion.solicitud.prestacionOrigen - {{ asyncContent | async | json }} - - prestacion.solicitud.organizacion.nombre - - prestacion.solicitud.fecha | date - - prestacion.solicitud.prestacionOrigen - {{ asyncContent | async | json }} + +
+ Descripción general +

El componente plex-help sirve como una ayuda contextual sobre un módulo, pantalla o + sección.

+

Se emplea en casos en los que se necesita brindar información complementaria y circunstancial al + usuario.

 @@ -57,54 +18,214 @@ módulo, pantalla o sección.

    -
  • En su tipología 'help', muestra un ícono de ayuda, sin subtítulo. Se usa como - ayuda contextual - de un panel o sección dentro de la pantalla. -
    • -
  • En su tipología 'info', muestra un ícono de información, y opcionalmente puede - mostrar un subtítulo. Se usa como un panel de información general, descriptiva de un módulo o - pantalla. -
    • +
  • Es un elemento emergente de carácter informativo.
    • +
  • Evita incorporar elementos informativos que le restan espacio, jerarquía y + visibilidad a otros de mayor relevancia o frecuencia de uso en las interfaces.
- +

Propiedades del componente

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropiedadTipoValor por defectoDescripción
titulostring''Título principal del panel de ayuda
subtitulostringundefinedSubtítulo opcional para el panel de ayuda
size'sm' | 'md' | 'lg' | 'auto' | 'full''auto'Tamaño del panel de ayuda
btnSize'sm' | 'md' | 'lg''sm'Tamaño del botón que activa el panel
btnTypePlexType'info'Tipo/color del botón (info, success, danger, etc.)
tituloBotonstring''Texto para el botón que activa el panel
iconstring'help'Ícono para el botón que activa el panel
scrollbooleantrueHabilita/deshabilita el scroll en el panel
maxHeightstring'80vh'Altura máxima del panel
+ +

Eventos

+ + + + + + + + + + + + + + + + + + + + + +
Evento / MétodoDescripción
(open)Se emite cuando se abre el panel de ayuda
(close)Se emite cuando se cierra el panel de ayuda
toggle()Método que permite cerrar el panel de ayuda programáticamente
+ +

Ejemplos de tamaños de botón

+ +
+ +
+ + Para secciones de ayuda complementarias o funcionalidades + secundarias +
+ +

Este es un ejemplo de plex-help con botón pequeño

+ + + +

Este es un ejemplo de plex-help con botón pequeño y texto

+ +
+
+ + +
+ + Para secciones de ayuda estándar o funcionalidades + secundarias +
+ +

Este es un ejemplo de plex-help con botón mediano

+ +
+
+ + +
+ + Para secciones de ayuda importantes o funcionalidades + principales +
+ +

Este es un ejemplo de plex-help con botón grande y texto

+ +
+
+
+ +

Ejemplos de tamaños de modal

+ + plex-help - +
- - prestacion.solicitud.organizacion.nombre +

Panel de ayuda con tamaño pequeño (400px)

 -

plex-help (cardSize:'half')

- + plex-help - +
- - prestacion.solicitud.organizacion.nombre +

Panel de ayuda con tamaño mediano (600px)

 -

plex-help (size:'sm')

- + plex-help - +
- - prestacion.solicitud.organizacion.nombre +

Panel de ayuda con tamaño grande (800px)

+
+ + + +

Ejemplos de eventos y métodos

+ + + +
+
Demostración de Cierre Programático
+

Este ejemplo demuestra cómo cerrar el panel de ayuda programáticamente usando toggle() +

+ +
+ + +
+ +
+

Cómo usar toggle():

+
    +
  1. Agregar una referencia de plantilla (#) al componente plex-help
    2. +
  2. Acceder al componente usando @ViewChild en tu componente
    3. +
  3. Llamar al método toggle() en la referencia
    4. +
+ Agregar al componente: +

<plex-help #toggleTest [...] >

+ Agregar al componente +

@ViewChild('toggleTest') helpComponent: PlexHelpComponent;

+ Cerrar programáticamente: +

this.helpComponent.toggle();

+
-

plex-help (cardSize:'half')

- - - + + + - +
    -
  1. Buscá conceptos SNOMED en el campo de texto del panel lateral - (acepta búsquedas - parciales)
    2. -
  2. Seleccioná el concepto al cual quieras agregar o modificar - plantillas
    3. -
  3. Completá los campos "Título" y "Texto del procedimiento"
    4. -
  4. Opcionalmente podés elegir seleccionar a todos los descendientes - del concepto.
    5. -
  5. Hacé click en "Guardar todos" o el botón con el signo para - guardar - una plantilla individual
    6. -
  6. Buscá conceptos SNOMED en el campo de texto del panel lateral - (acepta búsquedas - parciales)
    7. -
  7. Seleccioná el concepto al cual quieras agregar o modificar - plantillas
    8. -
  8. Completá los campos "Título" y "Texto del procedimiento"
    9. -
  9. Opcionalmente podés elegir seleccionar a todos los descendientes - del concepto.
    10. -
  10. Hacé click en "Guardar todos" o el botón con el signo para - guardar - una plantilla individual
    11. -
  11. Buscá conceptos SNOMED en el campo de texto del panel lateral - (acepta búsquedas - parciales)
    12. -
  12. Seleccioná el concepto al cual quieras agregar o modificar - plantillas
    13. -
  13. Completá los campos "Título" y "Texto del procedimiento"
    14. -
  14. Opcionalmente podés elegir seleccionar a todos los descendientes - del concepto.
    15. -
  15. Hacé click en "Guardar todos" o el botón con el signo para - guardar - una plantilla individual
    16. -
  16. Buscá conceptos SNOMED en el campo de texto del panel lateral - (acepta búsquedas - parciales)
    17. -
  17. Seleccioná el concepto al cual quieras agregar o modificar - plantillas
    18. -
  18. Completá los campos "Título" y "Texto del procedimiento"
    19. -
  19. Opcionalmente podés elegir seleccionar a todos los descendientes - del concepto.
    20. -
  20. Hacé click en "Guardar todos" o el botón con el signo para - guardar - una plantilla individual
    21. -
  21. Buscá conceptos SNOMED en el campo de texto del panel lateral - (acepta búsquedas - parciales)
    22. -
  22. Seleccioná el concepto al cual quieras agregar o modificar - plantillas
    23. -
  23. Completá los campos "Título" y "Texto del procedimiento"
    24. -
  24. Opcionalmente podés elegir seleccionar a todos los descendientes - del concepto.
    25. -
  25. Hacé click en "Guardar todos" o el botón con el signo para - guardar - una plantilla individual
    26. +
  26. Este ejemplo muestra un botón de tipo success
    27. +
  27. Incluye un subtítulo descriptivo
    28. +
  28. El panel tiene un tamaño automático
 -
- Se emplea en casos en los que se necesita brindar información complementaria y circunstancial al - usuario. -
-
    -
  • Es un elemento emergente de carácter informativo.

    • -
  • Evita incorporar elementos informativos que le restan espacio, jerarquía y visibilidad a otros - de - mayor - relevancia o frecuencia de uso en las interfaces.

    • -
  • El componente presenta dos tipologías: info y help.
    • -
-
- - - -

- —¿Hola? deme el contenido más breve que tenga.
- — ...
- — ¡No, no tan breve! +

Útil para mostrar acciones exitosas o confirmaciones positivas en el sistema, como + guardar + registros o completar procesos.

+ + + +

+ Este ejemplo muestra cómo usar la propiedad tituloBoton para mostrar un botón con texto + en lugar de solo un ícono.

+

Ideal para situaciones donde se necesita un botón de ayuda más descriptivo y visible, + especialmente útil en formularios complejos o secciones que requieren explicación detallada.

- - -
    -
  1. Buscá conceptos SNOMED en el campo de texto del panel lateral - (acepta búsquedas - parciales)
    2. -
  2. Seleccioná el concepto al cual quieras agregar o modificar - plantillas
    3. -
  3. Completá los campos "Título" y "Texto del procedimiento"
    4. -
  4. Opcionalmente podés elegir seleccionar a todos los descendientes - del concepto.
    5. -
  5. Hacé click en "Guardar todos" o el botón con el signo para - guardar - una plantilla individual
    6. -
  6. Buscá conceptos SNOMED en el campo de texto del panel lateral - (acepta búsquedas - parciales)
    7. -
  7. Seleccioná el concepto al cual quieras agregar o modificar - plantillas
    8. -
  8. Completá los campos "Título" y "Texto del procedimiento"
    9. -
  9. Opcionalmente podés elegir seleccionar a todos los descendientes - del concepto.
    10. -
  10. Hacé click en "Guardar todos" o el botón con el signo para - guardar - una plantilla individual
    11. -
  11. Buscá conceptos SNOMED en el campo de texto del panel lateral - (acepta búsquedas - parciales)
    12. -
  12. Seleccioná el concepto al cual quieras agregar o modificar - plantillas
    13. -
  13. Completá los campos "Título" y "Texto del procedimiento"
    14. -
  14. Opcionalmente podés elegir seleccionar a todos los descendientes - del concepto.
    15. -
  15. Hacé click en "Guardar todos" o el botón con el signo para - guardar - una plantilla individual
    16. -
  16. Buscá conceptos SNOMED en el campo de texto del panel lateral - (acepta búsquedas - parciales)
    17. -
  17. Seleccioná el concepto al cual quieras agregar o modificar - plantillas
    18. -
  18. Completá los campos "Título" y "Texto del procedimiento"
    19. -
  19. Opcionalmente podés elegir seleccionar a todos los descendientes - del concepto.
    20. -
  20. Hacé click en "Guardar todos" o el botón con el signo para - guardar - una plantilla individual
    21. -
  21. Buscá conceptos SNOMED en el campo de texto del panel lateral - (acepta búsquedas - parciales)
    22. -
  22. Seleccioná el concepto al cual quieras agregar o modificar - plantillas
    23. -
  23. Completá los campos "Título" y "Texto del procedimiento"
    24. -
  24. Opcionalmente podés elegir seleccionar a todos los descendientes - del concepto.
    25. -
  25. Hacé click en "Guardar todos" o el botón con el signo para - guardar - una plantilla individual
    26. -
+ + +

+ Este ejemplo muestra cómo cambiar el ícono predeterminado por otro diferente. +

+

Perfecto para personalizar la apariencia de los botones de ayuda según el contexto, + como usar + íconos específicos para diferentes tipos de información o advertencias.

- - -
    -
  1. Buscá conceptos SNOMED en el campo de texto del panel lateral - (acepta búsquedas - parciales)
    2. -
  2. Seleccioná el concepto al cual quieras agregar o modificar - plantillas
    3. -
  3. Completá los campos "Título" y "Texto del procedimiento"
    4. -
  4. Opcionalmente podés elegir seleccionar a todos los descendientes - del concepto.
    5. -
  5. Hacé click en "Guardar todos" o el botón con el signo para - guardar - una plantilla individual
    6. -
  6. Buscá conceptos SNOMED en el campo de texto del panel lateral - (acepta búsquedas - parciales)
    7. -
  7. Seleccioná el concepto al cual quieras agregar o modificar - plantillas
    8. -
  8. Completá los campos "Título" y "Texto del procedimiento"
    9. -
  9. Opcionalmente podés elegir seleccionar a todos los descendientes - del concepto.
    10. -
  10. Hacé click en "Guardar todos" o el botón con el signo para - guardar - una plantilla individual
    11. -
  11. Buscá conceptos SNOMED en el campo de texto del panel lateral - (acepta búsquedas - parciales)
    12. -
  12. Seleccioná el concepto al cual quieras agregar o modificar - plantillas
    13. -
  13. Completá los campos "Título" y "Texto del procedimiento"
    14. -
  14. Opcionalmente podés elegir seleccionar a todos los descendientes - del concepto.
    15. -
  15. Hacé click en "Guardar todos" o el botón con el signo para - guardar - una plantilla individual
    16. -
  16. Buscá conceptos SNOMED en el campo de texto del panel lateral - (acepta búsquedas - parciales)
    17. -
  17. Seleccioná el concepto al cual quieras agregar o modificar - plantillas
    18. -
  18. Completá los campos "Título" y "Texto del procedimiento"
    19. -
  19. Opcionalmente podés elegir seleccionar a todos los descendientes - del concepto.
    20. -
  20. Hacé click en "Guardar todos" o el botón con el signo para - guardar - una plantilla individual
    21. -
  21. Buscá conceptos SNOMED en el campo de texto del panel lateral - (acepta búsquedas - parciales)
    22. -
  22. Seleccioná el concepto al cual quieras agregar o modificar - plantillas
    23. -
  23. Completá los campos "Título" y "Texto del procedimiento"
    24. -
  24. Opcionalmente podés elegir seleccionar a todos los descendientes - del concepto.
    25. -
  25. Hacé click en "Guardar todos" o el botón con el signo para - guardar - una plantilla individual
    26. -
+ + +

+ Este ejemplo muestra el panel de ayuda en modo invertido, con un fondo oscuro que mejora el contraste y la legibilidad del contenido. +

+ + +

Útil para situaciones donde se necesita un contraste visual mejorado, presentando el panel de ayuda + con un fondo oscuro que destaca el contenido y mejora la legibilidad en interfaces claras.

+ + + +

+ Este panel emite eventos cuando se abre y se cierra. + Revisa la consola para ver los mensajes cuando interactúas con este panel. +

+

Recomendado para casos donde necesitas ejecutar acciones específicas cuando el + usuario interactúa con el panel de ayuda, como registrar analíticas o actualizar otros componentes.

 \ No newline at end of file diff --git a/src/demo/app/home/home.html b/src/demo/app/home/home.html index 08da1151..a14f0d0b 100644 --- a/src/demo/app/home/home.html +++ b/src/demo/app/home/home.html @@ -129,11 +129,11 @@ intrisecamente relacionado al titulo
- +
  • - Cras justo odio + Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
    • diff --git a/src/lib/app/nav-item.component.ts b/src/lib/app/nav-item.component.ts index cfade352..fc675a29 100644 --- a/src/lib/app/nav-item.component.ts +++ b/src/lib/app/nav-item.component.ts @@ -1,21 +1,21 @@ -import { Component, Input, HostBinding, HostListener, ViewChild } from '@angular/core'; +import { Component, Input, HostBinding, HostListener, ViewChild, ElementRef, AfterViewInit, ContentChild } from '@angular/core'; import { PlexHelpComponent } from '../help/help.component'; +import { PlexIconComponent } from '../icon/icon.component'; @Component({ // tslint:disable-next-line: component-selector selector: 'div[nav-item]', template: ` - - +
    - +
    `, }) -export class NavItemComponent { +export class NavItemComponent implements AfterViewInit { @HostBinding('class') classList = 'action hidden-sm-down'; @@ -23,6 +23,18 @@ export class NavItemComponent { @ViewChild(PlexHelpComponent) plexHelp; + @ContentChild(PlexIconComponent) plexIcon: PlexIconComponent; + + ngAfterViewInit() { + console.log(this.plexHelp, this.plexIcon); + + if (this.plexIcon) { + const iconName = this.plexIcon.name; + + this.plexHelp.icon = iconName; + } + } + @HostListener('click', ['event']) click() { if (!this.opened) { @@ -35,5 +47,4 @@ export class NavItemComponent { onClose() { this.opened = false; } - } diff --git a/src/lib/core/service.ts b/src/lib/core/service.ts index 3c44db2d..23753775 100644 --- a/src/lib/core/service.ts +++ b/src/lib/core/service.ts @@ -392,10 +392,10 @@ export class Plex { // La componente dinamica se estaba creando antes de que finalize la componente padre, lo que generaba ese error. // Por eso encolamos la creación de la componente al proximo tick del navegador. setTimeout(() => { - this.viewContainerRef.clear(); + this.viewContainerRef?.clear(); const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentRef); - const component = this.viewContainerRef.createComponent(componentFactory); - Object.assign(component.instance, inputs); + const component = this.viewContainerRef?.createComponent(componentFactory); + Object.assign(component?.instance, inputs); }, 0); } diff --git a/src/lib/css/nav.scss b/src/lib/css/nav.scss index 4857cdc3..6b4da824 100644 --- a/src/lib/css/nav.scss +++ b/src/lib/css/nav.scss @@ -34,7 +34,6 @@ nav { // Botones >div { position: relative; - padding: 0 10px; float: left; height: $navbar-height; @@ -42,6 +41,7 @@ nav { >plex-icon i { font-size: 2em; line-height: $navbar-height; + padding: 0 15px; } .popover { @@ -65,10 +65,17 @@ nav { right: 0 !important; top: unset !important; } + + button { + background-color: transparent !important; + border: none !important; + line-height: $navbar-height; + padding: 0 15px; + color: $white !important; + } } .user-menu { - height: 30px; display: flex; align-items: flex-start; diff --git a/src/lib/css/plex-help.scss b/src/lib/css/plex-help.scss index 89bb09ff..39458fba 100644 --- a/src/lib/css/plex-help.scss +++ b/src/lib/css/plex-help.scss @@ -1,113 +1,42 @@ -plex-help { - $top-open: 21px; - min-width: 30px; - display: inline-block; - - &.no-icon { - min-width: 0px !important; - .btn-close { - display: none; - } - .card.full { - min-width: 50vw; - left: unset; - color: $dark-blue; - background: white; - } - } - - // Contenido del panel/card - .card { - display: none; - border: 0; // reset - border-top: 1px solid darken($light-grey, 15%); - border-left: 1px solid darken($light-grey, 15%); - border-radius: 0.25rem; - box-shadow: 2px 2px 5px 0px $dark-grey; - - &.open { - display: flex; - flex-direction: column; +.mat-menu-panel { + background-color: #f1f1f1; + max-width: unset !important; - max-height: fit-content; - background: var(--heading-background-color); + ol, + ul { + li { + background-color: transparent; - z-index: 999; - position: absolute; - right: 15px; - left: 15px; - } - - &.full { - width: auto; - height: auto; - min-width: 90%; - overflow-y: scroll; - max-height: 70vh; - } - &.half { - width: 50%; - height: auto; - left: unset; - overflow-y: scroll; - max-height: 70vh; - } - &.auto { - width: auto; - height: auto; - overflow-x: hidden; - overflow-y: scroll; - } - - // @Input() titulo: - .card-header { - height: 50px; - } - - // @Input() subtitulo + ng-content: - .card-body { - transition: all; - &.open { - height: auto; - .toggle-help { - right: 60px; - } - } - &.closed { - height: 0px; - } - .list-group-item { - background: inherit; + &:first-child { + border: none; } } } - // Botón que abre/cierra - .toggle-help { - position: initial; - right: 15px; - top: $top-open; - display: inline-block; - margin-bottom: -10px; + .inverted { + background-color: #00415d; + color: #fff; + } +} - &.closed { - display: inline-block; - position: relative; - top: 0; - right: 0; - } - &.open { - top: 0; - plex-button { - z-index: 999; - } - } +.mat-menu-content { + .help-content { + max-width: 800px; + min-width: 300px; + } +} - plex-button { - position: relative; - right: 0; - display: flex; - justify-content: flex-end; +// Estilo para el botón cuando el menú de ayuda está abierto +plex-help { + .help-button-active { + opacity: 0.5; + transition: opacity 0.3s ease; + box-shadow: none; + + .btn:focus, + .btn:hover { + text-decoration: none; + box-shadow: none !important; } } -} +} \ No newline at end of file diff --git a/src/lib/help/help.component.ts b/src/lib/help/help.component.ts index 79018804..1cce4e78 100644 --- a/src/lib/help/help.component.ts +++ b/src/lib/help/help.component.ts @@ -1,138 +1,101 @@ -import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, Renderer2 } from '@angular/core'; +import { AfterViewInit, Component, EventEmitter, Input, OnDestroy, Output, ViewChild } from '@angular/core'; +import { MatMenuTrigger } from '@angular/material/menu'; import { PlexType } from './../core/plex-type.type'; import { HelpService } from './services/help.service'; @Component({ selector: 'plex-help', template: ` - - + - + -
    -
    - -
    - -
    {{ subtitulo }}
    - -
    -     + + +
    +
    + + +
    -
    - ` + ` }) -export class PlexHelpComponent implements OnInit, AfterViewInit, OnChanges { +export class PlexHelpComponent implements OnDestroy, AfterViewInit { @Input() titulo = ''; - @Input() subtitulo: string; - - @Input() size: 'sm' | 'md' = 'sm'; - - @Input() cardSize: 'full' | 'half' | 'auto' = 'full'; - + @Input() size: 'sm' | 'md' | 'lg' | 'auto' | 'full' = 'auto'; + @Input() btnSize: 'sm' | 'md' | 'lg' | 'block' = 'sm'; @Input() title: string; - - @Input() type: 'info' | 'help' = 'help'; // deprecated - + @Input() inverted = false; @Input() btnType: PlexType = 'info'; - @Input() tituloBoton = ''; - @Input() icon = 'help'; - @Input() scroll = true; - - @Input() maxHeight = 'auto'; - - @Input() closeHelp = false; + @Input() maxHeight = '80vh'; @Output() close = new EventEmitter(); - @Output() open = new EventEmitter(); - private unlisten: Function; - private parentElement; - private id; - - public closed = true; - public posicionInicial; + @ViewChild(MatMenuTrigger) menuTrigger: MatMenuTrigger; constructor( - private elementRef: ElementRef, - private renderer: Renderer2, private helpService: HelpService, ) { } - ngOnInit(): void { - this.id = Math.floor(Math.random() * 1000); - } - - ngAfterViewInit() { - const elem = this.elementRef.nativeElement.getBoundingClientRect(); + ngAfterViewInit(): void { + this.menuTrigger.menuOpened.subscribe(() => { + this.open.emit(); - this.parentElement = this.elementRef.nativeElement.closest('.plex-box-content'); - this.posicionInicial = elem.top - elem.height; - } + if (this.inverted) { + const menuContent = document.querySelector('.mat-menu-content'); - ngOnChanges() { - if (this.closeHelp) { - this.closed = true; - } + if (menuContent) { + menuContent.classList.add('inverted'); + } + } + }); } - get content() { - return (this.icon && this.icon.length > 0) || (this.tituloBoton && this.tituloBoton.length > 0); + ngOnDestroy(): void { + // Asegurarse de que este help no quede registrado en el servicio + this.helpService.setHelp(null); } - public toggleClose() { - this.closed = true; - this.close.emit(); + getMenuWidth(): string { + switch (this.size) { + case 'sm': + return '400px'; + case 'md': + return '600px'; + case 'lg': + return '800px'; + case 'full': + return '100vw'; + default: + return 'auto'; + } } - private calculatePosition() { - const position = this.elementRef.nativeElement.getBoundingClientRect().y; - const helpElement = this.elementRef.nativeElement.querySelector('plex-help .card.open'); - - helpElement.style.top = `${position - 25}px`; + /** + * Cierra el menú de ayuda programáticamente + */ + toggle(): void { + if (this.menuTrigger && this.menuTrigger.menuOpen) { + this.menuTrigger.closeMenu(); + } } - public toggle() { - this.helpService.closePrevious(this.id); - - const helpCard = this.elementRef.nativeElement.querySelector('div.toggle-help .card'); - - helpCard.style.overflow = !this.scroll ? 'hidden' : 'auto'; - helpCard.style.maxHeight = this.maxHeight ? `${this.maxHeight}px` : 'auto'; - - this.closed = !this.closed; - - if (!this.closed) { - this.helpService.setHelp(this); - - setTimeout(() => { - this.calculatePosition(); - }, 0); - - this.open.emit(); - - this.unlisten = this.renderer.listen('document', 'click', () => { - this.toggleClose(); - this.unlisten(); - }); - - this.parentElement?.addEventListener('scroll', () => { - this.calculatePosition(); - }, false); - } else { - this.toggleClose(); - this.close.emit(); - this.helpService.setHelp(null); - if (this.unlisten) { - this.unlisten(); - } - } + onMenuClosed(): void { + this.close.emit(); + this.helpService.setHelp(null); } } diff --git a/src/lib/help/services/help.service.ts b/src/lib/help/services/help.service.ts index c9d91317..71ed24a1 100644 --- a/src/lib/help/services/help.service.ts +++ b/src/lib/help/services/help.service.ts @@ -14,7 +14,8 @@ export class HelpService { const help = this.helpCache.value; if (help && help.id !== id) { - help.toggleClose(); + help.closed = true; + help.close.emit(); this.helpCache.next(null); } } diff --git a/src/lib/module.ts b/src/lib/module.ts index c4ab62d4..e9627b09 100644 --- a/src/lib/module.ts +++ b/src/lib/module.ts @@ -3,6 +3,7 @@ import { ModuleWithProviders, NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { InfiniteScrollModule } from 'ngx-infinite-scroll'; +import { MatMenuModule } from '@angular/material/menu'; // Componentes import { PlexAccordionComponent } from './accordion/accordion.component'; @@ -104,7 +105,8 @@ import { SimpleNotificationsModule } from './toast/simple-notifications.module'; NgChartsModule, InfiniteScrollModule, SimpleNotificationsModule.forRoot(), - NgxSimpleTextEditorModule + NgxSimpleTextEditorModule, + MatMenuModule ], declarations: [ PlexAppComponent,