structra-ui 0.2.30 → 0.2.32

package/fesm2022/structra-ui.mjs

@@ -2,10 +2,12 @@ import '../structra-ui.css';
 import * as i0 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, effect, TemplateRef, ContentChild } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i1 from '@angular/forms';
+import * as i1$1 from '@angular/forms';
 import { Validators, FormGroupDirective, NgForm, NgControl, NG_VALUE_ACCESSOR, FormsModule, FormGroup, FormArray, FormControl } from '@angular/forms';
 import { NgClass, NgTemplateOutlet, DOCUMENT, NgStyle } from '@angular/common';
 import { CdkConnectedOverlay, CdkOverlayOrigin, Overlay } from '@angular/cdk/overlay';
+import * as i1 from '@angular/cdk/scrolling';
+import { CdkScrollable } from '@angular/cdk/scrolling';
 import { merge, distinctUntilChanged, firstValueFrom, fromEvent, timer } from 'rxjs';
 import * as i2 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -1003,60 +1005,125 @@ class MenuGroupComponent {
     constructor() {
         /** Quando `true`, não mostra o título (ex.: sidebar colapsada só com ícones). */
         this.hideLabel = false;
+        /** Quando `true`, mostra seta e permite expandir/recolher (controlado pelo `menu-list`). */
+        this.collapsible = false;
+        this.expanded = true;
+        this.toggleExpand = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MenuGroupComponent, isStandalone: true, selector: "app-menu-group", inputs: { label: "label", hideLabel: ["hideLabel", "hideLabel", booleanAttribute] }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MenuGroupComponent, isStandalone: true, selector: "app-menu-group", inputs: { label: "label", hideLabel: ["hideLabel", "hideLabel", booleanAttribute], collapsible: ["collapsible", "collapsible", booleanAttribute], expanded: ["expanded", "expanded", booleanAttribute] }, outputs: { toggleExpand: "toggleExpand" }, ngImport: i0, template: `
     @if (label?.trim() && !hideLabel) {
-      <div class="menu-list__group-label" role="presentation">{{ label }}</div>
+      @if (collapsible) {
+        <button
+          type="button"
+          class="menu-list__group-toggle"
+          [attr.aria-expanded]="expanded"
+          (click)="toggleExpand.emit()"
+        >
+          <span class="menu-list__group-toggle-label">{{ label }}</span>
+          <span class="menu-list__group-toggle-icon" aria-hidden="true">
+            @if (expanded) {
+              <i class="fa-solid fa-chevron-up"></i>
+            } @else {
+              <i class="fa-solid fa-chevron-down"></i>
+            }
+          </span>
+        </button>
+      } @else {
+        <div class="menu-list__group-label" role="presentation">{{ label }}</div>
+      }
     }
-  `, isInline: true, styles: [".menu-list__group-label{font-size:.74rem;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--app-color-text-secondary, #5a7fa3);padding:.65rem .75rem .4rem;margin-top:.15rem;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .08))}.menu-list__group-label:first-child{margin-top:0;padding-top:.4rem;border-top:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".menu-list__group-label{font-size:.74rem;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--app-color-text-secondary, #5a7fa3);padding:.65rem .75rem .4rem;margin-top:.15rem;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .08))}.menu-list__group-label:first-child{margin-top:0;padding-top:.4rem;border-top:none}.menu-list__group-toggle{display:flex;align-items:center;justify-content:space-between;gap:.35rem;width:100%;margin:0;margin-top:.15rem;padding:.65rem .75rem .4rem;border:none;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .08));border-radius:0;background:transparent;cursor:pointer;text-align:start;font:inherit;color:var(--app-color-text-secondary, #5a7fa3);box-sizing:border-box;-webkit-tap-highlight-color:transparent}.menu-list__group-toggle:first-child{margin-top:0;padding-top:.4rem;border-top:none}.menu-list__group-toggle:hover{color:var(--app-color-text-primary, #1a2f45)}.menu-list__group-toggle:focus-visible{outline:2px solid var(--app-color-nav-focus-ring, #2b6cb0);outline-offset:2px}.menu-list__group-toggle-label{font-size:.74rem;font-weight:600;letter-spacing:.02em;text-transform:none;flex:1 1 auto;min-width:0}.menu-list__group-toggle-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;font-size:.65rem;line-height:1;opacity:.85}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-menu-group', standalone: true, template: `
     @if (label?.trim() && !hideLabel) {
-      <div class="menu-list__group-label" role="presentation">{{ label }}</div>
+      @if (collapsible) {
+        <button
+          type="button"
+          class="menu-list__group-toggle"
+          [attr.aria-expanded]="expanded"
+          (click)="toggleExpand.emit()"
+        >
+          <span class="menu-list__group-toggle-label">{{ label }}</span>
+          <span class="menu-list__group-toggle-icon" aria-hidden="true">
+            @if (expanded) {
+              <i class="fa-solid fa-chevron-up"></i>
+            } @else {
+              <i class="fa-solid fa-chevron-down"></i>
+            }
+          </span>
+        </button>
+      } @else {
+        <div class="menu-list__group-label" role="presentation">{{ label }}</div>
+      }
     }
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".menu-list__group-label{font-size:.74rem;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--app-color-text-secondary, #5a7fa3);padding:.65rem .75rem .4rem;margin-top:.15rem;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .08))}.menu-list__group-label:first-child{margin-top:0;padding-top:.4rem;border-top:none}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".menu-list__group-label{font-size:.74rem;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--app-color-text-secondary, #5a7fa3);padding:.65rem .75rem .4rem;margin-top:.15rem;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .08))}.menu-list__group-label:first-child{margin-top:0;padding-top:.4rem;border-top:none}.menu-list__group-toggle{display:flex;align-items:center;justify-content:space-between;gap:.35rem;width:100%;margin:0;margin-top:.15rem;padding:.65rem .75rem .4rem;border:none;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .08));border-radius:0;background:transparent;cursor:pointer;text-align:start;font:inherit;color:var(--app-color-text-secondary, #5a7fa3);box-sizing:border-box;-webkit-tap-highlight-color:transparent}.menu-list__group-toggle:first-child{margin-top:0;padding-top:.4rem;border-top:none}.menu-list__group-toggle:hover{color:var(--app-color-text-primary, #1a2f45)}.menu-list__group-toggle:focus-visible{outline:2px solid var(--app-color-nav-focus-ring, #2b6cb0);outline-offset:2px}.menu-list__group-toggle-label{font-size:.74rem;font-weight:600;letter-spacing:.02em;text-transform:none;flex:1 1 auto;min-width:0}.menu-list__group-toggle-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;font-size:.65rem;line-height:1;opacity:.85}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], hideLabel: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], collapsible: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], expanded: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], toggleExpand: [{
+                type: Output
             }] } });
 
 function buildMenuRows(nodes) {
     const rows = [];
     let focusCounter = 0;
-    const addLeaf = (leaf) => {
+    let nextGroupId = 0;
+    const addLeaf = (leaf, parentGroupId) => {
         if (leaf.kind === 'divider') {
-            rows.push({ kind: 'divider' });
+            rows.push({ kind: 'divider', containingGroupId: parentGroupId });
             return;
         }
         const focusIndex = leaf.disabled ? null : focusCounter++;
-        rows.push({ kind: 'action', item: leaf, focusIndex });
+        rows.push({
+            kind: 'action',
+            item: leaf,
+            focusIndex,
+            containingGroupId: parentGroupId,
+        });
     };
-    const addNode = (n) => {
+    const addNode = (n, parentGroupId) => {
         if (n.kind === 'divider') {
-            rows.push({ kind: 'divider' });
+            rows.push({ kind: 'divider', containingGroupId: parentGroupId });
             return;
         }
         if (n.kind === 'submenu') {
             const focusIndex = n.disabled ? null : focusCounter++;
-            rows.push({ kind: 'submenu', item: n, focusIndex });
+            rows.push({
+                kind: 'submenu',
+                item: n,
+                focusIndex,
+                containingGroupId: parentGroupId,
+            });
             return;
         }
         if (n.kind === 'group') {
-            rows.push({ kind: 'group', label: n.label });
+            const gid = nextGroupId++;
+            rows.push({
+                kind: 'group',
+                label: n.label,
+                groupId: gid,
+                alwaysExpanded: n.alwaysExpanded === true,
+            });
             for (const child of n.items) {
-                addNode(child);
+                addNode(child, gid);
             }
             return;
         }
-        addLeaf(n);
+        addLeaf(n, parentGroupId);
     };
     for (const n of nodes) {
-        addNode(n);
+        addNode(n, null);
     }
     return rows;
 }
@@ -1143,10 +1210,30 @@ class MenuListComponent {
          * Oculta rótulos e descrições (ex.: sidebar colapsada), mantendo ícones; define `title` nativo para hover.
          */
         this.compressText = false;
+        /**
+         * Submenus (`kind: 'submenu'`):
+         * - **`true` (omissão)** — abre/fecha **por clique** (e teclado); **não** abre ao passar o rato.
+         * - **`false`** — igual ao comportamento anterior: abre **só com hover** (com atraso), sem alternar ao clicar na linha.
+         */
+        this.clickToOpen = true;
+        /**
+         * Grupos (`kind: 'group'`): quando `false`, cabeçalhos sem seta e itens sempre visíveis (não recolhe).
+         */
+        this.groupCollapsible = true;
+        /**
+         * Com {@link groupCollapsible}: estado inicial ao receber `items`.
+         * - `'all'` — todos os grupos expandidos (omissão).
+         * - `'first'` — só o primeiro grupo expandível fica aberto; os restantes recolhidos.
+         */
+        this.groupDefaultExpansion = 'all';
         this.itemSelect = new EventEmitter();
         this.closeRequest = new EventEmitter();
         this.submenuBack = new EventEmitter();
         this.rows = [];
+        /** Filtrado + índices de foco coerentes com grupos recolhidos. */
+        this.displayRows = [];
+        /** Ids de grupo expandidos; ao mudar `items`, todos voltam a abertos. */
+        this.expandedGroupIds = new Set();
         this.focusableCount = 0;
         /** Índice entre `0` e `focusableCount - 1`, ou `-1` = nenhum realce. */
         this.activeIndex = -1;
@@ -1167,10 +1254,26 @@ class MenuListComponent {
         this.closeOpenSubmenu();
         this.itemSelect.emit(id);
     }
+    /** Identidade estável para `@for` — `track $index` quebra quando linhas são omitidas por grupo recolhido. */
+    trackDisplayRow(index, row) {
+        switch (row.kind) {
+            case 'group':
+                return `g-${String(row.groupId)}`;
+            case 'divider':
+                return `d-${String(row.containingGroupId ?? 'x')}-${index}`;
+            case 'action':
+                return `a-${String(row.item.id)}-${index}`;
+            case 'submenu':
+                return `s-${String(row.item.id)}-${index}`;
+            default:
+                return `r-${index}`;
+        }
+    }
     ngOnChanges(changes) {
         if (changes['items']) {
             this.rows = buildMenuRows(this.items ?? []);
-            this.focusableCount = focusableActionCount(this.rows);
+            this.applyInitialExpandedGroups();
+            this.syncDisplayRows();
             if (this.focusableCount === 0) {
                 this.activeIndex = -1;
             }
@@ -1178,14 +1281,124 @@ class MenuListComponent {
                 this.activeIndex = -1;
             }
         }
+        else if (changes['groupCollapsible'] ||
+            changes['compressText'] ||
+            changes['groupDefaultExpansion']) {
+            if (changes['groupDefaultExpansion'] && !changes['items']) {
+                this.applyInitialExpandedGroups();
+            }
+            this.syncDisplayRows();
+            if (this.focusableCount === 0) {
+                this.activeIndex = -1;
+            }
+            else if (this.activeIndex >= this.focusableCount) {
+                this.activeIndex = this.focusableCount - 1;
+            }
+        }
         if (changes['selectedItemId'] ||
             changes['items'] ||
             changes['compressText'] ||
             changes['dense'] ||
-            changes['menuId']) {
+            changes['menuId'] ||
+            changes['clickToOpen'] ||
+            changes['groupCollapsible'] ||
+            changes['groupDefaultExpansion']) {
             this.cdr.markForCheck();
         }
     }
+    /** Estado inicial de grupos expandidos (chaveado por {@link groupDefaultExpansion}). */
+    applyInitialExpandedGroups() {
+        this.expandedGroupIds.clear();
+        const groupRows = this.rows.filter((r) => r.kind === 'group');
+        const mode = String(this.groupDefaultExpansion ?? 'all').trim() === 'first' ? 'first' : 'all';
+        if (mode === 'first') {
+            if (groupRows.length === 0) {
+                return;
+            }
+            const first = groupRows[0];
+            if (!first.alwaysExpanded) {
+                this.expandedGroupIds.add(first.groupId);
+            }
+            return;
+        }
+        for (const r of this.rows) {
+            if (r.kind === 'group') {
+                this.expandedGroupIds.add(r.groupId);
+            }
+        }
+    }
+    syncDisplayRows() {
+        const visible = this.rows.filter((r) => this.isRowVisible(r));
+        let fi = 0;
+        this.displayRows = visible.map((row) => {
+            if (row.kind === 'action') {
+                const nf = row.focusIndex === null ? null : fi++;
+                return { ...row, focusIndex: nf };
+            }
+            if (row.kind === 'submenu') {
+                const nf = row.focusIndex === null ? null : fi++;
+                return { ...row, focusIndex: nf };
+            }
+            return row;
+        });
+        this.focusableCount = fi;
+    }
+    isGroupExpanded(groupId) {
+        if (!this.groupCollapsible || this.compressText) {
+            return true;
+        }
+        if (this.isGroupAlwaysExpanded(groupId)) {
+            return true;
+        }
+        return this.expandedGroupIds.has(groupId);
+    }
+    /** Eco de `MenuItemGroup.alwaysExpanded` para este `groupId`. */
+    isGroupAlwaysExpanded(groupId) {
+        const r = this.rows.find((x) => x.kind === 'group' && x.groupId === groupId);
+        return r?.alwaysExpanded === true;
+    }
+    isRowVisible(row) {
+        if (row.kind === 'group') {
+            return true;
+        }
+        let gid;
+        if (row.kind === 'divider') {
+            gid = row.containingGroupId;
+        }
+        else if (row.kind === 'action' || row.kind === 'submenu') {
+            gid = row.containingGroupId;
+        }
+        else {
+            return true;
+        }
+        if (gid == null) {
+            return true;
+        }
+        return this.isGroupExpanded(gid);
+    }
+    toggleGroup(groupId) {
+        if (!this.groupCollapsible || this.compressText) {
+            return;
+        }
+        if (this.isGroupAlwaysExpanded(groupId)) {
+            return;
+        }
+        if (this.expandedGroupIds.has(groupId)) {
+            this.expandedGroupIds.delete(groupId);
+        }
+        else {
+            this.expandedGroupIds.add(groupId);
+        }
+        this.syncDisplayRows();
+        this.closeOpenSubmenu();
+        if (this.focusableCount === 0) {
+            this.activeIndex = -1;
+        }
+        else if (this.activeIndex >= this.focusableCount) {
+            this.activeIndex = this.focusableCount - 1;
+        }
+        this.cdr.markForCheck();
+    }
     submenuRowKey(row, index) {
         return row.kind === 'submenu' ? `sm-${String(row.item.id)}-${index}` : '';
     }
@@ -1208,15 +1421,30 @@ class MenuListComponent {
         this.activeIndex = row.focusIndex;
         this.cdr.markForCheck();
     }
+    /**
+     * Grupo / divisor não são `menuitem` com foco-mãe — ao passar o rato para o cabeçalho do grupo,
+     * limpa o realce da opção anterior (`.menu-list__option--active`).
+     */
+    onNonOptionSurfaceEnter() {
+        this.activeIndex = -1;
+        this.cdr.markForCheck();
+    }
     onSubmenuTriggerEnter(row, index) {
         if (row.kind !== 'submenu' || row.item.disabled) {
             return;
         }
+        /** Sempre: ao entrar noutra linha, cancela fecho pendente (ex.: mover entre submenus). */
         this.cancelSubmenuCloseTimer();
-        this.cancelSubmenuOpenTimer();
         if (row.focusIndex !== null) {
             this.activeIndex = row.focusIndex;
         }
+        /** Modo clique: não abrir por hover — só realça o item. */
+        if (this.clickToOpen) {
+            this.cancelSubmenuOpenTimer();
+            this.cdr.markForCheck();
+            return;
+        }
+        this.cancelSubmenuOpenTimer();
         const key = this.submenuRowKey(row, index);
         this.submenuOpenTimer = setTimeout(() => {
             this.submenuOpenTimer = null;
@@ -1228,6 +1456,7 @@ class MenuListComponent {
     }
     onSubmenuTriggerLeave(_row, index) {
         this.cancelSubmenuOpenTimer();
+        /** Com `clickToOpen`, não há timer de abertura por hover; o fecho ao sair mantém-se para painéis já abertos. */
         this.scheduleSubmenuClose(index);
     }
     onSubmenuPanelEnter() {
@@ -1240,7 +1469,7 @@ class MenuListComponent {
         this.cancelSubmenuCloseTimer();
         this.submenuCloseTimer = setTimeout(() => {
             this.submenuCloseTimer = null;
-            const row = this.rows[index];
+            const row = this.displayRows[index];
             if (row?.kind === 'submenu') {
                 const key = this.submenuRowKey(row, index);
                 if (this.openSubmenuKey === key) {
@@ -1278,6 +1507,11 @@ class MenuListComponent {
             ev.stopPropagation();
             return;
         }
+        /** Modo só-hover: o clique não alterna o painel (abre por `mouseenter`). */
+        if (!this.clickToOpen) {
+            ev.preventDefault();
+            return;
+        }
         ev.preventDefault();
         const key = this.submenuRowKey(row, index);
         if (this.openSubmenuKey === key) {
@@ -1295,7 +1529,7 @@ class MenuListComponent {
         }
     }
     openSubmenuForRowAt(index) {
-        const row = this.rows[index];
+        const row = this.displayRows[index];
         if (row?.kind !== 'submenu' || row.item.disabled) {
             return;
         }
@@ -1423,8 +1657,8 @@ class MenuListComponent {
                     break;
                 }
                 let handled = false;
-                for (let i = 0; i < this.rows.length; i++) {
-                    const r = this.rows[i];
+                for (let i = 0; i < this.displayRows.length; i++) {
+                    const r = this.displayRows[i];
                     if (r.kind === 'submenu' &&
                         r.focusIndex === this.activeIndex &&
                         !r.item.disabled) {
@@ -1442,8 +1676,8 @@ class MenuListComponent {
             case 'Enter':
             case ' ': {
                 ev.preventDefault();
-                for (let i = 0; i < this.rows.length; i++) {
-                    const r = this.rows[i];
+                for (let i = 0; i < this.displayRows.length; i++) {
+                    const r = this.displayRows[i];
                     if (r.kind !== 'action' && r.kind !== 'submenu') {
                         continue;
                     }
@@ -1474,18 +1708,19 @@ 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: { 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 }); }
+    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 }, clickToOpen: { classPropertyName: "clickToOpen", publicName: "clickToOpen", isSignal: false, isRequired: false, transformFunction: null }, groupCollapsible: { classPropertyName: "groupCollapsible", publicName: "groupCollapsible", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, groupDefaultExpansion: { classPropertyName: "groupDefaultExpansion", publicName: "groupDefaultExpansion", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", closeRequest: "closeRequest", submenuBack: "submenuBack" }, host: { listeners: { "keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "nestedLists", predicate: MenuListComponent, descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i1.CdkScrollable }], ngImport: i0, template: "<div\n  class=\"menu-list\"\n  [class.menu-list--nested]=\"nested\"\n  [class.menu-list--dense]=\"dense\"\n  [class.menu-list--compress-text]=\"compressText\"\n  cdkScrollable\n  role=\"menu\"\n  [attr.aria-labelledby]=\"null\"\n  tabindex=\"-1\"\n  (mouseleave)=\"onMenuSurfaceLeave()\"\n>\n  @for (row of displayRows; track trackDisplayRow($index, row); let idx = $index) {\n    @switch (row.kind) {\n      @case ('divider') {\n        <app-menu-divider (mouseenter)=\"onNonOptionSurfaceEnter()\" />\n      }\n      @case ('group') {\n        <div\n          class=\"menu-list__group-row\"\n          [class.menu-list__group-row--pinned]=\"row.alwaysExpanded\"\n          (mouseenter)=\"onNonOptionSurfaceEnter()\"\n        >\n          <app-menu-group\n            [label]=\"row.label\"\n            [hideLabel]=\"compressText\"\n            [collapsible]=\"groupCollapsible && !compressText && !row.alwaysExpanded\"\n            [expanded]=\"isGroupExpanded(row.groupId)\"\n            (toggleExpand)=\"toggleGroup(row.groupId)\"\n          />\n        </div>\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\">\n              @if (isSubmenuOpen(row, idx)) {\n                <i class=\"fa-solid fa-chevron-right\"></i>\n              } @else {\n                <i class=\"fa-solid fa-chevron-down\"></i>\n              }\n            </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                [groupCollapsible]=\"groupCollapsible\"\n                [clickToOpen]=\"clickToOpen\"\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;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.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;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.menu-list--dense{padding:.2rem 0;gap:0}.menu-list__group-row{display:block;width:100%}.menu-list__group-row--pinned .menu-list__group-label{color:var(--app-color-primary, #2b7fd9)}.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;display:inline-flex;align-items:center;justify-content:center}.menu-list__submenu-chevron i{font-size:.68rem;line-height:1}.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;margin-block:auto;flex-shrink:0}.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;box-sizing:border-box;padding-top:.4rem!important}.menu-list--nested .menu-list__label{font-weight:400;padding-top:.4rem!important}.menu-list--nested .menu-list__icon{transform:translateY(.125rem)}.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}}:host-context(.app-drawer__body) .menu-list__label{padding-top:.5rem!important}:host-context(.app-drawer__body) .menu-list__icon{transform:translateY(.1875rem)}@media(max-width:767.98px){.menu-list.menu-list--nested .menu-list__label{padding-top:.4rem!important}.menu-list.menu-list--nested .menu-list__icon{transform:translateY(.1875rem)}}.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", "clickToOpen", "groupCollapsible", "groupDefaultExpansion"], 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: "directive", type: i0.forwardRef(() => CdkScrollable), selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i0.forwardRef(() => MenuDividerComponent), selector: "app-menu-divider" }, { kind: "component", type: i0.forwardRef(() => MenuGroupComponent), selector: "app-menu-group", inputs: ["label", "hideLabel", "collapsible", "expanded"], outputs: ["toggleExpand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-menu-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'app-menu-list', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [CdkScrollable], imports: [
                         NgClass,
                         forwardRef(() => MenuListComponent),
                         CdkConnectedOverlay,
                         CdkOverlayOrigin,
+                        CdkScrollable,
                         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"] }]
+                    ], template: "<div\n  class=\"menu-list\"\n  [class.menu-list--nested]=\"nested\"\n  [class.menu-list--dense]=\"dense\"\n  [class.menu-list--compress-text]=\"compressText\"\n  cdkScrollable\n  role=\"menu\"\n  [attr.aria-labelledby]=\"null\"\n  tabindex=\"-1\"\n  (mouseleave)=\"onMenuSurfaceLeave()\"\n>\n  @for (row of displayRows; track trackDisplayRow($index, row); let idx = $index) {\n    @switch (row.kind) {\n      @case ('divider') {\n        <app-menu-divider (mouseenter)=\"onNonOptionSurfaceEnter()\" />\n      }\n      @case ('group') {\n        <div\n          class=\"menu-list__group-row\"\n          [class.menu-list__group-row--pinned]=\"row.alwaysExpanded\"\n          (mouseenter)=\"onNonOptionSurfaceEnter()\"\n        >\n          <app-menu-group\n            [label]=\"row.label\"\n            [hideLabel]=\"compressText\"\n            [collapsible]=\"groupCollapsible && !compressText && !row.alwaysExpanded\"\n            [expanded]=\"isGroupExpanded(row.groupId)\"\n            (toggleExpand)=\"toggleGroup(row.groupId)\"\n          />\n        </div>\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\">\n              @if (isSubmenuOpen(row, idx)) {\n                <i class=\"fa-solid fa-chevron-right\"></i>\n              } @else {\n                <i class=\"fa-solid fa-chevron-down\"></i>\n              }\n            </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                [groupCollapsible]=\"groupCollapsible\"\n                [clickToOpen]=\"clickToOpen\"\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;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.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;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.menu-list--dense{padding:.2rem 0;gap:0}.menu-list__group-row{display:block;width:100%}.menu-list__group-row--pinned .menu-list__group-label{color:var(--app-color-primary, #2b7fd9)}.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;display:inline-flex;align-items:center;justify-content:center}.menu-list__submenu-chevron i{font-size:.68rem;line-height:1}.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;margin-block:auto;flex-shrink:0}.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;box-sizing:border-box;padding-top:.4rem!important}.menu-list--nested .menu-list__label{font-weight:400;padding-top:.4rem!important}.menu-list--nested .menu-list__icon{transform:translateY(.125rem)}.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}}:host-context(.app-drawer__body) .menu-list__label{padding-top:.5rem!important}:host-context(.app-drawer__body) .menu-list__icon{transform:translateY(.1875rem)}@media(max-width:767.98px){.menu-list.menu-list--nested .menu-list__label{padding-top:.4rem!important}.menu-list.menu-list--nested .menu-list__icon{transform:translateY(.1875rem)}}.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: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], items: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1502,6 +1737,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }], compressText: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], clickToOpen: [{
+                type: Input
+            }], groupCollapsible: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], groupDefaultExpansion: [{
+                type: Input
             }], itemSelect: [{
                 type: Output
             }], closeRequest: [{
@@ -1620,11 +1862,11 @@ 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: ["appTheme", "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      [clickToOpen]=\"false\"\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", "clickToOpen", "groupCollapsible", "groupDefaultExpansion"], 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,
-            args: [{ selector: 'app-dropdown-menu', imports: [DropdownBaseComponent, MenuListComponent], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+            args: [{ selector: 'app-dropdown-menu', imports: [DropdownBaseComponent, MenuListComponent], changeDetection: ChangeDetectionStrategy.OnPush, 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      [clickToOpen]=\"false\"\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"] }]
         }], propDecorators: { items: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2998,7 +3240,7 @@ class DateFieldComponent extends NgControlFieldDirective {
                 multi: true,
             },
             { provide: MAT_DATE_LOCALE, useValue: 'pt-BR' },
-        ], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n  [loading]=\"loading\"\n  [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\"\n  [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\n  [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\n  [clearAriaLabel]=\"clearAriaLabel\" [valueAlignEnd]=\"false\"\n  [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n  (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n  <ng-content select=\"[appFieldPrefix]\" />\n  <div class=\"date-field__date-wrap\">\n    <span class=\"date-field__display\" aria-hidden=\"true\">{{ displayTextUi }}</span>\n    <input #nativeInput matInput class=\"date-field__ghost-input\" [matDatepicker]=\"picker\" [(ngModel)]=\"innerDate\"\n      [ngModelOptions]=\"{ standalone: true }\" (ngModelChange)=\"onPickedDate($event)\"\n      [min]=\"minDate ?? undefined\" [max]=\"maxDate ?? undefined\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n      [required]=\"uiRequiredEffective\" [id]=\"controlId\" [attr.name]=\"name || null\" [attr.autocomplete]=\"autocompleteAttr\"\n      [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\"\n      [attr.aria-label]=\"floatLabelCaption || 'Data'\" readonly (click)=\"openPicker()\"\n      (keydown)=\"onGhostInputKeydown($event)\" (blur)=\"onBlur()\" />\n    <mat-datepicker #picker panelClass=\"ui-field-datepicker-panel\" />\n  </div>\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.date-field__date-wrap{position:relative;flex:1;min-width:0;display:flex;align-items:stretch}.date-field__display{position:absolute;left:.75rem;right:.75rem;top:50%;transform:translateY(-.15rem);pointer-events:none;font-size:1rem;line-height:1.35;color:var(--ui-field-float-input-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:0}.date-field__ghost-input{position:relative;z-index:1;flex:1;width:100%;min-width:0;margin:0;box-sizing:border-box;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;color:transparent;caret-color:transparent;background:transparent;border:none;border-radius:0;box-shadow:none;cursor:pointer}.date-field__ghost-input:focus{outline:none}.date-field__ghost-input:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .date-field__display{color:var(--ui-field-readonly-input-text)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .date-field__ghost-input{cursor:default}:host ::ng-deep .date-field__ghost-input.mdc-text-field__input,:host ::ng-deep .date-field__ghost-input.mat-mdc-input-element{border:none!important;box-shadow:none!important}\n"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "disabled", "readonly", "inputId", "errorId", "showPrefixIcon", "prefixIcon", "clearable", "clearAriaLabel", "showSuffixSlot", "valueAlignEnd", "loading", "skeletonVariant", "mostrarMenuContexto", "contextMenuItems", "contextMenuId"], outputs: ["clear", "contextMenuSelect"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatNativeDateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n  [loading]=\"loading\"\n  [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\"\n  [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\n  [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\n  [clearAriaLabel]=\"clearAriaLabel\" [valueAlignEnd]=\"false\"\n  [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n  (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n  <ng-content select=\"[appFieldPrefix]\" />\n  <div class=\"date-field__date-wrap\">\n    <span class=\"date-field__display\" aria-hidden=\"true\">{{ displayTextUi }}</span>\n    <input #nativeInput matInput class=\"date-field__ghost-input\" [matDatepicker]=\"picker\" [(ngModel)]=\"innerDate\"\n      [ngModelOptions]=\"{ standalone: true }\" (ngModelChange)=\"onPickedDate($event)\"\n      [min]=\"minDate ?? undefined\" [max]=\"maxDate ?? undefined\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n      [required]=\"uiRequiredEffective\" [id]=\"controlId\" [attr.name]=\"name || null\" [attr.autocomplete]=\"autocompleteAttr\"\n      [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\"\n      [attr.aria-label]=\"floatLabelCaption || 'Data'\" readonly (click)=\"openPicker()\"\n      (keydown)=\"onGhostInputKeydown($event)\" (blur)=\"onBlur()\" />\n    <mat-datepicker #picker panelClass=\"ui-field-datepicker-panel\" />\n  </div>\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.date-field__date-wrap{position:relative;flex:1;min-width:0;display:flex;align-items:stretch}.date-field__display{position:absolute;left:.75rem;right:.75rem;top:50%;transform:translateY(-.15rem);pointer-events:none;font-size:1rem;line-height:1.35;color:var(--ui-field-float-input-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:0}.date-field__ghost-input{position:relative;z-index:1;flex:1;width:100%;min-width:0;margin:0;box-sizing:border-box;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;color:transparent;caret-color:transparent;background:transparent;border:none;border-radius:0;box-shadow:none;cursor:pointer}.date-field__ghost-input:focus{outline:none}.date-field__ghost-input:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .date-field__display{color:var(--ui-field-readonly-input-text)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .date-field__ghost-input{cursor:default}:host ::ng-deep .date-field__ghost-input.mdc-text-field__input,:host ::ng-deep .date-field__ghost-input.mat-mdc-input-element{border:none!important;box-shadow:none!important}\n"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "disabled", "readonly", "inputId", "errorId", "showPrefixIcon", "prefixIcon", "clearable", "clearAriaLabel", "showSuffixSlot", "valueAlignEnd", "loading", "skeletonVariant", "mostrarMenuContexto", "contextMenuItems", "contextMenuId"], outputs: ["clear", "contextMenuSelect"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatNativeDateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DateFieldComponent, decorators: [{
             type: Component,
@@ -9569,11 +9811,11 @@ 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: "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 }); }
+    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      [clickToOpen]=\"false\"\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", "clickToOpen", "groupCollapsible", "groupDefaultExpansion"], 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      [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"] }]
+            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      [clickToOpen]=\"false\"\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 }]
@@ -9733,14 +9975,14 @@ class DrawerComponent {
         this.focusPreOpen = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DrawerComponent, isStandalone: true, selector: "app-drawer", inputs: { open: ["open", "open", booleanAttribute], side: "side", size: "size", drawerHeading: ["title", "drawerHeading"], showCloseButton: ["showCloseButton", "showCloseButton", booleanAttribute] }, outputs: { openChange: "openChange" }, host: { properties: { "class.app-drawer-host--open": "open" }, classAttribute: "app-drawer-host" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panelRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (open) {\r\n  <div\r\n    class=\"app-drawer__backdrop\"\r\n    role=\"presentation\"\r\n    tabindex=\"-1\"\r\n    (click)=\"onBackdropClick()\"\r\n  ></div>\r\n\r\n  <aside\r\n    #panelRef\r\n    class=\"app-drawer__panel\"\r\n    [ngClass]=\"panelClasses\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    [attr.aria-labelledby]=\"drawerHeading.trim() ? titleId : null\"\r\n    tabindex=\"-1\"\r\n    (keydown)=\"onPanelKeydown($event)\"\r\n  >\r\n    <header\r\n      class=\"app-drawer__header\"\r\n      [class.app-drawer__header--no-title]=\"!drawerHeading.trim()\"\r\n    >\r\n      @if (drawerHeading.trim()) {\r\n        <h2 class=\"app-drawer__title\" [id]=\"titleId\">{{ drawerHeading }}</h2>\r\n      }\r\n      @if (showCloseButton) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"app-drawer__close\"\r\n          aria-label=\"Fechar painel\"\r\n          (click)=\"onCloseClick()\"\r\n        >\r\n          <span class=\"app-drawer__close-x\" aria-hidden=\"true\">&times;</span>\r\n        </button>\r\n      }\r\n    </header>\r\n\r\n    <div class=\"app-drawer__body\">\r\n      <ng-content />\r\n    </div>\r\n\r\n    <footer class=\"app-drawer__footer\">\r\n      <ng-content select=\"[appDrawerFooter]\" />\r\n    </footer>\r\n  </aside>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.app-drawer__backdrop{position:fixed;inset:0;z-index:var(--app-z-drawer-backdrop, 1100);background:#1a2f456b;backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05);animation:app-drawer-backdrop-in .22s ease-out both}@keyframes app-drawer-backdrop-in{0%{backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}to{backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05)}}.app-drawer__panel{position:fixed;z-index:var(--app-z-drawer-panel, 1101);display:flex;flex-direction:column;max-width:100vw;max-height:100vh;box-sizing:border-box;background:var(--app-color-surface, #fff);border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));box-shadow:-4px 0 24px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07));outline:none}.app-drawer__panel--side-right{top:0;right:0;bottom:0;animation:app-drawer-slide-in-right .24s ease-out}.app-drawer__panel--side-left{top:0;left:0;bottom:0;animation:app-drawer-slide-in-left .24s ease-out;box-shadow:4px 0 24px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07));border-right:none}.app-drawer__panel--side-bottom{inset:auto 0 0;max-height:min(88vh,32rem);border-radius:8px 8px 0 0;animation:app-drawer-slide-in-bottom .24s ease-out}.app-drawer__panel--side-right.app-drawer__panel--size-sm,.app-drawer__panel--side-left.app-drawer__panel--size-sm{width:min(18rem,90vw)}.app-drawer__panel--side-right.app-drawer__panel--size-md,.app-drawer__panel--side-left.app-drawer__panel--size-md{width:min(24rem,90vw)}.app-drawer__panel--side-right.app-drawer__panel--size-lg,.app-drawer__panel--side-left.app-drawer__panel--size-lg{width:min(32rem,90vw)}.app-drawer__panel--side-bottom.app-drawer__panel--size-sm{min-height:12rem}.app-drawer__panel--side-bottom.app-drawer__panel--size-md{min-height:16rem}.app-drawer__panel--side-bottom.app-drawer__panel--size-lg{min-height:22rem}.app-drawer__panel:has(.app-drawer__body app-sidebar) .app-drawer__header.app-drawer__header--no-title{position:absolute;z-index:2;inset:.38rem .38rem auto auto;width:auto;max-width:none;padding:0;margin:0;pointer-events:none;flex:0 0 auto}.app-drawer__panel:has(.app-drawer__body app-sidebar) .app-drawer__header.app-drawer__header--no-title .app-drawer__close{pointer-events:auto}.app-drawer__panel:has(.app-drawer__body app-sidebar) .app-drawer__body ::ng-deep app-sidebar .app-sidebar__head[data-app-sidebar-head]{padding-inline-end:2.35rem!important;padding-inline-start:.3rem!important;box-sizing:border-box}@keyframes app-drawer-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes app-drawer-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes app-drawer-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.app-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1rem 1rem .75rem;flex:0 0 auto}.app-drawer__header--no-title{justify-content:flex-end;padding-top:.65rem;padding-bottom:.65rem}.app-drawer__title{margin:0;font-size:1.05rem;font-weight:600;color:var(--app-color-text-primary, #1a2f45);line-height:1.3;flex:1;min-width:0}.app-drawer__close{flex:0 0 auto;width:2.35rem;height:2.35rem;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:none;background:color-mix(in srgb,var(--app-color-text-primary) 6%,transparent);color:var(--app-color-text-secondary, #5a7fa3);cursor:pointer;margin:0;padding:0}.app-drawer__close:hover{background:var(--app-color-hover-bg, rgba(43, 127, 217, .08))}.app-drawer__close:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:2px}.app-drawer__close-x{font-size:1.35rem;line-height:1}.app-drawer__body{flex:1 1 auto;min-height:0;overflow:auto;padding:1rem;color:var(--app-color-text-primary, #1a2f45);font-size:.9rem;line-height:1.5;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.app-drawer__body::-webkit-scrollbar{width:4px;height:4px}.app-drawer__body::-webkit-scrollbar-track{background:transparent}.app-drawer__body::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.app-drawer__body::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}.app-drawer__body:has(app-sidebar){padding:.35rem .12rem .45rem;overflow:hidden!important;display:flex!important;flex-direction:column!important}.app-drawer__body:has(app-sidebar)>*{flex:1 1 auto;min-height:0;min-width:0;align-self:stretch;display:flex;flex-direction:column}.app-drawer__body:has(app-sidebar) app-sidebar{flex:1 1 auto;min-height:0;min-width:0;align-self:stretch;width:100%}.app-drawer__body ::ng-deep app-sidebar .app-sidebar{border-right:0;padding:.38rem .1rem .45rem}.app-drawer__body ::ng-deep app-sidebar .app-sidebar__toolbar app-shell-sidebar-toggle{display:none!important}.app-drawer__body ::ng-deep app-sidebar app-menu-list .menu-list__option{margin-left:.12rem;margin-right:.12rem;padding:.42rem .32rem}.app-drawer__body ::ng-deep app-sidebar app-menu-list .menu-list__submenu-chevron{padding-left:.18rem}.app-drawer__footer{flex:0 0 auto;padding:.75rem 1rem 1rem;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.app-drawer__footer:empty{display:none;padding:0;border:none}@media(prefers-reduced-motion:reduce){.app-drawer__backdrop{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DrawerComponent, isStandalone: true, selector: "app-drawer", inputs: { open: ["open", "open", booleanAttribute], side: "side", size: "size", drawerHeading: ["title", "drawerHeading"], showCloseButton: ["showCloseButton", "showCloseButton", booleanAttribute] }, outputs: { openChange: "openChange" }, host: { properties: { "class.app-drawer-host--open": "open" }, classAttribute: "app-drawer-host" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panelRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (open) {\r\n  <div\r\n    class=\"app-drawer__backdrop\"\r\n    role=\"presentation\"\r\n    tabindex=\"-1\"\r\n    (click)=\"onBackdropClick()\"\r\n  ></div>\r\n\r\n  <aside\r\n    #panelRef\r\n    class=\"app-drawer__panel\"\r\n    [ngClass]=\"panelClasses\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    [attr.aria-labelledby]=\"drawerHeading.trim() ? titleId : null\"\r\n    tabindex=\"-1\"\r\n    (keydown)=\"onPanelKeydown($event)\"\r\n  >\r\n    <header\r\n      class=\"app-drawer__header\"\r\n      [class.app-drawer__header--no-title]=\"!drawerHeading.trim()\"\r\n    >\r\n      @if (drawerHeading.trim()) {\r\n        <h2 class=\"app-drawer__title\" [id]=\"titleId\">{{ drawerHeading }}</h2>\r\n      }\r\n      @if (showCloseButton) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"app-drawer__close\"\r\n          aria-label=\"Fechar painel\"\r\n          (click)=\"onCloseClick()\"\r\n        >\r\n          <span class=\"app-drawer__close-x\" aria-hidden=\"true\">&times;</span>\r\n        </button>\r\n      }\r\n    </header>\r\n\r\n    <div class=\"app-drawer__body\">\r\n      <ng-content />\r\n    </div>\r\n\r\n    <footer class=\"app-drawer__footer\">\r\n      <ng-content select=\"[appDrawerFooter]\" />\r\n    </footer>\r\n  </aside>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.app-drawer__backdrop{position:fixed;inset:0;z-index:var(--app-z-drawer-backdrop, 1100);background:#1a2f456b;backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05);animation:app-drawer-backdrop-in .22s ease-out both}@keyframes app-drawer-backdrop-in{0%{backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}to{backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05)}}.app-drawer__panel{position:fixed;z-index:var(--app-z-drawer-panel, 1101);display:flex;flex-direction:column;max-width:100vw;max-height:100vh;box-sizing:border-box;background:var(--app-color-surface, #fff);border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));box-shadow:-4px 0 24px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07));outline:none}.app-drawer__panel--side-right{top:0;right:0;bottom:0;animation:app-drawer-slide-in-right .24s ease-out}.app-drawer__panel--side-left{top:0;left:0;bottom:0;animation:app-drawer-slide-in-left .24s ease-out;box-shadow:4px 0 24px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07));border-right:none}.app-drawer__panel--side-bottom{inset:auto 0 0;max-height:min(88vh,32rem);border-radius:8px 8px 0 0;animation:app-drawer-slide-in-bottom .24s ease-out}.app-drawer__panel--side-right.app-drawer__panel--size-sm,.app-drawer__panel--side-left.app-drawer__panel--size-sm{width:min(18rem,90vw)}.app-drawer__panel--side-right.app-drawer__panel--size-md,.app-drawer__panel--side-left.app-drawer__panel--size-md{width:min(24rem,90vw)}.app-drawer__panel--side-right.app-drawer__panel--size-lg,.app-drawer__panel--side-left.app-drawer__panel--size-lg{width:min(32rem,90vw)}.app-drawer__panel--side-bottom.app-drawer__panel--size-sm{min-height:12rem}.app-drawer__panel--side-bottom.app-drawer__panel--size-md{min-height:16rem}.app-drawer__panel--side-bottom.app-drawer__panel--size-lg{min-height:22rem}.app-drawer__panel:has(.app-drawer__body app-sidebar) .app-drawer__header.app-drawer__header--no-title{position:absolute;z-index:2;inset:.38rem .38rem auto auto;width:auto;max-width:none;padding:0;margin:0;pointer-events:none;flex:0 0 auto}.app-drawer__panel:has(.app-drawer__body app-sidebar) .app-drawer__header.app-drawer__header--no-title .app-drawer__close{pointer-events:auto}.app-drawer__panel:has(.app-drawer__body app-sidebar) .app-drawer__body ::ng-deep app-sidebar .app-sidebar__head[data-app-sidebar-head]{padding-inline-end:2.35rem!important;padding-inline-start:.3rem!important;box-sizing:border-box}@keyframes app-drawer-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes app-drawer-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes app-drawer-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.app-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1rem 1rem .75rem;flex:0 0 auto;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.app-drawer__header--no-title{justify-content:flex-end;padding-top:.65rem;padding-bottom:.65rem}.app-drawer__title{margin:0;font-size:1.05rem;font-weight:600;color:var(--app-color-text-primary, #1a2f45);line-height:1.3;flex:1;min-width:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.app-drawer__close{flex:0 0 auto;width:2.35rem;height:2.35rem;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:none;background:color-mix(in srgb,var(--app-color-text-primary) 6%,transparent);color:var(--app-color-text-secondary, #5a7fa3);cursor:pointer;margin:0;padding:0;user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important}.app-drawer__close:hover{background:var(--app-color-hover-bg, rgba(43, 127, 217, .08))}.app-drawer__close:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:2px}.app-drawer__close-x{font-size:1.35rem;line-height:1;user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;pointer-events:none}.app-drawer__body{flex:1 1 auto;min-height:0;overflow:auto;padding:1rem;color:var(--app-color-text-primary, #1a2f45);font-size:.9rem;line-height:1.5;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.app-drawer__body::-webkit-scrollbar{width:4px;height:4px}.app-drawer__body::-webkit-scrollbar-track{background:transparent}.app-drawer__body::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.app-drawer__body::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}.app-drawer__body:has(app-sidebar){padding:.35rem .12rem .45rem;overflow:hidden!important;display:flex!important;flex-direction:column!important}.app-drawer__body:has(app-sidebar)>*{flex:1 1 auto;min-height:0;min-width:0;align-self:stretch;display:flex;flex-direction:column}.app-drawer__body:has(app-sidebar) app-sidebar{flex:1 1 auto;min-height:0;min-width:0;align-self:stretch;width:100%}.app-drawer__body ::ng-deep app-sidebar .app-sidebar{border-right:0;padding:.38rem .1rem .45rem}.app-drawer__body ::ng-deep app-sidebar .app-sidebar__toolbar app-shell-sidebar-toggle{display:none!important}.app-drawer__body ::ng-deep app-sidebar app-menu-list .menu-list__option{margin-left:.12rem;margin-right:.12rem;padding:.42rem .32rem}.app-drawer__body ::ng-deep app-sidebar app-menu-list .menu-list__submenu-chevron{padding-left:.18rem}.app-drawer__body ::ng-deep app-sidebar app-menu-list .menu-list__label{padding-top:.72rem!important}.app-drawer__body ::ng-deep app-sidebar app-menu-list .menu-list__icon{transform:translateY(.1875rem)}.app-drawer__footer{flex:0 0 auto;padding:.75rem 1rem 1rem;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.app-drawer__footer:empty{display:none;padding:0;border:none}@media(prefers-reduced-motion:reduce){.app-drawer__backdrop{animation:none}}\n"], dependencies: [{ 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: DrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-drawer', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'app-drawer-host',
                         '[class.app-drawer-host--open]': 'open',
-                    }, template: "@if (open) {\r\n  <div\r\n    class=\"app-drawer__backdrop\"\r\n    role=\"presentation\"\r\n    tabindex=\"-1\"\r\n    (click)=\"onBackdropClick()\"\r\n  ></div>\r\n\r\n  <aside\r\n    #panelRef\r\n    class=\"app-drawer__panel\"\r\n    [ngClass]=\"panelClasses\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    [attr.aria-labelledby]=\"drawerHeading.trim() ? titleId : null\"\r\n    tabindex=\"-1\"\r\n    (keydown)=\"onPanelKeydown($event)\"\r\n  >\r\n    <header\r\n      class=\"app-drawer__header\"\r\n      [class.app-drawer__header--no-title]=\"!drawerHeading.trim()\"\r\n    >\r\n      @if (drawerHeading.trim()) {\r\n        <h2 class=\"app-drawer__title\" [id]=\"titleId\">{{ drawerHeading }}</h2>\r\n      }\r\n      @if (showCloseButton) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"app-drawer__close\"\r\n          aria-label=\"Fechar painel\"\r\n          (click)=\"onCloseClick()\"\r\n        >\r\n          <span class=\"app-drawer__close-x\" aria-hidden=\"true\">&times;</span>\r\n        </button>\r\n      }\r\n    </header>\r\n\r\n    <div class=\"app-drawer__body\">\r\n      <ng-content />\r\n    </div>\r\n\r\n    <footer class=\"app-drawer__footer\">\r\n      <ng-content select=\"[appDrawerFooter]\" />\r\n    </footer>\r\n  </aside>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.app-drawer__backdrop{position:fixed;inset:0;z-index:var(--app-z-drawer-backdrop, 1100);background:#1a2f456b;backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05);animation:app-drawer-backdrop-in .22s ease-out both}@keyframes app-drawer-backdrop-in{0%{backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}to{backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05)}}.app-drawer__panel{position:fixed;z-index:var(--app-z-drawer-panel, 1101);display:flex;flex-direction:column;max-width:100vw;max-height:100vh;box-sizing:border-box;background:var(--app-color-surface, #fff);border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));box-shadow:-4px 0 24px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07));outline:none}.app-drawer__panel--side-right{top:0;right:0;bottom:0;animation:app-drawer-slide-in-right .24s ease-out}.app-drawer__panel--side-left{top:0;left:0;bottom:0;animation:app-drawer-slide-in-left .24s ease-out;box-shadow:4px 0 24px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07));border-right:none}.app-drawer__panel--side-bottom{inset:auto 0 0;max-height:min(88vh,32rem);border-radius:8px 8px 0 0;animation:app-drawer-slide-in-bottom .24s ease-out}.app-drawer__panel--side-right.app-drawer__panel--size-sm,.app-drawer__panel--side-left.app-drawer__panel--size-sm{width:min(18rem,90vw)}.app-drawer__panel--side-right.app-drawer__panel--size-md,.app-drawer__panel--side-left.app-drawer__panel--size-md{width:min(24rem,90vw)}.app-drawer__panel--side-right.app-drawer__panel--size-lg,.app-drawer__panel--side-left.app-drawer__panel--size-lg{width:min(32rem,90vw)}.app-drawer__panel--side-bottom.app-drawer__panel--size-sm{min-height:12rem}.app-drawer__panel--side-bottom.app-drawer__panel--size-md{min-height:16rem}.app-drawer__panel--side-bottom.app-drawer__panel--size-lg{min-height:22rem}.app-drawer__panel:has(.app-drawer__body app-sidebar) .app-drawer__header.app-drawer__header--no-title{position:absolute;z-index:2;inset:.38rem .38rem auto auto;width:auto;max-width:none;padding:0;margin:0;pointer-events:none;flex:0 0 auto}.app-drawer__panel:has(.app-drawer__body app-sidebar) .app-drawer__header.app-drawer__header--no-title .app-drawer__close{pointer-events:auto}.app-drawer__panel:has(.app-drawer__body app-sidebar) .app-drawer__body ::ng-deep app-sidebar .app-sidebar__head[data-app-sidebar-head]{padding-inline-end:2.35rem!important;padding-inline-start:.3rem!important;box-sizing:border-box}@keyframes app-drawer-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes app-drawer-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes app-drawer-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.app-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1rem 1rem .75rem;flex:0 0 auto}.app-drawer__header--no-title{justify-content:flex-end;padding-top:.65rem;padding-bottom:.65rem}.app-drawer__title{margin:0;font-size:1.05rem;font-weight:600;color:var(--app-color-text-primary, #1a2f45);line-height:1.3;flex:1;min-width:0}.app-drawer__close{flex:0 0 auto;width:2.35rem;height:2.35rem;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:none;background:color-mix(in srgb,var(--app-color-text-primary) 6%,transparent);color:var(--app-color-text-secondary, #5a7fa3);cursor:pointer;margin:0;padding:0}.app-drawer__close:hover{background:var(--app-color-hover-bg, rgba(43, 127, 217, .08))}.app-drawer__close:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:2px}.app-drawer__close-x{font-size:1.35rem;line-height:1}.app-drawer__body{flex:1 1 auto;min-height:0;overflow:auto;padding:1rem;color:var(--app-color-text-primary, #1a2f45);font-size:.9rem;line-height:1.5;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.app-drawer__body::-webkit-scrollbar{width:4px;height:4px}.app-drawer__body::-webkit-scrollbar-track{background:transparent}.app-drawer__body::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.app-drawer__body::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}.app-drawer__body:has(app-sidebar){padding:.35rem .12rem .45rem;overflow:hidden!important;display:flex!important;flex-direction:column!important}.app-drawer__body:has(app-sidebar)>*{flex:1 1 auto;min-height:0;min-width:0;align-self:stretch;display:flex;flex-direction:column}.app-drawer__body:has(app-sidebar) app-sidebar{flex:1 1 auto;min-height:0;min-width:0;align-self:stretch;width:100%}.app-drawer__body ::ng-deep app-sidebar .app-sidebar{border-right:0;padding:.38rem .1rem .45rem}.app-drawer__body ::ng-deep app-sidebar .app-sidebar__toolbar app-shell-sidebar-toggle{display:none!important}.app-drawer__body ::ng-deep app-sidebar app-menu-list .menu-list__option{margin-left:.12rem;margin-right:.12rem;padding:.42rem .32rem}.app-drawer__body ::ng-deep app-sidebar app-menu-list .menu-list__submenu-chevron{padding-left:.18rem}.app-drawer__footer{flex:0 0 auto;padding:.75rem 1rem 1rem;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.app-drawer__footer:empty{display:none;padding:0;border:none}@media(prefers-reduced-motion:reduce){.app-drawer__backdrop{animation:none}}\n"] }]
+                    }, template: "@if (open) {\r\n  <div\r\n    class=\"app-drawer__backdrop\"\r\n    role=\"presentation\"\r\n    tabindex=\"-1\"\r\n    (click)=\"onBackdropClick()\"\r\n  ></div>\r\n\r\n  <aside\r\n    #panelRef\r\n    class=\"app-drawer__panel\"\r\n    [ngClass]=\"panelClasses\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    [attr.aria-labelledby]=\"drawerHeading.trim() ? titleId : null\"\r\n    tabindex=\"-1\"\r\n    (keydown)=\"onPanelKeydown($event)\"\r\n  >\r\n    <header\r\n      class=\"app-drawer__header\"\r\n      [class.app-drawer__header--no-title]=\"!drawerHeading.trim()\"\r\n    >\r\n      @if (drawerHeading.trim()) {\r\n        <h2 class=\"app-drawer__title\" [id]=\"titleId\">{{ drawerHeading }}</h2>\r\n      }\r\n      @if (showCloseButton) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"app-drawer__close\"\r\n          aria-label=\"Fechar painel\"\r\n          (click)=\"onCloseClick()\"\r\n        >\r\n          <span class=\"app-drawer__close-x\" aria-hidden=\"true\">&times;</span>\r\n        </button>\r\n      }\r\n    </header>\r\n\r\n    <div class=\"app-drawer__body\">\r\n      <ng-content />\r\n    </div>\r\n\r\n    <footer class=\"app-drawer__footer\">\r\n      <ng-content select=\"[appDrawerFooter]\" />\r\n    </footer>\r\n  </aside>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.app-drawer__backdrop{position:fixed;inset:0;z-index:var(--app-z-drawer-backdrop, 1100);background:#1a2f456b;backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05);animation:app-drawer-backdrop-in .22s ease-out both}@keyframes app-drawer-backdrop-in{0%{backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}to{backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05)}}.app-drawer__panel{position:fixed;z-index:var(--app-z-drawer-panel, 1101);display:flex;flex-direction:column;max-width:100vw;max-height:100vh;box-sizing:border-box;background:var(--app-color-surface, #fff);border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));box-shadow:-4px 0 24px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07));outline:none}.app-drawer__panel--side-right{top:0;right:0;bottom:0;animation:app-drawer-slide-in-right .24s ease-out}.app-drawer__panel--side-left{top:0;left:0;bottom:0;animation:app-drawer-slide-in-left .24s ease-out;box-shadow:4px 0 24px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07));border-right:none}.app-drawer__panel--side-bottom{inset:auto 0 0;max-height:min(88vh,32rem);border-radius:8px 8px 0 0;animation:app-drawer-slide-in-bottom .24s ease-out}.app-drawer__panel--side-right.app-drawer__panel--size-sm,.app-drawer__panel--side-left.app-drawer__panel--size-sm{width:min(18rem,90vw)}.app-drawer__panel--side-right.app-drawer__panel--size-md,.app-drawer__panel--side-left.app-drawer__panel--size-md{width:min(24rem,90vw)}.app-drawer__panel--side-right.app-drawer__panel--size-lg,.app-drawer__panel--side-left.app-drawer__panel--size-lg{width:min(32rem,90vw)}.app-drawer__panel--side-bottom.app-drawer__panel--size-sm{min-height:12rem}.app-drawer__panel--side-bottom.app-drawer__panel--size-md{min-height:16rem}.app-drawer__panel--side-bottom.app-drawer__panel--size-lg{min-height:22rem}.app-drawer__panel:has(.app-drawer__body app-sidebar) .app-drawer__header.app-drawer__header--no-title{position:absolute;z-index:2;inset:.38rem .38rem auto auto;width:auto;max-width:none;padding:0;margin:0;pointer-events:none;flex:0 0 auto}.app-drawer__panel:has(.app-drawer__body app-sidebar) .app-drawer__header.app-drawer__header--no-title .app-drawer__close{pointer-events:auto}.app-drawer__panel:has(.app-drawer__body app-sidebar) .app-drawer__body ::ng-deep app-sidebar .app-sidebar__head[data-app-sidebar-head]{padding-inline-end:2.35rem!important;padding-inline-start:.3rem!important;box-sizing:border-box}@keyframes app-drawer-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes app-drawer-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes app-drawer-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.app-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1rem 1rem .75rem;flex:0 0 auto;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.app-drawer__header--no-title{justify-content:flex-end;padding-top:.65rem;padding-bottom:.65rem}.app-drawer__title{margin:0;font-size:1.05rem;font-weight:600;color:var(--app-color-text-primary, #1a2f45);line-height:1.3;flex:1;min-width:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.app-drawer__close{flex:0 0 auto;width:2.35rem;height:2.35rem;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:none;background:color-mix(in srgb,var(--app-color-text-primary) 6%,transparent);color:var(--app-color-text-secondary, #5a7fa3);cursor:pointer;margin:0;padding:0;user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important}.app-drawer__close:hover{background:var(--app-color-hover-bg, rgba(43, 127, 217, .08))}.app-drawer__close:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:2px}.app-drawer__close-x{font-size:1.35rem;line-height:1;user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;pointer-events:none}.app-drawer__body{flex:1 1 auto;min-height:0;overflow:auto;padding:1rem;color:var(--app-color-text-primary, #1a2f45);font-size:.9rem;line-height:1.5;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.app-drawer__body::-webkit-scrollbar{width:4px;height:4px}.app-drawer__body::-webkit-scrollbar-track{background:transparent}.app-drawer__body::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.app-drawer__body::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}.app-drawer__body:has(app-sidebar){padding:.35rem .12rem .45rem;overflow:hidden!important;display:flex!important;flex-direction:column!important}.app-drawer__body:has(app-sidebar)>*{flex:1 1 auto;min-height:0;min-width:0;align-self:stretch;display:flex;flex-direction:column}.app-drawer__body:has(app-sidebar) app-sidebar{flex:1 1 auto;min-height:0;min-width:0;align-self:stretch;width:100%}.app-drawer__body ::ng-deep app-sidebar .app-sidebar{border-right:0;padding:.38rem .1rem .45rem}.app-drawer__body ::ng-deep app-sidebar .app-sidebar__toolbar app-shell-sidebar-toggle{display:none!important}.app-drawer__body ::ng-deep app-sidebar app-menu-list .menu-list__option{margin-left:.12rem;margin-right:.12rem;padding:.42rem .32rem}.app-drawer__body ::ng-deep app-sidebar app-menu-list .menu-list__submenu-chevron{padding-left:.18rem}.app-drawer__body ::ng-deep app-sidebar app-menu-list .menu-list__label{padding-top:.72rem!important}.app-drawer__body ::ng-deep app-sidebar app-menu-list .menu-list__icon{transform:translateY(.1875rem)}.app-drawer__footer{flex:0 0 auto;padding:.75rem 1rem 1rem;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.app-drawer__footer:empty{display:none;padding:0;border:none}@media(prefers-reduced-motion:reduce){.app-drawer__backdrop{animation:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { open: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -10433,6 +10675,20 @@ class AppSidebarComponent {
         this.selectedItemId = null;
         /** Modo estreito: só ícones + `compressText` na lista (rótulos via `title` / `aria-label`). */
         this.collapsed = false;
+        /**
+         * Repassado a {@link MenuListComponent.clickToOpen}: submenus na lateral abrem por **clique** (`true`, omissão)
+         * ou por **hover** (`false`).
+         */
+        this.clickToOpen = true;
+        /**
+         * Repassado a {@link MenuListComponent.groupCollapsible}: `false` desactiva expandir/recolher nas secções.
+         */
+        this.groupCollapsible = true;
+        /**
+         * Repassado a {@link MenuListComponent.groupDefaultExpansion}: estado inicial dos grupos ao carregar `items`.
+         * Com `'first'` e um primeiro grupo `alwaysExpanded`, os restantes grupos colapsáveis começam fechados.
+         */
+        this.groupDefaultExpansion = 'all';
         this.itemSelect = new EventEmitter();
         /**
          * Valor efectivo de `compressText` em `app-menu-list`: ao expandir, mantém-se comprimido
@@ -10545,11 +10801,11 @@ 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: "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" }, 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__head\" data-app-sidebar-head=\"\" translate=\"no\">\r\n    <div class=\"app-sidebar__brand\"><ng-content select=\"[appSidebarBrand]\" /></div>\r\n    <div class=\"app-sidebar__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n  </div>\r\n  <app-menu-list\r\n    class=\"app-sidebar__list\"\r\n    [appTheme]=\"appTheme()\"\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:flex;flex-direction:column;flex:1 1 auto;align-self:stretch;min-width:0;min-height:0;box-sizing:border-box}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;box-sizing:border-box;padding:.65rem .35rem .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:.35rem}.app-sidebar__head[data-app-sidebar-head]{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:.35rem;width:100%;min-height:2.35rem;padding:0 .1rem .4rem;padding-inline-start:.75rem!important;box-sizing:border-box;contain:layout;direction:ltr;unicode-bidi:isolate;flex-direction:row!important;justify-content:flex-start!important;direction:ltr!important}.app-sidebar--collapsed .app-sidebar__head[data-app-sidebar-head]{justify-content:center!important;padding-inline-start:.25rem!important;padding-inline-end:.25rem;gap:0}.app-sidebar__brand{order:0;flex:1 1 0%;min-width:0;align-self:stretch;display:flex;justify-content:flex-start;align-items:center;padding:0;box-sizing:border-box;font-size:.95rem;font-weight:700;line-height:1.25;color:var(--app-color-text-primary, #1a2f45);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start!important}.app-sidebar__brand>*{text-align:inherit!important;margin-inline:0!important;margin-inline-start:0!important;margin-inline-end:0!important;padding-inline-start:0!important;padding-inline-end:0!important;box-sizing:border-box;min-width:0;align-self:flex-start;max-width:100%}.app-sidebar__brand ::ng-deep [appSidebarBrand]{display:inline-flex!important;flex-direction:row!important;justify-content:flex-start!important;align-items:center!important;align-self:flex-start!important;margin-inline-start:0!important;margin-inline-end:auto!important;margin-left:0!important;margin-right:auto!important;text-align:start!important;width:auto!important;max-width:100%!important;min-width:0!important;flex:1 1 0%!important;box-sizing:border-box}.app-sidebar__brand:empty{display:none}.app-sidebar--collapsed .app-sidebar__brand:not(:empty){display:none}.app-sidebar__toolbar{order:1;flex:0 0 auto;flex-shrink:0;display:flex;justify-content:flex-end;align-items:center;align-self:stretch;min-width:0;padding:0;box-sizing:border-box;margin-inline-start:auto!important}.app-sidebar__toolbar:empty{display:none}.app-sidebar--collapsed .app-sidebar__toolbar:not(:empty){margin-inline-start:0!important}.app-sidebar--collapsed .app-sidebar__toolbar ::ng-deep [appSidebarToolbar]:not(app-shell-sidebar-toggle)>:not(app-shell-sidebar-toggle){display:none!important}.app-sidebar__list{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.app-sidebar__list::-webkit-scrollbar{width:4px;height:4px}.app-sidebar__list::-webkit-scrollbar-track{background:transparent}.app-sidebar__list::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.app-sidebar__list::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}:host-context(.app-drawer__body) .app-sidebar__head[data-app-sidebar-head]{justify-content:flex-start!important;align-items:center!important}:host-context(.app-drawer__body) .app-sidebar__brand{justify-content:flex-start!important;flex:1 1 0%!important;min-width:0!important;text-align:start!important}:host-context(.app-drawer__body) .app-sidebar__toolbar:not(:empty){margin-inline-start:auto!important;justify-content:flex-end!important;align-self:stretch!important}:host-context(.app-drawer__body) .app-sidebar__brand ::ng-deep [appSidebarBrand]{justify-content:flex-start!important;margin-inline-start:0!important;margin-inline-end:auto!important}:host-context(.app-shell__sidebar) .app-sidebar__brand ::ng-deep [appSidebarBrand]{justify-content:flex-start!important;margin-inline-start:0!important;margin-inline-end:auto!important;text-align:start!important}\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 }); }
+    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 }, clickToOpen: { classPropertyName: "clickToOpen", publicName: "clickToOpen", isSignal: false, isRequired: false, transformFunction: null }, groupCollapsible: { classPropertyName: "groupCollapsible", publicName: "groupCollapsible", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, groupDefaultExpansion: { classPropertyName: "groupDefaultExpansion", publicName: "groupDefaultExpansion", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, 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__head\" data-app-sidebar-head=\"\" translate=\"no\">\r\n    <div class=\"app-sidebar__brand\"><ng-content select=\"[appSidebarBrand]\" /></div>\r\n    <div class=\"app-sidebar__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n  </div>\r\n  <!-- `cdkScrollable` no elemento nativo que faz overflow \u2014 o CDK reposiciona submenus ao scroll (custom elements como host falhavam). -->\r\n  <div class=\"app-sidebar__scroll\" cdkScrollable>\r\n    <app-menu-list\r\n      class=\"app-sidebar__list\"\r\n      [appTheme]=\"appTheme()\"\r\n      [items]=\"items\"\r\n      [menuId]=\"menuId\"\r\n      [dense]=\"collapsed\"\r\n      [compressText]=\"listCompressText()\"\r\n      [clickToOpen]=\"clickToOpen\"\r\n      [groupCollapsible]=\"groupCollapsible\"\r\n      [groupDefaultExpansion]=\"groupDefaultExpansion\"\r\n      [selectedItemId]=\"selectedItemId\"\r\n      (itemSelect)=\"itemSelect.emit($event)\"\r\n    />\r\n  </div>\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;flex:1 1 auto;align-self:stretch;min-width:0;min-height:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:.65rem .35rem .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:.35rem}.app-sidebar__head[data-app-sidebar-head]{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:.35rem;width:100%;min-height:2.35rem;padding:0 .1rem .4rem;padding-inline-start:.75rem!important;box-sizing:border-box;contain:layout;direction:ltr;unicode-bidi:isolate;flex-direction:row!important;justify-content:flex-start!important;direction:ltr!important}.app-sidebar--collapsed .app-sidebar__head[data-app-sidebar-head]{justify-content:center!important;padding-inline-start:.25rem!important;padding-inline-end:.25rem;gap:0}.app-sidebar__brand{order:0;flex:1 1 0%;min-width:0;align-self:stretch;display:flex;justify-content:flex-start;align-items:center;padding:0;box-sizing:border-box;font-size:.95rem;font-weight:700;line-height:1.25;color:var(--app-color-text-primary, #1a2f45);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start!important}.app-sidebar__brand>*{text-align:inherit!important;margin-inline:0!important;margin-inline-start:0!important;margin-inline-end:0!important;padding-inline-start:0!important;padding-inline-end:0!important;box-sizing:border-box;min-width:0;align-self:flex-start;max-width:100%}.app-sidebar__brand ::ng-deep [appSidebarBrand]{display:inline-flex!important;flex-direction:row!important;justify-content:flex-start!important;align-items:center!important;align-self:flex-start!important;margin-inline-start:0!important;margin-inline-end:auto!important;margin-left:0!important;margin-right:auto!important;text-align:start!important;width:auto!important;max-width:100%!important;min-width:0!important;flex:1 1 0%!important;box-sizing:border-box}.app-sidebar__brand:empty{display:none}.app-sidebar--collapsed .app-sidebar__brand:not(:empty){display:none}.app-sidebar__toolbar{order:1;flex:0 0 auto;flex-shrink:0;display:flex;justify-content:flex-end;align-items:center;align-self:stretch;min-width:0;padding:0;box-sizing:border-box;margin-inline-start:auto!important}.app-sidebar__toolbar:empty{display:none}.app-sidebar--collapsed .app-sidebar__toolbar:not(:empty){margin-inline-start:0!important}.app-sidebar--collapsed .app-sidebar__toolbar ::ng-deep [appSidebarToolbar]:not(app-shell-sidebar-toggle)>:not(app-shell-sidebar-toggle){display:none!important}.app-sidebar__scroll{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.app-sidebar__scroll::-webkit-scrollbar{width:4px;height:4px}.app-sidebar__scroll::-webkit-scrollbar-track{background:transparent}.app-sidebar__scroll::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.app-sidebar__scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}.app-sidebar__list{display:block;min-height:0;overflow:visible}:host-context(.app-drawer__body) .app-sidebar__head[data-app-sidebar-head]{justify-content:flex-start!important;align-items:center!important}:host-context(.app-drawer__body) .app-sidebar__brand{justify-content:flex-start!important;flex:1 1 0%!important;min-width:0!important;text-align:start!important}:host-context(.app-drawer__body) .app-sidebar__toolbar:not(:empty){margin-inline-start:auto!important;justify-content:flex-end!important;align-self:stretch!important}:host-context(.app-drawer__body) .app-sidebar__brand ::ng-deep [appSidebarBrand]{justify-content:flex-start!important;margin-inline-start:0!important;margin-inline-end:auto!important}:host-context(.app-drawer__body) ::ng-deep app-menu-list .menu-list__label{padding-top:.72rem!important}:host-context(.app-drawer__body) ::ng-deep app-menu-list .menu-list__icon{transform:translateY(.1875rem)}:host-context(.app-shell__sidebar) .app-sidebar__brand ::ng-deep [appSidebarBrand]{justify-content:flex-start!important;margin-inline-start:0!important;margin-inline-end:auto!important;text-align:start!important}\n"], dependencies: [{ kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: MenuListComponent, selector: "app-menu-list", inputs: ["appTheme", "items", "menuId", "dense", "nested", "selectedItemId", "compressText", "clickToOpen", "groupCollapsible", "groupDefaultExpansion"], 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__head\" data-app-sidebar-head=\"\" translate=\"no\">\r\n    <div class=\"app-sidebar__brand\"><ng-content select=\"[appSidebarBrand]\" /></div>\r\n    <div class=\"app-sidebar__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n  </div>\r\n  <app-menu-list\r\n    class=\"app-sidebar__list\"\r\n    [appTheme]=\"appTheme()\"\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:flex;flex-direction:column;flex:1 1 auto;align-self:stretch;min-width:0;min-height:0;box-sizing:border-box}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;box-sizing:border-box;padding:.65rem .35rem .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:.35rem}.app-sidebar__head[data-app-sidebar-head]{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:.35rem;width:100%;min-height:2.35rem;padding:0 .1rem .4rem;padding-inline-start:.75rem!important;box-sizing:border-box;contain:layout;direction:ltr;unicode-bidi:isolate;flex-direction:row!important;justify-content:flex-start!important;direction:ltr!important}.app-sidebar--collapsed .app-sidebar__head[data-app-sidebar-head]{justify-content:center!important;padding-inline-start:.25rem!important;padding-inline-end:.25rem;gap:0}.app-sidebar__brand{order:0;flex:1 1 0%;min-width:0;align-self:stretch;display:flex;justify-content:flex-start;align-items:center;padding:0;box-sizing:border-box;font-size:.95rem;font-weight:700;line-height:1.25;color:var(--app-color-text-primary, #1a2f45);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start!important}.app-sidebar__brand>*{text-align:inherit!important;margin-inline:0!important;margin-inline-start:0!important;margin-inline-end:0!important;padding-inline-start:0!important;padding-inline-end:0!important;box-sizing:border-box;min-width:0;align-self:flex-start;max-width:100%}.app-sidebar__brand ::ng-deep [appSidebarBrand]{display:inline-flex!important;flex-direction:row!important;justify-content:flex-start!important;align-items:center!important;align-self:flex-start!important;margin-inline-start:0!important;margin-inline-end:auto!important;margin-left:0!important;margin-right:auto!important;text-align:start!important;width:auto!important;max-width:100%!important;min-width:0!important;flex:1 1 0%!important;box-sizing:border-box}.app-sidebar__brand:empty{display:none}.app-sidebar--collapsed .app-sidebar__brand:not(:empty){display:none}.app-sidebar__toolbar{order:1;flex:0 0 auto;flex-shrink:0;display:flex;justify-content:flex-end;align-items:center;align-self:stretch;min-width:0;padding:0;box-sizing:border-box;margin-inline-start:auto!important}.app-sidebar__toolbar:empty{display:none}.app-sidebar--collapsed .app-sidebar__toolbar:not(:empty){margin-inline-start:0!important}.app-sidebar--collapsed .app-sidebar__toolbar ::ng-deep [appSidebarToolbar]:not(app-shell-sidebar-toggle)>:not(app-shell-sidebar-toggle){display:none!important}.app-sidebar__list{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.app-sidebar__list::-webkit-scrollbar{width:4px;height:4px}.app-sidebar__list::-webkit-scrollbar-track{background:transparent}.app-sidebar__list::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.app-sidebar__list::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}:host-context(.app-drawer__body) .app-sidebar__head[data-app-sidebar-head]{justify-content:flex-start!important;align-items:center!important}:host-context(.app-drawer__body) .app-sidebar__brand{justify-content:flex-start!important;flex:1 1 0%!important;min-width:0!important;text-align:start!important}:host-context(.app-drawer__body) .app-sidebar__toolbar:not(:empty){margin-inline-start:auto!important;justify-content:flex-end!important;align-self:stretch!important}:host-context(.app-drawer__body) .app-sidebar__brand ::ng-deep [appSidebarBrand]{justify-content:flex-start!important;margin-inline-start:0!important;margin-inline-end:auto!important}:host-context(.app-shell__sidebar) .app-sidebar__brand ::ng-deep [appSidebarBrand]{justify-content:flex-start!important;margin-inline-start:0!important;margin-inline-end:auto!important;text-align:start!important}\n"] }]
+            args: [{ selector: 'app-sidebar', imports: [CdkScrollable, 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__head\" data-app-sidebar-head=\"\" translate=\"no\">\r\n    <div class=\"app-sidebar__brand\"><ng-content select=\"[appSidebarBrand]\" /></div>\r\n    <div class=\"app-sidebar__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n  </div>\r\n  <!-- `cdkScrollable` no elemento nativo que faz overflow \u2014 o CDK reposiciona submenus ao scroll (custom elements como host falhavam). -->\r\n  <div class=\"app-sidebar__scroll\" cdkScrollable>\r\n    <app-menu-list\r\n      class=\"app-sidebar__list\"\r\n      [appTheme]=\"appTheme()\"\r\n      [items]=\"items\"\r\n      [menuId]=\"menuId\"\r\n      [dense]=\"collapsed\"\r\n      [compressText]=\"listCompressText()\"\r\n      [clickToOpen]=\"clickToOpen\"\r\n      [groupCollapsible]=\"groupCollapsible\"\r\n      [groupDefaultExpansion]=\"groupDefaultExpansion\"\r\n      [selectedItemId]=\"selectedItemId\"\r\n      (itemSelect)=\"itemSelect.emit($event)\"\r\n    />\r\n  </div>\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;flex:1 1 auto;align-self:stretch;min-width:0;min-height:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:.65rem .35rem .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:.35rem}.app-sidebar__head[data-app-sidebar-head]{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:.35rem;width:100%;min-height:2.35rem;padding:0 .1rem .4rem;padding-inline-start:.75rem!important;box-sizing:border-box;contain:layout;direction:ltr;unicode-bidi:isolate;flex-direction:row!important;justify-content:flex-start!important;direction:ltr!important}.app-sidebar--collapsed .app-sidebar__head[data-app-sidebar-head]{justify-content:center!important;padding-inline-start:.25rem!important;padding-inline-end:.25rem;gap:0}.app-sidebar__brand{order:0;flex:1 1 0%;min-width:0;align-self:stretch;display:flex;justify-content:flex-start;align-items:center;padding:0;box-sizing:border-box;font-size:.95rem;font-weight:700;line-height:1.25;color:var(--app-color-text-primary, #1a2f45);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start!important}.app-sidebar__brand>*{text-align:inherit!important;margin-inline:0!important;margin-inline-start:0!important;margin-inline-end:0!important;padding-inline-start:0!important;padding-inline-end:0!important;box-sizing:border-box;min-width:0;align-self:flex-start;max-width:100%}.app-sidebar__brand ::ng-deep [appSidebarBrand]{display:inline-flex!important;flex-direction:row!important;justify-content:flex-start!important;align-items:center!important;align-self:flex-start!important;margin-inline-start:0!important;margin-inline-end:auto!important;margin-left:0!important;margin-right:auto!important;text-align:start!important;width:auto!important;max-width:100%!important;min-width:0!important;flex:1 1 0%!important;box-sizing:border-box}.app-sidebar__brand:empty{display:none}.app-sidebar--collapsed .app-sidebar__brand:not(:empty){display:none}.app-sidebar__toolbar{order:1;flex:0 0 auto;flex-shrink:0;display:flex;justify-content:flex-end;align-items:center;align-self:stretch;min-width:0;padding:0;box-sizing:border-box;margin-inline-start:auto!important}.app-sidebar__toolbar:empty{display:none}.app-sidebar--collapsed .app-sidebar__toolbar:not(:empty){margin-inline-start:0!important}.app-sidebar--collapsed .app-sidebar__toolbar ::ng-deep [appSidebarToolbar]:not(app-shell-sidebar-toggle)>:not(app-shell-sidebar-toggle){display:none!important}.app-sidebar__scroll{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.app-sidebar__scroll::-webkit-scrollbar{width:4px;height:4px}.app-sidebar__scroll::-webkit-scrollbar-track{background:transparent}.app-sidebar__scroll::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.app-sidebar__scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}.app-sidebar__list{display:block;min-height:0;overflow:visible}:host-context(.app-drawer__body) .app-sidebar__head[data-app-sidebar-head]{justify-content:flex-start!important;align-items:center!important}:host-context(.app-drawer__body) .app-sidebar__brand{justify-content:flex-start!important;flex:1 1 0%!important;min-width:0!important;text-align:start!important}:host-context(.app-drawer__body) .app-sidebar__toolbar:not(:empty){margin-inline-start:auto!important;justify-content:flex-end!important;align-self:stretch!important}:host-context(.app-drawer__body) .app-sidebar__brand ::ng-deep [appSidebarBrand]{justify-content:flex-start!important;margin-inline-start:0!important;margin-inline-end:auto!important}:host-context(.app-drawer__body) ::ng-deep app-menu-list .menu-list__label{padding-top:.72rem!important}:host-context(.app-drawer__body) ::ng-deep app-menu-list .menu-list__icon{transform:translateY(.1875rem)}:host-context(.app-shell__sidebar) .app-sidebar__brand ::ng-deep [appSidebarBrand]{justify-content:flex-start!important;margin-inline-start:0!important;margin-inline-end:auto!important;text-align:start!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], items: [{
                 type: Input,
                 args: [{ required: true }]
@@ -10560,6 +10816,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }], collapsed: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], clickToOpen: [{
+                type: Input
+            }], groupCollapsible: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], groupDefaultExpansion: [{
+                type: Input
             }], itemSelect: [{
                 type: Output
             }] } });
@@ -10633,11 +10896,11 @@ class AppShellSidebarToggleComponent {
         this.toggle.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppShellSidebarToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: AppShellSidebarToggleComponent, isStandalone: true, selector: "app-shell-sidebar-toggle", inputs: { collapsed: ["collapsed", "collapsed", booleanAttribute], expandLabel: "expandLabel", collapseLabel: "collapseLabel" }, outputs: { toggle: "toggle" }, ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  class=\"app-shell-sidebar-toggle__btn\"\r\n  [attr.aria-pressed]=\"collapsed\"\r\n  [attr.aria-expanded]=\"!collapsed\"\r\n  [attr.aria-label]=\"collapsed ? expandLabel : collapseLabel\"\r\n  [attr.title]=\"collapsed ? expandLabel : collapseLabel\"\r\n  (click)=\"onClick()\"\r\n>\r\n  <i\r\n    class=\"fa-solid\"\r\n    [class.fa-angles-left]=\"!collapsed\"\r\n    [class.fa-angles-right]=\"collapsed\"\r\n    aria-hidden=\"true\"\r\n  ></i>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex:0 0 auto;align-items:center;justify-content:flex-end;width:auto;max-width:100%;min-width:0;box-sizing:border-box;direction:ltr}:host-context(.app-sidebar--collapsed),:host-context(aside.docs-shell__sidebar--collapsed){justify-content:center;align-self:center}.app-shell-sidebar-toggle__btn{display:inline-flex;align-items:center;justify-content:center;width:2.35rem;height:2.35rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--app-color-text-secondary, #4a6682);cursor:pointer;line-height:1;font-size:.92rem;transition:background .16s ease,color .16s ease}.app-shell-sidebar-toggle__btn:hover{background:color-mix(in srgb,var(--app-color-primary) 6%,transparent);color:var(--app-color-primary)}.app-shell-sidebar-toggle__btn:focus-visible{outline:2px solid var(--app-color-nav-focus-ring);outline-offset:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: AppShellSidebarToggleComponent, isStandalone: true, selector: "app-shell-sidebar-toggle", inputs: { collapsed: ["collapsed", "collapsed", booleanAttribute], expandLabel: "expandLabel", collapseLabel: "collapseLabel" }, outputs: { toggle: "toggle" }, ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  class=\"app-shell-sidebar-toggle__btn\"\r\n  [attr.aria-pressed]=\"collapsed\"\r\n  [attr.aria-expanded]=\"!collapsed\"\r\n  [attr.aria-label]=\"collapsed ? expandLabel : collapseLabel\"\r\n  [attr.title]=\"collapsed ? expandLabel : collapseLabel\"\r\n  (click)=\"onClick()\"\r\n>\r\n  <i\r\n    class=\"fa-solid\"\r\n    [class.fa-angles-left]=\"!collapsed\"\r\n    [class.fa-angles-right]=\"collapsed\"\r\n    aria-hidden=\"true\"\r\n  ></i>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex:0 0 auto;align-items:center;justify-content:flex-end;width:auto;max-width:100%;min-width:0;box-sizing:border-box;direction:ltr;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}:host-context(.app-sidebar--collapsed),:host-context(aside.docs-shell__sidebar--collapsed){justify-content:center;align-self:center}.app-shell-sidebar-toggle__btn{display:inline-flex;align-items:center;justify-content:center;width:2.35rem;height:2.35rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--app-color-text-secondary, #4a6682);cursor:pointer;line-height:1;font-size:.92rem;user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;transition:background .16s ease,color .16s ease}.app-shell-sidebar-toggle__btn:hover{background:color-mix(in srgb,var(--app-color-primary) 6%,transparent);color:var(--app-color-primary)}.app-shell-sidebar-toggle__btn:focus-visible{outline:2px solid var(--app-color-nav-focus-ring);outline-offset:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppShellSidebarToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-shell-sidebar-toggle', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  type=\"button\"\r\n  class=\"app-shell-sidebar-toggle__btn\"\r\n  [attr.aria-pressed]=\"collapsed\"\r\n  [attr.aria-expanded]=\"!collapsed\"\r\n  [attr.aria-label]=\"collapsed ? expandLabel : collapseLabel\"\r\n  [attr.title]=\"collapsed ? expandLabel : collapseLabel\"\r\n  (click)=\"onClick()\"\r\n>\r\n  <i\r\n    class=\"fa-solid\"\r\n    [class.fa-angles-left]=\"!collapsed\"\r\n    [class.fa-angles-right]=\"collapsed\"\r\n    aria-hidden=\"true\"\r\n  ></i>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex:0 0 auto;align-items:center;justify-content:flex-end;width:auto;max-width:100%;min-width:0;box-sizing:border-box;direction:ltr}:host-context(.app-sidebar--collapsed),:host-context(aside.docs-shell__sidebar--collapsed){justify-content:center;align-self:center}.app-shell-sidebar-toggle__btn{display:inline-flex;align-items:center;justify-content:center;width:2.35rem;height:2.35rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--app-color-text-secondary, #4a6682);cursor:pointer;line-height:1;font-size:.92rem;transition:background .16s ease,color .16s ease}.app-shell-sidebar-toggle__btn:hover{background:color-mix(in srgb,var(--app-color-primary) 6%,transparent);color:var(--app-color-primary)}.app-shell-sidebar-toggle__btn:focus-visible{outline:2px solid var(--app-color-nav-focus-ring);outline-offset:2px}\n"] }]
+            args: [{ selector: 'app-shell-sidebar-toggle', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  type=\"button\"\r\n  class=\"app-shell-sidebar-toggle__btn\"\r\n  [attr.aria-pressed]=\"collapsed\"\r\n  [attr.aria-expanded]=\"!collapsed\"\r\n  [attr.aria-label]=\"collapsed ? expandLabel : collapseLabel\"\r\n  [attr.title]=\"collapsed ? expandLabel : collapseLabel\"\r\n  (click)=\"onClick()\"\r\n>\r\n  <i\r\n    class=\"fa-solid\"\r\n    [class.fa-angles-left]=\"!collapsed\"\r\n    [class.fa-angles-right]=\"collapsed\"\r\n    aria-hidden=\"true\"\r\n  ></i>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex:0 0 auto;align-items:center;justify-content:flex-end;width:auto;max-width:100%;min-width:0;box-sizing:border-box;direction:ltr;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}:host-context(.app-sidebar--collapsed),:host-context(aside.docs-shell__sidebar--collapsed){justify-content:center;align-self:center}.app-shell-sidebar-toggle__btn{display:inline-flex;align-items:center;justify-content:center;width:2.35rem;height:2.35rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--app-color-text-secondary, #4a6682);cursor:pointer;line-height:1;font-size:.92rem;user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;transition:background .16s ease,color .16s ease}.app-shell-sidebar-toggle__btn:hover{background:color-mix(in srgb,var(--app-color-primary) 6%,transparent);color:var(--app-color-primary)}.app-shell-sidebar-toggle__btn:focus-visible{outline:2px solid var(--app-color-nav-focus-ring);outline-offset:2px}\n"] }]
         }], propDecorators: { collapsed: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]