structra-ui 0.2.15 → 0.2.17

package/fesm2022/structra-ui.mjs

@@ -1,6 +1,6 @@
 import '../structra-ui.css';
 import * as i0 from '@angular/core';
-import { signal, booleanAttribute, Input, ChangeDetectionStrategy, Component, ElementRef, HostBinding, ViewChild, inject, ChangeDetectorRef, Injector, DestroyRef, EventEmitter, Output, Directive, numberAttribute, computed, Injectable, Renderer2, HostListener, ViewChildren, forwardRef, ApplicationRef, afterNextRender, ContentChildren, NgZone, ViewContainerRef, TemplateRef, ContentChild } from '@angular/core';
+import { signal, booleanAttribute, Input, HostBinding, ChangeDetectionStrategy, Component, ElementRef, ViewChild, inject, ChangeDetectorRef, Injector, DestroyRef, EventEmitter, Output, Directive, numberAttribute, computed, Injectable, Renderer2, input, HostListener, ViewChildren, forwardRef, ApplicationRef, afterNextRender, ContentChildren, NgZone, ViewContainerRef, TemplateRef, ContentChild } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { Validators, FormGroupDirective, NgForm, NgControl, NG_VALUE_ACCESSOR, FormsModule, FormGroup, FormArray, FormControl } from '@angular/forms';
@@ -42,6 +42,10 @@ class AlertComponent {
             info: 'alert--info',
         };
     }
+    /** Remove o host do fluxo ao fechar (evita faixa em branco com `display: block` vazio). */
+    get hostHidden() {
+        return !this.visible();
+    }
     get hasMessage() {
         return this.message != null && String(this.message).trim().length > 0;
     }
@@ -52,12 +56,15 @@ class AlertComponent {
         this.visible.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AlertComponent, isStandalone: true, selector: "app-alert", inputs: { type: "type", message: "message", closable: ["closable", "closable", booleanAttribute] }, ngImport: i0, template: "@if (visible()) {\r\n  <div [class]=\"alertHostClass\" role=\"alert\">\r\n    <div class=\"alert__content\">\r\n      @if (hasMessage) {\r\n        <span class=\"alert__text\">{{ message }}</span>\r\n      } @else {\r\n        <span class=\"alert__text\"><ng-content /></span>\r\n      }\r\n    </div>\r\n\r\n    @if (closable) {\r\n      <button type=\"button\" class=\"alert__close\" aria-label=\"Fechar alerta\" (click)=\"onClose()\">\r\n        <span aria-hidden=\"true\">&times;</span>\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;max-width:100%;box-sizing:border-box}.alert{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;border-radius:var(--radius-md, 12px);border:1px solid;font-size:.875rem;line-height:1.4;font-family:var(--structra-font-family);font-weight:var(--structra-body-weight, 400)}.alert__content{flex:1 1 auto;min-width:0}.alert__text{display:block;word-wrap:break-word}.alert__close{flex-shrink:0;margin:0;padding:0 .125rem;background:transparent;border:none;cursor:pointer;font-size:1rem;line-height:1;color:inherit;opacity:.65;transition:opacity .12s ease}.alert__close:hover{opacity:1}.alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:4px}.alert--error{background:var(--ui-validation-summary-bg-error, #fef2f2);border-color:var(--ui-validation-summary-border-error, #fecaca);color:var(--ui-validation-summary-title-error, #991b1b)}.alert--success{color:var(--app-color-success, #166534);background:color-mix(in srgb,var(--app-color-success, #15803d) 10%,var(--app-color-surface, #ffffff));border-color:color-mix(in srgb,var(--app-color-success, #15803d) 28%,#ffffff)}.alert--warning{background:var(--ui-validation-summary-bg-warning, #fffbeb);border-color:var(--ui-validation-summary-border-warning, #fef3c7);color:var(--ui-validation-summary-title-warning, #92400e)}.alert--info{background:var(--ui-validation-summary-bg-info, #eff6ff);border-color:var(--ui-validation-summary-border-info, #bfdbfe);color:var(--ui-validation-summary-title-info, #1e3a8a)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AlertComponent, isStandalone: true, selector: "app-alert", inputs: { type: "type", message: "message", closable: ["closable", "closable", booleanAttribute] }, host: { properties: { "hidden": "this.hostHidden" } }, ngImport: i0, template: "@if (visible()) {\r\n  <div [class]=\"alertHostClass\" role=\"alert\">\r\n    <div class=\"alert__content\">\r\n      @if (hasMessage) {\r\n        <span class=\"alert__text\">{{ message }}</span>\r\n      } @else {\r\n        <span class=\"alert__text\"><ng-content /></span>\r\n      }\r\n    </div>\r\n\r\n    @if (closable) {\r\n      <button type=\"button\" class=\"alert__close\" aria-label=\"Fechar alerta\" (click)=\"onClose()\">\r\n        <span aria-hidden=\"true\">&times;</span>\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;max-width:100%;box-sizing:border-box}:host([hidden]){display:none!important}.alert{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;border-radius:var(--radius-md, 12px);border:1px solid;font-size:.875rem;line-height:1.4;font-family:var(--structra-font-family);font-weight:var(--structra-body-weight, 400)}.alert__content{flex:1 1 auto;min-width:0}.alert__text{display:block;word-wrap:break-word}.alert__close{flex-shrink:0;margin:0;padding:0 .125rem;background:transparent;border:none;cursor:pointer;font-size:1rem;line-height:1;color:inherit;opacity:.65;transition:opacity .12s ease}.alert__close:hover{opacity:1}.alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:4px}.alert--error{background:var(--ui-validation-summary-bg-error, #fef2f2);border-color:var(--ui-validation-summary-border-error, #fecaca);color:var(--ui-validation-summary-title-error, #991b1b)}.alert--success{color:var(--app-color-success, #166534);background:color-mix(in srgb,var(--app-color-success, #15803d) 10%,var(--app-color-surface, #ffffff));border-color:color-mix(in srgb,var(--app-color-success, #15803d) 28%,#ffffff)}.alert--warning{background:var(--ui-validation-summary-bg-warning, #fffbeb);border-color:var(--ui-validation-summary-border-warning, #fef3c7);color:var(--ui-validation-summary-title-warning, #92400e)}.alert--info{background:var(--ui-validation-summary-bg-info, #eff6ff);border-color:var(--ui-validation-summary-border-info, #bfdbfe);color:var(--ui-validation-summary-title-info, #1e3a8a)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-alert', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible()) {\r\n  <div [class]=\"alertHostClass\" role=\"alert\">\r\n    <div class=\"alert__content\">\r\n      @if (hasMessage) {\r\n        <span class=\"alert__text\">{{ message }}</span>\r\n      } @else {\r\n        <span class=\"alert__text\"><ng-content /></span>\r\n      }\r\n    </div>\r\n\r\n    @if (closable) {\r\n      <button type=\"button\" class=\"alert__close\" aria-label=\"Fechar alerta\" (click)=\"onClose()\">\r\n        <span aria-hidden=\"true\">&times;</span>\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;max-width:100%;box-sizing:border-box}.alert{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;border-radius:var(--radius-md, 12px);border:1px solid;font-size:.875rem;line-height:1.4;font-family:var(--structra-font-family);font-weight:var(--structra-body-weight, 400)}.alert__content{flex:1 1 auto;min-width:0}.alert__text{display:block;word-wrap:break-word}.alert__close{flex-shrink:0;margin:0;padding:0 .125rem;background:transparent;border:none;cursor:pointer;font-size:1rem;line-height:1;color:inherit;opacity:.65;transition:opacity .12s ease}.alert__close:hover{opacity:1}.alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:4px}.alert--error{background:var(--ui-validation-summary-bg-error, #fef2f2);border-color:var(--ui-validation-summary-border-error, #fecaca);color:var(--ui-validation-summary-title-error, #991b1b)}.alert--success{color:var(--app-color-success, #166534);background:color-mix(in srgb,var(--app-color-success, #15803d) 10%,var(--app-color-surface, #ffffff));border-color:color-mix(in srgb,var(--app-color-success, #15803d) 28%,#ffffff)}.alert--warning{background:var(--ui-validation-summary-bg-warning, #fffbeb);border-color:var(--ui-validation-summary-border-warning, #fef3c7);color:var(--ui-validation-summary-title-warning, #92400e)}.alert--info{background:var(--ui-validation-summary-bg-info, #eff6ff);border-color:var(--ui-validation-summary-border-info, #bfdbfe);color:var(--ui-validation-summary-title-info, #1e3a8a)}\n"] }]
-        }], propDecorators: { type: [{
+            args: [{ selector: 'app-alert', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible()) {\r\n  <div [class]=\"alertHostClass\" role=\"alert\">\r\n    <div class=\"alert__content\">\r\n      @if (hasMessage) {\r\n        <span class=\"alert__text\">{{ message }}</span>\r\n      } @else {\r\n        <span class=\"alert__text\"><ng-content /></span>\r\n      }\r\n    </div>\r\n\r\n    @if (closable) {\r\n      <button type=\"button\" class=\"alert__close\" aria-label=\"Fechar alerta\" (click)=\"onClose()\">\r\n        <span aria-hidden=\"true\">&times;</span>\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;max-width:100%;box-sizing:border-box}:host([hidden]){display:none!important}.alert{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;border-radius:var(--radius-md, 12px);border:1px solid;font-size:.875rem;line-height:1.4;font-family:var(--structra-font-family);font-weight:var(--structra-body-weight, 400)}.alert__content{flex:1 1 auto;min-width:0}.alert__text{display:block;word-wrap:break-word}.alert__close{flex-shrink:0;margin:0;padding:0 .125rem;background:transparent;border:none;cursor:pointer;font-size:1rem;line-height:1;color:inherit;opacity:.65;transition:opacity .12s ease}.alert__close:hover{opacity:1}.alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:4px}.alert--error{background:var(--ui-validation-summary-bg-error, #fef2f2);border-color:var(--ui-validation-summary-border-error, #fecaca);color:var(--ui-validation-summary-title-error, #991b1b)}.alert--success{color:var(--app-color-success, #166534);background:color-mix(in srgb,var(--app-color-success, #15803d) 10%,var(--app-color-surface, #ffffff));border-color:color-mix(in srgb,var(--app-color-success, #15803d) 28%,#ffffff)}.alert--warning{background:var(--ui-validation-summary-bg-warning, #fffbeb);border-color:var(--ui-validation-summary-border-warning, #fef3c7);color:var(--ui-validation-summary-title-warning, #92400e)}.alert--info{background:var(--ui-validation-summary-bg-info, #eff6ff);border-color:var(--ui-validation-summary-border-info, #bfdbfe);color:var(--ui-validation-summary-title-info, #1e3a8a)}\n"] }]
+        }], propDecorators: { hostHidden: [{
+                type: HostBinding,
+                args: ['hidden']
+            }], type: [{
                 type: Input
             }], message: [{
                 type: Input
@@ -820,6 +827,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 args: ['appTheme']
             }] } });
 
