feat(plex): utiliza material menu para plex-help

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[]>;
     paciente$: Observable<Paciente>;
     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);
+    }
 }

src/demo/app/home/home.html

@@ -129,11 +129,11 @@
         intrisecamente relacionado al titulo</div>
     </plex-detail>
 
-    <plex-title titulo="Texto principal" size="sm">
+    <plex-title titulo="Texto principal 2" size="sm">
       <plex-help type="help" titulo="Ayuda de este panel" tituloBoton="TOP">
         <ul class="list-group">
           <li class="list-group-item active">
-            Cras justo odio <plex-button type="success" (click)="helpClick()"></plex-button>
+            Cras justo odio 
           </li>
           <li class="list-group-item">Dapibus ac facilisis in</li>
           <li class="list-group-item">Morbi leo risus</li>

src/lib/app/nav-item.component.ts

@@ -1,28 +1,40 @@
-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: `
-        <ng-content select="plex-icon"></ng-content>
-        <plex-help class="no-icon" [icon]="null" (close)="onClose()">
+        <plex-help class="no-icon" btnSize="lg" btnType="link" size="lg" (close)="onClose()">
             <div info>
-                <ng-content></ng-content>
+                <ng-content select=":not(plex-icon)"></ng-content>
             </div>
         </plex-help>
 
 
     `,
 })
-export class NavItemComponent {
+export class NavItemComponent implements AfterViewInit {
 
     @HostBinding('class') classList = 'action hidden-sm-down';
 
     @HostBinding('class.hover') opened = false;
 
     @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;
     }
-
 }

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);
     }
 

src/lib/css/nav.scss

@@ -34,14 +34,14 @@ nav {
     // Botones
     >div {
       position: relative;
-      padding: 0 10px;
       float: left;
       height: $navbar-height;
 
       >i,
       >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;
 

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;
     }
   }
-}
+}