structra-ui 0.2.43 → 0.2.44

package/fesm2022/structra-ui.mjs

@@ -1,10 +1,11 @@
 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, input, HostListener, ViewChildren, forwardRef, ApplicationRef, afterNextRender, ContentChildren, NgZone, ViewContainerRef, Renderer2, effect, TemplateRef, ContentChild } from '@angular/core';
+import { signal, booleanAttribute, Input, HostBinding, ChangeDetectionStrategy, Component, ElementRef, ViewChild, inject, ChangeDetectorRef, Injector, DestroyRef, EventEmitter, Output, Directive, numberAttribute, computed, Injectable, Renderer2, input, HostListener, ViewChildren, forwardRef, ApplicationRef, afterNextRender, ContentChildren, NgZone, effect, TemplateRef, ContentChild } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 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 * as i1$2 from '@angular/cdk/overlay';
 import { Overlay, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import * as i1 from '@angular/cdk/scrolling';
 import { CdkScrollable } from '@angular/cdk/scrolling';
@@ -807,11 +808,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }] });
 
 class ThemeDirective {
-    constructor(elementRef, renderer, themeService) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.themeService = themeService;
+    constructor() {
         this.theme = 'black';
+        this.elementRef = inject((ElementRef));
+        this.renderer = inject(Renderer2);
+        this.themeService = inject(AppThemeService);
         this.themeTokenClasses = STRUCTRA_THEME_IDS.map((themeId) => `theme-${themeId}`);
     }
     ngOnChanges() {
@@ -824,7 +825,7 @@ class ThemeDirective {
         /** Overlays / hosts que leem {@link AppThemeService} alinham com o mesmo tema do wrapper. */
         this.themeService.setTheme(normalizeStructraTheme(this.theme));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: AppThemeService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: ThemeDirective, isStandalone: true, selector: "[appTheme]", inputs: { theme: ["appTheme", "theme"] }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeDirective, decorators: [{
@@ -833,7 +834,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: '[appTheme]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: AppThemeService }], propDecorators: { theme: [{
+        }], propDecorators: { theme: [{
                 type: Input,
                 args: ['appTheme']
             }] } });
@@ -1248,12 +1249,9 @@ const SUBMENU_OPEN_MS = 200;
  */
 const SUBMENU_CLOSE_MS = 1200;
 class MenuListBodyComponent {
-    constructor() {
-        this.cdr = inject(ChangeDetectorRef);
-        this.hostRef = inject((ElementRef));
+    constructor(cdr, hostRef) {
         /** Igual a `[appTheme]` na lib; omitir = tema global (ex.: propagado por `app-sidebar`). */
         this.appTheme = input(...(ngDevMode ? [undefined, { debugName: "appTheme" }] : /* istanbul ignore next */ []));
-        this.effectiveThemeId = injectEffectiveThemeId(this.appTheme);
         this.items = [];
         /** Prefixo dos `id` das opções focáveis (`${menuId}-opt-${focusIndex}`). */
         this.menuId = 'app-menu';
@@ -1310,6 +1308,9 @@ class MenuListBodyComponent {
             const [base, token] = getThemeClassList(this.effectiveThemeId());
             return { [base]: true, [token]: true };
         }, ...(ngDevMode ? [{ debugName: "panelThemeNgClass" }] : /* istanbul ignore next */ []));
+        this.cdr = cdr;
+        this.hostRef = hostRef;
+        this.effectiveThemeId = injectEffectiveThemeId(this.appTheme);
     }
     overlayPanelClasses() {
         return [...getThemeClassList(this.effectiveThemeId()), 'menu-submenu__cdk-panel'];
@@ -1855,7 +1856,7 @@ class MenuListBodyComponent {
                 break;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuListBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuListBodyComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MenuListBodyComponent, isStandalone: true, selector: "app-menu-list-body", 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 }, expandAllGroupsInitially: { classPropertyName: "expandAllGroupsInitially", publicName: "expandAllGroupsInitially", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { itemSelect: "itemSelect", closeRequest: "closeRequest", submenuBack: "submenuBack" }, host: { listeners: { "focusin": "onFocusIn($event)", "keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "nestedLists", predicate: MenuListBodyComponent, descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i1.CdkScrollable }], ngImport: i0, template: "<div class=\"menu-list\" [class.menu-list--nested]=\"nested\" [class.menu-list--dense]=\"dense\"\n  [class.menu-list--compress-text]=\"compressText\" cdkScrollable tabindex=\"-1\" (mouseleave)=\"onMenuSurfaceLeave()\">\n  <ng-content />\n  <div class=\"menu-list__items\" role=\"menu\" [attr.aria-labelledby]=\"null\" tabindex=\"-1\">\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 class=\"menu-list__group-row\" [class.menu-list__group-row--pinned]=\"row.alwaysExpanded\"\n      (mouseenter)=\"onNonOptionSurfaceEnter()\">\n      <app-menu-group [label]=\"row.label\" [hideLabel]=\"compressText\"\n        [collapsible]=\"groupCollapsible && !compressText && !row.alwaysExpanded\"\n        [expanded]=\"isGroupExpanded(row.groupId)\" (toggleExpand)=\"toggleGroup(row.groupId)\" />\n    </div>\n    }\n    @case ('submenu') {\n    <div class=\"menu-list__submenu-wrap\" cdkOverlayOrigin #subOrigin=\"cdkOverlayOrigin\"\n      (mouseenter)=\"onSubmenuTriggerEnter(row, idx)\" (mouseleave)=\"onSubmenuTriggerLeave(row, idx)\">\n      <div class=\"menu-list__option menu-list__option--submenu\" role=\"menuitem\" [attr.aria-haspopup]=\"'true'\"\n        [attr.aria-expanded]=\"isSubmenuOpen(row, idx)\" [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\" [attr.title]=\"compressText ? row.item.label : null\"\n        [attr.aria-label]=\"compressText ? row.item.label : null\" [class.menu-list__option--disabled]=\"row.item.disabled\"\n        [class.menu-list__option--active]=\"isActiveRow(row)\" [class.menu-list__option--selected]=\"isRowSelected(row)\"\n        (click)=\"onSubmenuRowClick($event, row, idx)\" (mouseenter)=\"onRowMouseEnter(row)\">\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 cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"subOrigin\"\n        [cdkConnectedOverlayOpen]=\"isSubmenuOpen(row, idx)\" [cdkConnectedOverlayPositions]=\"submenuPositions\"\n        [cdkConnectedOverlayPush]=\"true\" [cdkConnectedOverlayPanelClass]=\"overlayPanelClasses()\"\n        [cdkConnectedOverlayMinWidth]=\"200\" (overlayOutsideClick)=\"onSubmenuOutsideClick(row, idx)\">\n        <div class=\"menu-submenu__panel\" [ngClass]=\"panelThemeNgClass()\" (mouseenter)=\"onSubmenuPanelEnter()\"\n          (mouseleave)=\"onSubmenuPanelLeave(row, idx)\" (click)=\"$event.stopPropagation()\">\n          <app-menu-list-body [items]=\"row.item.items\" [menuId]=\"submenuMenuId(row)\" [nested]=\"true\" [dense]=\"dense\"\n            [compressText]=\"compressText\" [groupCollapsible]=\"groupCollapsible\"\n            [groupDefaultExpansion]=\"groupDefaultExpansion\" [expandAllGroupsInitially]=\"expandAllGroupsInitially\"\n            [clickToOpen]=\"clickToOpen\" [selectedItemId]=\"selectedItemId\" [appTheme]=\"appTheme()\"\n            (itemSelect)=\"onNestedItemSelect($event)\" (closeRequest)=\"closeRequest.emit()\"\n            (submenuBack)=\"closeOpenSubmenu()\" />\n        </div>\n      </ng-template>\n    </div>\n    }\n    @case ('action') {\n    <div class=\"menu-list__option\" role=\"menuitem\" [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\" [attr.aria-busy]=\"row.item.loading ? true : null\"\n      [attr.title]=\"compressText ? row.item.label : null\" [attr.aria-label]=\"compressText ? row.item.label : null\"\n      [class.menu-list__option--disabled]=\"row.item.disabled\" [class.menu-list__option--loading]=\"row.item.loading\"\n      [class.menu-list__option--danger]=\"row.item.danger\" [class.menu-list__option--active]=\"isActiveRow(row)\"\n      [class.menu-list__option--selected]=\"isRowSelected(row)\" (click)=\"onItemClick($event, row.item)\"\n      (mouseenter)=\"onRowMouseEnter(row)\">\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</div>", 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:.35rem;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--dense .menu-list__items{gap:0}.menu-list__items{display:flex;flex-direction:column;gap:.12rem;min-width:0}.menu-list__search{margin:0 .35rem .12rem;min-width:0;user-select:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text}.menu-list__search-field{display:block;width:100%}.menu-list__search-empty{margin:-.05rem .75rem 0;padding:0 0 .15rem;font-size:.75rem;line-height:1.35;font-weight:400;color:var(--app-color-text-muted, #6b8299);opacity:.88}.menu-list__group-row{display:block;width:100%}.menu-list__group-row--pinned .menu-list__group-label{color:var(--app-color-nav-group-heading, #9ca3af)}.menu-list__submenu-wrap{position:relative;display:block}.menu-list__option{display:flex;align-items:center;box-sizing:border-box;gap:.6875rem;margin:0 .25rem;padding:.5625rem .65rem;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;transition:background-color .18s ease,color .18s ease,box-shadow .18s ease,border-color .18s ease}.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:#0f172a0b}.menu-list__option.menu-list__option--active:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:#0f172a0e;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) 10%,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:color-mix(in srgb,var(--app-color-primary, #2b7fd9) 88%,var(--app-color-nav-option-label, #374151));font-weight:500}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__icon{color:var(--app-color-primary, #2b7fd9)}.menu-list__option:not(.menu-list__option--danger):not(.menu-list__option--disabled):not(.menu-list__option--selected) .menu-list__label{color:var(--app-color-nav-option-label, #374151)}.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:color-mix(in srgb,var(--app-color-primary, #2b7fd9) 78%,var(--app-color-text-muted, #6b8299));line-height:1;transition:color .18s ease,opacity .18s ease}.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:400;line-height:1.25rem;display:inline-flex;align-items:center;min-height:1.25rem;box-sizing:border-box;padding-top:.5rem!important}.menu-list--nested .menu-list__label{font-weight:400;padding-top:.5rem!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(() => MenuListBodyComponent), selector: "app-menu-list-body", inputs: ["appTheme", "items", "menuId", "dense", "nested", "selectedItemId", "compressText", "clickToOpen", "groupCollapsible", "groupDefaultExpansion", "expandAllGroupsInitially"], 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: MenuListBodyComponent, decorators: [{
@@ -1869,7 +1870,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         MenuDividerComponent,
                         MenuGroupComponent,
                     ], template: "<div class=\"menu-list\" [class.menu-list--nested]=\"nested\" [class.menu-list--dense]=\"dense\"\n  [class.menu-list--compress-text]=\"compressText\" cdkScrollable tabindex=\"-1\" (mouseleave)=\"onMenuSurfaceLeave()\">\n  <ng-content />\n  <div class=\"menu-list__items\" role=\"menu\" [attr.aria-labelledby]=\"null\" tabindex=\"-1\">\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 class=\"menu-list__group-row\" [class.menu-list__group-row--pinned]=\"row.alwaysExpanded\"\n      (mouseenter)=\"onNonOptionSurfaceEnter()\">\n      <app-menu-group [label]=\"row.label\" [hideLabel]=\"compressText\"\n        [collapsible]=\"groupCollapsible && !compressText && !row.alwaysExpanded\"\n        [expanded]=\"isGroupExpanded(row.groupId)\" (toggleExpand)=\"toggleGroup(row.groupId)\" />\n    </div>\n    }\n    @case ('submenu') {\n    <div class=\"menu-list__submenu-wrap\" cdkOverlayOrigin #subOrigin=\"cdkOverlayOrigin\"\n      (mouseenter)=\"onSubmenuTriggerEnter(row, idx)\" (mouseleave)=\"onSubmenuTriggerLeave(row, idx)\">\n      <div class=\"menu-list__option menu-list__option--submenu\" role=\"menuitem\" [attr.aria-haspopup]=\"'true'\"\n        [attr.aria-expanded]=\"isSubmenuOpen(row, idx)\" [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\" [attr.title]=\"compressText ? row.item.label : null\"\n        [attr.aria-label]=\"compressText ? row.item.label : null\" [class.menu-list__option--disabled]=\"row.item.disabled\"\n        [class.menu-list__option--active]=\"isActiveRow(row)\" [class.menu-list__option--selected]=\"isRowSelected(row)\"\n        (click)=\"onSubmenuRowClick($event, row, idx)\" (mouseenter)=\"onRowMouseEnter(row)\">\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 cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"subOrigin\"\n        [cdkConnectedOverlayOpen]=\"isSubmenuOpen(row, idx)\" [cdkConnectedOverlayPositions]=\"submenuPositions\"\n        [cdkConnectedOverlayPush]=\"true\" [cdkConnectedOverlayPanelClass]=\"overlayPanelClasses()\"\n        [cdkConnectedOverlayMinWidth]=\"200\" (overlayOutsideClick)=\"onSubmenuOutsideClick(row, idx)\">\n        <div class=\"menu-submenu__panel\" [ngClass]=\"panelThemeNgClass()\" (mouseenter)=\"onSubmenuPanelEnter()\"\n          (mouseleave)=\"onSubmenuPanelLeave(row, idx)\" (click)=\"$event.stopPropagation()\">\n          <app-menu-list-body [items]=\"row.item.items\" [menuId]=\"submenuMenuId(row)\" [nested]=\"true\" [dense]=\"dense\"\n            [compressText]=\"compressText\" [groupCollapsible]=\"groupCollapsible\"\n            [groupDefaultExpansion]=\"groupDefaultExpansion\" [expandAllGroupsInitially]=\"expandAllGroupsInitially\"\n            [clickToOpen]=\"clickToOpen\" [selectedItemId]=\"selectedItemId\" [appTheme]=\"appTheme()\"\n            (itemSelect)=\"onNestedItemSelect($event)\" (closeRequest)=\"closeRequest.emit()\"\n            (submenuBack)=\"closeOpenSubmenu()\" />\n        </div>\n      </ng-template>\n    </div>\n    }\n    @case ('action') {\n    <div class=\"menu-list__option\" role=\"menuitem\" [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\" [attr.aria-busy]=\"row.item.loading ? true : null\"\n      [attr.title]=\"compressText ? row.item.label : null\" [attr.aria-label]=\"compressText ? row.item.label : null\"\n      [class.menu-list__option--disabled]=\"row.item.disabled\" [class.menu-list__option--loading]=\"row.item.loading\"\n      [class.menu-list__option--danger]=\"row.item.danger\" [class.menu-list__option--active]=\"isActiveRow(row)\"\n      [class.menu-list__option--selected]=\"isRowSelected(row)\" (click)=\"onItemClick($event, row.item)\"\n      (mouseenter)=\"onRowMouseEnter(row)\">\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</div>", 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:.35rem;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--dense .menu-list__items{gap:0}.menu-list__items{display:flex;flex-direction:column;gap:.12rem;min-width:0}.menu-list__search{margin:0 .35rem .12rem;min-width:0;user-select:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text}.menu-list__search-field{display:block;width:100%}.menu-list__search-empty{margin:-.05rem .75rem 0;padding:0 0 .15rem;font-size:.75rem;line-height:1.35;font-weight:400;color:var(--app-color-text-muted, #6b8299);opacity:.88}.menu-list__group-row{display:block;width:100%}.menu-list__group-row--pinned .menu-list__group-label{color:var(--app-color-nav-group-heading, #9ca3af)}.menu-list__submenu-wrap{position:relative;display:block}.menu-list__option{display:flex;align-items:center;box-sizing:border-box;gap:.6875rem;margin:0 .25rem;padding:.5625rem .65rem;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;transition:background-color .18s ease,color .18s ease,box-shadow .18s ease,border-color .18s ease}.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:#0f172a0b}.menu-list__option.menu-list__option--active:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:#0f172a0e;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) 10%,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:color-mix(in srgb,var(--app-color-primary, #2b7fd9) 88%,var(--app-color-nav-option-label, #374151));font-weight:500}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__icon{color:var(--app-color-primary, #2b7fd9)}.menu-list__option:not(.menu-list__option--danger):not(.menu-list__option--disabled):not(.menu-list__option--selected) .menu-list__label{color:var(--app-color-nav-option-label, #374151)}.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:color-mix(in srgb,var(--app-color-primary, #2b7fd9) 78%,var(--app-color-text-muted, #6b8299));line-height:1;transition:color .18s ease,opacity .18s ease}.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:400;line-height:1.25rem;display:inline-flex;align-items:center;min-height:1.25rem;box-sizing:border-box;padding-top:.5rem!important}.menu-list--nested .menu-list__label{font-weight:400;padding-top:.5rem!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: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], items: [{
                 type: Input,
                 args: [{ required: true }]
             }], menuId: [{
@@ -10030,13 +10031,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 const PANEL_MIN_W = 200;
 const VIEWPORT_PAD = 8;
 class ContextMenuComponent {
-    constructor() {
-        this.overlay = inject(Overlay);
-        this.vcr = inject(ViewContainerRef);
-        this.cdr = inject(ChangeDetectorRef);
+    constructor(overlay, vcr, cdr) {
         /** Igual a `[appTheme]` na lib; omitir = tema global. */
         this.appTheme = input(...(ngDevMode ? [undefined, { debugName: "appTheme" }] : /* istanbul ignore next */ []));
-        this.effectiveThemeId = injectEffectiveThemeId(this.appTheme);
         this.items = [];
         this.disabled = false;
         this.menuId = '';
@@ -10048,6 +10045,10 @@ class ContextMenuComponent {
             const [base, token] = getThemeClassList(this.effectiveThemeId());
             return { [base]: true, [token]: true };
         }, ...(ngDevMode ? [{ debugName: "panelThemeNgClass" }] : /* istanbul ignore next */ []));
+        this.overlay = overlay;
+        this.vcr = vcr;
+        this.cdr = cdr;
+        this.effectiveThemeId = injectEffectiveThemeId(this.appTheme);
     }
     get resolvedMenuId() {
         return this.menuId.trim() || this.generatedId;
@@ -10104,13 +10105,13 @@ class ContextMenuComponent {
     onCloseRequest() {
         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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContextMenuComponent, deps: [{ token: i1$2.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], 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      [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", "searchable", "searchPlaceholder"], 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      [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: [{
+        }], ctorParameters: () => [{ type: i1$2.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], items: [{
                 type: Input,
                 args: [{ required: true }]
             }], disabled: [{