@telcomdev/ui 0.1.22 → 0.1.23

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.
Files changed (4) hide show
  1. package/fesm2022/telcomdev-ui.mjs +67 -13
  2. package/fesm2022/telcomdev-ui.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/telcomdev-ui.d.ts +24 -4
package/fesm2022/telcomdev-ui.mjs CHANGED
@@ -3638,6 +3638,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
3638
3638
  type: Output
3639
3639
  }] } });
3640
3640
 
3641
+ const TD_HEADER_ACCIONES_PERFIL = [
3642
+ { id: 'perfil', etiqueta: 'Mi perfil', icono: 'person' },
3643
+ { id: 'configuracion', etiqueta: 'Configuración', icono: 'settings' },
3644
+ { id: 'salir', etiqueta: 'Cerrar sesión', icono: 'close', tono: 'danger' },
3645
+ ];
3641
3646
  class TdHeader {
3642
3647
  menuAbierto = true;
3643
3648
  mostrarMenu = true;
@@ -3647,10 +3652,14 @@ class TdHeader {
3647
3652
  notificaciones = [];
3648
3653
  oscuro = false;
3649
3654
  fijo = true;
3655
+ mostrarNotificaciones = true;
3656
+ mostrarPerfil = true;
3657
+ perfilAcciones = TD_HEADER_ACCIONES_PERFIL;
3650
3658
  menuToggle = new EventEmitter();
3651
3659
  notificacionSeleccionada = new EventEmitter();
3652
3660
  verTodasNotificaciones = new EventEmitter();
3653
3661
  accionPerfil = new EventEmitter();
3662
+ perfilAccionSeleccionada = new EventEmitter();
3654
3663
  panelNotificacionesAbierto = false;
3655
3664
  panelPerfilAbierto = false;
3656
3665
  alternarMenu() {
@@ -3669,7 +3678,10 @@ class TdHeader {
3669
3678
  this.panelNotificacionesAbierto = false;
3670
3679
  }
3671
3680
  emitirAccionPerfil(accion) {
3672
- this.accionPerfil.emit(accion);
3681
+ this.perfilAccionSeleccionada.emit(accion);
3682
+ if (this.esAccionPerfilLegacy(accion.id)) {
3683
+ this.accionPerfil.emit(accion.id);
3684
+ }
3673
3685
  this.panelPerfilAbierto = false;
3674
3686
  }
3675
3687
  notificacionesNoLeidas() {
@@ -3682,16 +3694,22 @@ class TdHeader {
3682
3694
  .map((parte) => parte.charAt(0))
3683
3695
  .join('') || 'U').toUpperCase();
3684
3696
  }
3697
+ accionesPerfilVisibles() {
3698
+ return this.perfilAcciones?.length ? this.perfilAcciones : TD_HEADER_ACCIONES_PERFIL;
3699
+ }
3700
+ esAccionPerfilLegacy(id) {
3701
+ return id === 'perfil' || id === 'configuracion' || id === 'salir';
3702
+ }
3685
3703
  cerrarConEscape() {
3686
3704
  this.panelNotificacionesAbierto = false;
3687
3705
  this.panelPerfilAbierto = false;
3688
3706
  }
3689
3707
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
3690
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdHeader, isStandalone: true, selector: "td-header", inputs: { menuAbierto: "menuAbierto", mostrarMenu: "mostrarMenu", usuario: "usuario", cargo: "cargo", avatarUrl: "avatarUrl", notificaciones: "notificaciones", oscuro: "oscuro", fijo: "fijo" }, outputs: { menuToggle: "menuToggle", notificacionSeleccionada: "notificacionSeleccionada", verTodasNotificaciones: "verTodasNotificaciones", accionPerfil: "accionPerfil" }, host: { listeners: { "document:keydown.escape": "cerrarConEscape()" } }, ngImport: i0, template: "<header\n class=\"td-header\"\n [class.td-header--oscuro]=\"oscuro\"\n [class.td-header--fijo]=\"fijo\"\n>\n <div class=\"td-header__inicio\">\n @if (mostrarMenu) {\n <button\n class=\"td-header__boton td-header__menu\"\n type=\"button\"\n [attr.aria-label]=\"menuAbierto ? 'Cerrar sidebar' : 'Abrir sidebar'\"\n [attr.aria-expanded]=\"menuAbierto\"\n (click)=\"alternarMenu()\"\n >\n <td-icon [nombre]=\"menuAbierto ? 'close' : 'menu'\" />\n </button>\n }\n\n <ng-content select=\"[tdHeaderStart]\" />\n </div>\n\n <div class=\"td-header__centro\">\n <ng-content select=\"[tdHeaderCenter]\" />\n </div>\n\n <div class=\"td-header__acciones\">\n <ng-content select=\"[tdHeaderActions]\" />\n\n <div class=\"td-header__desplegable\">\n <button\n class=\"td-header__boton td-header__notificaciones\"\n type=\"button\"\n aria-label=\"Notificaciones\"\n [attr.aria-expanded]=\"panelNotificacionesAbierto\"\n (click)=\"alternarNotificaciones()\"\n >\n <td-icon nombre=\"notifications\" />\n @if (notificacionesNoLeidas() > 0) {\n <span>{{ notificacionesNoLeidas() > 99 ? '99+' : notificacionesNoLeidas() }}</span>\n }\n </button>\n\n @if (panelNotificacionesAbierto) {\n <section class=\"td-header__panel td-header__panel--notificaciones\">\n <header>\n <div>\n <strong>Notificaciones</strong>\n <small>{{ notificacionesNoLeidas() }} sin leer</small>\n </div>\n <td-icon nombre=\"notifications\" />\n </header>\n\n <div class=\"td-header__lista-notificaciones\">\n @for (notificacion of notificaciones; track notificacion.id) {\n <button\n type=\"button\"\n [class.td-header__notificacion--nueva]=\"!notificacion.leida\"\n (click)=\"seleccionarNotificacion(notificacion)\"\n >\n <span class=\"td-header__notificacion-icono\">\n <td-icon [nombre]=\"notificacion.icono || 'notifications'\" />\n </span>\n <span>\n <strong>{{ notificacion.titulo }}</strong>\n @if (notificacion.descripcion) {\n <small>{{ notificacion.descripcion }}</small>\n }\n @if (notificacion.fecha) {\n <time>{{ notificacion.fecha }}</time>\n }\n </span>\n </button>\n } @empty {\n <p class=\"td-header__vacio\">No tienes notificaciones.</p>\n }\n </div>\n\n @if (notificaciones.length) {\n <button\n class=\"td-header__ver-todas\"\n type=\"button\"\n (click)=\"verTodasNotificaciones.emit(); panelNotificacionesAbierto = false\"\n >\n Ver todas las notificaciones\n </button>\n }\n </section>\n }\n </div>\n\n @if (usuario) {\n <span class=\"td-header__separador\" aria-hidden=\"true\"></span>\n\n <div class=\"td-header__desplegable\">\n <button\n class=\"td-header__perfil\"\n type=\"button\"\n aria-label=\"Abrir perfil de usuario\"\n [attr.aria-expanded]=\"panelPerfilAbierto\"\n (click)=\"alternarPerfil()\"\n >\n <span class=\"td-header__avatar\">\n @if (avatarUrl) {\n <img [src]=\"avatarUrl\" [alt]=\"usuario\" />\n } @else {\n {{ inicialesUsuario() }}\n }\n </span>\n <span class=\"td-header__usuario\">\n <strong>{{ usuario }}</strong>\n @if (cargo) {\n <small>{{ cargo }}</small>\n }\n </span>\n <td-icon nombre=\"chevron_down\" tamano=\"0.85rem\" />\n </button>\n\n @if (panelPerfilAbierto) {\n <section class=\"td-header__panel td-header__panel--perfil\">\n <div class=\"td-header__perfil-resumen\">\n <span class=\"td-header__avatar td-header__avatar--grande\">{{ inicialesUsuario() }}</span>\n <div>\n <strong>{{ usuario }}</strong>\n <small>{{ cargo || 'Usuario' }}</small>\n </div>\n </div>\n <div class=\"td-header__perfil-opciones\">\n <button type=\"button\" (click)=\"emitirAccionPerfil('perfil')\">\n <td-icon nombre=\"person\" /> Mi perfil\n </button>\n <button type=\"button\" (click)=\"emitirAccionPerfil('configuracion')\">\n <td-icon nombre=\"settings\" /> Configuraci\u00F3n\n </button>\n <button class=\"td-header__salir\" type=\"button\" (click)=\"emitirAccionPerfil('salir')\">\n <td-icon nombre=\"close\" /> Cerrar sesi\u00F3n\n </button>\n </div>\n </section>\n }\n </div>\n }\n </div>\n</header>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-header{--fondo: color-mix(in srgb, var(--td-color-surface, #fff) 92%, transparent);--borde: var(--td-color-border, #e5e9f1);--texto: var(--td-color-text, #172036);--suave: var(--td-color-text-muted, #7b8498);--hover: var(--td-color-surface-soft, #f3f5fa);--acento: var(--td-color-primary, #5746d8);position:relative;z-index:var(--td-z-header, 800);display:grid;min-height:4.25rem;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;border-bottom:1px solid var(--borde);padding:.65rem 1.25rem;color:var(--texto);background:var(--fondo);box-shadow:var(--td-shadow-header, 0 8px 30px rgba(35, 42, 68, .05));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-header--fijo{position:sticky;top:0}.td-header--oscuro{--fondo: color-mix(in srgb, var(--td-color-surface, #181b22) 94%, transparent);--borde: var(--td-color-border, #2b2c35);--texto: var(--td-color-text, #f5f5f6);--suave: var(--td-color-text-muted, #92929f);--hover: var(--td-color-surface-soft, #272730);--acento: var(--td-color-primary, #a89cf7)}.td-header__inicio,.td-header__acciones{display:flex;min-width:0;align-items:center;gap:.5rem}.td-header__acciones{justify-content:flex-end}.td-header__centro{min-width:0}.td-header__boton{position:relative;display:grid;width:2.55rem;height:2.55rem;place-items:center;border:1px solid transparent;border-radius:var(--td-radius-md, .75rem);padding:0;color:var(--suave);background:transparent;cursor:pointer}.td-header__boton:hover,.td-header__perfil:hover,.td-header__menu{border-color:var(--borde);color:var(--acento);background:var(--hover)}.td-header__notificaciones>span{position:absolute;top:-.05rem;right:-.12rem;display:grid;min-width:1.05rem;height:1.05rem;place-items:center;border:2px solid var(--fondo);border-radius:var(--td-radius-pill, 999px);padding:0 .15rem;color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #ef4444);font-size:.5rem;font-weight:800}.td-header__separador{width:1px;height:1.75rem;margin:0 .2rem;background:var(--borde)}.td-header__desplegable{position:relative}.td-header__perfil{display:flex;align-items:center;gap:.55rem;border:1px solid transparent;border-radius:var(--td-radius-lg, .8rem);padding:.28rem .42rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__avatar{display:grid;width:2.15rem;height:2.15rem;flex:0 0 2.15rem;place-items:center;overflow:hidden;border:2px solid color-mix(in srgb,var(--acento) 18%,var(--borde));border-radius:var(--td-radius-md, .7rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,var(--hover));font-size:.68rem;font-weight:850}.td-header__avatar img{width:100%;height:100%;object-fit:cover}.td-header__avatar--grande{width:2.8rem;height:2.8rem;flex-basis:2.8rem}.td-header__usuario{display:grid;max-width:9rem;gap:.05rem}.td-header__usuario strong,.td-header__usuario small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-header__usuario strong{font-size:.75rem}.td-header__usuario small{color:var(--suave);font-size:.66rem}.td-header__panel{position:absolute;top:calc(100% + .75rem);right:0;width:min(22rem,100vw - 1.5rem);overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);color:var(--texto);background:var(--fondo);box-shadow:var(--td-shadow-panel, 0 22px 55px rgba(15, 23, 42, .18));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:td-header-panel .14s ease-out}.td-header__panel>header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:1rem;color:var(--acento)}.td-header__panel>header div,.td-header__perfil-resumen div{display:grid;gap:.15rem}.td-header__panel>header strong,.td-header__perfil-resumen strong{color:var(--texto);font-size:.82rem}.td-header__panel>header small,.td-header__perfil-resumen small{color:var(--suave);font-size:.68rem}.td-header__lista-notificaciones{max-height:22rem;overflow-y:auto}.td-header__lista-notificaciones>button{position:relative;display:flex;width:100%;gap:.75rem;border:0;border-bottom:1px solid var(--borde);padding:.85rem 1rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__lista-notificaciones>button:hover{background:var(--hover)}.td-header__notificacion--nueva:after{position:absolute;top:1rem;right:.8rem;width:.4rem;height:.4rem;border-radius:var(--td-radius-pill, 50%);background:var(--acento);content:\"\"}.td-header__notificacion-icono{display:grid;width:2.2rem;height:2.2rem;flex:0 0 2.2rem;place-items:center;border-radius:.65rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-header__lista-notificaciones button>span:last-child{display:grid;min-width:0;gap:.18rem;padding-right:.7rem}.td-header__lista-notificaciones strong{font-size:.75rem}.td-header__lista-notificaciones small{color:var(--suave);font-size:.68rem;line-height:1.4}.td-header__lista-notificaciones time{color:var(--acento);font-size:.61rem}.td-header__ver-todas{width:100%;border:0;padding:.8rem;color:var(--acento);background:transparent;font:750 .7rem/1 inherit;cursor:pointer}.td-header__ver-todas:hover{background:var(--hover)}.td-header__vacio{margin:0;padding:2rem 1rem;color:var(--suave);font-size:.75rem;text-align:center}.td-header__panel--perfil{width:17rem}.td-header__perfil-resumen{display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--borde);padding:1rem}.td-header__perfil-opciones{padding:.45rem}.td-header__perfil-opciones button{display:flex;width:100%;align-items:center;gap:.65rem;border:0;border-radius:.55rem;padding:.65rem .7rem;color:var(--texto);background:transparent;font:600 .72rem/1 inherit;cursor:pointer}.td-header__perfil-opciones button:hover{background:var(--hover)}.td-header__perfil-opciones .td-header__salir{color:var(--td-color-danger, #dc2626)}@keyframes td-header-panel{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:640px){.td-header{grid-template-columns:1fr auto;padding-inline:.75rem}.td-header__centro,.td-header__usuario,.td-header__separador{display:none}.td-header__panel{position:fixed;top:4.5rem;right:.75rem}}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3708
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdHeader, isStandalone: true, selector: "td-header", inputs: { menuAbierto: "menuAbierto", mostrarMenu: "mostrarMenu", usuario: "usuario", cargo: "cargo", avatarUrl: "avatarUrl", notificaciones: "notificaciones", oscuro: "oscuro", fijo: "fijo", mostrarNotificaciones: ["mostrarNotificaciones", "mostrarNotificaciones", booleanAttribute], mostrarPerfil: ["mostrarPerfil", "mostrarPerfil", booleanAttribute], perfilAcciones: "perfilAcciones" }, outputs: { menuToggle: "menuToggle", notificacionSeleccionada: "notificacionSeleccionada", verTodasNotificaciones: "verTodasNotificaciones", accionPerfil: "accionPerfil", perfilAccionSeleccionada: "perfilAccionSeleccionada" }, host: { listeners: { "document:keydown.escape": "cerrarConEscape()" } }, ngImport: i0, template: "<header\n class=\"td-header\"\n [class.td-header--oscuro]=\"oscuro\"\n [class.td-header--fijo]=\"fijo\"\n>\n <div class=\"td-header__inicio\">\n @if (mostrarMenu) {\n <button\n class=\"td-header__boton td-header__menu\"\n type=\"button\"\n [attr.aria-label]=\"menuAbierto ? 'Cerrar sidebar' : 'Abrir sidebar'\"\n [attr.aria-expanded]=\"menuAbierto\"\n (click)=\"alternarMenu()\"\n >\n <td-icon [nombre]=\"menuAbierto ? 'close' : 'menu'\" />\n </button>\n }\n\n <ng-content select=\"[tdHeaderStart]\" />\n </div>\n\n <div class=\"td-header__centro\">\n <ng-content select=\"[tdHeaderCenter]\" />\n </div>\n\n <div class=\"td-header__acciones\">\n <ng-content select=\"[tdHeaderActions]\" />\n\n @if (mostrarNotificaciones) {\n <div class=\"td-header__desplegable\">\n <button\n class=\"td-header__boton td-header__notificaciones\"\n type=\"button\"\n aria-label=\"Notificaciones\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"panelNotificacionesAbierto\"\n (click)=\"alternarNotificaciones()\"\n >\n <td-icon nombre=\"notifications\" />\n @if (notificacionesNoLeidas() > 0) {\n <span>{{ notificacionesNoLeidas() > 99 ? '99+' : notificacionesNoLeidas() }}</span>\n }\n </button>\n\n @if (panelNotificacionesAbierto) {\n <section class=\"td-header__panel td-header__panel--notificaciones\">\n <header>\n <div>\n <strong>Notificaciones</strong>\n <small>{{ notificacionesNoLeidas() }} sin leer</small>\n </div>\n <td-icon nombre=\"notifications\" />\n </header>\n\n <div class=\"td-header__lista-notificaciones\">\n @for (notificacion of notificaciones; track notificacion.id) {\n <button\n type=\"button\"\n [class.td-header__notificacion--nueva]=\"!notificacion.leida\"\n (click)=\"seleccionarNotificacion(notificacion)\"\n >\n <span class=\"td-header__notificacion-icono\">\n <td-icon [nombre]=\"notificacion.icono || 'notifications'\" />\n </span>\n <span>\n <strong>{{ notificacion.titulo }}</strong>\n @if (notificacion.descripcion) {\n <small>{{ notificacion.descripcion }}</small>\n }\n @if (notificacion.fecha) {\n <time>{{ notificacion.fecha }}</time>\n }\n </span>\n </button>\n } @empty {\n <p class=\"td-header__vacio\">No tienes notificaciones.</p>\n }\n </div>\n\n @if (notificaciones.length) {\n <button\n class=\"td-header__ver-todas\"\n type=\"button\"\n (click)=\"verTodasNotificaciones.emit(); panelNotificacionesAbierto = false\"\n >\n Ver todas las notificaciones\n </button>\n }\n </section>\n }\n </div>\n }\n\n @if (mostrarPerfil && usuario) {\n <span class=\"td-header__separador\" aria-hidden=\"true\"></span>\n\n <div class=\"td-header__desplegable\">\n <button\n class=\"td-header__perfil\"\n type=\"button\"\n aria-label=\"Abrir perfil de usuario\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"panelPerfilAbierto\"\n (click)=\"alternarPerfil()\"\n >\n <span class=\"td-header__avatar\">\n @if (avatarUrl) {\n <img [src]=\"avatarUrl\" [alt]=\"usuario\" />\n } @else {\n {{ inicialesUsuario() }}\n }\n </span>\n <span class=\"td-header__usuario\">\n <strong>{{ usuario }}</strong>\n @if (cargo) {\n <small>{{ cargo }}</small>\n }\n </span>\n <td-icon nombre=\"chevron_down\" tamano=\"0.85rem\" />\n </button>\n\n @if (panelPerfilAbierto) {\n <section class=\"td-header__panel td-header__panel--perfil\">\n <div class=\"td-header__perfil-resumen\">\n <span class=\"td-header__avatar td-header__avatar--grande\">\n @if (avatarUrl) {\n <img [src]=\"avatarUrl\" [alt]=\"usuario\" />\n } @else {\n {{ inicialesUsuario() }}\n }\n </span>\n <div>\n <strong>{{ usuario }}</strong>\n <small>{{ cargo || 'Usuario' }}</small>\n </div>\n </div>\n <div class=\"td-header__perfil-opciones\">\n @for (accion of accionesPerfilVisibles(); track accion.id) {\n <button\n type=\"button\"\n [class.td-header__salir]=\"accion.tono === 'danger'\"\n (click)=\"emitirAccionPerfil(accion)\"\n >\n @if (accion.icono) {\n <td-icon [nombre]=\"accion.icono\" />\n }\n <span>\n <strong>{{ accion.etiqueta }}</strong>\n @if (accion.descripcion) {\n <small>{{ accion.descripcion }}</small>\n }\n </span>\n </button>\n }\n </div>\n </section>\n }\n </div>\n }\n </div>\n</header>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-header{--fondo: color-mix(in srgb, var(--td-color-surface, #fff) 92%, transparent);--borde: var(--td-color-border, #e5e9f1);--texto: var(--td-color-text, #172036);--suave: var(--td-color-text-muted, #7b8498);--hover: var(--td-color-surface-soft, #f3f5fa);--acento: var(--td-color-primary, #5746d8);position:relative;z-index:var(--td-z-header, 800);display:grid;min-height:4.25rem;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;border-bottom:1px solid var(--borde);padding:.65rem 1.25rem;color:var(--texto);background:var(--fondo);box-shadow:var(--td-shadow-header, 0 8px 30px rgba(35, 42, 68, .05));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-header--fijo{position:sticky;top:0}.td-header--oscuro{--fondo: color-mix(in srgb, var(--td-color-surface, #181b22) 94%, transparent);--borde: var(--td-color-border, #2b2c35);--texto: var(--td-color-text, #f5f5f6);--suave: var(--td-color-text-muted, #92929f);--hover: var(--td-color-surface-soft, #272730);--acento: var(--td-color-primary, #a89cf7)}.td-header__inicio,.td-header__acciones{display:flex;min-width:0;align-items:center;gap:.5rem}.td-header__acciones{justify-content:flex-end}.td-header__centro{min-width:0}:host ::ng-deep [tdHeaderStart],:host ::ng-deep [tdHeaderCenter],:host ::ng-deep [tdHeaderActions]{min-width:0}:host ::ng-deep [tdHeaderActions]{flex:0 0 auto}.td-header__boton{position:relative;display:grid;width:2.55rem;height:2.55rem;place-items:center;border:1px solid transparent;border-radius:var(--td-radius-md, .75rem);padding:0;color:var(--suave);background:transparent;cursor:pointer}.td-header__boton:hover,.td-header__perfil:hover,.td-header__menu{border-color:var(--borde);color:var(--acento);background:var(--hover)}.td-header__notificaciones>span{position:absolute;top:-.05rem;right:-.12rem;display:grid;min-width:1.05rem;height:1.05rem;place-items:center;border:2px solid var(--fondo);border-radius:var(--td-radius-pill, 999px);padding:0 .15rem;color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #ef4444);font-size:.5rem;font-weight:800}.td-header__separador{width:1px;height:1.75rem;margin:0 .2rem;background:var(--borde)}.td-header__desplegable{position:relative}.td-header__perfil{display:flex;align-items:center;gap:.55rem;border:1px solid transparent;border-radius:var(--td-radius-lg, .8rem);padding:.28rem .42rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__avatar{display:grid;width:2.15rem;height:2.15rem;flex:0 0 2.15rem;place-items:center;overflow:hidden;border:2px solid color-mix(in srgb,var(--acento) 18%,var(--borde));border-radius:var(--td-radius-md, .7rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,var(--hover));font-size:.68rem;font-weight:850}.td-header__avatar img{width:100%;height:100%;object-fit:cover}.td-header__avatar--grande{width:2.8rem;height:2.8rem;flex-basis:2.8rem}.td-header__usuario{display:grid;max-width:9rem;gap:.05rem}.td-header__usuario strong,.td-header__usuario small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-header__usuario strong{font-size:.75rem}.td-header__usuario small{color:var(--suave);font-size:.66rem}.td-header__panel{position:absolute;top:calc(100% + .75rem);right:0;width:min(22rem,100vw - 1.5rem);overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);color:var(--texto);background:var(--fondo);box-shadow:var(--td-shadow-panel, 0 22px 55px rgba(15, 23, 42, .18));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:td-header-panel .14s ease-out}.td-header__panel>header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:1rem;color:var(--acento)}.td-header__panel>header div,.td-header__perfil-resumen div{display:grid;gap:.15rem}.td-header__panel>header strong,.td-header__perfil-resumen strong{color:var(--texto);font-size:.82rem}.td-header__panel>header small,.td-header__perfil-resumen small{color:var(--suave);font-size:.68rem}.td-header__lista-notificaciones{max-height:22rem;overflow-y:auto}.td-header__lista-notificaciones>button{position:relative;display:flex;width:100%;gap:.75rem;border:0;border-bottom:1px solid var(--borde);padding:.85rem 1rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__lista-notificaciones>button:hover{background:var(--hover)}.td-header__notificacion--nueva:after{position:absolute;top:1rem;right:.8rem;width:.4rem;height:.4rem;border-radius:var(--td-radius-pill, 50%);background:var(--acento);content:\"\"}.td-header__notificacion-icono{display:grid;width:2.2rem;height:2.2rem;flex:0 0 2.2rem;place-items:center;border-radius:.65rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-header__lista-notificaciones button>span:last-child{display:grid;min-width:0;gap:.18rem;padding-right:.7rem}.td-header__lista-notificaciones strong{font-size:.75rem}.td-header__lista-notificaciones small{color:var(--suave);font-size:.68rem;line-height:1.4}.td-header__lista-notificaciones time{color:var(--acento);font-size:.61rem}.td-header__ver-todas{width:100%;border:0;padding:.8rem;color:var(--acento);background:transparent;font:750 .7rem/1 inherit;cursor:pointer}.td-header__ver-todas:hover{background:var(--hover)}.td-header__vacio{margin:0;padding:2rem 1rem;color:var(--suave);font-size:.75rem;text-align:center}.td-header__panel--perfil{width:17rem}.td-header__perfil-resumen{display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--borde);padding:1rem}.td-header__perfil-opciones{padding:.45rem}.td-header__perfil-opciones button{display:flex;width:100%;align-items:center;gap:.65rem;border:0;border-radius:.55rem;padding:.65rem .7rem;color:var(--texto);background:transparent;font:600 .72rem/1 inherit;cursor:pointer}.td-header__perfil-opciones button:hover{background:var(--hover)}.td-header__perfil-opciones .td-header__salir{color:var(--td-color-danger, #dc2626)}.td-header__perfil-opciones button>span{display:grid;min-width:0;gap:.12rem}.td-header__perfil-opciones button strong,.td-header__perfil-opciones button small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-header__perfil-opciones button strong{color:inherit;font-size:.72rem}.td-header__perfil-opciones button small{color:var(--suave);font-size:.64rem;font-weight:500}@keyframes td-header-panel{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:640px){.td-header{grid-template-columns:1fr auto;padding-inline:.75rem}.td-header__centro,.td-header__usuario,.td-header__separador{display:none}.td-header__acciones{gap:.35rem}:host ::ng-deep [tdHeaderActions]{max-width:min(11rem,42vw)}.td-header__panel{position:fixed;top:4.5rem;right:.75rem}}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3691
3709
  }
3692
3710
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdHeader, decorators: [{
3693
3711
  type: Component,
3694
- args: [{ selector: 'td-header', imports: [TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header\n class=\"td-header\"\n [class.td-header--oscuro]=\"oscuro\"\n [class.td-header--fijo]=\"fijo\"\n>\n <div class=\"td-header__inicio\">\n @if (mostrarMenu) {\n <button\n class=\"td-header__boton td-header__menu\"\n type=\"button\"\n [attr.aria-label]=\"menuAbierto ? 'Cerrar sidebar' : 'Abrir sidebar'\"\n [attr.aria-expanded]=\"menuAbierto\"\n (click)=\"alternarMenu()\"\n >\n <td-icon [nombre]=\"menuAbierto ? 'close' : 'menu'\" />\n </button>\n }\n\n <ng-content select=\"[tdHeaderStart]\" />\n </div>\n\n <div class=\"td-header__centro\">\n <ng-content select=\"[tdHeaderCenter]\" />\n </div>\n\n <div class=\"td-header__acciones\">\n <ng-content select=\"[tdHeaderActions]\" />\n\n <div class=\"td-header__desplegable\">\n <button\n class=\"td-header__boton td-header__notificaciones\"\n type=\"button\"\n aria-label=\"Notificaciones\"\n [attr.aria-expanded]=\"panelNotificacionesAbierto\"\n (click)=\"alternarNotificaciones()\"\n >\n <td-icon nombre=\"notifications\" />\n @if (notificacionesNoLeidas() > 0) {\n <span>{{ notificacionesNoLeidas() > 99 ? '99+' : notificacionesNoLeidas() }}</span>\n }\n </button>\n\n @if (panelNotificacionesAbierto) {\n <section class=\"td-header__panel td-header__panel--notificaciones\">\n <header>\n <div>\n <strong>Notificaciones</strong>\n <small>{{ notificacionesNoLeidas() }} sin leer</small>\n </div>\n <td-icon nombre=\"notifications\" />\n </header>\n\n <div class=\"td-header__lista-notificaciones\">\n @for (notificacion of notificaciones; track notificacion.id) {\n <button\n type=\"button\"\n [class.td-header__notificacion--nueva]=\"!notificacion.leida\"\n (click)=\"seleccionarNotificacion(notificacion)\"\n >\n <span class=\"td-header__notificacion-icono\">\n <td-icon [nombre]=\"notificacion.icono || 'notifications'\" />\n </span>\n <span>\n <strong>{{ notificacion.titulo }}</strong>\n @if (notificacion.descripcion) {\n <small>{{ notificacion.descripcion }}</small>\n }\n @if (notificacion.fecha) {\n <time>{{ notificacion.fecha }}</time>\n }\n </span>\n </button>\n } @empty {\n <p class=\"td-header__vacio\">No tienes notificaciones.</p>\n }\n </div>\n\n @if (notificaciones.length) {\n <button\n class=\"td-header__ver-todas\"\n type=\"button\"\n (click)=\"verTodasNotificaciones.emit(); panelNotificacionesAbierto = false\"\n >\n Ver todas las notificaciones\n </button>\n }\n </section>\n }\n </div>\n\n @if (usuario) {\n <span class=\"td-header__separador\" aria-hidden=\"true\"></span>\n\n <div class=\"td-header__desplegable\">\n <button\n class=\"td-header__perfil\"\n type=\"button\"\n aria-label=\"Abrir perfil de usuario\"\n [attr.aria-expanded]=\"panelPerfilAbierto\"\n (click)=\"alternarPerfil()\"\n >\n <span class=\"td-header__avatar\">\n @if (avatarUrl) {\n <img [src]=\"avatarUrl\" [alt]=\"usuario\" />\n } @else {\n {{ inicialesUsuario() }}\n }\n </span>\n <span class=\"td-header__usuario\">\n <strong>{{ usuario }}</strong>\n @if (cargo) {\n <small>{{ cargo }}</small>\n }\n </span>\n <td-icon nombre=\"chevron_down\" tamano=\"0.85rem\" />\n </button>\n\n @if (panelPerfilAbierto) {\n <section class=\"td-header__panel td-header__panel--perfil\">\n <div class=\"td-header__perfil-resumen\">\n <span class=\"td-header__avatar td-header__avatar--grande\">{{ inicialesUsuario() }}</span>\n <div>\n <strong>{{ usuario }}</strong>\n <small>{{ cargo || 'Usuario' }}</small>\n </div>\n </div>\n <div class=\"td-header__perfil-opciones\">\n <button type=\"button\" (click)=\"emitirAccionPerfil('perfil')\">\n <td-icon nombre=\"person\" /> Mi perfil\n </button>\n <button type=\"button\" (click)=\"emitirAccionPerfil('configuracion')\">\n <td-icon nombre=\"settings\" /> Configuraci\u00F3n\n </button>\n <button class=\"td-header__salir\" type=\"button\" (click)=\"emitirAccionPerfil('salir')\">\n <td-icon nombre=\"close\" /> Cerrar sesi\u00F3n\n </button>\n </div>\n </section>\n }\n </div>\n }\n </div>\n</header>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-header{--fondo: color-mix(in srgb, var(--td-color-surface, #fff) 92%, transparent);--borde: var(--td-color-border, #e5e9f1);--texto: var(--td-color-text, #172036);--suave: var(--td-color-text-muted, #7b8498);--hover: var(--td-color-surface-soft, #f3f5fa);--acento: var(--td-color-primary, #5746d8);position:relative;z-index:var(--td-z-header, 800);display:grid;min-height:4.25rem;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;border-bottom:1px solid var(--borde);padding:.65rem 1.25rem;color:var(--texto);background:var(--fondo);box-shadow:var(--td-shadow-header, 0 8px 30px rgba(35, 42, 68, .05));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-header--fijo{position:sticky;top:0}.td-header--oscuro{--fondo: color-mix(in srgb, var(--td-color-surface, #181b22) 94%, transparent);--borde: var(--td-color-border, #2b2c35);--texto: var(--td-color-text, #f5f5f6);--suave: var(--td-color-text-muted, #92929f);--hover: var(--td-color-surface-soft, #272730);--acento: var(--td-color-primary, #a89cf7)}.td-header__inicio,.td-header__acciones{display:flex;min-width:0;align-items:center;gap:.5rem}.td-header__acciones{justify-content:flex-end}.td-header__centro{min-width:0}.td-header__boton{position:relative;display:grid;width:2.55rem;height:2.55rem;place-items:center;border:1px solid transparent;border-radius:var(--td-radius-md, .75rem);padding:0;color:var(--suave);background:transparent;cursor:pointer}.td-header__boton:hover,.td-header__perfil:hover,.td-header__menu{border-color:var(--borde);color:var(--acento);background:var(--hover)}.td-header__notificaciones>span{position:absolute;top:-.05rem;right:-.12rem;display:grid;min-width:1.05rem;height:1.05rem;place-items:center;border:2px solid var(--fondo);border-radius:var(--td-radius-pill, 999px);padding:0 .15rem;color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #ef4444);font-size:.5rem;font-weight:800}.td-header__separador{width:1px;height:1.75rem;margin:0 .2rem;background:var(--borde)}.td-header__desplegable{position:relative}.td-header__perfil{display:flex;align-items:center;gap:.55rem;border:1px solid transparent;border-radius:var(--td-radius-lg, .8rem);padding:.28rem .42rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__avatar{display:grid;width:2.15rem;height:2.15rem;flex:0 0 2.15rem;place-items:center;overflow:hidden;border:2px solid color-mix(in srgb,var(--acento) 18%,var(--borde));border-radius:var(--td-radius-md, .7rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,var(--hover));font-size:.68rem;font-weight:850}.td-header__avatar img{width:100%;height:100%;object-fit:cover}.td-header__avatar--grande{width:2.8rem;height:2.8rem;flex-basis:2.8rem}.td-header__usuario{display:grid;max-width:9rem;gap:.05rem}.td-header__usuario strong,.td-header__usuario small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-header__usuario strong{font-size:.75rem}.td-header__usuario small{color:var(--suave);font-size:.66rem}.td-header__panel{position:absolute;top:calc(100% + .75rem);right:0;width:min(22rem,100vw - 1.5rem);overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);color:var(--texto);background:var(--fondo);box-shadow:var(--td-shadow-panel, 0 22px 55px rgba(15, 23, 42, .18));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:td-header-panel .14s ease-out}.td-header__panel>header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:1rem;color:var(--acento)}.td-header__panel>header div,.td-header__perfil-resumen div{display:grid;gap:.15rem}.td-header__panel>header strong,.td-header__perfil-resumen strong{color:var(--texto);font-size:.82rem}.td-header__panel>header small,.td-header__perfil-resumen small{color:var(--suave);font-size:.68rem}.td-header__lista-notificaciones{max-height:22rem;overflow-y:auto}.td-header__lista-notificaciones>button{position:relative;display:flex;width:100%;gap:.75rem;border:0;border-bottom:1px solid var(--borde);padding:.85rem 1rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__lista-notificaciones>button:hover{background:var(--hover)}.td-header__notificacion--nueva:after{position:absolute;top:1rem;right:.8rem;width:.4rem;height:.4rem;border-radius:var(--td-radius-pill, 50%);background:var(--acento);content:\"\"}.td-header__notificacion-icono{display:grid;width:2.2rem;height:2.2rem;flex:0 0 2.2rem;place-items:center;border-radius:.65rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-header__lista-notificaciones button>span:last-child{display:grid;min-width:0;gap:.18rem;padding-right:.7rem}.td-header__lista-notificaciones strong{font-size:.75rem}.td-header__lista-notificaciones small{color:var(--suave);font-size:.68rem;line-height:1.4}.td-header__lista-notificaciones time{color:var(--acento);font-size:.61rem}.td-header__ver-todas{width:100%;border:0;padding:.8rem;color:var(--acento);background:transparent;font:750 .7rem/1 inherit;cursor:pointer}.td-header__ver-todas:hover{background:var(--hover)}.td-header__vacio{margin:0;padding:2rem 1rem;color:var(--suave);font-size:.75rem;text-align:center}.td-header__panel--perfil{width:17rem}.td-header__perfil-resumen{display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--borde);padding:1rem}.td-header__perfil-opciones{padding:.45rem}.td-header__perfil-opciones button{display:flex;width:100%;align-items:center;gap:.65rem;border:0;border-radius:.55rem;padding:.65rem .7rem;color:var(--texto);background:transparent;font:600 .72rem/1 inherit;cursor:pointer}.td-header__perfil-opciones button:hover{background:var(--hover)}.td-header__perfil-opciones .td-header__salir{color:var(--td-color-danger, #dc2626)}@keyframes td-header-panel{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:640px){.td-header{grid-template-columns:1fr auto;padding-inline:.75rem}.td-header__centro,.td-header__usuario,.td-header__separador{display:none}.td-header__panel{position:fixed;top:4.5rem;right:.75rem}}\n"] }]
3712
+ args: [{ selector: 'td-header', imports: [TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header\n class=\"td-header\"\n [class.td-header--oscuro]=\"oscuro\"\n [class.td-header--fijo]=\"fijo\"\n>\n <div class=\"td-header__inicio\">\n @if (mostrarMenu) {\n <button\n class=\"td-header__boton td-header__menu\"\n type=\"button\"\n [attr.aria-label]=\"menuAbierto ? 'Cerrar sidebar' : 'Abrir sidebar'\"\n [attr.aria-expanded]=\"menuAbierto\"\n (click)=\"alternarMenu()\"\n >\n <td-icon [nombre]=\"menuAbierto ? 'close' : 'menu'\" />\n </button>\n }\n\n <ng-content select=\"[tdHeaderStart]\" />\n </div>\n\n <div class=\"td-header__centro\">\n <ng-content select=\"[tdHeaderCenter]\" />\n </div>\n\n <div class=\"td-header__acciones\">\n <ng-content select=\"[tdHeaderActions]\" />\n\n @if (mostrarNotificaciones) {\n <div class=\"td-header__desplegable\">\n <button\n class=\"td-header__boton td-header__notificaciones\"\n type=\"button\"\n aria-label=\"Notificaciones\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"panelNotificacionesAbierto\"\n (click)=\"alternarNotificaciones()\"\n >\n <td-icon nombre=\"notifications\" />\n @if (notificacionesNoLeidas() > 0) {\n <span>{{ notificacionesNoLeidas() > 99 ? '99+' : notificacionesNoLeidas() }}</span>\n }\n </button>\n\n @if (panelNotificacionesAbierto) {\n <section class=\"td-header__panel td-header__panel--notificaciones\">\n <header>\n <div>\n <strong>Notificaciones</strong>\n <small>{{ notificacionesNoLeidas() }} sin leer</small>\n </div>\n <td-icon nombre=\"notifications\" />\n </header>\n\n <div class=\"td-header__lista-notificaciones\">\n @for (notificacion of notificaciones; track notificacion.id) {\n <button\n type=\"button\"\n [class.td-header__notificacion--nueva]=\"!notificacion.leida\"\n (click)=\"seleccionarNotificacion(notificacion)\"\n >\n <span class=\"td-header__notificacion-icono\">\n <td-icon [nombre]=\"notificacion.icono || 'notifications'\" />\n </span>\n <span>\n <strong>{{ notificacion.titulo }}</strong>\n @if (notificacion.descripcion) {\n <small>{{ notificacion.descripcion }}</small>\n }\n @if (notificacion.fecha) {\n <time>{{ notificacion.fecha }}</time>\n }\n </span>\n </button>\n } @empty {\n <p class=\"td-header__vacio\">No tienes notificaciones.</p>\n }\n </div>\n\n @if (notificaciones.length) {\n <button\n class=\"td-header__ver-todas\"\n type=\"button\"\n (click)=\"verTodasNotificaciones.emit(); panelNotificacionesAbierto = false\"\n >\n Ver todas las notificaciones\n </button>\n }\n </section>\n }\n </div>\n }\n\n @if (mostrarPerfil && usuario) {\n <span class=\"td-header__separador\" aria-hidden=\"true\"></span>\n\n <div class=\"td-header__desplegable\">\n <button\n class=\"td-header__perfil\"\n type=\"button\"\n aria-label=\"Abrir perfil de usuario\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"panelPerfilAbierto\"\n (click)=\"alternarPerfil()\"\n >\n <span class=\"td-header__avatar\">\n @if (avatarUrl) {\n <img [src]=\"avatarUrl\" [alt]=\"usuario\" />\n } @else {\n {{ inicialesUsuario() }}\n }\n </span>\n <span class=\"td-header__usuario\">\n <strong>{{ usuario }}</strong>\n @if (cargo) {\n <small>{{ cargo }}</small>\n }\n </span>\n <td-icon nombre=\"chevron_down\" tamano=\"0.85rem\" />\n </button>\n\n @if (panelPerfilAbierto) {\n <section class=\"td-header__panel td-header__panel--perfil\">\n <div class=\"td-header__perfil-resumen\">\n <span class=\"td-header__avatar td-header__avatar--grande\">\n @if (avatarUrl) {\n <img [src]=\"avatarUrl\" [alt]=\"usuario\" />\n } @else {\n {{ inicialesUsuario() }}\n }\n </span>\n <div>\n <strong>{{ usuario }}</strong>\n <small>{{ cargo || 'Usuario' }}</small>\n </div>\n </div>\n <div class=\"td-header__perfil-opciones\">\n @for (accion of accionesPerfilVisibles(); track accion.id) {\n <button\n type=\"button\"\n [class.td-header__salir]=\"accion.tono === 'danger'\"\n (click)=\"emitirAccionPerfil(accion)\"\n >\n @if (accion.icono) {\n <td-icon [nombre]=\"accion.icono\" />\n }\n <span>\n <strong>{{ accion.etiqueta }}</strong>\n @if (accion.descripcion) {\n <small>{{ accion.descripcion }}</small>\n }\n </span>\n </button>\n }\n </div>\n </section>\n }\n </div>\n }\n </div>\n</header>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-header{--fondo: color-mix(in srgb, var(--td-color-surface, #fff) 92%, transparent);--borde: var(--td-color-border, #e5e9f1);--texto: var(--td-color-text, #172036);--suave: var(--td-color-text-muted, #7b8498);--hover: var(--td-color-surface-soft, #f3f5fa);--acento: var(--td-color-primary, #5746d8);position:relative;z-index:var(--td-z-header, 800);display:grid;min-height:4.25rem;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;border-bottom:1px solid var(--borde);padding:.65rem 1.25rem;color:var(--texto);background:var(--fondo);box-shadow:var(--td-shadow-header, 0 8px 30px rgba(35, 42, 68, .05));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-header--fijo{position:sticky;top:0}.td-header--oscuro{--fondo: color-mix(in srgb, var(--td-color-surface, #181b22) 94%, transparent);--borde: var(--td-color-border, #2b2c35);--texto: var(--td-color-text, #f5f5f6);--suave: var(--td-color-text-muted, #92929f);--hover: var(--td-color-surface-soft, #272730);--acento: var(--td-color-primary, #a89cf7)}.td-header__inicio,.td-header__acciones{display:flex;min-width:0;align-items:center;gap:.5rem}.td-header__acciones{justify-content:flex-end}.td-header__centro{min-width:0}:host ::ng-deep [tdHeaderStart],:host ::ng-deep [tdHeaderCenter],:host ::ng-deep [tdHeaderActions]{min-width:0}:host ::ng-deep [tdHeaderActions]{flex:0 0 auto}.td-header__boton{position:relative;display:grid;width:2.55rem;height:2.55rem;place-items:center;border:1px solid transparent;border-radius:var(--td-radius-md, .75rem);padding:0;color:var(--suave);background:transparent;cursor:pointer}.td-header__boton:hover,.td-header__perfil:hover,.td-header__menu{border-color:var(--borde);color:var(--acento);background:var(--hover)}.td-header__notificaciones>span{position:absolute;top:-.05rem;right:-.12rem;display:grid;min-width:1.05rem;height:1.05rem;place-items:center;border:2px solid var(--fondo);border-radius:var(--td-radius-pill, 999px);padding:0 .15rem;color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #ef4444);font-size:.5rem;font-weight:800}.td-header__separador{width:1px;height:1.75rem;margin:0 .2rem;background:var(--borde)}.td-header__desplegable{position:relative}.td-header__perfil{display:flex;align-items:center;gap:.55rem;border:1px solid transparent;border-radius:var(--td-radius-lg, .8rem);padding:.28rem .42rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__avatar{display:grid;width:2.15rem;height:2.15rem;flex:0 0 2.15rem;place-items:center;overflow:hidden;border:2px solid color-mix(in srgb,var(--acento) 18%,var(--borde));border-radius:var(--td-radius-md, .7rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,var(--hover));font-size:.68rem;font-weight:850}.td-header__avatar img{width:100%;height:100%;object-fit:cover}.td-header__avatar--grande{width:2.8rem;height:2.8rem;flex-basis:2.8rem}.td-header__usuario{display:grid;max-width:9rem;gap:.05rem}.td-header__usuario strong,.td-header__usuario small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-header__usuario strong{font-size:.75rem}.td-header__usuario small{color:var(--suave);font-size:.66rem}.td-header__panel{position:absolute;top:calc(100% + .75rem);right:0;width:min(22rem,100vw - 1.5rem);overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);color:var(--texto);background:var(--fondo);box-shadow:var(--td-shadow-panel, 0 22px 55px rgba(15, 23, 42, .18));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:td-header-panel .14s ease-out}.td-header__panel>header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:1rem;color:var(--acento)}.td-header__panel>header div,.td-header__perfil-resumen div{display:grid;gap:.15rem}.td-header__panel>header strong,.td-header__perfil-resumen strong{color:var(--texto);font-size:.82rem}.td-header__panel>header small,.td-header__perfil-resumen small{color:var(--suave);font-size:.68rem}.td-header__lista-notificaciones{max-height:22rem;overflow-y:auto}.td-header__lista-notificaciones>button{position:relative;display:flex;width:100%;gap:.75rem;border:0;border-bottom:1px solid var(--borde);padding:.85rem 1rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__lista-notificaciones>button:hover{background:var(--hover)}.td-header__notificacion--nueva:after{position:absolute;top:1rem;right:.8rem;width:.4rem;height:.4rem;border-radius:var(--td-radius-pill, 50%);background:var(--acento);content:\"\"}.td-header__notificacion-icono{display:grid;width:2.2rem;height:2.2rem;flex:0 0 2.2rem;place-items:center;border-radius:.65rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-header__lista-notificaciones button>span:last-child{display:grid;min-width:0;gap:.18rem;padding-right:.7rem}.td-header__lista-notificaciones strong{font-size:.75rem}.td-header__lista-notificaciones small{color:var(--suave);font-size:.68rem;line-height:1.4}.td-header__lista-notificaciones time{color:var(--acento);font-size:.61rem}.td-header__ver-todas{width:100%;border:0;padding:.8rem;color:var(--acento);background:transparent;font:750 .7rem/1 inherit;cursor:pointer}.td-header__ver-todas:hover{background:var(--hover)}.td-header__vacio{margin:0;padding:2rem 1rem;color:var(--suave);font-size:.75rem;text-align:center}.td-header__panel--perfil{width:17rem}.td-header__perfil-resumen{display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--borde);padding:1rem}.td-header__perfil-opciones{padding:.45rem}.td-header__perfil-opciones button{display:flex;width:100%;align-items:center;gap:.65rem;border:0;border-radius:.55rem;padding:.65rem .7rem;color:var(--texto);background:transparent;font:600 .72rem/1 inherit;cursor:pointer}.td-header__perfil-opciones button:hover{background:var(--hover)}.td-header__perfil-opciones .td-header__salir{color:var(--td-color-danger, #dc2626)}.td-header__perfil-opciones button>span{display:grid;min-width:0;gap:.12rem}.td-header__perfil-opciones button strong,.td-header__perfil-opciones button small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-header__perfil-opciones button strong{color:inherit;font-size:.72rem}.td-header__perfil-opciones button small{color:var(--suave);font-size:.64rem;font-weight:500}@keyframes td-header-panel{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:640px){.td-header{grid-template-columns:1fr auto;padding-inline:.75rem}.td-header__centro,.td-header__usuario,.td-header__separador{display:none}.td-header__acciones{gap:.35rem}:host ::ng-deep [tdHeaderActions]{max-width:min(11rem,42vw)}.td-header__panel{position:fixed;top:4.5rem;right:.75rem}}\n"] }]
3695
3713
  }], propDecorators: { menuAbierto: [{
3696
3714
  type: Input
3697
3715
  }], mostrarMenu: [{
@@ -3708,6 +3726,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
3708
3726
  type: Input
3709
3727
  }], fijo: [{
3710
3728
  type: Input
3729
+ }], mostrarNotificaciones: [{
3730
+ type: Input,
3731
+ args: [{ transform: booleanAttribute }]
3732
+ }], mostrarPerfil: [{
3733
+ type: Input,
3734
+ args: [{ transform: booleanAttribute }]
3735
+ }], perfilAcciones: [{
3736
+ type: Input
3711
3737
  }], menuToggle: [{
3712
3738
  type: Output
3713
3739
  }], notificacionSeleccionada: [{
@@ -3716,6 +3742,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
3716
3742
  type: Output
3717
3743
  }], accionPerfil: [{
3718
3744
  type: Output
3745
+ }], perfilAccionSeleccionada: [{
3746
+ type: Output
3719
3747
  }], cerrarConEscape: [{
3720
3748
  type: HostListener,
3721
3749
  args: ['document:keydown.escape']
@@ -6254,6 +6282,8 @@ class TdSidebar {
6254
6282
  ...(ngDevMode ? [{ debugName: "menuNormalizado" }] : /* istanbul ignore next */ []));
6255
6283
  expandidos = signal(new Set(), /* @ts-ignore */
6256
6284
  ...(ngDevMode ? [{ debugName: "expandidos" }] : /* istanbul ignore next */ []));
6285
+ rutaSeleccionada = signal('', /* @ts-ignore */
6286
+ ...(ngDevMode ? [{ debugName: "rutaSeleccionada" }] : /* istanbul ignore next */ []));
6257
6287
  constructor() {
6258
6288
  this.router.events
6259
6289
  .pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef))
@@ -6276,6 +6306,10 @@ class TdSidebar {
6276
6306
  seleccionarItem(item, nivel) {
6277
6307
  this.seleccionar.emit({ item, nivel });
6278
6308
  }
6309
+ esItemSeleccionado(item) {
6310
+ const ruta = this.normalizarRuta(item.ruta);
6311
+ return !!ruta && ruta === this.rutaSeleccionada();
6312
+ }
6279
6313
  claveItem(item, padre, indice) {
6280
6314
  return `${padre}/${item.nombre}-${indice}`;
6281
6315
  }
@@ -6293,7 +6327,9 @@ class TdSidebar {
6293
6327
  }
6294
6328
  expandirRutaActual() {
6295
6329
  const rutaActual = this.normalizarRuta(this.router.url);
6296
- const clavesPadre = this.buscarClavesPadrePorRuta(this.menuNormalizado(), rutaActual);
6330
+ const coincidencia = this.buscarMejorCoincidenciaPorRuta(this.menuNormalizado(), rutaActual);
6331
+ this.rutaSeleccionada.set(coincidencia?.ruta ?? '');
6332
+ const clavesPadre = coincidencia?.ancestros ?? [];
6297
6333
  if (!clavesPadre.length)
6298
6334
  return;
6299
6335
  this.expandidos.update((actuales) => {
@@ -6302,19 +6338,37 @@ class TdSidebar {
6302
6338
  return siguientes;
6303
6339
  });
6304
6340
  }
6305
- buscarClavesPadrePorRuta(items, rutaActual, padre = 'raiz', ancestros = []) {
6341
+ buscarMejorCoincidenciaPorRuta(items, rutaActual, padre = 'raiz', ancestros = []) {
6342
+ let mejor = null;
6306
6343
  for (let indice = 0; indice < items.length; indice += 1) {
6307
6344
  const item = items[indice];
6308
6345
  const clave = this.claveItem(item, padre, indice);
6309
6346
  const ruta = this.normalizarRuta(item.ruta);
6310
- if (ruta && ruta === rutaActual) {
6311
- return ancestros;
6347
+ if (this.rutaCoincide(ruta, rutaActual)) {
6348
+ mejor = this.mejorCoincidencia(mejor, {
6349
+ ruta,
6350
+ ancestros,
6351
+ peso: ruta === rutaActual ? Number.MAX_SAFE_INTEGER : ruta.length,
6352
+ });
6312
6353
  }
6313
- const resultado = this.buscarClavesPadrePorRuta(item.subMenus ?? [], rutaActual, clave, [...ancestros, clave]);
6314
- if (resultado.length)
6315
- return resultado;
6354
+ const resultado = this.buscarMejorCoincidenciaPorRuta(item.subMenus ?? [], rutaActual, clave, [...ancestros, clave]);
6355
+ mejor = this.mejorCoincidencia(mejor, resultado);
6316
6356
  }
6317
- return [];
6357
+ return mejor;
6358
+ }
6359
+ mejorCoincidencia(actual, candidata) {
6360
+ if (!candidata)
6361
+ return actual;
6362
+ if (!actual)
6363
+ return candidata;
6364
+ return candidata.peso > actual.peso ? candidata : actual;
6365
+ }
6366
+ rutaCoincide(rutaMenu, rutaActual) {
6367
+ if (!rutaMenu)
6368
+ return false;
6369
+ if (rutaMenu === '/')
6370
+ return rutaActual === '/';
6371
+ return rutaActual === rutaMenu || rutaActual.startsWith(`${rutaMenu}/`);
6318
6372
  }
6319
6373
  normalizarRuta(ruta) {
6320
6374
  if (!ruta)
@@ -6325,11 +6379,11 @@ class TdSidebar {
6325
6379
  return limpia.endsWith('/') ? limpia.slice(0, -1) : limpia;
6326
6380
  }
6327
6381
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
6328
- 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 [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 [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 });
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 });
6329
6383
  }
6330
6384
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdSidebar, decorators: [{
6331
6385
  type: Component,
6332
- 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 [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 [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"] }]
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"] }]
6333
6387
  }], ctorParameters: () => [], propDecorators: { titulo: [{
6334
6388
  type: Input
6335
6389
  }], subtitulo: [{