PLEX - Release v9.0.0-beta4

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@andes/plex",
-    "version": "9.0.0-beta.3",
+    "version": "9.0.0-beta.4",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/andes/plex.git"
@@ -14,7 +14,7 @@
         "build:lib:watch": "ng-packagr -p ng-package.json -w",
         "build": "npm run build:lib && npm run postbuild:lib",
         "pack": "npm run build && cd dist && npm pack",
-        "start:demo": "node scripts/check-dist.js && ng serve plex-demo",
+        "start:demo": "node scripts/check-dist.js && ng serve plex-demo --port 4444",
         "dev:demo": "npm run build:lib && concurrently -k -r \"npm:build:lib:watch\" \"npm:start:demo\"",
         "build:demo": "npm run build && ng build plex-demo",
         "build:demo:prod": "npm run build:lib && ng build plex-demo --configuration production --base-href \"/plex/demo/\"",

projects/plex-demo/src/app/home/home.component.ts

@@ -1,19 +1,26 @@
 import { Component, ChangeDetectorRef, OnInit } from '@angular/core';
 import { PlexVisualizadorService } from '@andes/plex';
 import { Plex } from '@andes/plex';
+import * as moment from 'moment';
 
 @Component({
     templateUrl: 'home.html'
 })
 export class HomeDemoComponent implements OnInit {
-    public field = '';
-    public tooltip = 'Este es un tooltip de una sola linea pero con gran tantidad de texto';
+    field = '';
+    tooltip = 'Este es un tooltip de una sola linea pero con gran tantidad de texto';
     hint = 'Este es un hint ubicado en el sidebar. Debería poder contener varias líneas de texto.';
-    public data = [];
+    hintRequerido = 'Este campo es requerido. Por favor completarlo para poder guardar el formulario.';
+    data = [];
     documento = '45979360';
     fecha;
-
-    public modelSelector;
+    dataSelect = [
+        { id: 1, nombre: 'Opción 1' },
+        { id: 2, nombre: 'Opción 2' }
+    ];
+    modelSelector;
+    inverted = true;
+    pepe = false;
 
     constructor(
         public plex: Plex,
@@ -50,6 +57,10 @@ export class HomeDemoComponent implements OnInit {
         }
     }
 
+    modificarFecha() {
+        this.fecha = moment().format('DD/MM/YYYY HH:mm');
+    }
+
     helpClick() {
     }
 

projects/plex-demo/src/app/home/home.html

@@ -25,12 +25,31 @@
             <plex-button type="success" label="Restaurar usuario" size="sm" (click)="openVisualizador()">
             </plex-button>
         </div>
-        <div class="row mt-3">
-            <div class="col">
-                <b>Documento:</b>
-                <plex-copy [value]="documento">{{ documento | number }}</plex-copy>
-            </div>
+        <div title><b>Documento:</b>
+            <plex-copy [value]="documento">
+                {{ documento | number }}
+            </plex-copy>
         </div>
+
+
+        <plex-title titulo="Ejemplo de listado" size="md"></plex-title>
+        <plex-list>
+            <plex-item *ngFor="let item of dataSelect">
+                <plex-label titulo="Titulo de {{ item.nombre }}" subtitulo="Subtitulo de interés"></plex-label>
+
+                <plex-label titulo="Dato de interés" subtitulo="Un valor">
+                </plex-label>
+
+                <plex-select label="Dato seleccionable" [(ngModel)]="modelSelector" name="select" [data]="dataSelect"
+                             placeholder="Seleccione ...">
+                </plex-select>
+
+                <!-- Se muestra con un 'OR' porque no todas las relaciones guardan el genero -->
+                <plex-badge type="info">Badge info</plex-badge>
+
+                <plex-badge type="warning"> Badge warning</plex-badge>
+            </plex-item>
+        </plex-list>
         <hr>
 
         <fieldset>
@@ -61,8 +80,9 @@
 
         <plex-scroll (change)="loadData()"></plex-scroll>
     </plex-layout-main>
-    <plex-layout-sidebar>
+    <plex-layout-sidebar [type]="inverted ? 'invert' : 'default'">
         <plex-title titulo="Texto principal" size="sm">
+            <plex-bool class="mr-1" type="slide" label="Inverted" [(ngModel)]="inverted"></plex-bool>
             <plex-help type="help" titulo="Ayuda de este panel" tituloBoton="Ayuda" position="right">
                 <ul class="list-group">
                     <li class="list-group-item active">Cras justo odio</li>
@@ -112,7 +132,9 @@
                 </ul>
             </plex-help>
             <plex-button size="sm" type="{{ plex.navbarVisible ? 'danger' : 'success' }}"
-                         icon="{{ plex.navbarVisible ? 'close' : 'eye' }}" (click)="plex.toggleHideNavBar()">
+                         icon="{{ plex.navbarVisible ? 'close' : 'eye' }}" (click)="plex.toggleHideNavBar()"
+                         tooltip="{{ plex.navbarVisible ? 'Ocultar barra de navegación' : 'Mostrar barra de navegación' }}"
+                         tooltipPosition="left">
             </plex-button>
         </plex-title>
         <plex-detail size="sm">
@@ -121,13 +143,6 @@
             <div title>Texto principal o titulo</div>
             <div subtitle>Texto secundario intrisecamente relacionado al titulo</div>
         </plex-detail>
-        <plex-detail size="sm">
-            <img src="https://cdn.pixabay.com/photo/2023/02/18/11/00/icon-7797704_1280.png" alt="" preview>
-            <plex-badge type="info">Validado</plex-badge>
-            <div title>Texto principal o titulo</div>
-            <div subtitle>Texto secundario
-                intrisecamente relacionado al titulo</div>
-        </plex-detail>
 
         <plex-title titulo="Texto principal 2" size="sm">
             <plex-help type="help" titulo="Ayuda de este panel" tituloBoton="TOP">
@@ -228,17 +243,21 @@
                 <plex-icon name="message"></plex-icon>
             </plex-badge>
             <plex-text label="Este es un campo de texto requerido" name="campo1" [(ngModel)]="field" [disabled]="false"
-                       required [hint]="hint">
+                       required [hint]="hintRequerido">
             </plex-text>
-            <plex-button label="Guardar formulario" validateForm="true" (click)="guardar($event)">
+            <plex-button label="Guardar formulario" type="success" size="sm" validateForm="true"
+                         (click)="guardar($event)">
             </plex-button>
-            <plex-datetime type="date" label="Seleccione fecha" name="componenteFecha" [(ngModel)]="fecha"
-                           placeholder="dd/mm/aaaa" size="sm" [required]="true">
-            </plex-datetime>
+            <div class="pt-3">
+                <plex-text label=" Campo de texto enriquecido" [hint]="hint" name="textoEnriquecido" [(ngModel)]="field"
+                           [disabled]="false" [html]="true">
+                </plex-text>
+            </div>
         </form>
         <div class="grow mt-2">
             <plex-text label="Búsqueda por texto o scanner" [(ngModel)]="field" prefix="barcode"
-                       ariaLabel="Ingrese un código"></plex-text>
+                       ariaLabel="Ingrese un código">
+            </plex-text>
         </div>
     </plex-layout-sidebar>
     <plex-layout-footer>

projects/plex-demo/src/app/templates/componentes/plex-modal-template/plex-modal-template.html

@@ -140,7 +140,8 @@
                     contener formularios y otros componentes
                     <div class="mt-2">
                         <b>
-                            Este modal se puede cerrar con el botón "Aceptar", con la tecla ESC, con la cruz en la esquina superior derecha, o
+                            Este modal se puede cerrar con el botón "Aceptar", con la tecla ESC, con la cruz en la
+                            esquina superior derecha, o
                             haciendo click fuera del mismo.
                         </b>
                     </div>
@@ -169,13 +170,16 @@
     </plex-layout-main>
     <plex-layout-sidebar type="invert">
         <plex-title size="md" titulo="Modal en sidebar">
-            <plex-button icon="eye" type="info" size="sm" (click)="openModal(4)"></plex-button>
+            <plex-button icon="eye" type="info" size="sm" tooltip="Mostrar modal" tooltipPosition="left"
+                         (click)="openModal(4)">
+            </plex-button>
         </plex-title>
         <plex-modal size="sm" #modal [startOpen]="false" (closed)="notificarAccion(false)">
             <plex-modal-title type="info">Modal dentro de un plex-sidebar invert</plex-modal-title>
             <main>
                 <p>
-                    Un componente que abarca toda la pantalla o el foco de la misma, como un modal o un alert, nunca deben heredar estilos del contendor.
+                    Un componente que abarca toda la pantalla o el foco de la misma, como un modal o un alert, nunca
+                    deben heredar estilos del contendor.
                 </p>
                 <plex-list size="sm" class="w-100">
                     <plex-item>

src/lib/copy/copy.component.ts

@@ -6,10 +6,9 @@ import { Component, OnInit, Input } from '@angular/core';
     template: `
         <span [align] class="d-inline-flex align-items-center ml-1" #container>
             <ng-content></ng-content>
-            <button class="btn btn-link btn-lg p-1" (click)="copyToClipboard()" (mouseenter)="copying = true" (mouseleave)="copying = false" title="Copiar valor">
+            <button class="btn btn-link btn-lg p-1" (click)="copyToClipboard()" (mouseenter)="copying = true" (mouseleave)="copying = false" tooltip="Copiar valor">
                 <plex-icon *ngIf="!copied || copying" type="info" [size]="size" name="clipboard-plus"></plex-icon>
                 <plex-icon *ngIf="copied && !copying" type="info" [size]="size" name="clipboard-check"></plex-icon>
-
             </button>
         </span>
     `

src/lib/core/navbar-item-owner.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnDestroy } from '@angular/core';
+import { Plex } from './service';
+
+@Component({
+    selector: 'plex-navbar-item-owner',
+    template: ''
+})
+export class PlexNavbarItemOwnerComponent implements OnDestroy {
+    /**
+     * Token del item que este owner "posee".
+     * Se setea desde el servicio al crearlo.
+     */
+    token!: number;
+
+    constructor(private plex: Plex) { }
+
+    ngOnDestroy() {
+        this.plex.clearNavbarItemIfToken(this.token);
+    }
+}

