structra-ui 0.2.34 → 0.2.36
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 +403 -104
- package/fesm2022/structra-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/structra-ui.css +1 -1
- package/types/structra-ui.d.ts +46 -120
package/fesm2022/structra-ui.mjs
CHANGED
|
@@ -5,7 +5,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
|
5
5
|
import * as i1$1 from '@angular/forms';
|
|
6
6
|
import { Validators, FormGroupDirective, NgForm, NgControl, NG_VALUE_ACCESSOR, FormsModule, FormGroup, FormArray, FormControl } from '@angular/forms';
|
|
7
7
|
import { NgClass, NgTemplateOutlet, DOCUMENT, NgStyle } from '@angular/common';
|
|
8
|
-
import { CdkConnectedOverlay, CdkOverlayOrigin
|
|
8
|
+
import { Overlay, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
|
|
9
9
|
import * as i1 from '@angular/cdk/scrolling';
|
|
10
10
|
import { CdkScrollable } from '@angular/cdk/scrolling';
|
|
11
11
|
import { merge, distinctUntilChanged, firstValueFrom, fromEvent, timer } from 'rxjs';
|
|
@@ -260,6 +260,10 @@ class BaseFieldDirective {
|
|
|
260
260
|
this.name = '';
|
|
261
261
|
this.label = '';
|
|
262
262
|
this.placeholder = '';
|
|
263
|
+
/**
|
|
264
|
+
* Escala visual: `sm` (compacto), `md` (padrão), `lg` (maior).
|
|
265
|
+
*/
|
|
266
|
+
this.size = 'md';
|
|
263
267
|
this.errorMessage = '';
|
|
264
268
|
/** Se `true`, exibe o parágrafo de erro; por defeito `false` (só estado inválido na borda/label). */
|
|
265
269
|
this.showErrorMessage = false;
|
|
@@ -445,7 +449,7 @@ class BaseFieldDirective {
|
|
|
445
449
|
});
|
|
446
450
|
}
|
|
447
451
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
448
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.9", type: BaseFieldDirective, isStandalone: true, inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", errorMessage: "errorMessage", showErrorMessage: "showErrorMessage", invalidThemed: ["invalidThemed", "invalidThemed", booleanAttribute], required: "required", showRequiredMark: "showRequiredMark", readonly: "readonly", showPrefixIcon: "showPrefixIcon", prefixIcon: "prefixIcon", iconLeft: "iconLeft", clearable: "clearable", clearAriaLabel: "clearAriaLabel", autocomplete: ["autocomplete", "autocomplete", booleanAttribute], loading: ["loading", "loading", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], mostrarMenuContexto: ["mostrarMenuContexto", "mostrarMenuContexto", booleanAttribute], contextMenuItems: "contextMenuItems", contextMenuId: "contextMenuId" }, outputs: { contextMenuSelect: "contextMenuSelect" }, host: { properties: { "attr.data-control-id": "this.hostDataControlId" } }, ngImport: i0 }); }
|
|
452
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.9", type: BaseFieldDirective, isStandalone: true, inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", size: "size", errorMessage: "errorMessage", showErrorMessage: "showErrorMessage", invalidThemed: ["invalidThemed", "invalidThemed", booleanAttribute], required: "required", showRequiredMark: "showRequiredMark", readonly: "readonly", showPrefixIcon: "showPrefixIcon", prefixIcon: "prefixIcon", iconLeft: "iconLeft", clearable: "clearable", clearAriaLabel: "clearAriaLabel", autocomplete: ["autocomplete", "autocomplete", booleanAttribute], loading: ["loading", "loading", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], mostrarMenuContexto: ["mostrarMenuContexto", "mostrarMenuContexto", booleanAttribute], contextMenuItems: "contextMenuItems", contextMenuId: "contextMenuId" }, outputs: { contextMenuSelect: "contextMenuSelect" }, host: { properties: { "attr.data-control-id": "this.hostDataControlId" } }, ngImport: i0 }); }
|
|
449
453
|
}
|
|
450
454
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseFieldDirective, decorators: [{
|
|
451
455
|
type: Directive
|
|
@@ -457,6 +461,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
457
461
|
type: Input
|
|
458
462
|
}], placeholder: [{
|
|
459
463
|
type: Input
|
|
464
|
+
}], size: [{
|
|
465
|
+
type: Input
|
|
460
466
|
}], errorMessage: [{
|
|
461
467
|
type: Input
|
|
462
468
|
}], showErrorMessage: [{
|
|
@@ -882,6 +888,7 @@ const DEFAULT_CONNECTED_POSITIONS = [
|
|
|
882
888
|
class DropdownBaseComponent {
|
|
883
889
|
constructor() {
|
|
884
890
|
this.appTheme = inject(AppThemeService);
|
|
891
|
+
this.overlay = inject(Overlay);
|
|
885
892
|
/**
|
|
886
893
|
* O overlay do CDK fica sob `body`; sem estas classes, `var(--app-color-*)` cai no `:root`.
|
|
887
894
|
* Tem de ser **array**: uma única string com espaço quebra `classList.add` e as classes não aplicam.
|
|
@@ -902,12 +909,21 @@ class DropdownBaseComponent {
|
|
|
902
909
|
this.hasBackdrop = true;
|
|
903
910
|
/** Empurra o overlay para caber no viewport quando há espaço insuficiente. */
|
|
904
911
|
this.pushConnectedOverlay = false;
|
|
912
|
+
/**
|
|
913
|
+
* Por omissão **reposiciona** o painel quando o viewport ou contentores com scroll se movem
|
|
914
|
+
* (mesma ideia que submenus em `app-menu-list`). Sobrescrever só em casos especiais (ex.: fechar ao scroll).
|
|
915
|
+
*/
|
|
916
|
+
this.scrollStrategy = null;
|
|
917
|
+
this.defaultScrollStrategy = this.overlay.scrollStrategies.reposition();
|
|
905
918
|
/**
|
|
906
919
|
* `true`: painel sem fundo/borda/sombra próprios — o conteúdo (ex.: `app-menu-list`) define o chrome.
|
|
907
920
|
* Evita dupla moldura com `menu-surface-shell` nos menus de acção.
|
|
908
921
|
*/
|
|
909
922
|
this.bareOverlayPanel = false;
|
|
910
923
|
}
|
|
924
|
+
get effectiveScrollStrategy() {
|
|
925
|
+
return this.scrollStrategy ?? this.defaultScrollStrategy;
|
|
926
|
+
}
|
|
911
927
|
get overlayWidthPx() {
|
|
912
928
|
const w = this.panelWidthPx;
|
|
913
929
|
return w != null && w > 0 ? w : 0;
|
|
@@ -942,11 +958,11 @@ class DropdownBaseComponent {
|
|
|
942
958
|
this.setOpen(!this.open);
|
|
943
959
|
}
|
|
944
960
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
945
|
-
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], 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 [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 }); }
|
|
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 }); }
|
|
946
962
|
}
|
|
947
963
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownBaseComponent, decorators: [{
|
|
948
964
|
type: Component,
|
|
949
|
-
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 [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"] }]
|
|
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"] }]
|
|
950
966
|
}], propDecorators: { open: [{
|
|
951
967
|
type: Input,
|
|
952
968
|
args: [{ transform: booleanAttribute }]
|
|
@@ -968,6 +984,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
968
984
|
}], pushConnectedOverlay: [{
|
|
969
985
|
type: Input,
|
|
970
986
|
args: [{ transform: booleanAttribute }]
|
|
987
|
+
}], scrollStrategy: [{
|
|
988
|
+
type: Input
|
|
971
989
|
}], bareOverlayPanel: [{
|
|
972
990
|
type: Input,
|
|
973
991
|
args: [{ transform: booleanAttribute }]
|
|
@@ -985,6 +1003,46 @@ var MenuDropdownPlacement;
|
|
|
985
1003
|
MenuDropdownPlacement["Above"] = "above";
|
|
986
1004
|
})(MenuDropdownPlacement || (MenuDropdownPlacement = {}));
|
|
987
1005
|
|
|
1006
|
+
/** Espaço entre trigger e painel (listas alinhadas ao `start`); mais apertado que `anchoredOverlayPositions` (8px). */
|
|
1007
|
+
const GAP = 4;
|
|
1008
|
+
/** Posições com flip vertical (preferência em baixo ou em cima). */
|
|
1009
|
+
function menuConnectedPositions(placement) {
|
|
1010
|
+
if (placement === MenuDropdownPlacement.Above) {
|
|
1011
|
+
return [
|
|
1012
|
+
{
|
|
1013
|
+
originX: 'start',
|
|
1014
|
+
originY: 'top',
|
|
1015
|
+
overlayX: 'start',
|
|
1016
|
+
overlayY: 'bottom',
|
|
1017
|
+
offsetY: -GAP,
|
|
1018
|
+
},
|
|
1019
|
+
{
|
|
1020
|
+
originX: 'start',
|
|
1021
|
+
originY: 'bottom',
|
|
1022
|
+
overlayX: 'start',
|
|
1023
|
+
overlayY: 'top',
|
|
1024
|
+
offsetY: GAP,
|
|
1025
|
+
},
|
|
1026
|
+
];
|
|
1027
|
+
}
|
|
1028
|
+
return [
|
|
1029
|
+
{
|
|
1030
|
+
originX: 'start',
|
|
1031
|
+
originY: 'bottom',
|
|
1032
|
+
overlayX: 'start',
|
|
1033
|
+
overlayY: 'top',
|
|
1034
|
+
offsetY: GAP,
|
|
1035
|
+
},
|
|
1036
|
+
{
|
|
1037
|
+
originX: 'start',
|
|
1038
|
+
originY: 'top',
|
|
1039
|
+
overlayX: 'start',
|
|
1040
|
+
overlayY: 'bottom',
|
|
1041
|
+
offsetY: -GAP,
|
|
1042
|
+
},
|
|
1043
|
+
];
|
|
1044
|
+
}
|
|
1045
|
+
|
|
988
1046
|
/**
|
|
989
1047
|
* Separador semântico reutilizável — mesma apresentação que o divisor do modelo de dados (`kind: 'divider'`).
|
|
990
1048
|
*/
|
|
@@ -1033,7 +1091,7 @@ class MenuGroupComponent {
|
|
|
1033
1091
|
<div class="menu-list__group-label" role="presentation">{{ label }}</div>
|
|
1034
1092
|
}
|
|
1035
1093
|
}
|
|
1036
|
-
`, isInline: true, styles: [".menu-list__group-label{font-size:.
|
|
1094
|
+
`, isInline: true, styles: [".menu-list__group-label{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--app-color-nav-group-heading, #9ca3af);padding:.65rem .75rem .4rem;margin-top:.15rem;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .08))}.menu-list__group-label:first-child{margin-top:0;padding-top:.4rem;border-top:none}.menu-list__group-toggle{display:flex;align-items:center;justify-content:space-between;gap:.35rem;width:100%;margin:0;margin-top:.15rem;padding:.65rem .75rem .4rem;border:none;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .08));border-radius:0;background:transparent;cursor:pointer;text-align:start;font:inherit;color:var(--app-color-nav-group-heading, #9ca3af);box-sizing:border-box;-webkit-tap-highlight-color:transparent}.menu-list__group-toggle:first-child{margin-top:0;padding-top:.4rem;border-top:none}.menu-list__group-toggle:hover{color:#6b7280}.menu-list__group-toggle:focus-visible{outline:2px solid var(--app-color-nav-focus-ring, #2b6cb0);outline-offset:2px}.menu-list__group-toggle-label{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;flex:1 1 auto;min-width:0}.menu-list__group-toggle-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;font-size:.65rem;line-height:1;opacity:.85;color:currentColor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1037
1095
|
}
|
|
1038
1096
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuGroupComponent, decorators: [{
|
|
1039
1097
|
type: Component,
|
|
@@ -1059,7 +1117,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1059
1117
|
<div class="menu-list__group-label" role="presentation">{{ label }}</div>
|
|
1060
1118
|
}
|
|
1061
1119
|
}
|
|
1062
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".menu-list__group-label{font-size:.
|
|
1120
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".menu-list__group-label{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--app-color-nav-group-heading, #9ca3af);padding:.65rem .75rem .4rem;margin-top:.15rem;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .08))}.menu-list__group-label:first-child{margin-top:0;padding-top:.4rem;border-top:none}.menu-list__group-toggle{display:flex;align-items:center;justify-content:space-between;gap:.35rem;width:100%;margin:0;margin-top:.15rem;padding:.65rem .75rem .4rem;border:none;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .08));border-radius:0;background:transparent;cursor:pointer;text-align:start;font:inherit;color:var(--app-color-nav-group-heading, #9ca3af);box-sizing:border-box;-webkit-tap-highlight-color:transparent}.menu-list__group-toggle:first-child{margin-top:0;padding-top:.4rem;border-top:none}.menu-list__group-toggle:hover{color:#6b7280}.menu-list__group-toggle:focus-visible{outline:2px solid var(--app-color-nav-focus-ring, #2b6cb0);outline-offset:2px}.menu-list__group-toggle-label{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;flex:1 1 auto;min-width:0}.menu-list__group-toggle-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;font-size:.65rem;line-height:1;opacity:.85;color:currentColor}\n"] }]
|
|
1063
1121
|
}], propDecorators: { label: [{
|
|
1064
1122
|
type: Input
|
|
1065
1123
|
}], hideLabel: [{
|
|
@@ -1188,7 +1246,7 @@ const SUBMENU_OPEN_MS = 200;
|
|
|
1188
1246
|
* não fica no DOM do trigger) sem fechar; emparelha com a sobreposição de posição.
|
|
1189
1247
|
*/
|
|
1190
1248
|
const SUBMENU_CLOSE_MS = 1200;
|
|
1191
|
-
class
|
|
1249
|
+
class MenuListBodyComponent {
|
|
1192
1250
|
constructor() {
|
|
1193
1251
|
this.cdr = inject(ChangeDetectorRef);
|
|
1194
1252
|
this.hostRef = inject((ElementRef));
|
|
@@ -1226,6 +1284,10 @@ class MenuListComponent {
|
|
|
1226
1284
|
* - `'first'` — só o primeiro grupo expandível fica aberto; os restantes recolhidos.
|
|
1227
1285
|
*/
|
|
1228
1286
|
this.groupDefaultExpansion = 'all';
|
|
1287
|
+
/**
|
|
1288
|
+
* Quando `true`, expande todos os grupos colapsáveis (ex.: pesquisa activa na lista raiz).
|
|
1289
|
+
*/
|
|
1290
|
+
this.expandAllGroupsInitially = false;
|
|
1229
1291
|
this.itemSelect = new EventEmitter();
|
|
1230
1292
|
this.closeRequest = new EventEmitter();
|
|
1231
1293
|
this.submenuBack = new EventEmitter();
|
|
@@ -1270,24 +1332,21 @@ class MenuListComponent {
|
|
|
1270
1332
|
}
|
|
1271
1333
|
}
|
|
1272
1334
|
ngOnChanges(changes) {
|
|
1273
|
-
if (changes['items']) {
|
|
1274
|
-
this.
|
|
1275
|
-
this.applyInitialExpandedGroups();
|
|
1276
|
-
this.syncDisplayRows();
|
|
1277
|
-
if (this.focusableCount === 0) {
|
|
1278
|
-
this.activeIndex = -1;
|
|
1279
|
-
}
|
|
1280
|
-
else if (this.activeIndex >= this.focusableCount) {
|
|
1281
|
-
this.activeIndex = -1;
|
|
1282
|
-
}
|
|
1335
|
+
if (changes['items'] || changes['expandAllGroupsInitially']) {
|
|
1336
|
+
this.rebuildRowsFromItems();
|
|
1283
1337
|
}
|
|
1284
1338
|
else if (changes['groupCollapsible'] ||
|
|
1285
1339
|
changes['compressText'] ||
|
|
1286
1340
|
changes['groupDefaultExpansion']) {
|
|
1287
|
-
if (changes['
|
|
1288
|
-
this.
|
|
1341
|
+
if (changes['compressText']) {
|
|
1342
|
+
this.rebuildRowsFromItems();
|
|
1343
|
+
}
|
|
1344
|
+
else {
|
|
1345
|
+
if (changes['groupDefaultExpansion'] && !changes['items']) {
|
|
1346
|
+
this.applyInitialExpandedGroups();
|
|
1347
|
+
}
|
|
1348
|
+
this.syncDisplayRows();
|
|
1289
1349
|
}
|
|
1290
|
-
this.syncDisplayRows();
|
|
1291
1350
|
if (this.focusableCount === 0) {
|
|
1292
1351
|
this.activeIndex = -1;
|
|
1293
1352
|
}
|
|
@@ -1297,6 +1356,7 @@ class MenuListComponent {
|
|
|
1297
1356
|
}
|
|
1298
1357
|
if (changes['selectedItemId'] ||
|
|
1299
1358
|
changes['items'] ||
|
|
1359
|
+
changes['expandAllGroupsInitially'] ||
|
|
1300
1360
|
changes['compressText'] ||
|
|
1301
1361
|
changes['dense'] ||
|
|
1302
1362
|
changes['menuId'] ||
|
|
@@ -1306,6 +1366,54 @@ class MenuListComponent {
|
|
|
1306
1366
|
this.cdr.markForCheck();
|
|
1307
1367
|
}
|
|
1308
1368
|
}
|
|
1369
|
+
getRowsSourceItems() {
|
|
1370
|
+
return [...(this.items ?? [])];
|
|
1371
|
+
}
|
|
1372
|
+
rebuildRowsFromItems() {
|
|
1373
|
+
this.rows = buildMenuRows(this.getRowsSourceItems());
|
|
1374
|
+
if (this.expandAllGroupsInitially) {
|
|
1375
|
+
this.expandAllVisibleGroupsWhenSearching();
|
|
1376
|
+
}
|
|
1377
|
+
else {
|
|
1378
|
+
this.applyInitialExpandedGroups();
|
|
1379
|
+
}
|
|
1380
|
+
this.syncDisplayRows();
|
|
1381
|
+
if (this.focusableCount === 0) {
|
|
1382
|
+
this.activeIndex = -1;
|
|
1383
|
+
}
|
|
1384
|
+
else if (this.activeIndex >= this.focusableCount) {
|
|
1385
|
+
this.activeIndex = -1;
|
|
1386
|
+
}
|
|
1387
|
+
this.applySearchSubmenuAutoOpen();
|
|
1388
|
+
}
|
|
1389
|
+
/**
|
|
1390
|
+
* Com pesquisa activa (lista filtrada), abre o primeiro submenu deste nível que
|
|
1391
|
+
* ainda tenha itens visíveis — para o utilizador ver logo o resultado sem hover/clique.
|
|
1392
|
+
*/
|
|
1393
|
+
applySearchSubmenuAutoOpen() {
|
|
1394
|
+
if (!this.expandAllGroupsInitially) {
|
|
1395
|
+
return;
|
|
1396
|
+
}
|
|
1397
|
+
for (let i = 0; i < this.displayRows.length; i++) {
|
|
1398
|
+
const row = this.displayRows[i];
|
|
1399
|
+
if (row.kind !== 'submenu' || row.item.disabled) {
|
|
1400
|
+
continue;
|
|
1401
|
+
}
|
|
1402
|
+
if (row.item.items?.length) {
|
|
1403
|
+
this.openSubmenuKey = this.submenuRowKey(row, i);
|
|
1404
|
+
this.cdr.markForCheck();
|
|
1405
|
+
return;
|
|
1406
|
+
}
|
|
1407
|
+
}
|
|
1408
|
+
}
|
|
1409
|
+
expandAllVisibleGroupsWhenSearching() {
|
|
1410
|
+
this.expandedGroupIds.clear();
|
|
1411
|
+
for (const r of this.rows) {
|
|
1412
|
+
if (r.kind === 'group' && !r.alwaysExpanded) {
|
|
1413
|
+
this.expandedGroupIds.add(r.groupId);
|
|
1414
|
+
}
|
|
1415
|
+
}
|
|
1416
|
+
}
|
|
1309
1417
|
/** Estado inicial de grupos expandidos (chaveado por {@link groupDefaultExpansion}). */
|
|
1310
1418
|
applyInitialExpandedGroups() {
|
|
1311
1419
|
this.expandedGroupIds.clear();
|
|
@@ -1607,7 +1715,37 @@ class MenuListComponent {
|
|
|
1607
1715
|
const el = this.hostRef.nativeElement.querySelector(`#${CSS.escape(id)}`);
|
|
1608
1716
|
el?.focus({ preventScroll: true });
|
|
1609
1717
|
}
|
|
1718
|
+
/**
|
|
1719
|
+
* O campo de pesquisa (e outros controlos) projectam-se dentro deste host; os eventos
|
|
1720
|
+
* sobem em bubble e activavam Space/Enter como se fossem opções do menu.
|
|
1721
|
+
*/
|
|
1722
|
+
eventTargetIsInsideEditableOrControl(ev) {
|
|
1723
|
+
const path = typeof ev.composedPath === 'function' ? ev.composedPath() : [ev.target];
|
|
1724
|
+
for (const node of path) {
|
|
1725
|
+
if (!(node instanceof HTMLElement)) {
|
|
1726
|
+
continue;
|
|
1727
|
+
}
|
|
1728
|
+
if (node.tagName === 'INPUT' ||
|
|
1729
|
+
node.tagName === 'TEXTAREA' ||
|
|
1730
|
+
node.tagName === 'SELECT' ||
|
|
1731
|
+
node.tagName === 'BUTTON') {
|
|
1732
|
+
return true;
|
|
1733
|
+
}
|
|
1734
|
+
if (node.isContentEditable) {
|
|
1735
|
+
return true;
|
|
1736
|
+
}
|
|
1737
|
+
}
|
|
1738
|
+
return false;
|
|
1739
|
+
}
|
|
1740
|
+
onFocusIn(ev) {
|
|
1741
|
+
if (this.eventTargetIsInsideEditableOrControl(ev)) {
|
|
1742
|
+
this.resetHighlight();
|
|
1743
|
+
}
|
|
1744
|
+
}
|
|
1610
1745
|
onKeydown(ev) {
|
|
1746
|
+
if (this.eventTargetIsInsideEditableOrControl(ev)) {
|
|
1747
|
+
return;
|
|
1748
|
+
}
|
|
1611
1749
|
if (ev.key === 'ArrowLeft' && this.nested) {
|
|
1612
1750
|
ev.preventDefault();
|
|
1613
1751
|
this.submenuBack.emit();
|
|
@@ -1707,20 +1845,20 @@ class MenuListComponent {
|
|
|
1707
1845
|
break;
|
|
1708
1846
|
}
|
|
1709
1847
|
}
|
|
1710
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type:
|
|
1711
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MenuListComponent, isStandalone: true, selector: "app-menu-list", inputs: { appTheme: { classPropertyName: "appTheme", publicName: "appTheme", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: true, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: false, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, nested: { classPropertyName: "nested", publicName: "nested", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectedItemId: { classPropertyName: "selectedItemId", publicName: "selectedItemId", isSignal: false, isRequired: false, transformFunction: null }, compressText: { classPropertyName: "compressText", publicName: "compressText", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, clickToOpen: { classPropertyName: "clickToOpen", publicName: "clickToOpen", isSignal: false, isRequired: false, transformFunction: null }, groupCollapsible: { classPropertyName: "groupCollapsible", publicName: "groupCollapsible", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, groupDefaultExpansion: { classPropertyName: "groupDefaultExpansion", publicName: "groupDefaultExpansion", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", closeRequest: "closeRequest", submenuBack: "submenuBack" }, host: { listeners: { "keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "nestedLists", predicate: MenuListComponent, descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i1.CdkScrollable }], ngImport: i0, template: "<div\n class=\"menu-list\"\n [class.menu-list--nested]=\"nested\"\n [class.menu-list--dense]=\"dense\"\n [class.menu-list--compress-text]=\"compressText\"\n cdkScrollable\n role=\"menu\"\n [attr.aria-labelledby]=\"null\"\n tabindex=\"-1\"\n (mouseleave)=\"onMenuSurfaceLeave()\"\n>\n @for (row of displayRows; track trackDisplayRow($index, row); let idx = $index) {\n @switch (row.kind) {\n @case ('divider') {\n <app-menu-divider (mouseenter)=\"onNonOptionSurfaceEnter()\" />\n }\n @case ('group') {\n <div\n class=\"menu-list__group-row\"\n [class.menu-list__group-row--pinned]=\"row.alwaysExpanded\"\n (mouseenter)=\"onNonOptionSurfaceEnter()\"\n >\n <app-menu-group\n [label]=\"row.label\"\n [hideLabel]=\"compressText\"\n [collapsible]=\"groupCollapsible && !compressText && !row.alwaysExpanded\"\n [expanded]=\"isGroupExpanded(row.groupId)\"\n (toggleExpand)=\"toggleGroup(row.groupId)\"\n />\n </div>\n }\n @case ('submenu') {\n <div\n class=\"menu-list__submenu-wrap\"\n cdkOverlayOrigin\n #subOrigin=\"cdkOverlayOrigin\"\n (mouseenter)=\"onSubmenuTriggerEnter(row, idx)\"\n (mouseleave)=\"onSubmenuTriggerLeave(row, idx)\"\n >\n <div\n class=\"menu-list__option menu-list__option--submenu\"\n role=\"menuitem\"\n [attr.aria-haspopup]=\"'true'\"\n [attr.aria-expanded]=\"isSubmenuOpen(row, idx)\"\n [id]=\"row.focusIndex !== null ? optionId(row.focusIndex) : null\"\n [attr.tabindex]=\"row.focusIndex !== null && !row.item.disabled ? (isActiveRow(row) ? 0 : -1) : -1\"\n [attr.aria-disabled]=\"row.item.disabled ? true : null\"\n [attr.title]=\"compressText ? row.item.label : null\"\n [attr.aria-label]=\"compressText ? row.item.label : null\"\n [class.menu-list__option--disabled]=\"row.item.disabled\"\n [class.menu-list__option--active]=\"isActiveRow(row)\"\n [class.menu-list__option--selected]=\"isRowSelected(row)\"\n (click)=\"onSubmenuRowClick($event, row, idx)\"\n (mouseenter)=\"onRowMouseEnter(row)\"\n >\n @if (row.item.icon?.trim()) {\n <span class=\"menu-list__icon\" aria-hidden=\"true\">\n <i [ngClass]=\"row.item.icon\"></i>\n </span>\n }\n <span class=\"menu-list__text\">\n <span class=\"menu-list__label\">{{ row.item.label }}</span>\n @if (row.item.description?.trim()) {\n <span class=\"menu-list__description\">{{ row.item.description }}</span>\n }\n </span>\n <span class=\"menu-list__submenu-chevron\" aria-hidden=\"true\">\n @if (isSubmenuOpen(row, idx)) {\n <i class=\"fa-solid fa-chevron-right\"></i>\n } @else {\n <i class=\"fa-solid fa-chevron-down\"></i>\n }\n </span>\n </div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"subOrigin\"\n [cdkConnectedOverlayOpen]=\"isSubmenuOpen(row, idx)\"\n [cdkConnectedOverlayPositions]=\"submenuPositions\"\n [cdkConnectedOverlayPush]=\"true\"\n [cdkConnectedOverlayPanelClass]=\"overlayPanelClasses()\"\n [cdkConnectedOverlayMinWidth]=\"200\"\n (overlayOutsideClick)=\"onSubmenuOutsideClick(row, idx)\"\n >\n <div\n class=\"menu-submenu__panel\"\n [ngClass]=\"panelThemeNgClass()\"\n (mouseenter)=\"onSubmenuPanelEnter()\"\n (mouseleave)=\"onSubmenuPanelLeave(row, idx)\"\n (click)=\"$event.stopPropagation()\"\n >\n <app-menu-list\n [items]=\"row.item.items\"\n [menuId]=\"submenuMenuId(row)\"\n [nested]=\"true\"\n [dense]=\"dense\"\n [compressText]=\"compressText\"\n [groupCollapsible]=\"groupCollapsible\"\n [clickToOpen]=\"clickToOpen\"\n [selectedItemId]=\"selectedItemId\"\n (itemSelect)=\"onNestedItemSelect($event)\"\n (closeRequest)=\"closeRequest.emit()\"\n (submenuBack)=\"closeOpenSubmenu()\"\n />\n </div>\n </ng-template>\n </div>\n }\n @case ('action') {\n <div\n class=\"menu-list__option\"\n role=\"menuitem\"\n [id]=\"row.focusIndex !== null ? optionId(row.focusIndex) : null\"\n [attr.tabindex]=\"row.focusIndex !== null && !row.item.disabled ? (isActiveRow(row) ? 0 : -1) : -1\"\n [attr.aria-disabled]=\"row.item.disabled ? true : null\"\n [attr.aria-busy]=\"row.item.loading ? true : null\"\n [attr.title]=\"compressText ? row.item.label : null\"\n [attr.aria-label]=\"compressText ? row.item.label : null\"\n [class.menu-list__option--disabled]=\"row.item.disabled\"\n [class.menu-list__option--loading]=\"row.item.loading\"\n [class.menu-list__option--danger]=\"row.item.danger\"\n [class.menu-list__option--active]=\"isActiveRow(row)\"\n [class.menu-list__option--selected]=\"isRowSelected(row)\"\n (click)=\"onItemClick($event, row.item)\"\n (mouseenter)=\"onRowMouseEnter(row)\"\n >\n @if (row.item.loading) {\n <span class=\"menu-list__icon menu-list__icon--spin\" aria-hidden=\"true\">\n <i class=\"fa-solid fa-spinner\"></i>\n </span>\n } @else if (row.item.icon?.trim()) {\n <span class=\"menu-list__icon\" aria-hidden=\"true\">\n <i [ngClass]=\"row.item.icon\"></i>\n </span>\n }\n <span class=\"menu-list__text\">\n <span class=\"menu-list__label\">{{ row.item.label }}</span>\n @if (row.item.description?.trim()) {\n <span class=\"menu-list__description\">{{ row.item.description }}</span>\n }\n </span>\n </div>\n }\n }\n }\n</div>\n", styles: ["@charset \"UTF-8\";@keyframes app-sidebar-nav-reveal-in{0%{opacity:0;transform:translate3d(-.45rem,0,0)}to{opacity:1;transform:translateZ(0)}}:host{display:block;min-width:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.menu-list{background:var(--app-color-surface, #ffffff);border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .12));border-radius:10px;box-shadow:0 10px 28px -14px #0f172a29;max-height:min(70vh,22rem);overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;gap:.1rem;padding:.45rem 0;outline:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.menu-list--dense{padding:.2rem 0;gap:0}.menu-list__group-row{display:block;width:100%}.menu-list__group-row--pinned .menu-list__group-label{color:var(--app-color-nav-group-label, #6b7280)}.menu-list__submenu-wrap{position:relative;display:block}.menu-list__option{display:flex;align-items:center;box-sizing:border-box;gap:.5rem;margin:0 .25rem;padding:.48rem .6rem;border-radius:8px;cursor:pointer;color:var(--app-color-text-primary, #1a2f45);background:transparent;border:1px solid transparent;text-align:left;font:inherit;line-height:1.25}.menu-list__option:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:1px}.menu-list__option:hover:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:color-mix(in srgb,var(--app-color-primary) 6%,transparent)}.menu-list__option.menu-list__option--active:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:color-mix(in srgb,var(--app-color-primary) 7%,transparent);border-color:transparent}.menu-list__option.menu-list__option--active:not(.menu-list__option--disabled):not(.menu-list__option--loading):not(.menu-list__option--selected){box-shadow:none}.menu-list__option.menu-list__option--disabled{cursor:not-allowed;color:var(--app-color-text-muted, #6b8299);background:transparent;opacity:.72}.menu-list__option.menu-list__option--loading{cursor:wait;opacity:.92;pointer-events:none}.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading){color:var(--app-color-error, #b91c1c)}.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading):hover,.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading).menu-list__option--active{background:var(--app-color-error-bg-subtle, rgba(185, 28, 28, .12));border-color:transparent;box-shadow:inset 2px 0 0 0 var(--app-color-error-border, #dc2626)}.menu-list__option--submenu{padding-right:.35rem}.menu-list__option--selected:not(.menu-list__option--disabled){background:color-mix(in srgb,var(--app-color-primary) 9%,transparent);border-radius:8px;border-color:transparent;box-shadow:inset 2px 0 0 0 var(--app-color-primary, #2b7fd9)}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__label{color:var(--app-color-primary, #2b7fd9);font-weight:600}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__icon{color:var(--app-color-primary, #2b7fd9)}.menu-list--compress-text .menu-list__label,.menu-list--compress-text .menu-list__description{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.menu-list--compress-text .menu-list__text,.menu-list--compress-text .menu-list__submenu-chevron{display:none}.menu-list--compress-text .menu-list__submenu-wrap{width:100%}.menu-list--compress-text .menu-list__option{justify-content:center;align-items:center;text-align:center;width:calc(100% - .5rem);max-width:100%;box-sizing:border-box;margin-left:.25rem;margin-right:.25rem;padding:.5rem .35rem}.menu-list--compress-text .menu-list__option--submenu{padding-left:.35rem;padding-right:.35rem}.menu-list--compress-text .menu-list__icon{flex:0 0 auto;width:auto;min-width:1.75rem;display:inline-flex;align-items:center;justify-content:center;padding-top:0}.menu-list__submenu-chevron{flex:0 0 auto;margin-left:auto;padding-left:.35rem;font-size:1rem;line-height:1;color:var(--app-color-text-muted, #6b8299);opacity:.85;display:inline-flex;align-items:center;justify-content:center}.menu-list__submenu-chevron i{font-size:.68rem;line-height:1}.menu-list__icon{flex:0 0 auto;width:1.25rem;height:1.25rem;min-height:1.25rem;display:inline-flex;align-items:center;justify-content:center;text-align:center;color:var(--app-color-text-secondary, #5a7fa3);line-height:1}.menu-list__icon i{display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:1;font-size:.95rem;margin-block:auto;flex-shrink:0}.menu-list__option--disabled .menu-list__icon{opacity:.55}.menu-list__icon--spin i{animation:menu-list-spin .8s linear infinite}.menu-list__text{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}.menu-list__label{font-size:.875rem;font-weight:500;line-height:1.25rem;display:inline-flex;align-items:center;min-height:1.25rem;box-sizing:border-box;padding-top:.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(() => MenuListComponent), selector: "app-menu-list", inputs: ["appTheme", "items", "menuId", "dense", "nested", "selectedItemId", "compressText", "clickToOpen", "groupCollapsible", "groupDefaultExpansion"], outputs: ["itemSelect", "closeRequest", "submenuBack"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => CdkConnectedOverlay), selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i0.forwardRef(() => CdkOverlayOrigin), selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i0.forwardRef(() => CdkScrollable), selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i0.forwardRef(() => MenuDividerComponent), selector: "app-menu-divider" }, { kind: "component", type: i0.forwardRef(() => MenuGroupComponent), selector: "app-menu-group", inputs: ["label", "hideLabel", "collapsible", "expanded"], outputs: ["toggleExpand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1848
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuListBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1849
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MenuListBodyComponent, isStandalone: true, selector: "app-menu-list-body", inputs: { appTheme: { classPropertyName: "appTheme", publicName: "appTheme", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: true, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: false, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, nested: { classPropertyName: "nested", publicName: "nested", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectedItemId: { classPropertyName: "selectedItemId", publicName: "selectedItemId", isSignal: false, isRequired: false, transformFunction: null }, compressText: { classPropertyName: "compressText", publicName: "compressText", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, clickToOpen: { classPropertyName: "clickToOpen", publicName: "clickToOpen", isSignal: false, isRequired: false, transformFunction: null }, groupCollapsible: { classPropertyName: "groupCollapsible", publicName: "groupCollapsible", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, groupDefaultExpansion: { classPropertyName: "groupDefaultExpansion", publicName: "groupDefaultExpansion", isSignal: false, isRequired: false, transformFunction: null }, expandAllGroupsInitially: { classPropertyName: "expandAllGroupsInitially", publicName: "expandAllGroupsInitially", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { itemSelect: "itemSelect", closeRequest: "closeRequest", submenuBack: "submenuBack" }, host: { listeners: { "focusin": "onFocusIn($event)", "keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "nestedLists", predicate: MenuListBodyComponent, descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i1.CdkScrollable }], ngImport: i0, template: "<div\n class=\"menu-list\"\n [class.menu-list--nested]=\"nested\"\n [class.menu-list--dense]=\"dense\"\n [class.menu-list--compress-text]=\"compressText\"\n cdkScrollable\n tabindex=\"-1\"\n (mouseleave)=\"onMenuSurfaceLeave()\"\n>\n <ng-content />\n <div\n class=\"menu-list__items\"\n role=\"menu\"\n [attr.aria-labelledby]=\"null\"\n tabindex=\"-1\"\n >\n @for (row of displayRows; track trackDisplayRow($index, row); let idx = $index) {\n @switch (row.kind) {\n @case ('divider') {\n <app-menu-divider (mouseenter)=\"onNonOptionSurfaceEnter()\" />\n }\n @case ('group') {\n <div\n class=\"menu-list__group-row\"\n [class.menu-list__group-row--pinned]=\"row.alwaysExpanded\"\n (mouseenter)=\"onNonOptionSurfaceEnter()\"\n >\n <app-menu-group\n [label]=\"row.label\"\n [hideLabel]=\"compressText\"\n [collapsible]=\"groupCollapsible && !compressText && !row.alwaysExpanded\"\n [expanded]=\"isGroupExpanded(row.groupId)\"\n (toggleExpand)=\"toggleGroup(row.groupId)\"\n />\n </div>\n }\n @case ('submenu') {\n <div\n class=\"menu-list__submenu-wrap\"\n cdkOverlayOrigin\n #subOrigin=\"cdkOverlayOrigin\"\n (mouseenter)=\"onSubmenuTriggerEnter(row, idx)\"\n (mouseleave)=\"onSubmenuTriggerLeave(row, idx)\"\n >\n <div\n class=\"menu-list__option menu-list__option--submenu\"\n role=\"menuitem\"\n [attr.aria-haspopup]=\"'true'\"\n [attr.aria-expanded]=\"isSubmenuOpen(row, idx)\"\n [id]=\"row.focusIndex !== null ? optionId(row.focusIndex) : null\"\n [attr.tabindex]=\"row.focusIndex !== null && !row.item.disabled ? (isActiveRow(row) ? 0 : -1) : -1\"\n [attr.aria-disabled]=\"row.item.disabled ? true : null\"\n [attr.title]=\"compressText ? row.item.label : null\"\n [attr.aria-label]=\"compressText ? row.item.label : null\"\n [class.menu-list__option--disabled]=\"row.item.disabled\"\n [class.menu-list__option--active]=\"isActiveRow(row)\"\n [class.menu-list__option--selected]=\"isRowSelected(row)\"\n (click)=\"onSubmenuRowClick($event, row, idx)\"\n (mouseenter)=\"onRowMouseEnter(row)\"\n >\n @if (row.item.icon?.trim()) {\n <span class=\"menu-list__icon\" aria-hidden=\"true\">\n <i [ngClass]=\"row.item.icon\"></i>\n </span>\n }\n <span class=\"menu-list__text\">\n <span class=\"menu-list__label\">{{ row.item.label }}</span>\n @if (row.item.description?.trim()) {\n <span class=\"menu-list__description\">{{ row.item.description }}</span>\n }\n </span>\n <span class=\"menu-list__submenu-chevron\" aria-hidden=\"true\">\n @if (isSubmenuOpen(row, idx)) {\n <i class=\"fa-solid fa-chevron-right\"></i>\n } @else {\n <i class=\"fa-solid fa-chevron-down\"></i>\n }\n </span>\n </div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"subOrigin\"\n [cdkConnectedOverlayOpen]=\"isSubmenuOpen(row, idx)\"\n [cdkConnectedOverlayPositions]=\"submenuPositions\"\n [cdkConnectedOverlayPush]=\"true\"\n [cdkConnectedOverlayPanelClass]=\"overlayPanelClasses()\"\n [cdkConnectedOverlayMinWidth]=\"200\"\n (overlayOutsideClick)=\"onSubmenuOutsideClick(row, idx)\"\n >\n <div\n class=\"menu-submenu__panel\"\n [ngClass]=\"panelThemeNgClass()\"\n (mouseenter)=\"onSubmenuPanelEnter()\"\n (mouseleave)=\"onSubmenuPanelLeave(row, idx)\"\n (click)=\"$event.stopPropagation()\"\n >\n <app-menu-list-body\n [items]=\"row.item.items\"\n [menuId]=\"submenuMenuId(row)\"\n [nested]=\"true\"\n [dense]=\"dense\"\n [compressText]=\"compressText\"\n [groupCollapsible]=\"groupCollapsible\"\n [groupDefaultExpansion]=\"groupDefaultExpansion\"\n [expandAllGroupsInitially]=\"expandAllGroupsInitially\"\n [clickToOpen]=\"clickToOpen\"\n [selectedItemId]=\"selectedItemId\"\n [appTheme]=\"appTheme()\"\n (itemSelect)=\"onNestedItemSelect($event)\"\n (closeRequest)=\"closeRequest.emit()\"\n (submenuBack)=\"closeOpenSubmenu()\"\n />\n </div>\n </ng-template>\n </div>\n }\n @case ('action') {\n <div\n class=\"menu-list__option\"\n role=\"menuitem\"\n [id]=\"row.focusIndex !== null ? optionId(row.focusIndex) : null\"\n [attr.tabindex]=\"row.focusIndex !== null && !row.item.disabled ? (isActiveRow(row) ? 0 : -1) : -1\"\n [attr.aria-disabled]=\"row.item.disabled ? true : null\"\n [attr.aria-busy]=\"row.item.loading ? true : null\"\n [attr.title]=\"compressText ? row.item.label : null\"\n [attr.aria-label]=\"compressText ? row.item.label : null\"\n [class.menu-list__option--disabled]=\"row.item.disabled\"\n [class.menu-list__option--loading]=\"row.item.loading\"\n [class.menu-list__option--danger]=\"row.item.danger\"\n [class.menu-list__option--active]=\"isActiveRow(row)\"\n [class.menu-list__option--selected]=\"isRowSelected(row)\"\n (click)=\"onItemClick($event, row.item)\"\n (mouseenter)=\"onRowMouseEnter(row)\"\n >\n @if (row.item.loading) {\n <span class=\"menu-list__icon menu-list__icon--spin\" aria-hidden=\"true\">\n <i class=\"fa-solid fa-spinner\"></i>\n </span>\n } @else if (row.item.icon?.trim()) {\n <span class=\"menu-list__icon\" aria-hidden=\"true\">\n <i [ngClass]=\"row.item.icon\"></i>\n </span>\n }\n <span class=\"menu-list__text\">\n <span class=\"menu-list__label\">{{ row.item.label }}</span>\n @if (row.item.description?.trim()) {\n <span class=\"menu-list__description\">{{ row.item.description }}</span>\n }\n </span>\n </div>\n }\n }\n }\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";@keyframes app-sidebar-nav-reveal-in{0%{opacity:0;transform:translate3d(-.45rem,0,0)}to{opacity:1;transform:translateZ(0)}}:host{display:block;min-width:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.menu-list{background:var(--app-color-surface, #ffffff);border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .12));border-radius:10px;box-shadow:0 10px 28px -14px #0f172a29;max-height:min(70vh,22rem);overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;gap:.35rem;padding:.45rem 0;outline:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.menu-list--dense{padding:.2rem 0;gap:0}.menu-list--dense .menu-list__items{gap:0}.menu-list__items{display:flex;flex-direction:column;gap:.12rem;min-width:0}.menu-list__search{margin:0 .35rem .12rem;min-width:0;user-select:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text}.menu-list__search-field{display:block;width:100%}.menu-list__search-empty{margin:-.05rem .75rem 0;padding:0 0 .15rem;font-size:.75rem;line-height:1.35;font-weight:400;color:var(--app-color-text-muted, #6b8299);opacity:.88}.menu-list__group-row{display:block;width:100%}.menu-list__group-row--pinned .menu-list__group-label{color:var(--app-color-nav-group-heading, #9ca3af)}.menu-list__submenu-wrap{position:relative;display:block}.menu-list__option{display:flex;align-items:center;box-sizing:border-box;gap:.6875rem;margin:0 .25rem;padding:.5625rem .65rem;border-radius:8px;cursor:pointer;color:var(--app-color-text-primary, #1a2f45);background:transparent;border:1px solid transparent;text-align:left;font:inherit;line-height:1.25;transition:background-color .18s ease,color .18s ease,box-shadow .18s ease,border-color .18s ease}.menu-list__option:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:1px}.menu-list__option:hover:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:#0f172a0b}.menu-list__option.menu-list__option--active:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:#0f172a0e;border-color:transparent}.menu-list__option.menu-list__option--active:not(.menu-list__option--disabled):not(.menu-list__option--loading):not(.menu-list__option--selected){box-shadow:none}.menu-list__option.menu-list__option--disabled{cursor:not-allowed;color:var(--app-color-text-muted, #6b8299);background:transparent;opacity:.72}.menu-list__option.menu-list__option--loading{cursor:wait;opacity:.92;pointer-events:none}.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading){color:var(--app-color-error, #b91c1c)}.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading):hover,.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading).menu-list__option--active{background:var(--app-color-error-bg-subtle, rgba(185, 28, 28, .12));border-color:transparent;box-shadow:inset 2px 0 0 0 var(--app-color-error-border, #dc2626)}.menu-list__option--submenu{padding-right:.35rem}.menu-list__option--selected:not(.menu-list__option--disabled){background:color-mix(in srgb,var(--app-color-primary) 10%,transparent);border-radius:8px;border-color:transparent;box-shadow:inset 2px 0 0 0 var(--app-color-primary, #2b7fd9)}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__label{color:color-mix(in srgb,var(--app-color-primary, #2b7fd9) 88%,var(--app-color-nav-option-label, #374151));font-weight:500}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__icon{color:var(--app-color-primary, #2b7fd9)}.menu-list__option:not(.menu-list__option--danger):not(.menu-list__option--disabled):not(.menu-list__option--selected) .menu-list__label{color:var(--app-color-nav-option-label, #374151)}.menu-list--compress-text .menu-list__label,.menu-list--compress-text .menu-list__description{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.menu-list--compress-text .menu-list__text,.menu-list--compress-text .menu-list__submenu-chevron{display:none}.menu-list--compress-text .menu-list__submenu-wrap{width:100%}.menu-list--compress-text .menu-list__option{justify-content:center;align-items:center;text-align:center;width:calc(100% - .5rem);max-width:100%;box-sizing:border-box;margin-left:.25rem;margin-right:.25rem;padding:.5rem .35rem}.menu-list--compress-text .menu-list__option--submenu{padding-left:.35rem;padding-right:.35rem}.menu-list--compress-text .menu-list__icon{flex:0 0 auto;width:auto;min-width:1.75rem;display:inline-flex;align-items:center;justify-content:center;padding-top:0}.menu-list__submenu-chevron{flex:0 0 auto;margin-left:auto;padding-left:.35rem;font-size:1rem;line-height:1;color:var(--app-color-text-muted, #6b8299);opacity:.85;display:inline-flex;align-items:center;justify-content:center}.menu-list__submenu-chevron i{font-size:.68rem;line-height:1}.menu-list__icon{flex:0 0 auto;width:1.25rem;height:1.25rem;min-height:1.25rem;display:inline-flex;align-items:center;justify-content:center;text-align:center;color:color-mix(in srgb,var(--app-color-primary, #2b7fd9) 78%,var(--app-color-text-muted, #6b8299));line-height:1;transition:color .18s ease,opacity .18s ease}.menu-list__icon i{display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:1;font-size:.95rem;margin-block:auto;flex-shrink:0}.menu-list__option--disabled .menu-list__icon{opacity:.55}.menu-list__icon--spin i{animation:menu-list-spin .8s linear infinite}.menu-list__text{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}.menu-list__label{font-size:.875rem;font-weight:400;line-height:1.25rem;display:inline-flex;align-items:center;min-height:1.25rem;box-sizing:border-box;padding-top:.5rem!important}.menu-list--nested .menu-list__label{font-weight:400;padding-top:.5rem!important}.menu-list--nested .menu-list__icon{transform:translateY(.125rem)}.menu-list__description{font-size:.75rem;color:var(--app-color-text-muted, #6b8299);line-height:1.3}.menu-list:not(.menu-list--compress-text){animation:app-sidebar-nav-reveal-in .45s cubic-bezier(.16,1,.32,1) both}@media(prefers-reduced-motion:reduce){.menu-list:not(.menu-list--compress-text){animation:none}}:host-context(.app-drawer__body) .menu-list__label{padding-top:.5rem!important}:host-context(.app-drawer__body) .menu-list__icon{transform:translateY(.1875rem)}@media(max-width:767.98px){.menu-list.menu-list--nested .menu-list__label{padding-top:.4rem!important}.menu-list.menu-list--nested .menu-list__icon{transform:translateY(.1875rem)}}.menu-submenu__panel{box-sizing:border-box;min-width:0;padding:0;background:transparent;border:none;box-shadow:none;border-radius:10px;overflow:hidden}@keyframes menu-list-spin{to{transform:rotate(360deg)}}:host ::ng-deep .menu-submenu__cdk-panel{background:transparent;box-shadow:none;border-radius:10px}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => MenuListBodyComponent), selector: "app-menu-list-body", inputs: ["appTheme", "items", "menuId", "dense", "nested", "selectedItemId", "compressText", "clickToOpen", "groupCollapsible", "groupDefaultExpansion", "expandAllGroupsInitially"], outputs: ["itemSelect", "closeRequest", "submenuBack"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => CdkConnectedOverlay), selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i0.forwardRef(() => CdkOverlayOrigin), selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i0.forwardRef(() => CdkScrollable), selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i0.forwardRef(() => MenuDividerComponent), selector: "app-menu-divider" }, { kind: "component", type: i0.forwardRef(() => MenuGroupComponent), selector: "app-menu-group", inputs: ["label", "hideLabel", "collapsible", "expanded"], outputs: ["toggleExpand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1712
1850
|
}
|
|
1713
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type:
|
|
1851
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuListBodyComponent, decorators: [{
|
|
1714
1852
|
type: Component,
|
|
1715
|
-
args: [{ selector: 'app-menu-list', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [CdkScrollable], imports: [
|
|
1853
|
+
args: [{ selector: 'app-menu-list-body', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [CdkScrollable], imports: [
|
|
1716
1854
|
NgClass,
|
|
1717
|
-
forwardRef(() =>
|
|
1855
|
+
forwardRef(() => MenuListBodyComponent),
|
|
1718
1856
|
CdkConnectedOverlay,
|
|
1719
1857
|
CdkOverlayOrigin,
|
|
1720
1858
|
CdkScrollable,
|
|
1721
1859
|
MenuDividerComponent,
|
|
1722
1860
|
MenuGroupComponent,
|
|
1723
|
-
], template: "<div\n class=\"menu-list\"\n [class.menu-list--nested]=\"nested\"\n [class.menu-list--dense]=\"dense\"\n [class.menu-list--compress-text]=\"compressText\"\n cdkScrollable\n role=\"menu\"\n [attr.aria-labelledby]=\"null\"\n tabindex=\"-1\"\n (mouseleave)=\"onMenuSurfaceLeave()\"\n>\n @for (row of displayRows; track trackDisplayRow($index, row); let idx = $index) {\n @switch (row.kind) {\n @case ('divider') {\n <app-menu-divider (mouseenter)=\"onNonOptionSurfaceEnter()\" />\n }\n @case ('group') {\n <div\n class=\"menu-list__group-row\"\n [class.menu-list__group-row--pinned]=\"row.alwaysExpanded\"\n (mouseenter)=\"onNonOptionSurfaceEnter()\"\n >\n <app-menu-group\n [label]=\"row.label\"\n [hideLabel]=\"compressText\"\n [collapsible]=\"groupCollapsible && !compressText && !row.alwaysExpanded\"\n [expanded]=\"isGroupExpanded(row.groupId)\"\n (toggleExpand)=\"toggleGroup(row.groupId)\"\n />\n </div>\n }\n @case ('submenu') {\n <div\n class=\"menu-list__submenu-wrap\"\n cdkOverlayOrigin\n #subOrigin=\"cdkOverlayOrigin\"\n (mouseenter)=\"onSubmenuTriggerEnter(row, idx)\"\n (mouseleave)=\"onSubmenuTriggerLeave(row, idx)\"\n >\n <div\n class=\"menu-list__option menu-list__option--submenu\"\n role=\"menuitem\"\n [attr.aria-haspopup]=\"'true'\"\n [attr.aria-expanded]=\"isSubmenuOpen(row, idx)\"\n [id]=\"row.focusIndex !== null ? optionId(row.focusIndex) : null\"\n [attr.tabindex]=\"row.focusIndex !== null && !row.item.disabled ? (isActiveRow(row) ? 0 : -1) : -1\"\n [attr.aria-disabled]=\"row.item.disabled ? true : null\"\n [attr.title]=\"compressText ? row.item.label : null\"\n [attr.aria-label]=\"compressText ? row.item.label : null\"\n [class.menu-list__option--disabled]=\"row.item.disabled\"\n [class.menu-list__option--active]=\"isActiveRow(row)\"\n [class.menu-list__option--selected]=\"isRowSelected(row)\"\n (click)=\"onSubmenuRowClick($event, row, idx)\"\n (mouseenter)=\"onRowMouseEnter(row)\"\n >\n @if (row.item.icon?.trim()) {\n <span class=\"menu-list__icon\" aria-hidden=\"true\">\n <i [ngClass]=\"row.item.icon\"></i>\n </span>\n }\n <span class=\"menu-list__text\">\n <span class=\"menu-list__label\">{{ row.item.label }}</span>\n @if (row.item.description?.trim()) {\n <span class=\"menu-list__description\">{{ row.item.description }}</span>\n }\n </span>\n <span class=\"menu-list__submenu-chevron\" aria-hidden=\"true\">\n @if (isSubmenuOpen(row, idx)) {\n <i class=\"fa-solid fa-chevron-right\"></i>\n } @else {\n <i class=\"fa-solid fa-chevron-down\"></i>\n }\n </span>\n </div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"subOrigin\"\n [cdkConnectedOverlayOpen]=\"isSubmenuOpen(row, idx)\"\n [cdkConnectedOverlayPositions]=\"submenuPositions\"\n [cdkConnectedOverlayPush]=\"true\"\n [cdkConnectedOverlayPanelClass]=\"overlayPanelClasses()\"\n [cdkConnectedOverlayMinWidth]=\"200\"\n (overlayOutsideClick)=\"onSubmenuOutsideClick(row, idx)\"\n >\n <div\n class=\"menu-submenu__panel\"\n [ngClass]=\"panelThemeNgClass()\"\n (mouseenter)=\"onSubmenuPanelEnter()\"\n (mouseleave)=\"onSubmenuPanelLeave(row, idx)\"\n (click)=\"$event.stopPropagation()\"\n >\n <app-menu-list\n [items]=\"row.item.items\"\n [menuId]=\"submenuMenuId(row)\"\n [nested]=\"true\"\n [dense]=\"dense\"\n [compressText]=\"compressText\"\n [groupCollapsible]=\"groupCollapsible\"\n [clickToOpen]=\"clickToOpen\"\n [selectedItemId]=\"selectedItemId\"\n (itemSelect)=\"onNestedItemSelect($event)\"\n (closeRequest)=\"closeRequest.emit()\"\n (submenuBack)=\"closeOpenSubmenu()\"\n />\n </div>\n </ng-template>\n </div>\n }\n @case ('action') {\n <div\n class=\"menu-list__option\"\n role=\"menuitem\"\n [id]=\"row.focusIndex !== null ? optionId(row.focusIndex) : null\"\n [attr.tabindex]=\"row.focusIndex !== null && !row.item.disabled ? (isActiveRow(row) ? 0 : -1) : -1\"\n [attr.aria-disabled]=\"row.item.disabled ? true : null\"\n [attr.aria-busy]=\"row.item.loading ? true : null\"\n [attr.title]=\"compressText ? row.item.label : null\"\n [attr.aria-label]=\"compressText ? row.item.label : null\"\n [class.menu-list__option--disabled]=\"row.item.disabled\"\n [class.menu-list__option--loading]=\"row.item.loading\"\n [class.menu-list__option--danger]=\"row.item.danger\"\n [class.menu-list__option--active]=\"isActiveRow(row)\"\n [class.menu-list__option--selected]=\"isRowSelected(row)\"\n (click)=\"onItemClick($event, row.item)\"\n (mouseenter)=\"onRowMouseEnter(row)\"\n >\n @if (row.item.loading) {\n <span class=\"menu-list__icon menu-list__icon--spin\" aria-hidden=\"true\">\n <i class=\"fa-solid fa-spinner\"></i>\n </span>\n } @else if (row.item.icon?.trim()) {\n <span class=\"menu-list__icon\" aria-hidden=\"true\">\n <i [ngClass]=\"row.item.icon\"></i>\n </span>\n }\n <span class=\"menu-list__text\">\n <span class=\"menu-list__label\">{{ row.item.label }}</span>\n @if (row.item.description?.trim()) {\n <span class=\"menu-list__description\">{{ row.item.description }}</span>\n }\n </span>\n </div>\n }\n }\n }\n</div>\n", styles: ["@charset \"UTF-8\";@keyframes app-sidebar-nav-reveal-in{0%{opacity:0;transform:translate3d(-.45rem,0,0)}to{opacity:1;transform:translateZ(0)}}:host{display:block;min-width:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.menu-list{background:var(--app-color-surface, #ffffff);border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .12));border-radius:10px;box-shadow:0 10px 28px -14px #0f172a29;max-height:min(70vh,22rem);overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;gap:.1rem;padding:.45rem 0;outline:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.menu-list--dense{padding:.2rem 0;gap:0}.menu-list__group-row{display:block;width:100%}.menu-list__group-row--pinned .menu-list__group-label{color:var(--app-color-nav-group-label, #6b7280)}.menu-list__submenu-wrap{position:relative;display:block}.menu-list__option{display:flex;align-items:center;box-sizing:border-box;gap:.5rem;margin:0 .25rem;padding:.48rem .6rem;border-radius:8px;cursor:pointer;color:var(--app-color-text-primary, #1a2f45);background:transparent;border:1px solid transparent;text-align:left;font:inherit;line-height:1.25}.menu-list__option:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:1px}.menu-list__option:hover:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:color-mix(in srgb,var(--app-color-primary) 6%,transparent)}.menu-list__option.menu-list__option--active:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:color-mix(in srgb,var(--app-color-primary) 7%,transparent);border-color:transparent}.menu-list__option.menu-list__option--active:not(.menu-list__option--disabled):not(.menu-list__option--loading):not(.menu-list__option--selected){box-shadow:none}.menu-list__option.menu-list__option--disabled{cursor:not-allowed;color:var(--app-color-text-muted, #6b8299);background:transparent;opacity:.72}.menu-list__option.menu-list__option--loading{cursor:wait;opacity:.92;pointer-events:none}.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading){color:var(--app-color-error, #b91c1c)}.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading):hover,.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading).menu-list__option--active{background:var(--app-color-error-bg-subtle, rgba(185, 28, 28, .12));border-color:transparent;box-shadow:inset 2px 0 0 0 var(--app-color-error-border, #dc2626)}.menu-list__option--submenu{padding-right:.35rem}.menu-list__option--selected:not(.menu-list__option--disabled){background:color-mix(in srgb,var(--app-color-primary) 9%,transparent);border-radius:8px;border-color:transparent;box-shadow:inset 2px 0 0 0 var(--app-color-primary, #2b7fd9)}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__label{color:var(--app-color-primary, #2b7fd9);font-weight:600}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__icon{color:var(--app-color-primary, #2b7fd9)}.menu-list--compress-text .menu-list__label,.menu-list--compress-text .menu-list__description{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.menu-list--compress-text .menu-list__text,.menu-list--compress-text .menu-list__submenu-chevron{display:none}.menu-list--compress-text .menu-list__submenu-wrap{width:100%}.menu-list--compress-text .menu-list__option{justify-content:center;align-items:center;text-align:center;width:calc(100% - .5rem);max-width:100%;box-sizing:border-box;margin-left:.25rem;margin-right:.25rem;padding:.5rem .35rem}.menu-list--compress-text .menu-list__option--submenu{padding-left:.35rem;padding-right:.35rem}.menu-list--compress-text .menu-list__icon{flex:0 0 auto;width:auto;min-width:1.75rem;display:inline-flex;align-items:center;justify-content:center;padding-top:0}.menu-list__submenu-chevron{flex:0 0 auto;margin-left:auto;padding-left:.35rem;font-size:1rem;line-height:1;color:var(--app-color-text-muted, #6b8299);opacity:.85;display:inline-flex;align-items:center;justify-content:center}.menu-list__submenu-chevron i{font-size:.68rem;line-height:1}.menu-list__icon{flex:0 0 auto;width:1.25rem;height:1.25rem;min-height:1.25rem;display:inline-flex;align-items:center;justify-content:center;text-align:center;color:var(--app-color-text-secondary, #5a7fa3);line-height:1}.menu-list__icon i{display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:1;font-size:.95rem;margin-block:auto;flex-shrink:0}.menu-list__option--disabled .menu-list__icon{opacity:.55}.menu-list__icon--spin i{animation:menu-list-spin .8s linear infinite}.menu-list__text{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}.menu-list__label{font-size:.875rem;font-weight:500;line-height:1.25rem;display:inline-flex;align-items:center;min-height:1.25rem;box-sizing:border-box;padding-top:.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"] }]
|
|
1861
|
+
], template: "<div\n class=\"menu-list\"\n [class.menu-list--nested]=\"nested\"\n [class.menu-list--dense]=\"dense\"\n [class.menu-list--compress-text]=\"compressText\"\n cdkScrollable\n tabindex=\"-1\"\n (mouseleave)=\"onMenuSurfaceLeave()\"\n>\n <ng-content />\n <div\n class=\"menu-list__items\"\n role=\"menu\"\n [attr.aria-labelledby]=\"null\"\n tabindex=\"-1\"\n >\n @for (row of displayRows; track trackDisplayRow($index, row); let idx = $index) {\n @switch (row.kind) {\n @case ('divider') {\n <app-menu-divider (mouseenter)=\"onNonOptionSurfaceEnter()\" />\n }\n @case ('group') {\n <div\n class=\"menu-list__group-row\"\n [class.menu-list__group-row--pinned]=\"row.alwaysExpanded\"\n (mouseenter)=\"onNonOptionSurfaceEnter()\"\n >\n <app-menu-group\n [label]=\"row.label\"\n [hideLabel]=\"compressText\"\n [collapsible]=\"groupCollapsible && !compressText && !row.alwaysExpanded\"\n [expanded]=\"isGroupExpanded(row.groupId)\"\n (toggleExpand)=\"toggleGroup(row.groupId)\"\n />\n </div>\n }\n @case ('submenu') {\n <div\n class=\"menu-list__submenu-wrap\"\n cdkOverlayOrigin\n #subOrigin=\"cdkOverlayOrigin\"\n (mouseenter)=\"onSubmenuTriggerEnter(row, idx)\"\n (mouseleave)=\"onSubmenuTriggerLeave(row, idx)\"\n >\n <div\n class=\"menu-list__option menu-list__option--submenu\"\n role=\"menuitem\"\n [attr.aria-haspopup]=\"'true'\"\n [attr.aria-expanded]=\"isSubmenuOpen(row, idx)\"\n [id]=\"row.focusIndex !== null ? optionId(row.focusIndex) : null\"\n [attr.tabindex]=\"row.focusIndex !== null && !row.item.disabled ? (isActiveRow(row) ? 0 : -1) : -1\"\n [attr.aria-disabled]=\"row.item.disabled ? true : null\"\n [attr.title]=\"compressText ? row.item.label : null\"\n [attr.aria-label]=\"compressText ? row.item.label : null\"\n [class.menu-list__option--disabled]=\"row.item.disabled\"\n [class.menu-list__option--active]=\"isActiveRow(row)\"\n [class.menu-list__option--selected]=\"isRowSelected(row)\"\n (click)=\"onSubmenuRowClick($event, row, idx)\"\n (mouseenter)=\"onRowMouseEnter(row)\"\n >\n @if (row.item.icon?.trim()) {\n <span class=\"menu-list__icon\" aria-hidden=\"true\">\n <i [ngClass]=\"row.item.icon\"></i>\n </span>\n }\n <span class=\"menu-list__text\">\n <span class=\"menu-list__label\">{{ row.item.label }}</span>\n @if (row.item.description?.trim()) {\n <span class=\"menu-list__description\">{{ row.item.description }}</span>\n }\n </span>\n <span class=\"menu-list__submenu-chevron\" aria-hidden=\"true\">\n @if (isSubmenuOpen(row, idx)) {\n <i class=\"fa-solid fa-chevron-right\"></i>\n } @else {\n <i class=\"fa-solid fa-chevron-down\"></i>\n }\n </span>\n </div>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"subOrigin\"\n [cdkConnectedOverlayOpen]=\"isSubmenuOpen(row, idx)\"\n [cdkConnectedOverlayPositions]=\"submenuPositions\"\n [cdkConnectedOverlayPush]=\"true\"\n [cdkConnectedOverlayPanelClass]=\"overlayPanelClasses()\"\n [cdkConnectedOverlayMinWidth]=\"200\"\n (overlayOutsideClick)=\"onSubmenuOutsideClick(row, idx)\"\n >\n <div\n class=\"menu-submenu__panel\"\n [ngClass]=\"panelThemeNgClass()\"\n (mouseenter)=\"onSubmenuPanelEnter()\"\n (mouseleave)=\"onSubmenuPanelLeave(row, idx)\"\n (click)=\"$event.stopPropagation()\"\n >\n <app-menu-list-body\n [items]=\"row.item.items\"\n [menuId]=\"submenuMenuId(row)\"\n [nested]=\"true\"\n [dense]=\"dense\"\n [compressText]=\"compressText\"\n [groupCollapsible]=\"groupCollapsible\"\n [groupDefaultExpansion]=\"groupDefaultExpansion\"\n [expandAllGroupsInitially]=\"expandAllGroupsInitially\"\n [clickToOpen]=\"clickToOpen\"\n [selectedItemId]=\"selectedItemId\"\n [appTheme]=\"appTheme()\"\n (itemSelect)=\"onNestedItemSelect($event)\"\n (closeRequest)=\"closeRequest.emit()\"\n (submenuBack)=\"closeOpenSubmenu()\"\n />\n </div>\n </ng-template>\n </div>\n }\n @case ('action') {\n <div\n class=\"menu-list__option\"\n role=\"menuitem\"\n [id]=\"row.focusIndex !== null ? optionId(row.focusIndex) : null\"\n [attr.tabindex]=\"row.focusIndex !== null && !row.item.disabled ? (isActiveRow(row) ? 0 : -1) : -1\"\n [attr.aria-disabled]=\"row.item.disabled ? true : null\"\n [attr.aria-busy]=\"row.item.loading ? true : null\"\n [attr.title]=\"compressText ? row.item.label : null\"\n [attr.aria-label]=\"compressText ? row.item.label : null\"\n [class.menu-list__option--disabled]=\"row.item.disabled\"\n [class.menu-list__option--loading]=\"row.item.loading\"\n [class.menu-list__option--danger]=\"row.item.danger\"\n [class.menu-list__option--active]=\"isActiveRow(row)\"\n [class.menu-list__option--selected]=\"isRowSelected(row)\"\n (click)=\"onItemClick($event, row.item)\"\n (mouseenter)=\"onRowMouseEnter(row)\"\n >\n @if (row.item.loading) {\n <span class=\"menu-list__icon menu-list__icon--spin\" aria-hidden=\"true\">\n <i class=\"fa-solid fa-spinner\"></i>\n </span>\n } @else if (row.item.icon?.trim()) {\n <span class=\"menu-list__icon\" aria-hidden=\"true\">\n <i [ngClass]=\"row.item.icon\"></i>\n </span>\n }\n <span class=\"menu-list__text\">\n <span class=\"menu-list__label\">{{ row.item.label }}</span>\n @if (row.item.description?.trim()) {\n <span class=\"menu-list__description\">{{ row.item.description }}</span>\n }\n </span>\n </div>\n }\n }\n }\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";@keyframes app-sidebar-nav-reveal-in{0%{opacity:0;transform:translate3d(-.45rem,0,0)}to{opacity:1;transform:translateZ(0)}}:host{display:block;min-width:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.menu-list{background:var(--app-color-surface, #ffffff);border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .12));border-radius:10px;box-shadow:0 10px 28px -14px #0f172a29;max-height:min(70vh,22rem);overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;gap:.35rem;padding:.45rem 0;outline:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.menu-list--dense{padding:.2rem 0;gap:0}.menu-list--dense .menu-list__items{gap:0}.menu-list__items{display:flex;flex-direction:column;gap:.12rem;min-width:0}.menu-list__search{margin:0 .35rem .12rem;min-width:0;user-select:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text}.menu-list__search-field{display:block;width:100%}.menu-list__search-empty{margin:-.05rem .75rem 0;padding:0 0 .15rem;font-size:.75rem;line-height:1.35;font-weight:400;color:var(--app-color-text-muted, #6b8299);opacity:.88}.menu-list__group-row{display:block;width:100%}.menu-list__group-row--pinned .menu-list__group-label{color:var(--app-color-nav-group-heading, #9ca3af)}.menu-list__submenu-wrap{position:relative;display:block}.menu-list__option{display:flex;align-items:center;box-sizing:border-box;gap:.6875rem;margin:0 .25rem;padding:.5625rem .65rem;border-radius:8px;cursor:pointer;color:var(--app-color-text-primary, #1a2f45);background:transparent;border:1px solid transparent;text-align:left;font:inherit;line-height:1.25;transition:background-color .18s ease,color .18s ease,box-shadow .18s ease,border-color .18s ease}.menu-list__option:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:1px}.menu-list__option:hover:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:#0f172a0b}.menu-list__option.menu-list__option--active:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:#0f172a0e;border-color:transparent}.menu-list__option.menu-list__option--active:not(.menu-list__option--disabled):not(.menu-list__option--loading):not(.menu-list__option--selected){box-shadow:none}.menu-list__option.menu-list__option--disabled{cursor:not-allowed;color:var(--app-color-text-muted, #6b8299);background:transparent;opacity:.72}.menu-list__option.menu-list__option--loading{cursor:wait;opacity:.92;pointer-events:none}.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading){color:var(--app-color-error, #b91c1c)}.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading):hover,.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading).menu-list__option--active{background:var(--app-color-error-bg-subtle, rgba(185, 28, 28, .12));border-color:transparent;box-shadow:inset 2px 0 0 0 var(--app-color-error-border, #dc2626)}.menu-list__option--submenu{padding-right:.35rem}.menu-list__option--selected:not(.menu-list__option--disabled){background:color-mix(in srgb,var(--app-color-primary) 10%,transparent);border-radius:8px;border-color:transparent;box-shadow:inset 2px 0 0 0 var(--app-color-primary, #2b7fd9)}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__label{color:color-mix(in srgb,var(--app-color-primary, #2b7fd9) 88%,var(--app-color-nav-option-label, #374151));font-weight:500}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__icon{color:var(--app-color-primary, #2b7fd9)}.menu-list__option:not(.menu-list__option--danger):not(.menu-list__option--disabled):not(.menu-list__option--selected) .menu-list__label{color:var(--app-color-nav-option-label, #374151)}.menu-list--compress-text .menu-list__label,.menu-list--compress-text .menu-list__description{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.menu-list--compress-text .menu-list__text,.menu-list--compress-text .menu-list__submenu-chevron{display:none}.menu-list--compress-text .menu-list__submenu-wrap{width:100%}.menu-list--compress-text .menu-list__option{justify-content:center;align-items:center;text-align:center;width:calc(100% - .5rem);max-width:100%;box-sizing:border-box;margin-left:.25rem;margin-right:.25rem;padding:.5rem .35rem}.menu-list--compress-text .menu-list__option--submenu{padding-left:.35rem;padding-right:.35rem}.menu-list--compress-text .menu-list__icon{flex:0 0 auto;width:auto;min-width:1.75rem;display:inline-flex;align-items:center;justify-content:center;padding-top:0}.menu-list__submenu-chevron{flex:0 0 auto;margin-left:auto;padding-left:.35rem;font-size:1rem;line-height:1;color:var(--app-color-text-muted, #6b8299);opacity:.85;display:inline-flex;align-items:center;justify-content:center}.menu-list__submenu-chevron i{font-size:.68rem;line-height:1}.menu-list__icon{flex:0 0 auto;width:1.25rem;height:1.25rem;min-height:1.25rem;display:inline-flex;align-items:center;justify-content:center;text-align:center;color:color-mix(in srgb,var(--app-color-primary, #2b7fd9) 78%,var(--app-color-text-muted, #6b8299));line-height:1;transition:color .18s ease,opacity .18s ease}.menu-list__icon i{display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:1;font-size:.95rem;margin-block:auto;flex-shrink:0}.menu-list__option--disabled .menu-list__icon{opacity:.55}.menu-list__icon--spin i{animation:menu-list-spin .8s linear infinite}.menu-list__text{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}.menu-list__label{font-size:.875rem;font-weight:400;line-height:1.25rem;display:inline-flex;align-items:center;min-height:1.25rem;box-sizing:border-box;padding-top:.5rem!important}.menu-list--nested .menu-list__label{font-weight:400;padding-top:.5rem!important}.menu-list--nested .menu-list__icon{transform:translateY(.125rem)}.menu-list__description{font-size:.75rem;color:var(--app-color-text-muted, #6b8299);line-height:1.3}.menu-list:not(.menu-list--compress-text){animation:app-sidebar-nav-reveal-in .45s cubic-bezier(.16,1,.32,1) both}@media(prefers-reduced-motion:reduce){.menu-list:not(.menu-list--compress-text){animation:none}}:host-context(.app-drawer__body) .menu-list__label{padding-top:.5rem!important}:host-context(.app-drawer__body) .menu-list__icon{transform:translateY(.1875rem)}@media(max-width:767.98px){.menu-list.menu-list--nested .menu-list__label{padding-top:.4rem!important}.menu-list.menu-list--nested .menu-list__icon{transform:translateY(.1875rem)}}.menu-submenu__panel{box-sizing:border-box;min-width:0;padding:0;background:transparent;border:none;box-shadow:none;border-radius:10px;overflow:hidden}@keyframes menu-list-spin{to{transform:rotate(360deg)}}:host ::ng-deep .menu-submenu__cdk-panel{background:transparent;box-shadow:none;border-radius:10px}\n"] }]
|
|
1724
1862
|
}], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], items: [{
|
|
1725
1863
|
type: Input,
|
|
1726
1864
|
args: [{ required: true }]
|
|
@@ -1744,6 +1882,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1744
1882
|
args: [{ transform: booleanAttribute }]
|
|
1745
1883
|
}], groupDefaultExpansion: [{
|
|
1746
1884
|
type: Input
|
|
1885
|
+
}], expandAllGroupsInitially: [{
|
|
1886
|
+
type: Input,
|
|
1887
|
+
args: [{ transform: booleanAttribute }]
|
|
1747
1888
|
}], itemSelect: [{
|
|
1748
1889
|
type: Output
|
|
1749
1890
|
}], closeRequest: [{
|
|
@@ -1752,52 +1893,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1752
1893
|
type: Output
|
|
1753
1894
|
}], nestedLists: [{
|
|
1754
1895
|
type: ViewChildren,
|
|
1755
|
-
args: [
|
|
1896
|
+
args: [MenuListBodyComponent]
|
|
1897
|
+
}], onFocusIn: [{
|
|
1898
|
+
type: HostListener,
|
|
1899
|
+
args: ['focusin', ['$event']]
|
|
1756
1900
|
}], onKeydown: [{
|
|
1757
1901
|
type: HostListener,
|
|
1758
1902
|
args: ['keydown', ['$event']]
|
|
1759
1903
|
}] } });
|
|
1760
1904
|
|
|
1761
|
-
/** Espaço entre trigger e painel (listas alinhadas ao `start`); mais apertado que `anchoredOverlayPositions` (8px). */
|
|
1762
|
-
const GAP = 4;
|
|
1763
|
-
/** Posições com flip vertical (preferência em baixo ou em cima). */
|
|
1764
|
-
function menuConnectedPositions(placement) {
|
|
1765
|
-
if (placement === MenuDropdownPlacement.Above) {
|
|
1766
|
-
return [
|
|
1767
|
-
{
|
|
1768
|
-
originX: 'start',
|
|
1769
|
-
originY: 'top',
|
|
1770
|
-
overlayX: 'start',
|
|
1771
|
-
overlayY: 'bottom',
|
|
1772
|
-
offsetY: -GAP,
|
|
1773
|
-
},
|
|
1774
|
-
{
|
|
1775
|
-
originX: 'start',
|
|
1776
|
-
originY: 'bottom',
|
|
1777
|
-
overlayX: 'start',
|
|
1778
|
-
overlayY: 'top',
|
|
1779
|
-
offsetY: GAP,
|
|
1780
|
-
},
|
|
1781
|
-
];
|
|
1782
|
-
}
|
|
1783
|
-
return [
|
|
1784
|
-
{
|
|
1785
|
-
originX: 'start',
|
|
1786
|
-
originY: 'bottom',
|
|
1787
|
-
overlayX: 'start',
|
|
1788
|
-
overlayY: 'top',
|
|
1789
|
-
offsetY: GAP,
|
|
1790
|
-
},
|
|
1791
|
-
{
|
|
1792
|
-
originX: 'start',
|
|
1793
|
-
originY: 'top',
|
|
1794
|
-
overlayX: 'start',
|
|
1795
|
-
overlayY: 'bottom',
|
|
1796
|
-
offsetY: -GAP,
|
|
1797
|
-
},
|
|
1798
|
-
];
|
|
1799
|
-
}
|
|
1800
|
-
|
|
1801
1905
|
class DropdownMenuComponent {
|
|
1802
1906
|
constructor() {
|
|
1803
1907
|
this.host = inject((ElementRef));
|
|
@@ -1862,11 +1966,11 @@ class DropdownMenuComponent {
|
|
|
1862
1966
|
this.setOpen(false);
|
|
1863
1967
|
}
|
|
1864
1968
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1865
|
-
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:
|
|
1969
|
+
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", "expandAllGroupsInitially"], outputs: ["itemSelect", "closeRequest", "submenuBack"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1866
1970
|
}
|
|
1867
1971
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownMenuComponent, decorators: [{
|
|
1868
1972
|
type: Component,
|
|
1869
|
-
args: [{ selector: 'app-dropdown-menu', imports: [DropdownBaseComponent,
|
|
1973
|
+
args: [{ selector: 'app-dropdown-menu', imports: [DropdownBaseComponent, MenuListBodyComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-dropdown-base\r\n class=\"dropdown-menu\"\r\n [open]=\"open\"\r\n (openChange)=\"onBaseOpenChange($event)\"\r\n [panelTemplate]=\"panelTpl\"\r\n [panelWidthPx]=\"effectivePanelWidth\"\r\n [connectedPositions]=\"connectedPositions\"\r\n [pushConnectedOverlay]=\"true\"\r\n [hasBackdrop]=\"true\"\r\n [closeOnEscape]=\"true\"\r\n [bareOverlayPanel]=\"true\"\r\n>\r\n <span\r\n class=\"dropdown-menu__trigger-slot\"\r\n appDropdownTrigger\r\n (click)=\"onTriggerClick($event)\"\r\n [attr.aria-expanded]=\"open\"\r\n aria-haspopup=\"menu\"\r\n >\r\n <ng-content />\r\n </span>\r\n</app-dropdown-base>\r\n\r\n<ng-template #panelTpl>\r\n <div class=\"dropdown-menu__panel-inner\">\r\n <app-menu-list-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"] }]
|
|
1870
1974
|
}], propDecorators: { items: [{
|
|
1871
1975
|
type: Input,
|
|
1872
1976
|
args: [{ required: true }]
|
|
@@ -1888,7 +1992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1888
1992
|
args: ['panelTpl', { static: true }]
|
|
1889
1993
|
}], menuList: [{
|
|
1890
1994
|
type: ViewChild,
|
|
1891
|
-
args: [
|
|
1995
|
+
args: [MenuListBodyComponent]
|
|
1892
1996
|
}] } });
|
|
1893
1997
|
|
|
1894
1998
|
/**
|
|
@@ -1908,6 +2012,8 @@ class BaseFieldComponent {
|
|
|
1908
2012
|
this.filled = false;
|
|
1909
2013
|
this.disabled = false;
|
|
1910
2014
|
this.readonly = false;
|
|
2015
|
+
/** Igual a {@link BaseFieldDirective.size}: `sm` | `md` | `lg`. */
|
|
2016
|
+
this.size = 'md';
|
|
1911
2017
|
this.inputId = '';
|
|
1912
2018
|
this.errorId = '';
|
|
1913
2019
|
this.showPrefixIcon = false;
|
|
@@ -1985,11 +2091,11 @@ class BaseFieldComponent {
|
|
|
1985
2091
|
this.contextMenuSelect.emit(id);
|
|
1986
2092
|
}
|
|
1987
2093
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1988
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: BaseFieldComponent, isStandalone: true, selector: "app-base-field", inputs: { label: "label", errorMessage: "errorMessage", required: "required", showRequiredMark: "showRequiredMark", invalid: "invalid", invalidThemed: ["invalidThemed", "invalidThemed", booleanAttribute], filled: "filled", disabled: "disabled", readonly: "readonly", inputId: "inputId", errorId: "errorId", showPrefixIcon: "showPrefixIcon", prefixIcon: "prefixIcon", clearable: "clearable", clearAriaLabel: "clearAriaLabel", showSuffixSlot: "showSuffixSlot", valueAlignEnd: "valueAlignEnd", loading: ["loading", "loading", booleanAttribute], skeletonVariant: "skeletonVariant", mostrarMenuContexto: ["mostrarMenuContexto", "mostrarMenuContexto", booleanAttribute], contextMenuItems: "contextMenuItems", contextMenuId: "contextMenuId" }, outputs: { clear: "clear", contextMenuSelect: "contextMenuSelect" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"base-field\" [class.base-field--invalid]=\"invalid\"\n [class.base-field--invalid-themed]=\"invalid && invalidThemed\" [class.base-field--filled]=\"filled\"\n [class.base-field--disabled]=\"disabled\" [class.base-field--readonly]=\"readonly\"\n [class.base-field--loading]=\"loading\" [attr.aria-busy]=\"loading ? true : null\"\n [attr.aria-label]=\"loading && showFloatTpl ? label : null\">\n <div class=\"base-field__box\">\n <div class=\"base-field__prefix\">\n @if (!loading) {\n <ng-content select=\"[appFieldPrefix]\" />\n }\n @if (showFaTpl) {\n <i [attr.class]=\"prefixIconClassTpl + (loading ? ' base-field__prefix-icon--loading-dim' : '')\"\n aria-hidden=\"true\"></i>\n }\n </div>\n\n <div class=\"base-field__field\">\n @if (showFloatTpl && !loading) {\n <label class=\"base-field__float-label\" [attr.for]=\"inputId || null\">\n {{ label }}\n @if (required && showRequiredMark) {\n <span class=\"base-field__required\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n <div class=\"base-field__control\" [class.base-field__control--value-end]=\"valueAlignEnd\"\n [class.base-field__control--textarea-skeleton]=\"loading && skeletonVariant === 'textarea'\">\n @if (!loading) {\n <ng-content />\n } @else {\n <app-skeleton-field-shell [variant]=\"skeletonVariant\" [showLeadingIcon]=\"!showFaTpl\" />\n }\n </div>\n </div>\n\n @if (showSuffixTpl) {\n <div class=\"base-field__suffix\" [class.base-field__suffix--loading]=\"loading\">\n @if (!loading) {\n @if (showCtxMenuTpl) {\n <app-dropdown-menu\n class=\"base-field__ctx-dropdown\"\n [items]=\"contextMenuItems\"\n [minWidthPx]=\"200\"\n [matchTriggerWidth]=\"false\"\n [menuId]=\"resolvedContextMenuId\"\n (itemSelect)=\"onContextMenuItemSelect($event)\"\n >\n <button type=\"button\" class=\"base-field__ctx-trigger\" aria-label=\"Mais op\u00E7\u00F5es\" tabindex=\"-1\">\n <i class=\"fa-solid fa-ellipsis\" aria-hidden=\"true\"></i>\n </button>\n </app-dropdown-menu>\n }\n @if (showSuffixSlot) {\n <ng-content select=\"[appFieldSuffix]\" />\n }\n @if (showClearTpl) {\n <button type=\"button\" class=\"base-field__clear\" tabindex=\"-1\" [attr.aria-label]=\"clearAriaLabel\"\n (click)=\"onClearClick()\">\n <span class=\"base-field__clear-x\" aria-hidden=\"true\">×</span>\n </button>\n }\n } @else if (loading && showSuffixSlot) {\n <span class=\"base-field__suffix-reserve\" aria-hidden=\"true\"></span>\n }\n </div>\n }\n </div>\n\n @if (!loading && showErrorTpl) {\n <p class=\"base-field__error\" [id]=\"errorId || null\" role=\"alert\">\n {{ errorMessage }}\n </p>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.base-field{display:flex;flex-direction:column;gap:.35rem;width:100%;max-width:100%;box-sizing:border-box}.base-field--loading .base-field__box{pointer-events:none}.base-field--loading .base-field__field{justify-content:flex-start}.base-field--loading .base-field__control{display:block;width:100%;min-width:0;min-height:calc(1.8rem + 1.35em)}.base-field--loading .base-field__control--textarea-skeleton{min-height:calc(1.8rem + 4.05em)}.base-field__box{display:flex;align-items:stretch;width:100%;min-width:0;border:1px solid var(--ui-field-float-border);border-radius:var(--ui-field-float-border-radius);overflow:hidden;background:var(--field-background, var(--ui-field-float-bg));transition:border-color .1s ease,box-shadow .1s ease;contain:layout}.base-field:not(.base-field--invalid):not(.base-field--disabled):not(.base-field--readonly):not(:focus-within):hover .base-field__box{border-color:var(--ui-field-float-border-hover);box-shadow:none}.base-field--readonly:not(.base-field--disabled):not(.base-field--invalid):not(:focus-within):hover .base-field__box{border-color:var(--ui-field-readonly-border-hover);box-shadow:none}.base-field:not(.base-field--invalid):not(.base-field--disabled):not(.base-field--readonly) .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)}.base-field--readonly:not(.base-field--disabled) .base-field__box{background:var(--ui-field-readonly-bg);border-color:var(--ui-field-readonly-border)}.base-field--readonly:not(.base-field--disabled):not(.base-field--invalid) .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)}.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__box{border-color:var(--ui-field-input-invalid-border);box-shadow:none;background:var(--field-background, var(--ui-field-float-bg))}.base-field--readonly.base-field--invalid:not(.base-field--disabled):not(.base-field--invalid-themed) .base-field__box{border-color:var(--ui-field-input-invalid-border);box-shadow:none;background:var(--ui-field-readonly-bg)}.base-field--invalid.base-field--invalid-themed .base-field__box{border-color:var(--ui-field-input-invalid-border);box-shadow:none;background:var(--ui-field-invalid-input-bg, #fef2f2)}.base-field--invalid:not(.base-field--disabled):not(.base-field--readonly) .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)}.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)}.base-field--disabled .base-field__box{opacity:var(--ui-field-input-disabled-opacity)}.base-field__prefix{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding-left:.75rem;color:var(--ui-field-float-prefix-color);user-select:none;-webkit-user-select:none}.base-field__prefix:empty{display:none}.base-field__prefix-icon{font-style:normal;font-size:1rem;line-height:1;color:var(--ui-field-float-prefix-color)}.base-field__prefix-icon--loading-dim{opacity:.34;pointer-events:none}.base-field__suffix{display:grid;grid-auto-flow:column;grid-auto-columns:auto;column-gap:.125rem;align-content:center;justify-content:end;justify-items:center;flex-shrink:0;padding-right:.4rem;padding-left:.1rem;min-height:0;align-self:stretch}.base-field__ctx-dropdown{display:inline-flex;flex-shrink:0;align-items:center;max-width:100%}.base-field__ctx-trigger{display:inline-grid;place-items:center;width:2rem;height:2rem;margin:0;padding:0;border:none;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}.base-field__ctx-trigger:hover{background:var(--app-color-prefix-hover-bg, rgba(90, 127, 163, .15));color:var(--ui-field-float-label-top-color)}.base-field__ctx-trigger:focus,.base-field__ctx-trigger:focus-visible{outline:none}.base-field__clear{display:inline-grid;place-items:center;width:2rem;height:2rem;min-width:2rem;min-height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;line-height:0;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.base-field__clear:hover{background:var(--app-color-prefix-hover-bg, rgba(90, 127, 163, .15));color:var(--ui-field-float-label-top-color)}.base-field__clear:focus,.base-field__clear:focus-visible{outline:none}.base-field__clear-x{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;font-size:1.2rem;line-height:1;font-weight:300}.base-field--invalid .base-field__prefix,.base-field--invalid .base-field__prefix-icon{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__prefix-icon:before{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__suffix,.base-field--invalid .base-field__clear,.base-field--invalid .base-field__ctx-trigger{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__clear:hover,.base-field--invalid .base-field__ctx-trigger:hover{background:var(--app-color-error-bg-subtle, rgba(185, 28, 28, .12));color:var(--ui-field-float-label-invalid-color)}.base-field__field{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;contain:layout style}.base-field__float-label{position:absolute;left:.75rem;right:.75rem;top:.45rem;transform:translate3d(0,calc((1.8rem + 1.35em)/2 - .45rem - .6em),0) scale(1);transform-origin:left top;font-size:1rem;font-weight:var(--field-float-label-rest-weight, var(--structra-body-weight));line-height:1.2;color:var(--ui-field-float-label-color);pointer-events:none;user-select:none;-webkit-user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .11s cubic-bezier(.4,0,.2,1),color .11s ease}@media(prefers-reduced-motion:reduce){.base-field__float-label{transition:none}}.base-field__box:focus-within .base-field__float-label,.base-field--filled .base-field__float-label{transform:translateZ(0) scale(.75);font-weight:var(--field-label-weight, var(--structra-label-weight));color:var(--ui-field-float-label-top-color)}.base-field--invalid .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid.base-field--filled .base-field__float-label,.base-field--invalid .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field__required{color:var(--ui-field-required-mark-color);margin-left:.15rem}.base-field--invalid .base-field__required{color:var(--ui-field-float-label-invalid-color)}.base-field__control{display:block;width:100%;min-width:0}.base-field__suffix-reserve{display:block;flex-shrink:0;width:2rem;height:2rem;margin:0 .1rem;box-sizing:border-box}.base-field__control--value-end :where(input){text-align:right}.base-field--readonly:not(.base-field--disabled) .base-field__float-label{color:var(--ui-field-readonly-label-color)}.base-field--readonly.base-field--filled .base-field__float-label,.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-readonly-label-top-color)}.base-field--readonly:not(.base-field--disabled) .base-field__prefix,.base-field--readonly:not(.base-field--disabled) .base-field__prefix-icon{color:var(--ui-field-readonly-prefix-color)}.base-field--readonly:not(.base-field--disabled) .base-field__control :where(input,textarea){color:var(--ui-field-readonly-input-text)}.base-field--invalid.base-field--readonly .base-field__float-label,.base-field--invalid.base-field--readonly.base-field--filled .base-field__float-label,.base-field--invalid.base-field--readonly .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__prefix,.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__prefix-icon{color:var(--ui-field-float-label-invalid-color)}.base-field__error{margin:0;padding-left:.15rem;font-size:.75rem;font-weight:var(--field-helper-weight, var(--structra-body-weight));color:var(--ui-field-error-text-color);user-select:none;-webkit-user-select:none}@supports (-webkit-appearance: none){.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:hover,.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus,.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:active,.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--field-background, var(--ui-field-float-bg)) inset!important;box-shadow:0 0 0 1000px var(--field-background, var(--ui-field-float-bg)) inset!important;transition:background-color 50000s ease 0s!important}.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:hover,.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus,.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:active,.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;transition:background-color 50000s ease 0s!important}.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:hover,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:active,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;transition:background-color 50000s ease 0s!important}}.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:hover,.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:focus{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--field-background, var(--ui-field-float-bg)) inset!important;box-shadow:0 0 0 1000px var(--field-background, var(--ui-field-float-bg)) inset!important;background-color:var(--field-background, var(--ui-field-float-bg))!important;transition:background-color 50000s ease 0s!important}.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:hover,.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:focus{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;background-color:var(--ui-field-invalid-input-bg, #fef2f2)!important;transition:background-color 50000s ease 0s!important}.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill:hover,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill:focus{-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;background-color:var(--ui-field-readonly-bg)!important;transition:background-color 50000s ease 0s!important}\n"], dependencies: [{ kind: "component", type: SkeletonFieldShellComponent, selector: "app-skeleton-field-shell", inputs: ["variant", "animate", "showLeadingIcon"] }, { kind: "component", type: DropdownMenuComponent, selector: "app-dropdown-menu", inputs: ["items", "placement", "minWidthPx", "matchTriggerWidth", "menuId"], outputs: ["itemSelect", "openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2094
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: BaseFieldComponent, isStandalone: true, selector: "app-base-field", inputs: { label: "label", errorMessage: "errorMessage", required: "required", showRequiredMark: "showRequiredMark", invalid: "invalid", invalidThemed: ["invalidThemed", "invalidThemed", booleanAttribute], filled: "filled", disabled: "disabled", readonly: "readonly", size: "size", inputId: "inputId", errorId: "errorId", showPrefixIcon: "showPrefixIcon", prefixIcon: "prefixIcon", clearable: "clearable", clearAriaLabel: "clearAriaLabel", showSuffixSlot: "showSuffixSlot", valueAlignEnd: "valueAlignEnd", loading: ["loading", "loading", booleanAttribute], skeletonVariant: "skeletonVariant", mostrarMenuContexto: ["mostrarMenuContexto", "mostrarMenuContexto", booleanAttribute], contextMenuItems: "contextMenuItems", contextMenuId: "contextMenuId" }, outputs: { clear: "clear", contextMenuSelect: "contextMenuSelect" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"base-field\" [class.base-field--size-sm]=\"size === 'sm'\"\n [class.base-field--size-lg]=\"size === 'lg'\"\n [class.base-field--invalid]=\"invalid\"\n [class.base-field--invalid-themed]=\"invalid && invalidThemed\" [class.base-field--filled]=\"filled\"\n [class.base-field--disabled]=\"disabled\" [class.base-field--readonly]=\"readonly\"\n [class.base-field--loading]=\"loading\" [attr.aria-busy]=\"loading ? true : null\"\n [attr.aria-label]=\"loading && showFloatTpl ? label : null\">\n <div class=\"base-field__box\">\n <div class=\"base-field__prefix\">\n @if (!loading) {\n <ng-content select=\"[appFieldPrefix]\" />\n }\n @if (showFaTpl) {\n <i [attr.class]=\"prefixIconClassTpl + (loading ? ' base-field__prefix-icon--loading-dim' : '')\"\n aria-hidden=\"true\"></i>\n }\n </div>\n\n <div class=\"base-field__field\">\n @if (showFloatTpl && !loading) {\n <label class=\"base-field__float-label\" [attr.for]=\"inputId || null\">\n {{ label }}\n @if (required && showRequiredMark) {\n <span class=\"base-field__required\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n <div class=\"base-field__control\" [class.base-field__control--value-end]=\"valueAlignEnd\"\n [class.base-field__control--textarea-skeleton]=\"loading && skeletonVariant === 'textarea'\">\n @if (!loading) {\n <ng-content />\n } @else {\n <app-skeleton-field-shell [variant]=\"skeletonVariant\" [showLeadingIcon]=\"!showFaTpl\" />\n }\n </div>\n </div>\n\n @if (showSuffixTpl) {\n <div class=\"base-field__suffix\" [class.base-field__suffix--loading]=\"loading\">\n @if (!loading) {\n @if (showCtxMenuTpl) {\n <app-dropdown-menu\n class=\"base-field__ctx-dropdown\"\n [items]=\"contextMenuItems\"\n [minWidthPx]=\"200\"\n [matchTriggerWidth]=\"false\"\n [menuId]=\"resolvedContextMenuId\"\n (itemSelect)=\"onContextMenuItemSelect($event)\"\n >\n <button type=\"button\" class=\"base-field__ctx-trigger\" aria-label=\"Mais op\u00E7\u00F5es\" tabindex=\"-1\">\n <i class=\"fa-solid fa-ellipsis\" aria-hidden=\"true\"></i>\n </button>\n </app-dropdown-menu>\n }\n @if (showSuffixSlot) {\n <ng-content select=\"[appFieldSuffix]\" />\n }\n @if (showClearTpl) {\n <button type=\"button\" class=\"base-field__clear\" tabindex=\"-1\" [attr.aria-label]=\"clearAriaLabel\"\n (click)=\"onClearClick()\">\n <span class=\"base-field__clear-x\" aria-hidden=\"true\">×</span>\n </button>\n }\n } @else if (loading && showSuffixSlot) {\n <span class=\"base-field__suffix-reserve\" aria-hidden=\"true\"></span>\n }\n </div>\n }\n </div>\n\n @if (!loading && showErrorTpl) {\n <p class=\"base-field__error\" [id]=\"errorId || null\" role=\"alert\">\n {{ errorMessage }}\n </p>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.base-field{display:flex;flex-direction:column;gap:.35rem;width:100%;max-width:100%;box-sizing:border-box}.base-field--loading .base-field__box{pointer-events:none}.base-field--loading .base-field__field{justify-content:flex-start}.base-field--loading .base-field__control{display:block;width:100%;min-width:0;min-height:calc(1.8rem + 1.35em)}.base-field--size-sm.base-field--loading .base-field__control{min-height:2.345625rem}.base-field--loading .base-field__control--textarea-skeleton{min-height:calc(1.8rem + 4.05em)}.base-field--size-sm.base-field--loading .base-field__control--textarea-skeleton{min-height:calc(1.5rem + 3.75em)}.base-field--size-lg.base-field--loading .base-field__control{min-height:3.5375rem}.base-field--size-lg.base-field--loading .base-field__control--textarea-skeleton{min-height:calc(2.1rem + 4.2em)}.base-field__box{display:flex;align-items:stretch;width:100%;min-width:0;border:1px solid var(--ui-field-float-border);border-radius:var(--ui-field-float-border-radius);overflow:hidden;background:var(--field-background, var(--ui-field-float-bg));transition:border-color .1s ease,box-shadow .1s ease;contain:layout}.base-field:not(.base-field--invalid):not(.base-field--disabled):not(.base-field--readonly):not(:focus-within):hover .base-field__box{border-color:var(--ui-field-float-border-hover);box-shadow:none}.base-field--readonly:not(.base-field--disabled):not(.base-field--invalid):not(:focus-within):hover .base-field__box{border-color:var(--ui-field-readonly-border-hover);box-shadow:none}.base-field:not(.base-field--invalid):not(.base-field--disabled):not(.base-field--readonly) .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)}.base-field--readonly:not(.base-field--disabled) .base-field__box{background:var(--ui-field-readonly-bg);border-color:var(--ui-field-readonly-border)}.base-field--readonly:not(.base-field--disabled):not(.base-field--invalid) .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)}.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__box{border-color:var(--ui-field-input-invalid-border);box-shadow:none;background:var(--field-background, var(--ui-field-float-bg))}.base-field--readonly.base-field--invalid:not(.base-field--disabled):not(.base-field--invalid-themed) .base-field__box{border-color:var(--ui-field-input-invalid-border);box-shadow:none;background:var(--ui-field-readonly-bg)}.base-field--invalid.base-field--invalid-themed .base-field__box{border-color:var(--ui-field-input-invalid-border);box-shadow:none;background:var(--ui-field-invalid-input-bg, #fef2f2)}.base-field--invalid:not(.base-field--disabled):not(.base-field--readonly) .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)}.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)}.base-field--disabled .base-field__box{opacity:var(--ui-field-input-disabled-opacity)}.base-field__prefix{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding-left:.75rem;color:var(--ui-field-float-prefix-color);user-select:none;-webkit-user-select:none}.base-field__prefix:empty{display:none}.base-field__prefix-icon{font-style:normal;font-size:1rem;line-height:1;color:var(--ui-field-float-prefix-color)}.base-field__prefix-icon--loading-dim{opacity:.34;pointer-events:none}.base-field__suffix{display:grid;grid-auto-flow:column;grid-auto-columns:auto;column-gap:.125rem;align-content:center;justify-content:end;justify-items:center;flex-shrink:0;padding-right:.4rem;padding-left:.1rem;min-height:0;align-self:stretch}.base-field__ctx-dropdown{display:inline-flex;flex-shrink:0;align-items:center;max-width:100%}.base-field__ctx-trigger{display:inline-grid;place-items:center;width:2rem;height:2rem;margin:0;padding:0;border:none;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}.base-field__ctx-trigger:hover{background:var(--app-color-prefix-hover-bg, rgba(90, 127, 163, .15));color:var(--ui-field-float-label-top-color)}.base-field__ctx-trigger:focus,.base-field__ctx-trigger:focus-visible{outline:none}.base-field__clear{display:inline-grid;place-items:center;width:2rem;height:2rem;min-width:2rem;min-height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;line-height:0;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.base-field__clear:hover{background:var(--app-color-prefix-hover-bg, rgba(90, 127, 163, .15));color:var(--ui-field-float-label-top-color)}.base-field__clear:focus,.base-field__clear:focus-visible{outline:none}.base-field__clear-x{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;font-size:1.2rem;line-height:1;font-weight:300}.base-field--invalid .base-field__prefix,.base-field--invalid .base-field__prefix-icon{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__prefix-icon:before{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__suffix,.base-field--invalid .base-field__clear,.base-field--invalid .base-field__ctx-trigger{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__clear:hover,.base-field--invalid .base-field__ctx-trigger:hover{background:var(--app-color-error-bg-subtle, rgba(185, 28, 28, .12));color:var(--ui-field-float-label-invalid-color)}.base-field__field{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;contain:layout style}.base-field__float-label{position:absolute;left:.75rem;right:.75rem;top:.45rem;transform:translate3d(0,calc((1.8rem + 1.35em)/2 - .45rem - .6em),0) scale(1);transform-origin:left top;font-size:1rem;font-weight:var(--field-float-label-rest-weight, var(--structra-body-weight));line-height:1.2;color:var(--ui-field-float-label-color);pointer-events:none;user-select:none;-webkit-user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .11s cubic-bezier(.4,0,.2,1),color .11s ease}@media(prefers-reduced-motion:reduce){.base-field__float-label{transition:none}}.base-field__box:focus-within .base-field__float-label,.base-field--filled .base-field__float-label{transform:translateZ(0) scale(.75);font-weight:var(--field-label-weight, var(--structra-label-weight));color:var(--ui-field-float-label-top-color)}.base-field--invalid .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid.base-field--filled .base-field__float-label,.base-field--invalid .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field__required{color:var(--ui-field-required-mark-color);margin-left:.15rem}.base-field--invalid .base-field__required{color:var(--ui-field-float-label-invalid-color)}.base-field__control{display:block;width:100%;min-width:0}.base-field__suffix-reserve{display:block;flex-shrink:0;width:2rem;height:2rem;margin:0 .1rem;box-sizing:border-box}.base-field__control--value-end :where(input){text-align:right}.base-field--readonly:not(.base-field--disabled) .base-field__float-label{color:var(--ui-field-readonly-label-color)}.base-field--readonly.base-field--filled .base-field__float-label,.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-readonly-label-top-color)}.base-field--readonly:not(.base-field--disabled) .base-field__prefix,.base-field--readonly:not(.base-field--disabled) .base-field__prefix-icon{color:var(--ui-field-readonly-prefix-color)}.base-field--readonly:not(.base-field--disabled) .base-field__control :where(input,textarea){color:var(--ui-field-readonly-input-text)}.base-field--invalid.base-field--readonly .base-field__float-label,.base-field--invalid.base-field--readonly.base-field--filled .base-field__float-label,.base-field--invalid.base-field--readonly .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__prefix,.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__prefix-icon{color:var(--ui-field-float-label-invalid-color)}.base-field__error{margin:0;padding-left:.15rem;font-size:.75rem;font-weight:var(--field-helper-weight, var(--structra-body-weight));color:var(--ui-field-error-text-color);user-select:none;-webkit-user-select:none}@supports (-webkit-appearance: none){.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:hover,.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus,.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:active,.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--field-background, var(--ui-field-float-bg)) inset!important;box-shadow:0 0 0 1000px var(--field-background, var(--ui-field-float-bg)) inset!important;transition:background-color 50000s ease 0s!important}.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:hover,.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus,.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:active,.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;transition:background-color 50000s ease 0s!important}.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:hover,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:active,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;transition:background-color 50000s ease 0s!important}}.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:hover,.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:focus{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--field-background, var(--ui-field-float-bg)) inset!important;box-shadow:0 0 0 1000px var(--field-background, var(--ui-field-float-bg)) inset!important;background-color:var(--field-background, var(--ui-field-float-bg))!important;transition:background-color 50000s ease 0s!important}.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:hover,.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:focus{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;background-color:var(--ui-field-invalid-input-bg, #fef2f2)!important;transition:background-color 50000s ease 0s!important}.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill:hover,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill:focus{-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;background-color:var(--ui-field-readonly-bg)!important;transition:background-color 50000s ease 0s!important}.base-field--size-sm .base-field__prefix{padding-left:.45rem}.base-field--size-sm .base-field__prefix-icon{font-size:.8125rem}.base-field--size-sm .base-field__suffix{padding-right:.28rem;padding-left:.06rem;column-gap:.05rem}.base-field--size-sm .base-field__float-label{left:.45rem;right:.45rem;top:.28rem;font-size:.8125rem;transform:translate3d(0,.4459375rem,0) scale(1)}.base-field--size-sm .base-field__box:focus-within .base-field__float-label,.base-field--size-sm.base-field--filled .base-field__float-label{transform:translateZ(0) scale(.75)}.base-field--size-sm .base-field__clear,.base-field--size-sm .base-field__ctx-trigger{width:1.65rem;height:1.65rem;min-width:1.65rem;min-height:1.65rem}.base-field--size-sm .base-field__clear-x{font-size:1.05rem;width:1.1rem;height:1.1rem}.base-field--size-sm .base-field__suffix-reserve{width:1.65rem;height:1.65rem}.base-field--size-sm .base-field__control ::ng-deep .text-field__input,.base-field--size-sm .base-field__control ::ng-deep .integer-field__input,.base-field--size-sm .base-field__control ::ng-deep .decimal-field__input,.base-field--size-sm .base-field__control ::ng-deep .password-field__input,.base-field--size-sm .base-field__control ::ng-deep .cep-field__input,.base-field--size-sm .base-field__control ::ng-deep .phone-field__input,.base-field--size-sm .base-field__control ::ng-deep .cpf-cnpj-field__input,.base-field--size-sm .base-field__control ::ng-deep .input-mask-field__input,.base-field--size-sm .base-field__control ::ng-deep .textarea-field__input{padding:1.05rem .45rem .28rem;font-size:.8125rem;line-height:1.25}.base-field--size-lg .base-field__prefix{padding-left:.95rem}.base-field--size-lg .base-field__prefix-icon{font-size:1.0625rem}.base-field--size-lg .base-field__suffix{padding-right:.52rem;padding-left:.12rem;column-gap:.15rem}.base-field--size-lg .base-field__float-label{left:.9rem;right:.9rem;top:.48rem;font-size:1.0625rem;transform:translate3d(0,.6246875rem,0) scale(1)}.base-field--size-lg .base-field__box:focus-within .base-field__float-label,.base-field--size-lg.base-field--filled .base-field__float-label{transform:translateZ(0) scale(.75)}.base-field--size-lg .base-field__clear,.base-field--size-lg .base-field__ctx-trigger{width:2.35rem;height:2.35rem;min-width:2.35rem;min-height:2.35rem}.base-field--size-lg .base-field__clear-x{font-size:1.35rem;width:1.35rem;height:1.35rem}.base-field--size-lg .base-field__suffix-reserve{width:2.35rem;height:2.35rem}.base-field--size-lg .base-field__control ::ng-deep .text-field__input,.base-field--size-lg .base-field__control ::ng-deep .integer-field__input,.base-field--size-lg .base-field__control ::ng-deep .decimal-field__input,.base-field--size-lg .base-field__control ::ng-deep .password-field__input,.base-field--size-lg .base-field__control ::ng-deep .cep-field__input,.base-field--size-lg .base-field__control ::ng-deep .phone-field__input,.base-field--size-lg .base-field__control ::ng-deep .cpf-cnpj-field__input,.base-field--size-lg .base-field__control ::ng-deep .input-mask-field__input,.base-field--size-lg .base-field__control ::ng-deep .textarea-field__input{padding:1.55rem .9rem .5rem;font-size:1.0625rem;line-height:1.4}\n"], dependencies: [{ kind: "component", type: SkeletonFieldShellComponent, selector: "app-skeleton-field-shell", inputs: ["variant", "animate", "showLeadingIcon"] }, { kind: "component", type: DropdownMenuComponent, selector: "app-dropdown-menu", inputs: ["items", "placement", "minWidthPx", "matchTriggerWidth", "menuId"], outputs: ["itemSelect", "openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1989
2095
|
}
|
|
1990
2096
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseFieldComponent, decorators: [{
|
|
1991
2097
|
type: Component,
|
|
1992
|
-
args: [{ selector: 'app-base-field', imports: [SkeletonFieldShellComponent, DropdownMenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"base-field\" [class.base-field--invalid]=\"invalid\"\n [class.base-field--invalid-themed]=\"invalid && invalidThemed\" [class.base-field--filled]=\"filled\"\n [class.base-field--disabled]=\"disabled\" [class.base-field--readonly]=\"readonly\"\n [class.base-field--loading]=\"loading\" [attr.aria-busy]=\"loading ? true : null\"\n [attr.aria-label]=\"loading && showFloatTpl ? label : null\">\n <div class=\"base-field__box\">\n <div class=\"base-field__prefix\">\n @if (!loading) {\n <ng-content select=\"[appFieldPrefix]\" />\n }\n @if (showFaTpl) {\n <i [attr.class]=\"prefixIconClassTpl + (loading ? ' base-field__prefix-icon--loading-dim' : '')\"\n aria-hidden=\"true\"></i>\n }\n </div>\n\n <div class=\"base-field__field\">\n @if (showFloatTpl && !loading) {\n <label class=\"base-field__float-label\" [attr.for]=\"inputId || null\">\n {{ label }}\n @if (required && showRequiredMark) {\n <span class=\"base-field__required\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n <div class=\"base-field__control\" [class.base-field__control--value-end]=\"valueAlignEnd\"\n [class.base-field__control--textarea-skeleton]=\"loading && skeletonVariant === 'textarea'\">\n @if (!loading) {\n <ng-content />\n } @else {\n <app-skeleton-field-shell [variant]=\"skeletonVariant\" [showLeadingIcon]=\"!showFaTpl\" />\n }\n </div>\n </div>\n\n @if (showSuffixTpl) {\n <div class=\"base-field__suffix\" [class.base-field__suffix--loading]=\"loading\">\n @if (!loading) {\n @if (showCtxMenuTpl) {\n <app-dropdown-menu\n class=\"base-field__ctx-dropdown\"\n [items]=\"contextMenuItems\"\n [minWidthPx]=\"200\"\n [matchTriggerWidth]=\"false\"\n [menuId]=\"resolvedContextMenuId\"\n (itemSelect)=\"onContextMenuItemSelect($event)\"\n >\n <button type=\"button\" class=\"base-field__ctx-trigger\" aria-label=\"Mais op\u00E7\u00F5es\" tabindex=\"-1\">\n <i class=\"fa-solid fa-ellipsis\" aria-hidden=\"true\"></i>\n </button>\n </app-dropdown-menu>\n }\n @if (showSuffixSlot) {\n <ng-content select=\"[appFieldSuffix]\" />\n }\n @if (showClearTpl) {\n <button type=\"button\" class=\"base-field__clear\" tabindex=\"-1\" [attr.aria-label]=\"clearAriaLabel\"\n (click)=\"onClearClick()\">\n <span class=\"base-field__clear-x\" aria-hidden=\"true\">×</span>\n </button>\n }\n } @else if (loading && showSuffixSlot) {\n <span class=\"base-field__suffix-reserve\" aria-hidden=\"true\"></span>\n }\n </div>\n }\n </div>\n\n @if (!loading && showErrorTpl) {\n <p class=\"base-field__error\" [id]=\"errorId || null\" role=\"alert\">\n {{ errorMessage }}\n </p>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.base-field{display:flex;flex-direction:column;gap:.35rem;width:100%;max-width:100%;box-sizing:border-box}.base-field--loading .base-field__box{pointer-events:none}.base-field--loading .base-field__field{justify-content:flex-start}.base-field--loading .base-field__control{display:block;width:100%;min-width:0;min-height:calc(1.8rem + 1.35em)}.base-field--loading .base-field__control--textarea-skeleton{min-height:calc(1.8rem + 4.05em)}.base-field__box{display:flex;align-items:stretch;width:100%;min-width:0;border:1px solid var(--ui-field-float-border);border-radius:var(--ui-field-float-border-radius);overflow:hidden;background:var(--field-background, var(--ui-field-float-bg));transition:border-color .1s ease,box-shadow .1s ease;contain:layout}.base-field:not(.base-field--invalid):not(.base-field--disabled):not(.base-field--readonly):not(:focus-within):hover .base-field__box{border-color:var(--ui-field-float-border-hover);box-shadow:none}.base-field--readonly:not(.base-field--disabled):not(.base-field--invalid):not(:focus-within):hover .base-field__box{border-color:var(--ui-field-readonly-border-hover);box-shadow:none}.base-field:not(.base-field--invalid):not(.base-field--disabled):not(.base-field--readonly) .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)}.base-field--readonly:not(.base-field--disabled) .base-field__box{background:var(--ui-field-readonly-bg);border-color:var(--ui-field-readonly-border)}.base-field--readonly:not(.base-field--disabled):not(.base-field--invalid) .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)}.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__box{border-color:var(--ui-field-input-invalid-border);box-shadow:none;background:var(--field-background, var(--ui-field-float-bg))}.base-field--readonly.base-field--invalid:not(.base-field--disabled):not(.base-field--invalid-themed) .base-field__box{border-color:var(--ui-field-input-invalid-border);box-shadow:none;background:var(--ui-field-readonly-bg)}.base-field--invalid.base-field--invalid-themed .base-field__box{border-color:var(--ui-field-input-invalid-border);box-shadow:none;background:var(--ui-field-invalid-input-bg, #fef2f2)}.base-field--invalid:not(.base-field--disabled):not(.base-field--readonly) .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)}.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)}.base-field--disabled .base-field__box{opacity:var(--ui-field-input-disabled-opacity)}.base-field__prefix{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding-left:.75rem;color:var(--ui-field-float-prefix-color);user-select:none;-webkit-user-select:none}.base-field__prefix:empty{display:none}.base-field__prefix-icon{font-style:normal;font-size:1rem;line-height:1;color:var(--ui-field-float-prefix-color)}.base-field__prefix-icon--loading-dim{opacity:.34;pointer-events:none}.base-field__suffix{display:grid;grid-auto-flow:column;grid-auto-columns:auto;column-gap:.125rem;align-content:center;justify-content:end;justify-items:center;flex-shrink:0;padding-right:.4rem;padding-left:.1rem;min-height:0;align-self:stretch}.base-field__ctx-dropdown{display:inline-flex;flex-shrink:0;align-items:center;max-width:100%}.base-field__ctx-trigger{display:inline-grid;place-items:center;width:2rem;height:2rem;margin:0;padding:0;border:none;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}.base-field__ctx-trigger:hover{background:var(--app-color-prefix-hover-bg, rgba(90, 127, 163, .15));color:var(--ui-field-float-label-top-color)}.base-field__ctx-trigger:focus,.base-field__ctx-trigger:focus-visible{outline:none}.base-field__clear{display:inline-grid;place-items:center;width:2rem;height:2rem;min-width:2rem;min-height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;line-height:0;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.base-field__clear:hover{background:var(--app-color-prefix-hover-bg, rgba(90, 127, 163, .15));color:var(--ui-field-float-label-top-color)}.base-field__clear:focus,.base-field__clear:focus-visible{outline:none}.base-field__clear-x{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;font-size:1.2rem;line-height:1;font-weight:300}.base-field--invalid .base-field__prefix,.base-field--invalid .base-field__prefix-icon{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__prefix-icon:before{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__suffix,.base-field--invalid .base-field__clear,.base-field--invalid .base-field__ctx-trigger{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__clear:hover,.base-field--invalid .base-field__ctx-trigger:hover{background:var(--app-color-error-bg-subtle, rgba(185, 28, 28, .12));color:var(--ui-field-float-label-invalid-color)}.base-field__field{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;contain:layout style}.base-field__float-label{position:absolute;left:.75rem;right:.75rem;top:.45rem;transform:translate3d(0,calc((1.8rem + 1.35em)/2 - .45rem - .6em),0) scale(1);transform-origin:left top;font-size:1rem;font-weight:var(--field-float-label-rest-weight, var(--structra-body-weight));line-height:1.2;color:var(--ui-field-float-label-color);pointer-events:none;user-select:none;-webkit-user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .11s cubic-bezier(.4,0,.2,1),color .11s ease}@media(prefers-reduced-motion:reduce){.base-field__float-label{transition:none}}.base-field__box:focus-within .base-field__float-label,.base-field--filled .base-field__float-label{transform:translateZ(0) scale(.75);font-weight:var(--field-label-weight, var(--structra-label-weight));color:var(--ui-field-float-label-top-color)}.base-field--invalid .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid.base-field--filled .base-field__float-label,.base-field--invalid .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field__required{color:var(--ui-field-required-mark-color);margin-left:.15rem}.base-field--invalid .base-field__required{color:var(--ui-field-float-label-invalid-color)}.base-field__control{display:block;width:100%;min-width:0}.base-field__suffix-reserve{display:block;flex-shrink:0;width:2rem;height:2rem;margin:0 .1rem;box-sizing:border-box}.base-field__control--value-end :where(input){text-align:right}.base-field--readonly:not(.base-field--disabled) .base-field__float-label{color:var(--ui-field-readonly-label-color)}.base-field--readonly.base-field--filled .base-field__float-label,.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-readonly-label-top-color)}.base-field--readonly:not(.base-field--disabled) .base-field__prefix,.base-field--readonly:not(.base-field--disabled) .base-field__prefix-icon{color:var(--ui-field-readonly-prefix-color)}.base-field--readonly:not(.base-field--disabled) .base-field__control :where(input,textarea){color:var(--ui-field-readonly-input-text)}.base-field--invalid.base-field--readonly .base-field__float-label,.base-field--invalid.base-field--readonly.base-field--filled .base-field__float-label,.base-field--invalid.base-field--readonly .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__prefix,.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__prefix-icon{color:var(--ui-field-float-label-invalid-color)}.base-field__error{margin:0;padding-left:.15rem;font-size:.75rem;font-weight:var(--field-helper-weight, var(--structra-body-weight));color:var(--ui-field-error-text-color);user-select:none;-webkit-user-select:none}@supports (-webkit-appearance: none){.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:hover,.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus,.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:active,.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--field-background, var(--ui-field-float-bg)) inset!important;box-shadow:0 0 0 1000px var(--field-background, var(--ui-field-float-bg)) inset!important;transition:background-color 50000s ease 0s!important}.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:hover,.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus,.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:active,.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;transition:background-color 50000s ease 0s!important}.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:hover,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:active,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;transition:background-color 50000s ease 0s!important}}.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:hover,.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:focus{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--field-background, var(--ui-field-float-bg)) inset!important;box-shadow:0 0 0 1000px var(--field-background, var(--ui-field-float-bg)) inset!important;background-color:var(--field-background, var(--ui-field-float-bg))!important;transition:background-color 50000s ease 0s!important}.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:hover,.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:focus{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;background-color:var(--ui-field-invalid-input-bg, #fef2f2)!important;transition:background-color 50000s ease 0s!important}.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill:hover,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill:focus{-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;background-color:var(--ui-field-readonly-bg)!important;transition:background-color 50000s ease 0s!important}\n"] }]
|
|
2098
|
+
args: [{ selector: 'app-base-field', imports: [SkeletonFieldShellComponent, DropdownMenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"base-field\" [class.base-field--size-sm]=\"size === 'sm'\"\n [class.base-field--size-lg]=\"size === 'lg'\"\n [class.base-field--invalid]=\"invalid\"\n [class.base-field--invalid-themed]=\"invalid && invalidThemed\" [class.base-field--filled]=\"filled\"\n [class.base-field--disabled]=\"disabled\" [class.base-field--readonly]=\"readonly\"\n [class.base-field--loading]=\"loading\" [attr.aria-busy]=\"loading ? true : null\"\n [attr.aria-label]=\"loading && showFloatTpl ? label : null\">\n <div class=\"base-field__box\">\n <div class=\"base-field__prefix\">\n @if (!loading) {\n <ng-content select=\"[appFieldPrefix]\" />\n }\n @if (showFaTpl) {\n <i [attr.class]=\"prefixIconClassTpl + (loading ? ' base-field__prefix-icon--loading-dim' : '')\"\n aria-hidden=\"true\"></i>\n }\n </div>\n\n <div class=\"base-field__field\">\n @if (showFloatTpl && !loading) {\n <label class=\"base-field__float-label\" [attr.for]=\"inputId || null\">\n {{ label }}\n @if (required && showRequiredMark) {\n <span class=\"base-field__required\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n <div class=\"base-field__control\" [class.base-field__control--value-end]=\"valueAlignEnd\"\n [class.base-field__control--textarea-skeleton]=\"loading && skeletonVariant === 'textarea'\">\n @if (!loading) {\n <ng-content />\n } @else {\n <app-skeleton-field-shell [variant]=\"skeletonVariant\" [showLeadingIcon]=\"!showFaTpl\" />\n }\n </div>\n </div>\n\n @if (showSuffixTpl) {\n <div class=\"base-field__suffix\" [class.base-field__suffix--loading]=\"loading\">\n @if (!loading) {\n @if (showCtxMenuTpl) {\n <app-dropdown-menu\n class=\"base-field__ctx-dropdown\"\n [items]=\"contextMenuItems\"\n [minWidthPx]=\"200\"\n [matchTriggerWidth]=\"false\"\n [menuId]=\"resolvedContextMenuId\"\n (itemSelect)=\"onContextMenuItemSelect($event)\"\n >\n <button type=\"button\" class=\"base-field__ctx-trigger\" aria-label=\"Mais op\u00E7\u00F5es\" tabindex=\"-1\">\n <i class=\"fa-solid fa-ellipsis\" aria-hidden=\"true\"></i>\n </button>\n </app-dropdown-menu>\n }\n @if (showSuffixSlot) {\n <ng-content select=\"[appFieldSuffix]\" />\n }\n @if (showClearTpl) {\n <button type=\"button\" class=\"base-field__clear\" tabindex=\"-1\" [attr.aria-label]=\"clearAriaLabel\"\n (click)=\"onClearClick()\">\n <span class=\"base-field__clear-x\" aria-hidden=\"true\">×</span>\n </button>\n }\n } @else if (loading && showSuffixSlot) {\n <span class=\"base-field__suffix-reserve\" aria-hidden=\"true\"></span>\n }\n </div>\n }\n </div>\n\n @if (!loading && showErrorTpl) {\n <p class=\"base-field__error\" [id]=\"errorId || null\" role=\"alert\">\n {{ errorMessage }}\n </p>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.base-field{display:flex;flex-direction:column;gap:.35rem;width:100%;max-width:100%;box-sizing:border-box}.base-field--loading .base-field__box{pointer-events:none}.base-field--loading .base-field__field{justify-content:flex-start}.base-field--loading .base-field__control{display:block;width:100%;min-width:0;min-height:calc(1.8rem + 1.35em)}.base-field--size-sm.base-field--loading .base-field__control{min-height:2.345625rem}.base-field--loading .base-field__control--textarea-skeleton{min-height:calc(1.8rem + 4.05em)}.base-field--size-sm.base-field--loading .base-field__control--textarea-skeleton{min-height:calc(1.5rem + 3.75em)}.base-field--size-lg.base-field--loading .base-field__control{min-height:3.5375rem}.base-field--size-lg.base-field--loading .base-field__control--textarea-skeleton{min-height:calc(2.1rem + 4.2em)}.base-field__box{display:flex;align-items:stretch;width:100%;min-width:0;border:1px solid var(--ui-field-float-border);border-radius:var(--ui-field-float-border-radius);overflow:hidden;background:var(--field-background, var(--ui-field-float-bg));transition:border-color .1s ease,box-shadow .1s ease;contain:layout}.base-field:not(.base-field--invalid):not(.base-field--disabled):not(.base-field--readonly):not(:focus-within):hover .base-field__box{border-color:var(--ui-field-float-border-hover);box-shadow:none}.base-field--readonly:not(.base-field--disabled):not(.base-field--invalid):not(:focus-within):hover .base-field__box{border-color:var(--ui-field-readonly-border-hover);box-shadow:none}.base-field:not(.base-field--invalid):not(.base-field--disabled):not(.base-field--readonly) .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)}.base-field--readonly:not(.base-field--disabled) .base-field__box{background:var(--ui-field-readonly-bg);border-color:var(--ui-field-readonly-border)}.base-field--readonly:not(.base-field--disabled):not(.base-field--invalid) .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)}.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__box{border-color:var(--ui-field-input-invalid-border);box-shadow:none;background:var(--field-background, var(--ui-field-float-bg))}.base-field--readonly.base-field--invalid:not(.base-field--disabled):not(.base-field--invalid-themed) .base-field__box{border-color:var(--ui-field-input-invalid-border);box-shadow:none;background:var(--ui-field-readonly-bg)}.base-field--invalid.base-field--invalid-themed .base-field__box{border-color:var(--ui-field-input-invalid-border);box-shadow:none;background:var(--ui-field-invalid-input-bg, #fef2f2)}.base-field--invalid:not(.base-field--disabled):not(.base-field--readonly) .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)}.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)}.base-field--disabled .base-field__box{opacity:var(--ui-field-input-disabled-opacity)}.base-field__prefix{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding-left:.75rem;color:var(--ui-field-float-prefix-color);user-select:none;-webkit-user-select:none}.base-field__prefix:empty{display:none}.base-field__prefix-icon{font-style:normal;font-size:1rem;line-height:1;color:var(--ui-field-float-prefix-color)}.base-field__prefix-icon--loading-dim{opacity:.34;pointer-events:none}.base-field__suffix{display:grid;grid-auto-flow:column;grid-auto-columns:auto;column-gap:.125rem;align-content:center;justify-content:end;justify-items:center;flex-shrink:0;padding-right:.4rem;padding-left:.1rem;min-height:0;align-self:stretch}.base-field__ctx-dropdown{display:inline-flex;flex-shrink:0;align-items:center;max-width:100%}.base-field__ctx-trigger{display:inline-grid;place-items:center;width:2rem;height:2rem;margin:0;padding:0;border:none;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}.base-field__ctx-trigger:hover{background:var(--app-color-prefix-hover-bg, rgba(90, 127, 163, .15));color:var(--ui-field-float-label-top-color)}.base-field__ctx-trigger:focus,.base-field__ctx-trigger:focus-visible{outline:none}.base-field__clear{display:inline-grid;place-items:center;width:2rem;height:2rem;min-width:2rem;min-height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;line-height:0;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.base-field__clear:hover{background:var(--app-color-prefix-hover-bg, rgba(90, 127, 163, .15));color:var(--ui-field-float-label-top-color)}.base-field__clear:focus,.base-field__clear:focus-visible{outline:none}.base-field__clear-x{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;font-size:1.2rem;line-height:1;font-weight:300}.base-field--invalid .base-field__prefix,.base-field--invalid .base-field__prefix-icon{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__prefix-icon:before{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__suffix,.base-field--invalid .base-field__clear,.base-field--invalid .base-field__ctx-trigger{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__clear:hover,.base-field--invalid .base-field__ctx-trigger:hover{background:var(--app-color-error-bg-subtle, rgba(185, 28, 28, .12));color:var(--ui-field-float-label-invalid-color)}.base-field__field{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;contain:layout style}.base-field__float-label{position:absolute;left:.75rem;right:.75rem;top:.45rem;transform:translate3d(0,calc((1.8rem + 1.35em)/2 - .45rem - .6em),0) scale(1);transform-origin:left top;font-size:1rem;font-weight:var(--field-float-label-rest-weight, var(--structra-body-weight));line-height:1.2;color:var(--ui-field-float-label-color);pointer-events:none;user-select:none;-webkit-user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .11s cubic-bezier(.4,0,.2,1),color .11s ease}@media(prefers-reduced-motion:reduce){.base-field__float-label{transition:none}}.base-field__box:focus-within .base-field__float-label,.base-field--filled .base-field__float-label{transform:translateZ(0) scale(.75);font-weight:var(--field-label-weight, var(--structra-label-weight));color:var(--ui-field-float-label-top-color)}.base-field--invalid .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid.base-field--filled .base-field__float-label,.base-field--invalid .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field__required{color:var(--ui-field-required-mark-color);margin-left:.15rem}.base-field--invalid .base-field__required{color:var(--ui-field-float-label-invalid-color)}.base-field__control{display:block;width:100%;min-width:0}.base-field__suffix-reserve{display:block;flex-shrink:0;width:2rem;height:2rem;margin:0 .1rem;box-sizing:border-box}.base-field__control--value-end :where(input){text-align:right}.base-field--readonly:not(.base-field--disabled) .base-field__float-label{color:var(--ui-field-readonly-label-color)}.base-field--readonly.base-field--filled .base-field__float-label,.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-readonly-label-top-color)}.base-field--readonly:not(.base-field--disabled) .base-field__prefix,.base-field--readonly:not(.base-field--disabled) .base-field__prefix-icon{color:var(--ui-field-readonly-prefix-color)}.base-field--readonly:not(.base-field--disabled) .base-field__control :where(input,textarea){color:var(--ui-field-readonly-input-text)}.base-field--invalid.base-field--readonly .base-field__float-label,.base-field--invalid.base-field--readonly.base-field--filled .base-field__float-label,.base-field--invalid.base-field--readonly .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__prefix,.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__prefix-icon{color:var(--ui-field-float-label-invalid-color)}.base-field__error{margin:0;padding-left:.15rem;font-size:.75rem;font-weight:var(--field-helper-weight, var(--structra-body-weight));color:var(--ui-field-error-text-color);user-select:none;-webkit-user-select:none}@supports (-webkit-appearance: none){.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:hover,.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus,.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:active,.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--field-background, var(--ui-field-float-bg)) inset!important;box-shadow:0 0 0 1000px var(--field-background, var(--ui-field-float-bg)) inset!important;transition:background-color 50000s ease 0s!important}.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:hover,.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus,.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:active,.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;transition:background-color 50000s ease 0s!important}.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:hover,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:active,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;transition:background-color 50000s ease 0s!important}}.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:hover,.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:focus{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--field-background, var(--ui-field-float-bg)) inset!important;box-shadow:0 0 0 1000px var(--field-background, var(--ui-field-float-bg)) inset!important;background-color:var(--field-background, var(--ui-field-float-bg))!important;transition:background-color 50000s ease 0s!important}.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:hover,.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:focus{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;background-color:var(--ui-field-invalid-input-bg, #fef2f2)!important;transition:background-color 50000s ease 0s!important}.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill:hover,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill:focus{-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;background-color:var(--ui-field-readonly-bg)!important;transition:background-color 50000s ease 0s!important}.base-field--size-sm .base-field__prefix{padding-left:.45rem}.base-field--size-sm .base-field__prefix-icon{font-size:.8125rem}.base-field--size-sm .base-field__suffix{padding-right:.28rem;padding-left:.06rem;column-gap:.05rem}.base-field--size-sm .base-field__float-label{left:.45rem;right:.45rem;top:.28rem;font-size:.8125rem;transform:translate3d(0,.4459375rem,0) scale(1)}.base-field--size-sm .base-field__box:focus-within .base-field__float-label,.base-field--size-sm.base-field--filled .base-field__float-label{transform:translateZ(0) scale(.75)}.base-field--size-sm .base-field__clear,.base-field--size-sm .base-field__ctx-trigger{width:1.65rem;height:1.65rem;min-width:1.65rem;min-height:1.65rem}.base-field--size-sm .base-field__clear-x{font-size:1.05rem;width:1.1rem;height:1.1rem}.base-field--size-sm .base-field__suffix-reserve{width:1.65rem;height:1.65rem}.base-field--size-sm .base-field__control ::ng-deep .text-field__input,.base-field--size-sm .base-field__control ::ng-deep .integer-field__input,.base-field--size-sm .base-field__control ::ng-deep .decimal-field__input,.base-field--size-sm .base-field__control ::ng-deep .password-field__input,.base-field--size-sm .base-field__control ::ng-deep .cep-field__input,.base-field--size-sm .base-field__control ::ng-deep .phone-field__input,.base-field--size-sm .base-field__control ::ng-deep .cpf-cnpj-field__input,.base-field--size-sm .base-field__control ::ng-deep .input-mask-field__input,.base-field--size-sm .base-field__control ::ng-deep .textarea-field__input{padding:1.05rem .45rem .28rem;font-size:.8125rem;line-height:1.25}.base-field--size-lg .base-field__prefix{padding-left:.95rem}.base-field--size-lg .base-field__prefix-icon{font-size:1.0625rem}.base-field--size-lg .base-field__suffix{padding-right:.52rem;padding-left:.12rem;column-gap:.15rem}.base-field--size-lg .base-field__float-label{left:.9rem;right:.9rem;top:.48rem;font-size:1.0625rem;transform:translate3d(0,.6246875rem,0) scale(1)}.base-field--size-lg .base-field__box:focus-within .base-field__float-label,.base-field--size-lg.base-field--filled .base-field__float-label{transform:translateZ(0) scale(.75)}.base-field--size-lg .base-field__clear,.base-field--size-lg .base-field__ctx-trigger{width:2.35rem;height:2.35rem;min-width:2.35rem;min-height:2.35rem}.base-field--size-lg .base-field__clear-x{font-size:1.35rem;width:1.35rem;height:1.35rem}.base-field--size-lg .base-field__suffix-reserve{width:2.35rem;height:2.35rem}.base-field--size-lg .base-field__control ::ng-deep .text-field__input,.base-field--size-lg .base-field__control ::ng-deep .integer-field__input,.base-field--size-lg .base-field__control ::ng-deep .decimal-field__input,.base-field--size-lg .base-field__control ::ng-deep .password-field__input,.base-field--size-lg .base-field__control ::ng-deep .cep-field__input,.base-field--size-lg .base-field__control ::ng-deep .phone-field__input,.base-field--size-lg .base-field__control ::ng-deep .cpf-cnpj-field__input,.base-field--size-lg .base-field__control ::ng-deep .input-mask-field__input,.base-field--size-lg .base-field__control ::ng-deep .textarea-field__input{padding:1.55rem .9rem .5rem;font-size:1.0625rem;line-height:1.4}\n"] }]
|
|
1993
2099
|
}], propDecorators: { label: [{
|
|
1994
2100
|
type: Input
|
|
1995
2101
|
}], errorMessage: [{
|
|
@@ -2009,6 +2115,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
2009
2115
|
type: Input
|
|
2010
2116
|
}], readonly: [{
|
|
2011
2117
|
type: Input
|
|
2118
|
+
}], size: [{
|
|
2119
|
+
type: Input
|
|
2012
2120
|
}], inputId: [{
|
|
2013
2121
|
type: Input
|
|
2014
2122
|
}], errorId: [{
|
|
@@ -2236,7 +2344,7 @@ class TextFieldComponent extends NgControlFieldDirective {
|
|
|
2236
2344
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
2237
2345
|
multi: true,
|
|
2238
2346
|
},
|
|
2239
|
-
], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\n [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\n [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"text-field__input\" type=\"text\" [id]=\"controlId\" [attr.name]=\"name || null\" [attr.placeholder]=\"''\"\n [attr.autocomplete]=\"autocompleteAttr\" [attr.maxlength]=\"maxLength > 0 ? maxLength : null\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [required]=\"uiRequiredEffective\"\n [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\" [value]=\"inputText\"\n (input)=\"onNativeInput($event)\" (blur)=\"onBlur()\" />\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.text-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-field__input::placeholder{color:transparent}.text-field__input:focus,.text-field__input:focus-visible{outline:none}.text-field__input:-webkit-autofill,.text-field__input:-webkit-autofill:hover,.text-field__input:-webkit-autofill:focus,.text-field__input:-webkit-autofill:active,.text-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}.text-field__input:autofill,.text-field__input:autofill:hover,.text-field__input:autofill:focus,.text-field__input:autofill:active,.text-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}.text-field__input--invalid:not(:disabled)::placeholder{color:transparent}.text-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "disabled", "readonly", "inputId", "errorId", "showPrefixIcon", "prefixIcon", "clearable", "clearAriaLabel", "showSuffixSlot", "valueAlignEnd", "loading", "skeletonVariant", "mostrarMenuContexto", "contextMenuItems", "contextMenuId"], outputs: ["clear", "contextMenuSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2347
|
+
], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }], usesInheritance: 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\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\n [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\n [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"text-field__input\" type=\"text\" [id]=\"controlId\" [attr.name]=\"name || null\" [attr.placeholder]=\"''\"\n [attr.autocomplete]=\"autocompleteAttr\" [attr.maxlength]=\"maxLength > 0 ? maxLength : null\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [required]=\"uiRequiredEffective\"\n [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\" [value]=\"inputText\"\n (input)=\"onNativeInput($event)\" (blur)=\"onBlur()\" />\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.text-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-field__input::placeholder{color:transparent}.text-field__input:focus,.text-field__input:focus-visible{outline:none}.text-field__input:-webkit-autofill,.text-field__input:-webkit-autofill:hover,.text-field__input:-webkit-autofill:focus,.text-field__input:-webkit-autofill:active,.text-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}.text-field__input:autofill,.text-field__input:autofill:hover,.text-field__input:autofill:focus,.text-field__input:autofill:active,.text-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}.text-field__input--invalid:not(:disabled)::placeholder{color:transparent}.text-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2240
2348
|
}
|
|
2241
2349
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TextFieldComponent, decorators: [{
|
|
2242
2350
|
type: Component,
|
|
@@ -2246,7 +2354,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
2246
2354
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
2247
2355
|
multi: true,
|
|
2248
2356
|
},
|
|
2249
|
-
], template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\n [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\n [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"text-field__input\" type=\"text\" [id]=\"controlId\" [attr.name]=\"name || null\" [attr.placeholder]=\"''\"\n [attr.autocomplete]=\"autocompleteAttr\" [attr.maxlength]=\"maxLength > 0 ? maxLength : null\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [required]=\"uiRequiredEffective\"\n [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\" [value]=\"inputText\"\n (input)=\"onNativeInput($event)\" (blur)=\"onBlur()\" />\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.text-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-field__input::placeholder{color:transparent}.text-field__input:focus,.text-field__input:focus-visible{outline:none}.text-field__input:-webkit-autofill,.text-field__input:-webkit-autofill:hover,.text-field__input:-webkit-autofill:focus,.text-field__input:-webkit-autofill:active,.text-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}.text-field__input:autofill,.text-field__input:autofill:hover,.text-field__input:autofill:focus,.text-field__input:autofill:active,.text-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}.text-field__input--invalid:not(:disabled)::placeholder{color:transparent}.text-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}\n"] }]
|
|
2357
|
+
], 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\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\n [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\n [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"text-field__input\" type=\"text\" [id]=\"controlId\" [attr.name]=\"name || null\" [attr.placeholder]=\"''\"\n [attr.autocomplete]=\"autocompleteAttr\" [attr.maxlength]=\"maxLength > 0 ? maxLength : null\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [required]=\"uiRequiredEffective\"\n [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\" [value]=\"inputText\"\n (input)=\"onNativeInput($event)\" (blur)=\"onBlur()\" />\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.text-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-field__input::placeholder{color:transparent}.text-field__input:focus,.text-field__input:focus-visible{outline:none}.text-field__input:-webkit-autofill,.text-field__input:-webkit-autofill:hover,.text-field__input:-webkit-autofill:focus,.text-field__input:-webkit-autofill:active,.text-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}.text-field__input:autofill,.text-field__input:autofill:hover,.text-field__input:autofill:focus,.text-field__input:autofill:active,.text-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}.text-field__input--invalid:not(:disabled)::placeholder{color:transparent}.text-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}\n"] }]
|
|
2250
2358
|
}], propDecorators: { nativeInputRef: [{
|
|
2251
2359
|
type: ViewChild,
|
|
2252
2360
|
args: ['nativeInput', { read: ElementRef }]
|
|
@@ -2365,7 +2473,7 @@ class PasswordFieldComponent extends NgControlFieldDirective {
|
|
|
2365
2473
|
useExisting: forwardRef(() => PasswordFieldComponent),
|
|
2366
2474
|
multi: true,
|
|
2367
2475
|
},
|
|
2368
|
-
], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\"\n [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\" [showSuffixSlot]=\"true\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"password-field__input\" [type]=\"inputTypeUi\" [id]=\"controlId\" [attr.name]=\"name || null\"\n [attr.placeholder]=\"''\" [attr.autocomplete]=\"autocomplete ? autoComplete : 'off'\" [attr.maxlength]=\"maxLength > 0 ? maxLength : null\"\n [disabled]=\"disabled\" [readonly]=\"readonly\" [required]=\"uiRequiredEffective\" [attr.aria-invalid]=\"uiInvalid\"\n [attr.aria-describedby]=\"uiAriaDescribedBy\" [value]=\"inputText\" (input)=\"onNativeInput($event)\"\n (blur)=\"onBlur()\" />\n <button type=\"button\" appFieldSuffix class=\"password-field__toggle\" tabindex=\"-1\"\n [disabled]=\"disabled || readonly\" [attr.aria-label]=\"toggleAriaLabelUi\" [attr.aria-pressed]=\"passwordVisible\"\n (click)=\"togglePasswordVisible($event)\">\n <i [class]=\"toggleIconClassUi\" aria-hidden=\"true\"></i>\n </button>\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.password-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.password-field__input::placeholder{color:transparent}.password-field__input:focus,.password-field__input:focus-visible{outline:none}.password-field__input:-webkit-autofill,.password-field__input:-webkit-autofill:hover,.password-field__input:-webkit-autofill:focus,.password-field__input:-webkit-autofill:active,.password-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}.password-field__input:autofill,.password-field__input:autofill:hover,.password-field__input:autofill:focus,.password-field__input:autofill:active,.password-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}.password-field__input--invalid:not(:disabled)::placeholder{color:transparent}.password-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}.password-field__toggle{display:inline-grid;place-items:center;width:2rem;height:2rem;min-width:2rem;min-height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;line-height:0;transition:background .15s ease,color .15s ease}.password-field__toggle:hover:not(:disabled){background:#5a7fa326;color:var(--ui-field-float-label-top-color)}.password-field__toggle:focus,.password-field__toggle:focus-visible{outline:none}.password-field__toggle:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}.password-field__toggle i{display:block;width:1.25rem;height:1.25rem;font-size:1rem;line-height:1;text-align:center}.password-field__toggle i:before{display:block;line-height:1.24rem}:host.password-field--invalid .password-field__toggle{color:var(--ui-field-float-label-invalid-color)}:host.password-field--invalid .password-field__toggle:hover:not(:disabled){background:#b91c1c1f;color:var(--ui-field-float-label-invalid-color)}:host.password-field--invalid .password-field__toggle:focus,:host.password-field--invalid .password-field__toggle:focus-visible{outline:none}\n"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "disabled", "readonly", "inputId", "errorId", "showPrefixIcon", "prefixIcon", "clearable", "clearAriaLabel", "showSuffixSlot", "valueAlignEnd", "loading", "skeletonVariant", "mostrarMenuContexto", "contextMenuItems", "contextMenuId"], outputs: ["clear", "contextMenuSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2476
|
+
], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }], usesInheritance: 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\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\"\n [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\" [showSuffixSlot]=\"true\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"password-field__input\" [type]=\"inputTypeUi\" [id]=\"controlId\" [attr.name]=\"name || null\"\n [attr.placeholder]=\"''\" [attr.autocomplete]=\"autocomplete ? autoComplete : 'off'\" [attr.maxlength]=\"maxLength > 0 ? maxLength : null\"\n [disabled]=\"disabled\" [readonly]=\"readonly\" [required]=\"uiRequiredEffective\" [attr.aria-invalid]=\"uiInvalid\"\n [attr.aria-describedby]=\"uiAriaDescribedBy\" [value]=\"inputText\" (input)=\"onNativeInput($event)\"\n (blur)=\"onBlur()\" />\n <button type=\"button\" appFieldSuffix class=\"password-field__toggle\" tabindex=\"-1\"\n [disabled]=\"disabled || readonly\" [attr.aria-label]=\"toggleAriaLabelUi\" [attr.aria-pressed]=\"passwordVisible\"\n (click)=\"togglePasswordVisible($event)\">\n <i [class]=\"toggleIconClassUi\" aria-hidden=\"true\"></i>\n </button>\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.password-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.password-field__input::placeholder{color:transparent}.password-field__input:focus,.password-field__input:focus-visible{outline:none}.password-field__input:-webkit-autofill,.password-field__input:-webkit-autofill:hover,.password-field__input:-webkit-autofill:focus,.password-field__input:-webkit-autofill:active,.password-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}.password-field__input:autofill,.password-field__input:autofill:hover,.password-field__input:autofill:focus,.password-field__input:autofill:active,.password-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}.password-field__input--invalid:not(:disabled)::placeholder{color:transparent}.password-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}.password-field__toggle{display:inline-grid;place-items:center;width:2rem;height:2rem;min-width:2rem;min-height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;line-height:0;transition:background .15s ease,color .15s ease}.password-field__toggle:hover:not(:disabled){background:#5a7fa326;color:var(--ui-field-float-label-top-color)}.password-field__toggle:focus,.password-field__toggle:focus-visible{outline:none}.password-field__toggle:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}.password-field__toggle i{display:block;width:1.25rem;height:1.25rem;font-size:1rem;line-height:1;text-align:center}.password-field__toggle i:before{display:block;line-height:1.24rem}:host.password-field--invalid .password-field__toggle{color:var(--ui-field-float-label-invalid-color)}:host.password-field--invalid .password-field__toggle:hover:not(:disabled){background:#b91c1c1f;color:var(--ui-field-float-label-invalid-color)}:host.password-field--invalid .password-field__toggle:focus,:host.password-field--invalid .password-field__toggle:focus-visible{outline:none}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2369
2477
|
}
|
|
2370
2478
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PasswordFieldComponent, decorators: [{
|
|
2371
2479
|
type: Component,
|
|
@@ -2375,7 +2483,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
2375
2483
|
useExisting: forwardRef(() => PasswordFieldComponent),
|
|
2376
2484
|
multi: true,
|
|
2377
2485
|
},
|
|
2378
|
-
], template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\"\n [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\" [showSuffixSlot]=\"true\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"password-field__input\" [type]=\"inputTypeUi\" [id]=\"controlId\" [attr.name]=\"name || null\"\n [attr.placeholder]=\"''\" [attr.autocomplete]=\"autocomplete ? autoComplete : 'off'\" [attr.maxlength]=\"maxLength > 0 ? maxLength : null\"\n [disabled]=\"disabled\" [readonly]=\"readonly\" [required]=\"uiRequiredEffective\" [attr.aria-invalid]=\"uiInvalid\"\n [attr.aria-describedby]=\"uiAriaDescribedBy\" [value]=\"inputText\" (input)=\"onNativeInput($event)\"\n (blur)=\"onBlur()\" />\n <button type=\"button\" appFieldSuffix class=\"password-field__toggle\" tabindex=\"-1\"\n [disabled]=\"disabled || readonly\" [attr.aria-label]=\"toggleAriaLabelUi\" [attr.aria-pressed]=\"passwordVisible\"\n (click)=\"togglePasswordVisible($event)\">\n <i [class]=\"toggleIconClassUi\" aria-hidden=\"true\"></i>\n </button>\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.password-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.password-field__input::placeholder{color:transparent}.password-field__input:focus,.password-field__input:focus-visible{outline:none}.password-field__input:-webkit-autofill,.password-field__input:-webkit-autofill:hover,.password-field__input:-webkit-autofill:focus,.password-field__input:-webkit-autofill:active,.password-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}.password-field__input:autofill,.password-field__input:autofill:hover,.password-field__input:autofill:focus,.password-field__input:autofill:active,.password-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}.password-field__input--invalid:not(:disabled)::placeholder{color:transparent}.password-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}.password-field__toggle{display:inline-grid;place-items:center;width:2rem;height:2rem;min-width:2rem;min-height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;line-height:0;transition:background .15s ease,color .15s ease}.password-field__toggle:hover:not(:disabled){background:#5a7fa326;color:var(--ui-field-float-label-top-color)}.password-field__toggle:focus,.password-field__toggle:focus-visible{outline:none}.password-field__toggle:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}.password-field__toggle i{display:block;width:1.25rem;height:1.25rem;font-size:1rem;line-height:1;text-align:center}.password-field__toggle i:before{display:block;line-height:1.24rem}:host.password-field--invalid .password-field__toggle{color:var(--ui-field-float-label-invalid-color)}:host.password-field--invalid .password-field__toggle:hover:not(:disabled){background:#b91c1c1f;color:var(--ui-field-float-label-invalid-color)}:host.password-field--invalid .password-field__toggle:focus,:host.password-field--invalid .password-field__toggle:focus-visible{outline:none}\n"] }]
|
|
2486
|
+
], 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\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\"\n [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\" [showSuffixSlot]=\"true\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"password-field__input\" [type]=\"inputTypeUi\" [id]=\"controlId\" [attr.name]=\"name || null\"\n [attr.placeholder]=\"''\" [attr.autocomplete]=\"autocomplete ? autoComplete : 'off'\" [attr.maxlength]=\"maxLength > 0 ? maxLength : null\"\n [disabled]=\"disabled\" [readonly]=\"readonly\" [required]=\"uiRequiredEffective\" [attr.aria-invalid]=\"uiInvalid\"\n [attr.aria-describedby]=\"uiAriaDescribedBy\" [value]=\"inputText\" (input)=\"onNativeInput($event)\"\n (blur)=\"onBlur()\" />\n <button type=\"button\" appFieldSuffix class=\"password-field__toggle\" tabindex=\"-1\"\n [disabled]=\"disabled || readonly\" [attr.aria-label]=\"toggleAriaLabelUi\" [attr.aria-pressed]=\"passwordVisible\"\n (click)=\"togglePasswordVisible($event)\">\n <i [class]=\"toggleIconClassUi\" aria-hidden=\"true\"></i>\n </button>\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.password-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.password-field__input::placeholder{color:transparent}.password-field__input:focus,.password-field__input:focus-visible{outline:none}.password-field__input:-webkit-autofill,.password-field__input:-webkit-autofill:hover,.password-field__input:-webkit-autofill:focus,.password-field__input:-webkit-autofill:active,.password-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}.password-field__input:autofill,.password-field__input:autofill:hover,.password-field__input:autofill:focus,.password-field__input:autofill:active,.password-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}.password-field__input--invalid:not(:disabled)::placeholder{color:transparent}.password-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}.password-field__toggle{display:inline-grid;place-items:center;width:2rem;height:2rem;min-width:2rem;min-height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;line-height:0;transition:background .15s ease,color .15s ease}.password-field__toggle:hover:not(:disabled){background:#5a7fa326;color:var(--ui-field-float-label-top-color)}.password-field__toggle:focus,.password-field__toggle:focus-visible{outline:none}.password-field__toggle:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}.password-field__toggle i{display:block;width:1.25rem;height:1.25rem;font-size:1rem;line-height:1;text-align:center}.password-field__toggle i:before{display:block;line-height:1.24rem}:host.password-field--invalid .password-field__toggle{color:var(--ui-field-float-label-invalid-color)}:host.password-field--invalid .password-field__toggle:hover:not(:disabled){background:#b91c1c1f;color:var(--ui-field-float-label-invalid-color)}:host.password-field--invalid .password-field__toggle:focus,:host.password-field--invalid .password-field__toggle:focus-visible{outline:none}\n"] }]
|
|
2379
2487
|
}], propDecorators: { nativeInputRef: [{
|
|
2380
2488
|
type: ViewChild,
|
|
2381
2489
|
args: ['nativeInput', { read: ElementRef }]
|
|
@@ -2495,7 +2603,7 @@ class TextareaFieldComponent extends NgControlFieldDirective {
|
|
|
2495
2603
|
useExisting: forwardRef(() => TextareaFieldComponent),
|
|
2496
2604
|
multi: true,
|
|
2497
2605
|
},
|
|
2498
|
-
], viewQueries: [{ 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 [loading]=\"loading\" skeletonVariant=\"textarea\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\n [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\n [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <textarea #nativeInput class=\"textarea-field__input\" [id]=\"controlId\" [attr.name]=\"name || null\" [attr.placeholder]=\"''\"\n [attr.rows]=\"rows\" [style.height]=\"textareaMaxHeightCss\" [style.min-height]=\"textareaMaxHeightCss\"\n [style.max-height]=\"textareaMaxHeightCss\" [attr.autocomplete]=\"autocompleteAttr\"\n [attr.maxlength]=\"maxLength > 0 ? maxLength : null\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [required]=\"uiRequiredEffective\" [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [value]=\"inputText\" (input)=\"onNativeInput($event)\" (blur)=\"onBlur()\"></textarea>\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.textarea-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.textarea-field__input::placeholder{color:transparent}.textarea-field__input:focus,.textarea-field__input:focus-visible{outline:none}.textarea-field__input:-webkit-autofill,.textarea-field__input:-webkit-autofill:hover,.textarea-field__input:-webkit-autofill:focus,.textarea-field__input:-webkit-autofill:active,.textarea-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}.textarea-field__input:autofill,.textarea-field__input:autofill:hover,.textarea-field__input:autofill:focus,.textarea-field__input:autofill:active,.textarea-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}.textarea-field__input--invalid:not(:disabled)::placeholder{color:transparent}.textarea-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}.textarea-field__input{resize:none;overflow-x:hidden;overflow-y:auto;white-space:pre-wrap;overflow-wrap:break-word;text-overflow:clip}\n"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "disabled", "readonly", "inputId", "errorId", "showPrefixIcon", "prefixIcon", "clearable", "clearAriaLabel", "showSuffixSlot", "valueAlignEnd", "loading", "skeletonVariant", "mostrarMenuContexto", "contextMenuItems", "contextMenuId"], outputs: ["clear", "contextMenuSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2606
|
+
], viewQueries: [{ 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\" skeletonVariant=\"textarea\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\n [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\n [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <textarea #nativeInput class=\"textarea-field__input\" [id]=\"controlId\" [attr.name]=\"name || null\" [attr.placeholder]=\"''\"\n [attr.rows]=\"rows\" [style.height]=\"textareaMaxHeightCss\" [style.min-height]=\"textareaMaxHeightCss\"\n [style.max-height]=\"textareaMaxHeightCss\" [attr.autocomplete]=\"autocompleteAttr\"\n [attr.maxlength]=\"maxLength > 0 ? maxLength : null\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [required]=\"uiRequiredEffective\" [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [value]=\"inputText\" (input)=\"onNativeInput($event)\" (blur)=\"onBlur()\"></textarea>\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.textarea-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.textarea-field__input::placeholder{color:transparent}.textarea-field__input:focus,.textarea-field__input:focus-visible{outline:none}.textarea-field__input:-webkit-autofill,.textarea-field__input:-webkit-autofill:hover,.textarea-field__input:-webkit-autofill:focus,.textarea-field__input:-webkit-autofill:active,.textarea-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}.textarea-field__input:autofill,.textarea-field__input:autofill:hover,.textarea-field__input:autofill:focus,.textarea-field__input:autofill:active,.textarea-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}.textarea-field__input--invalid:not(:disabled)::placeholder{color:transparent}.textarea-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}.textarea-field__input{resize:none;overflow-x:hidden;overflow-y:auto;white-space:pre-wrap;overflow-wrap:break-word;text-overflow:clip}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2499
2607
|
}
|
|
2500
2608
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TextareaFieldComponent, decorators: [{
|
|
2501
2609
|
type: Component,
|
|
@@ -2505,7 +2613,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
2505
2613
|
useExisting: forwardRef(() => TextareaFieldComponent),
|
|
2506
2614
|
multi: true,
|
|
2507
2615
|
},
|
|
2508
|
-
], template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [loading]=\"loading\" skeletonVariant=\"textarea\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\n [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\n [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <textarea #nativeInput class=\"textarea-field__input\" [id]=\"controlId\" [attr.name]=\"name || null\" [attr.placeholder]=\"''\"\n [attr.rows]=\"rows\" [style.height]=\"textareaMaxHeightCss\" [style.min-height]=\"textareaMaxHeightCss\"\n [style.max-height]=\"textareaMaxHeightCss\" [attr.autocomplete]=\"autocompleteAttr\"\n [attr.maxlength]=\"maxLength > 0 ? maxLength : null\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [required]=\"uiRequiredEffective\" [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [value]=\"inputText\" (input)=\"onNativeInput($event)\" (blur)=\"onBlur()\"></textarea>\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.textarea-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.textarea-field__input::placeholder{color:transparent}.textarea-field__input:focus,.textarea-field__input:focus-visible{outline:none}.textarea-field__input:-webkit-autofill,.textarea-field__input:-webkit-autofill:hover,.textarea-field__input:-webkit-autofill:focus,.textarea-field__input:-webkit-autofill:active,.textarea-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}.textarea-field__input:autofill,.textarea-field__input:autofill:hover,.textarea-field__input:autofill:focus,.textarea-field__input:autofill:active,.textarea-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}.textarea-field__input--invalid:not(:disabled)::placeholder{color:transparent}.textarea-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}.textarea-field__input{resize:none;overflow-x:hidden;overflow-y:auto;white-space:pre-wrap;overflow-wrap:break-word;text-overflow:clip}\n"] }]
|
|
2616
|
+
], template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [size]=\"size\"\n [loading]=\"loading\" skeletonVariant=\"textarea\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\n [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\n [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <textarea #nativeInput class=\"textarea-field__input\" [id]=\"controlId\" [attr.name]=\"name || null\" [attr.placeholder]=\"''\"\n [attr.rows]=\"rows\" [style.height]=\"textareaMaxHeightCss\" [style.min-height]=\"textareaMaxHeightCss\"\n [style.max-height]=\"textareaMaxHeightCss\" [attr.autocomplete]=\"autocompleteAttr\"\n [attr.maxlength]=\"maxLength > 0 ? maxLength : null\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [required]=\"uiRequiredEffective\" [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [value]=\"inputText\" (input)=\"onNativeInput($event)\" (blur)=\"onBlur()\"></textarea>\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.textarea-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.textarea-field__input::placeholder{color:transparent}.textarea-field__input:focus,.textarea-field__input:focus-visible{outline:none}.textarea-field__input:-webkit-autofill,.textarea-field__input:-webkit-autofill:hover,.textarea-field__input:-webkit-autofill:focus,.textarea-field__input:-webkit-autofill:active,.textarea-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}.textarea-field__input:autofill,.textarea-field__input:autofill:hover,.textarea-field__input:autofill:focus,.textarea-field__input:autofill:active,.textarea-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}.textarea-field__input--invalid:not(:disabled)::placeholder{color:transparent}.textarea-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}.textarea-field__input{resize:none;overflow-x:hidden;overflow-y:auto;white-space:pre-wrap;overflow-wrap:break-word;text-overflow:clip}\n"] }]
|
|
2509
2617
|
}], propDecorators: { nativeInputRef: [{
|
|
2510
2618
|
type: ViewChild,
|
|
2511
2619
|
args: ['nativeInput', { read: ElementRef }]
|
|
@@ -2713,7 +2821,7 @@ class IntegerFieldComponent extends NgControlFieldDirective {
|
|
|
2713
2821
|
useExisting: forwardRef(() => IntegerFieldComponent),
|
|
2714
2822
|
multi: true,
|
|
2715
2823
|
},
|
|
2716
|
-
], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\n [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\n [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"integer-field__input\" type=\"text\" inputmode=\"numeric\" [id]=\"controlId\"\n [attr.name]=\"name || null\" [attr.placeholder]=\"''\" [attr.autocomplete]=\"autocompleteAttr\" [disabled]=\"disabled\" [readonly]=\"readonly\" [required]=\"uiRequiredEffective\"\n [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\" [value]=\"inputText\"\n (beforeinput)=\"onBeforeInput($event)\" (input)=\"onNativeInput($event)\" (blur)=\"onBlur()\" />\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.integer-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.integer-field__input::placeholder{color:transparent}.integer-field__input:focus,.integer-field__input:focus-visible{outline:none}.integer-field__input:-webkit-autofill,.integer-field__input:-webkit-autofill:hover,.integer-field__input:-webkit-autofill:focus,.integer-field__input:-webkit-autofill:active,.integer-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}.integer-field__input:autofill,.integer-field__input:autofill:hover,.integer-field__input:autofill:focus,.integer-field__input:autofill:active,.integer-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}.integer-field__input--invalid:not(:disabled)::placeholder{color:transparent}.integer-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "disabled", "readonly", "inputId", "errorId", "showPrefixIcon", "prefixIcon", "clearable", "clearAriaLabel", "showSuffixSlot", "valueAlignEnd", "loading", "skeletonVariant", "mostrarMenuContexto", "contextMenuItems", "contextMenuId"], outputs: ["clear", "contextMenuSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2824
|
+
], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }], usesInheritance: 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\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\n [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\n [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"integer-field__input\" type=\"text\" inputmode=\"numeric\" [id]=\"controlId\"\n [attr.name]=\"name || null\" [attr.placeholder]=\"''\" [attr.autocomplete]=\"autocompleteAttr\" [disabled]=\"disabled\" [readonly]=\"readonly\" [required]=\"uiRequiredEffective\"\n [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\" [value]=\"inputText\"\n (beforeinput)=\"onBeforeInput($event)\" (input)=\"onNativeInput($event)\" (blur)=\"onBlur()\" />\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.integer-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.integer-field__input::placeholder{color:transparent}.integer-field__input:focus,.integer-field__input:focus-visible{outline:none}.integer-field__input:-webkit-autofill,.integer-field__input:-webkit-autofill:hover,.integer-field__input:-webkit-autofill:focus,.integer-field__input:-webkit-autofill:active,.integer-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}.integer-field__input:autofill,.integer-field__input:autofill:hover,.integer-field__input:autofill:focus,.integer-field__input:autofill:active,.integer-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}.integer-field__input--invalid:not(:disabled)::placeholder{color:transparent}.integer-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2717
2825
|
}
|
|
2718
2826
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IntegerFieldComponent, decorators: [{
|
|
2719
2827
|
type: Component,
|
|
@@ -2723,7 +2831,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
2723
2831
|
useExisting: forwardRef(() => IntegerFieldComponent),
|
|
2724
2832
|
multi: true,
|
|
2725
2833
|
},
|
|
2726
|
-
], template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\n [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\n [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"integer-field__input\" type=\"text\" inputmode=\"numeric\" [id]=\"controlId\"\n [attr.name]=\"name || null\" [attr.placeholder]=\"''\" [attr.autocomplete]=\"autocompleteAttr\" [disabled]=\"disabled\" [readonly]=\"readonly\" [required]=\"uiRequiredEffective\"\n [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\" [value]=\"inputText\"\n (beforeinput)=\"onBeforeInput($event)\" (input)=\"onNativeInput($event)\" (blur)=\"onBlur()\" />\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.integer-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.integer-field__input::placeholder{color:transparent}.integer-field__input:focus,.integer-field__input:focus-visible{outline:none}.integer-field__input:-webkit-autofill,.integer-field__input:-webkit-autofill:hover,.integer-field__input:-webkit-autofill:focus,.integer-field__input:-webkit-autofill:active,.integer-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}.integer-field__input:autofill,.integer-field__input:autofill:hover,.integer-field__input:autofill:focus,.integer-field__input:autofill:active,.integer-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}.integer-field__input--invalid:not(:disabled)::placeholder{color:transparent}.integer-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}\n"] }]
|
|
2834
|
+
], 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\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\n [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\n [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"integer-field__input\" type=\"text\" inputmode=\"numeric\" [id]=\"controlId\"\n [attr.name]=\"name || null\" [attr.placeholder]=\"''\" [attr.autocomplete]=\"autocompleteAttr\" [disabled]=\"disabled\" [readonly]=\"readonly\" [required]=\"uiRequiredEffective\"\n [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\" [value]=\"inputText\"\n (beforeinput)=\"onBeforeInput($event)\" (input)=\"onNativeInput($event)\" (blur)=\"onBlur()\" />\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.integer-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.integer-field__input::placeholder{color:transparent}.integer-field__input:focus,.integer-field__input:focus-visible{outline:none}.integer-field__input:-webkit-autofill,.integer-field__input:-webkit-autofill:hover,.integer-field__input:-webkit-autofill:focus,.integer-field__input:-webkit-autofill:active,.integer-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}.integer-field__input:autofill,.integer-field__input:autofill:hover,.integer-field__input:autofill:focus,.integer-field__input:autofill:active,.integer-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}.integer-field__input--invalid:not(:disabled)::placeholder{color:transparent}.integer-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}\n"] }]
|
|
2727
2835
|
}], propDecorators: { nativeInputRef: [{
|
|
2728
2836
|
type: ViewChild,
|
|
2729
2837
|
args: ['nativeInput', { read: ElementRef }]
|
|
@@ -3031,7 +3139,7 @@ class DecimalFieldComponent extends NgControlFieldDirective {
|
|
|
3031
3139
|
useExisting: forwardRef(() => DecimalFieldComponent),
|
|
3032
3140
|
multi: true,
|
|
3033
3141
|
},
|
|
3034
|
-
], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\n [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\n [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"decimal-field__input\" type=\"text\" inputmode=\"decimal\" [attr.autocomplete]=\"autocompleteAttr\"\n [id]=\"controlId\"\n [attr.name]=\"name || null\" [attr.placeholder]=\"''\" [disabled]=\"disabled\" [readonly]=\"readonly\" [required]=\"uiRequiredEffective\"\n [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\" [value]=\"inputText\"\n (beforeinput)=\"onBeforeInput($event)\" (input)=\"onNativeInput($event)\" (blur)=\"onBlur()\" />\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.decimal-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.decimal-field__input::placeholder{color:transparent}.decimal-field__input:focus,.decimal-field__input:focus-visible{outline:none}.decimal-field__input:-webkit-autofill,.decimal-field__input:-webkit-autofill:hover,.decimal-field__input:-webkit-autofill:focus,.decimal-field__input:-webkit-autofill:active,.decimal-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}.decimal-field__input:autofill,.decimal-field__input:autofill:hover,.decimal-field__input:autofill:focus,.decimal-field__input:autofill:active,.decimal-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}.decimal-field__input--invalid:not(:disabled)::placeholder{color:transparent}.decimal-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "disabled", "readonly", "inputId", "errorId", "showPrefixIcon", "prefixIcon", "clearable", "clearAriaLabel", "showSuffixSlot", "valueAlignEnd", "loading", "skeletonVariant", "mostrarMenuContexto", "contextMenuItems", "contextMenuId"], outputs: ["clear", "contextMenuSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3142
|
+
], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }], usesInheritance: 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\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\n [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\n [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"decimal-field__input\" type=\"text\" inputmode=\"decimal\" [attr.autocomplete]=\"autocompleteAttr\"\n [id]=\"controlId\"\n [attr.name]=\"name || null\" [attr.placeholder]=\"''\" [disabled]=\"disabled\" [readonly]=\"readonly\" [required]=\"uiRequiredEffective\"\n [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\" [value]=\"inputText\"\n (beforeinput)=\"onBeforeInput($event)\" (input)=\"onNativeInput($event)\" (blur)=\"onBlur()\" />\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.decimal-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.decimal-field__input::placeholder{color:transparent}.decimal-field__input:focus,.decimal-field__input:focus-visible{outline:none}.decimal-field__input:-webkit-autofill,.decimal-field__input:-webkit-autofill:hover,.decimal-field__input:-webkit-autofill:focus,.decimal-field__input:-webkit-autofill:active,.decimal-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}.decimal-field__input:autofill,.decimal-field__input:autofill:hover,.decimal-field__input:autofill:focus,.decimal-field__input:autofill:active,.decimal-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}.decimal-field__input--invalid:not(:disabled)::placeholder{color:transparent}.decimal-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3035
3143
|
}
|
|
3036
3144
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DecimalFieldComponent, decorators: [{
|
|
3037
3145
|
type: Component,
|
|
@@ -3041,7 +3149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
3041
3149
|
useExisting: forwardRef(() => DecimalFieldComponent),
|
|
3042
3150
|
multi: true,
|
|
3043
3151
|
},
|
|
3044
|
-
], template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\n [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\n [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"decimal-field__input\" type=\"text\" inputmode=\"decimal\" [attr.autocomplete]=\"autocompleteAttr\"\n [id]=\"controlId\"\n [attr.name]=\"name || null\" [attr.placeholder]=\"''\" [disabled]=\"disabled\" [readonly]=\"readonly\" [required]=\"uiRequiredEffective\"\n [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\" [value]=\"inputText\"\n (beforeinput)=\"onBeforeInput($event)\" (input)=\"onNativeInput($event)\" (blur)=\"onBlur()\" />\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.decimal-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.decimal-field__input::placeholder{color:transparent}.decimal-field__input:focus,.decimal-field__input:focus-visible{outline:none}.decimal-field__input:-webkit-autofill,.decimal-field__input:-webkit-autofill:hover,.decimal-field__input:-webkit-autofill:focus,.decimal-field__input:-webkit-autofill:active,.decimal-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}.decimal-field__input:autofill,.decimal-field__input:autofill:hover,.decimal-field__input:autofill:focus,.decimal-field__input:autofill:active,.decimal-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}.decimal-field__input--invalid:not(:disabled)::placeholder{color:transparent}.decimal-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}\n"] }]
|
|
3152
|
+
], 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\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\n [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\n [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"decimal-field__input\" type=\"text\" inputmode=\"decimal\" [attr.autocomplete]=\"autocompleteAttr\"\n [id]=\"controlId\"\n [attr.name]=\"name || null\" [attr.placeholder]=\"''\" [disabled]=\"disabled\" [readonly]=\"readonly\" [required]=\"uiRequiredEffective\"\n [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\" [value]=\"inputText\"\n (beforeinput)=\"onBeforeInput($event)\" (input)=\"onNativeInput($event)\" (blur)=\"onBlur()\" />\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.decimal-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.decimal-field__input::placeholder{color:transparent}.decimal-field__input:focus,.decimal-field__input:focus-visible{outline:none}.decimal-field__input:-webkit-autofill,.decimal-field__input:-webkit-autofill:hover,.decimal-field__input:-webkit-autofill:focus,.decimal-field__input:-webkit-autofill:active,.decimal-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}.decimal-field__input:autofill,.decimal-field__input:autofill:hover,.decimal-field__input:autofill:focus,.decimal-field__input:autofill:active,.decimal-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}.decimal-field__input--invalid:not(:disabled)::placeholder{color:transparent}.decimal-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}\n"] }]
|
|
3045
3153
|
}], propDecorators: { nativeInputRef: [{
|
|
3046
3154
|
type: ViewChild,
|
|
3047
3155
|
args: ['nativeInput', { read: ElementRef }]
|
|
@@ -3240,7 +3348,7 @@ class DateFieldComponent extends NgControlFieldDirective {
|
|
|
3240
3348
|
multi: true,
|
|
3241
3349
|
},
|
|
3242
3350
|
{ provide: MAT_DATE_LOCALE, useValue: 'pt-BR' },
|
|
3243
|
-
], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\n [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\n [clearAriaLabel]=\"clearAriaLabel\" [valueAlignEnd]=\"false\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <div class=\"date-field__date-wrap\">\n <span class=\"date-field__display\" aria-hidden=\"true\">{{ displayTextUi }}</span>\n <input #nativeInput matInput class=\"date-field__ghost-input\" [matDatepicker]=\"picker\" [(ngModel)]=\"innerDate\"\n [ngModelOptions]=\"{ standalone: true }\" (ngModelChange)=\"onPickedDate($event)\"\n [min]=\"minDate ?? undefined\" [max]=\"maxDate ?? undefined\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [required]=\"uiRequiredEffective\" [id]=\"controlId\" [attr.name]=\"name || null\" [attr.autocomplete]=\"autocompleteAttr\"\n [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [attr.aria-label]=\"floatLabelCaption || 'Data'\" readonly (click)=\"openPicker()\"\n (keydown)=\"onGhostInputKeydown($event)\" (blur)=\"onBlur()\" />\n <mat-datepicker #picker panelClass=\"ui-field-datepicker-panel\" />\n </div>\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.date-field__date-wrap{position:relative;flex:1;min-width:0;display:flex;align-items:stretch}.date-field__display{position:absolute;left:.75rem;right:.75rem;top:50%;transform:translateY(-.15rem);pointer-events:none;font-size:1rem;line-height:1.35;color:var(--ui-field-float-input-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:0}.date-field__ghost-input{position:relative;z-index:1;flex:1;width:100%;min-width:0;margin:0;box-sizing:border-box;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;color:transparent;caret-color:transparent;background:transparent;border:none;border-radius:0;box-shadow:none;cursor:pointer}.date-field__ghost-input:focus{outline:none}.date-field__ghost-input:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .date-field__display{color:var(--ui-field-readonly-input-text)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .date-field__ghost-input{cursor:default}:host ::ng-deep .date-field__ghost-input.mdc-text-field__input,:host ::ng-deep .date-field__ghost-input.mat-mdc-input-element{border:none!important;box-shadow:none!important}\n"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "disabled", "readonly", "inputId", "errorId", "showPrefixIcon", "prefixIcon", "clearable", "clearAriaLabel", "showSuffixSlot", "valueAlignEnd", "loading", "skeletonVariant", "mostrarMenuContexto", "contextMenuItems", "contextMenuId"], outputs: ["clear", "contextMenuSelect"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatNativeDateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3351
|
+
], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [size]=\"size\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\n [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\n [clearAriaLabel]=\"clearAriaLabel\" [valueAlignEnd]=\"false\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <div class=\"date-field__date-wrap\">\n <span class=\"date-field__display\" aria-hidden=\"true\">{{ displayTextUi }}</span>\n <input #nativeInput matInput class=\"date-field__ghost-input\" [matDatepicker]=\"picker\" [(ngModel)]=\"innerDate\"\n [ngModelOptions]=\"{ standalone: true }\" (ngModelChange)=\"onPickedDate($event)\"\n [min]=\"minDate ?? undefined\" [max]=\"maxDate ?? undefined\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [required]=\"uiRequiredEffective\" [id]=\"controlId\" [attr.name]=\"name || null\" [attr.autocomplete]=\"autocompleteAttr\"\n [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [attr.aria-label]=\"floatLabelCaption || 'Data'\" readonly (click)=\"openPicker()\"\n (keydown)=\"onGhostInputKeydown($event)\" (blur)=\"onBlur()\" />\n <mat-datepicker #picker panelClass=\"ui-field-datepicker-panel\" />\n </div>\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.date-field__date-wrap{position:relative;flex:1;min-width:0;display:flex;align-items:stretch}.date-field__display{position:absolute;left:.75rem;right:.75rem;top:50%;transform:translateY(-.15rem);pointer-events:none;font-size:1rem;line-height:1.35;color:var(--ui-field-float-input-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:0}.date-field__ghost-input{position:relative;z-index:1;flex:1;width:100%;min-width:0;margin:0;box-sizing:border-box;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;color:transparent;caret-color:transparent;background:transparent;border:none;border-radius:0;box-shadow:none;cursor:pointer}.date-field__ghost-input:focus{outline:none}.date-field__ghost-input:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .date-field__display{color:var(--ui-field-readonly-input-text)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .date-field__ghost-input{cursor:default}:host ::ng-deep .date-field__ghost-input.mdc-text-field__input,:host ::ng-deep .date-field__ghost-input.mat-mdc-input-element{border:none!important;box-shadow:none!important}\n"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "disabled", "readonly", "size", "inputId", "errorId", "showPrefixIcon", "prefixIcon", "clearable", "clearAriaLabel", "showSuffixSlot", "valueAlignEnd", "loading", "skeletonVariant", "mostrarMenuContexto", "contextMenuItems", "contextMenuId"], outputs: ["clear", "contextMenuSelect"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatNativeDateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3244
3352
|
}
|
|
3245
3353
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DateFieldComponent, decorators: [{
|
|
3246
3354
|
type: Component,
|
|
@@ -3257,7 +3365,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
3257
3365
|
multi: true,
|
|
3258
3366
|
},
|
|
3259
3367
|
{ provide: MAT_DATE_LOCALE, useValue: 'pt-BR' },
|
|
3260
|
-
], template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\n [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\n [clearAriaLabel]=\"clearAriaLabel\" [valueAlignEnd]=\"false\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <div class=\"date-field__date-wrap\">\n <span class=\"date-field__display\" aria-hidden=\"true\">{{ displayTextUi }}</span>\n <input #nativeInput matInput class=\"date-field__ghost-input\" [matDatepicker]=\"picker\" [(ngModel)]=\"innerDate\"\n [ngModelOptions]=\"{ standalone: true }\" (ngModelChange)=\"onPickedDate($event)\"\n [min]=\"minDate ?? undefined\" [max]=\"maxDate ?? undefined\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [required]=\"uiRequiredEffective\" [id]=\"controlId\" [attr.name]=\"name || null\" [attr.autocomplete]=\"autocompleteAttr\"\n [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [attr.aria-label]=\"floatLabelCaption || 'Data'\" readonly (click)=\"openPicker()\"\n (keydown)=\"onGhostInputKeydown($event)\" (blur)=\"onBlur()\" />\n <mat-datepicker #picker panelClass=\"ui-field-datepicker-panel\" />\n </div>\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.date-field__date-wrap{position:relative;flex:1;min-width:0;display:flex;align-items:stretch}.date-field__display{position:absolute;left:.75rem;right:.75rem;top:50%;transform:translateY(-.15rem);pointer-events:none;font-size:1rem;line-height:1.35;color:var(--ui-field-float-input-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:0}.date-field__ghost-input{position:relative;z-index:1;flex:1;width:100%;min-width:0;margin:0;box-sizing:border-box;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;color:transparent;caret-color:transparent;background:transparent;border:none;border-radius:0;box-shadow:none;cursor:pointer}.date-field__ghost-input:focus{outline:none}.date-field__ghost-input:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .date-field__display{color:var(--ui-field-readonly-input-text)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .date-field__ghost-input{cursor:default}:host ::ng-deep .date-field__ghost-input.mdc-text-field__input,:host ::ng-deep .date-field__ghost-input.mat-mdc-input-element{border:none!important;box-shadow:none!important}\n"] }]
|
|
3368
|
+
], 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\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\n [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\n [clearAriaLabel]=\"clearAriaLabel\" [valueAlignEnd]=\"false\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <div class=\"date-field__date-wrap\">\n <span class=\"date-field__display\" aria-hidden=\"true\">{{ displayTextUi }}</span>\n <input #nativeInput matInput class=\"date-field__ghost-input\" [matDatepicker]=\"picker\" [(ngModel)]=\"innerDate\"\n [ngModelOptions]=\"{ standalone: true }\" (ngModelChange)=\"onPickedDate($event)\"\n [min]=\"minDate ?? undefined\" [max]=\"maxDate ?? undefined\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [required]=\"uiRequiredEffective\" [id]=\"controlId\" [attr.name]=\"name || null\" [attr.autocomplete]=\"autocompleteAttr\"\n [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [attr.aria-label]=\"floatLabelCaption || 'Data'\" readonly (click)=\"openPicker()\"\n (keydown)=\"onGhostInputKeydown($event)\" (blur)=\"onBlur()\" />\n <mat-datepicker #picker panelClass=\"ui-field-datepicker-panel\" />\n </div>\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.date-field__date-wrap{position:relative;flex:1;min-width:0;display:flex;align-items:stretch}.date-field__display{position:absolute;left:.75rem;right:.75rem;top:50%;transform:translateY(-.15rem);pointer-events:none;font-size:1rem;line-height:1.35;color:var(--ui-field-float-input-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:0}.date-field__ghost-input{position:relative;z-index:1;flex:1;width:100%;min-width:0;margin:0;box-sizing:border-box;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;color:transparent;caret-color:transparent;background:transparent;border:none;border-radius:0;box-shadow:none;cursor:pointer}.date-field__ghost-input:focus{outline:none}.date-field__ghost-input:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .date-field__display{color:var(--ui-field-readonly-input-text)}:host ::ng-deep .base-field--readonly:not(.base-field--disabled) .date-field__ghost-input{cursor:default}:host ::ng-deep .date-field__ghost-input.mdc-text-field__input,:host ::ng-deep .date-field__ghost-input.mat-mdc-input-element{border:none!important;box-shadow:none!important}\n"] }]
|
|
3261
3369
|
}], propDecorators: { nativeInputRef: [{
|
|
3262
3370
|
type: ViewChild,
|
|
3263
3371
|
args: ['nativeInput', { read: ElementRef }]
|
|
@@ -3479,7 +3587,7 @@ class InputMaskFieldComponent extends MaskedTextFieldBase {
|
|
|
3479
3587
|
useExisting: forwardRef(() => InputMaskFieldComponent),
|
|
3480
3588
|
multi: true,
|
|
3481
3589
|
},
|
|
3482
|
-
], usesInheritance: true, ngImport: i0, template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\"\n [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"input-mask-field__input\" type=\"text\" [id]=\"controlId\" [attr.name]=\"name || null\"\n [attr.placeholder]=\"''\" [attr.autocomplete]=\"autocompleteAttr\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [required]=\"uiRequiredEffective\" [attr.aria-invalid]=\"uiInvalid\"\n [attr.aria-describedby]=\"uiAriaDescribedBy\" [value]=\"inputText\" (input)=\"onNativeInput($event)\"\n (blur)=\"onBlur()\" />\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.input-mask-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-mask-field__input::placeholder{color:transparent}.input-mask-field__input:focus,.input-mask-field__input:focus-visible{outline:none}.input-mask-field__input:-webkit-autofill,.input-mask-field__input:-webkit-autofill:hover,.input-mask-field__input:-webkit-autofill:focus,.input-mask-field__input:-webkit-autofill:active,.input-mask-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}.input-mask-field__input:autofill,.input-mask-field__input:autofill:hover,.input-mask-field__input:autofill:focus,.input-mask-field__input:autofill:active,.input-mask-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}.input-mask-field__input--invalid:not(:disabled)::placeholder{color:transparent}.input-mask-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "disabled", "readonly", "inputId", "errorId", "showPrefixIcon", "prefixIcon", "clearable", "clearAriaLabel", "showSuffixSlot", "valueAlignEnd", "loading", "skeletonVariant", "mostrarMenuContexto", "contextMenuItems", "contextMenuId"], outputs: ["clear", "contextMenuSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3590
|
+
], usesInheritance: 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\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\"\n [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"input-mask-field__input\" type=\"text\" [id]=\"controlId\" [attr.name]=\"name || null\"\n [attr.placeholder]=\"''\" [attr.autocomplete]=\"autocompleteAttr\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [required]=\"uiRequiredEffective\" [attr.aria-invalid]=\"uiInvalid\"\n [attr.aria-describedby]=\"uiAriaDescribedBy\" [value]=\"inputText\" (input)=\"onNativeInput($event)\"\n (blur)=\"onBlur()\" />\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.input-mask-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-mask-field__input::placeholder{color:transparent}.input-mask-field__input:focus,.input-mask-field__input:focus-visible{outline:none}.input-mask-field__input:-webkit-autofill,.input-mask-field__input:-webkit-autofill:hover,.input-mask-field__input:-webkit-autofill:focus,.input-mask-field__input:-webkit-autofill:active,.input-mask-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}.input-mask-field__input:autofill,.input-mask-field__input:autofill:hover,.input-mask-field__input:autofill:focus,.input-mask-field__input:autofill:active,.input-mask-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}.input-mask-field__input--invalid:not(:disabled)::placeholder{color:transparent}.input-mask-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3483
3591
|
}
|
|
3484
3592
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: InputMaskFieldComponent, decorators: [{
|
|
3485
3593
|
type: Component,
|
|
@@ -3489,7 +3597,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
3489
3597
|
useExisting: forwardRef(() => InputMaskFieldComponent),
|
|
3490
3598
|
multi: true,
|
|
3491
3599
|
},
|
|
3492
|
-
], template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\"\n [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"input-mask-field__input\" type=\"text\" [id]=\"controlId\" [attr.name]=\"name || null\"\n [attr.placeholder]=\"''\" [attr.autocomplete]=\"autocompleteAttr\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [required]=\"uiRequiredEffective\" [attr.aria-invalid]=\"uiInvalid\"\n [attr.aria-describedby]=\"uiAriaDescribedBy\" [value]=\"inputText\" (input)=\"onNativeInput($event)\"\n (blur)=\"onBlur()\" />\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.input-mask-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-mask-field__input::placeholder{color:transparent}.input-mask-field__input:focus,.input-mask-field__input:focus-visible{outline:none}.input-mask-field__input:-webkit-autofill,.input-mask-field__input:-webkit-autofill:hover,.input-mask-field__input:-webkit-autofill:focus,.input-mask-field__input:-webkit-autofill:active,.input-mask-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}.input-mask-field__input:autofill,.input-mask-field__input:autofill:hover,.input-mask-field__input:autofill:focus,.input-mask-field__input:autofill:active,.input-mask-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}.input-mask-field__input--invalid:not(:disabled)::placeholder{color:transparent}.input-mask-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}\n"] }]
|
|
3600
|
+
], 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\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\"\n [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"input-mask-field__input\" type=\"text\" [id]=\"controlId\" [attr.name]=\"name || null\"\n [attr.placeholder]=\"''\" [attr.autocomplete]=\"autocompleteAttr\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [required]=\"uiRequiredEffective\" [attr.aria-invalid]=\"uiInvalid\"\n [attr.aria-describedby]=\"uiAriaDescribedBy\" [value]=\"inputText\" (input)=\"onNativeInput($event)\"\n (blur)=\"onBlur()\" />\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.input-mask-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-mask-field__input::placeholder{color:transparent}.input-mask-field__input:focus,.input-mask-field__input:focus-visible{outline:none}.input-mask-field__input:-webkit-autofill,.input-mask-field__input:-webkit-autofill:hover,.input-mask-field__input:-webkit-autofill:focus,.input-mask-field__input:-webkit-autofill:active,.input-mask-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}.input-mask-field__input:autofill,.input-mask-field__input:autofill:hover,.input-mask-field__input:autofill:focus,.input-mask-field__input:autofill:active,.input-mask-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}.input-mask-field__input--invalid:not(:disabled)::placeholder{color:transparent}.input-mask-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}\n"] }]
|
|
3493
3601
|
}], propDecorators: { hostInvalidClass: [{
|
|
3494
3602
|
type: HostBinding,
|
|
3495
3603
|
args: ['class.input-mask-field--invalid']
|
|
@@ -3522,7 +3630,7 @@ class CepFieldComponent extends MaskedTextFieldBase {
|
|
|
3522
3630
|
useExisting: forwardRef(() => CepFieldComponent),
|
|
3523
3631
|
multi: true,
|
|
3524
3632
|
},
|
|
3525
|
-
], usesInheritance: true, ngImport: i0, template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\"\n [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"cep-field__input\" type=\"text\" inputmode=\"numeric\" [id]=\"controlId\" [attr.name]=\"name || null\"\n [attr.placeholder]=\"''\" [attr.autocomplete]=\"autocompleteAttr\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [required]=\"uiRequiredEffective\" [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [value]=\"inputText\" (input)=\"onNativeInput($event)\" (blur)=\"onBlur()\" />\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.cep-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cep-field__input::placeholder{color:transparent}.cep-field__input:focus,.cep-field__input:focus-visible{outline:none}.cep-field__input:-webkit-autofill,.cep-field__input:-webkit-autofill:hover,.cep-field__input:-webkit-autofill:focus,.cep-field__input:-webkit-autofill:active,.cep-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}.cep-field__input:autofill,.cep-field__input:autofill:hover,.cep-field__input:autofill:focus,.cep-field__input:autofill:active,.cep-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}.cep-field__input--invalid:not(:disabled)::placeholder{color:transparent}.cep-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "disabled", "readonly", "inputId", "errorId", "showPrefixIcon", "prefixIcon", "clearable", "clearAriaLabel", "showSuffixSlot", "valueAlignEnd", "loading", "skeletonVariant", "mostrarMenuContexto", "contextMenuItems", "contextMenuId"], outputs: ["clear", "contextMenuSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3633
|
+
], usesInheritance: 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\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\"\n [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"cep-field__input\" type=\"text\" inputmode=\"numeric\" [id]=\"controlId\" [attr.name]=\"name || null\"\n [attr.placeholder]=\"''\" [attr.autocomplete]=\"autocompleteAttr\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [required]=\"uiRequiredEffective\" [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [value]=\"inputText\" (input)=\"onNativeInput($event)\" (blur)=\"onBlur()\" />\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.cep-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cep-field__input::placeholder{color:transparent}.cep-field__input:focus,.cep-field__input:focus-visible{outline:none}.cep-field__input:-webkit-autofill,.cep-field__input:-webkit-autofill:hover,.cep-field__input:-webkit-autofill:focus,.cep-field__input:-webkit-autofill:active,.cep-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}.cep-field__input:autofill,.cep-field__input:autofill:hover,.cep-field__input:autofill:focus,.cep-field__input:autofill:active,.cep-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}.cep-field__input--invalid:not(:disabled)::placeholder{color:transparent}.cep-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3526
3634
|
}
|
|
3527
3635
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CepFieldComponent, decorators: [{
|
|
3528
3636
|
type: Component,
|
|
@@ -3532,7 +3640,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
3532
3640
|
useExisting: forwardRef(() => CepFieldComponent),
|
|
3533
3641
|
multi: true,
|
|
3534
3642
|
},
|
|
3535
|
-
], template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\"\n [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"cep-field__input\" type=\"text\" inputmode=\"numeric\" [id]=\"controlId\" [attr.name]=\"name || null\"\n [attr.placeholder]=\"''\" [attr.autocomplete]=\"autocompleteAttr\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [required]=\"uiRequiredEffective\" [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [value]=\"inputText\" (input)=\"onNativeInput($event)\" (blur)=\"onBlur()\" />\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.cep-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cep-field__input::placeholder{color:transparent}.cep-field__input:focus,.cep-field__input:focus-visible{outline:none}.cep-field__input:-webkit-autofill,.cep-field__input:-webkit-autofill:hover,.cep-field__input:-webkit-autofill:focus,.cep-field__input:-webkit-autofill:active,.cep-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}.cep-field__input:autofill,.cep-field__input:autofill:hover,.cep-field__input:autofill:focus,.cep-field__input:autofill:active,.cep-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}.cep-field__input--invalid:not(:disabled)::placeholder{color:transparent}.cep-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}\n"] }]
|
|
3643
|
+
], 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\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\"\n [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"cep-field__input\" type=\"text\" inputmode=\"numeric\" [id]=\"controlId\" [attr.name]=\"name || null\"\n [attr.placeholder]=\"''\" [attr.autocomplete]=\"autocompleteAttr\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [required]=\"uiRequiredEffective\" [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [value]=\"inputText\" (input)=\"onNativeInput($event)\" (blur)=\"onBlur()\" />\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.cep-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cep-field__input::placeholder{color:transparent}.cep-field__input:focus,.cep-field__input:focus-visible{outline:none}.cep-field__input:-webkit-autofill,.cep-field__input:-webkit-autofill:hover,.cep-field__input:-webkit-autofill:focus,.cep-field__input:-webkit-autofill:active,.cep-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}.cep-field__input:autofill,.cep-field__input:autofill:hover,.cep-field__input:autofill:focus,.cep-field__input:autofill:active,.cep-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}.cep-field__input--invalid:not(:disabled)::placeholder{color:transparent}.cep-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}\n"] }]
|
|
3536
3644
|
}], propDecorators: { hostInvalidClass: [{
|
|
3537
3645
|
type: HostBinding,
|
|
3538
3646
|
args: ['class.cep-field--invalid']
|
|
@@ -3580,7 +3688,7 @@ class PhoneFieldComponent extends MaskedTextFieldBase {
|
|
|
3580
3688
|
useExisting: forwardRef(() => PhoneFieldComponent),
|
|
3581
3689
|
multi: true,
|
|
3582
3690
|
},
|
|
3583
|
-
], usesInheritance: true, ngImport: i0, template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\"\n [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"phone-field__input\" type=\"text\" inputmode=\"tel\" [id]=\"controlId\" [attr.name]=\"name || null\"\n [attr.placeholder]=\"''\" [attr.autocomplete]=\"autocompleteAttr\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [required]=\"uiRequiredEffective\" [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [value]=\"inputText\" (input)=\"onNativeInput($event)\" (blur)=\"onBlur()\" />\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.phone-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.phone-field__input::placeholder{color:transparent}.phone-field__input:focus,.phone-field__input:focus-visible{outline:none}.phone-field__input:-webkit-autofill,.phone-field__input:-webkit-autofill:hover,.phone-field__input:-webkit-autofill:focus,.phone-field__input:-webkit-autofill:active,.phone-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}.phone-field__input:autofill,.phone-field__input:autofill:hover,.phone-field__input:autofill:focus,.phone-field__input:autofill:active,.phone-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}.phone-field__input--invalid:not(:disabled)::placeholder{color:transparent}.phone-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "disabled", "readonly", "inputId", "errorId", "showPrefixIcon", "prefixIcon", "clearable", "clearAriaLabel", "showSuffixSlot", "valueAlignEnd", "loading", "skeletonVariant", "mostrarMenuContexto", "contextMenuItems", "contextMenuId"], outputs: ["clear", "contextMenuSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3691
|
+
], usesInheritance: 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\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\"\n [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"phone-field__input\" type=\"text\" inputmode=\"tel\" [id]=\"controlId\" [attr.name]=\"name || null\"\n [attr.placeholder]=\"''\" [attr.autocomplete]=\"autocompleteAttr\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [required]=\"uiRequiredEffective\" [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [value]=\"inputText\" (input)=\"onNativeInput($event)\" (blur)=\"onBlur()\" />\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.phone-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.phone-field__input::placeholder{color:transparent}.phone-field__input:focus,.phone-field__input:focus-visible{outline:none}.phone-field__input:-webkit-autofill,.phone-field__input:-webkit-autofill:hover,.phone-field__input:-webkit-autofill:focus,.phone-field__input:-webkit-autofill:active,.phone-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}.phone-field__input:autofill,.phone-field__input:autofill:hover,.phone-field__input:autofill:focus,.phone-field__input:autofill:active,.phone-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}.phone-field__input--invalid:not(:disabled)::placeholder{color:transparent}.phone-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3584
3692
|
}
|
|
3585
3693
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PhoneFieldComponent, decorators: [{
|
|
3586
3694
|
type: Component,
|
|
@@ -3590,7 +3698,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
3590
3698
|
useExisting: forwardRef(() => PhoneFieldComponent),
|
|
3591
3699
|
multi: true,
|
|
3592
3700
|
},
|
|
3593
|
-
], template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\"\n [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"phone-field__input\" type=\"text\" inputmode=\"tel\" [id]=\"controlId\" [attr.name]=\"name || null\"\n [attr.placeholder]=\"''\" [attr.autocomplete]=\"autocompleteAttr\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [required]=\"uiRequiredEffective\" [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [value]=\"inputText\" (input)=\"onNativeInput($event)\" (blur)=\"onBlur()\" />\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.phone-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.phone-field__input::placeholder{color:transparent}.phone-field__input:focus,.phone-field__input:focus-visible{outline:none}.phone-field__input:-webkit-autofill,.phone-field__input:-webkit-autofill:hover,.phone-field__input:-webkit-autofill:focus,.phone-field__input:-webkit-autofill:active,.phone-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}.phone-field__input:autofill,.phone-field__input:autofill:hover,.phone-field__input:autofill:focus,.phone-field__input:autofill:active,.phone-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}.phone-field__input--invalid:not(:disabled)::placeholder{color:transparent}.phone-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}\n"] }]
|
|
3701
|
+
], 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\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\"\n [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"phone-field__input\" type=\"text\" inputmode=\"tel\" [id]=\"controlId\" [attr.name]=\"name || null\"\n [attr.placeholder]=\"''\" [attr.autocomplete]=\"autocompleteAttr\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [required]=\"uiRequiredEffective\" [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [value]=\"inputText\" (input)=\"onNativeInput($event)\" (blur)=\"onBlur()\" />\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.phone-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.phone-field__input::placeholder{color:transparent}.phone-field__input:focus,.phone-field__input:focus-visible{outline:none}.phone-field__input:-webkit-autofill,.phone-field__input:-webkit-autofill:hover,.phone-field__input:-webkit-autofill:focus,.phone-field__input:-webkit-autofill:active,.phone-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}.phone-field__input:autofill,.phone-field__input:autofill:hover,.phone-field__input:autofill:focus,.phone-field__input:autofill:active,.phone-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}.phone-field__input--invalid:not(:disabled)::placeholder{color:transparent}.phone-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}\n"] }]
|
|
3594
3702
|
}], propDecorators: { hostInvalidClass: [{
|
|
3595
3703
|
type: HostBinding,
|
|
3596
3704
|
args: ['class.phone-field--invalid']
|
|
@@ -3638,7 +3746,7 @@ class CpfCnpjFieldComponent extends MaskedTextFieldBase {
|
|
|
3638
3746
|
useExisting: forwardRef(() => CpfCnpjFieldComponent),
|
|
3639
3747
|
multi: true,
|
|
3640
3748
|
},
|
|
3641
|
-
], usesInheritance: true, ngImport: i0, template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\"\n [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"cpf-cnpj-field__input\" type=\"text\" inputmode=\"numeric\" [id]=\"controlId\" [attr.name]=\"name || null\"\n [attr.placeholder]=\"''\" [attr.autocomplete]=\"autocompleteAttr\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [required]=\"uiRequiredEffective\" [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [value]=\"inputText\" (input)=\"onNativeInput($event)\" (blur)=\"onBlur()\" />\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.cpf-cnpj-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cpf-cnpj-field__input::placeholder{color:transparent}.cpf-cnpj-field__input:focus,.cpf-cnpj-field__input:focus-visible{outline:none}.cpf-cnpj-field__input:-webkit-autofill,.cpf-cnpj-field__input:-webkit-autofill:hover,.cpf-cnpj-field__input:-webkit-autofill:focus,.cpf-cnpj-field__input:-webkit-autofill:active,.cpf-cnpj-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}.cpf-cnpj-field__input:autofill,.cpf-cnpj-field__input:autofill:hover,.cpf-cnpj-field__input:autofill:focus,.cpf-cnpj-field__input:autofill:active,.cpf-cnpj-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}.cpf-cnpj-field__input--invalid:not(:disabled)::placeholder{color:transparent}.cpf-cnpj-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "disabled", "readonly", "inputId", "errorId", "showPrefixIcon", "prefixIcon", "clearable", "clearAriaLabel", "showSuffixSlot", "valueAlignEnd", "loading", "skeletonVariant", "mostrarMenuContexto", "contextMenuItems", "contextMenuId"], outputs: ["clear", "contextMenuSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3749
|
+
], usesInheritance: 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\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\"\n [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"cpf-cnpj-field__input\" type=\"text\" inputmode=\"numeric\" [id]=\"controlId\" [attr.name]=\"name || null\"\n [attr.placeholder]=\"''\" [attr.autocomplete]=\"autocompleteAttr\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [required]=\"uiRequiredEffective\" [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [value]=\"inputText\" (input)=\"onNativeInput($event)\" (blur)=\"onBlur()\" />\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.cpf-cnpj-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cpf-cnpj-field__input::placeholder{color:transparent}.cpf-cnpj-field__input:focus,.cpf-cnpj-field__input:focus-visible{outline:none}.cpf-cnpj-field__input:-webkit-autofill,.cpf-cnpj-field__input:-webkit-autofill:hover,.cpf-cnpj-field__input:-webkit-autofill:focus,.cpf-cnpj-field__input:-webkit-autofill:active,.cpf-cnpj-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}.cpf-cnpj-field__input:autofill,.cpf-cnpj-field__input:autofill:hover,.cpf-cnpj-field__input:autofill:focus,.cpf-cnpj-field__input:autofill:active,.cpf-cnpj-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}.cpf-cnpj-field__input--invalid:not(:disabled)::placeholder{color:transparent}.cpf-cnpj-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3642
3750
|
}
|
|
3643
3751
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CpfCnpjFieldComponent, decorators: [{
|
|
3644
3752
|
type: Component,
|
|
@@ -3648,7 +3756,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
3648
3756
|
useExisting: forwardRef(() => CpfCnpjFieldComponent),
|
|
3649
3757
|
multi: true,
|
|
3650
3758
|
},
|
|
3651
|
-
], template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\"\n [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"cpf-cnpj-field__input\" type=\"text\" inputmode=\"numeric\" [id]=\"controlId\" [attr.name]=\"name || null\"\n [attr.placeholder]=\"''\" [attr.autocomplete]=\"autocompleteAttr\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [required]=\"uiRequiredEffective\" [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [value]=\"inputText\" (input)=\"onNativeInput($event)\" (blur)=\"onBlur()\" />\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.cpf-cnpj-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cpf-cnpj-field__input::placeholder{color:transparent}.cpf-cnpj-field__input:focus,.cpf-cnpj-field__input:focus-visible{outline:none}.cpf-cnpj-field__input:-webkit-autofill,.cpf-cnpj-field__input:-webkit-autofill:hover,.cpf-cnpj-field__input:-webkit-autofill:focus,.cpf-cnpj-field__input:-webkit-autofill:active,.cpf-cnpj-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}.cpf-cnpj-field__input:autofill,.cpf-cnpj-field__input:autofill:hover,.cpf-cnpj-field__input:autofill:focus,.cpf-cnpj-field__input:autofill:active,.cpf-cnpj-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}.cpf-cnpj-field__input--invalid:not(:disabled)::placeholder{color:transparent}.cpf-cnpj-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}\n"] }]
|
|
3759
|
+
], 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\"\n [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\"\n [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <input #nativeInput class=\"cpf-cnpj-field__input\" type=\"text\" inputmode=\"numeric\" [id]=\"controlId\" [attr.name]=\"name || null\"\n [attr.placeholder]=\"''\" [attr.autocomplete]=\"autocompleteAttr\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [required]=\"uiRequiredEffective\" [attr.aria-invalid]=\"uiInvalid\" [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [value]=\"inputText\" (input)=\"onNativeInput($event)\" (blur)=\"onBlur()\" />\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.cpf-cnpj-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cpf-cnpj-field__input::placeholder{color:transparent}.cpf-cnpj-field__input:focus,.cpf-cnpj-field__input:focus-visible{outline:none}.cpf-cnpj-field__input:-webkit-autofill,.cpf-cnpj-field__input:-webkit-autofill:hover,.cpf-cnpj-field__input:-webkit-autofill:focus,.cpf-cnpj-field__input:-webkit-autofill:active,.cpf-cnpj-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}.cpf-cnpj-field__input:autofill,.cpf-cnpj-field__input:autofill:hover,.cpf-cnpj-field__input:autofill:focus,.cpf-cnpj-field__input:autofill:active,.cpf-cnpj-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}.cpf-cnpj-field__input--invalid:not(:disabled)::placeholder{color:transparent}.cpf-cnpj-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}\n"] }]
|
|
3652
3760
|
}], propDecorators: { hostInvalidClass: [{
|
|
3653
3761
|
type: HostBinding,
|
|
3654
3762
|
args: ['class.cpf-cnpj-field--invalid']
|
|
@@ -4633,7 +4741,7 @@ class SelectFieldComponent extends DropdownOptionFieldBase {
|
|
|
4633
4741
|
useExisting: forwardRef(() => SelectFieldComponent),
|
|
4634
4742
|
multi: true,
|
|
4635
4743
|
},
|
|
4636
|
-
], 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 [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", "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", "bareOverlayPanel"], outputs: ["openChange"] }, { kind: "component", type: SkeletonListComponent, selector: "app-skeleton-list", inputs: ["rows", "leading", "rowGap", "lineHeight", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4744
|
+
], 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 }); }
|
|
4637
4745
|
}
|
|
4638
4746
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SelectFieldComponent, decorators: [{
|
|
4639
4747
|
type: Component,
|
|
@@ -4643,7 +4751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
4643
4751
|
useExisting: forwardRef(() => SelectFieldComponent),
|
|
4644
4752
|
multi: true,
|
|
4645
4753
|
},
|
|
4646
|
-
], template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\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"] }]
|
|
4754
|
+
], 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"] }]
|
|
4647
4755
|
}], propDecorators: { hostInvalidClass: [{
|
|
4648
4756
|
type: HostBinding,
|
|
4649
4757
|
args: ['class.select-field--invalid']
|
|
@@ -5010,7 +5118,7 @@ class MultiselectFieldComponent extends DropdownMultiOptionFieldBase {
|
|
|
5010
5118
|
useExisting: forwardRef(() => MultiselectFieldComponent),
|
|
5011
5119
|
multi: true,
|
|
5012
5120
|
},
|
|
5013
|
-
], 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 [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", "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", "bareOverlayPanel"], outputs: ["openChange"] }, { kind: "component", type: SkeletonListComponent, selector: "app-skeleton-list", inputs: ["rows", "leading", "rowGap", "lineHeight", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5121
|
+
], 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 }); }
|
|
5014
5122
|
}
|
|
5015
5123
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MultiselectFieldComponent, decorators: [{
|
|
5016
5124
|
type: Component,
|
|
@@ -5020,7 +5128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
5020
5128
|
useExisting: forwardRef(() => MultiselectFieldComponent),
|
|
5021
5129
|
multi: true,
|
|
5022
5130
|
},
|
|
5023
|
-
], template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\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"] }]
|
|
5131
|
+
], 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"] }]
|
|
5024
5132
|
}], propDecorators: { hostInvalidClass: [{
|
|
5025
5133
|
type: HostBinding,
|
|
5026
5134
|
args: ['class.multiselect-field--invalid']
|
|
@@ -5531,7 +5639,7 @@ class DropdownSearchFieldComponent extends DropdownOptionFieldBase {
|
|
|
5531
5639
|
useExisting: forwardRef(() => DropdownSearchFieldComponent),
|
|
5532
5640
|
multi: true,
|
|
5533
5641
|
},
|
|
5534
|
-
], 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 [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", "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", "bareOverlayPanel"], outputs: ["openChange"] }, { kind: "component", type: SkeletonListComponent, selector: "app-skeleton-list", inputs: ["rows", "leading", "rowGap", "lineHeight", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5642
|
+
], 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 }); }
|
|
5535
5643
|
}
|
|
5536
5644
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownSearchFieldComponent, decorators: [{
|
|
5537
5645
|
type: Component,
|
|
@@ -5541,7 +5649,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
5541
5649
|
useExisting: forwardRef(() => DropdownSearchFieldComponent),
|
|
5542
5650
|
multi: true,
|
|
5543
5651
|
},
|
|
5544
|
-
], template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\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"] }]
|
|
5652
|
+
], 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"] }]
|
|
5545
5653
|
}], propDecorators: { hostInvalidClass: [{
|
|
5546
5654
|
type: HostBinding,
|
|
5547
5655
|
args: ['class.dropdown-search-field--invalid']
|
|
@@ -9733,6 +9841,181 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
9733
9841
|
args: [{ transform: booleanAttribute }]
|
|
9734
9842
|
}] } });
|
|
9735
9843
|
|
|
9844
|
+
/** Remove marcas de acento (NFD) e passa a minúsculas — para pesquisa insensível a acentos e capitalização. */
|
|
9845
|
+
function normalizeSearchText(raw) {
|
|
9846
|
+
const t = raw.trim().toLowerCase();
|
|
9847
|
+
return t.normalize('NFD').replace(/\p{M}/gu, '');
|
|
9848
|
+
}
|
|
9849
|
+
function matchesQuery(qNormalized, ...parts) {
|
|
9850
|
+
return parts.some((p) => normalizeSearchText(p ?? '').includes(qNormalized));
|
|
9851
|
+
}
|
|
9852
|
+
/**
|
|
9853
|
+
* Filtra a árvore de menu: grupo ou submenu mantém-se se o rótulo casar ou se algum descendente casar.
|
|
9854
|
+
* Divisores de primeiro nível são omitidos no resultado filtrado.
|
|
9855
|
+
*/
|
|
9856
|
+
function filterMenuNodesByQuery(nodes, rawQuery) {
|
|
9857
|
+
const q = normalizeSearchText(rawQuery);
|
|
9858
|
+
if (!nodes?.length) {
|
|
9859
|
+
return [];
|
|
9860
|
+
}
|
|
9861
|
+
if (!q) {
|
|
9862
|
+
return [...nodes];
|
|
9863
|
+
}
|
|
9864
|
+
const out = [];
|
|
9865
|
+
for (const node of nodes) {
|
|
9866
|
+
const filtered = filterOneNode(node, q, rawQuery);
|
|
9867
|
+
if (filtered) {
|
|
9868
|
+
out.push(filtered);
|
|
9869
|
+
}
|
|
9870
|
+
}
|
|
9871
|
+
return out;
|
|
9872
|
+
}
|
|
9873
|
+
function filterOneNode(node, qNormalized, rawQuery) {
|
|
9874
|
+
if (node.kind === 'divider') {
|
|
9875
|
+
return null;
|
|
9876
|
+
}
|
|
9877
|
+
if (node.kind === 'item') {
|
|
9878
|
+
return matchesQuery(qNormalized, node.label, node.description)
|
|
9879
|
+
? node
|
|
9880
|
+
: null;
|
|
9881
|
+
}
|
|
9882
|
+
if (node.kind === 'submenu') {
|
|
9883
|
+
if (matchesQuery(qNormalized, node.label, node.description)) {
|
|
9884
|
+
return node;
|
|
9885
|
+
}
|
|
9886
|
+
const inner = filterMenuNodesByQuery(node.items, rawQuery);
|
|
9887
|
+
return inner.length > 0 ? { ...node, items: inner } : null;
|
|
9888
|
+
}
|
|
9889
|
+
if (node.kind === 'group') {
|
|
9890
|
+
if (node.label != null && matchesQuery(qNormalized, node.label)) {
|
|
9891
|
+
return node;
|
|
9892
|
+
}
|
|
9893
|
+
const inner = filterMenuNodesByQuery(node.items, rawQuery);
|
|
9894
|
+
return inner.length > 0 ? { ...node, items: inner } : null;
|
|
9895
|
+
}
|
|
9896
|
+
return null;
|
|
9897
|
+
}
|
|
9898
|
+
|
|
9899
|
+
class MenuListComponent {
|
|
9900
|
+
constructor() {
|
|
9901
|
+
this.cdr = inject(ChangeDetectorRef);
|
|
9902
|
+
this.appTheme = input(...(ngDevMode ? [undefined, { debugName: "appTheme" }] : /* istanbul ignore next */ []));
|
|
9903
|
+
this.items = [];
|
|
9904
|
+
this.menuId = 'app-menu';
|
|
9905
|
+
this.dense = false;
|
|
9906
|
+
this.nested = false;
|
|
9907
|
+
this.selectedItemId = null;
|
|
9908
|
+
this.compressText = false;
|
|
9909
|
+
this.clickToOpen = true;
|
|
9910
|
+
this.groupCollapsible = true;
|
|
9911
|
+
this.groupDefaultExpansion = 'all';
|
|
9912
|
+
this.searchable = false;
|
|
9913
|
+
this.searchPlaceholder = 'Pesquisar';
|
|
9914
|
+
this.itemSelect = new EventEmitter();
|
|
9915
|
+
this.closeRequest = new EventEmitter();
|
|
9916
|
+
this.submenuBack = new EventEmitter();
|
|
9917
|
+
this.searchQuery = '';
|
|
9918
|
+
this.displayItems = [];
|
|
9919
|
+
}
|
|
9920
|
+
get showSearchField() {
|
|
9921
|
+
return this.searchable && !this.nested && !this.compressText;
|
|
9922
|
+
}
|
|
9923
|
+
get expandAllGroupsWhenSearching() {
|
|
9924
|
+
return (this.searchable &&
|
|
9925
|
+
!this.nested &&
|
|
9926
|
+
!this.compressText &&
|
|
9927
|
+
this.groupCollapsible &&
|
|
9928
|
+
this.searchQuery.trim().length > 0);
|
|
9929
|
+
}
|
|
9930
|
+
get showSearchNoResults() {
|
|
9931
|
+
return (this.showSearchField &&
|
|
9932
|
+
this.searchQuery.trim().length > 0 &&
|
|
9933
|
+
this.displayItems.length === 0);
|
|
9934
|
+
}
|
|
9935
|
+
ngOnChanges(changes) {
|
|
9936
|
+
if (changes['items'] ||
|
|
9937
|
+
changes['searchable'] ||
|
|
9938
|
+
changes['compressText'] ||
|
|
9939
|
+
changes['nested']) {
|
|
9940
|
+
this.syncDisplayItems();
|
|
9941
|
+
}
|
|
9942
|
+
if (changes['selectedItemId'] ||
|
|
9943
|
+
changes['items'] ||
|
|
9944
|
+
changes['searchable'] ||
|
|
9945
|
+
changes['compressText'] ||
|
|
9946
|
+
changes['dense'] ||
|
|
9947
|
+
changes['menuId'] ||
|
|
9948
|
+
changes['clickToOpen'] ||
|
|
9949
|
+
changes['groupCollapsible'] ||
|
|
9950
|
+
changes['groupDefaultExpansion']) {
|
|
9951
|
+
this.cdr.markForCheck();
|
|
9952
|
+
}
|
|
9953
|
+
}
|
|
9954
|
+
onSearchQueryInput(value) {
|
|
9955
|
+
this.searchQuery = value ?? '';
|
|
9956
|
+
this.body?.closeOpenSubmenu();
|
|
9957
|
+
this.syncDisplayItems();
|
|
9958
|
+
this.cdr.markForCheck();
|
|
9959
|
+
}
|
|
9960
|
+
resetHighlight() {
|
|
9961
|
+
this.body?.resetHighlight();
|
|
9962
|
+
}
|
|
9963
|
+
focusFirstOption() {
|
|
9964
|
+
this.body?.focusFirstOption();
|
|
9965
|
+
}
|
|
9966
|
+
syncDisplayItems() {
|
|
9967
|
+
if (!this.searchable || this.nested || this.compressText) {
|
|
9968
|
+
this.displayItems = [...(this.items ?? [])];
|
|
9969
|
+
}
|
|
9970
|
+
else {
|
|
9971
|
+
this.displayItems = filterMenuNodesByQuery(this.items ?? [], this.searchQuery);
|
|
9972
|
+
}
|
|
9973
|
+
}
|
|
9974
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9975
|
+
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 }, 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" }, viewQueries: [{ propertyName: "body", first: true, predicate: MenuListBodyComponent, descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i1.CdkScrollable }], 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 [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>\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:block;min-width:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.menu-list{background:var(--app-color-surface, #ffffff);border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .12));border-radius:10px;box-shadow:0 10px 28px -14px #0f172a29;max-height:min(70vh,22rem);overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;gap:.35rem;padding:.45rem 0;outline:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.menu-list--dense{padding:.2rem 0;gap:0}.menu-list--dense .menu-list__items{gap:0}.menu-list__items{display:flex;flex-direction:column;gap:.12rem;min-width:0}.menu-list__search{margin:0 .35rem .12rem;min-width:0;user-select:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text}.menu-list__search-field{display:block;width:100%}.menu-list__search-empty{margin:-.05rem .75rem 0;padding:0 0 .15rem;font-size:.75rem;line-height:1.35;font-weight:400;color:var(--app-color-text-muted, #6b8299);opacity:.88}.menu-list__group-row{display:block;width:100%}.menu-list__group-row--pinned .menu-list__group-label{color:var(--app-color-nav-group-heading, #9ca3af)}.menu-list__submenu-wrap{position:relative;display:block}.menu-list__option{display:flex;align-items:center;box-sizing:border-box;gap:.6875rem;margin:0 .25rem;padding:.5625rem .65rem;border-radius:8px;cursor:pointer;color:var(--app-color-text-primary, #1a2f45);background:transparent;border:1px solid transparent;text-align:left;font:inherit;line-height:1.25;transition:background-color .18s ease,color .18s ease,box-shadow .18s ease,border-color .18s ease}.menu-list__option:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:1px}.menu-list__option:hover:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:#0f172a0b}.menu-list__option.menu-list__option--active:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:#0f172a0e;border-color:transparent}.menu-list__option.menu-list__option--active:not(.menu-list__option--disabled):not(.menu-list__option--loading):not(.menu-list__option--selected){box-shadow:none}.menu-list__option.menu-list__option--disabled{cursor:not-allowed;color:var(--app-color-text-muted, #6b8299);background:transparent;opacity:.72}.menu-list__option.menu-list__option--loading{cursor:wait;opacity:.92;pointer-events:none}.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading){color:var(--app-color-error, #b91c1c)}.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading):hover,.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading).menu-list__option--active{background:var(--app-color-error-bg-subtle, rgba(185, 28, 28, .12));border-color:transparent;box-shadow:inset 2px 0 0 0 var(--app-color-error-border, #dc2626)}.menu-list__option--submenu{padding-right:.35rem}.menu-list__option--selected:not(.menu-list__option--disabled){background:color-mix(in srgb,var(--app-color-primary) 10%,transparent);border-radius:8px;border-color:transparent;box-shadow:inset 2px 0 0 0 var(--app-color-primary, #2b7fd9)}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__label{color:color-mix(in srgb,var(--app-color-primary, #2b7fd9) 88%,var(--app-color-nav-option-label, #374151));font-weight:500}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__icon{color:var(--app-color-primary, #2b7fd9)}.menu-list__option:not(.menu-list__option--danger):not(.menu-list__option--disabled):not(.menu-list__option--selected) .menu-list__label{color:var(--app-color-nav-option-label, #374151)}.menu-list--compress-text .menu-list__label,.menu-list--compress-text .menu-list__description{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.menu-list--compress-text .menu-list__text,.menu-list--compress-text .menu-list__submenu-chevron{display:none}.menu-list--compress-text .menu-list__submenu-wrap{width:100%}.menu-list--compress-text .menu-list__option{justify-content:center;align-items:center;text-align:center;width:calc(100% - .5rem);max-width:100%;box-sizing:border-box;margin-left:.25rem;margin-right:.25rem;padding:.5rem .35rem}.menu-list--compress-text .menu-list__option--submenu{padding-left:.35rem;padding-right:.35rem}.menu-list--compress-text .menu-list__icon{flex:0 0 auto;width:auto;min-width:1.75rem;display:inline-flex;align-items:center;justify-content:center;padding-top:0}.menu-list__submenu-chevron{flex:0 0 auto;margin-left:auto;padding-left:.35rem;font-size:1rem;line-height:1;color:var(--app-color-text-muted, #6b8299);opacity:.85;display:inline-flex;align-items:center;justify-content:center}.menu-list__submenu-chevron i{font-size:.68rem;line-height:1}.menu-list__icon{flex:0 0 auto;width:1.25rem;height:1.25rem;min-height:1.25rem;display:inline-flex;align-items:center;justify-content:center;text-align:center;color:color-mix(in srgb,var(--app-color-primary, #2b7fd9) 78%,var(--app-color-text-muted, #6b8299));line-height:1;transition:color .18s ease,opacity .18s ease}.menu-list__icon i{display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:1;font-size:.95rem;margin-block:auto;flex-shrink:0}.menu-list__option--disabled .menu-list__icon{opacity:.55}.menu-list__icon--spin i{animation:menu-list-spin .8s linear infinite}.menu-list__text{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}.menu-list__label{font-size:.875rem;font-weight:400;line-height:1.25rem;display:inline-flex;align-items:center;min-height:1.25rem;box-sizing:border-box;padding-top:.5rem!important}.menu-list--nested .menu-list__label{font-weight:400;padding-top:.5rem!important}.menu-list--nested .menu-list__icon{transform:translateY(.125rem)}.menu-list__description{font-size:.75rem;color:var(--app-color-text-muted, #6b8299);line-height:1.3}.menu-list:not(.menu-list--compress-text){animation:app-sidebar-nav-reveal-in .45s cubic-bezier(.16,1,.32,1) both}@media(prefers-reduced-motion:reduce){.menu-list:not(.menu-list--compress-text){animation:none}}:host-context(.app-drawer__body) .menu-list__label{padding-top:.5rem!important}:host-context(.app-drawer__body) .menu-list__icon{transform:translateY(.1875rem)}@media(max-width:767.98px){.menu-list.menu-list--nested .menu-list__label{padding-top:.4rem!important}.menu-list.menu-list--nested .menu-list__icon{transform:translateY(.1875rem)}}.menu-submenu__panel{box-sizing:border-box;min-width:0;padding:0;background:transparent;border:none;box-shadow:none;border-radius:10px;overflow:hidden}@keyframes menu-list-spin{to{transform:rotate(360deg)}}:host ::ng-deep .menu-submenu__cdk-panel{background:transparent;box-shadow:none;border-radius:10px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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", "expandAllGroupsInitially"], outputs: ["itemSelect", "closeRequest", "submenuBack"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9976
|
+
}
|
|
9977
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuListComponent, decorators: [{
|
|
9978
|
+
type: Component,
|
|
9979
|
+
args: [{ selector: 'app-menu-list', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [CdkScrollable], imports: [FormsModule, TextFieldComponent, MenuListBodyComponent, CdkScrollable], 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 [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>\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:block;min-width:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.menu-list{background:var(--app-color-surface, #ffffff);border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .12));border-radius:10px;box-shadow:0 10px 28px -14px #0f172a29;max-height:min(70vh,22rem);overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;gap:.35rem;padding:.45rem 0;outline:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.menu-list--dense{padding:.2rem 0;gap:0}.menu-list--dense .menu-list__items{gap:0}.menu-list__items{display:flex;flex-direction:column;gap:.12rem;min-width:0}.menu-list__search{margin:0 .35rem .12rem;min-width:0;user-select:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text}.menu-list__search-field{display:block;width:100%}.menu-list__search-empty{margin:-.05rem .75rem 0;padding:0 0 .15rem;font-size:.75rem;line-height:1.35;font-weight:400;color:var(--app-color-text-muted, #6b8299);opacity:.88}.menu-list__group-row{display:block;width:100%}.menu-list__group-row--pinned .menu-list__group-label{color:var(--app-color-nav-group-heading, #9ca3af)}.menu-list__submenu-wrap{position:relative;display:block}.menu-list__option{display:flex;align-items:center;box-sizing:border-box;gap:.6875rem;margin:0 .25rem;padding:.5625rem .65rem;border-radius:8px;cursor:pointer;color:var(--app-color-text-primary, #1a2f45);background:transparent;border:1px solid transparent;text-align:left;font:inherit;line-height:1.25;transition:background-color .18s ease,color .18s ease,box-shadow .18s ease,border-color .18s ease}.menu-list__option:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:1px}.menu-list__option:hover:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:#0f172a0b}.menu-list__option.menu-list__option--active:not(.menu-list__option--disabled):not(.menu-list__option--loading){background:#0f172a0e;border-color:transparent}.menu-list__option.menu-list__option--active:not(.menu-list__option--disabled):not(.menu-list__option--loading):not(.menu-list__option--selected){box-shadow:none}.menu-list__option.menu-list__option--disabled{cursor:not-allowed;color:var(--app-color-text-muted, #6b8299);background:transparent;opacity:.72}.menu-list__option.menu-list__option--loading{cursor:wait;opacity:.92;pointer-events:none}.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading){color:var(--app-color-error, #b91c1c)}.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading):hover,.menu-list__option.menu-list__option--danger:not(.menu-list__option--disabled):not(.menu-list__option--loading).menu-list__option--active{background:var(--app-color-error-bg-subtle, rgba(185, 28, 28, .12));border-color:transparent;box-shadow:inset 2px 0 0 0 var(--app-color-error-border, #dc2626)}.menu-list__option--submenu{padding-right:.35rem}.menu-list__option--selected:not(.menu-list__option--disabled){background:color-mix(in srgb,var(--app-color-primary) 10%,transparent);border-radius:8px;border-color:transparent;box-shadow:inset 2px 0 0 0 var(--app-color-primary, #2b7fd9)}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__label{color:color-mix(in srgb,var(--app-color-primary, #2b7fd9) 88%,var(--app-color-nav-option-label, #374151));font-weight:500}.menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__icon{color:var(--app-color-primary, #2b7fd9)}.menu-list__option:not(.menu-list__option--danger):not(.menu-list__option--disabled):not(.menu-list__option--selected) .menu-list__label{color:var(--app-color-nav-option-label, #374151)}.menu-list--compress-text .menu-list__label,.menu-list--compress-text .menu-list__description{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.menu-list--compress-text .menu-list__text,.menu-list--compress-text .menu-list__submenu-chevron{display:none}.menu-list--compress-text .menu-list__submenu-wrap{width:100%}.menu-list--compress-text .menu-list__option{justify-content:center;align-items:center;text-align:center;width:calc(100% - .5rem);max-width:100%;box-sizing:border-box;margin-left:.25rem;margin-right:.25rem;padding:.5rem .35rem}.menu-list--compress-text .menu-list__option--submenu{padding-left:.35rem;padding-right:.35rem}.menu-list--compress-text .menu-list__icon{flex:0 0 auto;width:auto;min-width:1.75rem;display:inline-flex;align-items:center;justify-content:center;padding-top:0}.menu-list__submenu-chevron{flex:0 0 auto;margin-left:auto;padding-left:.35rem;font-size:1rem;line-height:1;color:var(--app-color-text-muted, #6b8299);opacity:.85;display:inline-flex;align-items:center;justify-content:center}.menu-list__submenu-chevron i{font-size:.68rem;line-height:1}.menu-list__icon{flex:0 0 auto;width:1.25rem;height:1.25rem;min-height:1.25rem;display:inline-flex;align-items:center;justify-content:center;text-align:center;color:color-mix(in srgb,var(--app-color-primary, #2b7fd9) 78%,var(--app-color-text-muted, #6b8299));line-height:1;transition:color .18s ease,opacity .18s ease}.menu-list__icon i{display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:1;font-size:.95rem;margin-block:auto;flex-shrink:0}.menu-list__option--disabled .menu-list__icon{opacity:.55}.menu-list__icon--spin i{animation:menu-list-spin .8s linear infinite}.menu-list__text{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}.menu-list__label{font-size:.875rem;font-weight:400;line-height:1.25rem;display:inline-flex;align-items:center;min-height:1.25rem;box-sizing:border-box;padding-top:.5rem!important}.menu-list--nested .menu-list__label{font-weight:400;padding-top:.5rem!important}.menu-list--nested .menu-list__icon{transform:translateY(.125rem)}.menu-list__description{font-size:.75rem;color:var(--app-color-text-muted, #6b8299);line-height:1.3}.menu-list:not(.menu-list--compress-text){animation:app-sidebar-nav-reveal-in .45s cubic-bezier(.16,1,.32,1) both}@media(prefers-reduced-motion:reduce){.menu-list:not(.menu-list--compress-text){animation:none}}:host-context(.app-drawer__body) .menu-list__label{padding-top:.5rem!important}:host-context(.app-drawer__body) .menu-list__icon{transform:translateY(.1875rem)}@media(max-width:767.98px){.menu-list.menu-list--nested .menu-list__label{padding-top:.4rem!important}.menu-list.menu-list--nested .menu-list__icon{transform:translateY(.1875rem)}}.menu-submenu__panel{box-sizing:border-box;min-width:0;padding:0;background:transparent;border:none;box-shadow:none;border-radius:10px;overflow:hidden}@keyframes menu-list-spin{to{transform:rotate(360deg)}}:host ::ng-deep .menu-submenu__cdk-panel{background:transparent;box-shadow:none;border-radius:10px}\n"] }]
|
|
9980
|
+
}], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], items: [{
|
|
9981
|
+
type: Input,
|
|
9982
|
+
args: [{ required: true }]
|
|
9983
|
+
}], menuId: [{
|
|
9984
|
+
type: Input
|
|
9985
|
+
}], dense: [{
|
|
9986
|
+
type: Input,
|
|
9987
|
+
args: [{ transform: booleanAttribute }]
|
|
9988
|
+
}], nested: [{
|
|
9989
|
+
type: Input,
|
|
9990
|
+
args: [{ transform: booleanAttribute }]
|
|
9991
|
+
}], selectedItemId: [{
|
|
9992
|
+
type: Input
|
|
9993
|
+
}], compressText: [{
|
|
9994
|
+
type: Input,
|
|
9995
|
+
args: [{ transform: booleanAttribute }]
|
|
9996
|
+
}], clickToOpen: [{
|
|
9997
|
+
type: Input
|
|
9998
|
+
}], groupCollapsible: [{
|
|
9999
|
+
type: Input,
|
|
10000
|
+
args: [{ transform: booleanAttribute }]
|
|
10001
|
+
}], groupDefaultExpansion: [{
|
|
10002
|
+
type: Input
|
|
10003
|
+
}], searchable: [{
|
|
10004
|
+
type: Input,
|
|
10005
|
+
args: [{ transform: booleanAttribute }]
|
|
10006
|
+
}], searchPlaceholder: [{
|
|
10007
|
+
type: Input
|
|
10008
|
+
}], itemSelect: [{
|
|
10009
|
+
type: Output
|
|
10010
|
+
}], closeRequest: [{
|
|
10011
|
+
type: Output
|
|
10012
|
+
}], submenuBack: [{
|
|
10013
|
+
type: Output
|
|
10014
|
+
}], body: [{
|
|
10015
|
+
type: ViewChild,
|
|
10016
|
+
args: [MenuListBodyComponent]
|
|
10017
|
+
}] } });
|
|
10018
|
+
|
|
9736
10019
|
const PANEL_MIN_W = 200;
|
|
9737
10020
|
const VIEWPORT_PAD = 8;
|
|
9738
10021
|
class ContextMenuComponent {
|
|
@@ -9811,7 +10094,7 @@ class ContextMenuComponent {
|
|
|
9811
10094
|
this.disposeOverlay();
|
|
9812
10095
|
}
|
|
9813
10096
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9814
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ContextMenuComponent, isStandalone: true, selector: "app-context-menu", inputs: { appTheme: { classPropertyName: "appTheme", publicName: "appTheme", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, viewQueries: [{ propertyName: "menuTpl", first: true, predicate: ["menuTpl"], descendants: true, static: true }, { propertyName: "menuList", first: true, predicate: MenuListComponent, descendants: true }], ngImport: i0, template: "<span class=\"context-menu__host\" (contextmenu)=\"onContextMenu($event)\">\r\n <ng-content />\r\n</span>\r\n\r\n<ng-template #menuTpl>\r\n <div class=\"context-menu__surface\" [ngClass]=\"panelThemeNgClass()\" (click)=\"$event.stopPropagation()\">\r\n <app-menu-list\r\n [appTheme]=\"effectiveThemeId()\"\r\n [items]=\"items\"\r\n [menuId]=\"resolvedMenuId\"\r\n [clickToOpen]=\"false\"\r\n (itemSelect)=\"onItemSelect($event)\"\r\n (closeRequest)=\"onCloseRequest()\"\r\n />\r\n </div>\r\n</ng-template>\r\n", styles: [":host{display:contents}.context-menu__host{display:contents}.context-menu__surface{box-sizing:border-box;min-width:12.5rem;max-width:min(100vw - 1rem,22rem)}\n"], dependencies: [{ kind: "component", type: MenuListComponent, selector: "app-menu-list", inputs: ["appTheme", "items", "menuId", "dense", "nested", "selectedItemId", "compressText", "clickToOpen", "groupCollapsible", "groupDefaultExpansion"], outputs: ["itemSelect", "closeRequest", "submenuBack"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10097
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ContextMenuComponent, isStandalone: true, selector: "app-context-menu", inputs: { appTheme: { classPropertyName: "appTheme", publicName: "appTheme", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, viewQueries: [{ propertyName: "menuTpl", first: true, predicate: ["menuTpl"], descendants: true, static: true }, { propertyName: "menuList", first: true, predicate: MenuListComponent, descendants: true }], ngImport: i0, template: "<span class=\"context-menu__host\" (contextmenu)=\"onContextMenu($event)\">\r\n <ng-content />\r\n</span>\r\n\r\n<ng-template #menuTpl>\r\n <div class=\"context-menu__surface\" [ngClass]=\"panelThemeNgClass()\" (click)=\"$event.stopPropagation()\">\r\n <app-menu-list\r\n [appTheme]=\"effectiveThemeId()\"\r\n [items]=\"items\"\r\n [menuId]=\"resolvedMenuId\"\r\n [clickToOpen]=\"false\"\r\n (itemSelect)=\"onItemSelect($event)\"\r\n (closeRequest)=\"onCloseRequest()\"\r\n />\r\n </div>\r\n</ng-template>\r\n", styles: [":host{display:contents}.context-menu__host{display:contents}.context-menu__surface{box-sizing:border-box;min-width:12.5rem;max-width:min(100vw - 1rem,22rem)}\n"], dependencies: [{ kind: "component", type: MenuListComponent, selector: "app-menu-list", inputs: ["appTheme", "items", "menuId", "dense", "nested", "selectedItemId", "compressText", "clickToOpen", "groupCollapsible", "groupDefaultExpansion", "searchable", "searchPlaceholder"], outputs: ["itemSelect", "closeRequest", "submenuBack"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9815
10098
|
}
|
|
9816
10099
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContextMenuComponent, decorators: [{
|
|
9817
10100
|
type: Component,
|
|
@@ -9975,14 +10258,14 @@ class DrawerComponent {
|
|
|
9975
10258
|
this.focusPreOpen = null;
|
|
9976
10259
|
}
|
|
9977
10260
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9978
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DrawerComponent, isStandalone: true, selector: "app-drawer", inputs: { open: ["open", "open", booleanAttribute], side: "side", size: "size", drawerHeading: ["title", "drawerHeading"], showCloseButton: ["showCloseButton", "showCloseButton", booleanAttribute] }, outputs: { openChange: "openChange" }, host: { properties: { "class.app-drawer-host--open": "open" }, classAttribute: "app-drawer-host" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panelRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (open) {\r\n <div\r\n class=\"app-drawer__backdrop\"\r\n role=\"presentation\"\r\n tabindex=\"-1\"\r\n (click)=\"onBackdropClick()\"\r\n ></div>\r\n\r\n <aside\r\n #panelRef\r\n class=\"app-drawer__panel\"\r\n [ngClass]=\"panelClasses\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n [attr.aria-labelledby]=\"drawerHeading.trim() ? titleId : null\"\r\n tabindex=\"-1\"\r\n (keydown)=\"onPanelKeydown($event)\"\r\n >\r\n <header\r\n class=\"app-drawer__header\"\r\n [class.app-drawer__header--no-title]=\"!drawerHeading.trim()\"\r\n >\r\n @if (drawerHeading.trim()) {\r\n <h2 class=\"app-drawer__title\" [id]=\"titleId\">{{ drawerHeading }}</h2>\r\n }\r\n @if (showCloseButton) {\r\n <button\r\n type=\"button\"\r\n class=\"app-drawer__close\"\r\n aria-label=\"Fechar painel\"\r\n (click)=\"onCloseClick()\"\r\n >\r\n <span class=\"app-drawer__close-x\" aria-hidden=\"true\">×</span>\r\n </button>\r\n }\r\n </header>\r\n\r\n <div class=\"app-drawer__body\">\r\n <ng-content />\r\n </div>\r\n\r\n <footer class=\"app-drawer__footer\">\r\n <ng-content select=\"[appDrawerFooter]\" />\r\n </footer>\r\n </aside>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.app-drawer__backdrop{position:fixed;inset:0;z-index:var(--app-z-drawer-backdrop, 1100);background:#1a2f456b;backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05);animation:app-drawer-backdrop-in .22s ease-out both}@keyframes app-drawer-backdrop-in{0%{backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}to{backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05)}}.app-drawer__panel{position:fixed;z-index:var(--app-z-drawer-panel, 1101);display:flex;flex-direction:column;max-width:100vw;max-height:100vh;box-sizing:border-box;background:var(--app-color-surface, #fff);border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));box-shadow:-4px 0 24px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07));outline:none}.app-drawer__panel--side-right{top:0;right:0;bottom:0;animation:app-drawer-slide-in-right .24s ease-out}.app-drawer__panel--side-left{top:0;left:0;bottom:0;animation:app-drawer-slide-in-left .24s ease-out;box-shadow:4px 0 24px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07));border-right:none}.app-drawer__panel--side-bottom{inset:auto 0 0;max-height:min(88vh,32rem);border-radius:8px 8px 0 0;animation:app-drawer-slide-in-bottom .24s ease-out}.app-drawer__panel--side-right.app-drawer__panel--size-sm,.app-drawer__panel--side-left.app-drawer__panel--size-sm{width:min(18rem,90vw)}.app-drawer__panel--side-right.app-drawer__panel--size-md,.app-drawer__panel--side-left.app-drawer__panel--size-md{width:min(24rem,90vw)}.app-drawer__panel--side-right.app-drawer__panel--size-lg,.app-drawer__panel--side-left.app-drawer__panel--size-lg{width:min(32rem,90vw)}.app-drawer__panel--side-bottom.app-drawer__panel--size-sm{min-height:12rem}.app-drawer__panel--side-bottom.app-drawer__panel--size-md{min-height:16rem}.app-drawer__panel--side-bottom.app-drawer__panel--size-lg{min-height:22rem}.app-drawer__panel:has(.app-drawer__body app-sidebar) .app-drawer__header.app-drawer__header--no-title{position:absolute;z-index:2;inset:.38rem .38rem auto auto;width:auto;max-width:none;padding:0;margin:0;pointer-events:none;flex:0 0 auto}.app-drawer__panel:has(.app-drawer__body app-sidebar) .app-drawer__header.app-drawer__header--no-title .app-drawer__close{pointer-events:auto}.app-drawer__panel:has(.app-drawer__body app-sidebar) .app-drawer__body ::ng-deep app-sidebar .app-sidebar__head[data-app-sidebar-head]{padding-inline-end:2.35rem!important;padding-inline-start:.3rem!important;box-sizing:border-box}@keyframes app-drawer-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes app-drawer-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes app-drawer-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.app-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1rem 1rem .75rem;flex:0 0 auto;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.app-drawer__header--no-title{justify-content:flex-end;padding-top:.65rem;padding-bottom:.65rem}.app-drawer__title{margin:0;font-size:1.05rem;font-weight:600;color:var(--app-color-text-primary, #1a2f45);line-height:1.3;flex:1;min-width:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.app-drawer__close{flex:0 0 auto;width:2.35rem;height:2.35rem;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:none;background:color-mix(in srgb,var(--app-color-text-primary) 6%,transparent);color:var(--app-color-text-secondary, #5a7fa3);cursor:pointer;margin:0;padding:0;user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important}.app-drawer__close:hover{background:var(--app-color-hover-bg, rgba(43, 127, 217, .08))}.app-drawer__close:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:2px}.app-drawer__close-x{font-size:1.35rem;line-height:1;user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;pointer-events:none}.app-drawer__body{flex:1 1 auto;min-height:0;overflow:auto;padding:1rem;color:var(--app-color-text-primary, #1a2f45);font-size:.9rem;line-height:1.5;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.app-drawer__body::-webkit-scrollbar{width:4px;height:4px}.app-drawer__body::-webkit-scrollbar-track{background:transparent}.app-drawer__body::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.app-drawer__body::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}.app-drawer__body:has(app-sidebar){padding:.35rem .12rem .45rem;overflow:hidden!important;display:flex!important;flex-direction:column!important}.app-drawer__body:has(app-sidebar)>*{flex:1 1 auto;min-height:0;min-width:0;align-self:stretch;display:flex;flex-direction:column}.app-drawer__body:has(app-sidebar) app-sidebar{flex:1 1 auto;min-height:0;min-width:0;align-self:stretch;width:100%}.app-drawer__body ::ng-deep app-sidebar .app-sidebar{border-right:0;padding:.38rem .1rem .45rem}.app-drawer__body ::ng-deep app-sidebar .app-sidebar__toolbar app-shell-sidebar-toggle{display:none!important}.app-drawer__body ::ng-deep app-sidebar app-menu-list .menu-list__option{margin-left:.12rem;margin-right:.12rem;padding:.
|
|
10261
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DrawerComponent, isStandalone: true, selector: "app-drawer", inputs: { open: ["open", "open", booleanAttribute], side: "side", size: "size", drawerHeading: ["title", "drawerHeading"], showCloseButton: ["showCloseButton", "showCloseButton", booleanAttribute] }, outputs: { openChange: "openChange" }, host: { properties: { "class.app-drawer-host--open": "open" }, classAttribute: "app-drawer-host" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panelRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (open) {\r\n <div\r\n class=\"app-drawer__backdrop\"\r\n role=\"presentation\"\r\n tabindex=\"-1\"\r\n (click)=\"onBackdropClick()\"\r\n ></div>\r\n\r\n <aside\r\n #panelRef\r\n class=\"app-drawer__panel\"\r\n [ngClass]=\"panelClasses\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n [attr.aria-labelledby]=\"drawerHeading.trim() ? titleId : null\"\r\n tabindex=\"-1\"\r\n (keydown)=\"onPanelKeydown($event)\"\r\n >\r\n <header\r\n class=\"app-drawer__header\"\r\n [class.app-drawer__header--no-title]=\"!drawerHeading.trim()\"\r\n >\r\n @if (drawerHeading.trim()) {\r\n <h2 class=\"app-drawer__title\" [id]=\"titleId\">{{ drawerHeading }}</h2>\r\n }\r\n @if (showCloseButton) {\r\n <button\r\n type=\"button\"\r\n class=\"app-drawer__close\"\r\n aria-label=\"Fechar painel\"\r\n (click)=\"onCloseClick()\"\r\n >\r\n <span class=\"app-drawer__close-x\" aria-hidden=\"true\">×</span>\r\n </button>\r\n }\r\n </header>\r\n\r\n <div class=\"app-drawer__body\">\r\n <ng-content />\r\n </div>\r\n\r\n <footer class=\"app-drawer__footer\">\r\n <ng-content select=\"[appDrawerFooter]\" />\r\n </footer>\r\n </aside>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.app-drawer__backdrop{position:fixed;inset:0;z-index:var(--app-z-drawer-backdrop, 1100);background:#1a2f456b;backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05);animation:app-drawer-backdrop-in .22s ease-out both}@keyframes app-drawer-backdrop-in{0%{backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}to{backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05)}}.app-drawer__panel{position:fixed;z-index:var(--app-z-drawer-panel, 1101);display:flex;flex-direction:column;max-width:100vw;max-height:100vh;box-sizing:border-box;background:var(--app-color-surface, #fff);border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));box-shadow:-4px 0 24px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07));outline:none}.app-drawer__panel--side-right{top:0;right:0;bottom:0;animation:app-drawer-slide-in-right .24s ease-out}.app-drawer__panel--side-left{top:0;left:0;bottom:0;animation:app-drawer-slide-in-left .24s ease-out;box-shadow:4px 0 24px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07));border-right:none}.app-drawer__panel--side-bottom{inset:auto 0 0;max-height:min(88vh,32rem);border-radius:8px 8px 0 0;animation:app-drawer-slide-in-bottom .24s ease-out}.app-drawer__panel--side-right.app-drawer__panel--size-sm,.app-drawer__panel--side-left.app-drawer__panel--size-sm{width:min(18rem,90vw)}.app-drawer__panel--side-right.app-drawer__panel--size-md,.app-drawer__panel--side-left.app-drawer__panel--size-md{width:min(24rem,90vw)}.app-drawer__panel--side-right.app-drawer__panel--size-lg,.app-drawer__panel--side-left.app-drawer__panel--size-lg{width:min(32rem,90vw)}.app-drawer__panel--side-bottom.app-drawer__panel--size-sm{min-height:12rem}.app-drawer__panel--side-bottom.app-drawer__panel--size-md{min-height:16rem}.app-drawer__panel--side-bottom.app-drawer__panel--size-lg{min-height:22rem}.app-drawer__panel:has(.app-drawer__body app-sidebar) .app-drawer__header.app-drawer__header--no-title{position:absolute;z-index:2;inset:.38rem .38rem auto auto;width:auto;max-width:none;padding:0;margin:0;pointer-events:none;flex:0 0 auto}.app-drawer__panel:has(.app-drawer__body app-sidebar) .app-drawer__header.app-drawer__header--no-title .app-drawer__close{pointer-events:auto}.app-drawer__panel:has(.app-drawer__body app-sidebar) .app-drawer__body ::ng-deep app-sidebar .app-sidebar__head[data-app-sidebar-head]{padding-inline-end:2.35rem!important;padding-inline-start:.3rem!important;box-sizing:border-box}@keyframes app-drawer-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes app-drawer-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes app-drawer-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.app-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1rem 1rem .75rem;flex:0 0 auto;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.app-drawer__header--no-title{justify-content:flex-end;padding-top:.65rem;padding-bottom:.65rem}.app-drawer__title{margin:0;font-size:1.05rem;font-weight:600;color:var(--app-color-text-primary, #1a2f45);line-height:1.3;flex:1;min-width:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.app-drawer__close{flex:0 0 auto;width:2.35rem;height:2.35rem;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:none;background:color-mix(in srgb,var(--app-color-text-primary) 6%,transparent);color:var(--app-color-text-secondary, #5a7fa3);cursor:pointer;margin:0;padding:0;user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important}.app-drawer__close:hover{background:var(--app-color-hover-bg, rgba(43, 127, 217, .08))}.app-drawer__close:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:2px}.app-drawer__close-x{font-size:1.35rem;line-height:1;user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;pointer-events:none}.app-drawer__body{flex:1 1 auto;min-height:0;overflow:auto;padding:1rem;color:var(--app-color-text-primary, #1a2f45);font-size:.9rem;line-height:1.5;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.app-drawer__body::-webkit-scrollbar{width:4px;height:4px}.app-drawer__body::-webkit-scrollbar-track{background:transparent}.app-drawer__body::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.app-drawer__body::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}.app-drawer__body:has(app-sidebar){padding:.35rem .12rem .45rem;overflow:hidden!important;display:flex!important;flex-direction:column!important}.app-drawer__body:has(app-sidebar)>*{flex:1 1 auto;min-height:0;min-width:0;align-self:stretch;display:flex;flex-direction:column}.app-drawer__body:has(app-sidebar) app-sidebar{flex:1 1 auto;min-height:0;min-width:0;align-self:stretch;width:100%}.app-drawer__body ::ng-deep app-sidebar .app-sidebar{border-right:0;padding:.38rem .1rem .45rem}.app-drawer__body ::ng-deep app-sidebar .app-sidebar__toolbar app-shell-sidebar-toggle{display:none!important}.app-drawer__body ::ng-deep app-sidebar app-menu-list .menu-list__option{margin-left:.12rem;margin-right:.12rem;padding:.5rem .36rem}.app-drawer__body ::ng-deep app-sidebar app-menu-list .menu-list__submenu-chevron{padding-left:.18rem}.app-drawer__body ::ng-deep app-sidebar app-menu-list .menu-list__label{padding-top:.72rem!important}.app-drawer__body ::ng-deep app-sidebar app-menu-list .menu-list__icon{transform:translateY(.1875rem)}.app-drawer__footer{flex:0 0 auto;padding:.75rem 1rem 1rem;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.app-drawer__footer:empty{display:none;padding:0;border:none}@media(prefers-reduced-motion:reduce){.app-drawer__backdrop{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9979
10262
|
}
|
|
9980
10263
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DrawerComponent, decorators: [{
|
|
9981
10264
|
type: Component,
|
|
9982
10265
|
args: [{ selector: 'app-drawer', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
9983
10266
|
class: 'app-drawer-host',
|
|
9984
10267
|
'[class.app-drawer-host--open]': 'open',
|
|
9985
|
-
}, template: "@if (open) {\r\n <div\r\n class=\"app-drawer__backdrop\"\r\n role=\"presentation\"\r\n tabindex=\"-1\"\r\n (click)=\"onBackdropClick()\"\r\n ></div>\r\n\r\n <aside\r\n #panelRef\r\n class=\"app-drawer__panel\"\r\n [ngClass]=\"panelClasses\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n [attr.aria-labelledby]=\"drawerHeading.trim() ? titleId : null\"\r\n tabindex=\"-1\"\r\n (keydown)=\"onPanelKeydown($event)\"\r\n >\r\n <header\r\n class=\"app-drawer__header\"\r\n [class.app-drawer__header--no-title]=\"!drawerHeading.trim()\"\r\n >\r\n @if (drawerHeading.trim()) {\r\n <h2 class=\"app-drawer__title\" [id]=\"titleId\">{{ drawerHeading }}</h2>\r\n }\r\n @if (showCloseButton) {\r\n <button\r\n type=\"button\"\r\n class=\"app-drawer__close\"\r\n aria-label=\"Fechar painel\"\r\n (click)=\"onCloseClick()\"\r\n >\r\n <span class=\"app-drawer__close-x\" aria-hidden=\"true\">×</span>\r\n </button>\r\n }\r\n </header>\r\n\r\n <div class=\"app-drawer__body\">\r\n <ng-content />\r\n </div>\r\n\r\n <footer class=\"app-drawer__footer\">\r\n <ng-content select=\"[appDrawerFooter]\" />\r\n </footer>\r\n </aside>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.app-drawer__backdrop{position:fixed;inset:0;z-index:var(--app-z-drawer-backdrop, 1100);background:#1a2f456b;backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05);animation:app-drawer-backdrop-in .22s ease-out both}@keyframes app-drawer-backdrop-in{0%{backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}to{backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05)}}.app-drawer__panel{position:fixed;z-index:var(--app-z-drawer-panel, 1101);display:flex;flex-direction:column;max-width:100vw;max-height:100vh;box-sizing:border-box;background:var(--app-color-surface, #fff);border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));box-shadow:-4px 0 24px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07));outline:none}.app-drawer__panel--side-right{top:0;right:0;bottom:0;animation:app-drawer-slide-in-right .24s ease-out}.app-drawer__panel--side-left{top:0;left:0;bottom:0;animation:app-drawer-slide-in-left .24s ease-out;box-shadow:4px 0 24px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07));border-right:none}.app-drawer__panel--side-bottom{inset:auto 0 0;max-height:min(88vh,32rem);border-radius:8px 8px 0 0;animation:app-drawer-slide-in-bottom .24s ease-out}.app-drawer__panel--side-right.app-drawer__panel--size-sm,.app-drawer__panel--side-left.app-drawer__panel--size-sm{width:min(18rem,90vw)}.app-drawer__panel--side-right.app-drawer__panel--size-md,.app-drawer__panel--side-left.app-drawer__panel--size-md{width:min(24rem,90vw)}.app-drawer__panel--side-right.app-drawer__panel--size-lg,.app-drawer__panel--side-left.app-drawer__panel--size-lg{width:min(32rem,90vw)}.app-drawer__panel--side-bottom.app-drawer__panel--size-sm{min-height:12rem}.app-drawer__panel--side-bottom.app-drawer__panel--size-md{min-height:16rem}.app-drawer__panel--side-bottom.app-drawer__panel--size-lg{min-height:22rem}.app-drawer__panel:has(.app-drawer__body app-sidebar) .app-drawer__header.app-drawer__header--no-title{position:absolute;z-index:2;inset:.38rem .38rem auto auto;width:auto;max-width:none;padding:0;margin:0;pointer-events:none;flex:0 0 auto}.app-drawer__panel:has(.app-drawer__body app-sidebar) .app-drawer__header.app-drawer__header--no-title .app-drawer__close{pointer-events:auto}.app-drawer__panel:has(.app-drawer__body app-sidebar) .app-drawer__body ::ng-deep app-sidebar .app-sidebar__head[data-app-sidebar-head]{padding-inline-end:2.35rem!important;padding-inline-start:.3rem!important;box-sizing:border-box}@keyframes app-drawer-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes app-drawer-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes app-drawer-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.app-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1rem 1rem .75rem;flex:0 0 auto;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.app-drawer__header--no-title{justify-content:flex-end;padding-top:.65rem;padding-bottom:.65rem}.app-drawer__title{margin:0;font-size:1.05rem;font-weight:600;color:var(--app-color-text-primary, #1a2f45);line-height:1.3;flex:1;min-width:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.app-drawer__close{flex:0 0 auto;width:2.35rem;height:2.35rem;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:none;background:color-mix(in srgb,var(--app-color-text-primary) 6%,transparent);color:var(--app-color-text-secondary, #5a7fa3);cursor:pointer;margin:0;padding:0;user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important}.app-drawer__close:hover{background:var(--app-color-hover-bg, rgba(43, 127, 217, .08))}.app-drawer__close:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:2px}.app-drawer__close-x{font-size:1.35rem;line-height:1;user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;pointer-events:none}.app-drawer__body{flex:1 1 auto;min-height:0;overflow:auto;padding:1rem;color:var(--app-color-text-primary, #1a2f45);font-size:.9rem;line-height:1.5;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.app-drawer__body::-webkit-scrollbar{width:4px;height:4px}.app-drawer__body::-webkit-scrollbar-track{background:transparent}.app-drawer__body::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.app-drawer__body::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}.app-drawer__body:has(app-sidebar){padding:.35rem .12rem .45rem;overflow:hidden!important;display:flex!important;flex-direction:column!important}.app-drawer__body:has(app-sidebar)>*{flex:1 1 auto;min-height:0;min-width:0;align-self:stretch;display:flex;flex-direction:column}.app-drawer__body:has(app-sidebar) app-sidebar{flex:1 1 auto;min-height:0;min-width:0;align-self:stretch;width:100%}.app-drawer__body ::ng-deep app-sidebar .app-sidebar{border-right:0;padding:.38rem .1rem .45rem}.app-drawer__body ::ng-deep app-sidebar .app-sidebar__toolbar app-shell-sidebar-toggle{display:none!important}.app-drawer__body ::ng-deep app-sidebar app-menu-list .menu-list__option{margin-left:.12rem;margin-right:.12rem;padding:.
|
|
10268
|
+
}, template: "@if (open) {\r\n <div\r\n class=\"app-drawer__backdrop\"\r\n role=\"presentation\"\r\n tabindex=\"-1\"\r\n (click)=\"onBackdropClick()\"\r\n ></div>\r\n\r\n <aside\r\n #panelRef\r\n class=\"app-drawer__panel\"\r\n [ngClass]=\"panelClasses\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n [attr.aria-labelledby]=\"drawerHeading.trim() ? titleId : null\"\r\n tabindex=\"-1\"\r\n (keydown)=\"onPanelKeydown($event)\"\r\n >\r\n <header\r\n class=\"app-drawer__header\"\r\n [class.app-drawer__header--no-title]=\"!drawerHeading.trim()\"\r\n >\r\n @if (drawerHeading.trim()) {\r\n <h2 class=\"app-drawer__title\" [id]=\"titleId\">{{ drawerHeading }}</h2>\r\n }\r\n @if (showCloseButton) {\r\n <button\r\n type=\"button\"\r\n class=\"app-drawer__close\"\r\n aria-label=\"Fechar painel\"\r\n (click)=\"onCloseClick()\"\r\n >\r\n <span class=\"app-drawer__close-x\" aria-hidden=\"true\">×</span>\r\n </button>\r\n }\r\n </header>\r\n\r\n <div class=\"app-drawer__body\">\r\n <ng-content />\r\n </div>\r\n\r\n <footer class=\"app-drawer__footer\">\r\n <ng-content select=\"[appDrawerFooter]\" />\r\n </footer>\r\n </aside>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.app-drawer__backdrop{position:fixed;inset:0;z-index:var(--app-z-drawer-backdrop, 1100);background:#1a2f456b;backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05);animation:app-drawer-backdrop-in .22s ease-out both}@keyframes app-drawer-backdrop-in{0%{backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}to{backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05)}}.app-drawer__panel{position:fixed;z-index:var(--app-z-drawer-panel, 1101);display:flex;flex-direction:column;max-width:100vw;max-height:100vh;box-sizing:border-box;background:var(--app-color-surface, #fff);border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));box-shadow:-4px 0 24px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07));outline:none}.app-drawer__panel--side-right{top:0;right:0;bottom:0;animation:app-drawer-slide-in-right .24s ease-out}.app-drawer__panel--side-left{top:0;left:0;bottom:0;animation:app-drawer-slide-in-left .24s ease-out;box-shadow:4px 0 24px var(--app-color-elevated-shadow, rgba(43, 127, 217, .07));border-right:none}.app-drawer__panel--side-bottom{inset:auto 0 0;max-height:min(88vh,32rem);border-radius:8px 8px 0 0;animation:app-drawer-slide-in-bottom .24s ease-out}.app-drawer__panel--side-right.app-drawer__panel--size-sm,.app-drawer__panel--side-left.app-drawer__panel--size-sm{width:min(18rem,90vw)}.app-drawer__panel--side-right.app-drawer__panel--size-md,.app-drawer__panel--side-left.app-drawer__panel--size-md{width:min(24rem,90vw)}.app-drawer__panel--side-right.app-drawer__panel--size-lg,.app-drawer__panel--side-left.app-drawer__panel--size-lg{width:min(32rem,90vw)}.app-drawer__panel--side-bottom.app-drawer__panel--size-sm{min-height:12rem}.app-drawer__panel--side-bottom.app-drawer__panel--size-md{min-height:16rem}.app-drawer__panel--side-bottom.app-drawer__panel--size-lg{min-height:22rem}.app-drawer__panel:has(.app-drawer__body app-sidebar) .app-drawer__header.app-drawer__header--no-title{position:absolute;z-index:2;inset:.38rem .38rem auto auto;width:auto;max-width:none;padding:0;margin:0;pointer-events:none;flex:0 0 auto}.app-drawer__panel:has(.app-drawer__body app-sidebar) .app-drawer__header.app-drawer__header--no-title .app-drawer__close{pointer-events:auto}.app-drawer__panel:has(.app-drawer__body app-sidebar) .app-drawer__body ::ng-deep app-sidebar .app-sidebar__head[data-app-sidebar-head]{padding-inline-end:2.35rem!important;padding-inline-start:.3rem!important;box-sizing:border-box}@keyframes app-drawer-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes app-drawer-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes app-drawer-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.app-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1rem 1rem .75rem;flex:0 0 auto;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.app-drawer__header--no-title{justify-content:flex-end;padding-top:.65rem;padding-bottom:.65rem}.app-drawer__title{margin:0;font-size:1.05rem;font-weight:600;color:var(--app-color-text-primary, #1a2f45);line-height:1.3;flex:1;min-width:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.app-drawer__close{flex:0 0 auto;width:2.35rem;height:2.35rem;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:none;background:color-mix(in srgb,var(--app-color-text-primary) 6%,transparent);color:var(--app-color-text-secondary, #5a7fa3);cursor:pointer;margin:0;padding:0;user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important}.app-drawer__close:hover{background:var(--app-color-hover-bg, rgba(43, 127, 217, .08))}.app-drawer__close:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:2px}.app-drawer__close-x{font-size:1.35rem;line-height:1;user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;pointer-events:none}.app-drawer__body{flex:1 1 auto;min-height:0;overflow:auto;padding:1rem;color:var(--app-color-text-primary, #1a2f45);font-size:.9rem;line-height:1.5;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.app-drawer__body::-webkit-scrollbar{width:4px;height:4px}.app-drawer__body::-webkit-scrollbar-track{background:transparent}.app-drawer__body::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.app-drawer__body::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}.app-drawer__body:has(app-sidebar){padding:.35rem .12rem .45rem;overflow:hidden!important;display:flex!important;flex-direction:column!important}.app-drawer__body:has(app-sidebar)>*{flex:1 1 auto;min-height:0;min-width:0;align-self:stretch;display:flex;flex-direction:column}.app-drawer__body:has(app-sidebar) app-sidebar{flex:1 1 auto;min-height:0;min-width:0;align-self:stretch;width:100%}.app-drawer__body ::ng-deep app-sidebar .app-sidebar{border-right:0;padding:.38rem .1rem .45rem}.app-drawer__body ::ng-deep app-sidebar .app-sidebar__toolbar app-shell-sidebar-toggle{display:none!important}.app-drawer__body ::ng-deep app-sidebar app-menu-list .menu-list__option{margin-left:.12rem;margin-right:.12rem;padding:.5rem .36rem}.app-drawer__body ::ng-deep app-sidebar app-menu-list .menu-list__submenu-chevron{padding-left:.18rem}.app-drawer__body ::ng-deep app-sidebar app-menu-list .menu-list__label{padding-top:.72rem!important}.app-drawer__body ::ng-deep app-sidebar app-menu-list .menu-list__icon{transform:translateY(.1875rem)}.app-drawer__footer{flex:0 0 auto;padding:.75rem 1rem 1rem;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09));display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.app-drawer__footer:empty{display:none;padding:0;border:none}@media(prefers-reduced-motion:reduce){.app-drawer__backdrop{animation:none}}\n"] }]
|
|
9986
10269
|
}], ctorParameters: () => [], propDecorators: { open: [{
|
|
9987
10270
|
type: Input,
|
|
9988
10271
|
args: [{ transform: booleanAttribute }]
|
|
@@ -10601,6 +10884,13 @@ class AppShellComponent {
|
|
|
10601
10884
|
const next = state.matches;
|
|
10602
10885
|
if (next !== this.isMobileLayout) {
|
|
10603
10886
|
this.isMobileLayout = next;
|
|
10887
|
+
/**
|
|
10888
|
+
* Modo «rail» (só ícones) só faz sentido em desktop. No telemóvel o drawer deve mostrar
|
|
10889
|
+
* rótulos — repõe `sidebarCollapsed` para o pai não manter `compressText` na lista.
|
|
10890
|
+
*/
|
|
10891
|
+
if (next && this.sidebarCollapsed) {
|
|
10892
|
+
this.sidebarCollapsedChange.emit(false);
|
|
10893
|
+
}
|
|
10604
10894
|
if (!next && this.mobileNavOpen) {
|
|
10605
10895
|
this.emitMobileNavOpen(false);
|
|
10606
10896
|
}
|
|
@@ -10620,7 +10910,11 @@ class AppShellComponent {
|
|
|
10620
10910
|
this.cdr.markForCheck();
|
|
10621
10911
|
}
|
|
10622
10912
|
toggleMobileNav() {
|
|
10623
|
-
|
|
10913
|
+
const next = !this.mobileNavOpen;
|
|
10914
|
+
if (next && this.sidebarCollapsed) {
|
|
10915
|
+
this.sidebarCollapsedChange.emit(false);
|
|
10916
|
+
}
|
|
10917
|
+
this.emitMobileNavOpen(next);
|
|
10624
10918
|
}
|
|
10625
10919
|
toggleSidebarCollapsed() {
|
|
10626
10920
|
this.sidebarCollapsedChange.emit(!this.sidebarCollapsed);
|
|
@@ -10675,6 +10969,8 @@ class AppSidebarComponent {
|
|
|
10675
10969
|
this.selectedItemId = null;
|
|
10676
10970
|
/** Modo estreito: só ícones + `compressText` na lista (rótulos via `title` / `aria-label`). */
|
|
10677
10971
|
this.collapsed = false;
|
|
10972
|
+
/** Repassado a {@link MenuListComponent.searchable}: campo de pesquisa na lista da lateral. */
|
|
10973
|
+
this.searchable = false;
|
|
10678
10974
|
/**
|
|
10679
10975
|
* Repassado a {@link MenuListComponent.clickToOpen}: submenus na lateral abrem por **clique** (`true`, omissão)
|
|
10680
10976
|
* ou por **hover** (`false`).
|
|
@@ -10801,11 +11097,11 @@ class AppSidebarComponent {
|
|
|
10801
11097
|
}
|
|
10802
11098
|
}
|
|
10803
11099
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10804
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: AppSidebarComponent, isStandalone: true, selector: "app-sidebar", inputs: { appTheme: { classPropertyName: "appTheme", publicName: "appTheme", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: true, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: false, isRequired: false, transformFunction: null }, selectedItemId: { classPropertyName: "selectedItemId", publicName: "selectedItemId", isSignal: false, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, clickToOpen: { classPropertyName: "clickToOpen", publicName: "clickToOpen", isSignal: false, isRequired: false, transformFunction: null }, groupCollapsible: { classPropertyName: "groupCollapsible", publicName: "groupCollapsible", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, groupDefaultExpansion: { classPropertyName: "groupDefaultExpansion", publicName: "groupDefaultExpansion", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, usesOnChanges: true, ngImport: i0, template: "<nav class=\"app-sidebar app-nav-surface\" [class.app-sidebar--collapsed]=\"collapsed\"\r\n [attr.aria-label]=\"'Navega\u00E7\u00E3o principal'\">\r\n <div class=\"app-sidebar__head\" data-app-sidebar-head=\"\" translate=\"no\">\r\n <div class=\"app-sidebar__brand\"><ng-content select=\"[appSidebarBrand]\" /></div>\r\n <div class=\"app-sidebar__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n </div>\r\n <!-- `cdkScrollable` no elemento nativo que faz overflow \u2014 o CDK reposiciona submenus ao scroll (custom elements como host falhavam). -->\r\n <div class=\"app-sidebar__scroll\" cdkScrollable>\r\n <app-menu-list\r\n class=\"app-sidebar__list\"\r\n [appTheme]=\"appTheme()\"\r\n [items]=\"items\"\r\n [menuId]=\"menuId\"\r\n [dense]=\"collapsed\"\r\n [compressText]=\"listCompressText()\"\r\n [clickToOpen]=\"clickToOpen\"\r\n [groupCollapsible]=\"groupCollapsible\"\r\n [groupDefaultExpansion]=\"groupDefaultExpansion\"\r\n [selectedItemId]=\"selectedItemId\"\r\n (itemSelect)=\"itemSelect.emit($event)\"\r\n />\r\n </div>\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;flex:1 1 auto;align-self:stretch;min-width:0;min-height:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:.65rem .35rem .65rem .5rem;background:var(--app-color-nav-shell-bg);border-right:1px solid var(--app-color-nav-border-subtle)}.app-sidebar--collapsed{padding-left:.5rem;padding-right:.35rem}.app-sidebar__head[data-app-sidebar-head]{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:.35rem;width:100%;min-height:2.35rem;padding:0 .1rem .45rem;padding-inline-start:.85rem!important;box-sizing:border-box;contain:layout;direction:ltr;unicode-bidi:isolate;flex-direction:row!important;justify-content:flex-start!important;direction:ltr!important}.app-sidebar--collapsed .app-sidebar__head[data-app-sidebar-head]{justify-content:center!important;padding-inline-start:.25rem!important;padding-inline-end:.25rem;gap:0}.app-sidebar__brand{order:0;flex:1 1 0%;min-width:0;align-self: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){margin-inline-start:0!important}.app-sidebar--collapsed .app-sidebar__toolbar ::ng-deep [appSidebarToolbar]:not(app-shell-sidebar-toggle)>:not(app-shell-sidebar-toggle){display:none!important}.app-sidebar__scroll{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.app-sidebar__scroll::-webkit-scrollbar{width:4px;height:4px}.app-sidebar__scroll::-webkit-scrollbar-track{background:transparent}.app-sidebar__scroll::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.app-sidebar__scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}.app-sidebar__list{display:block;min-height:0;overflow:visible}@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}: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: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: MenuListComponent, selector: "app-menu-list", inputs: ["appTheme", "items", "menuId", "dense", "nested", "selectedItemId", "compressText", "clickToOpen", "groupCollapsible", "groupDefaultExpansion"], outputs: ["itemSelect", "closeRequest", "submenuBack"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
11100
|
+
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 <div class=\"app-sidebar__head\" data-app-sidebar-head=\"\" translate=\"no\">\r\n <div class=\"app-sidebar__brand\"><ng-content select=\"[appSidebarBrand]\" /></div>\r\n <div class=\"app-sidebar__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n </div>\r\n <!-- `cdkScrollable` no elemento nativo que faz overflow \u2014 o CDK reposiciona submenus ao scroll (custom elements como host falhavam). -->\r\n <div class=\"app-sidebar__scroll\" cdkScrollable>\r\n <app-menu-list\r\n class=\"app-sidebar__list\"\r\n [appTheme]=\"appTheme()\"\r\n [items]=\"items\"\r\n [menuId]=\"menuId\"\r\n [dense]=\"collapsed\"\r\n [compressText]=\"listCompressText()\"\r\n [searchable]=\"searchable\"\r\n [clickToOpen]=\"clickToOpen\"\r\n [groupCollapsible]=\"groupCollapsible\"\r\n [groupDefaultExpansion]=\"groupDefaultExpansion\"\r\n [selectedItemId]=\"selectedItemId\"\r\n (itemSelect)=\"itemSelect.emit($event)\"\r\n />\r\n </div>\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;flex:1 1 auto;align-self:stretch;min-width:0;min-height:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:.65rem .35rem .65rem .5rem;background:var(--app-color-nav-shell-bg);border-right:1px solid var(--app-color-nav-border-subtle)}.app-sidebar--collapsed{padding-left:.5rem;padding-right:.35rem}.app-sidebar__head[data-app-sidebar-head]{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:.35rem;width:100%;min-height:2.35rem;padding:0 .1rem .45rem;padding-inline-start:.85rem!important;box-sizing:border-box;contain:layout;direction:ltr;unicode-bidi:isolate;flex-direction:row!important;justify-content:flex-start!important;direction:ltr!important}.app-sidebar--collapsed .app-sidebar__head[data-app-sidebar-head]{justify-content:center!important;padding-inline-start:.25rem!important;padding-inline-end:.25rem;gap:0}.app-sidebar__brand{order:0;flex:1 1 0%;min-width:0;align-self: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){margin-inline-start:0!important}.app-sidebar--collapsed .app-sidebar__toolbar ::ng-deep [appSidebarToolbar]:not(app-shell-sidebar-toggle)>:not(app-shell-sidebar-toggle){display:none!important}.app-sidebar__scroll{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.app-sidebar__scroll::-webkit-scrollbar{width:4px;height:4px}.app-sidebar__scroll::-webkit-scrollbar-track{background:transparent}.app-sidebar__scroll::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.app-sidebar__scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}.app-sidebar__list{display:block;min-height:0;overflow:visible}@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}: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: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: MenuListComponent, selector: "app-menu-list", inputs: ["appTheme", "items", "menuId", "dense", "nested", "selectedItemId", "compressText", "clickToOpen", "groupCollapsible", "groupDefaultExpansion", "searchable", "searchPlaceholder"], outputs: ["itemSelect", "closeRequest", "submenuBack"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10805
11101
|
}
|
|
10806
11102
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppSidebarComponent, decorators: [{
|
|
10807
11103
|
type: Component,
|
|
10808
|
-
args: [{ selector: 'app-sidebar', imports: [CdkScrollable, MenuListComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"app-sidebar app-nav-surface\" [class.app-sidebar--collapsed]=\"collapsed\"\r\n [attr.aria-label]=\"'Navega\u00E7\u00E3o principal'\">\r\n <div class=\"app-sidebar__head\" data-app-sidebar-head=\"\" translate=\"no\">\r\n <div class=\"app-sidebar__brand\"><ng-content select=\"[appSidebarBrand]\" /></div>\r\n <div class=\"app-sidebar__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n </div>\r\n <!-- `cdkScrollable` no elemento nativo que faz overflow \u2014 o CDK reposiciona submenus ao scroll (custom elements como host falhavam). -->\r\n <div class=\"app-sidebar__scroll\" cdkScrollable>\r\n <app-menu-list\r\n class=\"app-sidebar__list\"\r\n [appTheme]=\"appTheme()\"\r\n [items]=\"items\"\r\n [menuId]=\"menuId\"\r\n [dense]=\"collapsed\"\r\n [compressText]=\"listCompressText()\"\r\n [clickToOpen]=\"clickToOpen\"\r\n [groupCollapsible]=\"groupCollapsible\"\r\n [groupDefaultExpansion]=\"groupDefaultExpansion\"\r\n [selectedItemId]=\"selectedItemId\"\r\n (itemSelect)=\"itemSelect.emit($event)\"\r\n />\r\n </div>\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;flex:1 1 auto;align-self:stretch;min-width:0;min-height:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:.65rem .35rem .65rem .5rem;background:var(--app-color-nav-shell-bg);border-right:1px solid var(--app-color-nav-border-subtle)}.app-sidebar--collapsed{padding-left:.5rem;padding-right:.35rem}.app-sidebar__head[data-app-sidebar-head]{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:.35rem;width:100%;min-height:2.35rem;padding:0 .1rem .45rem;padding-inline-start:.85rem!important;box-sizing:border-box;contain:layout;direction:ltr;unicode-bidi:isolate;flex-direction:row!important;justify-content:flex-start!important;direction:ltr!important}.app-sidebar--collapsed .app-sidebar__head[data-app-sidebar-head]{justify-content:center!important;padding-inline-start:.25rem!important;padding-inline-end:.25rem;gap:0}.app-sidebar__brand{order:0;flex:1 1 0%;min-width:0;align-self: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){margin-inline-start:0!important}.app-sidebar--collapsed .app-sidebar__toolbar ::ng-deep [appSidebarToolbar]:not(app-shell-sidebar-toggle)>:not(app-shell-sidebar-toggle){display:none!important}.app-sidebar__scroll{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.app-sidebar__scroll::-webkit-scrollbar{width:4px;height:4px}.app-sidebar__scroll::-webkit-scrollbar-track{background:transparent}.app-sidebar__scroll::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.app-sidebar__scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}.app-sidebar__list{display:block;min-height:0;overflow:visible}@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}: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"] }]
|
|
11104
|
+
args: [{ selector: 'app-sidebar', imports: [CdkScrollable, MenuListComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"app-sidebar app-nav-surface\" [class.app-sidebar--collapsed]=\"collapsed\"\r\n [attr.aria-label]=\"'Navega\u00E7\u00E3o principal'\">\r\n <div class=\"app-sidebar__head\" data-app-sidebar-head=\"\" translate=\"no\">\r\n <div class=\"app-sidebar__brand\"><ng-content select=\"[appSidebarBrand]\" /></div>\r\n <div class=\"app-sidebar__toolbar\"><ng-content select=\"[appSidebarToolbar]\" /></div>\r\n </div>\r\n <!-- `cdkScrollable` no elemento nativo que faz overflow \u2014 o CDK reposiciona submenus ao scroll (custom elements como host falhavam). -->\r\n <div class=\"app-sidebar__scroll\" cdkScrollable>\r\n <app-menu-list\r\n class=\"app-sidebar__list\"\r\n [appTheme]=\"appTheme()\"\r\n [items]=\"items\"\r\n [menuId]=\"menuId\"\r\n [dense]=\"collapsed\"\r\n [compressText]=\"listCompressText()\"\r\n [searchable]=\"searchable\"\r\n [clickToOpen]=\"clickToOpen\"\r\n [groupCollapsible]=\"groupCollapsible\"\r\n [groupDefaultExpansion]=\"groupDefaultExpansion\"\r\n [selectedItemId]=\"selectedItemId\"\r\n (itemSelect)=\"itemSelect.emit($event)\"\r\n />\r\n </div>\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;flex:1 1 auto;align-self:stretch;min-width:0;min-height:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.app-sidebar{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:.65rem .35rem .65rem .5rem;background:var(--app-color-nav-shell-bg);border-right:1px solid var(--app-color-nav-border-subtle)}.app-sidebar--collapsed{padding-left:.5rem;padding-right:.35rem}.app-sidebar__head[data-app-sidebar-head]{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:.35rem;width:100%;min-height:2.35rem;padding:0 .1rem .45rem;padding-inline-start:.85rem!important;box-sizing:border-box;contain:layout;direction:ltr;unicode-bidi:isolate;flex-direction:row!important;justify-content:flex-start!important;direction:ltr!important}.app-sidebar--collapsed .app-sidebar__head[data-app-sidebar-head]{justify-content:center!important;padding-inline-start:.25rem!important;padding-inline-end:.25rem;gap:0}.app-sidebar__brand{order:0;flex:1 1 0%;min-width:0;align-self: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){margin-inline-start:0!important}.app-sidebar--collapsed .app-sidebar__toolbar ::ng-deep [appSidebarToolbar]:not(app-shell-sidebar-toggle)>:not(app-shell-sidebar-toggle){display:none!important}.app-sidebar__scroll{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 34%,transparent) transparent}.app-sidebar__scroll::-webkit-scrollbar{width:4px;height:4px}.app-sidebar__scroll::-webkit-scrollbar-track{background:transparent}.app-sidebar__scroll::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 40%,transparent)}.app-sidebar__scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 55%,transparent)}.app-sidebar__list{display:block;min-height:0;overflow:visible}@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}: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"] }]
|
|
10809
11105
|
}], ctorParameters: () => [], propDecorators: { appTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTheme", required: false }] }], items: [{
|
|
10810
11106
|
type: Input,
|
|
10811
11107
|
args: [{ required: true }]
|
|
@@ -10816,6 +11112,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
10816
11112
|
}], collapsed: [{
|
|
10817
11113
|
type: Input,
|
|
10818
11114
|
args: [{ transform: booleanAttribute }]
|
|
11115
|
+
}], searchable: [{
|
|
11116
|
+
type: Input,
|
|
11117
|
+
args: [{ transform: booleanAttribute }]
|
|
10819
11118
|
}], clickToOpen: [{
|
|
10820
11119
|
type: Input
|
|
10821
11120
|
}], groupCollapsible: [{
|