+/**
+ * Tema efectivo para hosts/overlays: valor de `[appTheme]` quando definido; caso contrário
+ * {@link AppThemeService.activeThemeId} (mesmo comportamento que antes sem input).
+ */
+function injectEffectiveThemeId(appTheme) {
+    const svc = inject(AppThemeService);
+    return computed(() => {
+        const v = appTheme();
+        if (v !== undefined && v !== null && String(v).trim() !== '') {
+            return normalizeStructraTheme(v);
+        }
+        return svc.activeThemeId();
+    });
+}
+
 /** Posição por omissão do CDK (equivalente ao comportamento anterior sem `positions` explícitas). */
 const DEFAULT_CONNECTED_POSITIONS = [
     {
@@ -1081,8 +1103,10 @@ const SUBMENU_CLOSE_MS = 1200;
 class MenuListComponent {
     constructor() {
         this.cdr = inject(ChangeDetectorRef);
-        this.appTheme = inject(AppThemeService);
         this.hostRef = inject((ElementRef));
+        /** Igual a `[appTheme]` na lib; omitir = tema global (ex.: propagado por `app-sidebar`). */
+        this.appTheme = input(...(ngDevMode ? [undefined, { debugName: "appTheme" }] : /* istanbul ignore next */ []));
+        this.effectiveThemeId = injectEffectiveThemeId(this.appTheme);
         this.items = [];
         /** Prefixo dos `id` das opções focáveis (`${menuId}-opt-${focusIndex}`). */
         this.menuId = 'app-menu';
@@ -1110,10 +1134,13 @@ class MenuListComponent {
         this.submenuOpenTimer = null;
         this.submenuCloseTimer = null;
         this.submenuPositions = submenuConnectedPositions();
-        this.panelThemeNgClass = computed(() => this.appTheme.themeClassMap(), ...(ngDevMode ? [{ debugName: "panelThemeNgClass" }] : /* istanbul ignore next */ []));
+        this.panelThemeNgClass = computed(() => {
+            const [base, token] = getThemeClassList(this.effectiveThemeId());
+            return { [base]: true, [token]: true };
+        }, ...(ngDevMode ? [{ debugName: "panelThemeNgClass" }] : /* istanbul ignore next */ []));
     }
     overlayPanelClasses() {
-        return [...this.appTheme.themeClassList(), 'menu-submenu__cdk-panel'];
+        return [...getThemeClassList(this.effectiveThemeId()), 'menu-submenu__cdk-panel'];
     }
     onNestedItemSelect(id) {
         this.closeOpenSubmenu();
@@ -1426,7 +1453,7 @@ class MenuListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MenuListComponent, isStandalone: true, selector: "app-menu-list", inputs: { items: "items", menuId: "menuId", dense: ["dense", "dense", booleanAttribute], nested: ["nested", "nested", booleanAttribute], selectedItemId: "selectedItemId", compressText: ["compressText", "compressText", booleanAttribute] }, outputs: { itemSelect: "itemSelect", closeRequest: "closeRequest", submenuBack: "submenuBack" }, host: { listeners: { "keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "nestedLists", predicate: MenuListComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"menu-list\"\n  [class.menu-list--dense]=\"dense\"\n  [class.menu-list--compress-text]=\"compressText\"\n  role=\"menu\"\n  [attr.aria-labelledby]=\"null\"\n  tabindex=\"-1\"\n  (mouseleave)=\"onMenuSurfaceLeave()\"\n>\n  @for (row of rows; track idx; let idx = $index) {\n    @switch (row.kind) {\n      @case ('divider') {\n        <app-menu-divider />\n      }\n      @case ('group') {\n        <app-menu-group [label]=\"row.label\" [hideLabel]=\"compressText\" />\n      }\n      @case ('submenu') {\n        <div\n          class=\"menu-list__submenu-wrap\"\n          cdkOverlayOrigin\n          #subOrigin=\"cdkOverlayOrigin\"\n          (mouseenter)=\"onSubmenuTriggerEnter(row, idx)\"\n          (mouseleave)=\"onSubmenuTriggerLeave(row, idx)\"\n        >\n          <div\n            class=\"menu-list__option menu-list__option--submenu\"\n            role=\"menuitem\"\n            [attr.aria-haspopup]=\"'true'\"\n            [attr.aria-expanded]=\"isSubmenuOpen(row, idx)\"\n            [id]=\"row.focusIndex !== null ? optionId(row.focusIndex) : null\"\n            [attr.tabindex]=\"row.focusIndex !== null && !row.item.disabled ? (isActiveRow(row) ? 0 : -1) : -1\"\n            [attr.aria-disabled]=\"row.item.disabled ? true : null\"\n            [attr.title]=\"compressText ? row.item.label : null\"\n            [attr.aria-label]=\"compressText ? row.item.label : null\"\n            [class.menu-list__option--disabled]=\"row.item.disabled\"\n            [class.menu-list__option--active]=\"isActiveRow(row)\"\n            [class.menu-list__option--selected]=\"isRowSelected(row)\"\n            (click)=\"onSubmenuRowClick($event, row, idx)\"\n            (mouseenter)=\"onRowMouseEnter(row)\"\n          >\n            @if (row.item.icon?.trim()) {\n              <span class=\"menu-list__icon\" aria-hidden=\"true\">\n                <i [ngClass]=\"row.item.icon\"></i>\n              </span>\n            }\n            <span class=\"menu-list__text\">\n              <span class=\"menu-list__label\">{{ row.item.label }}</span>\n              @if (row.item.description?.trim()) {\n                <span class=\"menu-list__description\">{{ row.item.description }}</span>\n              }\n            </span>\n            <span class=\"menu-list__submenu-chevron\" aria-hidden=\"true\">\u203A</span>\n          </div>\n          <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"subOrigin\"\n            [cdkConnectedOverlayOpen]=\"isSubmenuOpen(row, idx)\"\n            [cdkConnectedOverlayPositions]=\"submenuPositions\"\n            [cdkConnectedOverlayPush]=\"true\"\n            [cdkConnectedOverlayPanelClass]=\"overlayPanelClasses()\"\n            [cdkConnectedOverlayMinWidth]=\"200\"\n            (overlayOutsideClick)=\"onSubmenuOutsideClick(row, idx)\"\n          >\n            <div\n              class=\"menu-submenu__panel\"\n              [ngClass]=\"panelThemeNgClass()\"\n              (mouseenter)=\"onSubmenuPanelEnter()\"\n              (mouseleave)=\"onSubmenuPanelLeave(row, idx)\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <app-menu-list\n                [items]=\"row.item.items\"\n                [menuId]=\"submenuMenuId(row)\"\n                [nested]=\"true\"\n                [dense]=\"dense\"\n                [compressText]=\"compressText\"\n                [selectedItemId]=\"selectedItemId\"\n                (itemSelect)=\"onNestedItemSelect($event)\"\n                (closeRequest)=\"closeRequest.emit()\"\n                (submenuBack)=\"closeOpenSubmenu()\"\n              />\n            </div>\n          </ng-template>\n        </div>\n      }\n      @case ('action') {\n        <div\n          class=\"menu-list__option\"\n          role=\"menuitem\"\n          [id]=\"row.focusIndex !== null ? optionId(row.focusIndex) : null\"\n          [attr.tabindex]=\"row.focusIndex !== null && !row.item.disabled ? (isActiveRow(row) ? 0 : -1) : -1\"\n          [attr.aria-disabled]=\"row.item.disabled ? true : null\"\n          [attr.aria-busy]=\"row.item.loading ? true : null\"\n          [attr.title]=\"compressText ? row.item.label : null\"\n          [attr.aria-label]=\"compressText ? row.item.label : null\"\n          [class.menu-list__option--disabled]=\"row.item.disabled\"\n          [class.menu-list__option--loading]=\"row.item.loading\"\n          [class.menu-list__option--danger]=\"row.item.danger\"\n          [class.menu-list__option--active]=\"isActiveRow(row)\"\n          [class.menu-list__option--selected]=\"isRowSelected(row)\"\n          (click)=\"onItemClick($event, row.item)\"\n          (mouseenter)=\"onRowMouseEnter(row)\"\n        >\n          @if (row.item.loading) {\n            <span class=\"menu-list__icon menu-list__icon--spin\" aria-hidden=\"true\">\n              <i class=\"fa-solid fa-spinner\"></i>\n            </span>\n          } @else if (row.item.icon?.trim()) {\n            <span class=\"menu-list__icon\" aria-hidden=\"true\">\n              <i [ngClass]=\"row.item.icon\"></i>\n            </span>\n          }\n          <span class=\"menu-list__text\">\n            <span class=\"menu-list__label\">{{ row.item.label }}</span>\n            @if (row.item.description?.trim()) {\n              <span class=\"menu-list__description\">{{ row.item.description }}</span>\n            }\n          </span>\n        </div>\n      }\n    }\n  }\n</div>\n", styles: ["@charset \"UTF-8\";@keyframes app-sidebar-nav-reveal-in{0%{opacity:0;transform:translate3d(-.45rem,0,0)}to{opacity:1;transform:translateZ(0)}}:host{display:block;min-width:0;box-sizing:border-box}.menu-list{background:var(--app-color-surface, #ffffff);border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .12));border-radius:10px;box-shadow:0 10px 28px -14px #0f172a29;max-height:min(70vh,22rem);overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;gap:.1rem;padding:.45rem 0;outline:none}.menu-list--dense{padding:.2rem 0;gap:0}.menu-list__submenu-wrap{position:relative;display:block}.menu-list__option{display:flex;align-items:center;box-sizing:border-box;gap:.5rem;margin:0 .25rem;padding:.48rem .6rem;border-radius:8px;cursor:pointer;color:var(--app-color-text-primary, #1a2f45);background:transparent;border:1px solid transparent;text-align:left;font:inherit;line-height:1.25}.menu-list__option:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:1px}.menu-list__option:hover:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:color-mix(in srgb,var(--app-color-primary) 6%,transparent)}.menu-list__option.menu-list__option--active:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:color-mix(in srgb,var(--app-color-primary) 7%,transparent);border-color:transparent}.menu-list__option.menu-list__option--active:not(.menu-list__option--disabled):not(.menu-list__option--loading):not(.menu-list__option--selected){box-shadow:none}.menu-list__option.menu-list__option--disabled{cursor:not-allowed;color:var(--app-color-text-muted, #6b8299);background:transparent;opacity:.72}.menu-list__option.menu-list__option--loading{cursor:wait;opacity:.92;pointer-events:none}.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading){color:var(--app-color-error, #b91c1c)}.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading):hover,.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading).menu-list__option--active{background:var(--app-color-error-bg-subtle, rgba(185, 28, 28, .12));border-color:transparent;box-shadow:inset 2px 0 0 0 var(--app-color-error-border, #dc2626)}.menu-list__option--submenu{padding-right:.35rem}.menu-list__option--selected:not(.menu-list__option--disabled){background:color-mix(in srgb,var(--app-color-primary) 9%,transparent);border-radius:8px;border-color:transparent;box-shadow:inset 2px 0 0 0 var(--app-color-primary, #2b7fd9)}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__label{color:var(--app-color-primary, #2b7fd9);font-weight:600}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__icon{color:var(--app-color-primary, #2b7fd9)}.menu-list--compress-text .menu-list__label,.menu-list--compress-text .menu-list__description{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.menu-list--compress-text .menu-list__text,.menu-list--compress-text .menu-list__submenu-chevron{display:none}.menu-list--compress-text .menu-list__submenu-wrap{width:100%}.menu-list--compress-text .menu-list__option{justify-content:center;align-items:center;text-align:center;width:calc(100% - .5rem);max-width:100%;box-sizing:border-box;margin-left:.25rem;margin-right:.25rem;padding:.5rem .35rem}.menu-list--compress-text .menu-list__option--submenu{padding-left:.35rem;padding-right:.35rem}.menu-list--compress-text .menu-list__icon{flex:0 0 auto;width:auto;min-width:1.75rem;display:inline-flex;align-items:center;justify-content:center;padding-top:0}.menu-list__submenu-chevron{flex:0 0 auto;margin-left:auto;padding-left:.35rem;font-size:1rem;line-height:1;color:var(--app-color-text-muted, #6b8299);opacity:.85}.menu-list__icon{flex:0 0 auto;width:1.25rem;height:1.25rem;min-height:1.25rem;display:inline-flex;align-items:center;justify-content:center;text-align:center;color:var(--app-color-text-secondary, #5a7fa3);line-height:1}.menu-list__icon i{display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:1;font-size:.95rem}.menu-list__option--disabled .menu-list__icon{opacity:.55}.menu-list__icon--spin i{animation:menu-list-spin .8s linear infinite}.menu-list__text{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}.menu-list__label{font-size:.875rem;font-weight:500;line-height:1.25rem;display:inline-flex;align-items:center;min-height:1.25rem}.menu-list__description{font-size:.75rem;color:var(--app-color-text-muted, #6b8299);line-height:1.3}.menu-list:not(.menu-list--compress-text){animation:app-sidebar-nav-reveal-in .45s cubic-bezier(.16,1,.32,1) both}@media(prefers-reduced-motion:reduce){.menu-list:not(.menu-list--compress-text){animation:none}}.menu-submenu__panel{box-sizing:border-box;min-width:0;padding:0;background:transparent;border:none;box-shadow:none;border-radius:10px;overflow:hidden}@keyframes menu-list-spin{to{transform:rotate(360deg)}}:host ::ng-deep .menu-submenu__cdk-panel{background:transparent;box-shadow:none;border-radius:10px}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => MenuListComponent), selector: "app-menu-list", inputs: ["items", "menuId", "dense", "nested", "selectedItemId", "compressText"], outputs: ["itemSelect", "closeRequest", "submenuBack"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => CdkConnectedOverlay), selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i0.forwardRef(() => CdkOverlayOrigin), selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i0.forwardRef(() => MenuDividerComponent), selector: "app-menu-divider" }, { kind: "component", type: i0.forwardRef(() => MenuGroupComponent), selector: "app-menu-group", inputs: ["label", "hideLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MenuListComponent, isStandalone: true, selector: "app-menu-list", inputs: { appTheme: { classPropertyName: "appTheme", publicName: "appTheme", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: true, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: false, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, nested: { classPropertyName: "nested", publicName: "nested", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectedItemId: { classPropertyName: "selectedItemId", publicName: "selectedItemId", isSignal: false, isRequired: false, transformFunction: null }, compressText: { classPropertyName: "compressText", publicName: "compressText", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { itemSelect: "itemSelect", closeRequest: "closeRequest", submenuBack: "submenuBack" }, host: { listeners: { "keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "nestedLists", predicate: MenuListComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"menu-list\"\n  [class.menu-list--dense]=\"dense\"\n  [class.menu-list--compress-text]=\"compressText\"\n  role=\"menu\"\n  [attr.aria-labelledby]=\"null\"\n  tabindex=\"-1\"\n  (mouseleave)=\"onMenuSurfaceLeave()\"\n>\n  @for (row of rows; track idx; let idx = $index) {\n    @switch (row.kind) {\n      @case ('divider') {\n        <app-menu-divider />\n      }\n      @case ('group') {\n        <app-menu-group [label]=\"row.label\" [hideLabel]=\"compressText\" />\n      }\n      @case ('submenu') {\n        <div\n          class=\"menu-list__submenu-wrap\"\n          cdkOverlayOrigin\n          #subOrigin=\"cdkOverlayOrigin\"\n          (mouseenter)=\"onSubmenuTriggerEnter(row, idx)\"\n          (mouseleave)=\"onSubmenuTriggerLeave(row, idx)\"\n        >\n          <div\n            class=\"menu-list__option menu-list__option--submenu\"\n            role=\"menuitem\"\n            [attr.aria-haspopup]=\"'true'\"\n            [attr.aria-expanded]=\"isSubmenuOpen(row, idx)\"\n            [id]=\"row.focusIndex !== null ? optionId(row.focusIndex) : null\"\n            [attr.tabindex]=\"row.focusIndex !== null && !row.item.disabled ? (isActiveRow(row) ? 0 : -1) : -1\"\n            [attr.aria-disabled]=\"row.item.disabled ? true : null\"\n            [attr.title]=\"compressText ? row.item.label : null\"\n            [attr.aria-label]=\"compressText ? row.item.label : null\"\n            [class.menu-list__option--disabled]=\"row.item.disabled\"\n            [class.menu-list__option--active]=\"isActiveRow(row)\"\n            [class.menu-list__option--selected]=\"isRowSelected(row)\"\n            (click)=\"onSubmenuRowClick($event, row, idx)\"\n            (mouseenter)=\"onRowMouseEnter(row)\"\n          >\n            @if (row.item.icon?.trim()) {\n              <span class=\"menu-list__icon\" aria-hidden=\"true\">\n                <i [ngClass]=\"row.item.icon\"></i>\n              </span>\n            }\n            <span class=\"menu-list__text\">\n              <span class=\"menu-list__label\">{{ row.item.label }}</span>\n              @if (row.item.description?.trim()) {\n                <span class=\"menu-list__description\">{{ row.item.description }}</span>\n              }\n            </span>\n            <span class=\"menu-list__submenu-chevron\" aria-hidden=\"true\">\u203A</span>\n          </div>\n          <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"subOrigin\"\n            [cdkConnectedOverlayOpen]=\"isSubmenuOpen(row, idx)\"\n            [cdkConnectedOverlayPositions]=\"submenuPositions\"\n            [cdkConnectedOverlayPush]=\"true\"\n            [cdkConnectedOverlayPanelClass]=\"overlayPanelClasses()\"\n            [cdkConnectedOverlayMinWidth]=\"200\"\n            (overlayOutsideClick)=\"onSubmenuOutsideClick(row, idx)\"\n          >\n            <div\n              class=\"menu-submenu__panel\"\n              [ngClass]=\"panelThemeNgClass()\"\n              (mouseenter)=\"onSubmenuPanelEnter()\"\n              (mouseleave)=\"onSubmenuPanelLeave(row, idx)\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <app-menu-list\n                [items]=\"row.item.items\"\n                [menuId]=\"submenuMenuId(row)\"\n                [nested]=\"true\"\n                [dense]=\"dense\"\n                [compressText]=\"compressText\"\n                [selectedItemId]=\"selectedItemId\"\n                (itemSelect)=\"onNestedItemSelect($event)\"\n                (closeRequest)=\"closeRequest.emit()\"\n                (submenuBack)=\"closeOpenSubmenu()\"\n              />\n            </div>\n          </ng-template>\n        </div>\n      }\n      @case ('action') {\n        <div\n          class=\"menu-list__option\"\n          role=\"menuitem\"\n          [id]=\"row.focusIndex !== null ? optionId(row.focusIndex) : null\"\n          [attr.tabindex]=\"row.focusIndex !== null && !row.item.disabled ? (isActiveRow(row) ? 0 : -1) : -1\"\n          [attr.aria-disabled]=\"row.item.disabled ? true : null\"\n          [attr.aria-busy]=\"row.item.loading ? true : null\"\n          [attr.title]=\"compressText ? row.item.label : null\"\n          [attr.aria-label]=\"compressText ? row.item.label : null\"\n          [class.menu-list__option--disabled]=\"row.item.disabled\"\n          [class.menu-list__option--loading]=\"row.item.loading\"\n          [class.menu-list__option--danger]=\"row.item.danger\"\n          [class.menu-list__option--active]=\"isActiveRow(row)\"\n          [class.menu-list__option--selected]=\"isRowSelected(row)\"\n          (click)=\"onItemClick($event, row.item)\"\n          (mouseenter)=\"onRowMouseEnter(row)\"\n        >\n          @if (row.item.loading) {\n            <span class=\"menu-list__icon menu-list__icon--spin\" aria-hidden=\"true\">\n              <i class=\"fa-solid fa-spinner\"></i>\n            </span>\n          } @else if (row.item.icon?.trim()) {\n            <span class=\"menu-list__icon\" aria-hidden=\"true\">\n              <i [ngClass]=\"row.item.icon\"></i>\n            </span>\n          }\n          <span class=\"menu-list__text\">\n            <span class=\"menu-list__label\">{{ row.item.label }}</span>\n            @if (row.item.description?.trim()) {\n              <span class=\"menu-list__description\">{{ row.item.description }}</span>\n            }\n          </span>\n        </div>\n      }\n    }\n  }\n</div>\n", styles: ["@charset \"UTF-8\";@keyframes app-sidebar-nav-reveal-in{0%{opacity:0;transform:translate3d(-.45rem,0,0)}to{opacity:1;transform:translateZ(0)}}:host{display:block;min-width:0;box-sizing:border-box}.menu-list{background:var(--app-color-surface, #ffffff);border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .12));border-radius:10px;box-shadow:0 10px 28px -14px #0f172a29;max-height:min(70vh,22rem);overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;gap:.1rem;padding:.45rem 0;outline:none}.menu-list--dense{padding:.2rem 0;gap:0}.menu-list__submenu-wrap{position:relative;display:block}.menu-list__option{display:flex;align-items:center;box-sizing:border-box;gap:.5rem;margin:0 .25rem;padding:.48rem .6rem;border-radius:8px;cursor:pointer;color:var(--app-color-text-primary, #1a2f45);background:transparent;border:1px solid transparent;text-align:left;font:inherit;line-height:1.25}.menu-list__option:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:1px}.menu-list__option:hover:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:color-mix(in srgb,var(--app-color-primary) 6%,transparent)}.menu-list__option.menu-list__option--active:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:color-mix(in srgb,var(--app-color-primary) 7%,transparent);border-color:transparent}.menu-list__option.menu-list__option--active:not(.menu-list__option--disabled):not(.menu-list__option--loading):not(.menu-list__option--selected){box-shadow:none}.menu-list__option.menu-list__option--disabled{cursor:not-allowed;color:var(--app-color-text-muted, #6b8299);background:transparent;opacity:.72}.menu-list__option.menu-list__option--loading{cursor:wait;opacity:.92;pointer-events:none}.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading){color:var(--app-color-error, #b91c1c)}.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading):hover,.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading).menu-list__option--active{background:var(--app-color-error-bg-subtle, rgba(185, 28, 28, .12));border-color:transparent;box-shadow:inset 2px 0 0 0 var(--app-color-error-border, #dc2626)}.menu-list__option--submenu{padding-right:.35rem}.menu-list__option--selected:not(.menu-list__option--disabled){background:color-mix(in srgb,var(--app-color-primary) 9%,transparent);border-radius:8px;border-color:transparent;box-shadow:inset 2px 0 0 0 var(--app-color-primary, #2b7fd9)}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__label{color:var(--app-color-primary, #2b7fd9);font-weight:600}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__icon{color:var(--app-color-primary, #2b7fd9)}.menu-list--compress-text .menu-list__label,.menu-list--compress-text .menu-list__description{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.menu-list--compress-text .menu-list__text,.menu-list--compress-text .menu-list__submenu-chevron{display:none}.menu-list--compress-text .menu-list__submenu-wrap{width:100%}.menu-list--compress-text .menu-list__option{justify-content:center;align-items:center;text-align:center;width:calc(100% - .5rem);max-width:100%;box-sizing:border-box;margin-left:.25rem;margin-right:.25rem;padding:.5rem .35rem}.menu-list--compress-text .menu-list__option--submenu{padding-left:.35rem;padding-right:.35rem}.menu-list--compress-text .menu-list__icon{flex:0 0 auto;width:auto;min-width:1.75rem;display:inline-flex;align-items:center;justify-content:center;padding-top:0}.menu-list__submenu-chevron{flex:0 0 auto;margin-left:auto;padding-left:.35rem;font-size:1rem;line-height:1;color:var(--app-color-text-muted, #6b8299);opacity:.85}.menu-list__icon{flex:0 0 auto;width:1.25rem;height:1.25rem;min-height:1.25rem;display:inline-flex;align-items:center;justify-content:center;text-align:center;color:var(--app-color-text-secondary, #5a7fa3);line-height:1}.menu-list__icon i{display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:1;font-size:.95rem}.menu-list__option--disabled .menu-list__icon{opacity:.55}.menu-list__icon--spin i{animation:menu-list-spin .8s linear infinite}.menu-list__text{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}.menu-list__label{font-size:.875rem;font-weight:500;line-height:1.25rem;display:inline-flex;align-items:center;min-height:1.25rem}.menu-list__description{font-size:.75rem;color:var(--app-color-text-muted, #6b8299);line-height:1.3}.menu-list:not(.menu-list--compress-text){animation:app-sidebar-nav-reveal-in .45s cubic-bezier(.16,1,.32,1) both}@media(prefers-reduced-motion:reduce){.menu-list:not(.menu-list--compress-text){animation:none}}.menu-submenu__panel{box-sizing:border-box;min-width:0;padding:0;background:transparent;border:none;box-shadow:none;border-radius:10px;overflow:hidden}@keyframes menu-list-spin{to{transform:rotate(360deg)}}:host ::ng-deep .menu-submenu__cdk-panel{background:transparent;box-shadow:none;border-radius:10px}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => MenuListComponent), selector: "app-menu-list", inputs: ["appTheme", "items", "menuId", "dense", "nested", "selectedItemId", "compressText"], outputs: ["itemSelect", "closeRequest", "submenuBack"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => CdkConnectedOverlay), selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i0.forwardRef(() => CdkOverlayOrigin), selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i0.forwardRef(() => MenuDividerComponent), selector: "app-menu-divider" }, { kind: "component", type: i0.forwardRef(() => MenuGroupComponent), selector: "app-menu-group", inputs: ["label", "hideLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuListComponent, decorators: [{
             type: Component,
@@ -1438,7 +1465,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         MenuDividerComponent,
                         MenuGroupComponent,
                     ], template: "<div\n  class=\"menu-list\"\n  [class.menu-list--dense]=\"dense\"\n  [class.menu-list--compress-text]=\"compressText\"\n  role=\"menu\"\n  [attr.aria-labelledby]=\"null\"\n  tabindex=\"-1\"\n  (mouseleave)=\"onMenuSurfaceLeave()\"\n>\n  @for (row of rows; track idx; let idx = $index) {\n    @switch (row.kind) {\n      @case ('divider') {\n        <app-menu-divider />\n      }\n      @case ('group') {\n        <app-menu-group [label]=\"row.label\" [hideLabel]=\"compressText\" />\n      }\n      @case ('submenu') {\n        <div\n          class=\"menu-list__submenu-wrap\"\n          cdkOverlayOrigin\n          #subOrigin=\"cdkOverlayOrigin\"\n          (mouseenter)=\"onSubmenuTriggerEnter(row, idx)\"\n          (mouseleave)=\"onSubmenuTriggerLeave(row, idx)\"\n        >\n          <div\n            class=\"menu-list__option menu-list__option--submenu\"\n            role=\"menuitem\"\n            [attr.aria-haspopup]=\"'true'\"\n            [attr.aria-expanded]=\"isSubmenuOpen(row, idx)\"\n            [id]=\"row.focusIndex !== null ? optionId(row.focusIndex) : null\"\n            [attr.tabindex]=\"row.focusIndex !== null && !row.item.disabled ? (isActiveRow(row) ? 0 : -1) : -1\"\n            [attr.aria-disabled]=\"row.item.disabled ? true : null\"\n            [attr.title]=\"compressText ? row.item.label : null\"\n            [attr.aria-label]=\"compressText ? row.item.label : null\"\n            [class.menu-list__option--disabled]=\"row.item.disabled\"\n            [class.menu-list__option--active]=\"isActiveRow(row)\"\n            [class.menu-list__option--selected]=\"isRowSelected(row)\"\n            (click)=\"onSubmenuRowClick($event, row, idx)\"\n            (mouseenter)=\"onRowMouseEnter(row)\"\n          >\n            @if (row.item.icon?.trim()) {\n              <span class=\"menu-list__icon\" aria-hidden=\"true\">\n                <i [ngClass]=\"row.item.icon\"></i>\n              </span>\n            }\n            <span class=\"menu-list__text\">\n              <span class=\"menu-list__label\">{{ row.item.label }}</span>\n              @if (row.item.description?.trim()) {\n                <span class=\"menu-list__description\">{{ row.item.description }}</span>\n              }\n            </span>\n            <span class=\"menu-list__submenu-chevron\" aria-hidden=\"true\">\u203A</span>\n          </div>\n          <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"subOrigin\"\n            [cdkConnectedOverlayOpen]=\"isSubmenuOpen(row, idx)\"\n            [cdkConnectedOverlayPositions]=\"submenuPositions\"\n            [cdkConnectedOverlayPush]=\"true\"\n            [cdkConnectedOverlayPanelClass]=\"overlayPanelClasses()\"\n            [cdkConnectedOverlayMinWidth]=\"200\"\n            (overlayOutsideClick)=\"onSubmenuOutsideClick(row, idx)\"\n          >\n            <div\n              class=\"menu-submenu__panel\"\n              [ngClass]=\"panelThemeNgClass()\"\n              (mouseenter)=\"onSubmenuPanelEnter()\"\n              (mouseleave)=\"onSubmenuPanelLeave(row, idx)\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <app-menu-list\n                [items]=\"row.item.items\"\n                [menuId]=\"submenuMenuId(row)\"\n                [nested]=\"true\"\n                [dense]=\"dense\"\n                [compressText]=\"compressText\"\n                [selectedItemId]=\"selectedItemId\"\n                (itemSelect)=\"onNestedItemSelect($event)\"\n                (closeRequest)=\"closeRequest.emit()\"\n                (submenuBack)=\"closeOpenSubmenu()\"\n              />\n            </div>\n          </ng-template>\n        </div>\n      }\n      @case ('action') {\n        <div\n          class=\"menu-list__option\"\n          role=\"menuitem\"\n          [id]=\"row.focusIndex !== null ? optionId(row.focusIndex) : null\"\n          [attr.tabindex]=\"row.focusIndex !== null && !row.item.disabled ? (isActiveRow(row) ? 0 : -1) : -1\"\n          [attr.aria-disabled]=\"row.item.disabled ? true : null\"\n          [attr.aria-busy]=\"row.item.loading ? true : null\"\n          [attr.title]=\"compressText ? row.item.label : null\"\n          [attr.aria-label]=\"compressText ? row.item.label : null\"\n          [class.menu-list__option--disabled]=\"row.item.disabled\"\n          [class.menu-list__option--loading]=\"row.item.loading\"\n          [class.menu-list__option--danger]=\"row.item.danger\"\n          [class.menu-list__option--active]=\"isActiveRow(row)\"\n          [class.menu-list__option--selected]=\"isRowSelected(row)\"\n          (click)=\"onItemClick($event, row.item)\"\n          (mouseenter)=\"onRowMouseEnter(row)\"\n        >\n          @if (row.item.loading) {\n            <span class=\"menu-list__icon menu-list__icon--spin\" aria-hidden=\"true\">\n              <i class=\"fa-solid fa-spinner\"></i>\n            </span>\n          } @else if (row.item.icon?.trim()) {\n            <span class=\"menu-list__icon\" aria-hidden=\"true\">\n              <i [ngClass]=\"row.item.icon\"></i>\n            </span>\n          }\n          <span class=\"menu-list__text\">\n            <span class=\"menu-list__label\">{{ row.item.label }}</span>\n            @if (row.item.description?.trim()) {\n              <span class=\"menu-list__description\">{{ row.item.description }}</span>\n            }\n          </span>\n        </div>\n      }\n    }\n  }\n</div>\n", styles: ["@charset \"UTF-8\";@keyframes app-sidebar-nav-reveal-in{0%{opacity:0;transform:translate3d(-.45rem,0,0)}to{opacity:1;transform:translateZ(0)}}:host{display:block;min-width:0;box-sizing:border-box}.menu-list{background:var(--app-color-surface, #ffffff);border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .12));border-radius:10px;box-shadow:0 10px 28px -14px #0f172a29;max-height:min(70vh,22rem);overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;gap:.1rem;padding:.45rem 0;outline:none}.menu-list--dense{padding:.2rem 0;gap:0}.menu-list__submenu-wrap{position:relative;display:block}.menu-list__option{display:flex;align-items:center;box-sizing:border-box;gap:.5rem;margin:0 .25rem;padding:.48rem .6rem;border-radius:8px;cursor:pointer;color:var(--app-color-text-primary, #1a2f45);background:transparent;border:1px solid transparent;text-align:left;font:inherit;line-height:1.25}.menu-list__option:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:1px}.menu-list__option:hover:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:color-mix(in srgb,var(--app-color-primary) 6%,transparent)}.menu-list__option.menu-list__option--active:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:color-mix(in srgb,var(--app-color-primary) 7%,transparent);border-color:transparent}.menu-list__option.menu-list__option--active:not(.menu-list__option--disabled):not(.menu-list__option--loading):not(.menu-list__option--selected){box-shadow:none}.menu-list__option.menu-list__option--disabled{cursor:not-allowed;color:var(--app-color-text-muted, #6b8299);background:transparent;opacity:.72}.menu-list__option.menu-list__option--loading{cursor:wait;opacity:.92;pointer-events:none}.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading){color:var(--app-color-error, #b91c1c)}.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading):hover,.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading).menu-list__option--active{background:var(--app-color-error-bg-subtle, rgba(185, 28, 28, .12));border-color:transparent;box-shadow:inset 2px 0 0 0 var(--app-color-error-border, #dc2626)}.menu-list__option--submenu{padding-right:.35rem}.menu-list__option--selected:not(.menu-list__option--disabled){background:color-mix(in srgb,var(--app-color-primary) 9%,transparent);border-radius:8px;border-color:transparent;box-shadow:inset 2px 0 0 0 var(--app-color-primary, #2b7fd9)}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__label{color:var(--app-color-primary, #2b7fd9);font-weight:600}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__icon{color:var(--app-color-primary, #2b7fd9)}.menu-list--compress-text .menu-list__label,.menu-list--compress-text .menu-list__description{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.menu-list--compress-text .menu-list__text,.menu-list--compress-text .menu-list__submenu-chevron{display:none}.menu-list--compress-text .menu-list__submenu-wrap{width:100%}.menu-list--compress-text .menu-list__option{justify-content:center;align-items:center;text-align:center;width:calc(100% - .5rem);max-width:100%;box-sizing:border-box;margin-left:.25rem;margin-right:.25rem;padding:.5rem .35rem}.menu-list--compress-text .menu-list__option--submenu{padding-left:.35rem;padding-right:.35rem}.menu-list--compress-text .menu-list__icon{flex:0 0 auto;width:auto;min-width:1.75rem;display:inline-flex;align-items:center;justify-content:center;padding-top:0}.menu-list__submenu-chevron{flex:0 0 auto;margin-left:auto;padding-left:.35rem;font-size:1rem;line-height:1;color:var(--app-color-text-muted, #6b8299);opacity:.85}.menu-list__icon{flex:0 0 auto;width:1.25rem;height:1.25rem;min-height:1.25rem;display:inline-flex;align-items:center;justify-content:center;text-align:center;color:var(--app-color-text-secondary, #5a7fa3);line-height:1}.menu-list__icon i{display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:1;font-size:.95rem}.menu-list__option--disabled .menu-list__icon{opacity:.55}.menu-list__icon--spin i{animation:menu-list-spin .8s linear infinite}.menu-list__text{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}.menu-list__label{font-size:.875rem;font-weight:500;line-height:1.25rem;display:inline-flex;align-items:center;min-height:1.25rem}.menu-list__description{font-size:.75rem;color:var(--app-color-text-muted, #6b8299);line-height:1.3}.menu-list:not(.menu-list--compress-text){animation:app-sidebar-nav-reveal-in .45s cubic-bezier(.16,1,.32,1) both}@media(prefers-reduced-motion:reduce){.menu-list:not(.menu-list--compress-text){animation:none}}.menu-submenu__panel{box-sizing:border-box;min-width:0;padding:0;background:transparent;border:none;box-shadow:none;border-radius:10px;overflow:hidden}@keyframes menu-list-spin{to{transform:rotate(360deg)}}:host ::ng-deep .menu-submenu__cdk-panel{background:transparent;box-shadow:none;border-radius:10px}\n"] }]
-        }], propDecorators: { items: [{
+        }], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], items: [{
                 type: Input,
                 args: [{ required: true }]
             }], menuId: [{
@@ -1572,7 +1599,7 @@ class DropdownMenuComponent {
         this.setOpen(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: DropdownMenuComponent, isStandalone: true, selector: "app-dropdown-menu", inputs: { items: "items", placement: "placement", minWidthPx: "minWidthPx", matchTriggerWidth: ["matchTriggerWidth", "matchTriggerWidth", booleanAttribute], menuId: "menuId" }, outputs: { itemSelect: "itemSelect", openChange: "openChange" }, viewQueries: [{ propertyName: "panelTpl", first: true, predicate: ["panelTpl"], descendants: true, static: true }, { propertyName: "menuList", first: true, predicate: MenuListComponent, descendants: true }], ngImport: i0, template: "<app-dropdown-base\r\n  class=\"dropdown-menu\"\r\n  [open]=\"open\"\r\n  (openChange)=\"onBaseOpenChange($event)\"\r\n  [panelTemplate]=\"panelTpl\"\r\n  [panelWidthPx]=\"effectivePanelWidth\"\r\n  [connectedPositions]=\"connectedPositions\"\r\n  [pushConnectedOverlay]=\"true\"\r\n  [hasBackdrop]=\"true\"\r\n  [closeOnEscape]=\"true\"\r\n  [bareOverlayPanel]=\"true\"\r\n>\r\n  <span\r\n    class=\"dropdown-menu__trigger-slot\"\r\n    appDropdownTrigger\r\n    (click)=\"onTriggerClick($event)\"\r\n    [attr.aria-expanded]=\"open\"\r\n    aria-haspopup=\"menu\"\r\n  >\r\n    <ng-content />\r\n  </span>\r\n</app-dropdown-base>\r\n\r\n<ng-template #panelTpl>\r\n  <div class=\"dropdown-menu__panel-inner\">\r\n    <app-menu-list\r\n      [items]=\"items\"\r\n      [menuId]=\"resolvedMenuId\"\r\n      (itemSelect)=\"onItemSelect($event)\"\r\n      (closeRequest)=\"onCloseRequest()\"\r\n    />\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;max-width:100%;vertical-align:middle}.dropdown-menu{display:inline-flex;max-width:100%;min-width:0}.dropdown-menu__trigger-slot{display:inline-flex;max-width:100%;min-width:0;cursor:pointer}.dropdown-menu__panel-inner{box-sizing:border-box;min-width:0}\n"], dependencies: [{ kind: "component", type: DropdownBaseComponent, selector: "app-dropdown-base", inputs: ["open", "panelTemplate", "panelWidthPx", "closeOnEscape", "hasBackdrop", "connectedPositions", "pushConnectedOverlay", "bareOverlayPanel"], outputs: ["openChange"] }, { kind: "component", type: MenuListComponent, selector: "app-menu-list", inputs: ["items", "menuId", "dense", "nested", "selectedItemId", "compressText"], outputs: ["itemSelect", "closeRequest", "submenuBack"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: DropdownMenuComponent, isStandalone: true, selector: "app-dropdown-menu", inputs: { items: "items", placement: "placement", minWidthPx: "minWidthPx", matchTriggerWidth: ["matchTriggerWidth", "matchTriggerWidth", booleanAttribute], menuId: "menuId" }, outputs: { itemSelect: "itemSelect", openChange: "openChange" }, viewQueries: [{ propertyName: "panelTpl", first: true, predicate: ["panelTpl"], descendants: true, static: true }, { propertyName: "menuList", first: true, predicate: MenuListComponent, descendants: true }], ngImport: i0, template: "<app-dropdown-base\r\n  class=\"dropdown-menu\"\r\n  [open]=\"open\"\r\n  (openChange)=\"onBaseOpenChange($event)\"\r\n  [panelTemplate]=\"panelTpl\"\r\n  [panelWidthPx]=\"effectivePanelWidth\"\r\n  [connectedPositions]=\"connectedPositions\"\r\n  [pushConnectedOverlay]=\"true\"\r\n  [hasBackdrop]=\"true\"\r\n  [closeOnEscape]=\"true\"\r\n  [bareOverlayPanel]=\"true\"\r\n>\r\n  <span\r\n    class=\"dropdown-menu__trigger-slot\"\r\n    appDropdownTrigger\r\n    (click)=\"onTriggerClick($event)\"\r\n    [attr.aria-expanded]=\"open\"\r\n    aria-haspopup=\"menu\"\r\n  >\r\n    <ng-content />\r\n  </span>\r\n</app-dropdown-base>\r\n\r\n<ng-template #panelTpl>\r\n  <div class=\"dropdown-menu__panel-inner\">\r\n    <app-menu-list\r\n      [items]=\"items\"\r\n      [menuId]=\"resolvedMenuId\"\r\n      (itemSelect)=\"onItemSelect($event)\"\r\n      (closeRequest)=\"onCloseRequest()\"\r\n    />\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;max-width:100%;vertical-align:middle}.dropdown-menu{display:inline-flex;max-width:100%;min-width:0}.dropdown-menu__trigger-slot{display:inline-flex;max-width:100%;min-width:0;cursor:pointer}.dropdown-menu__panel-inner{box-sizing:border-box;min-width:0}\n"], dependencies: [{ kind: "component", type: DropdownBaseComponent, selector: "app-dropdown-base", inputs: ["open", "panelTemplate", "panelWidthPx", "closeOnEscape", "hasBackdrop", "connectedPositions", "pushConnectedOverlay", "bareOverlayPanel"], outputs: ["openChange"] }, { kind: "component", type: MenuListComponent, selector: "app-menu-list", inputs: ["appTheme", "items", "menuId", "dense", "nested", "selectedItemId", "compressText"], outputs: ["itemSelect", "closeRequest", "submenuBack"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownMenuComponent, decorators: [{
             type: Component,
@@ -9449,8 +9476,10 @@ class ContextMenuComponent {
     constructor() {
         this.overlay = inject(Overlay);
         this.vcr = inject(ViewContainerRef);
-        this.appTheme = inject(AppThemeService);
         this.cdr = inject(ChangeDetectorRef);
+        /** Igual a `[appTheme]` na lib; omitir = tema global. */
+        this.appTheme = input(...(ngDevMode ? [undefined, { debugName: "appTheme" }] : /* istanbul ignore next */ []));
+        this.effectiveThemeId = injectEffectiveThemeId(this.appTheme);
         this.items = [];
         this.disabled = false;
         this.menuId = '';
@@ -9458,7 +9487,10 @@ class ContextMenuComponent {
         this.overlayRef = null;
         this.escSub = null;
         this.generatedId = `app-ctx-${Math.random().toString(36).slice(2, 9)}`;
-        this.panelThemeNgClass = computed(() => this.appTheme.themeClassMap(), ...(ngDevMode ? [{ debugName: "panelThemeNgClass" }] : /* istanbul ignore next */ []));
+        this.panelThemeNgClass = computed(() => {
+            const [base, token] = getThemeClassList(this.effectiveThemeId());
+            return { [base]: true, [token]: true };
+        }, ...(ngDevMode ? [{ debugName: "panelThemeNgClass" }] : /* istanbul ignore next */ []));
     }
     get resolvedMenuId() {
         return this.menuId.trim() || this.generatedId;
@@ -9481,7 +9513,7 @@ class ContextMenuComponent {
         this.overlayRef = this.overlay.create({
             hasBackdrop: true,
             backdropClass: 'cdk-overlay-transparent-backdrop',
-            panelClass: [...this.appTheme.themeClassList()],
+            panelClass: [...getThemeClassList(this.effectiveThemeId())],
             scrollStrategy: this.overlay.scrollStrategies.close(),
             positionStrategy: this.overlay
                 .position()
@@ -9516,12 +9548,12 @@ class ContextMenuComponent {
         this.disposeOverlay();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: ContextMenuComponent, isStandalone: true, selector: "app-context-menu", inputs: { items: "items", disabled: ["disabled", "disabled", booleanAttribute], menuId: "menuId" }, outputs: { itemSelect: "itemSelect" }, viewQueries: [{ propertyName: "menuTpl", first: true, predicate: ["menuTpl"], descendants: true, static: true }, { propertyName: "menuList", first: true, predicate: MenuListComponent, descendants: true }], ngImport: i0, template: "<span class=\"context-menu__host\" (contextmenu)=\"onContextMenu($event)\">\r\n  <ng-content />\r\n</span>\r\n\r\n<ng-template #menuTpl>\r\n  <div class=\"context-menu__surface\" [ngClass]=\"panelThemeNgClass()\" (click)=\"$event.stopPropagation()\">\r\n    <app-menu-list\r\n      [items]=\"items\"\r\n      [menuId]=\"resolvedMenuId\"\r\n      (itemSelect)=\"onItemSelect($event)\"\r\n      (closeRequest)=\"onCloseRequest()\"\r\n    />\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{display:contents}.context-menu__host{display:contents}.context-menu__surface{box-sizing:border-box;min-width:12.5rem;max-width:min(100vw - 1rem,22rem)}\n"], dependencies: [{ kind: "component", type: MenuListComponent, selector: "app-menu-list", inputs: ["items", "menuId", "dense", "nested", "selectedItemId", "compressText"], outputs: ["itemSelect", "closeRequest", "submenuBack"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ContextMenuComponent, isStandalone: true, selector: "app-context-menu", inputs: { appTheme: { classPropertyName: "appTheme", publicName: "appTheme", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, viewQueries: [{ propertyName: "menuTpl", first: true, predicate: ["menuTpl"], descendants: true, static: true }, { propertyName: "menuList", first: true, predicate: MenuListComponent, descendants: true }], ngImport: i0, template: "<span class=\"context-menu__host\" (contextmenu)=\"onContextMenu($event)\">\r\n  <ng-content />\r\n</span>\r\n\r\n<ng-template #menuTpl>\r\n  <div class=\"context-menu__surface\" [ngClass]=\"panelThemeNgClass()\" (click)=\"$event.stopPropagation()\">\r\n    <app-menu-list\r\n      [appTheme]=\"effectiveThemeId()\"\r\n      [items]=\"items\"\r\n      [menuId]=\"resolvedMenuId\"\r\n      (itemSelect)=\"onItemSelect($event)\"\r\n      (closeRequest)=\"onCloseRequest()\"\r\n    />\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{display:contents}.context-menu__host{display:contents}.context-menu__surface{box-sizing:border-box;min-width:12.5rem;max-width:min(100vw - 1rem,22rem)}\n"], dependencies: [{ kind: "component", type: MenuListComponent, selector: "app-menu-list", inputs: ["appTheme", "items", "menuId", "dense", "nested", "selectedItemId", "compressText"], outputs: ["itemSelect", "closeRequest", "submenuBack"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContextMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-context-menu', imports: [MenuListComponent, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"context-menu__host\" (contextmenu)=\"onContextMenu($event)\">\r\n  <ng-content />\r\n</span>\r\n\r\n<ng-template #menuTpl>\r\n  <div class=\"context-menu__surface\" [ngClass]=\"panelThemeNgClass()\" (click)=\"$event.stopPropagation()\">\r\n    <app-menu-list\r\n      [items]=\"items\"\r\n      [menuId]=\"resolvedMenuId\"\r\n      (itemSelect)=\"onItemSelect($event)\"\r\n      (closeRequest)=\"onCloseRequest()\"\r\n    />\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{display:contents}.context-menu__host{display:contents}.context-menu__surface{box-sizing:border-box;min-width:12.5rem;max-width:min(100vw - 1rem,22rem)}\n"] }]
-        }], propDecorators: { items: [{
+            args: [{ selector: 'app-context-menu', imports: [MenuListComponent, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"context-menu__host\" (contextmenu)=\"onContextMenu($event)\">\r\n  <ng-content />\r\n</span>\r\n\r\n<ng-template #menuTpl>\r\n  <div class=\"context-menu__surface\" [ngClass]=\"panelThemeNgClass()\" (click)=\"$event.stopPropagation()\">\r\n    <app-menu-list\r\n      [appTheme]=\"effectiveThemeId()\"\r\n      [items]=\"items\"\r\n      [menuId]=\"resolvedMenuId\"\r\n      (itemSelect)=\"onItemSelect($event)\"\r\n      (closeRequest)=\"onCloseRequest()\"\r\n    />\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{display:contents}.context-menu__host{display:contents}.context-menu__surface{box-sizing:border-box;min-width:12.5rem;max-width:min(100vw - 1rem,22rem)}\n"] }]
+        }], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], items: [{
                 type: Input,
                 args: [{ required: true }]
             }], disabled: [{
@@ -10258,13 +10290,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Estrutura principal: barra lateral, topo e conteúdo. Em mobile a lateral projecta-se no `app-drawer`.
  *
  * Use `exportAs: 'appShell'` e `toggleMobileNav` / `toggleSidebarCollapsed` a partir da topbar.
+ *
+ * Tema no host: `[appTheme]="'purple'"` como no resto da lib; omitir = {@link AppThemeService}.
  */
 class AppShellComponent {
     constructor() {
         this.bp = inject(BreakpointObserver);
         this.cdr = inject(ChangeDetectorRef);
         this.destroyRef = inject(DestroyRef);
-        this.theme = inject(AppThemeService);
+        this.appTheme = input(...(ngDevMode ? [undefined, { debugName: "appTheme" }] : /* istanbul ignore next */ []));
+        this.effectiveThemeId = injectEffectiveThemeId(this.appTheme);
+        this.hostThemeClass = computed(() => getThemeClass(this.effectiveThemeId()), ...(ngDevMode ? [{ debugName: "hostThemeClass" }] : /* istanbul ignore next */ []));
         /** Barra lateral estreita (ícones + compressão de texto na lista). */
         this.sidebarCollapsed = false;
         this.sidebarCollapsedChange = new EventEmitter();
@@ -10277,9 +10313,6 @@ class AppShellComponent {
         this.DrawerSide = DrawerSide;
         this.DrawerSize = DrawerSize;
     }
-    get hostThemeClasses() {
-        return this.theme.getTheme();
-    }
     /** Conteúdo lateral (obrigatório): `<ng-template appShellSidebar>...</ng-template>`. */
     get sidebarTemplate() {
         return this.sidebarSlot?.templateRef ?? null;
@@ -10323,15 +10356,14 @@ class AppShellComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AppShellComponent, isStandalone: true, selector: "app-shell", inputs: { sidebarCollapsed: ["sidebarCollapsed", "sidebarCollapsed", booleanAttribute], mobileNavOpen: ["mobileNavOpen", "mobileNavOpen", booleanAttribute], mobileLayoutQuery: "mobileLayoutQuery" }, outputs: { sidebarCollapsedChange: "sidebarCollapsedChange", mobileNavOpenChange: "mobileNavOpenChange" }, host: { properties: { "class": "this.hostThemeClasses" } }, queries: [{ propertyName: "sidebarSlot", first: true, predicate: AppShellSidebarTemplateDirective, descendants: true }], exportAs: ["appShell"], ngImport: i0, template: "<div\r\n  class=\"app-shell\"\r\n  [class.app-shell--mobile]=\"isMobileLayout\"\r\n  [class.app-shell--sidebar-collapsed]=\"sidebarCollapsed\"\r\n>\r\n  @if (!isMobileLayout && sidebarTemplate) {\r\n    <aside class=\"app-shell__sidebar\" aria-label=\"Navega\u00E7\u00E3o principal\">\r\n      <ng-container [ngTemplateOutlet]=\"sidebarTemplate\" />\r\n    </aside>\r\n  }\r\n\r\n  @if (isMobileLayout && sidebarTemplate) {\r\n    <app-drawer\r\n      [open]=\"mobileNavOpen\"\r\n      (openChange)=\"onMobileDrawerOpenChange($event)\"\r\n      [side]=\"DrawerSide.Left\"\r\n      [size]=\"DrawerSize.Sm\"\r\n      title=\"Navega\u00E7\u00E3o\"\r\n      [showCloseButton]=\"true\"\r\n    >\r\n      <ng-container [ngTemplateOutlet]=\"sidebarTemplate\" />\r\n    </app-drawer>\r\n  }\r\n\r\n  <div class=\"app-shell__main\">\r\n    <ng-content select=\"[appShellTopbar]\" />\r\n    <main class=\"app-shell__content\">\r\n      <ng-content />\r\n    </main>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@keyframes app-sidebar-nav-reveal-in{0%{opacity:0;transform:translate3d(-.45rem,0,0)}to{opacity:1;transform:translateZ(0)}}:host{display:flex;flex:1 1 auto;flex-direction:column;width:100%;min-width:0;min-height:0;box-sizing:border-box}.app-shell{display:flex;flex-direction:row;align-items:stretch;flex:1 1 auto;width:100%;min-height:0;min-width:0;box-sizing:border-box}.app-shell__sidebar{display:flex;flex-direction:column;flex:0 0 17.5rem;width:17.5rem;max-width:100%;min-width:0;min-height:0;align-self:stretch;overflow:hidden;transition:flex-basis .12s cubic-bezier(.22,1,.36,1),width .12s cubic-bezier(.22,1,.36,1),padding .12s cubic-bezier(.22,1,.36,1)}.app-shell--sidebar-collapsed:not(.app-shell--mobile) .app-shell__sidebar{flex-basis:5rem;width:5rem}.app-shell__main{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0;align-self:stretch;overflow:hidden}.app-shell__content{flex:1 1 auto;min-height:0;min-width:0;overflow:auto;padding:1rem 1.1rem;box-sizing:border-box;background:var(--app-color-shell-main-bg, var(--app-color-background, #fafbfc))}.app-shell--mobile .app-shell__sidebar{display:none}.app-shell--mobile .app-shell__main{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DrawerComponent, selector: "app-drawer", inputs: ["open", "side", "size", "title", "showCloseButton"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AppShellComponent, isStandalone: true, selector: "app-shell", inputs: { appTheme: { classPropertyName: "appTheme", publicName: "appTheme", isSignal: true, isRequired: false, transformFunction: null }, sidebarCollapsed: { classPropertyName: "sidebarCollapsed", publicName: "sidebarCollapsed", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, mobileNavOpen: { classPropertyName: "mobileNavOpen", publicName: "mobileNavOpen", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, mobileLayoutQuery: { classPropertyName: "mobileLayoutQuery", publicName: "mobileLayoutQuery", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { sidebarCollapsedChange: "sidebarCollapsedChange", mobileNavOpenChange: "mobileNavOpenChange" }, host: { properties: { "class": "hostThemeClass()" } }, queries: [{ propertyName: "sidebarSlot", first: true, predicate: AppShellSidebarTemplateDirective, descendants: true }], exportAs: ["appShell"], ngImport: i0, template: "<div\r\n  class=\"app-shell\"\r\n  [class.app-shell--mobile]=\"isMobileLayout\"\r\n  [class.app-shell--sidebar-collapsed]=\"sidebarCollapsed\"\r\n>\r\n  @if (!isMobileLayout && sidebarTemplate) {\r\n    <aside class=\"app-shell__sidebar\" aria-label=\"Navega\u00E7\u00E3o principal\">\r\n      <ng-container [ngTemplateOutlet]=\"sidebarTemplate\" />\r\n    </aside>\r\n  }\r\n\r\n  @if (isMobileLayout && sidebarTemplate) {\r\n    <app-drawer\r\n      [open]=\"mobileNavOpen\"\r\n      (openChange)=\"onMobileDrawerOpenChange($event)\"\r\n      [side]=\"DrawerSide.Left\"\r\n      [size]=\"DrawerSize.Sm\"\r\n      title=\"Navega\u00E7\u00E3o\"\r\n      [showCloseButton]=\"true\"\r\n    >\r\n      <ng-container [ngTemplateOutlet]=\"sidebarTemplate\" />\r\n    </app-drawer>\r\n  }\r\n\r\n  <div class=\"app-shell__main\">\r\n    <ng-content select=\"[appShellTopbar]\" />\r\n    <main class=\"app-shell__content\">\r\n      <ng-content />\r\n    </main>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@keyframes app-sidebar-nav-reveal-in{0%{opacity:0;transform:translate3d(-.45rem,0,0)}to{opacity:1;transform:translateZ(0)}}:host{display:flex;flex:1 1 auto;flex-direction:column;width:100%;min-width:0;min-height:0;box-sizing:border-box}.app-shell{display:flex;flex-direction:row;align-items:stretch;flex:1 1 auto;width:100%;min-height:0;min-width:0;box-sizing:border-box}.app-shell__sidebar{display:flex;flex-direction:column;flex:0 0 17.5rem;width:17.5rem;max-width:100%;min-width:0;min-height:0;align-self:stretch;overflow:hidden;transition:flex-basis .12s cubic-bezier(.22,1,.36,1),width .12s cubic-bezier(.22,1,.36,1),padding .12s cubic-bezier(.22,1,.36,1)}.app-shell--sidebar-collapsed:not(.app-shell--mobile) .app-shell__sidebar{flex-basis:5rem;width:5rem}.app-shell__main{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0;align-self:stretch;overflow:hidden}.app-shell__content{flex:1 1 auto;min-height:0;min-width:0;overflow:auto;padding:1rem 1.1rem;box-sizing:border-box;background:var(--app-color-shell-main-bg, var(--app-color-background, #fafbfc))}.app-shell--mobile .app-shell__sidebar{display:none}.app-shell--mobile .app-shell__main{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DrawerComponent, selector: "app-drawer", inputs: ["open", "side", "size", "title", "showCloseButton"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppShellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-shell', exportAs: 'appShell', imports: [NgTemplateOutlet, DrawerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"app-shell\"\r\n  [class.app-shell--mobile]=\"isMobileLayout\"\r\n  [class.app-shell--sidebar-collapsed]=\"sidebarCollapsed\"\r\n>\r\n  @if (!isMobileLayout && sidebarTemplate) {\r\n    <aside class=\"app-shell__sidebar\" aria-label=\"Navega\u00E7\u00E3o principal\">\r\n      <ng-container [ngTemplateOutlet]=\"sidebarTemplate\" />\r\n    </aside>\r\n  }\r\n\r\n  @if (isMobileLayout && sidebarTemplate) {\r\n    <app-drawer\r\n      [open]=\"mobileNavOpen\"\r\n      (openChange)=\"onMobileDrawerOpenChange($event)\"\r\n      [side]=\"DrawerSide.Left\"\r\n      [size]=\"DrawerSize.Sm\"\r\n      title=\"Navega\u00E7\u00E3o\"\r\n      [showCloseButton]=\"true\"\r\n    >\r\n      <ng-container [ngTemplateOutlet]=\"sidebarTemplate\" />\r\n    </app-drawer>\r\n  }\r\n\r\n  <div class=\"app-shell__main\">\r\n    <ng-content select=\"[appShellTopbar]\" />\r\n    <main class=\"app-shell__content\">\r\n      <ng-content />\r\n    </main>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@keyframes app-sidebar-nav-reveal-in{0%{opacity:0;transform:translate3d(-.45rem,0,0)}to{opacity:1;transform:translateZ(0)}}:host{display:flex;flex:1 1 auto;flex-direction:column;width:100%;min-width:0;min-height:0;box-sizing:border-box}.app-shell{display:flex;flex-direction:row;align-items:stretch;flex:1 1 auto;width:100%;min-height:0;min-width:0;box-sizing:border-box}.app-shell__sidebar{display:flex;flex-direction:column;flex:0 0 17.5rem;width:17.5rem;max-width:100%;min-width:0;min-height:0;align-self:stretch;overflow:hidden;transition:flex-basis .12s cubic-bezier(.22,1,.36,1),width .12s cubic-bezier(.22,1,.36,1),padding .12s cubic-bezier(.22,1,.36,1)}.app-shell--sidebar-collapsed:not(.app-shell--mobile) .app-shell__sidebar{flex-basis:5rem;width:5rem}.app-shell__main{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0;align-self:stretch;overflow:hidden}.app-shell__content{flex:1 1 auto;min-height:0;min-width:0;overflow:auto;padding:1rem 1.1rem;box-sizing:border-box;background:var(--app-color-shell-main-bg, var(--app-color-background, #fafbfc))}.app-shell--mobile .app-shell__sidebar{display:none}.app-shell--mobile .app-shell__main{width:100%}\n"] }]
-        }], propDecorators: { hostThemeClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], sidebarSlot: [{
+            args: [{ selector: 'app-shell', exportAs: 'appShell', imports: [NgTemplateOutlet, DrawerComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostThemeClass()',
+                    }, template: "<div\r\n  class=\"app-shell\"\r\n  [class.app-shell--mobile]=\"isMobileLayout\"\r\n  [class.app-shell--sidebar-collapsed]=\"sidebarCollapsed\"\r\n>\r\n  @if (!isMobileLayout && sidebarTemplate) {\r\n    <aside class=\"app-shell__sidebar\" aria-label=\"Navega\u00E7\u00E3o principal\">\r\n      <ng-container [ngTemplateOutlet]=\"sidebarTemplate\" />\r\n    </aside>\r\n  }\r\n\r\n  @if (isMobileLayout && sidebarTemplate) {\r\n    <app-drawer\r\n      [open]=\"mobileNavOpen\"\r\n      (openChange)=\"onMobileDrawerOpenChange($event)\"\r\n      [side]=\"DrawerSide.Left\"\r\n      [size]=\"DrawerSize.Sm\"\r\n      title=\"Navega\u00E7\u00E3o\"\r\n      [showCloseButton]=\"true\"\r\n    >\r\n      <ng-container [ngTemplateOutlet]=\"sidebarTemplate\" />\r\n    </app-drawer>\r\n  }\r\n\r\n  <div class=\"app-shell__main\">\r\n    <ng-content select=\"[appShellTopbar]\" />\r\n    <main class=\"app-shell__content\">\r\n      <ng-content />\r\n    </main>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@keyframes app-sidebar-nav-reveal-in{0%{opacity:0;transform:translate3d(-.45rem,0,0)}to{opacity:1;transform:translateZ(0)}}:host{display:flex;flex:1 1 auto;flex-direction:column;width:100%;min-width:0;min-height:0;box-sizing:border-box}.app-shell{display:flex;flex-direction:row;align-items:stretch;flex:1 1 auto;width:100%;min-height:0;min-width:0;box-sizing:border-box}.app-shell__sidebar{display:flex;flex-direction:column;flex:0 0 17.5rem;width:17.5rem;max-width:100%;min-width:0;min-height:0;align-self:stretch;overflow:hidden;transition:flex-basis .12s cubic-bezier(.22,1,.36,1),width .12s cubic-bezier(.22,1,.36,1),padding .12s cubic-bezier(.22,1,.36,1)}.app-shell--sidebar-collapsed:not(.app-shell--mobile) .app-shell__sidebar{flex-basis:5rem;width:5rem}.app-shell__main{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0;align-self:stretch;overflow:hidden}.app-shell__content{flex:1 1 auto;min-height:0;min-width:0;overflow:auto;padding:1rem 1.1rem;box-sizing:border-box;background:var(--app-color-shell-main-bg, var(--app-color-background, #fafbfc))}.app-shell--mobile .app-shell__sidebar{display:none}.app-shell--mobile .app-shell__main{width:100%}\n"] }]
+        }], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], sidebarSlot: [{
                 type: ContentChild,
                 args: [AppShellSidebarTemplateDirective]
             }], sidebarCollapsed: [{
@@ -10352,19 +10384,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Navegação lateral com o mesmo modelo `MenuNodeItem` dos menus da lib (grupos, submenus, teclado).
  * Com `collapsed`, `app-menu-list` usa `compressText`: rótulos de grupo (ex. «Principal») ficam ocultos;
  * itens mostram só ícones com `title` / `aria-label` para acessibilidade.
+ *
+ * Tema: use `[appTheme]="'purple'"` (ou outro id) no host — igual ao `[appTheme]` da lib; sem input,
+ * segue {@link AppThemeService}.
  */
 class AppSidebarComponent {
-    /**
-     * Garante `.app-library-theme` + `theme-*` no host para tokens `--app-color-nav-*` e lista
-     * herdarem a paleta activa (útil fora da demo ou sem antepassado tematizado).
-     */
-    get hostThemeClasses() {
-        return this.theme.getTheme();
-    }
     constructor() {
-        this.theme = inject(AppThemeService);
         this.cdr = inject(ChangeDetectorRef);
         this.destroyRef = inject(DestroyRef);
+        /** Igual a `[appTheme]` / {@link ThemeDirective}: paleta explícita; omitir = tema global. */
+        this.appTheme = input(...(ngDevMode ? [undefined, { debugName: "appTheme" }] : /* istanbul ignore next */ []));
+        this.effectiveThemeId = injectEffectiveThemeId(this.appTheme);
+        this.hostThemeClass = computed(() => getThemeClass(this.effectiveThemeId()), ...(ngDevMode ? [{ debugName: "hostThemeClass" }] : /* istanbul ignore next */ []));
         this.menuId = 'app-shell-sidebar';
         /** Sincronizar com o item de navegação activo (realce persistente). */
         this.selectedItemId = null;
@@ -10409,15 +10440,14 @@ class AppSidebarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: AppSidebarComponent, isStandalone: true, selector: "app-sidebar", inputs: { items: "items", menuId: "menuId", selectedItemId: "selectedItemId", collapsed: ["collapsed", "collapsed", booleanAttribute] }, outputs: { itemSelect: "itemSelect" }, host: { properties: { "class": "this.hostThemeClasses" } }, usesOnChanges: true, ngImport: i0, template: "<nav class=\"app-sidebar app-nav-surface\" [class.app-sidebar--collapsed]=\"collapsed\"\r\n  [attr.aria-label]=\"'Navega\u00E7\u00E3o principal'\">\r\n  <div class=\"app-sidebar__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n  <app-menu-list\r\n    class=\"app-sidebar__list\"\r\n    [items]=\"items\"\r\n    [menuId]=\"menuId\"\r\n    [dense]=\"collapsed\"\r\n    [compressText]=\"listCompressText()\"\r\n    [selectedItemId]=\"selectedItemId\"\r\n    (itemSelect)=\"itemSelect.emit($event)\"\r\n  />\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0;height:100%;box-sizing:border-box}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;height:100%;min-height:0;box-sizing:border-box;padding:.65rem .5rem;background:var(--app-color-nav-shell-bg);border-right:1px solid var(--app-color-nav-border-subtle)}.app-sidebar--collapsed{padding-left:.5rem;padding-right:.5rem}.app-sidebar__toolbar{flex:0 0 auto;display:flex;justify-content:flex-end;align-items:center;padding:0 .1rem .4rem;min-height:0}.app-sidebar__toolbar:empty{display:none}.app-sidebar--collapsed .app-sidebar__toolbar:not(:empty){justify-content:center;padding-left:0;padding-right:0}.app-sidebar__list{flex:1 1 auto;min-height:0;overflow:auto}\n"], dependencies: [{ kind: "component", type: MenuListComponent, selector: "app-menu-list", inputs: ["items", "menuId", "dense", "nested", "selectedItemId", "compressText"], outputs: ["itemSelect", "closeRequest", "submenuBack"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: AppSidebarComponent, isStandalone: true, selector: "app-sidebar", inputs: { appTheme: { classPropertyName: "appTheme", publicName: "appTheme", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: true, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: false, isRequired: false, transformFunction: null }, selectedItemId: { classPropertyName: "selectedItemId", publicName: "selectedItemId", isSignal: false, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { itemSelect: "itemSelect" }, host: { properties: { "class": "hostThemeClass()" } }, usesOnChanges: true, ngImport: i0, template: "<nav class=\"app-sidebar app-nav-surface\" [class.app-sidebar--collapsed]=\"collapsed\"\r\n  [attr.aria-label]=\"'Navega\u00E7\u00E3o principal'\">\r\n  <div class=\"app-sidebar__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n  <app-menu-list\r\n    class=\"app-sidebar__list\"\r\n    [appTheme]=\"effectiveThemeId()\"\r\n    [items]=\"items\"\r\n    [menuId]=\"menuId\"\r\n    [dense]=\"collapsed\"\r\n    [compressText]=\"listCompressText()\"\r\n    [selectedItemId]=\"selectedItemId\"\r\n    (itemSelect)=\"itemSelect.emit($event)\"\r\n  />\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0;height:100%;box-sizing:border-box}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;height:100%;min-height:0;box-sizing:border-box;padding:.65rem .5rem;background:var(--app-color-nav-shell-bg);border-right:1px solid var(--app-color-nav-border-subtle)}.app-sidebar--collapsed{padding-left:.5rem;padding-right:.5rem}.app-sidebar__toolbar{flex:0 0 auto;display:flex;justify-content:flex-end;align-items:center;padding:0 .1rem .4rem;min-height:0}.app-sidebar__toolbar:empty{display:none}.app-sidebar--collapsed .app-sidebar__toolbar:not(:empty){justify-content:center;padding-left:0;padding-right:0}.app-sidebar__list{flex:1 1 auto;min-height:0;overflow:auto}\n"], dependencies: [{ kind: "component", type: MenuListComponent, selector: "app-menu-list", inputs: ["appTheme", "items", "menuId", "dense", "nested", "selectedItemId", "compressText"], outputs: ["itemSelect", "closeRequest", "submenuBack"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-sidebar', imports: [MenuListComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"app-sidebar app-nav-surface\" [class.app-sidebar--collapsed]=\"collapsed\"\r\n  [attr.aria-label]=\"'Navega\u00E7\u00E3o principal'\">\r\n  <div class=\"app-sidebar__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n  <app-menu-list\r\n    class=\"app-sidebar__list\"\r\n    [items]=\"items\"\r\n    [menuId]=\"menuId\"\r\n    [dense]=\"collapsed\"\r\n    [compressText]=\"listCompressText()\"\r\n    [selectedItemId]=\"selectedItemId\"\r\n    (itemSelect)=\"itemSelect.emit($event)\"\r\n  />\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0;height:100%;box-sizing:border-box}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;height:100%;min-height:0;box-sizing:border-box;padding:.65rem .5rem;background:var(--app-color-nav-shell-bg);border-right:1px solid var(--app-color-nav-border-subtle)}.app-sidebar--collapsed{padding-left:.5rem;padding-right:.5rem}.app-sidebar__toolbar{flex:0 0 auto;display:flex;justify-content:flex-end;align-items:center;padding:0 .1rem .4rem;min-height:0}.app-sidebar__toolbar:empty{display:none}.app-sidebar--collapsed .app-sidebar__toolbar:not(:empty){justify-content:center;padding-left:0;padding-right:0}.app-sidebar__list{flex:1 1 auto;min-height:0;overflow:auto}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { hostThemeClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], items: [{
+            args: [{ selector: 'app-sidebar', imports: [MenuListComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostThemeClass()',
+                    }, template: "<nav class=\"app-sidebar app-nav-surface\" [class.app-sidebar--collapsed]=\"collapsed\"\r\n  [attr.aria-label]=\"'Navega\u00E7\u00E3o principal'\">\r\n  <div class=\"app-sidebar__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n  <app-menu-list\r\n    class=\"app-sidebar__list\"\r\n    [appTheme]=\"effectiveThemeId()\"\r\n    [items]=\"items\"\r\n    [menuId]=\"menuId\"\r\n    [dense]=\"collapsed\"\r\n    [compressText]=\"listCompressText()\"\r\n    [selectedItemId]=\"selectedItemId\"\r\n    (itemSelect)=\"itemSelect.emit($event)\"\r\n  />\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0;height:100%;box-sizing:border-box}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;height:100%;min-height:0;box-sizing:border-box;padding:.65rem .5rem;background:var(--app-color-nav-shell-bg);border-right:1px solid var(--app-color-nav-border-subtle)}.app-sidebar--collapsed{padding-left:.5rem;padding-right:.5rem}.app-sidebar__toolbar{flex:0 0 auto;display:flex;justify-content:flex-end;align-items:center;padding:0 .1rem .4rem;min-height:0}.app-sidebar__toolbar:empty{display:none}.app-sidebar--collapsed .app-sidebar__toolbar:not(:empty){justify-content:center;padding-left:0;padding-right:0}.app-sidebar__list{flex:1 1 auto;min-height:0;overflow:auto}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], items: [{
                 type: Input,
                 args: [{ required: true }]
             }], menuId: [{
@@ -10580,5 +10610,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ADAPTIVE_DATA_VIEW_MOBILE_QUERY, APP_SIDEBAR_LABEL_REVEAL_LAG_MS, APP_SIDEBAR_LAYOUT_DURATION_MS, APP_SIDEBAR_NAV_REVEAL_TOTAL_MS, APP_THEME_BASE_CLASS, APP_THEME_IDS, ActionMenuComponent, AdaptiveDataViewComponent, AlertComponent, AnchoredOverlayComponent, AppBreadcrumbComponent, AppDialogComponent, AppLibLightBlockScrollStrategy, AppShellComponent, AppShellSidebarTemplateDirective, AppShellSidebarToggleComponent, AppSidebarComponent, AppSidebarToolbarDirective, AppTheme, AppThemeService, AppTopbarComponent, AppUserMenuComponent, BR_ESTADOS_NOME_SIGLA, BaseFieldComponent, BaseFieldDirective, BooleanFieldDirective, ButtonComponent, ButtonRadius, ButtonSize, ButtonType, ButtonVariant, CardListComponent, CepFieldComponent, CheckboxFieldComponent, ConfirmDialogComponent, ConfirmDialogService, ContextMenuComponent, CpfCnpjFieldComponent, DashboardSectionComponent, DataCardComponent, DataGridComponent, DataListComponent, DataToolbarComponent, DateFieldComponent, DecimalFieldComponent, DetailsFieldComponent, DetailsViewComponent, DialogFooterDirective, DividerComponent, DrawerComponent, DrawerSide, DrawerSize, DropdownBaseComponent, DropdownMenuComponent, DropdownMultiOptionFieldBase, DropdownOptionFieldBase, DropdownSearchFieldComponent, EmptyStateComponent, FILE_PREVIEW_UNAVAILABLE_MESSAGE, FileUploadFieldComponent, FormActionsAlign, FormActionsComponent, FormColComponent, FormGroupComponent, FormGroupVariant, FormLayoutGap, FormRowAlign, FormRowComponent, FormRowJustify, FormSectionAlign, FormSectionComponent, FormSectionRadius, FormSectionVariant, FormTabComponent, FormTabsComponent, ImagePreviewPanelComponent, InputMaskFieldComponent, IntegerFieldComponent, LAYOUT_STACK_SIDE_BY_SIDE, LAYOUT_STACK_STACKED, LayoutStackAlign, LayoutStackComponent, LayoutStackDirection, LayoutStackItemAlign, LibDialogSize, ListItemComponent, LoadingDialogComponent, LoadingDialogService, MaskedTextFieldBase, MenuDividerComponent, MenuDropdownPlacement, MenuGroupComponent, MenuListComponent, MultiselectFieldComponent, NgControlFieldDirective, OverlayPlacement, PDF_IFRAME_VIEWER_HASH, PasswordFieldComponent, PhoneFieldComponent, PopoverBodyTemplateDirective, PopoverComponent, PopoverFooterTemplateDirective, PopoverTriggerDirective, STRUCTRA_THEME_IDS, STRUCTRA_UI, SelectFieldComponent, SkeletonBlockComponent, SkeletonCardComponent, SkeletonFieldShellComponent, SkeletonListComponent, SkeletonTableComponent, SkeletonTextComponent, StatCardComponent, StatusBadgeComponent, SwitchFieldComponent, TableEmptyStateComponent, TableToolbarComponent, TextFieldComponent, TextareaFieldComponent, ThemeDirective, ToastHostComponent, ToastService, TooltipComponent, TooltipPanelTemplateDirective, ValidationSummaryComponent, anchoredOverlayPositions, appendPdfIframeViewerParams, applyPickedCalendarDate, buildDecimalBrDisplay, buildDecimalBrParseString, buildEmptyStateOverlayHtml, caretIndexFromIntegerDigitCount, caretIndexFromSemantic, cepMaskCompleteValidator, cpfCnpjMaskCompleteValidator, escapeHtml, extractDecimalBrParts, fileIsLikelyImage, fileMatchesAccept, fixedDigitsMaskCompleteValidator, formatAcceptForDisplay, formatDateTimePtBr, formatDecimalBr, formatFileSizeBytes, formatIntegerThousandsBr, formatMaskDigits, formatUiFieldDateValue, getFilePreviewKind, getThemeClass, getThemeClassList, getThemeTokenClass, libDialogPanelClasses, mapEstadosToOptions, maskDigitCount, normalizeFormDateValue, normalizeStructraTheme, parseDecimalBr, parseIntegerString, parseUiFieldDateValue, phoneBrMaskCompleteValidator, resolveControlAtPath, sanitizeDecimalBrInput, sanitizeIntegerDigits, sectionHasVisibleInvalid, semanticCaretAt, semanticIntegerDigitCountLeft, stripToDigits, subscribeMarkForCheckOnInvalidUiRefresh, subtreeHasVisibleInvalid };
+export { ADAPTIVE_DATA_VIEW_MOBILE_QUERY, APP_SIDEBAR_LABEL_REVEAL_LAG_MS, APP_SIDEBAR_LAYOUT_DURATION_MS, APP_SIDEBAR_NAV_REVEAL_TOTAL_MS, APP_THEME_BASE_CLASS, APP_THEME_IDS, ActionMenuComponent, AdaptiveDataViewComponent, AlertComponent, AnchoredOverlayComponent, AppBreadcrumbComponent, AppDialogComponent, AppLibLightBlockScrollStrategy, AppShellComponent, AppShellSidebarTemplateDirective, AppShellSidebarToggleComponent, AppSidebarComponent, AppSidebarToolbarDirective, AppTheme, AppThemeService, AppTopbarComponent, AppUserMenuComponent, BR_ESTADOS_NOME_SIGLA, BaseFieldComponent, BaseFieldDirective, BooleanFieldDirective, ButtonComponent, ButtonRadius, ButtonSize, ButtonType, ButtonVariant, CardListComponent, CepFieldComponent, CheckboxFieldComponent, ConfirmDialogComponent, ConfirmDialogService, ContextMenuComponent, CpfCnpjFieldComponent, DashboardSectionComponent, DataCardComponent, DataGridComponent, DataListComponent, DataToolbarComponent, DateFieldComponent, DecimalFieldComponent, DetailsFieldComponent, DetailsViewComponent, DialogFooterDirective, DividerComponent, DrawerComponent, DrawerSide, DrawerSize, DropdownBaseComponent, DropdownMenuComponent, DropdownMultiOptionFieldBase, DropdownOptionFieldBase, DropdownSearchFieldComponent, EmptyStateComponent, FILE_PREVIEW_UNAVAILABLE_MESSAGE, FileUploadFieldComponent, FormActionsAlign, FormActionsComponent, FormColComponent, FormGroupComponent, FormGroupVariant, FormLayoutGap, FormRowAlign, FormRowComponent, FormRowJustify, FormSectionAlign, FormSectionComponent, FormSectionRadius, FormSectionVariant, FormTabComponent, FormTabsComponent, ImagePreviewPanelComponent, InputMaskFieldComponent, IntegerFieldComponent, LAYOUT_STACK_SIDE_BY_SIDE, LAYOUT_STACK_STACKED, LayoutStackAlign, LayoutStackComponent, LayoutStackDirection, LayoutStackItemAlign, LibDialogSize, ListItemComponent, LoadingDialogComponent, LoadingDialogService, MaskedTextFieldBase, MenuDividerComponent, MenuDropdownPlacement, MenuGroupComponent, MenuListComponent, MultiselectFieldComponent, NgControlFieldDirective, OverlayPlacement, PDF_IFRAME_VIEWER_HASH, PasswordFieldComponent, PhoneFieldComponent, PopoverBodyTemplateDirective, PopoverComponent, PopoverFooterTemplateDirective, PopoverTriggerDirective, STRUCTRA_THEME_IDS, STRUCTRA_UI, SelectFieldComponent, SkeletonBlockComponent, SkeletonCardComponent, SkeletonFieldShellComponent, SkeletonListComponent, SkeletonTableComponent, SkeletonTextComponent, StatCardComponent, StatusBadgeComponent, SwitchFieldComponent, TableEmptyStateComponent, TableToolbarComponent, TextFieldComponent, TextareaFieldComponent, ThemeDirective, ToastHostComponent, ToastService, TooltipComponent, TooltipPanelTemplateDirective, ValidationSummaryComponent, anchoredOverlayPositions, appendPdfIframeViewerParams, applyPickedCalendarDate, buildDecimalBrDisplay, buildDecimalBrParseString, buildEmptyStateOverlayHtml, caretIndexFromIntegerDigitCount, caretIndexFromSemantic, cepMaskCompleteValidator, cpfCnpjMaskCompleteValidator, escapeHtml, extractDecimalBrParts, fileIsLikelyImage, fileMatchesAccept, fixedDigitsMaskCompleteValidator, formatAcceptForDisplay, formatDateTimePtBr, formatDecimalBr, formatFileSizeBytes, formatIntegerThousandsBr, formatMaskDigits, formatUiFieldDateValue, getFilePreviewKind, getThemeClass, getThemeClassList, getThemeTokenClass, injectEffectiveThemeId, libDialogPanelClasses, mapEstadosToOptions, maskDigitCount, normalizeFormDateValue, normalizeStructraTheme, parseDecimalBr, parseIntegerString, parseUiFieldDateValue, phoneBrMaskCompleteValidator, resolveControlAtPath, sanitizeDecimalBrInput, sanitizeIntegerDigits, sectionHasVisibleInvalid, semanticCaretAt, semanticIntegerDigitCountLeft, stripToDigits, subscribeMarkForCheckOnInvalidUiRefresh, subtreeHasVisibleInvalid };
 //# sourceMappingURL=structra-ui.mjs.map