diff --git a/package-lock.json b/package-lock.json index 4da0de55..c265681e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@andes/plex", - "version": "9.0.0-beta.4", + "version": "9.0.0-beta.5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@andes/plex", - "version": "9.0.0-beta.4", + "version": "9.0.0-beta.5", "license": "GPL-3.0", "dependencies": { "tslib": "^2.0.0" diff --git a/package.json b/package.json index 3d3d9b90..cd657227 100644 --- a/package.json +++ b/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" diff --git a/src/lib/app/app.component.ts b/src/lib/app/app.component.ts index a691ed1d..3c3ebec8 100644 --- a/src/lib/app/app.component.ts +++ b/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'; `, }) -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(); + } } diff --git a/src/lib/core/service.ts b/src/lib/core/service.ts index e08c94ab..9ff85949 100644 --- a/src/lib/core/service.ts +++ b/src/lib/core/service.ts @@ -23,7 +23,11 @@ export class Plex { private navbarCmpRef?: ComponentRef; private navbarOwnerRef?: ComponentRef; private navbarItemToken = 0; - private pending?: { component: Type; inputs?: any }; + private pending?: { + component: Type; + 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(component: Type, inputs?: Partial) { + setNavbarItem(component: Type, inputs?: Partial, 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'); } } diff --git a/src/lib/css/plex-bool.scss b/src/lib/css/plex-bool.scss index 9365c23d..7c3173d4 100644 --- a/src/lib/css/plex-bool.scss +++ b/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; diff --git a/src/lib/css/plex-help.scss b/src/lib/css/plex-help.scss index 6656ff1c..b02b43e3 100644 --- a/src/lib/css/plex-help.scss +++ b/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; diff --git a/src/lib/css/plex-text.scss b/src/lib/css/plex-text.scss index 50f9efa0..76354e0a 100644 --- a/src/lib/css/plex-text.scss +++ b/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 diff --git a/src/lib/hint/hint.component.ts b/src/lib/hint/hint.component.ts index ea09f120..b43a5c8e 100644 --- a/src/lib/hint/hint.component.ts +++ b/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(); } } diff --git a/src/lib/tooltip/tooltip-content.component.ts b/src/lib/tooltip/tooltip-content.component.ts index 7307b115..82f4e9b7 100644 --- a/src/lib/tooltip/tooltip-content.component.ts +++ b/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;