structra-ui 0.2.16 → 0.2.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/structra-ui.mjs +83 -37
- package/fesm2022/structra-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/structra-ui.d.ts +38 -16
package/fesm2022/structra-ui.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import '../structra-ui.css';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { signal, booleanAttribute, Input, HostBinding, ChangeDetectionStrategy, Component, ElementRef, ViewChild, inject, ChangeDetectorRef, Injector, DestroyRef, EventEmitter, Output, Directive, numberAttribute, computed, Injectable, Renderer2, HostListener, ViewChildren, forwardRef, ApplicationRef, afterNextRender, ContentChildren, NgZone, ViewContainerRef, TemplateRef, ContentChild } from '@angular/core';
|
|
3
|
+
import { signal, booleanAttribute, Input, HostBinding, ChangeDetectionStrategy, Component, ElementRef, ViewChild, inject, ChangeDetectorRef, Injector, DestroyRef, EventEmitter, Output, Directive, numberAttribute, computed, Injectable, Renderer2, input, HostListener, ViewChildren, forwardRef, ApplicationRef, afterNextRender, ContentChildren, NgZone, ViewContainerRef, TemplateRef, ContentChild, effect } from '@angular/core';
|
|
4
4
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
6
6
|
import { Validators, FormGroupDirective, NgForm, NgControl, NG_VALUE_ACCESSOR, FormsModule, FormGroup, FormArray, FormControl } from '@angular/forms';
|
|
@@ -803,6 +803,7 @@ class ThemeDirective {
|
|
|
803
803
|
this.theme = 'black';
|
|
804
804
|
this.elementRef = inject((ElementRef));
|
|
805
805
|
this.renderer = inject(Renderer2);
|
|
806
|
+
this.themeService = inject(AppThemeService);
|
|
806
807
|
this.themeTokenClasses = STRUCTRA_THEME_IDS.map((themeId) => `theme-${themeId}`);
|
|
807
808
|
}
|
|
808
809
|
ngOnChanges() {
|
|
@@ -812,6 +813,8 @@ class ThemeDirective {
|
|
|
812
813
|
this.renderer.removeClass(element, themeClass);
|
|
813
814
|
}
|
|
814
815
|
this.renderer.addClass(element, getThemeTokenClass(this.theme));
|
|
816
|
+
/** Overlays / hosts que leem {@link AppThemeService} alinham com o mesmo tema do wrapper. */
|
|
817
|
+
this.themeService.setTheme(normalizeStructraTheme(this.theme));
|
|
815
818
|
}
|
|
816
819
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
817
820
|
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 }); }
|
|
@@ -827,6 +830,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
827
830
|
args: ['appTheme']
|
|
828
831
|
}] } });
|
|
829
832
|
|
|
833
|
+
/**
|
|
834
|
+
* Tema efectivo para hosts/overlays: valor de `[appTheme]` quando definido; caso contrário
|
|
835
|
+
* {@link AppThemeService.activeThemeId} (mesmo comportamento que antes sem input).
|
|
836
|
+
*/
|
|
837
|
+
function injectEffectiveThemeId(appTheme) {
|
|
838
|
+
const svc = inject(AppThemeService);
|
|
839
|
+
return computed(() => {
|
|
840
|
+
const v = appTheme();
|
|
841
|
+
if (v !== undefined && v !== null && String(v).trim() !== '') {
|
|
842
|
+
return normalizeStructraTheme(v);
|
|
843
|
+
}
|
|
844
|
+
return svc.activeThemeId();
|
|
845
|
+
});
|
|
846
|
+
}
|
|
847
|
+
|
|
848
|
+
/**
|
|
849
|
+
* Remove classes de tema do host e, se `explicitTheme` estiver definido, aplica `.app-library-theme`
|
|
850
|
+
* + `theme-*`. Caso contrário deixa o host sem paleta própria (herda do ancestral / wrapper).
|
|
851
|
+
*/
|
|
852
|
+
function applyOptionalThemeHostClasses(renderer, element, explicitTheme) {
|
|
853
|
+
renderer.removeClass(element, APP_THEME_BASE_CLASS);
|
|
854
|
+
for (const themeId of STRUCTRA_THEME_IDS) {
|
|
855
|
+
renderer.removeClass(element, `theme-${themeId}`);
|
|
856
|
+
}
|
|
857
|
+
if (explicitTheme !== undefined &&
|
|
858
|
+
explicitTheme !== null &&
|
|
859
|
+
String(explicitTheme).trim() !== '') {
|
|
860
|
+
const id = normalizeStructraTheme(explicitTheme);
|
|
861
|
+
renderer.addClass(element, APP_THEME_BASE_CLASS);
|
|
862
|
+
renderer.addClass(element, getThemeTokenClass(id));
|
|
863
|
+
}
|
|
864
|
+
}
|
|
865
|
+
|
|
830
866
|
/** Posição por omissão do CDK (equivalente ao comportamento anterior sem `positions` explícitas). */
|
|
831
867
|
const DEFAULT_CONNECTED_POSITIONS = [
|
|
832
868
|
{
|
|
@@ -1088,8 +1124,10 @@ const SUBMENU_CLOSE_MS = 1200;
|
|
|
1088
1124
|
class MenuListComponent {
|
|
1089
1125
|
constructor() {
|
|
1090
1126
|
this.cdr = inject(ChangeDetectorRef);
|
|
1091
|
-
this.appTheme = inject(AppThemeService);
|
|
1092
1127
|
this.hostRef = inject((ElementRef));
|
|
1128
|
+
/** Igual a `[appTheme]` na lib; omitir = tema global (ex.: propagado por `app-sidebar`). */
|
|
1129
|
+
this.appTheme = input(...(ngDevMode ? [undefined, { debugName: "appTheme" }] : /* istanbul ignore next */ []));
|
|
1130
|
+
this.effectiveThemeId = injectEffectiveThemeId(this.appTheme);
|
|
1093
1131
|
this.items = [];
|
|
1094
1132
|
/** Prefixo dos `id` das opções focáveis (`${menuId}-opt-${focusIndex}`). */
|
|
1095
1133
|
this.menuId = 'app-menu';
|
|
@@ -1117,10 +1155,13 @@ class MenuListComponent {
|
|
|
1117
1155
|
this.submenuOpenTimer = null;
|
|
1118
1156
|
this.submenuCloseTimer = null;
|
|
1119
1157
|
this.submenuPositions = submenuConnectedPositions();
|
|
1120
|
-
this.panelThemeNgClass = computed(() =>
|
|
1158
|
+
this.panelThemeNgClass = computed(() => {
|
|
1159
|
+
const [base, token] = getThemeClassList(this.effectiveThemeId());
|
|
1160
|
+
return { [base]: true, [token]: true };
|
|
1161
|
+
}, ...(ngDevMode ? [{ debugName: "panelThemeNgClass" }] : /* istanbul ignore next */ []));
|
|
1121
1162
|
}
|
|
1122
1163
|
overlayPanelClasses() {
|
|
1123
|
-
return [...this.
|
|
1164
|
+
return [...getThemeClassList(this.effectiveThemeId()), 'menu-submenu__cdk-panel'];
|
|
1124
1165
|
}
|
|
1125
1166
|
onNestedItemSelect(id) {
|
|
1126
1167
|
this.closeOpenSubmenu();
|
|
@@ -1433,7 +1474,7 @@ class MenuListComponent {
|
|
|
1433
1474
|
}
|
|
1434
1475
|
}
|
|
1435
1476
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1436
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MenuListComponent, isStandalone: true, selector: "app-menu-list", inputs: { items: "items", menuId: "menuId", dense: ["dense", "dense", booleanAttribute], nested: ["nested", "nested", booleanAttribute], selectedItemId: "selectedItemId", compressText: ["compressText", "compressText", booleanAttribute] }, outputs: { itemSelect: "itemSelect", closeRequest: "closeRequest", submenuBack: "submenuBack" }, host: { listeners: { "keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "nestedLists", predicate: MenuListComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"menu-list\"\n [class.menu-list--dense]=\"dense\"\n [class.menu-list--compress-text]=\"compressText\"\n role=\"menu\"\n [attr.aria-labelledby]=\"null\"\n tabindex=\"-1\"\n (mouseleave)=\"onMenuSurfaceLeave()\"\n>\n @for (row of rows; track idx; let idx = $index) {\n @switch (row.kind) {\n @case ('divider') {\n <app-menu-divider />\n }\n @case ('group') {\n <app-menu-group [label]=\"row.label\" [hideLabel]=\"compressText\" />\n }\n @case ('submenu') {\n <div\n class=\"menu-list__submenu-wrap\"\n cdkOverlayOrigin\n #subOrigin=\"cdkOverlayOrigin\"\n (mouseenter)=\"onSubmenuTriggerEnter(row, idx)\"\n (mouseleave)=\"onSubmenuTriggerLeave(row, idx)\"\n >\n <div\n class=\"menu-list__option menu-list__option--submenu\"\n role=\"menuitem\"\n [attr.aria-haspopup]=\"'true'\"\n [attr.aria-expanded]=\"isSubmenuOpen(row, idx)\"\n [id]=\"row.focusIndex !== null ? optionId(row.focusIndex) : null\"\n [attr.tabindex]=\"row.focusIndex !== null && !row.item.disabled ? (isActiveRow(row) ? 0 : -1) : -1\"\n [attr.aria-disabled]=\"row.item.disabled ? true : null\"\n [attr.title]=\"compressText ? row.item.label : null\"\n [attr.aria-label]=\"compressText ? row.item.label : null\"\n [class.menu-list__option--disabled]=\"row.item.disabled\"\n [class.menu-list__option--active]=\"isActiveRow(row)\"\n [class.menu-list__option--selected]=\"isRowSelected(row)\"\n (click)=\"onSubmenuRowClick($event, row, idx)\"\n (mouseenter)=\"onRowMouseEnter(row)\"\n >\n @if (row.item.icon?.trim()) {\n <span class=\"menu-list__icon\" aria-hidden=\"true\">\n <i [ngClass]=\"row.item.icon\"></i>\n </span>\n }\n <span class=\"menu-list__text\">\n <span class=\"menu-list__label\">{{ row.item.label }}</span>\n @if (row.item.description?.trim()) {\n <span class=\"menu-list__description\">{{ row.item.description }}</span>\n }\n </span>\n <span class=\"menu-list__submenu-chevron\" aria-hidden=\"true\">\u203A</span>\n </div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"subOrigin\"\n [cdkConnectedOverlayOpen]=\"isSubmenuOpen(row, idx)\"\n [cdkConnectedOverlayPositions]=\"submenuPositions\"\n [cdkConnectedOverlayPush]=\"true\"\n [cdkConnectedOverlayPanelClass]=\"overlayPanelClasses()\"\n [cdkConnectedOverlayMinWidth]=\"200\"\n (overlayOutsideClick)=\"onSubmenuOutsideClick(row, idx)\"\n >\n <div\n class=\"menu-submenu__panel\"\n [ngClass]=\"panelThemeNgClass()\"\n (mouseenter)=\"onSubmenuPanelEnter()\"\n (mouseleave)=\"onSubmenuPanelLeave(row, idx)\"\n (click)=\"$event.stopPropagation()\"\n >\n <app-menu-list\n [items]=\"row.item.items\"\n [menuId]=\"submenuMenuId(row)\"\n [nested]=\"true\"\n [dense]=\"dense\"\n [compressText]=\"compressText\"\n [selectedItemId]=\"selectedItemId\"\n (itemSelect)=\"onNestedItemSelect($event)\"\n (closeRequest)=\"closeRequest.emit()\"\n (submenuBack)=\"closeOpenSubmenu()\"\n />\n </div>\n </ng-template>\n </div>\n }\n @case ('action') {\n <div\n class=\"menu-list__option\"\n role=\"menuitem\"\n [id]=\"row.focusIndex !== null ? optionId(row.focusIndex) : null\"\n [attr.tabindex]=\"row.focusIndex !== null && !row.item.disabled ? (isActiveRow(row) ? 0 : -1) : -1\"\n [attr.aria-disabled]=\"row.item.disabled ? true : null\"\n [attr.aria-busy]=\"row.item.loading ? true : null\"\n [attr.title]=\"compressText ? row.item.label : null\"\n [attr.aria-label]=\"compressText ? row.item.label : null\"\n [class.menu-list__option--disabled]=\"row.item.disabled\"\n [class.menu-list__option--loading]=\"row.item.loading\"\n [class.menu-list__option--danger]=\"row.item.danger\"\n [class.menu-list__option--active]=\"isActiveRow(row)\"\n [class.menu-list__option--selected]=\"isRowSelected(row)\"\n (click)=\"onItemClick($event, row.item)\"\n (mouseenter)=\"onRowMouseEnter(row)\"\n >\n @if (row.item.loading) {\n <span class=\"menu-list__icon menu-list__icon--spin\" aria-hidden=\"true\">\n <i class=\"fa-solid fa-spinner\"></i>\n </span>\n } @else if (row.item.icon?.trim()) {\n <span class=\"menu-list__icon\" aria-hidden=\"true\">\n <i [ngClass]=\"row.item.icon\"></i>\n </span>\n }\n <span class=\"menu-list__text\">\n <span class=\"menu-list__label\">{{ row.item.label }}</span>\n @if (row.item.description?.trim()) {\n <span class=\"menu-list__description\">{{ row.item.description }}</span>\n }\n </span>\n </div>\n }\n }\n }\n</div>\n", styles: ["@charset \"UTF-8\";@keyframes app-sidebar-nav-reveal-in{0%{opacity:0;transform:translate3d(-.45rem,0,0)}to{opacity:1;transform:translateZ(0)}}:host{display:block;min-width:0;box-sizing:border-box}.menu-list{background:var(--app-color-surface, #ffffff);border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .12));border-radius:10px;box-shadow:0 10px 28px -14px #0f172a29;max-height:min(70vh,22rem);overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;gap:.1rem;padding:.45rem 0;outline:none}.menu-list--dense{padding:.2rem 0;gap:0}.menu-list__submenu-wrap{position:relative;display:block}.menu-list__option{display:flex;align-items:center;box-sizing:border-box;gap:.5rem;margin:0 .25rem;padding:.48rem .6rem;border-radius:8px;cursor:pointer;color:var(--app-color-text-primary, #1a2f45);background:transparent;border:1px solid transparent;text-align:left;font:inherit;line-height:1.25}.menu-list__option:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:1px}.menu-list__option:hover:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:color-mix(in srgb,var(--app-color-primary) 6%,transparent)}.menu-list__option.menu-list__option--active:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:color-mix(in srgb,var(--app-color-primary) 7%,transparent);border-color:transparent}.menu-list__option.menu-list__option--active:not(.menu-list__option--disabled):not(.menu-list__option--loading):not(.menu-list__option--selected){box-shadow:none}.menu-list__option.menu-list__option--disabled{cursor:not-allowed;color:var(--app-color-text-muted, #6b8299);background:transparent;opacity:.72}.menu-list__option.menu-list__option--loading{cursor:wait;opacity:.92;pointer-events:none}.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading){color:var(--app-color-error, #b91c1c)}.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading):hover,.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading).menu-list__option--active{background:var(--app-color-error-bg-subtle, rgba(185, 28, 28, .12));border-color:transparent;box-shadow:inset 2px 0 0 0 var(--app-color-error-border, #dc2626)}.menu-list__option--submenu{padding-right:.35rem}.menu-list__option--selected:not(.menu-list__option--disabled){background:color-mix(in srgb,var(--app-color-primary) 9%,transparent);border-radius:8px;border-color:transparent;box-shadow:inset 2px 0 0 0 var(--app-color-primary, #2b7fd9)}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__label{color:var(--app-color-primary, #2b7fd9);font-weight:600}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__icon{color:var(--app-color-primary, #2b7fd9)}.menu-list--compress-text .menu-list__label,.menu-list--compress-text .menu-list__description{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.menu-list--compress-text .menu-list__text,.menu-list--compress-text .menu-list__submenu-chevron{display:none}.menu-list--compress-text .menu-list__submenu-wrap{width:100%}.menu-list--compress-text .menu-list__option{justify-content:center;align-items:center;text-align:center;width:calc(100% - .5rem);max-width:100%;box-sizing:border-box;margin-left:.25rem;margin-right:.25rem;padding:.5rem .35rem}.menu-list--compress-text .menu-list__option--submenu{padding-left:.35rem;padding-right:.35rem}.menu-list--compress-text .menu-list__icon{flex:0 0 auto;width:auto;min-width:1.75rem;display:inline-flex;align-items:center;justify-content:center;padding-top:0}.menu-list__submenu-chevron{flex:0 0 auto;margin-left:auto;padding-left:.35rem;font-size:1rem;line-height:1;color:var(--app-color-text-muted, #6b8299);opacity:.85}.menu-list__icon{flex:0 0 auto;width:1.25rem;height:1.25rem;min-height:1.25rem;display:inline-flex;align-items:center;justify-content:center;text-align:center;color:var(--app-color-text-secondary, #5a7fa3);line-height:1}.menu-list__icon i{display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:1;font-size:.95rem}.menu-list__option--disabled .menu-list__icon{opacity:.55}.menu-list__icon--spin i{animation:menu-list-spin .8s linear infinite}.menu-list__text{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}.menu-list__label{font-size:.875rem;font-weight:500;line-height:1.25rem;display:inline-flex;align-items:center;min-height:1.25rem}.menu-list__description{font-size:.75rem;color:var(--app-color-text-muted, #6b8299);line-height:1.3}.menu-list:not(.menu-list--compress-text){animation:app-sidebar-nav-reveal-in .45s cubic-bezier(.16,1,.32,1) both}@media(prefers-reduced-motion:reduce){.menu-list:not(.menu-list--compress-text){animation:none}}.menu-submenu__panel{box-sizing:border-box;min-width:0;padding:0;background:transparent;border:none;box-shadow:none;border-radius:10px;overflow:hidden}@keyframes menu-list-spin{to{transform:rotate(360deg)}}:host ::ng-deep .menu-submenu__cdk-panel{background:transparent;box-shadow:none;border-radius:10px}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => MenuListComponent), selector: "app-menu-list", inputs: ["items", "menuId", "dense", "nested", "selectedItemId", "compressText"], outputs: ["itemSelect", "closeRequest", "submenuBack"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => CdkConnectedOverlay), selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i0.forwardRef(() => CdkOverlayOrigin), selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i0.forwardRef(() => MenuDividerComponent), selector: "app-menu-divider" }, { kind: "component", type: i0.forwardRef(() => MenuGroupComponent), selector: "app-menu-group", inputs: ["label", "hideLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1477
|
+
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 }); }
|
|
1437
1478
|
}
|
|
1438
1479
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuListComponent, decorators: [{
|
|
1439
1480
|
type: Component,
|
|
@@ -1445,7 +1486,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1445
1486
|
MenuDividerComponent,
|
|
1446
1487
|
MenuGroupComponent,
|
|
1447
1488
|
], 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"] }]
|
|
1448
|
-
}], propDecorators: { items: [{
|
|
1489
|
+
}], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], items: [{
|
|
1449
1490
|
type: Input,
|
|
1450
1491
|
args: [{ required: true }]
|
|
1451
1492
|
}], menuId: [{
|
|
@@ -1579,7 +1620,7 @@ class DropdownMenuComponent {
|
|
|
1579
1620
|
this.setOpen(false);
|
|
1580
1621
|
}
|
|
1581
1622
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1582
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: DropdownMenuComponent, isStandalone: true, selector: "app-dropdown-menu", inputs: { items: "items", placement: "placement", minWidthPx: "minWidthPx", matchTriggerWidth: ["matchTriggerWidth", "matchTriggerWidth", booleanAttribute], menuId: "menuId" }, outputs: { itemSelect: "itemSelect", openChange: "openChange" }, viewQueries: [{ propertyName: "panelTpl", first: true, predicate: ["panelTpl"], descendants: true, static: true }, { propertyName: "menuList", first: true, predicate: MenuListComponent, descendants: true }], ngImport: i0, template: "<app-dropdown-base\r\n class=\"dropdown-menu\"\r\n [open]=\"open\"\r\n (openChange)=\"onBaseOpenChange($event)\"\r\n [panelTemplate]=\"panelTpl\"\r\n [panelWidthPx]=\"effectivePanelWidth\"\r\n [connectedPositions]=\"connectedPositions\"\r\n [pushConnectedOverlay]=\"true\"\r\n [hasBackdrop]=\"true\"\r\n [closeOnEscape]=\"true\"\r\n [bareOverlayPanel]=\"true\"\r\n>\r\n <span\r\n class=\"dropdown-menu__trigger-slot\"\r\n appDropdownTrigger\r\n (click)=\"onTriggerClick($event)\"\r\n [attr.aria-expanded]=\"open\"\r\n aria-haspopup=\"menu\"\r\n >\r\n <ng-content />\r\n </span>\r\n</app-dropdown-base>\r\n\r\n<ng-template #panelTpl>\r\n <div class=\"dropdown-menu__panel-inner\">\r\n <app-menu-list\r\n [items]=\"items\"\r\n [menuId]=\"resolvedMenuId\"\r\n (itemSelect)=\"onItemSelect($event)\"\r\n (closeRequest)=\"onCloseRequest()\"\r\n />\r\n </div>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;max-width:100%;vertical-align:middle}.dropdown-menu{display:inline-flex;max-width:100%;min-width:0}.dropdown-menu__trigger-slot{display:inline-flex;max-width:100%;min-width:0;cursor:pointer}.dropdown-menu__panel-inner{box-sizing:border-box;min-width:0}\n"], dependencies: [{ kind: "component", type: DropdownBaseComponent, selector: "app-dropdown-base", inputs: ["open", "panelTemplate", "panelWidthPx", "closeOnEscape", "hasBackdrop", "connectedPositions", "pushConnectedOverlay", "bareOverlayPanel"], outputs: ["openChange"] }, { kind: "component", type: MenuListComponent, selector: "app-menu-list", inputs: ["items", "menuId", "dense", "nested", "selectedItemId", "compressText"], outputs: ["itemSelect", "closeRequest", "submenuBack"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1623
|
+
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 }); }
|
|
1583
1624
|
}
|
|
1584
1625
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownMenuComponent, decorators: [{
|
|
1585
1626
|
type: Component,
|
|
@@ -9456,8 +9497,10 @@ class ContextMenuComponent {
|
|
|
9456
9497
|
constructor() {
|
|
9457
9498
|
this.overlay = inject(Overlay);
|
|
9458
9499
|
this.vcr = inject(ViewContainerRef);
|
|
9459
|
-
this.appTheme = inject(AppThemeService);
|
|
9460
9500
|
this.cdr = inject(ChangeDetectorRef);
|
|
9501
|
+
/** Igual a `[appTheme]` na lib; omitir = tema global. */
|
|
9502
|
+
this.appTheme = input(...(ngDevMode ? [undefined, { debugName: "appTheme" }] : /* istanbul ignore next */ []));
|
|
9503
|
+
this.effectiveThemeId = injectEffectiveThemeId(this.appTheme);
|
|
9461
9504
|
this.items = [];
|
|
9462
9505
|
this.disabled = false;
|
|
9463
9506
|
this.menuId = '';
|
|
@@ -9465,7 +9508,10 @@ class ContextMenuComponent {
|
|
|
9465
9508
|
this.overlayRef = null;
|
|
9466
9509
|
this.escSub = null;
|
|
9467
9510
|
this.generatedId = `app-ctx-${Math.random().toString(36).slice(2, 9)}`;
|
|
9468
|
-
this.panelThemeNgClass = computed(() =>
|
|
9511
|
+
this.panelThemeNgClass = computed(() => {
|
|
9512
|
+
const [base, token] = getThemeClassList(this.effectiveThemeId());
|
|
9513
|
+
return { [base]: true, [token]: true };
|
|
9514
|
+
}, ...(ngDevMode ? [{ debugName: "panelThemeNgClass" }] : /* istanbul ignore next */ []));
|
|
9469
9515
|
}
|
|
9470
9516
|
get resolvedMenuId() {
|
|
9471
9517
|
return this.menuId.trim() || this.generatedId;
|
|
@@ -9488,7 +9534,7 @@ class ContextMenuComponent {
|
|
|
9488
9534
|
this.overlayRef = this.overlay.create({
|
|
9489
9535
|
hasBackdrop: true,
|
|
9490
9536
|
backdropClass: 'cdk-overlay-transparent-backdrop',
|
|
9491
|
-
panelClass: [...this.
|
|
9537
|
+
panelClass: [...getThemeClassList(this.effectiveThemeId())],
|
|
9492
9538
|
scrollStrategy: this.overlay.scrollStrategies.close(),
|
|
9493
9539
|
positionStrategy: this.overlay
|
|
9494
9540
|
.position()
|
|
@@ -9523,12 +9569,12 @@ class ContextMenuComponent {
|
|
|
9523
9569
|
this.disposeOverlay();
|
|
9524
9570
|
}
|
|
9525
9571
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9526
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
9572
|
+
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 }); }
|
|
9527
9573
|
}
|
|
9528
9574
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContextMenuComponent, decorators: [{
|
|
9529
9575
|
type: Component,
|
|
9530
|
-
args: [{ selector: 'app-context-menu', imports: [MenuListComponent, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"context-menu__host\" (contextmenu)=\"onContextMenu($event)\">\r\n <ng-content />\r\n</span>\r\n\r\n<ng-template #menuTpl>\r\n <div class=\"context-menu__surface\" [ngClass]=\"panelThemeNgClass()\" (click)=\"$event.stopPropagation()\">\r\n <app-menu-list\r\n [items]=\"items\"\r\n [menuId]=\"resolvedMenuId\"\r\n (itemSelect)=\"onItemSelect($event)\"\r\n (closeRequest)=\"onCloseRequest()\"\r\n />\r\n </div>\r\n</ng-template>\r\n", styles: [":host{display:contents}.context-menu__host{display:contents}.context-menu__surface{box-sizing:border-box;min-width:12.5rem;max-width:min(100vw - 1rem,22rem)}\n"] }]
|
|
9531
|
-
}], propDecorators: { items: [{
|
|
9576
|
+
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"] }]
|
|
9577
|
+
}], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], items: [{
|
|
9532
9578
|
type: Input,
|
|
9533
9579
|
args: [{ required: true }]
|
|
9534
9580
|
}], disabled: [{
|
|
@@ -10265,13 +10311,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
10265
10311
|
* Estrutura principal: barra lateral, topo e conteúdo. Em mobile a lateral projecta-se no `app-drawer`.
|
|
10266
10312
|
*
|
|
10267
10313
|
* Use `exportAs: 'appShell'` e `toggleMobileNav` / `toggleSidebarCollapsed` a partir da topbar.
|
|
10314
|
+
*
|
|
10315
|
+
* Tema no host opcional; sem ele, herda de ancestral com {@link ThemeDirective}.
|
|
10268
10316
|
*/
|
|
10269
10317
|
class AppShellComponent {
|
|
10270
10318
|
constructor() {
|
|
10271
10319
|
this.bp = inject(BreakpointObserver);
|
|
10272
10320
|
this.cdr = inject(ChangeDetectorRef);
|
|
10273
10321
|
this.destroyRef = inject(DestroyRef);
|
|
10274
|
-
this.
|
|
10322
|
+
this.hostEl = inject((ElementRef));
|
|
10323
|
+
this.renderer = inject(Renderer2);
|
|
10324
|
+
this.appTheme = input(...(ngDevMode ? [undefined, { debugName: "appTheme" }] : /* istanbul ignore next */ []));
|
|
10275
10325
|
/** Barra lateral estreita (ícones + compressão de texto na lista). */
|
|
10276
10326
|
this.sidebarCollapsed = false;
|
|
10277
10327
|
this.sidebarCollapsedChange = new EventEmitter();
|
|
@@ -10283,9 +10333,9 @@ class AppShellComponent {
|
|
|
10283
10333
|
this.isMobileLayout = false;
|
|
10284
10334
|
this.DrawerSide = DrawerSide;
|
|
10285
10335
|
this.DrawerSize = DrawerSize;
|
|
10286
|
-
|
|
10287
|
-
|
|
10288
|
-
|
|
10336
|
+
effect(() => {
|
|
10337
|
+
applyOptionalThemeHostClasses(this.renderer, this.hostEl.nativeElement, this.appTheme());
|
|
10338
|
+
});
|
|
10289
10339
|
}
|
|
10290
10340
|
/** Conteúdo lateral (obrigatório): `<ng-template appShellSidebar>...</ng-template>`. */
|
|
10291
10341
|
get sidebarTemplate() {
|
|
@@ -10330,15 +10380,12 @@ class AppShellComponent {
|
|
|
10330
10380
|
}
|
|
10331
10381
|
}
|
|
10332
10382
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10333
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AppShellComponent, isStandalone: true, selector: "app-shell", inputs: { sidebarCollapsed:
|
|
10383
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AppShellComponent, isStandalone: true, selector: "app-shell", inputs: { appTheme: { classPropertyName: "appTheme", publicName: "appTheme", isSignal: true, isRequired: false, transformFunction: null }, sidebarCollapsed: { classPropertyName: "sidebarCollapsed", publicName: "sidebarCollapsed", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, mobileNavOpen: { classPropertyName: "mobileNavOpen", publicName: "mobileNavOpen", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, mobileLayoutQuery: { classPropertyName: "mobileLayoutQuery", publicName: "mobileLayoutQuery", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { sidebarCollapsedChange: "sidebarCollapsedChange", mobileNavOpenChange: "mobileNavOpenChange" }, queries: [{ propertyName: "sidebarSlot", first: true, predicate: AppShellSidebarTemplateDirective, descendants: true }], exportAs: ["appShell"], ngImport: i0, template: "<div\r\n class=\"app-shell\"\r\n [class.app-shell--mobile]=\"isMobileLayout\"\r\n [class.app-shell--sidebar-collapsed]=\"sidebarCollapsed\"\r\n>\r\n @if (!isMobileLayout && sidebarTemplate) {\r\n <aside class=\"app-shell__sidebar\" aria-label=\"Navega\u00E7\u00E3o principal\">\r\n <ng-container [ngTemplateOutlet]=\"sidebarTemplate\" />\r\n </aside>\r\n }\r\n\r\n @if (isMobileLayout && sidebarTemplate) {\r\n <app-drawer\r\n [open]=\"mobileNavOpen\"\r\n (openChange)=\"onMobileDrawerOpenChange($event)\"\r\n [side]=\"DrawerSide.Left\"\r\n [size]=\"DrawerSize.Sm\"\r\n title=\"Navega\u00E7\u00E3o\"\r\n [showCloseButton]=\"true\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"sidebarTemplate\" />\r\n </app-drawer>\r\n }\r\n\r\n <div class=\"app-shell__main\">\r\n <ng-content select=\"[appShellTopbar]\" />\r\n <main class=\"app-shell__content\">\r\n <ng-content />\r\n </main>\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@keyframes app-sidebar-nav-reveal-in{0%{opacity:0;transform:translate3d(-.45rem,0,0)}to{opacity:1;transform:translateZ(0)}}:host{display:flex;flex:1 1 auto;flex-direction:column;width:100%;min-width:0;min-height:0;box-sizing:border-box}.app-shell{display:flex;flex-direction:row;align-items:stretch;flex:1 1 auto;width:100%;min-height:0;min-width:0;box-sizing:border-box}.app-shell__sidebar{display:flex;flex-direction:column;flex:0 0 17.5rem;width:17.5rem;max-width:100%;min-width:0;min-height:0;align-self:stretch;overflow:hidden;transition:flex-basis .12s cubic-bezier(.22,1,.36,1),width .12s cubic-bezier(.22,1,.36,1),padding .12s cubic-bezier(.22,1,.36,1)}.app-shell--sidebar-collapsed:not(.app-shell--mobile) .app-shell__sidebar{flex-basis:5rem;width:5rem}.app-shell__main{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0;align-self:stretch;overflow:hidden}.app-shell__content{flex:1 1 auto;min-height:0;min-width:0;overflow:auto;padding:1rem 1.1rem;box-sizing:border-box;background:var(--app-color-shell-main-bg, var(--app-color-background, #fafbfc))}.app-shell--mobile .app-shell__sidebar{display:none}.app-shell--mobile .app-shell__main{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DrawerComponent, selector: "app-drawer", inputs: ["open", "side", "size", "title", "showCloseButton"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10334
10384
|
}
|
|
10335
10385
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppShellComponent, decorators: [{
|
|
10336
10386
|
type: Component,
|
|
10337
10387
|
args: [{ selector: 'app-shell', exportAs: 'appShell', imports: [NgTemplateOutlet, DrawerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"app-shell\"\r\n [class.app-shell--mobile]=\"isMobileLayout\"\r\n [class.app-shell--sidebar-collapsed]=\"sidebarCollapsed\"\r\n>\r\n @if (!isMobileLayout && sidebarTemplate) {\r\n <aside class=\"app-shell__sidebar\" aria-label=\"Navega\u00E7\u00E3o principal\">\r\n <ng-container [ngTemplateOutlet]=\"sidebarTemplate\" />\r\n </aside>\r\n }\r\n\r\n @if (isMobileLayout && sidebarTemplate) {\r\n <app-drawer\r\n [open]=\"mobileNavOpen\"\r\n (openChange)=\"onMobileDrawerOpenChange($event)\"\r\n [side]=\"DrawerSide.Left\"\r\n [size]=\"DrawerSize.Sm\"\r\n title=\"Navega\u00E7\u00E3o\"\r\n [showCloseButton]=\"true\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"sidebarTemplate\" />\r\n </app-drawer>\r\n }\r\n\r\n <div class=\"app-shell__main\">\r\n <ng-content select=\"[appShellTopbar]\" />\r\n <main class=\"app-shell__content\">\r\n <ng-content />\r\n </main>\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@keyframes app-sidebar-nav-reveal-in{0%{opacity:0;transform:translate3d(-.45rem,0,0)}to{opacity:1;transform:translateZ(0)}}:host{display:flex;flex:1 1 auto;flex-direction:column;width:100%;min-width:0;min-height:0;box-sizing:border-box}.app-shell{display:flex;flex-direction:row;align-items:stretch;flex:1 1 auto;width:100%;min-height:0;min-width:0;box-sizing:border-box}.app-shell__sidebar{display:flex;flex-direction:column;flex:0 0 17.5rem;width:17.5rem;max-width:100%;min-width:0;min-height:0;align-self:stretch;overflow:hidden;transition:flex-basis .12s cubic-bezier(.22,1,.36,1),width .12s cubic-bezier(.22,1,.36,1),padding .12s cubic-bezier(.22,1,.36,1)}.app-shell--sidebar-collapsed:not(.app-shell--mobile) .app-shell__sidebar{flex-basis:5rem;width:5rem}.app-shell__main{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0;align-self:stretch;overflow:hidden}.app-shell__content{flex:1 1 auto;min-height:0;min-width:0;overflow:auto;padding:1rem 1.1rem;box-sizing:border-box;background:var(--app-color-shell-main-bg, var(--app-color-background, #fafbfc))}.app-shell--mobile .app-shell__sidebar{display:none}.app-shell--mobile .app-shell__main{width:100%}\n"] }]
|
|
10338
|
-
}], propDecorators: {
|
|
10339
|
-
type: HostBinding,
|
|
10340
|
-
args: ['class']
|
|
10341
|
-
}], sidebarSlot: [{
|
|
10388
|
+
}], ctorParameters: () => [], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], sidebarSlot: [{
|
|
10342
10389
|
type: ContentChild,
|
|
10343
10390
|
args: [AppShellSidebarTemplateDirective]
|
|
10344
10391
|
}], sidebarCollapsed: [{
|
|
@@ -10359,19 +10406,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
10359
10406
|
* Navegação lateral com o mesmo modelo `MenuNodeItem` dos menus da lib (grupos, submenus, teclado).
|
|
10360
10407
|
* Com `collapsed`, `app-menu-list` usa `compressText`: rótulos de grupo (ex. «Principal») ficam ocultos;
|
|
10361
10408
|
* itens mostram só ícones com `title` / `aria-label` para acessibilidade.
|
|
10409
|
+
*
|
|
10410
|
+
* Tema: `[appTheme]` opcional no host; sem ele, herda paleta de um ancestral com {@link ThemeDirective}
|
|
10411
|
+
* (ex.: `<div appTheme="purple">`). Com input explícito, aplica as classes no host.
|
|
10362
10412
|
*/
|
|
10363
10413
|
class AppSidebarComponent {
|
|
10364
|
-
/**
|
|
10365
|
-
* Garante `.app-library-theme` + `theme-*` no host para tokens `--app-color-nav-*` e lista
|
|
10366
|
-
* herdarem a paleta activa (útil fora da demo ou sem antepassado tematizado).
|
|
10367
|
-
*/
|
|
10368
|
-
get hostThemeClasses() {
|
|
10369
|
-
return this.theme.getTheme();
|
|
10370
|
-
}
|
|
10371
10414
|
constructor() {
|
|
10372
|
-
this.theme = inject(AppThemeService);
|
|
10373
10415
|
this.cdr = inject(ChangeDetectorRef);
|
|
10374
10416
|
this.destroyRef = inject(DestroyRef);
|
|
10417
|
+
this.hostEl = inject((ElementRef));
|
|
10418
|
+
this.renderer = inject(Renderer2);
|
|
10419
|
+
/** Igual a `[appTheme]` / {@link ThemeDirective}: paleta explícita no host; omitir = herdar / serviço. */
|
|
10420
|
+
this.appTheme = input(...(ngDevMode ? [undefined, { debugName: "appTheme" }] : /* istanbul ignore next */ []));
|
|
10375
10421
|
this.menuId = 'app-shell-sidebar';
|
|
10376
10422
|
/** Sincronizar com o item de navegação activo (realce persistente). */
|
|
10377
10423
|
this.selectedItemId = null;
|
|
@@ -10385,6 +10431,9 @@ class AppSidebarComponent {
|
|
|
10385
10431
|
this.listCompressText = signal(true, ...(ngDevMode ? [{ debugName: "listCompressText" }] : /* istanbul ignore next */ []));
|
|
10386
10432
|
this.listRevealTimeoutId = null;
|
|
10387
10433
|
this.destroyRef.onDestroy(() => this.clearListRevealTimeout());
|
|
10434
|
+
effect(() => {
|
|
10435
|
+
applyOptionalThemeHostClasses(this.renderer, this.hostEl.nativeElement, this.appTheme());
|
|
10436
|
+
});
|
|
10388
10437
|
}
|
|
10389
10438
|
ngOnChanges(changes) {
|
|
10390
10439
|
if (changes['selectedItemId'] || changes['items']) {
|
|
@@ -10416,15 +10465,12 @@ class AppSidebarComponent {
|
|
|
10416
10465
|
}
|
|
10417
10466
|
}
|
|
10418
10467
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10419
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
10468
|
+
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__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></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:block;min-width:0;height:100%;box-sizing:border-box}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;height:100%;min-height:0;box-sizing:border-box;padding:.65rem .5rem;background:var(--app-color-nav-shell-bg);border-right:1px solid var(--app-color-nav-border-subtle)}.app-sidebar--collapsed{padding-left:.5rem;padding-right:.5rem}.app-sidebar__toolbar{flex:0 0 auto;display:flex;justify-content:flex-end;align-items:center;padding:0 .1rem .4rem;min-height:0}.app-sidebar__toolbar:empty{display:none}.app-sidebar--collapsed .app-sidebar__toolbar:not(:empty){justify-content:center;padding-left:0;padding-right:0}.app-sidebar__list{flex:1 1 auto;min-height:0;overflow:auto}\n"], dependencies: [{ kind: "component", type: MenuListComponent, selector: "app-menu-list", inputs: ["appTheme", "items", "menuId", "dense", "nested", "selectedItemId", "compressText"], outputs: ["itemSelect", "closeRequest", "submenuBack"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10420
10469
|
}
|
|
10421
10470
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppSidebarComponent, decorators: [{
|
|
10422
10471
|
type: Component,
|
|
10423
|
-
args: [{ selector: 'app-sidebar', imports: [MenuListComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"app-sidebar app-nav-surface\" [class.app-sidebar--collapsed]=\"collapsed\"\r\n [attr.aria-label]=\"'Navega\u00E7\u00E3o principal'\">\r\n <div class=\"app-sidebar__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n <app-menu-list\r\n class=\"app-sidebar__list\"\r\n [items]=\"items\"\r\n [menuId]=\"menuId\"\r\n [dense]=\"collapsed\"\r\n [compressText]=\"listCompressText()\"\r\n [selectedItemId]=\"selectedItemId\"\r\n (itemSelect)=\"itemSelect.emit($event)\"\r\n />\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0;height:100%;box-sizing:border-box}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;height:100%;min-height:0;box-sizing:border-box;padding:.65rem .5rem;background:var(--app-color-nav-shell-bg);border-right:1px solid var(--app-color-nav-border-subtle)}.app-sidebar--collapsed{padding-left:.5rem;padding-right:.5rem}.app-sidebar__toolbar{flex:0 0 auto;display:flex;justify-content:flex-end;align-items:center;padding:0 .1rem .4rem;min-height:0}.app-sidebar__toolbar:empty{display:none}.app-sidebar--collapsed .app-sidebar__toolbar:not(:empty){justify-content:center;padding-left:0;padding-right:0}.app-sidebar__list{flex:1 1 auto;min-height:0;overflow:auto}\n"] }]
|
|
10424
|
-
}], ctorParameters: () => [], propDecorators: {
|
|
10425
|
-
type: HostBinding,
|
|
10426
|
-
args: ['class']
|
|
10427
|
-
}], items: [{
|
|
10472
|
+
args: [{ selector: 'app-sidebar', imports: [MenuListComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"app-sidebar app-nav-surface\" [class.app-sidebar--collapsed]=\"collapsed\"\r\n [attr.aria-label]=\"'Navega\u00E7\u00E3o principal'\">\r\n <div class=\"app-sidebar__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n <app-menu-list\r\n class=\"app-sidebar__list\"\r\n [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:block;min-width:0;height:100%;box-sizing:border-box}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;height:100%;min-height:0;box-sizing:border-box;padding:.65rem .5rem;background:var(--app-color-nav-shell-bg);border-right:1px solid var(--app-color-nav-border-subtle)}.app-sidebar--collapsed{padding-left:.5rem;padding-right:.5rem}.app-sidebar__toolbar{flex:0 0 auto;display:flex;justify-content:flex-end;align-items:center;padding:0 .1rem .4rem;min-height:0}.app-sidebar__toolbar:empty{display:none}.app-sidebar--collapsed .app-sidebar__toolbar:not(:empty){justify-content:center;padding-left:0;padding-right:0}.app-sidebar__list{flex:1 1 auto;min-height:0;overflow:auto}\n"] }]
|
|
10473
|
+
}], ctorParameters: () => [], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], items: [{
|
|
10428
10474
|
type: Input,
|
|
10429
10475
|
args: [{ required: true }]
|
|
10430
10476
|
}], menuId: [{
|
|
@@ -10587,5 +10633,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
10587
10633
|
* Generated bundle index. Do not edit.
|
|
10588
10634
|
*/
|
|
10589
10635
|
|
|
10590
|
-
export { ADAPTIVE_DATA_VIEW_MOBILE_QUERY, APP_SIDEBAR_LABEL_REVEAL_LAG_MS, APP_SIDEBAR_LAYOUT_DURATION_MS, APP_SIDEBAR_NAV_REVEAL_TOTAL_MS, APP_THEME_BASE_CLASS, APP_THEME_IDS, ActionMenuComponent, AdaptiveDataViewComponent, AlertComponent, AnchoredOverlayComponent, AppBreadcrumbComponent, AppDialogComponent, AppLibLightBlockScrollStrategy, AppShellComponent, AppShellSidebarTemplateDirective, AppShellSidebarToggleComponent, AppSidebarComponent, AppSidebarToolbarDirective, AppTheme, AppThemeService, AppTopbarComponent, AppUserMenuComponent, BR_ESTADOS_NOME_SIGLA, BaseFieldComponent, BaseFieldDirective, BooleanFieldDirective, ButtonComponent, ButtonRadius, ButtonSize, ButtonType, ButtonVariant, CardListComponent, CepFieldComponent, CheckboxFieldComponent, ConfirmDialogComponent, ConfirmDialogService, ContextMenuComponent, CpfCnpjFieldComponent, DashboardSectionComponent, DataCardComponent, DataGridComponent, DataListComponent, DataToolbarComponent, DateFieldComponent, DecimalFieldComponent, DetailsFieldComponent, DetailsViewComponent, DialogFooterDirective, DividerComponent, DrawerComponent, DrawerSide, DrawerSize, DropdownBaseComponent, DropdownMenuComponent, DropdownMultiOptionFieldBase, DropdownOptionFieldBase, DropdownSearchFieldComponent, EmptyStateComponent, FILE_PREVIEW_UNAVAILABLE_MESSAGE, FileUploadFieldComponent, FormActionsAlign, FormActionsComponent, FormColComponent, FormGroupComponent, FormGroupVariant, FormLayoutGap, FormRowAlign, FormRowComponent, FormRowJustify, FormSectionAlign, FormSectionComponent, FormSectionRadius, FormSectionVariant, FormTabComponent, FormTabsComponent, ImagePreviewPanelComponent, InputMaskFieldComponent, IntegerFieldComponent, LAYOUT_STACK_SIDE_BY_SIDE, LAYOUT_STACK_STACKED, LayoutStackAlign, LayoutStackComponent, LayoutStackDirection, LayoutStackItemAlign, LibDialogSize, ListItemComponent, LoadingDialogComponent, LoadingDialogService, MaskedTextFieldBase, MenuDividerComponent, MenuDropdownPlacement, MenuGroupComponent, MenuListComponent, MultiselectFieldComponent, NgControlFieldDirective, OverlayPlacement, PDF_IFRAME_VIEWER_HASH, PasswordFieldComponent, PhoneFieldComponent, PopoverBodyTemplateDirective, PopoverComponent, PopoverFooterTemplateDirective, PopoverTriggerDirective, STRUCTRA_THEME_IDS, STRUCTRA_UI, SelectFieldComponent, SkeletonBlockComponent, SkeletonCardComponent, SkeletonFieldShellComponent, SkeletonListComponent, SkeletonTableComponent, SkeletonTextComponent, StatCardComponent, StatusBadgeComponent, SwitchFieldComponent, TableEmptyStateComponent, TableToolbarComponent, TextFieldComponent, TextareaFieldComponent, ThemeDirective, ToastHostComponent, ToastService, TooltipComponent, TooltipPanelTemplateDirective, ValidationSummaryComponent, anchoredOverlayPositions, appendPdfIframeViewerParams, applyPickedCalendarDate, buildDecimalBrDisplay, buildDecimalBrParseString, buildEmptyStateOverlayHtml, caretIndexFromIntegerDigitCount, caretIndexFromSemantic, cepMaskCompleteValidator, cpfCnpjMaskCompleteValidator, escapeHtml, extractDecimalBrParts, fileIsLikelyImage, fileMatchesAccept, fixedDigitsMaskCompleteValidator, formatAcceptForDisplay, formatDateTimePtBr, formatDecimalBr, formatFileSizeBytes, formatIntegerThousandsBr, formatMaskDigits, formatUiFieldDateValue, getFilePreviewKind, getThemeClass, getThemeClassList, getThemeTokenClass, libDialogPanelClasses, mapEstadosToOptions, maskDigitCount, normalizeFormDateValue, normalizeStructraTheme, parseDecimalBr, parseIntegerString, parseUiFieldDateValue, phoneBrMaskCompleteValidator, resolveControlAtPath, sanitizeDecimalBrInput, sanitizeIntegerDigits, sectionHasVisibleInvalid, semanticCaretAt, semanticIntegerDigitCountLeft, stripToDigits, subscribeMarkForCheckOnInvalidUiRefresh, subtreeHasVisibleInvalid };
|
|
10636
|
+
export { ADAPTIVE_DATA_VIEW_MOBILE_QUERY, APP_SIDEBAR_LABEL_REVEAL_LAG_MS, APP_SIDEBAR_LAYOUT_DURATION_MS, APP_SIDEBAR_NAV_REVEAL_TOTAL_MS, APP_THEME_BASE_CLASS, APP_THEME_IDS, ActionMenuComponent, AdaptiveDataViewComponent, AlertComponent, AnchoredOverlayComponent, AppBreadcrumbComponent, AppDialogComponent, AppLibLightBlockScrollStrategy, AppShellComponent, AppShellSidebarTemplateDirective, AppShellSidebarToggleComponent, AppSidebarComponent, AppSidebarToolbarDirective, AppTheme, AppThemeService, AppTopbarComponent, AppUserMenuComponent, BR_ESTADOS_NOME_SIGLA, BaseFieldComponent, BaseFieldDirective, BooleanFieldDirective, ButtonComponent, ButtonRadius, ButtonSize, ButtonType, ButtonVariant, CardListComponent, CepFieldComponent, CheckboxFieldComponent, ConfirmDialogComponent, ConfirmDialogService, ContextMenuComponent, CpfCnpjFieldComponent, DashboardSectionComponent, DataCardComponent, DataGridComponent, DataListComponent, DataToolbarComponent, DateFieldComponent, DecimalFieldComponent, DetailsFieldComponent, DetailsViewComponent, DialogFooterDirective, DividerComponent, DrawerComponent, DrawerSide, DrawerSize, DropdownBaseComponent, DropdownMenuComponent, DropdownMultiOptionFieldBase, DropdownOptionFieldBase, DropdownSearchFieldComponent, EmptyStateComponent, FILE_PREVIEW_UNAVAILABLE_MESSAGE, FileUploadFieldComponent, FormActionsAlign, FormActionsComponent, FormColComponent, FormGroupComponent, FormGroupVariant, FormLayoutGap, FormRowAlign, FormRowComponent, FormRowJustify, FormSectionAlign, FormSectionComponent, FormSectionRadius, FormSectionVariant, FormTabComponent, FormTabsComponent, ImagePreviewPanelComponent, InputMaskFieldComponent, IntegerFieldComponent, LAYOUT_STACK_SIDE_BY_SIDE, LAYOUT_STACK_STACKED, LayoutStackAlign, LayoutStackComponent, LayoutStackDirection, LayoutStackItemAlign, LibDialogSize, ListItemComponent, LoadingDialogComponent, LoadingDialogService, MaskedTextFieldBase, MenuDividerComponent, MenuDropdownPlacement, MenuGroupComponent, MenuListComponent, MultiselectFieldComponent, NgControlFieldDirective, OverlayPlacement, PDF_IFRAME_VIEWER_HASH, PasswordFieldComponent, PhoneFieldComponent, PopoverBodyTemplateDirective, PopoverComponent, PopoverFooterTemplateDirective, PopoverTriggerDirective, STRUCTRA_THEME_IDS, STRUCTRA_UI, SelectFieldComponent, SkeletonBlockComponent, SkeletonCardComponent, SkeletonFieldShellComponent, SkeletonListComponent, SkeletonTableComponent, SkeletonTextComponent, StatCardComponent, StatusBadgeComponent, SwitchFieldComponent, TableEmptyStateComponent, TableToolbarComponent, TextFieldComponent, TextareaFieldComponent, ThemeDirective, ToastHostComponent, ToastService, TooltipComponent, TooltipPanelTemplateDirective, ValidationSummaryComponent, anchoredOverlayPositions, appendPdfIframeViewerParams, applyOptionalThemeHostClasses, applyPickedCalendarDate, buildDecimalBrDisplay, buildDecimalBrParseString, buildEmptyStateOverlayHtml, caretIndexFromIntegerDigitCount, caretIndexFromSemantic, cepMaskCompleteValidator, cpfCnpjMaskCompleteValidator, escapeHtml, extractDecimalBrParts, fileIsLikelyImage, fileMatchesAccept, fixedDigitsMaskCompleteValidator, formatAcceptForDisplay, formatDateTimePtBr, formatDecimalBr, formatFileSizeBytes, formatIntegerThousandsBr, formatMaskDigits, formatUiFieldDateValue, getFilePreviewKind, getThemeClass, getThemeClassList, getThemeTokenClass, injectEffectiveThemeId, libDialogPanelClasses, mapEstadosToOptions, maskDigitCount, normalizeFormDateValue, normalizeStructraTheme, parseDecimalBr, parseIntegerString, parseUiFieldDateValue, phoneBrMaskCompleteValidator, resolveControlAtPath, sanitizeDecimalBrInput, sanitizeIntegerDigits, sectionHasVisibleInvalid, semanticCaretAt, semanticIntegerDigitCountLeft, stripToDigits, subscribeMarkForCheckOnInvalidUiRefresh, subtreeHasVisibleInvalid };
|
|
10591
10637
|
//# sourceMappingURL=structra-ui.mjs.map
|