structra-ui 0.2.54 → 0.2.56
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 +480 -70
- package/fesm2022/structra-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/structra-ui.d.ts +86 -10
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, input, output, HostListener, ViewChildren, forwardRef, ApplicationRef,
|
|
3
|
+
import { signal, booleanAttribute, Input, HostBinding, ChangeDetectionStrategy, Component, ElementRef, ViewChild, inject, ChangeDetectorRef, Injector, DestroyRef, EventEmitter, Output, Directive, numberAttribute, computed, Injectable, input, output, afterNextRender, HostListener, ViewChildren, forwardRef, ApplicationRef, ContentChildren, NgZone, Renderer2, effect, TemplateRef, ContentChild } 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';
|
|
@@ -871,6 +871,14 @@ function applyOptionalThemeHostClasses(renderer, element, explicitTheme) {
|
|
|
871
871
|
}
|
|
872
872
|
}
|
|
873
873
|
|
|
874
|
+
/**
|
|
875
|
+
* Sem hover primário (telemóvel), o scroll da página costuma ser em contentores `overflow: auto`
|
|
876
|
+
* — o `ScrollDispatcher` do CDK só os vê se tiverem `cdkScrollable`. Com `reposition()`, o painel
|
|
877
|
+
* fica «solto»; fechar ao scroll corresponde à expectativa do utilizador.
|
|
878
|
+
*/
|
|
879
|
+
function prefersCloseDropdownOnOuterScroll() {
|
|
880
|
+
return typeof matchMedia !== 'undefined' && !matchMedia('(hover: hover)').matches;
|
|
881
|
+
}
|
|
874
882
|
/** Posição por omissão do CDK (equivalente ao comportamento anterior sem `positions` explícitas). */
|
|
875
883
|
const DEFAULT_CONNECTED_POSITIONS = [
|
|
876
884
|
{
|
|
@@ -910,11 +918,18 @@ class DropdownBaseComponent {
|
|
|
910
918
|
/** Empurra o overlay para caber no viewport quando há espaço insuficiente. */
|
|
911
919
|
this.pushConnectedOverlay = false;
|
|
912
920
|
/**
|
|
913
|
-
*
|
|
914
|
-
*
|
|
921
|
+
* `true`: mantém a última posição escolhida e só reancora ao rect do gatilho — evita flip/push bruscos
|
|
922
|
+
* quando o conteúdo do painel muda (ex.: multiselect que reordena opções ao seleccionar).
|
|
923
|
+
*/
|
|
924
|
+
this.lockConnectedOverlayPosition = false;
|
|
925
|
+
/**
|
|
926
|
+
* Sobrescrever a estratégia CDK (ex.: `noop()` em cenários de teste).
|
|
927
|
+
* Por omissão: **reposiciona** em desktop; em ambientes sem `(hover: hover)` usa **fecho ao scroll**
|
|
928
|
+
* da página (lista não fica desalinhada ao rolar o formulário no telemóvel).
|
|
915
929
|
*/
|
|
916
930
|
this.scrollStrategy = null;
|
|
917
|
-
this.
|
|
931
|
+
this.repositionScrollStrategy = this.overlay.scrollStrategies.reposition();
|
|
932
|
+
this.closeOnOuterScrollStrategy = this.overlay.scrollStrategies.close();
|
|
918
933
|
/**
|
|
919
934
|
* `true`: painel sem fundo/borda/sombra próprios — o conteúdo (ex.: `app-menu-list`) define o chrome.
|
|
920
935
|
* Evita dupla moldura com `menu-surface-shell` nos menus de acção.
|
|
@@ -922,7 +937,12 @@ class DropdownBaseComponent {
|
|
|
922
937
|
this.bareOverlayPanel = false;
|
|
923
938
|
}
|
|
924
939
|
get effectiveScrollStrategy() {
|
|
925
|
-
|
|
940
|
+
if (this.scrollStrategy !== null) {
|
|
941
|
+
return this.scrollStrategy;
|
|
942
|
+
}
|
|
943
|
+
return prefersCloseDropdownOnOuterScroll()
|
|
944
|
+
? this.closeOnOuterScrollStrategy
|
|
945
|
+
: this.repositionScrollStrategy;
|
|
926
946
|
}
|
|
927
947
|
get overlayWidthPx() {
|
|
928
948
|
const w = this.panelWidthPx;
|
|
@@ -957,13 +977,26 @@ class DropdownBaseComponent {
|
|
|
957
977
|
toggle() {
|
|
958
978
|
this.setOpen(!this.open);
|
|
959
979
|
}
|
|
980
|
+
/**
|
|
981
|
+
* Após o gatilho ou o painel mudarem de layout com o overlay aberto (ex.: teclado / multiselect).
|
|
982
|
+
*/
|
|
983
|
+
scheduleOverlayPositionSync() {
|
|
984
|
+
queueMicrotask(() => {
|
|
985
|
+
requestAnimationFrame(() => {
|
|
986
|
+
this.connectedOverlay?.overlayRef?.updatePosition();
|
|
987
|
+
});
|
|
988
|
+
});
|
|
989
|
+
}
|
|
960
990
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
961
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: DropdownBaseComponent, isStandalone: true, selector: "app-dropdown-base", inputs: { open: ["open", "open", booleanAttribute], panelTemplate: "panelTemplate", panelWidthPx: "panelWidthPx", closeOnEscape: ["closeOnEscape", "closeOnEscape", booleanAttribute], hasBackdrop: ["hasBackdrop", "hasBackdrop", booleanAttribute], connectedPositions: "connectedPositions", pushConnectedOverlay: ["pushConnectedOverlay", "pushConnectedOverlay", booleanAttribute], scrollStrategy: "scrollStrategy", bareOverlayPanel: ["bareOverlayPanel", "bareOverlayPanel", booleanAttribute] }, outputs: { openChange: "openChange" }, ngImport: i0, template: "<div class=\"dropdown-base\">\r\n <span class=\"dropdown-base__origin\" cdkOverlayOrigin #dropdownOrigin=\"cdkOverlayOrigin\">\r\n <ng-content select=\"[appDropdownTrigger]\" />\r\n </span>\r\n\r\n <ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayPositions]=\"effectiveConnectedPositions\"\r\n [cdkConnectedOverlayPush]=\"pushConnectedOverlay\"\r\n [cdkConnectedOverlayScrollStrategy]=\"effectiveScrollStrategy\"\r\n [cdkConnectedOverlayPanelClass]=\"overlayPanelClasses()\"\r\n [cdkConnectedOverlayOrigin]=\"dropdownOrigin\"\r\n [cdkConnectedOverlayOpen]=\"open\"\r\n [cdkConnectedOverlayWidth]=\"$any(overlayWidthPx > 0 ? overlayWidthPx : undefined)\"\r\n [cdkConnectedOverlayMinWidth]=\"$any(overlayWidthPx > 0 ? overlayWidthPx : undefined)\"\r\n [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop\"\r\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\r\n [cdkConnectedOverlayDisableClose]=\"false\"\r\n (backdropClick)=\"onBackdropClick()\"\r\n (overlayOutsideClick)=\"onOverlayOutsideClick()\"\r\n (overlayKeydown)=\"onOverlayKeydown($event)\"\r\n (detach)=\"setOpen(false)\"\r\n >\r\n <div\r\n class=\"dropdown-base__panel\"\r\n [class.dropdown-base__panel--bare]=\"bareOverlayPanel\"\r\n [ngClass]=\"panelThemeNgClass()\"\r\n role=\"presentation\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"panelTemplate\" />\r\n </div>\r\n </ng-template>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-width:0;width:100%;box-sizing:border-box}.dropdown-base{display:flex;flex:1;min-width:0;width:100%;box-sizing:border-box}.dropdown-base__origin{display:block;width:100%;min-width:0;flex:1 1 auto;box-sizing:border-box}.dropdown-base__panel{width:100%;box-sizing:border-box;background:var(--app-color-nav-surface, var(--app-color-surface, #fff));border:1px solid var(--ui-field-float-border, #ccc);border-radius:4px;box-shadow:0 4px 12px var(--app-color-overlay-shadow, rgba(0, 0, 0, .12));overflow:visible;max-height:none}.dropdown-base__panel--bare{background:transparent;border:none;box-shadow:none;border-radius:0;overflow:visible}\n"], dependencies: [{ kind: "directive", type: 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: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
991
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: DropdownBaseComponent, isStandalone: true, selector: "app-dropdown-base", inputs: { open: ["open", "open", booleanAttribute], panelTemplate: "panelTemplate", panelWidthPx: "panelWidthPx", closeOnEscape: ["closeOnEscape", "closeOnEscape", booleanAttribute], hasBackdrop: ["hasBackdrop", "hasBackdrop", booleanAttribute], connectedPositions: "connectedPositions", pushConnectedOverlay: ["pushConnectedOverlay", "pushConnectedOverlay", booleanAttribute], lockConnectedOverlayPosition: ["lockConnectedOverlayPosition", "lockConnectedOverlayPosition", booleanAttribute], scrollStrategy: "scrollStrategy", bareOverlayPanel: ["bareOverlayPanel", "bareOverlayPanel", booleanAttribute] }, outputs: { openChange: "openChange" }, viewQueries: [{ propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true }], ngImport: i0, template: "<div class=\"dropdown-base\">\r\n <span class=\"dropdown-base__origin\" cdkOverlayOrigin #dropdownOrigin=\"cdkOverlayOrigin\">\r\n <ng-content select=\"[appDropdownTrigger]\" />\r\n </span>\r\n\r\n <ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayPositions]=\"effectiveConnectedPositions\"\r\n [cdkConnectedOverlayPush]=\"pushConnectedOverlay\"\r\n [cdkConnectedOverlayLockPosition]=\"lockConnectedOverlayPosition\"\r\n [cdkConnectedOverlayScrollStrategy]=\"effectiveScrollStrategy\"\r\n [cdkConnectedOverlayPanelClass]=\"overlayPanelClasses()\"\r\n [cdkConnectedOverlayOrigin]=\"dropdownOrigin\"\r\n [cdkConnectedOverlayOpen]=\"open\"\r\n [cdkConnectedOverlayWidth]=\"$any(overlayWidthPx > 0 ? overlayWidthPx : undefined)\"\r\n [cdkConnectedOverlayMinWidth]=\"$any(overlayWidthPx > 0 ? overlayWidthPx : undefined)\"\r\n [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop\"\r\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\r\n [cdkConnectedOverlayDisableClose]=\"false\"\r\n (backdropClick)=\"onBackdropClick()\"\r\n (overlayOutsideClick)=\"onOverlayOutsideClick()\"\r\n (overlayKeydown)=\"onOverlayKeydown($event)\"\r\n (detach)=\"setOpen(false)\"\r\n >\r\n <div\r\n class=\"dropdown-base__panel\"\r\n [class.dropdown-base__panel--bare]=\"bareOverlayPanel\"\r\n [ngClass]=\"panelThemeNgClass()\"\r\n role=\"presentation\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"panelTemplate\" />\r\n </div>\r\n </ng-template>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-width:0;width:100%;box-sizing:border-box}.dropdown-base{display:flex;flex:1;min-width:0;width:100%;box-sizing:border-box}.dropdown-base__origin{display:block;width:100%;min-width:0;flex:1 1 auto;box-sizing:border-box}.dropdown-base__panel{width:100%;box-sizing:border-box;background:var(--app-color-nav-surface, var(--app-color-surface, #fff));border:1px solid var(--ui-field-float-border, #ccc);border-radius:4px;box-shadow:0 4px 12px var(--app-color-overlay-shadow, rgba(0, 0, 0, .12));overflow:visible;max-height:none}.dropdown-base__panel--bare{background:transparent;border:none;box-shadow:none;border-radius:0;overflow:visible}\n"], dependencies: [{ kind: "directive", type: 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: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
962
992
|
}
|
|
963
993
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownBaseComponent, decorators: [{
|
|
964
994
|
type: Component,
|
|
965
|
-
args: [{ selector: 'app-dropdown-base', imports: [CdkConnectedOverlay, CdkOverlayOrigin, NgClass, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dropdown-base\">\r\n <span class=\"dropdown-base__origin\" cdkOverlayOrigin #dropdownOrigin=\"cdkOverlayOrigin\">\r\n <ng-content select=\"[appDropdownTrigger]\" />\r\n </span>\r\n\r\n <ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayPositions]=\"effectiveConnectedPositions\"\r\n [cdkConnectedOverlayPush]=\"pushConnectedOverlay\"\r\n [cdkConnectedOverlayScrollStrategy]=\"effectiveScrollStrategy\"\r\n [cdkConnectedOverlayPanelClass]=\"overlayPanelClasses()\"\r\n [cdkConnectedOverlayOrigin]=\"dropdownOrigin\"\r\n [cdkConnectedOverlayOpen]=\"open\"\r\n [cdkConnectedOverlayWidth]=\"$any(overlayWidthPx > 0 ? overlayWidthPx : undefined)\"\r\n [cdkConnectedOverlayMinWidth]=\"$any(overlayWidthPx > 0 ? overlayWidthPx : undefined)\"\r\n [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop\"\r\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\r\n [cdkConnectedOverlayDisableClose]=\"false\"\r\n (backdropClick)=\"onBackdropClick()\"\r\n (overlayOutsideClick)=\"onOverlayOutsideClick()\"\r\n (overlayKeydown)=\"onOverlayKeydown($event)\"\r\n (detach)=\"setOpen(false)\"\r\n >\r\n <div\r\n class=\"dropdown-base__panel\"\r\n [class.dropdown-base__panel--bare]=\"bareOverlayPanel\"\r\n [ngClass]=\"panelThemeNgClass()\"\r\n role=\"presentation\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"panelTemplate\" />\r\n </div>\r\n </ng-template>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-width:0;width:100%;box-sizing:border-box}.dropdown-base{display:flex;flex:1;min-width:0;width:100%;box-sizing:border-box}.dropdown-base__origin{display:block;width:100%;min-width:0;flex:1 1 auto;box-sizing:border-box}.dropdown-base__panel{width:100%;box-sizing:border-box;background:var(--app-color-nav-surface, var(--app-color-surface, #fff));border:1px solid var(--ui-field-float-border, #ccc);border-radius:4px;box-shadow:0 4px 12px var(--app-color-overlay-shadow, rgba(0, 0, 0, .12));overflow:visible;max-height:none}.dropdown-base__panel--bare{background:transparent;border:none;box-shadow:none;border-radius:0;overflow:visible}\n"] }]
|
|
966
|
-
}], propDecorators: {
|
|
995
|
+
args: [{ selector: 'app-dropdown-base', imports: [CdkConnectedOverlay, CdkOverlayOrigin, NgClass, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dropdown-base\">\r\n <span class=\"dropdown-base__origin\" cdkOverlayOrigin #dropdownOrigin=\"cdkOverlayOrigin\">\r\n <ng-content select=\"[appDropdownTrigger]\" />\r\n </span>\r\n\r\n <ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayPositions]=\"effectiveConnectedPositions\"\r\n [cdkConnectedOverlayPush]=\"pushConnectedOverlay\"\r\n [cdkConnectedOverlayLockPosition]=\"lockConnectedOverlayPosition\"\r\n [cdkConnectedOverlayScrollStrategy]=\"effectiveScrollStrategy\"\r\n [cdkConnectedOverlayPanelClass]=\"overlayPanelClasses()\"\r\n [cdkConnectedOverlayOrigin]=\"dropdownOrigin\"\r\n [cdkConnectedOverlayOpen]=\"open\"\r\n [cdkConnectedOverlayWidth]=\"$any(overlayWidthPx > 0 ? overlayWidthPx : undefined)\"\r\n [cdkConnectedOverlayMinWidth]=\"$any(overlayWidthPx > 0 ? overlayWidthPx : undefined)\"\r\n [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop\"\r\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\r\n [cdkConnectedOverlayDisableClose]=\"false\"\r\n (backdropClick)=\"onBackdropClick()\"\r\n (overlayOutsideClick)=\"onOverlayOutsideClick()\"\r\n (overlayKeydown)=\"onOverlayKeydown($event)\"\r\n (detach)=\"setOpen(false)\"\r\n >\r\n <div\r\n class=\"dropdown-base__panel\"\r\n [class.dropdown-base__panel--bare]=\"bareOverlayPanel\"\r\n [ngClass]=\"panelThemeNgClass()\"\r\n role=\"presentation\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"panelTemplate\" />\r\n </div>\r\n </ng-template>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-width:0;width:100%;box-sizing:border-box}.dropdown-base{display:flex;flex:1;min-width:0;width:100%;box-sizing:border-box}.dropdown-base__origin{display:block;width:100%;min-width:0;flex:1 1 auto;box-sizing:border-box}.dropdown-base__panel{width:100%;box-sizing:border-box;background:var(--app-color-nav-surface, var(--app-color-surface, #fff));border:1px solid var(--ui-field-float-border, #ccc);border-radius:4px;box-shadow:0 4px 12px var(--app-color-overlay-shadow, rgba(0, 0, 0, .12));overflow:visible;max-height:none}.dropdown-base__panel--bare{background:transparent;border:none;box-shadow:none;border-radius:0;overflow:visible}\n"] }]
|
|
996
|
+
}], propDecorators: { connectedOverlay: [{
|
|
997
|
+
type: ViewChild,
|
|
998
|
+
args: [CdkConnectedOverlay]
|
|
999
|
+
}], open: [{
|
|
967
1000
|
type: Input,
|
|
968
1001
|
args: [{ transform: booleanAttribute }]
|
|
969
1002
|
}], openChange: [{
|
|
@@ -984,6 +1017,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
984
1017
|
}], pushConnectedOverlay: [{
|
|
985
1018
|
type: Input,
|
|
986
1019
|
args: [{ transform: booleanAttribute }]
|
|
1020
|
+
}], lockConnectedOverlayPosition: [{
|
|
1021
|
+
type: Input,
|
|
1022
|
+
args: [{ transform: booleanAttribute }]
|
|
987
1023
|
}], scrollStrategy: [{
|
|
988
1024
|
type: Input
|
|
989
1025
|
}], bareOverlayPanel: [{
|
|
@@ -1186,6 +1222,19 @@ function buildMenuRows(nodes) {
|
|
|
1186
1222
|
}
|
|
1187
1223
|
return rows;
|
|
1188
1224
|
}
|
|
1225
|
+
/**
|
|
1226
|
+
* Compara ids de itens do menu (rotas, chaves de navegação).
|
|
1227
|
+
* Evita falhas quando o modelo usa `string` e o estado activo vem como `number` (ou o contrário).
|
|
1228
|
+
*/
|
|
1229
|
+
function menuItemIdsEqual(a, b) {
|
|
1230
|
+
if (Object.is(a, b)) {
|
|
1231
|
+
return true;
|
|
1232
|
+
}
|
|
1233
|
+
if (a == null || b == null) {
|
|
1234
|
+
return false;
|
|
1235
|
+
}
|
|
1236
|
+
return String(a) === String(b);
|
|
1237
|
+
}
|
|
1189
1238
|
function focusableActionCount(rows) {
|
|
1190
1239
|
return rows.filter((r) => (r.kind === 'action' || r.kind === 'submenu') && r.focusIndex !== null).length;
|
|
1191
1240
|
}
|
|
@@ -1199,7 +1248,7 @@ function menuNodeTreeContainsId(items, selectedId) {
|
|
|
1199
1248
|
continue;
|
|
1200
1249
|
}
|
|
1201
1250
|
if (node.kind === 'item') {
|
|
1202
|
-
if (node.id
|
|
1251
|
+
if (menuItemIdsEqual(node.id, selectedId)) {
|
|
1203
1252
|
return true;
|
|
1204
1253
|
}
|
|
1205
1254
|
}
|
|
@@ -1233,7 +1282,7 @@ function collectGroupIdsContainingSelectedItem(nodes, selectedId) {
|
|
|
1233
1282
|
}
|
|
1234
1283
|
}
|
|
1235
1284
|
else if (n.kind === 'item') {
|
|
1236
|
-
if (n.id
|
|
1285
|
+
if (menuItemIdsEqual(n.id, selectedId)) {
|
|
1237
1286
|
hit = true;
|
|
1238
1287
|
}
|
|
1239
1288
|
}
|
|
@@ -1284,6 +1333,14 @@ const SUBMENU_OPEN_MS = 200;
|
|
|
1284
1333
|
* não fica no DOM do trigger) sem fechar; emparelha com a sobreposição de posição.
|
|
1285
1334
|
*/
|
|
1286
1335
|
const SUBMENU_CLOSE_MS = 1200;
|
|
1336
|
+
/**
|
|
1337
|
+
* Sem capacidade de hover real (ex.: telemóvel), o browser pode emitir `mouseenter`
|
|
1338
|
+
* de compatibilidade na coordenada do toque ao abrir o drawer — não usar isso para
|
|
1339
|
+
* `activeIndex`/tabindex (evita linha «focada» à altura do botão do menu).
|
|
1340
|
+
*/
|
|
1341
|
+
function allowMouseHoverMenuHighlight() {
|
|
1342
|
+
return typeof matchMedia === 'undefined' || matchMedia('(hover: hover)').matches;
|
|
1343
|
+
}
|
|
1287
1344
|
/** Prefixo das chaves em `sessionStorage` (`<prefix>:<menuId>`). */
|
|
1288
1345
|
const MENU_GROUP_EXPANSION_STORAGE_PREFIX = 'structra.menuGroups';
|
|
1289
1346
|
/**
|
|
@@ -1342,8 +1399,17 @@ function purgeMenuGroupExpansionStorageAfterReload() {
|
|
|
1342
1399
|
}
|
|
1343
1400
|
class MenuListBodyComponent {
|
|
1344
1401
|
constructor(cdr, hostRef) {
|
|
1402
|
+
this.destroyRef = inject(DestroyRef);
|
|
1403
|
+
this.injector = inject(Injector);
|
|
1345
1404
|
/** Igual a `[appTheme]` na lib; omitir = tema global (ex.: propagado por `app-sidebar`). */
|
|
1346
1405
|
this.appTheme = input(...(ngDevMode ? [undefined, { debugName: "appTheme" }] : /* istanbul ignore next */ []));
|
|
1406
|
+
/**
|
|
1407
|
+
* Emitido após sincronizar expansão de grupos / submenu com `selectedItemId` no próximo render.
|
|
1408
|
+
* A sidebar usa isto para voltar a correr o scroll até ao `--selected` (ex.: drawer mobile `@if (open)`).
|
|
1409
|
+
*/
|
|
1410
|
+
this.selectionScrollHint = output();
|
|
1411
|
+
/** Invalida callbacks `afterNextRender` pendentes do hint de scroll. */
|
|
1412
|
+
this.selectionLayoutHintGen = 0;
|
|
1347
1413
|
this.items = [];
|
|
1348
1414
|
/** Prefixo dos `id` das opções focáveis (`${menuId}-opt-${focusIndex}`). */
|
|
1349
1415
|
this.menuId = 'app-menu';
|
|
@@ -1411,6 +1477,12 @@ class MenuListBodyComponent {
|
|
|
1411
1477
|
this.cdr = cdr;
|
|
1412
1478
|
this.hostRef = hostRef;
|
|
1413
1479
|
this.effectiveThemeId = injectEffectiveThemeId(this.appTheme);
|
|
1480
|
+
this.destroyRef.onDestroy(() => {
|
|
1481
|
+
this.selectionLayoutHintGen++;
|
|
1482
|
+
});
|
|
1483
|
+
}
|
|
1484
|
+
ngAfterViewInit() {
|
|
1485
|
+
this.scheduleSelectionLayoutHintAfterRender();
|
|
1414
1486
|
}
|
|
1415
1487
|
overlayPanelClasses() {
|
|
1416
1488
|
return [...getThemeClassList(this.effectiveThemeId()), 'menu-submenu__cdk-panel'];
|
|
@@ -1459,18 +1531,13 @@ class MenuListBodyComponent {
|
|
|
1459
1531
|
this.activeIndex = this.focusableCount - 1;
|
|
1460
1532
|
}
|
|
1461
1533
|
}
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
}
|
|
1470
|
-
else if (this.activeIndex >= this.focusableCount) {
|
|
1471
|
-
this.activeIndex = this.focusableCount - 1;
|
|
1472
|
-
}
|
|
1473
|
-
}
|
|
1534
|
+
/**
|
|
1535
|
+
* Fim da cadeia `if / else if`: mudanças só em `selectedItemId` já não tinham ramo próprio e,
|
|
1536
|
+
* em alguns ciclos, `selectedItemId` combinava com `groupCollapsible` / outros — o ramo errado
|
|
1537
|
+
* impedia `ensureExpandedGroupsForSelection`. Reconciliar sempre que o caminho da selecção importa.
|
|
1538
|
+
*/
|
|
1539
|
+
if (this.shouldReconcileSelectionPath(changes)) {
|
|
1540
|
+
this.reconcileSelectionPathSync();
|
|
1474
1541
|
}
|
|
1475
1542
|
if (changes['selectedItemId'] ||
|
|
1476
1543
|
changes['items'] ||
|
|
@@ -1484,6 +1551,71 @@ class MenuListBodyComponent {
|
|
|
1484
1551
|
changes['persistGroupExpansion']) {
|
|
1485
1552
|
this.cdr.markForCheck();
|
|
1486
1553
|
}
|
|
1554
|
+
if (this.shouldScheduleSelectionScrollHint(changes)) {
|
|
1555
|
+
this.scheduleSelectionLayoutHintAfterRender();
|
|
1556
|
+
}
|
|
1557
|
+
}
|
|
1558
|
+
shouldReconcileSelectionPath(changes) {
|
|
1559
|
+
return !!(changes['selectedItemId'] ||
|
|
1560
|
+
changes['items'] ||
|
|
1561
|
+
changes['expandAllGroupsInitially'] ||
|
|
1562
|
+
changes['compressText'] ||
|
|
1563
|
+
changes['groupCollapsible'] ||
|
|
1564
|
+
changes['groupDefaultExpansion'] ||
|
|
1565
|
+
changes['persistGroupExpansion'] ||
|
|
1566
|
+
changes['clickToOpen']);
|
|
1567
|
+
}
|
|
1568
|
+
shouldScheduleSelectionScrollHint(changes) {
|
|
1569
|
+
return this.shouldReconcileSelectionPath(changes);
|
|
1570
|
+
}
|
|
1571
|
+
/**
|
|
1572
|
+
* Garante expansão + submenu para a rota activa depois do {@link MenuListComponent} ter referência
|
|
1573
|
+
* ao `ViewChild` (caso típico do drawer mobile).
|
|
1574
|
+
*/
|
|
1575
|
+
syncRouteSelectionExpansion() {
|
|
1576
|
+
if ((this.items?.length ?? 0) > 0 && !this.rows.length) {
|
|
1577
|
+
this.rebuildRowsFromItems();
|
|
1578
|
+
this.selectionScrollHint.emit();
|
|
1579
|
+
return;
|
|
1580
|
+
}
|
|
1581
|
+
this.reconcileSelectionPathSync();
|
|
1582
|
+
this.selectionScrollHint.emit();
|
|
1583
|
+
}
|
|
1584
|
+
/** Abre grupos no caminho da rota activa e submenu em modo clique — síncrono após inputs. */
|
|
1585
|
+
reconcileSelectionPathSync() {
|
|
1586
|
+
if (!this.rows.length) {
|
|
1587
|
+
if ((this.items?.length ?? 0) > 0) {
|
|
1588
|
+
this.rebuildRowsFromItems();
|
|
1589
|
+
}
|
|
1590
|
+
return;
|
|
1591
|
+
}
|
|
1592
|
+
let touched = false;
|
|
1593
|
+
if (this.ensureExpandedGroupsForSelection()) {
|
|
1594
|
+
this.syncDisplayRows();
|
|
1595
|
+
touched = true;
|
|
1596
|
+
}
|
|
1597
|
+
if (this.ensureSubmenuOpenForSelection()) {
|
|
1598
|
+
touched = true;
|
|
1599
|
+
}
|
|
1600
|
+
if (touched) {
|
|
1601
|
+
if (this.focusableCount === 0) {
|
|
1602
|
+
this.activeIndex = -1;
|
|
1603
|
+
}
|
|
1604
|
+
else if (this.activeIndex >= this.focusableCount) {
|
|
1605
|
+
this.activeIndex = this.focusableCount - 1;
|
|
1606
|
+
}
|
|
1607
|
+
this.cdr.markForCheck();
|
|
1608
|
+
}
|
|
1609
|
+
}
|
|
1610
|
+
scheduleSelectionLayoutHintAfterRender() {
|
|
1611
|
+
const gen = ++this.selectionLayoutHintGen;
|
|
1612
|
+
afterNextRender(() => {
|
|
1613
|
+
if (gen !== this.selectionLayoutHintGen) {
|
|
1614
|
+
return;
|
|
1615
|
+
}
|
|
1616
|
+
this.reconcileSelectionPathSync();
|
|
1617
|
+
this.selectionScrollHint.emit();
|
|
1618
|
+
}, { injector: this.injector });
|
|
1487
1619
|
}
|
|
1488
1620
|
getRowsSourceItems() {
|
|
1489
1621
|
return [...(this.items ?? [])];
|
|
@@ -1505,6 +1637,7 @@ class MenuListBodyComponent {
|
|
|
1505
1637
|
this.activeIndex = -1;
|
|
1506
1638
|
}
|
|
1507
1639
|
this.applySearchSubmenuAutoOpen();
|
|
1640
|
+
this.ensureSubmenuOpenForSelection();
|
|
1508
1641
|
}
|
|
1509
1642
|
/**
|
|
1510
1643
|
* Com pesquisa activa (lista filtrada), abre o primeiro submenu deste nível que
|
|
@@ -1626,13 +1759,11 @@ class MenuListBodyComponent {
|
|
|
1626
1759
|
}
|
|
1627
1760
|
/**
|
|
1628
1761
|
* Abre todos os grupos no caminho até ao item com `selectedItemId` (árvore alinhada a {@link buildMenuRows}).
|
|
1629
|
-
*
|
|
1762
|
+
* Corre também com `compressText` activo para `expandedGroupIds` ficar correcto quando o rail termina;
|
|
1763
|
+
* com texto comprimido, {@link isGroupExpanded} continua a mostrar todas as linhas na lista.
|
|
1630
1764
|
*/
|
|
1631
1765
|
ensureExpandedGroupsForSelection() {
|
|
1632
|
-
if (this.selectedItemId == null ||
|
|
1633
|
-
!this.groupCollapsible ||
|
|
1634
|
-
this.compressText ||
|
|
1635
|
-
this.expandAllGroupsInitially) {
|
|
1766
|
+
if (this.selectedItemId == null || !this.groupCollapsible) {
|
|
1636
1767
|
return false;
|
|
1637
1768
|
}
|
|
1638
1769
|
const gids = collectGroupIdsContainingSelectedItem(this.getRowsSourceItems(), this.selectedItemId);
|
|
@@ -1652,6 +1783,49 @@ class MenuListBodyComponent {
|
|
|
1652
1783
|
}
|
|
1653
1784
|
return changed;
|
|
1654
1785
|
}
|
|
1786
|
+
/**
|
|
1787
|
+
* Com `clickToOpen`, **não** abre flyout por sincronização de rota / expansão do menu — só o utilizador
|
|
1788
|
+
* (ou {@link applySearchSubmenuAutoOpen} durante a pesquisa) abre o painel. Aqui apenas **fechamos**
|
|
1789
|
+
* o flyout quando deixa de corresponder à selecção (ex.: navegação para item de topo).
|
|
1790
|
+
*
|
|
1791
|
+
* Com pesquisa activa (`expandAllGroupsInitially`), o estado do flyout é só da pesquisa — não interferir.
|
|
1792
|
+
*/
|
|
1793
|
+
ensureSubmenuOpenForSelection() {
|
|
1794
|
+
if (!this.clickToOpen) {
|
|
1795
|
+
return false;
|
|
1796
|
+
}
|
|
1797
|
+
if (this.expandAllGroupsInitially) {
|
|
1798
|
+
return false;
|
|
1799
|
+
}
|
|
1800
|
+
if (this.openSubmenuKey === null) {
|
|
1801
|
+
return false;
|
|
1802
|
+
}
|
|
1803
|
+
if (this.selectedItemId == null) {
|
|
1804
|
+
this.openSubmenuKey = null;
|
|
1805
|
+
return true;
|
|
1806
|
+
}
|
|
1807
|
+
let expectedKey = null;
|
|
1808
|
+
for (let i = 0; i < this.displayRows.length; i++) {
|
|
1809
|
+
const row = this.displayRows[i];
|
|
1810
|
+
if (row.kind !== 'submenu' || row.item.disabled) {
|
|
1811
|
+
continue;
|
|
1812
|
+
}
|
|
1813
|
+
if (!menuNodeTreeContainsId(row.item.items, this.selectedItemId)) {
|
|
1814
|
+
continue;
|
|
1815
|
+
}
|
|
1816
|
+
expectedKey = this.submenuRowKey(row, i);
|
|
1817
|
+
break;
|
|
1818
|
+
}
|
|
1819
|
+
if (expectedKey === null) {
|
|
1820
|
+
this.openSubmenuKey = null;
|
|
1821
|
+
return true;
|
|
1822
|
+
}
|
|
1823
|
+
if (this.openSubmenuKey === expectedKey) {
|
|
1824
|
+
return false;
|
|
1825
|
+
}
|
|
1826
|
+
this.openSubmenuKey = null;
|
|
1827
|
+
return true;
|
|
1828
|
+
}
|
|
1655
1829
|
syncDisplayRows() {
|
|
1656
1830
|
const visible = this.rows.filter((r) => this.isRowVisible(r));
|
|
1657
1831
|
let fi = 0;
|
|
@@ -1739,6 +1913,9 @@ class MenuListBodyComponent {
|
|
|
1739
1913
|
return `${this.menuId}-sub-${String(row.item.id)}`;
|
|
1740
1914
|
}
|
|
1741
1915
|
onRowMouseEnter(row) {
|
|
1916
|
+
if (!allowMouseHoverMenuHighlight()) {
|
|
1917
|
+
return;
|
|
1918
|
+
}
|
|
1742
1919
|
if (row.kind !== 'action' && row.kind !== 'submenu') {
|
|
1743
1920
|
return;
|
|
1744
1921
|
}
|
|
@@ -1760,6 +1937,9 @@ class MenuListBodyComponent {
|
|
|
1760
1937
|
if (row.kind !== 'submenu' || row.item.disabled) {
|
|
1761
1938
|
return;
|
|
1762
1939
|
}
|
|
1940
|
+
if (!allowMouseHoverMenuHighlight()) {
|
|
1941
|
+
return;
|
|
1942
|
+
}
|
|
1763
1943
|
/** Sempre: ao entrar noutra linha, cancela fecho pendente (ex.: mover entre submenus). */
|
|
1764
1944
|
this.cancelSubmenuCloseTimer();
|
|
1765
1945
|
if (row.focusIndex !== null) {
|
|
@@ -1782,6 +1962,9 @@ class MenuListBodyComponent {
|
|
|
1782
1962
|
this.cdr.markForCheck();
|
|
1783
1963
|
}
|
|
1784
1964
|
onSubmenuTriggerLeave(_row, index) {
|
|
1965
|
+
if (!allowMouseHoverMenuHighlight()) {
|
|
1966
|
+
return;
|
|
1967
|
+
}
|
|
1785
1968
|
this.cancelSubmenuOpenTimer();
|
|
1786
1969
|
/** Com `clickToOpen`, não há timer de abertura por hover; o fecho ao sair mantém-se para painéis já abertos. */
|
|
1787
1970
|
this.scheduleSubmenuClose(index);
|
|
@@ -1790,6 +1973,9 @@ class MenuListBodyComponent {
|
|
|
1790
1973
|
this.cancelSubmenuCloseTimer();
|
|
1791
1974
|
}
|
|
1792
1975
|
onSubmenuPanelLeave(row, index) {
|
|
1976
|
+
if (!allowMouseHoverMenuHighlight()) {
|
|
1977
|
+
return;
|
|
1978
|
+
}
|
|
1793
1979
|
this.scheduleSubmenuClose(index);
|
|
1794
1980
|
}
|
|
1795
1981
|
scheduleSubmenuClose(index) {
|
|
@@ -1907,10 +2093,10 @@ class MenuListBodyComponent {
|
|
|
1907
2093
|
return false;
|
|
1908
2094
|
}
|
|
1909
2095
|
if (row.kind === 'action') {
|
|
1910
|
-
return row.item.id
|
|
2096
|
+
return menuItemIdsEqual(row.item.id, this.selectedItemId);
|
|
1911
2097
|
}
|
|
1912
2098
|
if (row.kind === 'submenu') {
|
|
1913
|
-
return (row.item.id
|
|
2099
|
+
return (menuItemIdsEqual(row.item.id, this.selectedItemId) ||
|
|
1914
2100
|
menuNodeTreeContainsId(row.item.items, this.selectedItemId));
|
|
1915
2101
|
}
|
|
1916
2102
|
return false;
|
|
@@ -2045,6 +2231,7 @@ class MenuListBodyComponent {
|
|
|
2045
2231
|
if (r.item.disabled || r.item.loading) {
|
|
2046
2232
|
break;
|
|
2047
2233
|
}
|
|
2234
|
+
this.closeOpenSubmenu();
|
|
2048
2235
|
this.itemSelect.emit(r.item.id);
|
|
2049
2236
|
break;
|
|
2050
2237
|
}
|
|
@@ -2065,7 +2252,7 @@ class MenuListBodyComponent {
|
|
|
2065
2252
|
}
|
|
2066
2253
|
}
|
|
2067
2254
|
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 }); }
|
|
2068
|
-
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 }, persistGroupExpansion: { classPropertyName: "persistGroupExpansion", publicName: "persistGroupExpansion", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, expandAllGroupsInitially: { classPropertyName: "expandAllGroupsInitially", publicName: "expandAllGroupsInitially", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { itemSelect: "itemSelect", closeRequest: "closeRequest", submenuBack: "submenuBack", groupToggled: "groupToggled" }, host: { listeners: { "focusin": "onFocusIn($event)", "keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "nestedLists", predicate: MenuListBodyComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"menu-list\" [class.menu-list--nested]=\"nested\" [class.menu-list--dense]=\"dense\"\n [class.menu-list--compress-text]=\"compressText\" tabindex=\"-1\" (mouseleave)=\"onMenuSurfaceLeave()\">\n <div class=\"menu-list__toolbar\">\n <ng-content />\n </div>\n <div class=\"menu-list__viewport\" cdkScrollable tabindex=\"-1\">\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 [attr.data-structra-group-id]=\"row.groupId\" (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\" [persistGroupExpansion]=\"persistGroupExpansion\"\n [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>\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:flex;flex-direction:column;flex:1 1 auto;min-height:0;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;flex:1 1 auto;min-height:0;min-width:0;overflow:hidden;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--dense.menu-list--compress-text .menu-list__items{gap:.25rem}.menu-list__toolbar{flex:0 0 auto;min-width:0}.menu-list__viewport{flex:1 1 auto;min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;outline:none;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.menu-list__viewport::-webkit-scrollbar{width:4px;height:4px}.menu-list__viewport::-webkit-scrollbar-track{background:transparent}.menu-list__viewport::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.menu-list__viewport::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}.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", "persistGroupExpansion", "expandAllGroupsInitially"], outputs: ["itemSelect", "closeRequest", "submenuBack", "groupToggled"] }, { 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 }); }
|
|
2255
|
+
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 }, persistGroupExpansion: { classPropertyName: "persistGroupExpansion", publicName: "persistGroupExpansion", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, expandAllGroupsInitially: { classPropertyName: "expandAllGroupsInitially", publicName: "expandAllGroupsInitially", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { selectionScrollHint: "selectionScrollHint", itemSelect: "itemSelect", closeRequest: "closeRequest", submenuBack: "submenuBack", groupToggled: "groupToggled" }, host: { listeners: { "focusin": "onFocusIn($event)", "keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "nestedLists", predicate: MenuListBodyComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"menu-list\" [class.menu-list--nested]=\"nested\" [class.menu-list--dense]=\"dense\"\n [class.menu-list--compress-text]=\"compressText\" tabindex=\"-1\" (mouseleave)=\"onMenuSurfaceLeave()\">\n @if (!nested) {\n <div class=\"menu-list__toolbar\">\n <ng-content />\n </div>\n }\n <div class=\"menu-list__viewport\" cdkScrollable tabindex=\"-1\">\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 [attr.data-structra-group-id]=\"row.groupId\" (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\" [persistGroupExpansion]=\"persistGroupExpansion\"\n [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>\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:flex;flex-direction:column;flex:1 1 auto;min-height:0;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;flex:1 1 auto;min-height:0;min-width:0;overflow:hidden;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--dense.menu-list--compress-text .menu-list__items{gap:.25rem}.menu-list--nested{padding-top:4px;padding-bottom:4px;gap:0}.menu-list__toolbar{flex:0 0 auto;min-width:0}.menu-list__viewport{flex:1 1 auto;min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;outline:none;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.menu-list__viewport::-webkit-scrollbar{width:4px;height:4px}.menu-list__viewport::-webkit-scrollbar-track{background:transparent}.menu-list__viewport::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.menu-list__viewport::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}.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", "persistGroupExpansion", "expandAllGroupsInitially"], outputs: ["selectionScrollHint", "itemSelect", "closeRequest", "submenuBack", "groupToggled"] }, { 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 }); }
|
|
2069
2256
|
}
|
|
2070
2257
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuListBodyComponent, decorators: [{
|
|
2071
2258
|
type: Component,
|
|
@@ -2077,8 +2264,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
2077
2264
|
CdkScrollable,
|
|
2078
2265
|
MenuDividerComponent,
|
|
2079
2266
|
MenuGroupComponent,
|
|
2080
|
-
], template: "<div class=\"menu-list\" [class.menu-list--nested]=\"nested\" [class.menu-list--dense]=\"dense\"\n [class.menu-list--compress-text]=\"compressText\" tabindex=\"-1\" (mouseleave)=\"onMenuSurfaceLeave()\">\n <div class=\"menu-list__toolbar\">\n <ng-content />\n </div>\n <div class=\"menu-list__viewport\" cdkScrollable tabindex=\"-1\">\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 [attr.data-structra-group-id]=\"row.groupId\" (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\" [persistGroupExpansion]=\"persistGroupExpansion\"\n [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>\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:flex;flex-direction:column;flex:1 1 auto;min-height:0;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;flex:1 1 auto;min-height:0;min-width:0;overflow:hidden;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--dense.menu-list--compress-text .menu-list__items{gap:.25rem}.menu-list__toolbar{flex:0 0 auto;min-width:0}.menu-list__viewport{flex:1 1 auto;min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;outline:none;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.menu-list__viewport::-webkit-scrollbar{width:4px;height:4px}.menu-list__viewport::-webkit-scrollbar-track{background:transparent}.menu-list__viewport::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.menu-list__viewport::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}.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"] }]
|
|
2081
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], items: [{
|
|
2267
|
+
], template: "<div class=\"menu-list\" [class.menu-list--nested]=\"nested\" [class.menu-list--dense]=\"dense\"\n [class.menu-list--compress-text]=\"compressText\" tabindex=\"-1\" (mouseleave)=\"onMenuSurfaceLeave()\">\n @if (!nested) {\n <div class=\"menu-list__toolbar\">\n <ng-content />\n </div>\n }\n <div class=\"menu-list__viewport\" cdkScrollable tabindex=\"-1\">\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 [attr.data-structra-group-id]=\"row.groupId\" (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\" [persistGroupExpansion]=\"persistGroupExpansion\"\n [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>\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:flex;flex-direction:column;flex:1 1 auto;min-height:0;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;flex:1 1 auto;min-height:0;min-width:0;overflow:hidden;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--dense.menu-list--compress-text .menu-list__items{gap:.25rem}.menu-list--nested{padding-top:4px;padding-bottom:4px;gap:0}.menu-list__toolbar{flex:0 0 auto;min-width:0}.menu-list__viewport{flex:1 1 auto;min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;outline:none;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.menu-list__viewport::-webkit-scrollbar{width:4px;height:4px}.menu-list__viewport::-webkit-scrollbar-track{background:transparent}.menu-list__viewport::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.menu-list__viewport::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}.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"] }]
|
|
2268
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], selectionScrollHint: [{ type: i0.Output, args: ["selectionScrollHint"] }], items: [{
|
|
2082
2269
|
type: Input,
|
|
2083
2270
|
args: [{ required: true }]
|
|
2084
2271
|
}], menuId: [{
|
|
@@ -2188,7 +2375,7 @@ class DropdownMenuComponent {
|
|
|
2188
2375
|
this.setOpen(false);
|
|
2189
2376
|
}
|
|
2190
2377
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2191
|
-
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: MenuListBodyComponent, 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-body\r\n [items]=\"items\"\r\n [menuId]=\"resolvedMenuId\"\r\n [clickToOpen]=\"false\"\r\n (itemSelect)=\"onItemSelect($event)\"\r\n (closeRequest)=\"onCloseRequest()\"\r\n />\r\n </div>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;max-width:100%;vertical-align:middle}.dropdown-menu{display:inline-flex;max-width:100%;min-width:0}.dropdown-menu__trigger-slot{display:inline-flex;max-width:100%;min-width:0;cursor:pointer}.dropdown-menu__panel-inner{box-sizing:border-box;min-width:0}\n"], dependencies: [{ kind: "component", type: DropdownBaseComponent, selector: "app-dropdown-base", inputs: ["open", "panelTemplate", "panelWidthPx", "closeOnEscape", "hasBackdrop", "connectedPositions", "pushConnectedOverlay", "scrollStrategy", "bareOverlayPanel"], outputs: ["openChange"] }, { kind: "component", type: MenuListBodyComponent, selector: "app-menu-list-body", inputs: ["appTheme", "items", "menuId", "dense", "nested", "selectedItemId", "compressText", "clickToOpen", "groupCollapsible", "groupDefaultExpansion", "persistGroupExpansion", "expandAllGroupsInitially"], outputs: ["itemSelect", "closeRequest", "submenuBack", "groupToggled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2378
|
+
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: MenuListBodyComponent, 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-body\r\n [items]=\"items\"\r\n [menuId]=\"resolvedMenuId\"\r\n [clickToOpen]=\"false\"\r\n (itemSelect)=\"onItemSelect($event)\"\r\n (closeRequest)=\"onCloseRequest()\"\r\n />\r\n </div>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;max-width:100%;vertical-align:middle}.dropdown-menu{display:inline-flex;max-width:100%;min-width:0}.dropdown-menu__trigger-slot{display:inline-flex;max-width:100%;min-width:0;cursor:pointer}.dropdown-menu__panel-inner{box-sizing:border-box;min-width:0}\n"], dependencies: [{ kind: "component", type: DropdownBaseComponent, selector: "app-dropdown-base", inputs: ["open", "panelTemplate", "panelWidthPx", "closeOnEscape", "hasBackdrop", "connectedPositions", "pushConnectedOverlay", "lockConnectedOverlayPosition", "scrollStrategy", "bareOverlayPanel"], outputs: ["openChange"] }, { kind: "component", type: MenuListBodyComponent, selector: "app-menu-list-body", inputs: ["appTheme", "items", "menuId", "dense", "nested", "selectedItemId", "compressText", "clickToOpen", "groupCollapsible", "groupDefaultExpansion", "persistGroupExpansion", "expandAllGroupsInitially"], outputs: ["selectionScrollHint", "itemSelect", "closeRequest", "submenuBack", "groupToggled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2192
2379
|
}
|
|
2193
2380
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownMenuComponent, decorators: [{
|
|
2194
2381
|
type: Component,
|
|
@@ -4963,7 +5150,7 @@ class SelectFieldComponent extends DropdownOptionFieldBase {
|
|
|
4963
5150
|
useExisting: forwardRef(() => SelectFieldComponent),
|
|
4964
5151
|
multi: true,
|
|
4965
5152
|
},
|
|
4966
|
-
], viewQueries: [{ propertyName: "optionsPanelTpl", first: true, predicate: ["optionsPanelTpl"], descendants: true, static: true }, { propertyName: "dropdownTriggerRootRef", first: true, predicate: ["dropdownFieldTriggerRoot"], descendants: true, read: ElementRef }, { propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [size]=\"size\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\"\n [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\"\n [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <div class=\"select-field__wrap\">\n <app-dropdown-base [open]=\"panelOpen\" [panelTemplate]=\"optionsPanelTpl\" [panelWidthPx]=\"panelOverlayWidth\"\n (openChange)=\"onDropdownOpenChange($event)\">\n <div #dropdownFieldTriggerRoot class=\"select-field__origin\" appDropdownTrigger\n (keydown)=\"onTriggerKeydown($event)\">\n <!-- `div` em vez de `<button>`: o texto do valor fica selecion\u00E1vel (copiar), como no combobox. -->\n <div\n #nativeInput\n role=\"combobox\"\n class=\"select-field__value-btn\"\n [class.select-field__value-btn--is-disabled]=\"disabled\"\n [id]=\"controlId\"\n [attr.name]=\"name || null\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.aria-disabled]=\"disabled ? true : null\"\n [attr.aria-readonly]=\"readonly && !disabled ? true : null\"\n [attr.aria-expanded]=\"panelOpen\"\n aria-haspopup=\"listbox\"\n [attr.aria-controls]=\"panelOpen ? optionsListId : null\"\n [attr.aria-invalid]=\"uiInvalid\"\n [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [attr.aria-label]=\"floatLabelCaption || placeholder || 'Selecionar'\"\n (click)=\"openToggle()\"\n (blur)=\"onDropdownBlur($event)\"\n >\n <span class=\"select-field__value\">{{ displayValue }}</span>\n </div>\n <button type=\"button\" class=\"select-field__chevron-btn\" tabindex=\"-1\" [disabled]=\"disabled || readonly\"\n [attr.aria-expanded]=\"panelOpen\" aria-haspopup=\"listbox\" aria-label=\"Abrir lista de op\u00E7\u00F5es\"\n (click)=\"openToggle()\" (blur)=\"onDropdownBlur($event)\">\n <i class=\"fa-solid fa-chevron-down select-field__chevron-icon\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </app-dropdown-base>\n </div>\n</app-base-field>\n\n<ng-template #optionsPanelTpl>\n <div class=\"select-field__list\" [id]=\"optionsListId\" role=\"listbox\" tabindex=\"-1\"\n (blur)=\"onDropdownBlur($event)\" (keydown)=\"onListKeydown($event)\" (scroll)=\"onOptionsListScroll($event)\">\n @if (listOptions.length === 0 && (optionsLoading || (pagination && loadingMore))) {\n <app-skeleton-list [rows]=\"8\" />\n }\n @for (opt of listOptions; track trackOption($index, opt)) {\n <div role=\"option\" class=\"select-field__option\" [class.select-field__option--disabled]=\"opt.disabled\"\n [class.select-field__option--selected]=\"isSelected(opt)\"\n [class.select-field__option--active]=\"!opt.disabled && activeIndex === $index\"\n [attr.tabindex]=\"opt.disabled ? null : -1\" [attr.aria-selected]=\"isSelected(opt)\" (click)=\"selectOption(opt)\"\n (keydown)=\"onOptionRowKeydown($event, opt)\">\n {{ opt.label }}\n </div>\n }\n @if (options.length > 0 && pagination && loadingMore) {\n <app-skeleton-list [rows]=\"1\" [leading]=\"false\" />\n }\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}:host ::ng-deep .base-field:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-float-border-focus);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring)}:host ::ng-deep .base-field--invalid:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}:host ::ng-deep .base-field.base-field--readonly:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-readonly-border-focus);box-shadow:0 0 0 3px var(--ui-field-readonly-focus-ring)}:host ::ng-deep .base-field.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.select-field__wrap{display:flex;flex:1;align-items:stretch;align-self:stretch;min-width:0;width:100%;box-sizing:border-box}.select-field__origin{display:flex;align-items:center;align-self:stretch;min-width:0;width:100%;min-height:calc(1.8rem + 1.35em);box-sizing:border-box}.select-field__value-btn{flex:1;min-width:0;margin:0;box-sizing:border-box;min-height:calc(1.8rem + 1.35em);padding:1.35rem .35rem .45rem .75rem;font-size:1rem;line-height:1.35;font-family:inherit;text-align:left;color:var(--ui-field-float-input-text);background:transparent;border:0;border-radius:0;box-shadow:none;cursor:pointer;display:flex;align-items:center;user-select:text;-webkit-user-select:text;-moz-user-select:text}.select-field__value-btn:focus,.select-field__value-btn:focus-visible{outline:none;box-shadow:none}.select-field__value-btn--is-disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity);pointer-events:none}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .select-field__value-btn:not(.select-field__value-btn--is-disabled){color:var(--ui-field-readonly-input-text);-webkit-text-fill-color:var(--ui-field-readonly-input-text)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .select-field__chevron-btn:disabled{opacity:1;cursor:default;color:var(--ui-field-readonly-prefix-color)}.select-field__value{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:text;-webkit-user-select:text;-moz-user-select:text}.select-field__chevron-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;align-self:center;box-sizing:border-box;width:2rem;height:2rem;margin:0 .1rem;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.select-field__chevron-btn:hover:not(:disabled){background:#5a7fa31f;color:var(--ui-field-float-label-top-color)}.select-field__chevron-btn:focus,.select-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.select-field__chevron-btn:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}:host.select-field--invalid .select-field__chevron-btn{color:var(--ui-field-float-label-invalid-color)}:host.select-field--invalid .select-field__chevron-btn .select-field__chevron-icon{color:inherit}:host.select-field--invalid .select-field__chevron-btn:hover:not(:disabled){background:#b91c1c1f}:host.select-field--invalid .select-field__chevron-btn:focus,:host.select-field--invalid .select-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.select-field__chevron-icon{display:inline-flex;align-items:center;justify-content:center;padding-top:2px;font-size:.8rem;line-height:1}.select-field__list{margin:0;padding:.25rem 0;width:100%;max-height:min(240px,50vh);box-sizing:border-box;list-style:none;outline:none;overflow-x:hidden;overflow-y:auto;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.select-field__loading{padding:.65rem .75rem;font-size:.85rem;line-height:1.35;color:var(--ui-field-float-label-color);text-align:center}.select-field__loading--footer{border-top:1px solid rgba(0,0,0,.06)}.select-field__option{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.45rem .75rem;font-size:.95rem;line-height:1.35;cursor:pointer;color:var(--ui-field-float-input-text)}.select-field__option--selected:not(.select-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg)}.select-field__option--active:not(.select-field__option--disabled):not(.select-field__option--selected){background:var(--app-color-dropdown-option-highlight-bg)}.select-field__option.select-field__option--active.select-field__option--selected:not(.select-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg-active)}.select-field__option--disabled{opacity:.45;cursor:not-allowed}.select-field__option:hover:not(.select-field__option--disabled):not(.select-field__option--selected){background:var(--app-color-dropdown-option-hover-bg)}.select-field__option.select-field__option--selected:hover:not(.select-field__option--disabled){background:var(--app-color-dropdown-option-selected-hover-bg)}\n"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "disabled", "readonly", "size", "inputId", "errorId", "showPrefixIcon", "prefixIcon", "clearable", "clearAriaLabel", "showSuffixSlot", "valueAlignEnd", "loading", "skeletonVariant", "mostrarMenuContexto", "contextMenuItems", "contextMenuId"], outputs: ["clear", "contextMenuSelect"] }, { kind: "component", type: DropdownBaseComponent, selector: "app-dropdown-base", inputs: ["open", "panelTemplate", "panelWidthPx", "closeOnEscape", "hasBackdrop", "connectedPositions", "pushConnectedOverlay", "scrollStrategy", "bareOverlayPanel"], outputs: ["openChange"] }, { kind: "component", type: SkeletonListComponent, selector: "app-skeleton-list", inputs: ["rows", "leading", "rowGap", "lineHeight", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5153
|
+
], viewQueries: [{ propertyName: "optionsPanelTpl", first: true, predicate: ["optionsPanelTpl"], descendants: true, static: true }, { propertyName: "dropdownTriggerRootRef", first: true, predicate: ["dropdownFieldTriggerRoot"], descendants: true, read: ElementRef }, { propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [size]=\"size\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\"\n [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\"\n [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <div class=\"select-field__wrap\">\n <app-dropdown-base [open]=\"panelOpen\" [panelTemplate]=\"optionsPanelTpl\" [panelWidthPx]=\"panelOverlayWidth\"\n (openChange)=\"onDropdownOpenChange($event)\">\n <div #dropdownFieldTriggerRoot class=\"select-field__origin\" appDropdownTrigger\n (keydown)=\"onTriggerKeydown($event)\">\n <!-- `div` em vez de `<button>`: o texto do valor fica selecion\u00E1vel (copiar), como no combobox. -->\n <div\n #nativeInput\n role=\"combobox\"\n class=\"select-field__value-btn\"\n [class.select-field__value-btn--is-disabled]=\"disabled\"\n [id]=\"controlId\"\n [attr.name]=\"name || null\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.aria-disabled]=\"disabled ? true : null\"\n [attr.aria-readonly]=\"readonly && !disabled ? true : null\"\n [attr.aria-expanded]=\"panelOpen\"\n aria-haspopup=\"listbox\"\n [attr.aria-controls]=\"panelOpen ? optionsListId : null\"\n [attr.aria-invalid]=\"uiInvalid\"\n [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [attr.aria-label]=\"floatLabelCaption || placeholder || 'Selecionar'\"\n (click)=\"openToggle()\"\n (blur)=\"onDropdownBlur($event)\"\n >\n <span class=\"select-field__value\">{{ displayValue }}</span>\n </div>\n <button type=\"button\" class=\"select-field__chevron-btn\" tabindex=\"-1\" [disabled]=\"disabled || readonly\"\n [attr.aria-expanded]=\"panelOpen\" aria-haspopup=\"listbox\" aria-label=\"Abrir lista de op\u00E7\u00F5es\"\n (click)=\"openToggle()\" (blur)=\"onDropdownBlur($event)\">\n <i class=\"fa-solid fa-chevron-down select-field__chevron-icon\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </app-dropdown-base>\n </div>\n</app-base-field>\n\n<ng-template #optionsPanelTpl>\n <div class=\"select-field__list\" [id]=\"optionsListId\" role=\"listbox\" tabindex=\"-1\"\n (blur)=\"onDropdownBlur($event)\" (keydown)=\"onListKeydown($event)\" (scroll)=\"onOptionsListScroll($event)\">\n @if (listOptions.length === 0 && (optionsLoading || (pagination && loadingMore))) {\n <app-skeleton-list [rows]=\"8\" />\n }\n @for (opt of listOptions; track trackOption($index, opt)) {\n <div role=\"option\" class=\"select-field__option\" [class.select-field__option--disabled]=\"opt.disabled\"\n [class.select-field__option--selected]=\"isSelected(opt)\"\n [class.select-field__option--active]=\"!opt.disabled && activeIndex === $index\"\n [attr.tabindex]=\"opt.disabled ? null : -1\" [attr.aria-selected]=\"isSelected(opt)\" (click)=\"selectOption(opt)\"\n (keydown)=\"onOptionRowKeydown($event, opt)\">\n {{ opt.label }}\n </div>\n }\n @if (options.length > 0 && pagination && loadingMore) {\n <app-skeleton-list [rows]=\"1\" [leading]=\"false\" />\n }\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}:host ::ng-deep .base-field:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-float-border-focus);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring)}:host ::ng-deep .base-field--invalid:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}:host ::ng-deep .base-field.base-field--readonly:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-readonly-border-focus);box-shadow:0 0 0 3px var(--ui-field-readonly-focus-ring)}:host ::ng-deep .base-field.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.select-field__wrap{display:flex;flex:1;align-items:stretch;align-self:stretch;min-width:0;width:100%;box-sizing:border-box}.select-field__origin{display:flex;align-items:center;align-self:stretch;min-width:0;width:100%;min-height:calc(1.8rem + 1.35em);box-sizing:border-box}.select-field__value-btn{flex:1;min-width:0;margin:0;box-sizing:border-box;min-height:calc(1.8rem + 1.35em);padding:1.35rem .35rem .45rem .75rem;font-size:1rem;line-height:1.35;font-family:inherit;text-align:left;color:var(--ui-field-float-input-text);background:transparent;border:0;border-radius:0;box-shadow:none;cursor:pointer;display:flex;align-items:center;user-select:text;-webkit-user-select:text;-moz-user-select:text}.select-field__value-btn:focus,.select-field__value-btn:focus-visible{outline:none;box-shadow:none}.select-field__value-btn--is-disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity);pointer-events:none}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .select-field__value-btn:not(.select-field__value-btn--is-disabled){color:var(--ui-field-readonly-input-text);-webkit-text-fill-color:var(--ui-field-readonly-input-text)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .select-field__chevron-btn:disabled{opacity:1;cursor:default;color:var(--ui-field-readonly-prefix-color)}.select-field__value{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:text;-webkit-user-select:text;-moz-user-select:text}.select-field__chevron-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;align-self:center;box-sizing:border-box;width:2rem;height:2rem;margin:0 .1rem;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.select-field__chevron-btn:hover:not(:disabled){background:#5a7fa31f;color:var(--ui-field-float-label-top-color)}.select-field__chevron-btn:focus,.select-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.select-field__chevron-btn:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}:host.select-field--invalid .select-field__chevron-btn{color:var(--ui-field-float-label-invalid-color)}:host.select-field--invalid .select-field__chevron-btn .select-field__chevron-icon{color:inherit}:host.select-field--invalid .select-field__chevron-btn:hover:not(:disabled){background:#b91c1c1f}:host.select-field--invalid .select-field__chevron-btn:focus,:host.select-field--invalid .select-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.select-field__chevron-icon{display:inline-flex;align-items:center;justify-content:center;padding-top:2px;font-size:.8rem;line-height:1}.select-field__list{margin:0;padding:.25rem 0;width:100%;max-height:min(240px,50vh);box-sizing:border-box;list-style:none;outline:none;overflow-x:hidden;overflow-y:auto;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.select-field__loading{padding:.65rem .75rem;font-size:.85rem;line-height:1.35;color:var(--ui-field-float-label-color);text-align:center}.select-field__loading--footer{border-top:1px solid rgba(0,0,0,.06)}.select-field__option{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.45rem .75rem;font-size:.95rem;line-height:1.35;cursor:pointer;color:var(--ui-field-float-input-text)}.select-field__option--selected:not(.select-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg)}.select-field__option--active:not(.select-field__option--disabled):not(.select-field__option--selected){background:var(--app-color-dropdown-option-highlight-bg)}.select-field__option.select-field__option--active.select-field__option--selected:not(.select-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg-active)}.select-field__option--disabled{opacity:.45;cursor:not-allowed}.select-field__option:hover:not(.select-field__option--disabled):not(.select-field__option--selected){background:var(--app-color-dropdown-option-hover-bg)}.select-field__option.select-field__option--selected:hover:not(.select-field__option--disabled){background:var(--app-color-dropdown-option-selected-hover-bg)}\n"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "disabled", "readonly", "size", "inputId", "errorId", "showPrefixIcon", "prefixIcon", "clearable", "clearAriaLabel", "showSuffixSlot", "valueAlignEnd", "loading", "skeletonVariant", "mostrarMenuContexto", "contextMenuItems", "contextMenuId"], outputs: ["clear", "contextMenuSelect"] }, { kind: "component", type: DropdownBaseComponent, selector: "app-dropdown-base", inputs: ["open", "panelTemplate", "panelWidthPx", "closeOnEscape", "hasBackdrop", "connectedPositions", "pushConnectedOverlay", "lockConnectedOverlayPosition", "scrollStrategy", "bareOverlayPanel"], outputs: ["openChange"] }, { kind: "component", type: SkeletonListComponent, selector: "app-skeleton-list", inputs: ["rows", "leading", "rowGap", "lineHeight", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4967
5154
|
}
|
|
4968
5155
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SelectFieldComponent, decorators: [{
|
|
4969
5156
|
type: Component,
|
|
@@ -5027,6 +5214,13 @@ class MultiselectFieldComponent extends DropdownMultiOptionFieldBase {
|
|
|
5027
5214
|
set pageableInput(value) {
|
|
5028
5215
|
this.pagination = value;
|
|
5029
5216
|
}
|
|
5217
|
+
/**
|
|
5218
|
+
* Sem hover primário (telemóvel): o CDK volta a avaliar encaixe quando a lista reordena e o painel
|
|
5219
|
+
* pode «saltar» por cima do campo — `lockPosition` mantém ancoragem ao fundo do gatilho.
|
|
5220
|
+
*/
|
|
5221
|
+
get lockOverlayWhileOpen() {
|
|
5222
|
+
return typeof matchMedia !== 'undefined' && !matchMedia('(hover: hover)').matches;
|
|
5223
|
+
}
|
|
5030
5224
|
ngAfterViewInit() {
|
|
5031
5225
|
this.applyAutofocusIfNeeded(() => this.nativeInputRef?.nativeElement);
|
|
5032
5226
|
}
|
|
@@ -5245,6 +5439,9 @@ class MultiselectFieldComponent extends DropdownMultiOptionFieldBase {
|
|
|
5245
5439
|
this.emitModelValue(cur);
|
|
5246
5440
|
this.finishMultiTouch();
|
|
5247
5441
|
this.cdr.markForCheck();
|
|
5442
|
+
if (this.panelOpen) {
|
|
5443
|
+
this.dropdownBase?.scheduleOverlayPositionSync();
|
|
5444
|
+
}
|
|
5248
5445
|
}
|
|
5249
5446
|
toggleActiveOption() {
|
|
5250
5447
|
const opt = this.listOptions[this.activeIndex];
|
|
@@ -5340,7 +5537,7 @@ class MultiselectFieldComponent extends DropdownMultiOptionFieldBase {
|
|
|
5340
5537
|
useExisting: forwardRef(() => MultiselectFieldComponent),
|
|
5341
5538
|
multi: true,
|
|
5342
5539
|
},
|
|
5343
|
-
], viewQueries: [{ propertyName: "optionsPanelTpl", first: true, predicate: ["optionsPanelTpl"], descendants: true, static: true }, { propertyName: "dropdownTriggerRootRef", first: true, predicate: ["dropdownFieldTriggerRoot"], descendants: true, read: ElementRef }, { propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [size]=\"size\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\"\n [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\"\n [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <div class=\"multiselect-field__wrap\">\n <app-dropdown-base [open]=\"panelOpen\" [panelTemplate]=\"optionsPanelTpl\" [panelWidthPx]=\"panelOverlayWidth\"\n (openChange)=\"onDropdownOpenChange($event)\">\n <div #dropdownFieldTriggerRoot class=\"multiselect-field__origin\" appDropdownTrigger\n (keydown)=\"onTriggerKeydown($event)\">\n <div\n #nativeInput\n role=\"combobox\"\n class=\"multiselect-field__value-btn\"\n [class.multiselect-field__value-btn--is-disabled]=\"disabled\"\n [id]=\"controlId\"\n [attr.name]=\"name || null\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.aria-disabled]=\"disabled ? true : null\"\n [attr.aria-readonly]=\"readonly && !disabled ? true : null\"\n [attr.aria-expanded]=\"panelOpen\"\n aria-haspopup=\"listbox\"\n [attr.aria-controls]=\"panelOpen ? optionsListId : null\"\n [attr.aria-invalid]=\"uiInvalid\"\n [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [attr.aria-label]=\"floatLabelCaption || placeholder || 'Selecionar v\u00E1rios'\"\n (click)=\"openToggle()\"\n (blur)=\"onDropdownBlur($event)\"\n >\n <span class=\"multiselect-field__value\">{{ displaySummary }}</span>\n </div>\n <button type=\"button\" class=\"multiselect-field__chevron-btn\" tabindex=\"-1\" [disabled]=\"disabled || readonly\"\n [attr.aria-expanded]=\"panelOpen\" aria-haspopup=\"listbox\" aria-label=\"Abrir lista de op\u00E7\u00F5es\"\n (click)=\"openToggle()\" (blur)=\"onDropdownBlur($event)\">\n <i class=\"fa-solid fa-chevron-down multiselect-field__chevron-icon\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </app-dropdown-base>\n </div>\n</app-base-field>\n\n<ng-template #optionsPanelTpl>\n <div class=\"multiselect-field__list\" [id]=\"optionsListId\" role=\"listbox\" tabindex=\"-1\" aria-multiselectable=\"true\"\n (mousedown)=\"$event.preventDefault()\"\n (blur)=\"onDropdownBlur($event)\" (keydown)=\"onListKeydown($event)\" (scroll)=\"onOptionsListScroll($event)\">\n @if (listOptions.length === 0 && (optionsLoading || (pagination && loadingMore))) {\n <app-skeleton-list [rows]=\"8\" />\n }\n @for (opt of listOptions; track trackOption($index, opt)) {\n <div role=\"option\" class=\"multiselect-field__option\" [class.multiselect-field__option--disabled]=\"opt.disabled\"\n [class.multiselect-field__option--selected]=\"isSelected(opt)\"\n [class.multiselect-field__option--active]=\"!opt.disabled && activeIndex === $index\"\n [attr.tabindex]=\"opt.disabled ? null : -1\" [attr.aria-selected]=\"isSelected(opt)\" (click)=\"toggleOption(opt)\"\n (keydown)=\"onOptionRowKeydown($event, opt)\">\n <span class=\"multiselect-field__check\" aria-hidden=\"true\">\n @if (isSelected(opt)) {\n <i class=\"fa-solid fa-check multiselect-field__check-icon\"></i>\n }\n </span>\n <span class=\"multiselect-field__option-label\">{{ opt.label }}</span>\n </div>\n }\n @if (options.length > 0 && pagination && loadingMore) {\n <app-skeleton-list [rows]=\"1\" [leading]=\"false\" />\n }\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}:host ::ng-deep .base-field:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-float-border-focus);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring)}:host ::ng-deep .base-field--invalid:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}:host ::ng-deep .base-field.base-field--readonly:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-readonly-border-focus);box-shadow:0 0 0 3px var(--ui-field-readonly-focus-ring)}:host ::ng-deep .base-field.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.multiselect-field__wrap{display:flex;flex:1;align-items:stretch;align-self:stretch;min-width:0;width:100%;box-sizing:border-box}.multiselect-field__origin{display:flex;align-items:center;align-self:stretch;min-width:0;width:100%;min-height:calc(1.8rem + 1.35em);box-sizing:border-box}.multiselect-field__value-btn{flex:1;min-width:0;margin:0;box-sizing:border-box;min-height:calc(1.8rem + 1.35em);padding:1.35rem .35rem .45rem .75rem;font-size:1rem;line-height:1.35;font-family:inherit;text-align:left;color:var(--ui-field-float-input-text);background:transparent;border:0;border-radius:0;box-shadow:none;cursor:pointer;display:flex;align-items:center;user-select:text;-webkit-user-select:text;-moz-user-select:text}.multiselect-field__value-btn:focus,.multiselect-field__value-btn:focus-visible{outline:none;box-shadow:none}.multiselect-field__value-btn--is-disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity);pointer-events:none}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .multiselect-field__value-btn:not(.multiselect-field__value-btn--is-disabled){color:var(--ui-field-readonly-input-text);-webkit-text-fill-color:var(--ui-field-readonly-input-text)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .multiselect-field__chevron-btn:disabled{opacity:1;cursor:default;color:var(--ui-field-readonly-prefix-color)}.multiselect-field__value{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:text;-webkit-user-select:text;-moz-user-select:text}.multiselect-field__chevron-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;align-self:center;box-sizing:border-box;width:2rem;height:2rem;margin:0 .1rem;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.multiselect-field__chevron-btn:hover:not(:disabled){background:#5a7fa31f;color:var(--ui-field-float-label-top-color)}.multiselect-field__chevron-btn:focus,.multiselect-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.multiselect-field__chevron-btn:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}:host.multiselect-field--invalid .multiselect-field__chevron-btn{color:var(--ui-field-float-label-invalid-color)}:host.multiselect-field--invalid .multiselect-field__chevron-btn .multiselect-field__chevron-icon{color:inherit}:host.multiselect-field--invalid .multiselect-field__chevron-btn:hover:not(:disabled){background:#b91c1c1f}:host.multiselect-field--invalid .multiselect-field__chevron-btn:focus,:host.multiselect-field--invalid .multiselect-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.multiselect-field__chevron-icon{display:inline-flex;align-items:center;justify-content:center;padding-top:2px;font-size:.8rem;line-height:1}.multiselect-field__list{margin:0;padding:.25rem 0;width:100%;max-height:min(240px,50vh);box-sizing:border-box;list-style:none;outline:none;overflow-x:hidden;overflow-y:auto;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.multiselect-field__loading{padding:.65rem .75rem;font-size:.85rem;line-height:1.35;color:var(--ui-field-float-label-color);text-align:center}.multiselect-field__loading--footer{border-top:1px solid rgba(0,0,0,.06)}.multiselect-field__option{display:flex;align-items:center;gap:.5rem;padding:.45rem .75rem;font-size:.95rem;line-height:1.35;cursor:pointer;color:var(--ui-field-float-input-text)}.multiselect-field__option--selected:not(.multiselect-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg)}.multiselect-field__option--active:not(.multiselect-field__option--disabled):not(.multiselect-field__option--selected){background:var(--app-color-dropdown-option-highlight-bg)}.multiselect-field__option.multiselect-field__option--active.multiselect-field__option--selected:not(.multiselect-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg-active)}.multiselect-field__option--disabled{opacity:.45;cursor:not-allowed}.multiselect-field__option:hover:not(.multiselect-field__option--disabled):not(.multiselect-field__option--selected){background:var(--app-color-dropdown-option-hover-bg)}.multiselect-field__option.multiselect-field__option--selected:hover:not(.multiselect-field__option--disabled){background:var(--app-color-dropdown-option-selected-hover-bg)}.multiselect-field__check{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem}.multiselect-field__check-icon{font-size:.85rem;line-height:1;color:var(--ui-field-float-border-focus)}.multiselect-field__option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}\n"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "disabled", "readonly", "size", "inputId", "errorId", "showPrefixIcon", "prefixIcon", "clearable", "clearAriaLabel", "showSuffixSlot", "valueAlignEnd", "loading", "skeletonVariant", "mostrarMenuContexto", "contextMenuItems", "contextMenuId"], outputs: ["clear", "contextMenuSelect"] }, { kind: "component", type: DropdownBaseComponent, selector: "app-dropdown-base", inputs: ["open", "panelTemplate", "panelWidthPx", "closeOnEscape", "hasBackdrop", "connectedPositions", "pushConnectedOverlay", "scrollStrategy", "bareOverlayPanel"], outputs: ["openChange"] }, { kind: "component", type: SkeletonListComponent, selector: "app-skeleton-list", inputs: ["rows", "leading", "rowGap", "lineHeight", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5540
|
+
], viewQueries: [{ propertyName: "optionsPanelTpl", first: true, predicate: ["optionsPanelTpl"], descendants: true, static: true }, { propertyName: "dropdownTriggerRootRef", first: true, predicate: ["dropdownFieldTriggerRoot"], descendants: true, read: ElementRef }, { propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }, { propertyName: "dropdownBase", first: true, predicate: DropdownBaseComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [size]=\"size\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\"\n [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\"\n [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <div class=\"multiselect-field__wrap\">\n <app-dropdown-base [open]=\"panelOpen\" [panelTemplate]=\"optionsPanelTpl\" [panelWidthPx]=\"panelOverlayWidth\"\n [lockConnectedOverlayPosition]=\"lockOverlayWhileOpen\"\n (openChange)=\"onDropdownOpenChange($event)\">\n <div #dropdownFieldTriggerRoot class=\"multiselect-field__origin\" appDropdownTrigger\n (keydown)=\"onTriggerKeydown($event)\">\n <div\n #nativeInput\n role=\"combobox\"\n class=\"multiselect-field__value-btn\"\n [class.multiselect-field__value-btn--is-disabled]=\"disabled\"\n [id]=\"controlId\"\n [attr.name]=\"name || null\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.aria-disabled]=\"disabled ? true : null\"\n [attr.aria-readonly]=\"readonly && !disabled ? true : null\"\n [attr.aria-expanded]=\"panelOpen\"\n aria-haspopup=\"listbox\"\n [attr.aria-controls]=\"panelOpen ? optionsListId : null\"\n [attr.aria-invalid]=\"uiInvalid\"\n [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [attr.aria-label]=\"floatLabelCaption || placeholder || 'Selecionar v\u00E1rios'\"\n (click)=\"openToggle()\"\n (blur)=\"onDropdownBlur($event)\"\n >\n <span class=\"multiselect-field__value\">{{ displaySummary }}</span>\n </div>\n <button type=\"button\" class=\"multiselect-field__chevron-btn\" tabindex=\"-1\" [disabled]=\"disabled || readonly\"\n [attr.aria-expanded]=\"panelOpen\" aria-haspopup=\"listbox\" aria-label=\"Abrir lista de op\u00E7\u00F5es\"\n (click)=\"openToggle()\" (blur)=\"onDropdownBlur($event)\">\n <i class=\"fa-solid fa-chevron-down multiselect-field__chevron-icon\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </app-dropdown-base>\n </div>\n</app-base-field>\n\n<ng-template #optionsPanelTpl>\n <div class=\"multiselect-field__list\" [id]=\"optionsListId\" role=\"listbox\" tabindex=\"-1\" aria-multiselectable=\"true\"\n (mousedown)=\"$event.preventDefault()\"\n (blur)=\"onDropdownBlur($event)\" (keydown)=\"onListKeydown($event)\" (scroll)=\"onOptionsListScroll($event)\">\n @if (listOptions.length === 0 && (optionsLoading || (pagination && loadingMore))) {\n <app-skeleton-list [rows]=\"8\" />\n }\n @for (opt of listOptions; track trackOption($index, opt)) {\n <div role=\"option\" class=\"multiselect-field__option\" [class.multiselect-field__option--disabled]=\"opt.disabled\"\n [class.multiselect-field__option--selected]=\"isSelected(opt)\"\n [class.multiselect-field__option--active]=\"!opt.disabled && activeIndex === $index\"\n [attr.tabindex]=\"opt.disabled ? null : -1\" [attr.aria-selected]=\"isSelected(opt)\" (click)=\"toggleOption(opt)\"\n (keydown)=\"onOptionRowKeydown($event, opt)\">\n <span class=\"multiselect-field__check\" aria-hidden=\"true\">\n @if (isSelected(opt)) {\n <i class=\"fa-solid fa-check multiselect-field__check-icon\"></i>\n }\n </span>\n <span class=\"multiselect-field__option-label\">{{ opt.label }}</span>\n </div>\n }\n @if (options.length > 0 && pagination && loadingMore) {\n <app-skeleton-list [rows]=\"1\" [leading]=\"false\" />\n }\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}:host ::ng-deep .base-field:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-float-border-focus);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring)}:host ::ng-deep .base-field--invalid:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}:host ::ng-deep .base-field.base-field--readonly:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-readonly-border-focus);box-shadow:0 0 0 3px var(--ui-field-readonly-focus-ring)}:host ::ng-deep .base-field.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.multiselect-field__wrap{display:flex;flex:1;align-items:stretch;align-self:stretch;min-width:0;width:100%;box-sizing:border-box}.multiselect-field__origin{display:flex;align-items:center;align-self:stretch;min-width:0;width:100%;min-height:calc(1.8rem + 1.35em);box-sizing:border-box}.multiselect-field__value-btn{flex:1;min-width:0;margin:0;box-sizing:border-box;min-height:calc(1.8rem + 1.35em);padding:1.35rem .35rem .45rem .75rem;font-size:1rem;line-height:1.35;font-family:inherit;text-align:left;color:var(--ui-field-float-input-text);background:transparent;border:0;border-radius:0;box-shadow:none;cursor:pointer;display:flex;align-items:center;user-select:text;-webkit-user-select:text;-moz-user-select:text}.multiselect-field__value-btn:focus,.multiselect-field__value-btn:focus-visible{outline:none;box-shadow:none}.multiselect-field__value-btn--is-disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity);pointer-events:none}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .multiselect-field__value-btn:not(.multiselect-field__value-btn--is-disabled){color:var(--ui-field-readonly-input-text);-webkit-text-fill-color:var(--ui-field-readonly-input-text)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .multiselect-field__chevron-btn:disabled{opacity:1;cursor:default;color:var(--ui-field-readonly-prefix-color)}.multiselect-field__value{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:text;-webkit-user-select:text;-moz-user-select:text}.multiselect-field__chevron-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;align-self:center;box-sizing:border-box;width:2rem;height:2rem;margin:0 .1rem;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.multiselect-field__chevron-btn:hover:not(:disabled){background:#5a7fa31f;color:var(--ui-field-float-label-top-color)}.multiselect-field__chevron-btn:focus,.multiselect-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.multiselect-field__chevron-btn:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}:host.multiselect-field--invalid .multiselect-field__chevron-btn{color:var(--ui-field-float-label-invalid-color)}:host.multiselect-field--invalid .multiselect-field__chevron-btn .multiselect-field__chevron-icon{color:inherit}:host.multiselect-field--invalid .multiselect-field__chevron-btn:hover:not(:disabled){background:#b91c1c1f}:host.multiselect-field--invalid .multiselect-field__chevron-btn:focus,:host.multiselect-field--invalid .multiselect-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.multiselect-field__chevron-icon{display:inline-flex;align-items:center;justify-content:center;padding-top:2px;font-size:.8rem;line-height:1}.multiselect-field__list{margin:0;padding:.25rem 0;width:100%;max-height:min(240px,50vh);box-sizing:border-box;list-style:none;outline:none;overflow-x:hidden;overflow-y:auto;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.multiselect-field__loading{padding:.65rem .75rem;font-size:.85rem;line-height:1.35;color:var(--ui-field-float-label-color);text-align:center}.multiselect-field__loading--footer{border-top:1px solid rgba(0,0,0,.06)}.multiselect-field__option{display:flex;align-items:center;gap:.5rem;padding:.45rem .75rem;font-size:.95rem;line-height:1.35;cursor:pointer;color:var(--ui-field-float-input-text)}.multiselect-field__option--selected:not(.multiselect-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg)}.multiselect-field__option--active:not(.multiselect-field__option--disabled):not(.multiselect-field__option--selected){background:var(--app-color-dropdown-option-highlight-bg)}.multiselect-field__option.multiselect-field__option--active.multiselect-field__option--selected:not(.multiselect-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg-active)}.multiselect-field__option--disabled{opacity:.45;cursor:not-allowed}.multiselect-field__option:hover:not(.multiselect-field__option--disabled):not(.multiselect-field__option--selected){background:var(--app-color-dropdown-option-hover-bg)}.multiselect-field__option.multiselect-field__option--selected:hover:not(.multiselect-field__option--disabled){background:var(--app-color-dropdown-option-selected-hover-bg)}.multiselect-field__check{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem}.multiselect-field__check-icon{font-size:.85rem;line-height:1;color:var(--ui-field-float-border-focus)}.multiselect-field__option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}\n"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "disabled", "readonly", "size", "inputId", "errorId", "showPrefixIcon", "prefixIcon", "clearable", "clearAriaLabel", "showSuffixSlot", "valueAlignEnd", "loading", "skeletonVariant", "mostrarMenuContexto", "contextMenuItems", "contextMenuId"], outputs: ["clear", "contextMenuSelect"] }, { kind: "component", type: DropdownBaseComponent, selector: "app-dropdown-base", inputs: ["open", "panelTemplate", "panelWidthPx", "closeOnEscape", "hasBackdrop", "connectedPositions", "pushConnectedOverlay", "lockConnectedOverlayPosition", "scrollStrategy", "bareOverlayPanel"], outputs: ["openChange"] }, { kind: "component", type: SkeletonListComponent, selector: "app-skeleton-list", inputs: ["rows", "leading", "rowGap", "lineHeight", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5344
5541
|
}
|
|
5345
5542
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MultiselectFieldComponent, decorators: [{
|
|
5346
5543
|
type: Component,
|
|
@@ -5350,7 +5547,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
5350
5547
|
useExisting: forwardRef(() => MultiselectFieldComponent),
|
|
5351
5548
|
multi: true,
|
|
5352
5549
|
},
|
|
5353
|
-
], template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [size]=\"size\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\"\n [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\"\n [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <div class=\"multiselect-field__wrap\">\n <app-dropdown-base [open]=\"panelOpen\" [panelTemplate]=\"optionsPanelTpl\" [panelWidthPx]=\"panelOverlayWidth\"\n (openChange)=\"onDropdownOpenChange($event)\">\n <div #dropdownFieldTriggerRoot class=\"multiselect-field__origin\" appDropdownTrigger\n (keydown)=\"onTriggerKeydown($event)\">\n <div\n #nativeInput\n role=\"combobox\"\n class=\"multiselect-field__value-btn\"\n [class.multiselect-field__value-btn--is-disabled]=\"disabled\"\n [id]=\"controlId\"\n [attr.name]=\"name || null\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.aria-disabled]=\"disabled ? true : null\"\n [attr.aria-readonly]=\"readonly && !disabled ? true : null\"\n [attr.aria-expanded]=\"panelOpen\"\n aria-haspopup=\"listbox\"\n [attr.aria-controls]=\"panelOpen ? optionsListId : null\"\n [attr.aria-invalid]=\"uiInvalid\"\n [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [attr.aria-label]=\"floatLabelCaption || placeholder || 'Selecionar v\u00E1rios'\"\n (click)=\"openToggle()\"\n (blur)=\"onDropdownBlur($event)\"\n >\n <span class=\"multiselect-field__value\">{{ displaySummary }}</span>\n </div>\n <button type=\"button\" class=\"multiselect-field__chevron-btn\" tabindex=\"-1\" [disabled]=\"disabled || readonly\"\n [attr.aria-expanded]=\"panelOpen\" aria-haspopup=\"listbox\" aria-label=\"Abrir lista de op\u00E7\u00F5es\"\n (click)=\"openToggle()\" (blur)=\"onDropdownBlur($event)\">\n <i class=\"fa-solid fa-chevron-down multiselect-field__chevron-icon\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </app-dropdown-base>\n </div>\n</app-base-field>\n\n<ng-template #optionsPanelTpl>\n <div class=\"multiselect-field__list\" [id]=\"optionsListId\" role=\"listbox\" tabindex=\"-1\" aria-multiselectable=\"true\"\n (mousedown)=\"$event.preventDefault()\"\n (blur)=\"onDropdownBlur($event)\" (keydown)=\"onListKeydown($event)\" (scroll)=\"onOptionsListScroll($event)\">\n @if (listOptions.length === 0 && (optionsLoading || (pagination && loadingMore))) {\n <app-skeleton-list [rows]=\"8\" />\n }\n @for (opt of listOptions; track trackOption($index, opt)) {\n <div role=\"option\" class=\"multiselect-field__option\" [class.multiselect-field__option--disabled]=\"opt.disabled\"\n [class.multiselect-field__option--selected]=\"isSelected(opt)\"\n [class.multiselect-field__option--active]=\"!opt.disabled && activeIndex === $index\"\n [attr.tabindex]=\"opt.disabled ? null : -1\" [attr.aria-selected]=\"isSelected(opt)\" (click)=\"toggleOption(opt)\"\n (keydown)=\"onOptionRowKeydown($event, opt)\">\n <span class=\"multiselect-field__check\" aria-hidden=\"true\">\n @if (isSelected(opt)) {\n <i class=\"fa-solid fa-check multiselect-field__check-icon\"></i>\n }\n </span>\n <span class=\"multiselect-field__option-label\">{{ opt.label }}</span>\n </div>\n }\n @if (options.length > 0 && pagination && loadingMore) {\n <app-skeleton-list [rows]=\"1\" [leading]=\"false\" />\n }\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}:host ::ng-deep .base-field:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-float-border-focus);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring)}:host ::ng-deep .base-field--invalid:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}:host ::ng-deep .base-field.base-field--readonly:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-readonly-border-focus);box-shadow:0 0 0 3px var(--ui-field-readonly-focus-ring)}:host ::ng-deep .base-field.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.multiselect-field__wrap{display:flex;flex:1;align-items:stretch;align-self:stretch;min-width:0;width:100%;box-sizing:border-box}.multiselect-field__origin{display:flex;align-items:center;align-self:stretch;min-width:0;width:100%;min-height:calc(1.8rem + 1.35em);box-sizing:border-box}.multiselect-field__value-btn{flex:1;min-width:0;margin:0;box-sizing:border-box;min-height:calc(1.8rem + 1.35em);padding:1.35rem .35rem .45rem .75rem;font-size:1rem;line-height:1.35;font-family:inherit;text-align:left;color:var(--ui-field-float-input-text);background:transparent;border:0;border-radius:0;box-shadow:none;cursor:pointer;display:flex;align-items:center;user-select:text;-webkit-user-select:text;-moz-user-select:text}.multiselect-field__value-btn:focus,.multiselect-field__value-btn:focus-visible{outline:none;box-shadow:none}.multiselect-field__value-btn--is-disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity);pointer-events:none}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .multiselect-field__value-btn:not(.multiselect-field__value-btn--is-disabled){color:var(--ui-field-readonly-input-text);-webkit-text-fill-color:var(--ui-field-readonly-input-text)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .multiselect-field__chevron-btn:disabled{opacity:1;cursor:default;color:var(--ui-field-readonly-prefix-color)}.multiselect-field__value{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:text;-webkit-user-select:text;-moz-user-select:text}.multiselect-field__chevron-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;align-self:center;box-sizing:border-box;width:2rem;height:2rem;margin:0 .1rem;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.multiselect-field__chevron-btn:hover:not(:disabled){background:#5a7fa31f;color:var(--ui-field-float-label-top-color)}.multiselect-field__chevron-btn:focus,.multiselect-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.multiselect-field__chevron-btn:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}:host.multiselect-field--invalid .multiselect-field__chevron-btn{color:var(--ui-field-float-label-invalid-color)}:host.multiselect-field--invalid .multiselect-field__chevron-btn .multiselect-field__chevron-icon{color:inherit}:host.multiselect-field--invalid .multiselect-field__chevron-btn:hover:not(:disabled){background:#b91c1c1f}:host.multiselect-field--invalid .multiselect-field__chevron-btn:focus,:host.multiselect-field--invalid .multiselect-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.multiselect-field__chevron-icon{display:inline-flex;align-items:center;justify-content:center;padding-top:2px;font-size:.8rem;line-height:1}.multiselect-field__list{margin:0;padding:.25rem 0;width:100%;max-height:min(240px,50vh);box-sizing:border-box;list-style:none;outline:none;overflow-x:hidden;overflow-y:auto;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.multiselect-field__loading{padding:.65rem .75rem;font-size:.85rem;line-height:1.35;color:var(--ui-field-float-label-color);text-align:center}.multiselect-field__loading--footer{border-top:1px solid rgba(0,0,0,.06)}.multiselect-field__option{display:flex;align-items:center;gap:.5rem;padding:.45rem .75rem;font-size:.95rem;line-height:1.35;cursor:pointer;color:var(--ui-field-float-input-text)}.multiselect-field__option--selected:not(.multiselect-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg)}.multiselect-field__option--active:not(.multiselect-field__option--disabled):not(.multiselect-field__option--selected){background:var(--app-color-dropdown-option-highlight-bg)}.multiselect-field__option.multiselect-field__option--active.multiselect-field__option--selected:not(.multiselect-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg-active)}.multiselect-field__option--disabled{opacity:.45;cursor:not-allowed}.multiselect-field__option:hover:not(.multiselect-field__option--disabled):not(.multiselect-field__option--selected){background:var(--app-color-dropdown-option-hover-bg)}.multiselect-field__option.multiselect-field__option--selected:hover:not(.multiselect-field__option--disabled){background:var(--app-color-dropdown-option-selected-hover-bg)}.multiselect-field__check{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem}.multiselect-field__check-icon{font-size:.85rem;line-height:1;color:var(--ui-field-float-border-focus)}.multiselect-field__option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}\n"] }]
|
|
5550
|
+
], template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [size]=\"size\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\"\n [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\"\n [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <div class=\"multiselect-field__wrap\">\n <app-dropdown-base [open]=\"panelOpen\" [panelTemplate]=\"optionsPanelTpl\" [panelWidthPx]=\"panelOverlayWidth\"\n [lockConnectedOverlayPosition]=\"lockOverlayWhileOpen\"\n (openChange)=\"onDropdownOpenChange($event)\">\n <div #dropdownFieldTriggerRoot class=\"multiselect-field__origin\" appDropdownTrigger\n (keydown)=\"onTriggerKeydown($event)\">\n <div\n #nativeInput\n role=\"combobox\"\n class=\"multiselect-field__value-btn\"\n [class.multiselect-field__value-btn--is-disabled]=\"disabled\"\n [id]=\"controlId\"\n [attr.name]=\"name || null\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.aria-disabled]=\"disabled ? true : null\"\n [attr.aria-readonly]=\"readonly && !disabled ? true : null\"\n [attr.aria-expanded]=\"panelOpen\"\n aria-haspopup=\"listbox\"\n [attr.aria-controls]=\"panelOpen ? optionsListId : null\"\n [attr.aria-invalid]=\"uiInvalid\"\n [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [attr.aria-label]=\"floatLabelCaption || placeholder || 'Selecionar v\u00E1rios'\"\n (click)=\"openToggle()\"\n (blur)=\"onDropdownBlur($event)\"\n >\n <span class=\"multiselect-field__value\">{{ displaySummary }}</span>\n </div>\n <button type=\"button\" class=\"multiselect-field__chevron-btn\" tabindex=\"-1\" [disabled]=\"disabled || readonly\"\n [attr.aria-expanded]=\"panelOpen\" aria-haspopup=\"listbox\" aria-label=\"Abrir lista de op\u00E7\u00F5es\"\n (click)=\"openToggle()\" (blur)=\"onDropdownBlur($event)\">\n <i class=\"fa-solid fa-chevron-down multiselect-field__chevron-icon\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </app-dropdown-base>\n </div>\n</app-base-field>\n\n<ng-template #optionsPanelTpl>\n <div class=\"multiselect-field__list\" [id]=\"optionsListId\" role=\"listbox\" tabindex=\"-1\" aria-multiselectable=\"true\"\n (mousedown)=\"$event.preventDefault()\"\n (blur)=\"onDropdownBlur($event)\" (keydown)=\"onListKeydown($event)\" (scroll)=\"onOptionsListScroll($event)\">\n @if (listOptions.length === 0 && (optionsLoading || (pagination && loadingMore))) {\n <app-skeleton-list [rows]=\"8\" />\n }\n @for (opt of listOptions; track trackOption($index, opt)) {\n <div role=\"option\" class=\"multiselect-field__option\" [class.multiselect-field__option--disabled]=\"opt.disabled\"\n [class.multiselect-field__option--selected]=\"isSelected(opt)\"\n [class.multiselect-field__option--active]=\"!opt.disabled && activeIndex === $index\"\n [attr.tabindex]=\"opt.disabled ? null : -1\" [attr.aria-selected]=\"isSelected(opt)\" (click)=\"toggleOption(opt)\"\n (keydown)=\"onOptionRowKeydown($event, opt)\">\n <span class=\"multiselect-field__check\" aria-hidden=\"true\">\n @if (isSelected(opt)) {\n <i class=\"fa-solid fa-check multiselect-field__check-icon\"></i>\n }\n </span>\n <span class=\"multiselect-field__option-label\">{{ opt.label }}</span>\n </div>\n }\n @if (options.length > 0 && pagination && loadingMore) {\n <app-skeleton-list [rows]=\"1\" [leading]=\"false\" />\n }\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}:host ::ng-deep .base-field:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-float-border-focus);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring)}:host ::ng-deep .base-field--invalid:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}:host ::ng-deep .base-field.base-field--readonly:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-readonly-border-focus);box-shadow:0 0 0 3px var(--ui-field-readonly-focus-ring)}:host ::ng-deep .base-field.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.multiselect-field__wrap{display:flex;flex:1;align-items:stretch;align-self:stretch;min-width:0;width:100%;box-sizing:border-box}.multiselect-field__origin{display:flex;align-items:center;align-self:stretch;min-width:0;width:100%;min-height:calc(1.8rem + 1.35em);box-sizing:border-box}.multiselect-field__value-btn{flex:1;min-width:0;margin:0;box-sizing:border-box;min-height:calc(1.8rem + 1.35em);padding:1.35rem .35rem .45rem .75rem;font-size:1rem;line-height:1.35;font-family:inherit;text-align:left;color:var(--ui-field-float-input-text);background:transparent;border:0;border-radius:0;box-shadow:none;cursor:pointer;display:flex;align-items:center;user-select:text;-webkit-user-select:text;-moz-user-select:text}.multiselect-field__value-btn:focus,.multiselect-field__value-btn:focus-visible{outline:none;box-shadow:none}.multiselect-field__value-btn--is-disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity);pointer-events:none}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .multiselect-field__value-btn:not(.multiselect-field__value-btn--is-disabled){color:var(--ui-field-readonly-input-text);-webkit-text-fill-color:var(--ui-field-readonly-input-text)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .multiselect-field__chevron-btn:disabled{opacity:1;cursor:default;color:var(--ui-field-readonly-prefix-color)}.multiselect-field__value{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:text;-webkit-user-select:text;-moz-user-select:text}.multiselect-field__chevron-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;align-self:center;box-sizing:border-box;width:2rem;height:2rem;margin:0 .1rem;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.multiselect-field__chevron-btn:hover:not(:disabled){background:#5a7fa31f;color:var(--ui-field-float-label-top-color)}.multiselect-field__chevron-btn:focus,.multiselect-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.multiselect-field__chevron-btn:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}:host.multiselect-field--invalid .multiselect-field__chevron-btn{color:var(--ui-field-float-label-invalid-color)}:host.multiselect-field--invalid .multiselect-field__chevron-btn .multiselect-field__chevron-icon{color:inherit}:host.multiselect-field--invalid .multiselect-field__chevron-btn:hover:not(:disabled){background:#b91c1c1f}:host.multiselect-field--invalid .multiselect-field__chevron-btn:focus,:host.multiselect-field--invalid .multiselect-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.multiselect-field__chevron-icon{display:inline-flex;align-items:center;justify-content:center;padding-top:2px;font-size:.8rem;line-height:1}.multiselect-field__list{margin:0;padding:.25rem 0;width:100%;max-height:min(240px,50vh);box-sizing:border-box;list-style:none;outline:none;overflow-x:hidden;overflow-y:auto;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.multiselect-field__loading{padding:.65rem .75rem;font-size:.85rem;line-height:1.35;color:var(--ui-field-float-label-color);text-align:center}.multiselect-field__loading--footer{border-top:1px solid rgba(0,0,0,.06)}.multiselect-field__option{display:flex;align-items:center;gap:.5rem;padding:.45rem .75rem;font-size:.95rem;line-height:1.35;cursor:pointer;color:var(--ui-field-float-input-text)}.multiselect-field__option--selected:not(.multiselect-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg)}.multiselect-field__option--active:not(.multiselect-field__option--disabled):not(.multiselect-field__option--selected){background:var(--app-color-dropdown-option-highlight-bg)}.multiselect-field__option.multiselect-field__option--active.multiselect-field__option--selected:not(.multiselect-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg-active)}.multiselect-field__option--disabled{opacity:.45;cursor:not-allowed}.multiselect-field__option:hover:not(.multiselect-field__option--disabled):not(.multiselect-field__option--selected){background:var(--app-color-dropdown-option-hover-bg)}.multiselect-field__option.multiselect-field__option--selected:hover:not(.multiselect-field__option--disabled){background:var(--app-color-dropdown-option-selected-hover-bg)}.multiselect-field__check{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem}.multiselect-field__check-icon{font-size:.85rem;line-height:1;color:var(--ui-field-float-border-focus)}.multiselect-field__option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}\n"] }]
|
|
5354
5551
|
}], propDecorators: { hostInvalidClass: [{
|
|
5355
5552
|
type: HostBinding,
|
|
5356
5553
|
args: ['class.multiselect-field--invalid']
|
|
@@ -5378,6 +5575,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
5378
5575
|
}], nativeInputRef: [{
|
|
5379
5576
|
type: ViewChild,
|
|
5380
5577
|
args: ['nativeInput', { read: ElementRef }]
|
|
5578
|
+
}], dropdownBase: [{
|
|
5579
|
+
type: ViewChild,
|
|
5580
|
+
args: [DropdownBaseComponent]
|
|
5381
5581
|
}], onDropdownHostEscape: [{
|
|
5382
5582
|
type: HostListener,
|
|
5383
5583
|
args: ['keydown', ['$event']]
|
|
@@ -5445,6 +5645,13 @@ class DropdownSearchFieldComponent extends DropdownOptionFieldBase {
|
|
|
5445
5645
|
}
|
|
5446
5646
|
return this.readonly || this.isLockedSelectionDisplay;
|
|
5447
5647
|
}
|
|
5648
|
+
/**
|
|
5649
|
+
* Paginação / API pode devolver o mesmo `value` em mais do que uma linha — `track` só por valor
|
|
5650
|
+
* duplica chaves (aviso NG0955). O índice na vista torna a chave única sem alterar select/multiselect.
|
|
5651
|
+
*/
|
|
5652
|
+
trackOption(index, opt) {
|
|
5653
|
+
return `${index}:${String(opt.value)}`;
|
|
5654
|
+
}
|
|
5448
5655
|
ngOnChanges(changes) {
|
|
5449
5656
|
super.ngOnChanges(changes);
|
|
5450
5657
|
if (!this.panelOpen || this.loadingMore) {
|
|
@@ -5861,7 +6068,7 @@ class DropdownSearchFieldComponent extends DropdownOptionFieldBase {
|
|
|
5861
6068
|
useExisting: forwardRef(() => DropdownSearchFieldComponent),
|
|
5862
6069
|
multi: true,
|
|
5863
6070
|
},
|
|
5864
|
-
], viewQueries: [{ propertyName: "optionsPanelTpl", first: true, predicate: ["optionsPanelTpl"], descendants: true, static: true }, { propertyName: "dropdownTriggerRootRef", first: true, predicate: ["dropdownFieldTriggerRoot"], descendants: true, read: ElementRef }, { propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [size]=\"size\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\"\n [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\"\n [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <div class=\"dropdown-search-field__wrap\">\n <app-dropdown-base [open]=\"panelOpen\" [panelTemplate]=\"optionsPanelTpl\" [panelWidthPx]=\"panelOverlayWidth\"\n (openChange)=\"onDropdownOpenChange($event)\">\n <div #dropdownFieldTriggerRoot class=\"dropdown-search-field__origin\" appDropdownTrigger\n (keydown)=\"onTriggerKeydown($event)\">\n <input #nativeInput type=\"text\" class=\"dropdown-search-field__input\"\n [class.dropdown-search-field__input--locked]=\"isLockedSelectionDisplay\" [id]=\"controlId\"\n [attr.name]=\"name || null\" [disabled]=\"disabled\" [readonly]=\"isNativeInputReadonly\" [attr.placeholder]=\"''\"\n autocomplete=\"off\" spellcheck=\"false\"\n [attr.aria-expanded]=\"panelOpen\" aria-autocomplete=\"list\" role=\"combobox\"\n [attr.aria-controls]=\"panelOpen ? optionsListId : null\" [attr.aria-invalid]=\"uiInvalid\"\n [attr.aria-describedby]=\"uiAriaDescribedBy\" [attr.aria-label]=\"floatLabelCaption || placeholder || 'Buscar e selecionar'\"\n [value]=\"searchQuery\" (input)=\"onMainInput($event)\" (keydown)=\"onMainKeydown($event)\"\n (blur)=\"onMainBlur($event)\" />\n <button type=\"button\" class=\"dropdown-search-field__chevron-btn\" tabindex=\"-1\" [disabled]=\"disabled || readonly\"\n [attr.aria-expanded]=\"panelOpen\" aria-haspopup=\"listbox\" aria-label=\"Abrir lista\" (click)=\"openToggle()\">\n <i class=\"fa-solid fa-chevron-down dropdown-search-field__chevron-icon\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </app-dropdown-base>\n </div>\n</app-base-field>\n\n<ng-template #optionsPanelTpl>\n <div class=\"dropdown-search-field__panel-inner\" (mousedown)=\"$event.preventDefault()\">\n <div class=\"dropdown-search-field__list\" [id]=\"optionsListId\" role=\"listbox\" tabindex=\"-1\"\n [attr.aria-label]=\"floatLabelCaption || 'Op\u00E7\u00F5es'\" (blur)=\"onMainBlur($event)\"\n (keydown)=\"onSearchListKeydown($event)\" (scroll)=\"onOptionsListScroll($event)\">\n @if (listOptions.length === 0 && (optionsLoading || loadingMore)) {\n <app-skeleton-list [rows]=\"8\" />\n }\n @for (opt of listOptions; track trackOption($index, opt)) {\n <div role=\"option\" class=\"dropdown-search-field__option\"\n [class.dropdown-search-field__option--disabled]=\"opt.disabled\"\n [class.dropdown-search-field__option--selected]=\"isSelected(opt)\"\n [class.dropdown-search-field__option--active]=\"!opt.disabled && activeIndex === $index\"\n [attr.tabindex]=\"opt.disabled ? null : -1\" [attr.aria-selected]=\"isSelected(opt)\" (click)=\"selectOption(opt)\"\n (keydown)=\"onOptionRowKeydown($event, opt)\">\n {{ opt.label }}\n </div>\n }\n @if (options.length > 0 && loadingMore) {\n <app-skeleton-list [rows]=\"1\" [leading]=\"false\" />\n }\n </div>\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}:host ::ng-deep .base-field:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-float-border-focus);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring)}:host ::ng-deep .base-field--invalid:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}:host ::ng-deep .base-field.base-field--readonly:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-readonly-border-focus);box-shadow:0 0 0 3px var(--ui-field-readonly-focus-ring)}:host ::ng-deep .base-field.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.dropdown-search-field__wrap{display:flex;flex:1;align-items:stretch;min-width:0;width:100%;box-sizing:border-box}.dropdown-search-field__origin{display:flex;align-items:center;min-width:0;width:100%;min-height:calc(1.8rem + 1.35em);box-sizing:border-box}.dropdown-search-field__input{flex:1;margin:0;box-sizing:border-box;min-height:calc(1.8rem + 1.35em);padding:1.35rem .35rem .45rem .75rem;font-size:1rem;line-height:1.35;font-family:inherit;text-align:left;color:var(--ui-field-float-input-text);background:transparent;border:0;border-radius:0;box-shadow:none;cursor:text;display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-search-field__input:-webkit-autofill,.dropdown-search-field__input:-webkit-autofill:hover,.dropdown-search-field__input:-webkit-autofill:focus,.dropdown-search-field__input:-webkit-autofill:active,.dropdown-search-field__input:-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;caret-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-float-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-float-bg) inset!important;transition:background-color 50000s ease 0s!important}.dropdown-search-field__input:autofill,.dropdown-search-field__input:autofill:hover,.dropdown-search-field__input:autofill:focus,.dropdown-search-field__input:autofill:active,.dropdown-search-field__input:autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;caret-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-float-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-float-bg) inset!important;background-color:var(--ui-field-float-bg)!important;transition:background-color 50000s ease 0s!important}.dropdown-search-field__input:focus,.dropdown-search-field__input:focus-visible{outline:none;box-shadow:none}.dropdown-search-field__input:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}.dropdown-search-field__input--locked:read-only:not(:disabled){cursor:default;opacity:1}.dropdown-search-field__input:read-only:not(:disabled):not(.dropdown-search-field__input--locked){cursor:default;opacity:1;color:var(--ui-field-readonly-input-text)}.dropdown-search-field__chevron-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;width:2rem;height:2rem;margin:0 .1rem;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.dropdown-search-field__chevron-btn:hover:not(:disabled){background:#5a7fa31f;color:var(--ui-field-float-label-top-color)}.dropdown-search-field__chevron-btn:focus,.dropdown-search-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.dropdown-search-field__chevron-btn:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .dropdown-search-field__chevron-btn:disabled{opacity:1;cursor:default;color:var(--ui-field-readonly-prefix-color)}:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn{color:var(--ui-field-float-label-invalid-color)}:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn .dropdown-search-field__chevron-icon{color:inherit}:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn:hover:not(:disabled){background:#b91c1c1f}:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn:focus,:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.dropdown-search-field__chevron-icon{display:inline-flex;align-items:center;justify-content:center;padding-top:2px;font-size:.8rem;line-height:1}.dropdown-search-field__panel-inner{display:flex;flex-direction:column;max-height:min(280px,55vh);width:100%;box-sizing:border-box;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.dropdown-search-field__list{margin:0;padding:.25rem 0;flex:1;min-height:0;width:100%;max-height:min(260px,52vh);box-sizing:border-box;outline:none;overflow-x:hidden;overflow-y:auto}.dropdown-search-field__loading{padding:.65rem .75rem;font-size:.85rem;line-height:1.35;color:var(--ui-field-float-label-color);text-align:center}.dropdown-search-field__option{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.45rem .75rem;font-size:.95rem;line-height:1.35;cursor:pointer;color:var(--ui-field-float-input-text)}.dropdown-search-field__option--selected:not(.dropdown-search-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg)}.dropdown-search-field__option--active:not(.dropdown-search-field__option--disabled):not(.dropdown-search-field__option--selected){background:var(--app-color-dropdown-option-highlight-bg)}.dropdown-search-field__option.dropdown-search-field__option--active.dropdown-search-field__option--selected:not(.dropdown-search-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg-active)}.dropdown-search-field__option--disabled{opacity:.45;cursor:not-allowed}.dropdown-search-field__option:hover:not(.dropdown-search-field__option--disabled):not(.dropdown-search-field__option--selected){background:var(--app-color-dropdown-option-hover-bg)}.dropdown-search-field__option.dropdown-search-field__option--selected:hover:not(.dropdown-search-field__option--disabled){background:var(--app-color-dropdown-option-selected-hover-bg)}\n"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "disabled", "readonly", "size", "inputId", "errorId", "showPrefixIcon", "prefixIcon", "clearable", "clearAriaLabel", "showSuffixSlot", "valueAlignEnd", "loading", "skeletonVariant", "mostrarMenuContexto", "contextMenuItems", "contextMenuId"], outputs: ["clear", "contextMenuSelect"] }, { kind: "component", type: DropdownBaseComponent, selector: "app-dropdown-base", inputs: ["open", "panelTemplate", "panelWidthPx", "closeOnEscape", "hasBackdrop", "connectedPositions", "pushConnectedOverlay", "scrollStrategy", "bareOverlayPanel"], outputs: ["openChange"] }, { kind: "component", type: SkeletonListComponent, selector: "app-skeleton-list", inputs: ["rows", "leading", "rowGap", "lineHeight", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6071
|
+
], viewQueries: [{ propertyName: "optionsPanelTpl", first: true, predicate: ["optionsPanelTpl"], descendants: true, static: true }, { propertyName: "dropdownTriggerRootRef", first: true, predicate: ["dropdownFieldTriggerRoot"], descendants: true, read: ElementRef }, { propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [size]=\"size\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\"\n [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\"\n [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <div class=\"dropdown-search-field__wrap\">\n <app-dropdown-base [open]=\"panelOpen\" [panelTemplate]=\"optionsPanelTpl\" [panelWidthPx]=\"panelOverlayWidth\"\n (openChange)=\"onDropdownOpenChange($event)\">\n <div #dropdownFieldTriggerRoot class=\"dropdown-search-field__origin\" appDropdownTrigger\n (keydown)=\"onTriggerKeydown($event)\">\n <input #nativeInput type=\"text\" class=\"dropdown-search-field__input\"\n [class.dropdown-search-field__input--locked]=\"isLockedSelectionDisplay\" [id]=\"controlId\"\n [attr.name]=\"name || null\" [disabled]=\"disabled\" [readonly]=\"isNativeInputReadonly\" [attr.placeholder]=\"''\"\n autocomplete=\"off\" spellcheck=\"false\"\n [attr.aria-expanded]=\"panelOpen\" aria-autocomplete=\"list\" role=\"combobox\"\n [attr.aria-controls]=\"panelOpen ? optionsListId : null\" [attr.aria-invalid]=\"uiInvalid\"\n [attr.aria-describedby]=\"uiAriaDescribedBy\" [attr.aria-label]=\"floatLabelCaption || placeholder || 'Buscar e selecionar'\"\n [value]=\"searchQuery\" (input)=\"onMainInput($event)\" (keydown)=\"onMainKeydown($event)\"\n (blur)=\"onMainBlur($event)\" />\n <button type=\"button\" class=\"dropdown-search-field__chevron-btn\" tabindex=\"-1\" [disabled]=\"disabled || readonly\"\n [attr.aria-expanded]=\"panelOpen\" aria-haspopup=\"listbox\" aria-label=\"Abrir lista\" (click)=\"openToggle()\">\n <i class=\"fa-solid fa-chevron-down dropdown-search-field__chevron-icon\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </app-dropdown-base>\n </div>\n</app-base-field>\n\n<ng-template #optionsPanelTpl>\n <div class=\"dropdown-search-field__panel-inner\" (mousedown)=\"$event.preventDefault()\">\n <div class=\"dropdown-search-field__list\" [id]=\"optionsListId\" role=\"listbox\" tabindex=\"-1\"\n [attr.aria-label]=\"floatLabelCaption || 'Op\u00E7\u00F5es'\" (blur)=\"onMainBlur($event)\"\n (keydown)=\"onSearchListKeydown($event)\" (scroll)=\"onOptionsListScroll($event)\">\n @if (listOptions.length === 0 && (optionsLoading || loadingMore)) {\n <app-skeleton-list [rows]=\"8\" />\n }\n @for (opt of listOptions; track trackOption($index, opt)) {\n <div role=\"option\" class=\"dropdown-search-field__option\"\n [class.dropdown-search-field__option--disabled]=\"opt.disabled\"\n [class.dropdown-search-field__option--selected]=\"isSelected(opt)\"\n [class.dropdown-search-field__option--active]=\"!opt.disabled && activeIndex === $index\"\n [attr.tabindex]=\"opt.disabled ? null : -1\" [attr.aria-selected]=\"isSelected(opt)\" (click)=\"selectOption(opt)\"\n (keydown)=\"onOptionRowKeydown($event, opt)\">\n {{ opt.label }}\n </div>\n }\n @if (options.length > 0 && loadingMore) {\n <app-skeleton-list [rows]=\"1\" [leading]=\"false\" />\n }\n </div>\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}:host ::ng-deep .base-field:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-float-border-focus);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring)}:host ::ng-deep .base-field--invalid:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}:host ::ng-deep .base-field.base-field--readonly:not(.base-field--invalid):not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-readonly-border-focus);box-shadow:0 0 0 3px var(--ui-field-readonly-focus-ring)}:host ::ng-deep .base-field.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.dropdown-search-field__wrap{display:flex;flex:1;align-items:stretch;min-width:0;width:100%;box-sizing:border-box}.dropdown-search-field__origin{display:flex;align-items:center;min-width:0;width:100%;min-height:calc(1.8rem + 1.35em);box-sizing:border-box}.dropdown-search-field__input{flex:1;margin:0;box-sizing:border-box;min-height:calc(1.8rem + 1.35em);padding:1.35rem .35rem .45rem .75rem;font-size:1rem;line-height:1.35;font-family:inherit;text-align:left;color:var(--ui-field-float-input-text);background:transparent;border:0;border-radius:0;box-shadow:none;cursor:text;display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-search-field__input:-webkit-autofill,.dropdown-search-field__input:-webkit-autofill:hover,.dropdown-search-field__input:-webkit-autofill:focus,.dropdown-search-field__input:-webkit-autofill:active,.dropdown-search-field__input:-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;caret-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-float-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-float-bg) inset!important;transition:background-color 50000s ease 0s!important}.dropdown-search-field__input:autofill,.dropdown-search-field__input:autofill:hover,.dropdown-search-field__input:autofill:focus,.dropdown-search-field__input:autofill:active,.dropdown-search-field__input:autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;caret-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-float-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-float-bg) inset!important;background-color:var(--ui-field-float-bg)!important;transition:background-color 50000s ease 0s!important}.dropdown-search-field__input:focus,.dropdown-search-field__input:focus-visible{outline:none;box-shadow:none}.dropdown-search-field__input:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}.dropdown-search-field__input--locked:read-only:not(:disabled){cursor:default;opacity:1}.dropdown-search-field__input:read-only:not(:disabled):not(.dropdown-search-field__input--locked){cursor:default;opacity:1;color:var(--ui-field-readonly-input-text)}.dropdown-search-field__chevron-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;width:2rem;height:2rem;margin:0 .1rem;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.dropdown-search-field__chevron-btn:hover:not(:disabled){background:#5a7fa31f;color:var(--ui-field-float-label-top-color)}.dropdown-search-field__chevron-btn:focus,.dropdown-search-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.dropdown-search-field__chevron-btn:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .dropdown-search-field__chevron-btn:disabled{opacity:1;cursor:default;color:var(--ui-field-readonly-prefix-color)}:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn{color:var(--ui-field-float-label-invalid-color)}:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn .dropdown-search-field__chevron-icon{color:inherit}:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn:hover:not(:disabled){background:#b91c1c1f}:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn:focus,:host.dropdown-search-field--invalid .dropdown-search-field__chevron-btn:focus-visible{outline:none;box-shadow:none}.dropdown-search-field__chevron-icon{display:inline-flex;align-items:center;justify-content:center;padding-top:2px;font-size:.8rem;line-height:1}.dropdown-search-field__panel-inner{display:flex;flex-direction:column;max-height:min(280px,55vh);width:100%;box-sizing:border-box;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.dropdown-search-field__list{margin:0;padding:.25rem 0;flex:1;min-height:0;width:100%;max-height:min(260px,52vh);box-sizing:border-box;outline:none;overflow-x:hidden;overflow-y:auto}.dropdown-search-field__loading{padding:.65rem .75rem;font-size:.85rem;line-height:1.35;color:var(--ui-field-float-label-color);text-align:center}.dropdown-search-field__option{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.45rem .75rem;font-size:.95rem;line-height:1.35;cursor:pointer;color:var(--ui-field-float-input-text)}.dropdown-search-field__option--selected:not(.dropdown-search-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg)}.dropdown-search-field__option--active:not(.dropdown-search-field__option--disabled):not(.dropdown-search-field__option--selected){background:var(--app-color-dropdown-option-highlight-bg)}.dropdown-search-field__option.dropdown-search-field__option--active.dropdown-search-field__option--selected:not(.dropdown-search-field__option--disabled){background:var(--app-color-dropdown-option-selected-bg-active)}.dropdown-search-field__option--disabled{opacity:.45;cursor:not-allowed}.dropdown-search-field__option:hover:not(.dropdown-search-field__option--disabled):not(.dropdown-search-field__option--selected){background:var(--app-color-dropdown-option-hover-bg)}.dropdown-search-field__option.dropdown-search-field__option--selected:hover:not(.dropdown-search-field__option--disabled){background:var(--app-color-dropdown-option-selected-hover-bg)}\n"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "disabled", "readonly", "size", "inputId", "errorId", "showPrefixIcon", "prefixIcon", "clearable", "clearAriaLabel", "showSuffixSlot", "valueAlignEnd", "loading", "skeletonVariant", "mostrarMenuContexto", "contextMenuItems", "contextMenuId"], outputs: ["clear", "contextMenuSelect"] }, { kind: "component", type: DropdownBaseComponent, selector: "app-dropdown-base", inputs: ["open", "panelTemplate", "panelWidthPx", "closeOnEscape", "hasBackdrop", "connectedPositions", "pushConnectedOverlay", "lockConnectedOverlayPosition", "scrollStrategy", "bareOverlayPanel"], outputs: ["openChange"] }, { kind: "component", type: SkeletonListComponent, selector: "app-skeleton-list", inputs: ["rows", "leading", "rowGap", "lineHeight", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5865
6072
|
}
|
|
5866
6073
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownSearchFieldComponent, decorators: [{
|
|
5867
6074
|
type: Component,
|
|
@@ -10121,7 +10328,10 @@ function filterOneNode(node, qNormalized, rawQuery) {
|
|
|
10121
10328
|
class MenuListComponent {
|
|
10122
10329
|
constructor() {
|
|
10123
10330
|
this.cdr = inject(ChangeDetectorRef);
|
|
10331
|
+
this.injector = inject(Injector);
|
|
10332
|
+
this.destroyRef = inject(DestroyRef);
|
|
10124
10333
|
this.appTheme = input(...(ngDevMode ? [undefined, { debugName: "appTheme" }] : /* istanbul ignore next */ []));
|
|
10334
|
+
this.bodyRouteSyncGen = 0;
|
|
10125
10335
|
this.items = [];
|
|
10126
10336
|
this.menuId = 'app-menu';
|
|
10127
10337
|
this.dense = false;
|
|
@@ -10138,13 +10348,25 @@ class MenuListComponent {
|
|
|
10138
10348
|
*/
|
|
10139
10349
|
this.persistGroupExpansion = true;
|
|
10140
10350
|
this.searchable = false;
|
|
10351
|
+
/**
|
|
10352
|
+
* Com `searchable`, se `true` limpa o campo e repõe a lista completa após {@link itemSelect}.
|
|
10353
|
+
*/
|
|
10354
|
+
this.limparAposPesquisar = false;
|
|
10141
10355
|
this.searchPlaceholder = 'Pesquisar';
|
|
10142
10356
|
this.itemSelect = new EventEmitter();
|
|
10143
10357
|
this.closeRequest = new EventEmitter();
|
|
10144
10358
|
this.submenuBack = new EventEmitter();
|
|
10145
10359
|
this.groupToggled = output();
|
|
10360
|
+
/** Ver {@link MenuListBodyComponent.selectionScrollHint}. */
|
|
10361
|
+
this.selectionScrollHint = output();
|
|
10146
10362
|
this.searchQuery = '';
|
|
10147
10363
|
this.displayItems = [];
|
|
10364
|
+
this.destroyRef.onDestroy(() => {
|
|
10365
|
+
this.bodyRouteSyncGen++;
|
|
10366
|
+
});
|
|
10367
|
+
}
|
|
10368
|
+
ngAfterViewInit() {
|
|
10369
|
+
this.scheduleBodyRouteSelectionSync();
|
|
10148
10370
|
}
|
|
10149
10371
|
get showSearchField() {
|
|
10150
10372
|
return this.searchable && !this.nested && !this.compressText;
|
|
@@ -10180,6 +10402,45 @@ class MenuListComponent {
|
|
|
10180
10402
|
changes['persistGroupExpansion']) {
|
|
10181
10403
|
this.cdr.markForCheck();
|
|
10182
10404
|
}
|
|
10405
|
+
if (changes['selectedItemId'] ||
|
|
10406
|
+
changes['items'] ||
|
|
10407
|
+
changes['searchable'] ||
|
|
10408
|
+
changes['compressText'] ||
|
|
10409
|
+
changes['nested'] ||
|
|
10410
|
+
changes['groupCollapsible'] ||
|
|
10411
|
+
changes['groupDefaultExpansion'] ||
|
|
10412
|
+
changes['persistGroupExpansion'] ||
|
|
10413
|
+
changes['clickToOpen']) {
|
|
10414
|
+
/**
|
|
10415
|
+
* Só `selectedItemId` + `body` já ligado: {@link MenuListBodyComponent.ngOnChanges} já corre
|
|
10416
|
+
* `reconcileSelectionPathSync`. Voltar a chamar `syncRouteSelectionExpansion` no próximo render
|
|
10417
|
+
* reexecutava `ensureSubmenuOpenForSelection` e **reabria** o flyout (flash ao escolher item).
|
|
10418
|
+
*/
|
|
10419
|
+
if (this.needsDeferredBodyRouteSync(changes)) {
|
|
10420
|
+
this.scheduleBodyRouteSelectionSync();
|
|
10421
|
+
}
|
|
10422
|
+
}
|
|
10423
|
+
}
|
|
10424
|
+
/** `false` quando o corpo já tratou a selecção no mesmo ciclo — não repetir após `afterNextRender`. */
|
|
10425
|
+
needsDeferredBodyRouteSync(changes) {
|
|
10426
|
+
if (!this.body) {
|
|
10427
|
+
return true;
|
|
10428
|
+
}
|
|
10429
|
+
const keys = Object.keys(changes);
|
|
10430
|
+
return !(keys.length === 1 && keys[0] === 'selectedItemId');
|
|
10431
|
+
}
|
|
10432
|
+
/**
|
|
10433
|
+
* O corpo do menu só existe após o primeiro render; no drawer mobile isso atrasa `ensureExpanded`
|
|
10434
|
+
* relativamente ao `ngOnChanges` do corpo — repetimos após `afterNextRender`.
|
|
10435
|
+
*/
|
|
10436
|
+
scheduleBodyRouteSelectionSync() {
|
|
10437
|
+
const gen = ++this.bodyRouteSyncGen;
|
|
10438
|
+
afterNextRender(() => {
|
|
10439
|
+
if (gen !== this.bodyRouteSyncGen) {
|
|
10440
|
+
return;
|
|
10441
|
+
}
|
|
10442
|
+
this.body?.syncRouteSelectionExpansion();
|
|
10443
|
+
}, { injector: this.injector });
|
|
10183
10444
|
}
|
|
10184
10445
|
onSearchQueryInput(value) {
|
|
10185
10446
|
this.searchQuery = value ?? '';
|
|
@@ -10187,12 +10448,34 @@ class MenuListComponent {
|
|
|
10187
10448
|
this.syncDisplayItems();
|
|
10188
10449
|
this.cdr.markForCheck();
|
|
10189
10450
|
}
|
|
10451
|
+
onMenuItemSelect(id) {
|
|
10452
|
+
if (this.limparAposPesquisar &&
|
|
10453
|
+
this.showSearchField &&
|
|
10454
|
+
this.searchQuery.trim().length > 0) {
|
|
10455
|
+
this.searchQuery = '';
|
|
10456
|
+
this.body?.closeOpenSubmenu();
|
|
10457
|
+
this.syncDisplayItems();
|
|
10458
|
+
}
|
|
10459
|
+
this.itemSelect.emit(id);
|
|
10460
|
+
this.cdr.markForCheck();
|
|
10461
|
+
}
|
|
10190
10462
|
resetHighlight() {
|
|
10191
10463
|
this.body?.resetHighlight();
|
|
10192
10464
|
}
|
|
10193
10465
|
focusFirstOption() {
|
|
10194
10466
|
this.body?.focusFirstOption();
|
|
10195
10467
|
}
|
|
10468
|
+
/**
|
|
10469
|
+
* Usado pela `app-sidebar` ao abrir o drawer móvel: garante {@link MenuListBodyComponent.syncRouteSelectionExpansion}
|
|
10470
|
+
* antes do scroll (grupos fechados em `sessionStorage` passam a abrir no caminho do item activo).
|
|
10471
|
+
*/
|
|
10472
|
+
syncSelectionForMobileDrawerOpen() {
|
|
10473
|
+
if (this.body) {
|
|
10474
|
+
this.body.syncRouteSelectionExpansion();
|
|
10475
|
+
return;
|
|
10476
|
+
}
|
|
10477
|
+
this.scheduleBodyRouteSelectionSync();
|
|
10478
|
+
}
|
|
10196
10479
|
syncDisplayItems() {
|
|
10197
10480
|
if (!this.searchable || this.nested || this.compressText) {
|
|
10198
10481
|
this.displayItems = [...(this.items ?? [])];
|
|
@@ -10202,12 +10485,12 @@ class MenuListComponent {
|
|
|
10202
10485
|
}
|
|
10203
10486
|
}
|
|
10204
10487
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10205
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MenuListComponent, isStandalone: true, selector: "app-menu-list", inputs: { appTheme: { classPropertyName: "appTheme", publicName: "appTheme", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: true, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: false, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, nested: { classPropertyName: "nested", publicName: "nested", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectedItemId: { classPropertyName: "selectedItemId", publicName: "selectedItemId", isSignal: false, isRequired: false, transformFunction: null }, compressText: { classPropertyName: "compressText", publicName: "compressText", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, clickToOpen: { classPropertyName: "clickToOpen", publicName: "clickToOpen", isSignal: false, isRequired: false, transformFunction: null }, groupCollapsible: { classPropertyName: "groupCollapsible", publicName: "groupCollapsible", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, groupDefaultExpansion: { classPropertyName: "groupDefaultExpansion", publicName: "groupDefaultExpansion", isSignal: false, isRequired: false, transformFunction: null }, persistGroupExpansion: { classPropertyName: "persistGroupExpansion", publicName: "persistGroupExpansion", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", closeRequest: "closeRequest", submenuBack: "submenuBack", groupToggled: "groupToggled" }, viewQueries: [{ propertyName: "body", first: true, predicate: MenuListBodyComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<app-menu-list-body\n [items]=\"displayItems\"\n [menuId]=\"menuId\"\n [nested]=\"nested\"\n [dense]=\"dense\"\n [compressText]=\"compressText\"\n [groupCollapsible]=\"groupCollapsible\"\n [groupDefaultExpansion]=\"groupDefaultExpansion\"\n [persistGroupExpansion]=\"persistGroupExpansion\"\n [clickToOpen]=\"clickToOpen\"\n [selectedItemId]=\"selectedItemId\"\n [appTheme]=\"appTheme()\"\n [expandAllGroupsInitially]=\"expandAllGroupsWhenSearching\"\n (itemSelect)=\"itemSelect.emit($event)\"\n (closeRequest)=\"closeRequest.emit()\"\n (submenuBack)=\"submenuBack.emit()\"\n (groupToggled)=\"groupToggled.emit($event)\"\n>\n @if (showSearchField) {\n <div class=\"menu-list__search\" role=\"search\">\n <app-text-field\n class=\"menu-list__search-field\"\n [id]=\"menuId + '-search'\"\n [name]=\"menuId + '-menu-search'\"\n size=\"sm\"\n [ngModel]=\"searchQuery\"\n (ngModelChange)=\"onSearchQueryInput($event)\"\n [placeholder]=\"searchPlaceholder\"\n [label]=\"''\"\n [showPrefixIcon]=\"true\"\n prefixIcon=\"fa-solid fa-magnifying-glass\"\n [clearable]=\"true\"\n [autocomplete]=\"false\"\n />\n </div>\n }\n @if (showSearchNoResults) {\n <p class=\"menu-list__search-empty\">Nenhum item encontrado</p>\n }\n</app-menu-list-body>\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-direction:column;flex:1 1 auto;min-height:0;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;flex:1 1 auto;min-height:0;min-width:0;overflow:hidden;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--dense.menu-list--compress-text .menu-list__items{gap:.25rem}.menu-list__toolbar{flex:0 0 auto;min-width:0}.menu-list__viewport{flex:1 1 auto;min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;outline:none;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.menu-list__viewport::-webkit-scrollbar{width:4px;height:4px}.menu-list__viewport::-webkit-scrollbar-track{background:transparent}.menu-list__viewport::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.menu-list__viewport::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}.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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextFieldComponent, selector: "app-text-field", inputs: ["maxLength"] }, { kind: "component", type: MenuListBodyComponent, selector: "app-menu-list-body", inputs: ["appTheme", "items", "menuId", "dense", "nested", "selectedItemId", "compressText", "clickToOpen", "groupCollapsible", "groupDefaultExpansion", "persistGroupExpansion", "expandAllGroupsInitially"], outputs: ["itemSelect", "closeRequest", "submenuBack", "groupToggled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10488
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MenuListComponent, isStandalone: true, selector: "app-menu-list", inputs: { appTheme: { classPropertyName: "appTheme", publicName: "appTheme", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: true, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: false, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, nested: { classPropertyName: "nested", publicName: "nested", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectedItemId: { classPropertyName: "selectedItemId", publicName: "selectedItemId", isSignal: false, isRequired: false, transformFunction: null }, compressText: { classPropertyName: "compressText", publicName: "compressText", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, clickToOpen: { classPropertyName: "clickToOpen", publicName: "clickToOpen", isSignal: false, isRequired: false, transformFunction: null }, groupCollapsible: { classPropertyName: "groupCollapsible", publicName: "groupCollapsible", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, groupDefaultExpansion: { classPropertyName: "groupDefaultExpansion", publicName: "groupDefaultExpansion", isSignal: false, isRequired: false, transformFunction: null }, persistGroupExpansion: { classPropertyName: "persistGroupExpansion", publicName: "persistGroupExpansion", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, limparAposPesquisar: { classPropertyName: "limparAposPesquisar", publicName: "limparAposPesquisar", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", closeRequest: "closeRequest", submenuBack: "submenuBack", groupToggled: "groupToggled", selectionScrollHint: "selectionScrollHint" }, viewQueries: [{ propertyName: "body", first: true, predicate: MenuListBodyComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<app-menu-list-body\n [items]=\"displayItems\"\n [menuId]=\"menuId\"\n [nested]=\"nested\"\n [dense]=\"dense\"\n [compressText]=\"compressText\"\n [groupCollapsible]=\"groupCollapsible\"\n [groupDefaultExpansion]=\"groupDefaultExpansion\"\n [persistGroupExpansion]=\"persistGroupExpansion\"\n [clickToOpen]=\"clickToOpen\"\n [selectedItemId]=\"selectedItemId\"\n [appTheme]=\"appTheme()\"\n [expandAllGroupsInitially]=\"expandAllGroupsWhenSearching\"\n (itemSelect)=\"onMenuItemSelect($event)\"\n (closeRequest)=\"closeRequest.emit()\"\n (submenuBack)=\"submenuBack.emit()\"\n (groupToggled)=\"groupToggled.emit($event)\"\n (selectionScrollHint)=\"selectionScrollHint.emit()\"\n>\n @if (showSearchField) {\n <div class=\"menu-list__search\" role=\"search\">\n <app-text-field\n class=\"menu-list__search-field\"\n [id]=\"menuId + '-search'\"\n [name]=\"menuId + '-menu-search'\"\n size=\"sm\"\n [ngModel]=\"searchQuery\"\n (ngModelChange)=\"onSearchQueryInput($event)\"\n [placeholder]=\"searchPlaceholder\"\n [label]=\"''\"\n [showPrefixIcon]=\"true\"\n prefixIcon=\"fa-solid fa-magnifying-glass\"\n [clearable]=\"true\"\n [autocomplete]=\"false\"\n />\n </div>\n }\n @if (showSearchNoResults) {\n <p class=\"menu-list__search-empty\">Nenhum item encontrado</p>\n }\n</app-menu-list-body>\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-direction:column;flex:1 1 auto;min-height:0;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;flex:1 1 auto;min-height:0;min-width:0;overflow:hidden;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--dense.menu-list--compress-text .menu-list__items{gap:.25rem}.menu-list--nested{padding-top:4px;padding-bottom:4px;gap:0}.menu-list__toolbar{flex:0 0 auto;min-width:0}.menu-list__viewport{flex:1 1 auto;min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;outline:none;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.menu-list__viewport::-webkit-scrollbar{width:4px;height:4px}.menu-list__viewport::-webkit-scrollbar-track{background:transparent}.menu-list__viewport::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.menu-list__viewport::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}.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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextFieldComponent, selector: "app-text-field", inputs: ["maxLength"] }, { kind: "component", type: MenuListBodyComponent, selector: "app-menu-list-body", inputs: ["appTheme", "items", "menuId", "dense", "nested", "selectedItemId", "compressText", "clickToOpen", "groupCollapsible", "groupDefaultExpansion", "persistGroupExpansion", "expandAllGroupsInitially"], outputs: ["selectionScrollHint", "itemSelect", "closeRequest", "submenuBack", "groupToggled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10206
10489
|
}
|
|
10207
10490
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuListComponent, decorators: [{
|
|
10208
10491
|
type: Component,
|
|
10209
|
-
args: [{ selector: 'app-menu-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, TextFieldComponent, MenuListBodyComponent], template: "<app-menu-list-body\n [items]=\"displayItems\"\n [menuId]=\"menuId\"\n [nested]=\"nested\"\n [dense]=\"dense\"\n [compressText]=\"compressText\"\n [groupCollapsible]=\"groupCollapsible\"\n [groupDefaultExpansion]=\"groupDefaultExpansion\"\n [persistGroupExpansion]=\"persistGroupExpansion\"\n [clickToOpen]=\"clickToOpen\"\n [selectedItemId]=\"selectedItemId\"\n [appTheme]=\"appTheme()\"\n [expandAllGroupsInitially]=\"expandAllGroupsWhenSearching\"\n (itemSelect)=\"
|
|
10210
|
-
}], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], items: [{
|
|
10492
|
+
args: [{ selector: 'app-menu-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, TextFieldComponent, MenuListBodyComponent], template: "<app-menu-list-body\n [items]=\"displayItems\"\n [menuId]=\"menuId\"\n [nested]=\"nested\"\n [dense]=\"dense\"\n [compressText]=\"compressText\"\n [groupCollapsible]=\"groupCollapsible\"\n [groupDefaultExpansion]=\"groupDefaultExpansion\"\n [persistGroupExpansion]=\"persistGroupExpansion\"\n [clickToOpen]=\"clickToOpen\"\n [selectedItemId]=\"selectedItemId\"\n [appTheme]=\"appTheme()\"\n [expandAllGroupsInitially]=\"expandAllGroupsWhenSearching\"\n (itemSelect)=\"onMenuItemSelect($event)\"\n (closeRequest)=\"closeRequest.emit()\"\n (submenuBack)=\"submenuBack.emit()\"\n (groupToggled)=\"groupToggled.emit($event)\"\n (selectionScrollHint)=\"selectionScrollHint.emit()\"\n>\n @if (showSearchField) {\n <div class=\"menu-list__search\" role=\"search\">\n <app-text-field\n class=\"menu-list__search-field\"\n [id]=\"menuId + '-search'\"\n [name]=\"menuId + '-menu-search'\"\n size=\"sm\"\n [ngModel]=\"searchQuery\"\n (ngModelChange)=\"onSearchQueryInput($event)\"\n [placeholder]=\"searchPlaceholder\"\n [label]=\"''\"\n [showPrefixIcon]=\"true\"\n prefixIcon=\"fa-solid fa-magnifying-glass\"\n [clearable]=\"true\"\n [autocomplete]=\"false\"\n />\n </div>\n }\n @if (showSearchNoResults) {\n <p class=\"menu-list__search-empty\">Nenhum item encontrado</p>\n }\n</app-menu-list-body>\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-direction:column;flex:1 1 auto;min-height:0;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;flex:1 1 auto;min-height:0;min-width:0;overflow:hidden;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--dense.menu-list--compress-text .menu-list__items{gap:.25rem}.menu-list--nested{padding-top:4px;padding-bottom:4px;gap:0}.menu-list__toolbar{flex:0 0 auto;min-width:0}.menu-list__viewport{flex:1 1 auto;min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;outline:none;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.menu-list__viewport::-webkit-scrollbar{width:4px;height:4px}.menu-list__viewport::-webkit-scrollbar-track{background:transparent}.menu-list__viewport::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.menu-list__viewport::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}.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"] }]
|
|
10493
|
+
}], ctorParameters: () => [], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], items: [{
|
|
10211
10494
|
type: Input,
|
|
10212
10495
|
args: [{ required: true }]
|
|
10213
10496
|
}], menuId: [{
|
|
@@ -10236,6 +10519,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
10236
10519
|
}], searchable: [{
|
|
10237
10520
|
type: Input,
|
|
10238
10521
|
args: [{ transform: booleanAttribute }]
|
|
10522
|
+
}], limparAposPesquisar: [{
|
|
10523
|
+
type: Input,
|
|
10524
|
+
args: [{ transform: booleanAttribute }]
|
|
10239
10525
|
}], searchPlaceholder: [{
|
|
10240
10526
|
type: Input
|
|
10241
10527
|
}], itemSelect: [{
|
|
@@ -10244,7 +10530,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
10244
10530
|
type: Output
|
|
10245
10531
|
}], submenuBack: [{
|
|
10246
10532
|
type: Output
|
|
10247
|
-
}], groupToggled: [{ type: i0.Output, args: ["groupToggled"] }], body: [{
|
|
10533
|
+
}], groupToggled: [{ type: i0.Output, args: ["groupToggled"] }], selectionScrollHint: [{ type: i0.Output, args: ["selectionScrollHint"] }], body: [{
|
|
10248
10534
|
type: ViewChild,
|
|
10249
10535
|
args: [MenuListBodyComponent]
|
|
10250
10536
|
}] } });
|
|
@@ -10327,7 +10613,7 @@ class ContextMenuComponent {
|
|
|
10327
10613
|
this.disposeOverlay();
|
|
10328
10614
|
}
|
|
10329
10615
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContextMenuComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10330
|
-
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", "persistGroupExpansion", "searchable", "searchPlaceholder"], outputs: ["itemSelect", "closeRequest", "submenuBack", "groupToggled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10616
|
+
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", "persistGroupExpansion", "searchable", "limparAposPesquisar", "searchPlaceholder"], outputs: ["itemSelect", "closeRequest", "submenuBack", "groupToggled", "selectionScrollHint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10331
10617
|
}
|
|
10332
10618
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContextMenuComponent, decorators: [{
|
|
10333
10619
|
type: Component,
|
|
@@ -11161,11 +11447,11 @@ class AppShellComponent {
|
|
|
11161
11447
|
}
|
|
11162
11448
|
}
|
|
11163
11449
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11164
|
-
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 [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:100vh;min-height:100dvh;max-height:100vh;max-height:100dvh;overflow:hidden;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 }); }
|
|
11450
|
+
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 [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\" cdkScrollable>\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:100vh;min-height:100dvh;max-height:100vh;max-height:100dvh;overflow:hidden;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"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
11165
11451
|
}
|
|
11166
11452
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppShellComponent, decorators: [{
|
|
11167
11453
|
type: Component,
|
|
11168
|
-
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 [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:100vh;min-height:100dvh;max-height:100vh;max-height:100dvh;overflow:hidden;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"] }]
|
|
11454
|
+
args: [{ selector: 'app-shell', exportAs: 'appShell', imports: [NgTemplateOutlet, DrawerComponent, CdkScrollable], 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 [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\" cdkScrollable>\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:100vh;min-height:100dvh;max-height:100vh;max-height:100dvh;overflow:hidden;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"] }]
|
|
11169
11455
|
}], ctorParameters: () => [], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], sidebarSlot: [{
|
|
11170
11456
|
type: ContentChild,
|
|
11171
11457
|
args: [AppShellSidebarTemplateDirective]
|
|
@@ -11196,6 +11482,7 @@ class AppSidebarComponent {
|
|
|
11196
11482
|
this.cdr = inject(ChangeDetectorRef);
|
|
11197
11483
|
this.destroyRef = inject(DestroyRef);
|
|
11198
11484
|
this.hostEl = inject((ElementRef));
|
|
11485
|
+
this.injector = inject(Injector);
|
|
11199
11486
|
this.renderer = inject(Renderer2);
|
|
11200
11487
|
/** Igual a `[appTheme]` / {@link ThemeDirective}: paleta explícita no host; omitir = herdar / serviço. */
|
|
11201
11488
|
this.appTheme = input(...(ngDevMode ? [undefined, { debugName: "appTheme" }] : /* istanbul ignore next */ []));
|
|
@@ -11204,8 +11491,16 @@ class AppSidebarComponent {
|
|
|
11204
11491
|
this.selectedItemId = null;
|
|
11205
11492
|
/** Modo estreito: só ícones + `compressText` na lista (rótulos via `title` / `aria-label`). */
|
|
11206
11493
|
this.collapsed = false;
|
|
11494
|
+
/**
|
|
11495
|
+
* Ligado ao estado do drawer no telemóvel (ex.: `mobileNavOpen` do `app-shell`).
|
|
11496
|
+
* Em cada transição para `true`, volta a agendar o scroll até ao item activo — útil porque `selectedItemId`
|
|
11497
|
+
* pode não mudar entre aberturas e o menu pode ser recriado dentro do `@if (open)` do drawer.
|
|
11498
|
+
*/
|
|
11499
|
+
this.mobileNavOpenPulse = false;
|
|
11207
11500
|
/** Repassado a {@link MenuListComponent.searchable}: campo de pesquisa na lista da lateral. */
|
|
11208
11501
|
this.searchable = false;
|
|
11502
|
+
/** Repassado a {@link MenuListComponent.limparAposPesquisar}. */
|
|
11503
|
+
this.limparAposPesquisar = false;
|
|
11209
11504
|
/**
|
|
11210
11505
|
* Repassado a {@link MenuListComponent.clickToOpen}: submenus na lateral abrem por **clique** (`true`, omissão)
|
|
11211
11506
|
* ou por **hover** (`false`).
|
|
@@ -11230,7 +11525,15 @@ class AppSidebarComponent {
|
|
|
11230
11525
|
this.listCompressText = signal(false, ...(ngDevMode ? [{ debugName: "listCompressText" }] : /* istanbul ignore next */ []));
|
|
11231
11526
|
this.listRevealTimeoutId = null;
|
|
11232
11527
|
this.scrollRestoreTimeoutId = null;
|
|
11233
|
-
|
|
11528
|
+
/** Invalida tentativas de scroll pendentes (ex.: novo agendamento ou destroy). */
|
|
11529
|
+
this.scrollToSelectedGeneration = 0;
|
|
11530
|
+
/** `setTimeout` extra ao abrir o drawer — animação (~240ms) e flex podem atrasar métricas do scroll. */
|
|
11531
|
+
this.drawerScrollAssistTimeouts = [];
|
|
11532
|
+
this.destroyRef.onDestroy(() => {
|
|
11533
|
+
this.clearListRevealTimeout();
|
|
11534
|
+
this.clearDrawerScrollAssistTimeouts();
|
|
11535
|
+
this.scrollToSelectedGeneration++;
|
|
11536
|
+
});
|
|
11234
11537
|
effect(() => {
|
|
11235
11538
|
applyOptionalThemeHostClasses(this.renderer, this.hostEl.nativeElement, this.appTheme());
|
|
11236
11539
|
});
|
|
@@ -11242,6 +11545,8 @@ class AppSidebarComponent {
|
|
|
11242
11545
|
}
|
|
11243
11546
|
ngAfterViewInit() {
|
|
11244
11547
|
this.scheduleSidebarHeadLayoutGuards();
|
|
11548
|
+
/** Drawer mobile `@if (open)` remonta a sidebar — após a vista, alinhar scroll como no desktop. */
|
|
11549
|
+
this.scheduleScrollToSelected();
|
|
11245
11550
|
}
|
|
11246
11551
|
ngOnChanges(changes) {
|
|
11247
11552
|
if (changes['selectedItemId'] || changes['items']) {
|
|
@@ -11250,15 +11555,30 @@ class AppSidebarComponent {
|
|
|
11250
11555
|
if (changes['collapsed']) {
|
|
11251
11556
|
this.scheduleSidebarHeadLayoutGuards();
|
|
11252
11557
|
}
|
|
11253
|
-
/**
|
|
11254
|
-
|
|
11255
|
-
|
|
11256
|
-
|
|
11257
|
-
|
|
11258
|
-
|
|
11259
|
-
|
|
11260
|
-
|
|
11261
|
-
}
|
|
11558
|
+
/**
|
|
11559
|
+
* Lista expandida: evita scroll durante `listCompressText` transitório (animação de largura).
|
|
11560
|
+
* Modo rail (`collapsed`): ícones continuam em `.menu-list__viewport` — faz scroll para o `--selected`
|
|
11561
|
+
* ficar inteiro (ícone «cortado» ao clicar ou ao mudar a rota).
|
|
11562
|
+
*/
|
|
11563
|
+
if (changes['selectedItemId'] || changes['items']) {
|
|
11564
|
+
if (this.collapsed || !this.listCompressText()) {
|
|
11565
|
+
this.scheduleScrollToSelected();
|
|
11566
|
+
}
|
|
11567
|
+
}
|
|
11568
|
+
const pulseCh = changes['mobileNavOpenPulse'];
|
|
11569
|
+
if (pulseCh &&
|
|
11570
|
+
this.mobileNavOpenPulse &&
|
|
11571
|
+
pulseCh.previousValue !== true) {
|
|
11572
|
+
/**
|
|
11573
|
+
* Primeiro expandir grupos no caminho da selecção (persistidos fechados); `syncRouteSelectionExpansion`
|
|
11574
|
+
* emite `selectionScrollHint` e só então o scroll encontra `.menu-list__option--selected`.
|
|
11575
|
+
*/
|
|
11576
|
+
afterNextRender(() => {
|
|
11577
|
+
this.menuList?.syncSelectionForMobileDrawerOpen();
|
|
11578
|
+
if (!this.menuList) {
|
|
11579
|
+
this.scheduleScrollToSelected();
|
|
11580
|
+
}
|
|
11581
|
+
}, { injector: this.injector });
|
|
11262
11582
|
}
|
|
11263
11583
|
const collapsedCh = changes['collapsed'];
|
|
11264
11584
|
if (!collapsedCh) {
|
|
@@ -11284,23 +11604,102 @@ class AppSidebarComponent {
|
|
|
11284
11604
|
/** Depois da animação de largura (~120ms) + reflow dos rótulos — mesma ordem que `_sidebar-reveal.scss`. */
|
|
11285
11605
|
this.scrollRestoreTimeoutId = setTimeout(() => {
|
|
11286
11606
|
this.scrollRestoreTimeoutId = null;
|
|
11287
|
-
|
|
11288
|
-
requestAnimationFrame(() => this.scrollSidebarToSelectedItem());
|
|
11289
|
-
});
|
|
11607
|
+
this.scheduleScrollToSelected();
|
|
11290
11608
|
}, APP_SIDEBAR_LAYOUT_TRANSITION_MS);
|
|
11291
11609
|
}, APP_SIDEBAR_NAV_REVEAL_TOTAL_MS);
|
|
11292
11610
|
}
|
|
11293
11611
|
/**
|
|
11294
|
-
*
|
|
11295
|
-
*
|
|
11612
|
+
* Agenda scroll até ao `--selected` depois do próximo render (filhos OnPush) e reintenta em `rAF`
|
|
11613
|
+
* até o elemento existir — necessário no drawer mobile, onde o menu acaba de montar.
|
|
11614
|
+
*/
|
|
11615
|
+
/**
|
|
11616
|
+
* Repete o scroll quando o utilizador clica num item já activo mas «cortado» (`selectedItemId` não muda).
|
|
11296
11617
|
*/
|
|
11297
|
-
|
|
11618
|
+
onSidebarItemSelect(id) {
|
|
11619
|
+
this.itemSelect.emit(id);
|
|
11620
|
+
this.scheduleScrollToSelected();
|
|
11621
|
+
}
|
|
11622
|
+
/** Também ligado a `(selectionScrollHint)` em `app-menu-list` para o drawer mobile. */
|
|
11623
|
+
scheduleScrollToSelected() {
|
|
11624
|
+
this.clearDrawerScrollAssistTimeouts();
|
|
11625
|
+
const gen = ++this.scrollToSelectedGeneration;
|
|
11626
|
+
afterNextRender(() => {
|
|
11627
|
+
if (gen !== this.scrollToSelectedGeneration) {
|
|
11628
|
+
return;
|
|
11629
|
+
}
|
|
11630
|
+
/**
|
|
11631
|
+
* Os timeouts do drawer **têm** de ser registados aqui — não no instante inicial da chamada:
|
|
11632
|
+
* antes do próximo render o host pode ainda não estar sob `.app-drawer__body`, e na 2.ª abertura
|
|
11633
|
+
* do menu o `closest` falhava no schedule e os pulsos deixavam de existir.
|
|
11634
|
+
*/
|
|
11635
|
+
if (this.isInsideMobileDrawer()) {
|
|
11636
|
+
const delaysMs = [90, 260, 420, 600];
|
|
11637
|
+
for (const ms of delaysMs) {
|
|
11638
|
+
const tid = window.setTimeout(() => {
|
|
11639
|
+
if (gen !== this.scrollToSelectedGeneration) {
|
|
11640
|
+
return;
|
|
11641
|
+
}
|
|
11642
|
+
queueMicrotask(() => {
|
|
11643
|
+
requestAnimationFrame(() => {
|
|
11644
|
+
this.runScrollToSelectedRetry(gen, 0);
|
|
11645
|
+
});
|
|
11646
|
+
});
|
|
11647
|
+
}, ms);
|
|
11648
|
+
this.drawerScrollAssistTimeouts.push(tid);
|
|
11649
|
+
}
|
|
11650
|
+
}
|
|
11651
|
+
queueMicrotask(() => {
|
|
11652
|
+
requestAnimationFrame(() => {
|
|
11653
|
+
requestAnimationFrame(() => {
|
|
11654
|
+
this.runScrollToSelectedRetry(gen, 0);
|
|
11655
|
+
});
|
|
11656
|
+
});
|
|
11657
|
+
});
|
|
11658
|
+
}, { injector: this.injector });
|
|
11659
|
+
}
|
|
11660
|
+
static { this.SCROLL_TO_SELECTED_MAX_ATTEMPTS = 48; }
|
|
11661
|
+
static { this.SCROLL_TO_SELECTED_MAX_ATTEMPTS_DRAWER = 96; }
|
|
11662
|
+
/** Sidebar projectada em `.app-drawer__body` — animação do painel e `overflow` do shell afectam o layout. */
|
|
11663
|
+
isInsideMobileDrawer() {
|
|
11664
|
+
return !!this.hostEl.nativeElement.closest('.app-drawer__body');
|
|
11665
|
+
}
|
|
11666
|
+
clearDrawerScrollAssistTimeouts() {
|
|
11667
|
+
for (const tid of this.drawerScrollAssistTimeouts) {
|
|
11668
|
+
clearTimeout(tid);
|
|
11669
|
+
}
|
|
11670
|
+
this.drawerScrollAssistTimeouts = [];
|
|
11671
|
+
}
|
|
11672
|
+
runScrollToSelectedRetry(gen, attempt) {
|
|
11673
|
+
if (gen !== this.scrollToSelectedGeneration) {
|
|
11674
|
+
return;
|
|
11675
|
+
}
|
|
11676
|
+
if (this.selectedItemId == null) {
|
|
11677
|
+
return;
|
|
11678
|
+
}
|
|
11679
|
+
/** Rail: `compressText` fica activo com `collapsed`; ainda assim queremos scroll até ao ícone. */
|
|
11680
|
+
if (!this.collapsed && this.listCompressText()) {
|
|
11681
|
+
return;
|
|
11682
|
+
}
|
|
11683
|
+
const maxAttempts = this.isInsideMobileDrawer()
|
|
11684
|
+
? AppSidebarComponent.SCROLL_TO_SELECTED_MAX_ATTEMPTS_DRAWER
|
|
11685
|
+
: AppSidebarComponent.SCROLL_TO_SELECTED_MAX_ATTEMPTS;
|
|
11298
11686
|
const scroll = this.getSidebarMenuListViewport();
|
|
11299
|
-
if (!scroll
|
|
11687
|
+
if (!scroll) {
|
|
11688
|
+
if (attempt < maxAttempts) {
|
|
11689
|
+
requestAnimationFrame(() => this.runScrollToSelectedRetry(gen, attempt + 1));
|
|
11690
|
+
}
|
|
11691
|
+
return;
|
|
11692
|
+
}
|
|
11693
|
+
/** Flex / animação do drawer: viewport pode ainda ter altura 0 no primeiro frame. */
|
|
11694
|
+
if (scroll.clientHeight < 4 && attempt < maxAttempts) {
|
|
11695
|
+
requestAnimationFrame(() => this.runScrollToSelectedRetry(gen, attempt + 1));
|
|
11300
11696
|
return;
|
|
11301
11697
|
}
|
|
11302
11698
|
const matches = scroll.querySelectorAll('.menu-list__option--selected');
|
|
11303
11699
|
if (matches.length === 0) {
|
|
11700
|
+
if (attempt < maxAttempts) {
|
|
11701
|
+
requestAnimationFrame(() => this.runScrollToSelectedRetry(gen, attempt + 1));
|
|
11702
|
+
}
|
|
11304
11703
|
return;
|
|
11305
11704
|
}
|
|
11306
11705
|
const selected = matches[matches.length - 1];
|
|
@@ -11332,17 +11731,18 @@ class AppSidebarComponent {
|
|
|
11332
11731
|
return this.hostEl.nativeElement.querySelector('.menu-list__viewport');
|
|
11333
11732
|
}
|
|
11334
11733
|
scrollSidebarScrollAreaToElement(scroll, target) {
|
|
11335
|
-
if (this.collapsed) {
|
|
11336
|
-
return;
|
|
11337
|
-
}
|
|
11338
11734
|
const marginCss = 10;
|
|
11735
|
+
/** No rail os ícones são densos — um pouco mais de folga no topo evita meio-ícone «cortado». */
|
|
11736
|
+
const topPadExtra = this.collapsed ? 8 : 0;
|
|
11737
|
+
/** Folga inferior — no drawer em lista completa puxamos mais para o item não ficar no limite. */
|
|
11738
|
+
const bottomComfortPx = Math.max(marginCss, this.collapsed ? marginCss : this.isInsideMobileDrawer() ? 52 : 44);
|
|
11339
11739
|
const basePeek = this.getMenuNeighborPeekHalfHeights(target);
|
|
11340
11740
|
/** Cabeçalhos de grupo: mais folga vertical (~vizinho + boost) para não ficarem «apertados». */
|
|
11341
11741
|
const groupPeekBoost = target.classList.contains('menu-list__group-row') ? 22 : 0;
|
|
11342
11742
|
const peekAbove = basePeek.peekAbove + groupPeekBoost;
|
|
11343
11743
|
const peekBelow = basePeek.peekBelow + groupPeekBoost;
|
|
11344
11744
|
/** Cabeçalho está fora do scroll — só margem no topo da viewport de scroll. */
|
|
11345
|
-
const topPad = marginCss;
|
|
11745
|
+
const topPad = marginCss + topPadExtra;
|
|
11346
11746
|
const scrRect = scroll.getBoundingClientRect();
|
|
11347
11747
|
const elRect = target.getBoundingClientRect();
|
|
11348
11748
|
const elTop = scroll.scrollTop + (elRect.top - scrRect.top);
|
|
@@ -11354,8 +11754,8 @@ class AppSidebarComponent {
|
|
|
11354
11754
|
if (elTop < viewTop + topPad) {
|
|
11355
11755
|
nextTop = elTop - topPad - peekAbove;
|
|
11356
11756
|
}
|
|
11357
|
-
else if (elBottom > viewBottom -
|
|
11358
|
-
nextTop = elBottom - scroll.clientHeight +
|
|
11757
|
+
else if (elBottom > viewBottom - bottomComfortPx) {
|
|
11758
|
+
nextTop = elBottom - scroll.clientHeight + bottomComfortPx + peekBelow;
|
|
11359
11759
|
}
|
|
11360
11760
|
else {
|
|
11361
11761
|
return;
|
|
@@ -11365,7 +11765,8 @@ class AppSidebarComponent {
|
|
|
11365
11765
|
if (Math.abs(nextTop - scroll.scrollTop) < 1) {
|
|
11366
11766
|
return;
|
|
11367
11767
|
}
|
|
11368
|
-
|
|
11768
|
+
const behavior = this.isInsideMobileDrawer() ? 'auto' : 'smooth';
|
|
11769
|
+
scroll.scrollTo({ top: nextTop, behavior });
|
|
11369
11770
|
}
|
|
11370
11771
|
/**
|
|
11371
11772
|
* Metade da altura da linha vizinha (opção ou cabeçalho de grupo) na mesma lista (fallback em px).
|
|
@@ -11496,11 +11897,11 @@ class AppSidebarComponent {
|
|
|
11496
11897
|
}
|
|
11497
11898
|
}
|
|
11498
11899
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11499
|
-
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 }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, clickToOpen: { classPropertyName: "clickToOpen", publicName: "clickToOpen", isSignal: false, isRequired: false, transformFunction: null }, groupCollapsible: { classPropertyName: "groupCollapsible", publicName: "groupCollapsible", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, groupDefaultExpansion: { classPropertyName: "groupDefaultExpansion", publicName: "groupDefaultExpansion", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, usesOnChanges: true, ngImport: i0, template: "<nav class=\"app-sidebar app-nav-surface\" [class.app-sidebar--collapsed]=\"collapsed\"\r\n [attr.aria-label]=\"'Navega\u00E7\u00E3o principal'\">\r\n <!-- Cabe\u00E7alho fixo; pesquisa fixa em `.menu-list__toolbar`; barra s\u00F3 em `.menu-list__viewport`. -->\r\n <div class=\"app-sidebar__head\" data-app-sidebar-head=\"\" translate=\"no\">\r\n <div class=\"app-sidebar__brand\"><ng-content select=\"[appSidebarBrand]\" /></div>\r\n <div class=\"app-sidebar__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n </div>\r\n <div class=\"app-sidebar__scroll\">\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 [searchable]=\"searchable\"\r\n [clickToOpen]=\"clickToOpen\"\r\n [groupCollapsible]=\"groupCollapsible\"\r\n [groupDefaultExpansion]=\"groupDefaultExpansion\"\r\n [selectedItemId]=\"selectedItemId\"\r\n (itemSelect)=\"
|
|
11900
|
+
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 }, mobileNavOpenPulse: { classPropertyName: "mobileNavOpenPulse", publicName: "mobileNavOpenPulse", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, limparAposPesquisar: { classPropertyName: "limparAposPesquisar", publicName: "limparAposPesquisar", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, clickToOpen: { classPropertyName: "clickToOpen", publicName: "clickToOpen", isSignal: false, isRequired: false, transformFunction: null }, groupCollapsible: { classPropertyName: "groupCollapsible", publicName: "groupCollapsible", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, groupDefaultExpansion: { classPropertyName: "groupDefaultExpansion", publicName: "groupDefaultExpansion", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, viewQueries: [{ propertyName: "menuList", first: true, predicate: MenuListComponent, descendants: true }], 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 <!-- Cabe\u00E7alho fixo; pesquisa fixa em `.menu-list__toolbar`; barra s\u00F3 em `.menu-list__viewport`. -->\r\n <div class=\"app-sidebar__head\" data-app-sidebar-head=\"\" translate=\"no\">\r\n <div class=\"app-sidebar__brand\"><ng-content select=\"[appSidebarBrand]\" /></div>\r\n <div class=\"app-sidebar__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n </div>\r\n <div class=\"app-sidebar__scroll\">\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 [searchable]=\"searchable\"\r\n [limparAposPesquisar]=\"limparAposPesquisar\"\r\n [clickToOpen]=\"clickToOpen\"\r\n [groupCollapsible]=\"groupCollapsible\"\r\n [groupDefaultExpansion]=\"groupDefaultExpansion\"\r\n [selectedItemId]=\"selectedItemId\"\r\n (itemSelect)=\"onSidebarItemSelect($event)\"\r\n (groupToggled)=\"onMenuGroupToggled($event)\"\r\n (selectionScrollHint)=\"scheduleScrollToSelected()\"\r\n />\r\n </div>\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;flex:1 1 auto;align-self:stretch;min-width:0;min-height:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:.65rem .35rem .65rem .5rem;background:var(--app-color-nav-shell-bg);border-right:1px solid var(--app-color-nav-border-subtle)}.app-sidebar--collapsed{padding-inline:.425rem}.app-sidebar__head[data-app-sidebar-head]{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:.35rem;width:100%;min-height:2.35rem;background:var(--app-color-nav-shell-bg);padding:0 .1rem .45rem;padding-inline-start:.85rem!important;padding-inline-end:calc(.1rem + 4px)!important;box-sizing:border-box;direction:ltr;unicode-bidi:isolate;flex-direction:row!important;justify-content:flex-start!important;direction:ltr!important}.app-sidebar--collapsed .app-sidebar__head[data-app-sidebar-head]{justify-content:center!important;padding-inline-start:0!important;padding-inline-end:4px!important;gap:0}.app-sidebar__brand{order:0;flex:1 1 0%;min-width:0;align-self:center;display:flex;justify-content:flex-start;align-items:center;padding:0;box-sizing:border-box;font-size:.95rem;font-weight:700;line-height:1.25;color:var(--app-color-text-primary, #1a2f45);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start!important}.app-sidebar__brand>*{text-align:inherit!important;margin-inline:0!important;margin-inline-start:0!important;margin-inline-end:0!important;padding-inline-start:0!important;padding-inline-end:0!important;box-sizing:border-box;min-width:0;align-self:center;max-width:100%}.app-sidebar__brand ::ng-deep [appSidebarBrand]{display:inline-flex!important;flex-direction:row!important;justify-content:flex-start!important;align-items:center!important;align-self:center!important;margin-inline-start:0!important;margin-inline-end:auto!important;margin-left:0!important;margin-right:auto!important;text-align:start!important;width:auto!important;max-width:100%!important;min-width:0!important;flex:1 1 0%!important;box-sizing:border-box}.app-sidebar__brand:empty{display:none}.app-sidebar--collapsed .app-sidebar__brand:not(:empty){display:none}.app-sidebar__toolbar{order:1;flex:0 0 auto;flex-shrink:0;display:flex;justify-content:flex-end;align-items:center;align-self:stretch;min-width:0;padding:0;box-sizing:border-box;margin-inline-start:auto!important}.app-sidebar__toolbar:empty{display:none}.app-sidebar--collapsed .app-sidebar__toolbar:not(:empty){flex:1 1 auto!important;width:100%!important;min-width:0!important;margin-inline-start:0!important;justify-content:center!important}.app-sidebar--collapsed .app-sidebar__toolbar ::ng-deep [appSidebarToolbar]:not(app-shell-sidebar-toggle)>:not(app-shell-sidebar-toggle){display:none!important}.app-sidebar__scroll{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column}.app-sidebar__list{flex:1 1 auto;min-height:0;width:100%;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}@media(min-width:52.0625rem){.app-sidebar .app-sidebar__head[data-app-sidebar-head]{padding-top:.2rem}.app-sidebar .app-sidebar__brand ::ng-deep [appSidebarBrand]{min-height:2.35rem!important;height:2.35rem!important;line-height:1!important}}:host-context(.app-drawer__body) .app-sidebar__head[data-app-sidebar-head]{justify-content:flex-start!important;align-items:center!important;padding-top:0!important;padding-bottom:.35rem!important;z-index:1!important}:host-context(.app-drawer__body) .app-sidebar__brand{justify-content:flex-start!important;flex:1 1 0%!important;min-width:0!important;text-align:start!important}:host-context(.app-drawer__body) .app-sidebar__toolbar:not(:empty){margin-inline-start:auto!important;justify-content:flex-end!important;align-self:stretch!important}:host-context(.app-drawer__body) .app-sidebar__brand ::ng-deep [appSidebarBrand]{justify-content:flex-start!important;margin-inline-start:0!important;margin-inline-end:auto!important;min-height:auto!important;height:auto!important;line-height:1.25!important}:host-context(.app-drawer__body) ::ng-deep app-menu-list .menu-list__label{padding-top:.72rem!important}:host-context(.app-drawer__body) ::ng-deep app-menu-list .menu-list__icon{transform:translateY(.1875rem)}:host-context(.app-shell__sidebar) .app-sidebar__brand ::ng-deep [appSidebarBrand]{justify-content:flex-start!important;margin-inline-start:0!important;margin-inline-end:auto!important;text-align:start!important}\n"], dependencies: [{ kind: "component", type: MenuListComponent, selector: "app-menu-list", inputs: ["appTheme", "items", "menuId", "dense", "nested", "selectedItemId", "compressText", "clickToOpen", "groupCollapsible", "groupDefaultExpansion", "persistGroupExpansion", "searchable", "limparAposPesquisar", "searchPlaceholder"], outputs: ["itemSelect", "closeRequest", "submenuBack", "groupToggled", "selectionScrollHint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
11500
11901
|
}
|
|
11501
11902
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppSidebarComponent, decorators: [{
|
|
11502
11903
|
type: Component,
|
|
11503
|
-
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 <!-- Cabe\u00E7alho fixo; pesquisa fixa em `.menu-list__toolbar`; barra s\u00F3 em `.menu-list__viewport`. -->\r\n <div class=\"app-sidebar__head\" data-app-sidebar-head=\"\" translate=\"no\">\r\n <div class=\"app-sidebar__brand\"><ng-content select=\"[appSidebarBrand]\" /></div>\r\n <div class=\"app-sidebar__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n </div>\r\n <div class=\"app-sidebar__scroll\">\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 [searchable]=\"searchable\"\r\n [clickToOpen]=\"clickToOpen\"\r\n [groupCollapsible]=\"groupCollapsible\"\r\n [groupDefaultExpansion]=\"groupDefaultExpansion\"\r\n [selectedItemId]=\"selectedItemId\"\r\n (itemSelect)=\"
|
|
11904
|
+
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 <!-- Cabe\u00E7alho fixo; pesquisa fixa em `.menu-list__toolbar`; barra s\u00F3 em `.menu-list__viewport`. -->\r\n <div class=\"app-sidebar__head\" data-app-sidebar-head=\"\" translate=\"no\">\r\n <div class=\"app-sidebar__brand\"><ng-content select=\"[appSidebarBrand]\" /></div>\r\n <div class=\"app-sidebar__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n </div>\r\n <div class=\"app-sidebar__scroll\">\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 [searchable]=\"searchable\"\r\n [limparAposPesquisar]=\"limparAposPesquisar\"\r\n [clickToOpen]=\"clickToOpen\"\r\n [groupCollapsible]=\"groupCollapsible\"\r\n [groupDefaultExpansion]=\"groupDefaultExpansion\"\r\n [selectedItemId]=\"selectedItemId\"\r\n (itemSelect)=\"onSidebarItemSelect($event)\"\r\n (groupToggled)=\"onMenuGroupToggled($event)\"\r\n (selectionScrollHint)=\"scheduleScrollToSelected()\"\r\n />\r\n </div>\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;flex:1 1 auto;align-self:stretch;min-width:0;min-height:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:.65rem .35rem .65rem .5rem;background:var(--app-color-nav-shell-bg);border-right:1px solid var(--app-color-nav-border-subtle)}.app-sidebar--collapsed{padding-inline:.425rem}.app-sidebar__head[data-app-sidebar-head]{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:.35rem;width:100%;min-height:2.35rem;background:var(--app-color-nav-shell-bg);padding:0 .1rem .45rem;padding-inline-start:.85rem!important;padding-inline-end:calc(.1rem + 4px)!important;box-sizing:border-box;direction:ltr;unicode-bidi:isolate;flex-direction:row!important;justify-content:flex-start!important;direction:ltr!important}.app-sidebar--collapsed .app-sidebar__head[data-app-sidebar-head]{justify-content:center!important;padding-inline-start:0!important;padding-inline-end:4px!important;gap:0}.app-sidebar__brand{order:0;flex:1 1 0%;min-width:0;align-self:center;display:flex;justify-content:flex-start;align-items:center;padding:0;box-sizing:border-box;font-size:.95rem;font-weight:700;line-height:1.25;color:var(--app-color-text-primary, #1a2f45);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start!important}.app-sidebar__brand>*{text-align:inherit!important;margin-inline:0!important;margin-inline-start:0!important;margin-inline-end:0!important;padding-inline-start:0!important;padding-inline-end:0!important;box-sizing:border-box;min-width:0;align-self:center;max-width:100%}.app-sidebar__brand ::ng-deep [appSidebarBrand]{display:inline-flex!important;flex-direction:row!important;justify-content:flex-start!important;align-items:center!important;align-self:center!important;margin-inline-start:0!important;margin-inline-end:auto!important;margin-left:0!important;margin-right:auto!important;text-align:start!important;width:auto!important;max-width:100%!important;min-width:0!important;flex:1 1 0%!important;box-sizing:border-box}.app-sidebar__brand:empty{display:none}.app-sidebar--collapsed .app-sidebar__brand:not(:empty){display:none}.app-sidebar__toolbar{order:1;flex:0 0 auto;flex-shrink:0;display:flex;justify-content:flex-end;align-items:center;align-self:stretch;min-width:0;padding:0;box-sizing:border-box;margin-inline-start:auto!important}.app-sidebar__toolbar:empty{display:none}.app-sidebar--collapsed .app-sidebar__toolbar:not(:empty){flex:1 1 auto!important;width:100%!important;min-width:0!important;margin-inline-start:0!important;justify-content:center!important}.app-sidebar--collapsed .app-sidebar__toolbar ::ng-deep [appSidebarToolbar]:not(app-shell-sidebar-toggle)>:not(app-shell-sidebar-toggle){display:none!important}.app-sidebar__scroll{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column}.app-sidebar__list{flex:1 1 auto;min-height:0;width:100%;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}@media(min-width:52.0625rem){.app-sidebar .app-sidebar__head[data-app-sidebar-head]{padding-top:.2rem}.app-sidebar .app-sidebar__brand ::ng-deep [appSidebarBrand]{min-height:2.35rem!important;height:2.35rem!important;line-height:1!important}}:host-context(.app-drawer__body) .app-sidebar__head[data-app-sidebar-head]{justify-content:flex-start!important;align-items:center!important;padding-top:0!important;padding-bottom:.35rem!important;z-index:1!important}:host-context(.app-drawer__body) .app-sidebar__brand{justify-content:flex-start!important;flex:1 1 0%!important;min-width:0!important;text-align:start!important}:host-context(.app-drawer__body) .app-sidebar__toolbar:not(:empty){margin-inline-start:auto!important;justify-content:flex-end!important;align-self:stretch!important}:host-context(.app-drawer__body) .app-sidebar__brand ::ng-deep [appSidebarBrand]{justify-content:flex-start!important;margin-inline-start:0!important;margin-inline-end:auto!important;min-height:auto!important;height:auto!important;line-height:1.25!important}:host-context(.app-drawer__body) ::ng-deep app-menu-list .menu-list__label{padding-top:.72rem!important}:host-context(.app-drawer__body) ::ng-deep app-menu-list .menu-list__icon{transform:translateY(.1875rem)}:host-context(.app-shell__sidebar) .app-sidebar__brand ::ng-deep [appSidebarBrand]{justify-content:flex-start!important;margin-inline-start:0!important;margin-inline-end:auto!important;text-align:start!important}\n"] }]
|
|
11504
11905
|
}], ctorParameters: () => [], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], items: [{
|
|
11505
11906
|
type: Input,
|
|
11506
11907
|
args: [{ required: true }]
|
|
@@ -11511,9 +11912,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
11511
11912
|
}], collapsed: [{
|
|
11512
11913
|
type: Input,
|
|
11513
11914
|
args: [{ transform: booleanAttribute }]
|
|
11915
|
+
}], mobileNavOpenPulse: [{
|
|
11916
|
+
type: Input,
|
|
11917
|
+
args: [{ transform: booleanAttribute }]
|
|
11514
11918
|
}], searchable: [{
|
|
11515
11919
|
type: Input,
|
|
11516
11920
|
args: [{ transform: booleanAttribute }]
|
|
11921
|
+
}], limparAposPesquisar: [{
|
|
11922
|
+
type: Input,
|
|
11923
|
+
args: [{ transform: booleanAttribute }]
|
|
11517
11924
|
}], clickToOpen: [{
|
|
11518
11925
|
type: Input
|
|
11519
11926
|
}], groupCollapsible: [{
|
|
@@ -11523,6 +11930,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
11523
11930
|
type: Input
|
|
11524
11931
|
}], itemSelect: [{
|
|
11525
11932
|
type: Output
|
|
11933
|
+
}], menuList: [{
|
|
11934
|
+
type: ViewChild,
|
|
11935
|
+
args: [MenuListComponent]
|
|
11526
11936
|
}] } });
|
|
11527
11937
|
|
|
11528
11938
|
/**
|