Nueva version de plex 9.0.0-beta5

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@andes/plex",
-    "version": "9.0.0-beta.4",
+    "version": "9.0.0-beta.5",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/andes/plex.git"

src/lib/app/app.component.ts

@@ -1,6 +1,9 @@
-import { AfterViewInit, Component, Input, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import { AfterViewInit, Component, Input, OnInit, ViewChild, ViewContainerRef, OnDestroy } from '@angular/core';
 import { PlexVisualizadorService } from '../core/plex-visualizador.service';
 import { Plex } from './../core/service';
+import { NavigationStart, Router } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
 
 @Component({
     selector: 'plex-app',
@@ -84,7 +87,7 @@ import { Plex } from './../core/service';
                 </div>`,
 })
 
-export class PlexAppComponent implements OnInit, AfterViewInit {
+export class PlexAppComponent implements OnInit, AfterViewInit, OnDestroy {
     @ViewChild('navbarItemHost', { read: ViewContainerRef }) navbarItemVcr!: ViewContainerRef;
     @Input() type = 'inverse';
 
@@ -117,12 +120,19 @@ export class PlexAppComponent implements OnInit, AfterViewInit {
             this.chart.dataset[0].data.push(this.online ? 1 : 0);
         });
     }
+    private routerSubscription: Subscription;
 
     constructor(
         public plex: Plex,
-        public plexVisualizador: PlexVisualizadorService
+        public plexVisualizador: PlexVisualizadorService,
+        private router: Router
     ) {
         this.initAppStatusCheck();
+        this.routerSubscription = this.router.events.pipe(
+            filter(event => event instanceof NavigationStart)
+        ).subscribe(() => {
+            this.plex.clearNavbarItem();
+        });
     }
 
     ngOnInit() {
@@ -137,7 +147,11 @@ export class PlexAppComponent implements OnInit, AfterViewInit {
     }
 
     ngAfterViewInit() {
-        // se pasamos al servicio de plex el host donde insertar componentes dinámicos
+        // le pasamos al servicio de plex el host donde insertar componentes dinámicos
         this.plex.setNavbarHost(this.navbarItemVcr);
     }
+
+    ngOnDestroy() {
+        this.routerSubscription?.unsubscribe();
+    }
 }

src/lib/core/service.ts

@@ -23,7 +23,11 @@ export class Plex {
     private navbarCmpRef?: ComponentRef<any>;
     private navbarOwnerRef?: ComponentRef<any>;
     private navbarItemToken = 0;
-    private pending?: { component: Type<any>; inputs?: any };
+    private pending?: {
+        component: Type<any>;
+        inputs?: any;
+        ownerViewContainerRef?: ViewContainerRef;
+    };
 
     /**
      * Cuenta los POST, PATCH, PUT, DELETE
@@ -390,9 +394,11 @@ export class Plex {
         this.navbarHost = vcr;
 
         if (this.pending) {
-            const p = this.pending;
+            const { component, inputs, ownerViewContainerRef } = this.pending;
+
             this.pending = undefined;
-            this.setNavbarItem(p.component, p.inputs);
+
+            this.setNavbarItem(component, inputs, ownerViewContainerRef);
         }
     }
 
@@ -401,16 +407,15 @@ export class Plex {
      * @param componentRef
      * @param inputs
      */
-    setNavbarItem<T extends object>(component: Type<T>, inputs?: Partial<T>) {
+    setNavbarItem<T extends object>(component: Type<T>, inputs?: Partial<T>, ownerViewContainerRef?: ViewContainerRef) {
         if (!this.navbarHost) {
-            this.pending = { component, inputs };
+            this.pending = { component, inputs, ownerViewContainerRef };
             return;
         }
 
-        const token = ++this.navbarItemToken;
-
         this.clearNavbarItem();
 
+        const token = ++this.navbarItemToken;
         const cmpRef = this.navbarHost.createComponent(component);
 
         if (inputs) {
@@ -420,26 +425,37 @@ export class Plex {
         cmpRef.changeDetectorRef.detectChanges();
         this.navbarCmpRef = cmpRef;
 
-        if (this.viewContainerRef) {
-            const ownerRef = this.viewContainerRef.createComponent(PlexNavbarItemOwnerComponent);
+        if (ownerViewContainerRef) {
+            const ownerRef = ownerViewContainerRef.createComponent(PlexNavbarItemOwnerComponent);
             ownerRef.instance.token = token;
             this.navbarOwnerRef = ownerRef;
+        } else {
+            console.warn('[Plex] navbar item creado sin owner');
         }
     }
 
     clearNavbarItem() {
-        this.navbarCmpRef?.destroy();
-        this.navbarCmpRef = undefined;
+        this.pending = undefined;
+
+        ++this.navbarItemToken;
+
+        const cmpRef = this.navbarCmpRef;
+        const ownerRef = this.navbarOwnerRef;
 
-        this.navbarOwnerRef?.destroy();
+        this.navbarCmpRef = undefined;
         this.navbarOwnerRef = undefined;
 
+        cmpRef?.destroy();
+        ownerRef?.destroy();
+
         this.navbarHost?.clear();
     }
 
     clearNavbarItemIfToken(token: number) {
         if (this.navbarItemToken === token) {
             this.clearNavbarItem();
+        } else {
+            console.warn('[Plex] token NO coincide -> no se limpia navbar');
         }
     }
 

src/lib/css/plex-bool.scss

@@ -24,6 +24,10 @@ mat-checkbox.mat-mdc-checkbox {
         background-color: $blue !important;
     }
 
+    &.mat-mdc-checkbox-disabled .mdc-checkbox__background {
+        background-color: #0000002a !important;
+    }
+
     label {
         font-family: "TypoPRO Source Sans Pro";
         font-size: 0.9rem;

src/lib/css/plex-help.scss

@@ -37,8 +37,8 @@
 }
 
 .mat-mdc-menu-panel.plex-help.inverted {
-    --mat-menu-container-color: #00415d;
-    background-color: #00415d;
+    --mat-menu-container-color: #023044;
+    background-color: #023044;
     border-color: #edf8fd1a;
     color: #fff;
 

src/lib/css/plex-text.scss

@@ -80,6 +80,10 @@ plex-text {
             color: $blue !important;
         }
     }
+
+    st-editor .st-editor-container {
+        color: #000 !important;
+    }
 }
 
 // Fix para cambiar texto del botón "confirmar" de ingreso de texto con link

src/lib/hint/hint.component.ts

@@ -82,7 +82,7 @@ export class HintComponent implements OnInit, AfterViewInit {
                 left = labelRect.right - containerRect.left + 15;
             } else {
                 hintElement.style.position = 'relative';
-                left = hostRect.right - hostRect.left;
+                left = 0;
             }
 
             hintElement.style.top = (top + this.hintOffsetY) + 'px';
@@ -95,7 +95,7 @@ export class HintComponent implements OnInit, AfterViewInit {
     }
 
     // Si el elemento que tiene la directiva [hint] tiene un evento (click), este se ejecutará, guste o no.
-    @HostListener('click', ['$event']) onClick() {
+    @HostListener('click') onClick() {
         this.hostElement.click();
     }
 }

src/lib/tooltip/tooltip-content.component.ts

@@ -198,11 +198,40 @@ export class TooltipContentComponent implements AfterViewInit, OnDestroy {
         }
     }
 
+    private positionRelativeToTarget(hostEl: HTMLElement, targetEl: HTMLElement): { width: number; height: number; top: number; left: number } {
+
+        const hostRect = hostEl.getBoundingClientRect();
+        const targetParent = targetEl.offsetParent as HTMLElement | null;
+        let parentTop = 0;
+        let parentLeft = 0;
+
+        if (targetParent) {
+            const parentRect = targetParent.getBoundingClientRect();
+
+            parentTop =
+                parentRect.top +
+                targetParent.clientTop -
+                targetParent.scrollTop;
+
+            parentLeft =
+                parentRect.left +
+                targetParent.clientLeft -
+                targetParent.scrollLeft;
+        }
+
+        return {
+            width: hostRect.width,
+            height: hostRect.height,
+            top: hostRect.top - parentTop,
+            left: hostRect.left - parentLeft
+        };
+    }
+
     private positionElements(hostEl: HTMLElement, targetEl: HTMLElement, positionStr: string, appendToBody = false): { top: number; left: number } {
         const positionStrParts = positionStr.split('-');
         const pos0 = positionStrParts[0];
         const pos1 = positionStrParts[1] || 'center';
-        const hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl);
+        const hostElPos = this.positionRelativeToTarget(hostEl, targetEl);
         const targetElWidth = targetEl.offsetWidth;
         const targetElHeight = targetEl.offsetHeight;