src/lib/core/service.ts

@@ -9,17 +9,20 @@ import { DropdownItem } from '../dropdown/dropdown-item.interface';
 import { NotificationsService } from './../toast/simple-notifications/services/notifications.service';
 import { PlexTitle } from './plex-title.interface';
 import { WizardConfig } from './wizard-config.interface';
+import { PlexNavbarItemOwnerComponent } from './navbar-item-owner.component';
 const introJs: any = _introJs;
 
 @Injectable()
 export class Plex {
-    public menu: DropdownItem[];
+    public menu!: DropdownItem[];
     public loaderCount = 0;
     public appStatus: Subject<any> = new Subject();
     public userInfo: any;
     public navbarVisible = true;
     private navbarHost?: ViewContainerRef;
     private navbarCmpRef?: ComponentRef<any>;
+    private navbarOwnerRef?: ComponentRef<any>;
+    private navbarItemToken = 0;
     private pending?: { component: Type<any>; inputs?: any };
 
     /**
@@ -29,7 +32,7 @@ export class Plex {
     /**
      * Contiene el título y breadcrumb que se muestran en el navbar
      */
-    public title: PlexTitle[];
+    public title!: PlexTitle[];
 
     constructor(
         private titleService: Title,
@@ -378,8 +381,8 @@ export class Plex {
      * Navbar dinamico
      */
 
-    private viewContainerRef: ViewContainerRef;
-    setViewContainerRef(viewContainerRef) {
+    private viewContainerRef!: ViewContainerRef;
+    setViewContainerRef(viewContainerRef: ViewContainerRef) {
         this.viewContainerRef = viewContainerRef;
     }
 
@@ -398,26 +401,48 @@ export class Plex {
      * @param componentRef
      * @param inputs
      */
-    setNavbarItem<T>(component: Type<T>, inputs?: Partial<T>) {
-
+    setNavbarItem<T extends object>(component: Type<T>, inputs?: Partial<T>) {
         if (!this.navbarHost) {
             this.pending = { component, inputs };
-            return; // evita reintentos infinitos
+            return;
         }
 
-        this.navbarHost.clear();
+        const token = ++this.navbarItemToken;
+
+        this.clearNavbarItem();
+
         const cmpRef = this.navbarHost.createComponent(component);
-        if (inputs) { Object.assign(cmpRef.instance, inputs); }
+
+        if (inputs) {
+            Object.assign(cmpRef.instance, inputs);
+        }
+
         cmpRef.changeDetectorRef.detectChanges();
         this.navbarCmpRef = cmpRef;
+
+        if (this.viewContainerRef) {
+            const ownerRef = this.viewContainerRef.createComponent(PlexNavbarItemOwnerComponent);
+            ownerRef.instance.token = token;
+            this.navbarOwnerRef = ownerRef;
+        }
     }
 
     clearNavbarItem() {
         this.navbarCmpRef?.destroy();
         this.navbarCmpRef = undefined;
+
+        this.navbarOwnerRef?.destroy();
+        this.navbarOwnerRef = undefined;
+
         this.navbarHost?.clear();
     }
 
+    clearNavbarItemIfToken(token: number) {
+        if (this.navbarItemToken === token) {
+            this.clearNavbarItem();
+        }
+    }
+
     /**
      * Borra el item dinamico agregado.
      */

src/lib/css/plex-bool.scss

@@ -100,7 +100,7 @@ mat-slide-toggle.mat-disabled {
 plex-layout-sidebar[type="invert"] {
     mat-slide-toggle {
         label {
-            color: #fff;
+            color: #fff !important;
         }
 
         .mat-mdc-slide-toggle {