@telcomdev/ui 0.1.23 → 0.1.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -12,7 +12,7 @@ import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
12
12
  import { ComponentPortal } from '@angular/cdk/portal';
13
13
  import { take, filter } from 'rxjs';
14
14
  import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
15
- import { Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
15
+ import { Router, NavigationEnd, RouterLink } from '@angular/router';
16
16
 
17
17
  class TelcomdevUi {
18
18
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TelcomdevUi, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -6376,14 +6376,15 @@ class TdSidebar {
6376
6376
  const limpia = ruta.split('?')[0].split('#')[0].trim();
6377
6377
  if (!limpia || limpia === '/')
6378
6378
  return '/';
6379
- return limpia.endsWith('/') ? limpia.slice(0, -1) : limpia;
6379
+ const conSlashInicial = limpia.startsWith('/') ? limpia : `/${limpia}`;
6380
+ return conSlashInicial.endsWith('/') ? conSlashInicial.slice(0, -1) : conSlashInicial;
6380
6381
  }
6381
6382
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
6382
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdSidebar, isStandalone: true, selector: "td-sidebar", inputs: { titulo: "titulo", subtitulo: "subtitulo", etiquetaNavegacion: "etiquetaNavegacion", logoUrl: "logoUrl", logoAlt: "logoAlt", textoCarga: "textoCarga", mensajeVacio: "mensajeVacio", error: "error", cargando: "cargando", oscuro: "oscuro", modoCerrado: "modoCerrado", abierto: "abierto", menu: "menu" }, outputs: { abiertoChange: "abiertoChange", seleccionar: "seleccionar" }, ngImport: i0, template: "<aside\n class=\"td-sidebar\"\n [class.td-sidebar--compacto]=\"!abiertoInterno() && modoCerrado === 'compacto'\"\n [class.td-sidebar--oculto]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n [class.td-sidebar--oscuro]=\"oscuro\"\n [attr.aria-hidden]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n>\n <header class=\"td-sidebar__marca\">\n <div class=\"td-sidebar__logo\">\n @if (logoUrl) {\n <img [src]=\"logoUrl\" [alt]=\"logoAlt\" />\n } @else {\n <span>{{ inicialMarca() }}</span>\n }\n </div>\n\n @if (abiertoInterno()) {\n <div class=\"td-sidebar__marca-texto\">\n <small>{{ subtitulo }}</small>\n <strong>{{ titulo }}</strong>\n </div>\n }\n\n </header>\n\n <div class=\"td-sidebar__encabezado\">\n @if (abiertoInterno()) {\n <span>{{ etiquetaNavegacion }}</span>\n } @else {\n <span aria-hidden=\"true\">\u2022\u2022\u2022</span>\n }\n </div>\n\n <nav class=\"td-sidebar__nav\" aria-label=\"Men\u00FA principal\">\n @if (cargando) {\n <p class=\"td-sidebar__estado\">{{ textoCarga }}</p>\n } @else if (error) {\n <p class=\"td-sidebar__estado td-sidebar__estado--error\">{{ error }}</p>\n } @else if (!menuNormalizado().length) {\n <p class=\"td-sidebar__estado\">{{ mensajeVacio }}</p>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"listaMenu\"\n [ngTemplateOutletContext]=\"{ items: menuNormalizado(), nivel: 0, padre: 'raiz' }\"\n />\n }\n </nav>\n</aside>\n\n<ng-template #listaMenu let-items=\"items\" let-nivel=\"nivel\" let-padre=\"padre\">\n <ul class=\"td-sidebar__lista\" [class.td-sidebar__lista--anidada]=\"nivel > 0\">\n @for (item of items; track item) {\n @let clave = claveItem(item, padre, $index);\n @let tieneHijos = item.subMenus.length > 0;\n\n <li class=\"td-sidebar__item\">\n @if (tieneHijos) {\n <button\n class=\"td-sidebar__enlace\"\n type=\"button\"\n [class.td-sidebar__enlace--ruta-activa]=\"esItemSeleccionado(item)\"\n [attr.aria-expanded]=\"estaExpandido(clave)\"\n [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n (click)=\"alternarGrupo(clave)\"\n >\n <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n @if (abiertoInterno()) {\n <span>{{ item.nombre }}</span>\n <td-icon\n class=\"td-sidebar__flecha\"\n [class.td-sidebar__flecha--abierta]=\"estaExpandido(clave)\"\n nombre=\"chevron_right\"\n />\n }\n </button>\n } @else {\n <a\n class=\"td-sidebar__enlace\"\n [routerLink]=\"item.ruta || '/'\"\n routerLinkActive=\"td-sidebar__enlace--ruta-activa\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n [class.td-sidebar__enlace--ruta-activa]=\"esItemSeleccionado(item)\"\n [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n (click)=\"seleccionarItem(item, nivel)\"\n >\n <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n @if (abiertoInterno()) {\n <span>{{ item.nombre }}</span>\n }\n </a>\n }\n\n @if (abiertoInterno() && tieneHijos && estaExpandido(clave)) {\n <ng-container\n [ngTemplateOutlet]=\"listaMenu\"\n [ngTemplateOutletContext]=\"{\n items: item.subMenus,\n nivel: nivel + 1,\n padre: clave\n }\"\n />\n }\n </li>\n }\n </ul>\n</ng-template>\n", styles: [":host{display:block;height:100%}*{box-sizing:border-box}.td-sidebar{--td-fondo: var(--td-color-surface, #fff);--td-borde: var(--td-color-border, #e2e8f0);--td-texto: var(--td-color-text, #334155);--td-texto-suave: var(--td-color-text-muted, #64748b);--td-hover: var(--td-color-surface-soft, #f1f5f9);--td-activo: var(--td-color-primary-soft, #e8efff);--td-acento: var(--td-color-primary, #2563eb);display:flex;width:18rem;height:100%;min-height:28rem;flex-direction:column;overflow:hidden;border-right:1px solid var(--td-borde);color:var(--td-texto);background:var(--td-fondo);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif);transition:width .2s ease,background .2s ease,border-color .2s ease}.td-sidebar--oscuro{--td-fondo: var(--td-color-surface, #09090b);--td-borde: var(--td-color-border, #27272a);--td-texto: var(--td-color-text, #d4d4d8);--td-texto-suave: var(--td-color-text-muted, #71717a);--td-hover: var(--td-color-surface-soft, #18181b);--td-activo: var(--td-color-primary-soft, #172554);--td-acento: var(--td-color-primary, #60a5fa)}.td-sidebar--compacto{width:5rem}.td-sidebar--oculto{width:0;min-width:0;border-right-width:0;visibility:hidden}.td-sidebar__marca{display:flex;min-height:5rem;align-items:center;gap:.75rem;border-bottom:1px solid var(--td-borde);padding:1rem}.td-sidebar__logo{display:grid;width:2.75rem;height:2.75rem;flex:0 0 2.75rem;place-items:center;overflow:hidden;border:1px solid var(--td-borde);border-radius:var(--td-radius-md, .75rem);color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #2563eb),var(--td-color-info, #3157a4));font-size:1.15rem;font-weight:800}.td-sidebar__logo img{width:75%;height:75%;object-fit:contain}.td-sidebar__marca-texto{min-width:0;flex:1}.td-sidebar__marca-texto small,.td-sidebar__marca-texto strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-sidebar__marca-texto small{color:var(--td-acento);font-size:.64rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.td-sidebar__marca-texto strong{margin-top:.18rem;font-size:.84rem}.td-sidebar__encabezado{min-height:3.35rem;padding:1.25rem 1rem .65rem;color:var(--td-texto-suave);font-size:.66rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.td-sidebar--compacto .td-sidebar__encabezado{text-align:center}.td-sidebar__nav{min-height:0;flex:1;overflow-x:hidden;overflow-y:auto;padding:0 .7rem 1rem;scrollbar-width:thin;scrollbar-color:var(--td-borde) transparent}.td-sidebar__lista{margin:0;padding:0;list-style:none}.td-sidebar__lista--anidada{position:relative;margin:.2rem 0 .35rem 1.25rem;padding-left:.7rem}.td-sidebar__lista--anidada:before{position:absolute;inset:0 auto 0 0;width:1px;background:var(--td-borde);content:\"\"}.td-sidebar__item+.td-sidebar__item{margin-top:.2rem}.td-sidebar__enlace{display:flex;width:100%;min-width:0;min-height:2.5rem;align-items:center;gap:.7rem;border:0;border-radius:var(--td-radius-sm, .55rem);padding:.55rem .7rem;color:var(--td-texto);background:transparent;font:inherit;font-size:.82rem;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:color .12s ease,background .12s ease}.td-sidebar__enlace:hover{background:var(--td-hover)}.td-sidebar__enlace--activo,.td-sidebar__enlace--ruta-activa{color:var(--td-acento);background:var(--td-activo)}.td-sidebar__enlace span{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}.td-sidebar__icono{width:1.15rem;height:1.15rem;flex:0 0 1.15rem}.td-sidebar__flecha{width:.9rem;height:.9rem;flex:0 0 .9rem;transition:transform .16s ease}.td-sidebar__flecha--abierta{transform:rotate(90deg)}.td-sidebar--compacto .td-sidebar__marca{justify-content:center;padding-inline:.7rem}.td-sidebar--compacto .td-sidebar__nav{padding-inline:.65rem}.td-sidebar--compacto .td-sidebar__enlace{justify-content:center;padding-inline:0}.td-sidebar__lista--anidada .td-sidebar__enlace{min-height:2.2rem;font-size:.75rem;font-weight:500}.td-sidebar__lista--anidada .td-sidebar__lista--anidada .td-sidebar__enlace{min-height:2rem;color:var(--td-texto-suave);font-size:.7rem}.td-sidebar__estado{margin:0;padding:.75rem;color:var(--td-texto-suave);font-size:.75rem;line-height:1.45}.td-sidebar__estado--error{color:var(--td-color-warning, #d97706)}@media(prefers-reduced-motion:reduce){.td-sidebar,.td-sidebar__flecha{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6383
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdSidebar, isStandalone: true, selector: "td-sidebar", inputs: { titulo: "titulo", subtitulo: "subtitulo", etiquetaNavegacion: "etiquetaNavegacion", logoUrl: "logoUrl", logoAlt: "logoAlt", textoCarga: "textoCarga", mensajeVacio: "mensajeVacio", error: "error", cargando: "cargando", oscuro: "oscuro", modoCerrado: "modoCerrado", abierto: "abierto", menu: "menu" }, outputs: { abiertoChange: "abiertoChange", seleccionar: "seleccionar" }, ngImport: i0, template: "<aside\n class=\"td-sidebar\"\n [class.td-sidebar--compacto]=\"!abiertoInterno() && modoCerrado === 'compacto'\"\n [class.td-sidebar--oculto]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n [class.td-sidebar--oscuro]=\"oscuro\"\n [attr.aria-hidden]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n>\n <header class=\"td-sidebar__marca\">\n <div class=\"td-sidebar__logo\">\n @if (logoUrl) {\n <img [src]=\"logoUrl\" [alt]=\"logoAlt\" />\n } @else {\n <span>{{ inicialMarca() }}</span>\n }\n </div>\n\n @if (abiertoInterno()) {\n <div class=\"td-sidebar__marca-texto\">\n <small>{{ subtitulo }}</small>\n <strong>{{ titulo }}</strong>\n </div>\n }\n\n </header>\n\n <div class=\"td-sidebar__encabezado\">\n @if (abiertoInterno()) {\n <span>{{ etiquetaNavegacion }}</span>\n } @else {\n <span aria-hidden=\"true\">\u2022\u2022\u2022</span>\n }\n </div>\n\n <nav class=\"td-sidebar__nav\" aria-label=\"Men\u00FA principal\">\n @if (cargando) {\n <p class=\"td-sidebar__estado\">{{ textoCarga }}</p>\n } @else if (error) {\n <p class=\"td-sidebar__estado td-sidebar__estado--error\">{{ error }}</p>\n } @else if (!menuNormalizado().length) {\n <p class=\"td-sidebar__estado\">{{ mensajeVacio }}</p>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"listaMenu\"\n [ngTemplateOutletContext]=\"{ items: menuNormalizado(), nivel: 0, padre: 'raiz' }\"\n />\n }\n </nav>\n</aside>\n\n<ng-template #listaMenu let-items=\"items\" let-nivel=\"nivel\" let-padre=\"padre\">\n <ul class=\"td-sidebar__lista\" [class.td-sidebar__lista--anidada]=\"nivel > 0\">\n @for (item of items; track item) {\n @let clave = claveItem(item, padre, $index);\n @let tieneHijos = item.subMenus.length > 0;\n\n <li class=\"td-sidebar__item\">\n @if (tieneHijos) {\n <button\n class=\"td-sidebar__enlace\"\n type=\"button\"\n [class.td-sidebar__enlace--ruta-activa]=\"esItemSeleccionado(item)\"\n [attr.aria-expanded]=\"estaExpandido(clave)\"\n [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n (click)=\"alternarGrupo(clave)\"\n >\n <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n @if (abiertoInterno()) {\n <span>{{ item.nombre }}</span>\n <td-icon\n class=\"td-sidebar__flecha\"\n [class.td-sidebar__flecha--abierta]=\"estaExpandido(clave)\"\n nombre=\"chevron_right\"\n />\n }\n </button>\n } @else {\n <a\n class=\"td-sidebar__enlace\"\n [routerLink]=\"item.ruta || '/'\"\n [class.td-sidebar__enlace--ruta-activa]=\"esItemSeleccionado(item)\"\n [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n (click)=\"seleccionarItem(item, nivel)\"\n >\n <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n @if (abiertoInterno()) {\n <span>{{ item.nombre }}</span>\n }\n </a>\n }\n\n @if (abiertoInterno() && tieneHijos && estaExpandido(clave)) {\n <ng-container\n [ngTemplateOutlet]=\"listaMenu\"\n [ngTemplateOutletContext]=\"{\n items: item.subMenus,\n nivel: nivel + 1,\n padre: clave\n }\"\n />\n }\n </li>\n }\n </ul>\n</ng-template>\n", styles: [":host{display:block;height:100%}*{box-sizing:border-box}.td-sidebar{--td-fondo: var(--td-color-surface, #fff);--td-borde: var(--td-color-border, #e2e8f0);--td-texto: var(--td-color-text, #334155);--td-texto-suave: var(--td-color-text-muted, #64748b);--td-hover: var(--td-color-surface-soft, #f1f5f9);--td-activo: var(--td-color-primary-soft, #e8efff);--td-acento: var(--td-color-primary, #2563eb);display:flex;width:18rem;height:100%;min-height:28rem;flex-direction:column;overflow:hidden;border-right:1px solid var(--td-borde);color:var(--td-texto);background:var(--td-fondo);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif);transition:width .2s ease,background .2s ease,border-color .2s ease}.td-sidebar--oscuro{--td-fondo: var(--td-color-surface, #09090b);--td-borde: var(--td-color-border, #27272a);--td-texto: var(--td-color-text, #d4d4d8);--td-texto-suave: var(--td-color-text-muted, #71717a);--td-hover: var(--td-color-surface-soft, #18181b);--td-activo: var(--td-color-primary-soft, #172554);--td-acento: var(--td-color-primary, #60a5fa)}.td-sidebar--compacto{width:5rem}.td-sidebar--oculto{width:0;min-width:0;border-right-width:0;visibility:hidden}.td-sidebar__marca{display:flex;min-height:5rem;align-items:center;gap:.75rem;border-bottom:1px solid var(--td-borde);padding:1rem}.td-sidebar__logo{display:grid;width:2.75rem;height:2.75rem;flex:0 0 2.75rem;place-items:center;overflow:hidden;border:1px solid var(--td-borde);border-radius:var(--td-radius-md, .75rem);color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #2563eb),var(--td-color-info, #3157a4));font-size:1.15rem;font-weight:800}.td-sidebar__logo img{width:75%;height:75%;object-fit:contain}.td-sidebar__marca-texto{min-width:0;flex:1}.td-sidebar__marca-texto small,.td-sidebar__marca-texto strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-sidebar__marca-texto small{color:var(--td-acento);font-size:.64rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.td-sidebar__marca-texto strong{margin-top:.18rem;font-size:.84rem}.td-sidebar__encabezado{min-height:3.35rem;padding:1.25rem 1rem .65rem;color:var(--td-texto-suave);font-size:.66rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.td-sidebar--compacto .td-sidebar__encabezado{text-align:center}.td-sidebar__nav{min-height:0;flex:1;overflow-x:hidden;overflow-y:auto;padding:0 .7rem 1rem;scrollbar-width:thin;scrollbar-color:var(--td-borde) transparent}.td-sidebar__lista{margin:0;padding:0;list-style:none}.td-sidebar__lista--anidada{position:relative;margin:.2rem 0 .35rem 1.25rem;padding-left:.7rem}.td-sidebar__lista--anidada:before{position:absolute;inset:0 auto 0 0;width:1px;background:var(--td-borde);content:\"\"}.td-sidebar__item+.td-sidebar__item{margin-top:.2rem}.td-sidebar__enlace{display:flex;width:100%;min-width:0;min-height:2.5rem;align-items:center;gap:.7rem;border:0;border-radius:var(--td-radius-sm, .55rem);padding:.55rem .7rem;color:var(--td-texto);background:transparent;font:inherit;font-size:.82rem;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:color .12s ease,background .12s ease}.td-sidebar__enlace:hover{background:var(--td-hover)}.td-sidebar__enlace--activo,.td-sidebar__enlace--ruta-activa{color:var(--td-acento);background:var(--td-activo)}.td-sidebar__enlace span{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}.td-sidebar__icono{width:1.15rem;height:1.15rem;flex:0 0 1.15rem}.td-sidebar__flecha{width:.9rem;height:.9rem;flex:0 0 .9rem;transition:transform .16s ease}.td-sidebar__flecha--abierta{transform:rotate(90deg)}.td-sidebar--compacto .td-sidebar__marca{justify-content:center;padding-inline:.7rem}.td-sidebar--compacto .td-sidebar__nav{padding-inline:.65rem}.td-sidebar--compacto .td-sidebar__enlace{justify-content:center;padding-inline:0}.td-sidebar__lista--anidada .td-sidebar__enlace{min-height:2.2rem;font-size:.75rem;font-weight:500}.td-sidebar__lista--anidada .td-sidebar__lista--anidada .td-sidebar__enlace{min-height:2rem;color:var(--td-texto-suave);font-size:.7rem}.td-sidebar__estado{margin:0;padding:.75rem;color:var(--td-texto-suave);font-size:.75rem;line-height:1.45}.td-sidebar__estado--error{color:var(--td-color-warning, #d97706)}@media(prefers-reduced-motion:reduce){.td-sidebar,.td-sidebar__flecha{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6383
6384
  }
6384
6385
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdSidebar, decorators: [{
6385
6386
  type: Component,
6386
- args: [{ selector: 'td-sidebar', imports: [NgTemplateOutlet, RouterLink, RouterLinkActive, TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside\n class=\"td-sidebar\"\n [class.td-sidebar--compacto]=\"!abiertoInterno() && modoCerrado === 'compacto'\"\n [class.td-sidebar--oculto]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n [class.td-sidebar--oscuro]=\"oscuro\"\n [attr.aria-hidden]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n>\n <header class=\"td-sidebar__marca\">\n <div class=\"td-sidebar__logo\">\n @if (logoUrl) {\n <img [src]=\"logoUrl\" [alt]=\"logoAlt\" />\n } @else {\n <span>{{ inicialMarca() }}</span>\n }\n </div>\n\n @if (abiertoInterno()) {\n <div class=\"td-sidebar__marca-texto\">\n <small>{{ subtitulo }}</small>\n <strong>{{ titulo }}</strong>\n </div>\n }\n\n </header>\n\n <div class=\"td-sidebar__encabezado\">\n @if (abiertoInterno()) {\n <span>{{ etiquetaNavegacion }}</span>\n } @else {\n <span aria-hidden=\"true\">\u2022\u2022\u2022</span>\n }\n </div>\n\n <nav class=\"td-sidebar__nav\" aria-label=\"Men\u00FA principal\">\n @if (cargando) {\n <p class=\"td-sidebar__estado\">{{ textoCarga }}</p>\n } @else if (error) {\n <p class=\"td-sidebar__estado td-sidebar__estado--error\">{{ error }}</p>\n } @else if (!menuNormalizado().length) {\n <p class=\"td-sidebar__estado\">{{ mensajeVacio }}</p>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"listaMenu\"\n [ngTemplateOutletContext]=\"{ items: menuNormalizado(), nivel: 0, padre: 'raiz' }\"\n />\n }\n </nav>\n</aside>\n\n<ng-template #listaMenu let-items=\"items\" let-nivel=\"nivel\" let-padre=\"padre\">\n <ul class=\"td-sidebar__lista\" [class.td-sidebar__lista--anidada]=\"nivel > 0\">\n @for (item of items; track item) {\n @let clave = claveItem(item, padre, $index);\n @let tieneHijos = item.subMenus.length > 0;\n\n <li class=\"td-sidebar__item\">\n @if (tieneHijos) {\n <button\n class=\"td-sidebar__enlace\"\n type=\"button\"\n [class.td-sidebar__enlace--ruta-activa]=\"esItemSeleccionado(item)\"\n [attr.aria-expanded]=\"estaExpandido(clave)\"\n [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n (click)=\"alternarGrupo(clave)\"\n >\n <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n @if (abiertoInterno()) {\n <span>{{ item.nombre }}</span>\n <td-icon\n class=\"td-sidebar__flecha\"\n [class.td-sidebar__flecha--abierta]=\"estaExpandido(clave)\"\n nombre=\"chevron_right\"\n />\n }\n </button>\n } @else {\n <a\n class=\"td-sidebar__enlace\"\n [routerLink]=\"item.ruta || '/'\"\n routerLinkActive=\"td-sidebar__enlace--ruta-activa\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n [class.td-sidebar__enlace--ruta-activa]=\"esItemSeleccionado(item)\"\n [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n (click)=\"seleccionarItem(item, nivel)\"\n >\n <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n @if (abiertoInterno()) {\n <span>{{ item.nombre }}</span>\n }\n </a>\n }\n\n @if (abiertoInterno() && tieneHijos && estaExpandido(clave)) {\n <ng-container\n [ngTemplateOutlet]=\"listaMenu\"\n [ngTemplateOutletContext]=\"{\n items: item.subMenus,\n nivel: nivel + 1,\n padre: clave\n }\"\n />\n }\n </li>\n }\n </ul>\n</ng-template>\n", styles: [":host{display:block;height:100%}*{box-sizing:border-box}.td-sidebar{--td-fondo: var(--td-color-surface, #fff);--td-borde: var(--td-color-border, #e2e8f0);--td-texto: var(--td-color-text, #334155);--td-texto-suave: var(--td-color-text-muted, #64748b);--td-hover: var(--td-color-surface-soft, #f1f5f9);--td-activo: var(--td-color-primary-soft, #e8efff);--td-acento: var(--td-color-primary, #2563eb);display:flex;width:18rem;height:100%;min-height:28rem;flex-direction:column;overflow:hidden;border-right:1px solid var(--td-borde);color:var(--td-texto);background:var(--td-fondo);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif);transition:width .2s ease,background .2s ease,border-color .2s ease}.td-sidebar--oscuro{--td-fondo: var(--td-color-surface, #09090b);--td-borde: var(--td-color-border, #27272a);--td-texto: var(--td-color-text, #d4d4d8);--td-texto-suave: var(--td-color-text-muted, #71717a);--td-hover: var(--td-color-surface-soft, #18181b);--td-activo: var(--td-color-primary-soft, #172554);--td-acento: var(--td-color-primary, #60a5fa)}.td-sidebar--compacto{width:5rem}.td-sidebar--oculto{width:0;min-width:0;border-right-width:0;visibility:hidden}.td-sidebar__marca{display:flex;min-height:5rem;align-items:center;gap:.75rem;border-bottom:1px solid var(--td-borde);padding:1rem}.td-sidebar__logo{display:grid;width:2.75rem;height:2.75rem;flex:0 0 2.75rem;place-items:center;overflow:hidden;border:1px solid var(--td-borde);border-radius:var(--td-radius-md, .75rem);color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #2563eb),var(--td-color-info, #3157a4));font-size:1.15rem;font-weight:800}.td-sidebar__logo img{width:75%;height:75%;object-fit:contain}.td-sidebar__marca-texto{min-width:0;flex:1}.td-sidebar__marca-texto small,.td-sidebar__marca-texto strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-sidebar__marca-texto small{color:var(--td-acento);font-size:.64rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.td-sidebar__marca-texto strong{margin-top:.18rem;font-size:.84rem}.td-sidebar__encabezado{min-height:3.35rem;padding:1.25rem 1rem .65rem;color:var(--td-texto-suave);font-size:.66rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.td-sidebar--compacto .td-sidebar__encabezado{text-align:center}.td-sidebar__nav{min-height:0;flex:1;overflow-x:hidden;overflow-y:auto;padding:0 .7rem 1rem;scrollbar-width:thin;scrollbar-color:var(--td-borde) transparent}.td-sidebar__lista{margin:0;padding:0;list-style:none}.td-sidebar__lista--anidada{position:relative;margin:.2rem 0 .35rem 1.25rem;padding-left:.7rem}.td-sidebar__lista--anidada:before{position:absolute;inset:0 auto 0 0;width:1px;background:var(--td-borde);content:\"\"}.td-sidebar__item+.td-sidebar__item{margin-top:.2rem}.td-sidebar__enlace{display:flex;width:100%;min-width:0;min-height:2.5rem;align-items:center;gap:.7rem;border:0;border-radius:var(--td-radius-sm, .55rem);padding:.55rem .7rem;color:var(--td-texto);background:transparent;font:inherit;font-size:.82rem;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:color .12s ease,background .12s ease}.td-sidebar__enlace:hover{background:var(--td-hover)}.td-sidebar__enlace--activo,.td-sidebar__enlace--ruta-activa{color:var(--td-acento);background:var(--td-activo)}.td-sidebar__enlace span{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}.td-sidebar__icono{width:1.15rem;height:1.15rem;flex:0 0 1.15rem}.td-sidebar__flecha{width:.9rem;height:.9rem;flex:0 0 .9rem;transition:transform .16s ease}.td-sidebar__flecha--abierta{transform:rotate(90deg)}.td-sidebar--compacto .td-sidebar__marca{justify-content:center;padding-inline:.7rem}.td-sidebar--compacto .td-sidebar__nav{padding-inline:.65rem}.td-sidebar--compacto .td-sidebar__enlace{justify-content:center;padding-inline:0}.td-sidebar__lista--anidada .td-sidebar__enlace{min-height:2.2rem;font-size:.75rem;font-weight:500}.td-sidebar__lista--anidada .td-sidebar__lista--anidada .td-sidebar__enlace{min-height:2rem;color:var(--td-texto-suave);font-size:.7rem}.td-sidebar__estado{margin:0;padding:.75rem;color:var(--td-texto-suave);font-size:.75rem;line-height:1.45}.td-sidebar__estado--error{color:var(--td-color-warning, #d97706)}@media(prefers-reduced-motion:reduce){.td-sidebar,.td-sidebar__flecha{transition:none}}\n"] }]
6387
+ args: [{ selector: 'td-sidebar', imports: [NgTemplateOutlet, RouterLink, TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside\n class=\"td-sidebar\"\n [class.td-sidebar--compacto]=\"!abiertoInterno() && modoCerrado === 'compacto'\"\n [class.td-sidebar--oculto]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n [class.td-sidebar--oscuro]=\"oscuro\"\n [attr.aria-hidden]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n>\n <header class=\"td-sidebar__marca\">\n <div class=\"td-sidebar__logo\">\n @if (logoUrl) {\n <img [src]=\"logoUrl\" [alt]=\"logoAlt\" />\n } @else {\n <span>{{ inicialMarca() }}</span>\n }\n </div>\n\n @if (abiertoInterno()) {\n <div class=\"td-sidebar__marca-texto\">\n <small>{{ subtitulo }}</small>\n <strong>{{ titulo }}</strong>\n </div>\n }\n\n </header>\n\n <div class=\"td-sidebar__encabezado\">\n @if (abiertoInterno()) {\n <span>{{ etiquetaNavegacion }}</span>\n } @else {\n <span aria-hidden=\"true\">\u2022\u2022\u2022</span>\n }\n </div>\n\n <nav class=\"td-sidebar__nav\" aria-label=\"Men\u00FA principal\">\n @if (cargando) {\n <p class=\"td-sidebar__estado\">{{ textoCarga }}</p>\n } @else if (error) {\n <p class=\"td-sidebar__estado td-sidebar__estado--error\">{{ error }}</p>\n } @else if (!menuNormalizado().length) {\n <p class=\"td-sidebar__estado\">{{ mensajeVacio }}</p>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"listaMenu\"\n [ngTemplateOutletContext]=\"{ items: menuNormalizado(), nivel: 0, padre: 'raiz' }\"\n />\n }\n </nav>\n</aside>\n\n<ng-template #listaMenu let-items=\"items\" let-nivel=\"nivel\" let-padre=\"padre\">\n <ul class=\"td-sidebar__lista\" [class.td-sidebar__lista--anidada]=\"nivel > 0\">\n @for (item of items; track item) {\n @let clave = claveItem(item, padre, $index);\n @let tieneHijos = item.subMenus.length > 0;\n\n <li class=\"td-sidebar__item\">\n @if (tieneHijos) {\n <button\n class=\"td-sidebar__enlace\"\n type=\"button\"\n [class.td-sidebar__enlace--ruta-activa]=\"esItemSeleccionado(item)\"\n [attr.aria-expanded]=\"estaExpandido(clave)\"\n [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n (click)=\"alternarGrupo(clave)\"\n >\n <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n @if (abiertoInterno()) {\n <span>{{ item.nombre }}</span>\n <td-icon\n class=\"td-sidebar__flecha\"\n [class.td-sidebar__flecha--abierta]=\"estaExpandido(clave)\"\n nombre=\"chevron_right\"\n />\n }\n </button>\n } @else {\n <a\n class=\"td-sidebar__enlace\"\n [routerLink]=\"item.ruta || '/'\"\n [class.td-sidebar__enlace--ruta-activa]=\"esItemSeleccionado(item)\"\n [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n (click)=\"seleccionarItem(item, nivel)\"\n >\n <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n @if (abiertoInterno()) {\n <span>{{ item.nombre }}</span>\n }\n </a>\n }\n\n @if (abiertoInterno() && tieneHijos && estaExpandido(clave)) {\n <ng-container\n [ngTemplateOutlet]=\"listaMenu\"\n [ngTemplateOutletContext]=\"{\n items: item.subMenus,\n nivel: nivel + 1,\n padre: clave\n }\"\n />\n }\n </li>\n }\n </ul>\n</ng-template>\n", styles: [":host{display:block;height:100%}*{box-sizing:border-box}.td-sidebar{--td-fondo: var(--td-color-surface, #fff);--td-borde: var(--td-color-border, #e2e8f0);--td-texto: var(--td-color-text, #334155);--td-texto-suave: var(--td-color-text-muted, #64748b);--td-hover: var(--td-color-surface-soft, #f1f5f9);--td-activo: var(--td-color-primary-soft, #e8efff);--td-acento: var(--td-color-primary, #2563eb);display:flex;width:18rem;height:100%;min-height:28rem;flex-direction:column;overflow:hidden;border-right:1px solid var(--td-borde);color:var(--td-texto);background:var(--td-fondo);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif);transition:width .2s ease,background .2s ease,border-color .2s ease}.td-sidebar--oscuro{--td-fondo: var(--td-color-surface, #09090b);--td-borde: var(--td-color-border, #27272a);--td-texto: var(--td-color-text, #d4d4d8);--td-texto-suave: var(--td-color-text-muted, #71717a);--td-hover: var(--td-color-surface-soft, #18181b);--td-activo: var(--td-color-primary-soft, #172554);--td-acento: var(--td-color-primary, #60a5fa)}.td-sidebar--compacto{width:5rem}.td-sidebar--oculto{width:0;min-width:0;border-right-width:0;visibility:hidden}.td-sidebar__marca{display:flex;min-height:5rem;align-items:center;gap:.75rem;border-bottom:1px solid var(--td-borde);padding:1rem}.td-sidebar__logo{display:grid;width:2.75rem;height:2.75rem;flex:0 0 2.75rem;place-items:center;overflow:hidden;border:1px solid var(--td-borde);border-radius:var(--td-radius-md, .75rem);color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #2563eb),var(--td-color-info, #3157a4));font-size:1.15rem;font-weight:800}.td-sidebar__logo img{width:75%;height:75%;object-fit:contain}.td-sidebar__marca-texto{min-width:0;flex:1}.td-sidebar__marca-texto small,.td-sidebar__marca-texto strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-sidebar__marca-texto small{color:var(--td-acento);font-size:.64rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.td-sidebar__marca-texto strong{margin-top:.18rem;font-size:.84rem}.td-sidebar__encabezado{min-height:3.35rem;padding:1.25rem 1rem .65rem;color:var(--td-texto-suave);font-size:.66rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.td-sidebar--compacto .td-sidebar__encabezado{text-align:center}.td-sidebar__nav{min-height:0;flex:1;overflow-x:hidden;overflow-y:auto;padding:0 .7rem 1rem;scrollbar-width:thin;scrollbar-color:var(--td-borde) transparent}.td-sidebar__lista{margin:0;padding:0;list-style:none}.td-sidebar__lista--anidada{position:relative;margin:.2rem 0 .35rem 1.25rem;padding-left:.7rem}.td-sidebar__lista--anidada:before{position:absolute;inset:0 auto 0 0;width:1px;background:var(--td-borde);content:\"\"}.td-sidebar__item+.td-sidebar__item{margin-top:.2rem}.td-sidebar__enlace{display:flex;width:100%;min-width:0;min-height:2.5rem;align-items:center;gap:.7rem;border:0;border-radius:var(--td-radius-sm, .55rem);padding:.55rem .7rem;color:var(--td-texto);background:transparent;font:inherit;font-size:.82rem;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:color .12s ease,background .12s ease}.td-sidebar__enlace:hover{background:var(--td-hover)}.td-sidebar__enlace--activo,.td-sidebar__enlace--ruta-activa{color:var(--td-acento);background:var(--td-activo)}.td-sidebar__enlace span{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}.td-sidebar__icono{width:1.15rem;height:1.15rem;flex:0 0 1.15rem}.td-sidebar__flecha{width:.9rem;height:.9rem;flex:0 0 .9rem;transition:transform .16s ease}.td-sidebar__flecha--abierta{transform:rotate(90deg)}.td-sidebar--compacto .td-sidebar__marca{justify-content:center;padding-inline:.7rem}.td-sidebar--compacto .td-sidebar__nav{padding-inline:.65rem}.td-sidebar--compacto .td-sidebar__enlace{justify-content:center;padding-inline:0}.td-sidebar__lista--anidada .td-sidebar__enlace{min-height:2.2rem;font-size:.75rem;font-weight:500}.td-sidebar__lista--anidada .td-sidebar__lista--anidada .td-sidebar__enlace{min-height:2rem;color:var(--td-texto-suave);font-size:.7rem}.td-sidebar__estado{margin:0;padding:.75rem;color:var(--td-texto-suave);font-size:.75rem;line-height:1.45}.td-sidebar__estado--error{color:var(--td-color-warning, #d97706)}@media(prefers-reduced-motion:reduce){.td-sidebar,.td-sidebar__flecha{transition:none}}\n"] }]
6387
6388
  }], ctorParameters: () => [], propDecorators: { titulo: [{
6388
6389
  type: Input
6389
6390
  }], subtitulo: [{