structra-ui 0.2.86 → 0.2.88
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 +10 -10
- package/fesm2022/structra-ui.mjs.map +1 -1
- package/package.json +1 -1
package/fesm2022/structra-ui.mjs
CHANGED
|
@@ -3803,11 +3803,11 @@ class BaseFieldComponent {
|
|
|
3803
3803
|
this.contextMenuSelect.emit(id);
|
|
3804
3804
|
}
|
|
3805
3805
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3806
|
-
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", hint: "hint", hintId: "hintId", required: "required", showRequiredMark: "showRequiredMark", invalid: "invalid", invalidThemed: ["invalidThemed", "invalidThemed", booleanAttribute], filled: "filled", labelAlwaysFloated: ["labelAlwaysFloated", "labelAlwaysFloated", booleanAttribute], 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--label-always-top]=\"labelAlwaysFloated\"\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\" [class.base-field__prefix--unused]=\"loading\">\n @if (!loading) {\n <ng-content select=\"[appFieldPrefix]\" />\n }\n @if (showFaTpl && !loading) {\n <i [attr.class]=\"prefixIconClassTpl\" 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\" [size]=\"size\" />\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 @if (!loading && showHintTpl) {\n <p class=\"base-field__hint\" [id]=\"hintId || null\">{{ hint }}</p>\n }\n</div>\n", styles: ["@charset \"UTF-8\";@keyframes structraNativeAutofillStart{0%{opacity:1}to{opacity:1}}: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;font-size:1rem;line-height:1.35}.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--unused{display:none!important;padding:0!important;width:0;min-width:0;overflow:hidden}.base-field__prefix-icon{display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:1rem;line-height:1;margin:0;color:var(--ui-field-float-prefix-color)}.base-field__prefix-icon:before{line-height:1}.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-focus-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;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__clear:hover{background:var(--app-color-prefix-hover-bg, rgba(90, 127, 163, .15));color:var(--ui-field-float-label-focus-color)}.base-field__clear:focus,.base-field__clear:focus-visible{outline:none}.base-field__clear{min-width:2rem;min-height:2rem;line-height:0}.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,.base-field--invalid .base-field__prefix-icon:before,.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--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__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;margin:0;padding:0;transform:translate3d(0,calc((1.8rem + 1.35em)/2 - .37rem - .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:not(.base-field--readonly) .base-field__box:focus-within .base-field__float-label{transform:translateZ(0) scale(.75);font-weight:var(--field-label-weight, var(--structra-label-weight))}.base-field:not(.base-field--readonly):not(.base-field--invalid) .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-float-label-focus-color)}.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within .base-field__float-label{transform:translateZ(0) scale(.75);font-weight:var(--field-label-weight, var(--structra-label-weight));color:var(--ui-field-readonly-label-top-color)}.base-field--filled .base-field__float-label,.base-field--label-always-top .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__box:has(.base-field__control :where(input,textarea):-webkit-autofill) .base-field__float-label,.base-field__box:has(.base-field__control :where(input,textarea):autofill) .base-field__float-label,.base-field__box:has(.base-field__control :where(input,textarea):not(:placeholder-shown)) .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,.base-field--invalid.base-field--filled .base-field__float-label,.base-field--invalid.base-field--label-always-top .base-field__float-label,.base-field--invalid .base-field__box:focus-within .base-field__float-label,.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--label-always-top .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__box:has(.base-field__control :where(input,textarea):-webkit-autofill) .base-field__float-label,.base-field--invalid .base-field__box:has(.base-field__control :where(input,textarea):autofill) .base-field__float-label,.base-field--invalid .base-field__box:has(.base-field__control :where(input,textarea):not(:placeholder-shown)) .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.base-field--label-always-top .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__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}.base-field__hint{margin:.28rem 0 0;padding:0 .15rem;font-size:.72rem;line-height:1.35;font-weight:var(--field-helper-weight, var(--structra-body-weight));color:var(--app-color-text-muted, var(--ui-field-float-prefix-color, #5c6b7a));user-select:none;-webkit-user-select:none}.base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:first-line,.base-field__control ::ng-deep :where(input,textarea):autofill,.base-field__control ::ng-deep :where(input,textarea):autofill:first-line{font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%}.base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown),.base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown):first-line{font-size:var(--structra-field-input-font-size, 1rem)!important;line-height:var(--structra-field-input-line-height, 1.35)!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%}.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed,.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed:first-line,.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-selected,.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-selected:first-line{font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%}@supports (-webkit-appearance: none){.base-field .base-field__control ::ng-deep :where(input,textarea):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible),.base-field .base-field__control ::ng-deep :where(input,textarea):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-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(--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:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible),.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-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(--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):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible),.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-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-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):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible),.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;caret-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 .base-field__control ::ng-deep :where(input,textarea):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible),.base-field .base-field__control ::ng-deep :where(input,textarea):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-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(--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:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible),.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-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(--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):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible),.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-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-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):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible),.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;caret-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 .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed,.base-field .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed:first-line{font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-webkit-text-fill-color:var(--ui-field-float-input-text)!important}.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed:first-line{font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-webkit-text-fill-color:var(--ui-field-readonly-input-text)!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;line-height:1.2;transform:translate3d(0,.5059375rem,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,.base-field--size-sm.base-field--label-always-top .base-field__float-label{transform:translateZ(0) scale(.75)}.base-field--size-sm .base-field__box:has(.base-field__control :where(input,textarea):-webkit-autofill) .base-field__float-label,.base-field--size-sm .base-field__box:has(.base-field__control :where(input,textarea):autofill) .base-field__float-label,.base-field--size-sm .base-field__box:has(.base-field__control :where(input,textarea):not(:placeholder-shown)) .base-field__float-label{transform:translateZ(0) scale(.75)}.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:first-line,.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):autofill:first-line,.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed,.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed:first-line{font-size:13px!important;line-height:16.25px!important}.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown),.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown):first-line{font-size:var(--structra-field-input-font-size, .8125rem)!important;line-height:var(--structra-field-input-line-height, 1.25)!important}.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,.base-field--size-sm .base-field__control ::ng-deep .date-field__input,.base-field--size-sm .base-field__control ::ng-deep .color-picker-field__input{padding:1.05rem .45rem .28rem;--structra-field-input-font-size: .8125rem;--structra-field-input-line-height: 1.25;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height)}.base-field--size-sm .base-field__control ::ng-deep .date-field__input.mdc-text-field__input,.base-field--size-sm .base-field__control ::ng-deep .date-field__input.mat-mdc-input-element{min-height:2.345625rem!important}.base-field--size-sm .base-field__control ::ng-deep .date-field__display{left:.45rem;right:.45rem;font-size:.8125rem;line-height:1.25}.base-field--size-sm .base-field__control ::ng-deep .select-field__origin,.base-field--size-sm .base-field__control ::ng-deep .select-field__value-btn,.base-field--size-sm .base-field__control ::ng-deep .multiselect-field__origin,.base-field--size-sm .base-field__control ::ng-deep .multiselect-field__value-btn,.base-field--size-sm .base-field__control ::ng-deep .dropdown-search-field__origin,.base-field--size-sm .base-field__control ::ng-deep .dropdown-search-field__input{min-height:2.345625rem}.base-field--size-sm .base-field__control ::ng-deep .select-field__value-btn,.base-field--size-sm .base-field__control ::ng-deep .multiselect-field__value-btn{padding:1.05rem .28rem .28rem .45rem;font-size:.8125rem;line-height:1.25}.base-field--size-sm .base-field__control ::ng-deep .dropdown-search-field__input{padding:1.05rem .45rem .28rem;font-size:.8125rem;line-height:1.25}.base-field--size-sm .base-field__control ::ng-deep .select-field__chevron-btn,.base-field--size-sm .base-field__control ::ng-deep .multiselect-field__chevron-btn,.base-field--size-sm .base-field__control ::ng-deep .dropdown-search-field__chevron-btn{width:1.65rem;height:1.65rem;min-width:1.65rem;min-height:1.65rem;margin:0 .06rem}.base-field--size-sm .base-field__control ::ng-deep .select-field__chevron-icon,.base-field--size-sm .base-field__control ::ng-deep .multiselect-field__chevron-icon,.base-field--size-sm .base-field__control ::ng-deep .dropdown-search-field__chevron-icon{font-size:.72rem;padding-top:1px}.base-field--size-sm .base-field__control ::ng-deep .multiselect-field__trigger-suffix{padding-top:2px}.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;line-height:1.2;transform:translate3d(0,.6846875rem,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,.base-field--size-lg.base-field--label-always-top .base-field__float-label{transform:translateZ(0) scale(.75)}.base-field--size-lg .base-field__box:has(.base-field__control :where(input,textarea):-webkit-autofill) .base-field__float-label,.base-field--size-lg .base-field__box:has(.base-field__control :where(input,textarea):autofill) .base-field__float-label,.base-field--size-lg .base-field__box:has(.base-field__control :where(input,textarea):not(:placeholder-shown)) .base-field__float-label{transform:translateZ(0) scale(.75)}.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:first-line,.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):autofill:first-line,.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed,.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed:first-line{font-size:17px!important;line-height:23.8px!important}.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown),.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown):first-line{font-size:var(--structra-field-input-font-size, 1.0625rem)!important;line-height:var(--structra-field-input-line-height, 1.4)!important}.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,.base-field--size-lg .base-field__control ::ng-deep .date-field__input,.base-field--size-lg .base-field__control ::ng-deep .color-picker-field__input{padding:1.55rem .9rem .5rem;--structra-field-input-font-size: 1.0625rem;--structra-field-input-line-height: 1.4;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height)}.base-field--size-lg .base-field__control ::ng-deep .date-field__input.mdc-text-field__input,.base-field--size-lg .base-field__control ::ng-deep .date-field__input.mat-mdc-input-element{min-height:3.5375rem!important}.base-field--size-lg .base-field__control ::ng-deep .date-field__display{left:.9rem;right:.9rem;font-size:1.0625rem;line-height:1.4}.base-field--size-lg .base-field__control ::ng-deep .select-field__origin,.base-field--size-lg .base-field__control ::ng-deep .select-field__value-btn,.base-field--size-lg .base-field__control ::ng-deep .multiselect-field__origin,.base-field--size-lg .base-field__control ::ng-deep .multiselect-field__value-btn,.base-field--size-lg .base-field__control ::ng-deep .dropdown-search-field__origin,.base-field--size-lg .base-field__control ::ng-deep .dropdown-search-field__input{min-height:3.5375rem}.base-field--size-lg .base-field__control ::ng-deep .select-field__value-btn,.base-field--size-lg .base-field__control ::ng-deep .multiselect-field__value-btn{padding:1.55rem .38rem .5rem .9rem;font-size:1.0625rem;line-height:1.4}.base-field--size-lg .base-field__control ::ng-deep .dropdown-search-field__input{padding:1.55rem .9rem .5rem;font-size:1.0625rem;line-height:1.4}.base-field--size-lg .base-field__control ::ng-deep .select-field__chevron-btn,.base-field--size-lg .base-field__control ::ng-deep .multiselect-field__chevron-btn,.base-field--size-lg .base-field__control ::ng-deep .dropdown-search-field__chevron-btn{width:2.35rem;height:2.35rem;min-width:2.35rem;min-height:2.35rem;margin:0 .12rem}.base-field--size-lg .base-field__control ::ng-deep .select-field__chevron-icon,.base-field--size-lg .base-field__control ::ng-deep .multiselect-field__chevron-icon,.base-field--size-lg .base-field__control ::ng-deep .dropdown-search-field__chevron-icon{font-size:.88rem}@media(max-width:768px),(hover:none)and (pointer:coarse){.base-field__control ::ng-deep :where(input,textarea,select){--structra-field-input-font-size: 16px;--structra-field-input-line-height: 1.35;font-size:16px!important;line-height:21.6px!important;-webkit-text-size-adjust:100%!important}.base-field__control ::ng-deep :where(input,textarea):first-line{font-size:16px!important;line-height:21.6px!important;-webkit-text-size-adjust:100%!important}.base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:first-line,.base-field__control ::ng-deep :where(input,textarea):autofill,.base-field__control ::ng-deep :where(input,textarea):autofill:first-line,.base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown),.base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown):first-line,.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed,.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed:first-line,.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-selected,.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-selected:first-line{font-size:16px!important;line-height:21.6px!important;-webkit-text-size-adjust:100%!important}.base-field__control ::ng-deep .text-field__input,.base-field__control ::ng-deep .integer-field__input,.base-field__control ::ng-deep .decimal-field__input,.base-field__control ::ng-deep .password-field__input,.base-field__control ::ng-deep .cep-field__input,.base-field__control ::ng-deep .phone-field__input,.base-field__control ::ng-deep .cpf-cnpj-field__input,.base-field__control ::ng-deep .input-mask-field__input,.base-field__control ::ng-deep .textarea-field__input,.base-field__control ::ng-deep .date-field__input,.base-field__control ::ng-deep .color-picker-field__input,.base-field__control ::ng-deep .dropdown-search-field__input{--structra-field-input-font-size: 16px;--structra-field-input-line-height: 1.35;font-size:16px!important;line-height:21.6px!important}}\n"], dependencies: [{ kind: "component", type: SkeletonFieldShellComponent, selector: "app-skeleton-field-shell", inputs: ["variant", "animate", "size", "showLeadingIcon"] }, { kind: "component", type: DropdownMenuComponent, selector: "app-dropdown-menu", inputs: ["items", "placement", "minWidthPx", "matchTriggerWidth", "closeOnSelect", "menuId"], outputs: ["itemSelect", "openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3806
|
+
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", hint: "hint", hintId: "hintId", required: "required", showRequiredMark: "showRequiredMark", invalid: "invalid", invalidThemed: ["invalidThemed", "invalidThemed", booleanAttribute], filled: "filled", labelAlwaysFloated: ["labelAlwaysFloated", "labelAlwaysFloated", booleanAttribute], 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--label-always-top]=\"labelAlwaysFloated\"\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\" [class.base-field__prefix--unused]=\"loading\">\n @if (!loading) {\n <ng-content select=\"[appFieldPrefix]\" />\n }\n @if (showFaTpl && !loading) {\n <i [attr.class]=\"prefixIconClassTpl\" 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\" [size]=\"size\" />\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 @if (!loading && showHintTpl) {\n <p class=\"base-field__hint\" [id]=\"hintId || null\">{{ hint }}</p>\n }\n</div>\n", styles: ["@charset \"UTF-8\";@keyframes structraNativeAutofillStart{0%{opacity:1}to{opacity:1}}: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;font-size:1rem;line-height:1.35}.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--unused{display:none!important;padding:0!important;width:0;min-width:0;overflow:hidden}.base-field__prefix-icon{display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:1rem;line-height:1;margin:0;color:var(--ui-field-float-prefix-color)}.base-field__prefix-icon:before{line-height:1}.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-focus-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;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__clear:hover{background:var(--app-color-prefix-hover-bg, rgba(90, 127, 163, .15));color:var(--ui-field-float-label-focus-color)}.base-field__clear:focus,.base-field__clear:focus-visible{outline:none}.base-field__clear{min-width:2rem;min-height:2rem;line-height:0}.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,.base-field--invalid .base-field__prefix-icon:before,.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--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__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;margin:0;padding:0;transform:translate3d(0,calc((1.8rem + 1.35em)/2 - .37rem - .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:not(.base-field--readonly) .base-field__box:focus-within .base-field__float-label{transform:translateZ(0) scale(.75);font-weight:var(--field-label-weight, var(--structra-label-weight))}.base-field:not(.base-field--readonly):not(.base-field--invalid) .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-float-label-focus-color)}.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within .base-field__float-label{transform:translateZ(0) scale(.75);font-weight:var(--field-label-weight, var(--structra-label-weight));color:var(--ui-field-readonly-label-top-color)}.base-field--filled .base-field__float-label,.base-field--label-always-top .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__box:has(.base-field__control :where(input,textarea):-webkit-autofill) .base-field__float-label,.base-field__box:has(.base-field__control :where(input,textarea):autofill) .base-field__float-label,.base-field__box:has(.base-field__control :where(input,textarea):not(:placeholder-shown)) .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,.base-field--invalid.base-field--filled .base-field__float-label,.base-field--invalid.base-field--label-always-top .base-field__float-label,.base-field--invalid .base-field__box:focus-within .base-field__float-label,.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--label-always-top .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__box:has(.base-field__control :where(input,textarea):-webkit-autofill) .base-field__float-label,.base-field--invalid .base-field__box:has(.base-field__control :where(input,textarea):autofill) .base-field__float-label,.base-field--invalid .base-field__box:has(.base-field__control :where(input,textarea):not(:placeholder-shown)) .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.base-field--label-always-top .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__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}.base-field__hint{margin:.28rem 0 0;padding:0 .15rem;font-size:.72rem;line-height:1.35;font-weight:var(--field-helper-weight, var(--structra-body-weight));color:var(--app-color-text-muted, var(--ui-field-float-prefix-color, #5c6b7a));user-select:none;-webkit-user-select:none}.base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:first-line,.base-field__control ::ng-deep :where(input,textarea):autofill,.base-field__control ::ng-deep :where(input,textarea):autofill:first-line{font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%}.base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown),.base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown):first-line{font-size:var(--structra-field-input-font-size, 1rem)!important;line-height:var(--structra-field-input-line-height, 1.35)!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%}.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed,.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed:first-line,.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-selected,.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-selected:first-line{font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%}@supports (-webkit-appearance: none){.base-field .base-field__control ::ng-deep :where(input,textarea):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible),.base-field .base-field__control ::ng-deep :where(input,textarea):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-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(--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:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible),.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-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(--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):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible),.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-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-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):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible),.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;caret-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 .base-field__control ::ng-deep :where(input,textarea):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible),.base-field .base-field__control ::ng-deep :where(input,textarea):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-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(--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:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible),.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-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(--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):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible),.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-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-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):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible),.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;caret-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 .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed,.base-field .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed:first-line{font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-webkit-text-fill-color:var(--ui-field-float-input-text)!important}.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed:first-line{font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-webkit-text-fill-color:var(--ui-field-readonly-input-text)!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;line-height:1.2;transform:translate3d(0,.5059375rem,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,.base-field--size-sm.base-field--label-always-top .base-field__float-label{transform:translateZ(0) scale(.75)}.base-field--size-sm .base-field__box:has(.base-field__control :where(input,textarea):-webkit-autofill) .base-field__float-label,.base-field--size-sm .base-field__box:has(.base-field__control :where(input,textarea):autofill) .base-field__float-label,.base-field--size-sm .base-field__box:has(.base-field__control :where(input,textarea):not(:placeholder-shown)) .base-field__float-label{transform:translateZ(0) scale(.75)}.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:first-line,.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):autofill:first-line,.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed,.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed:first-line{font-size:13px!important;line-height:16.25px!important}.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown),.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown):first-line{font-size:var(--structra-field-input-font-size, .8125rem)!important;line-height:var(--structra-field-input-line-height, 1.25)!important}.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,.base-field--size-sm .base-field__control ::ng-deep .date-field__input,.base-field--size-sm .base-field__control ::ng-deep .color-picker-field__input{padding:1.05rem .45rem .28rem;--structra-field-input-font-size: .8125rem;--structra-field-input-line-height: 1.25;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height)}.base-field--size-sm .base-field__control ::ng-deep .date-field__input.mdc-text-field__input,.base-field--size-sm .base-field__control ::ng-deep .date-field__input.mat-mdc-input-element{min-height:2.345625rem!important}.base-field--size-sm .base-field__control ::ng-deep .date-field__display{left:.45rem;right:.45rem;font-size:.8125rem;line-height:1.25}.base-field--size-sm .base-field__control ::ng-deep .select-field__origin,.base-field--size-sm .base-field__control ::ng-deep .select-field__value-btn,.base-field--size-sm .base-field__control ::ng-deep .multiselect-field__origin,.base-field--size-sm .base-field__control ::ng-deep .multiselect-field__value-btn,.base-field--size-sm .base-field__control ::ng-deep .dropdown-search-field__origin,.base-field--size-sm .base-field__control ::ng-deep .dropdown-search-field__input{min-height:2.345625rem}.base-field--size-sm .base-field__control ::ng-deep .select-field__value-btn,.base-field--size-sm .base-field__control ::ng-deep .multiselect-field__value-btn{padding:1.05rem .28rem .28rem .45rem;--structra-field-input-font-size: .8125rem;--structra-field-input-line-height: 1.25;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height)}.base-field--size-sm .base-field__control ::ng-deep .dropdown-search-field__input{padding:1.05rem .45rem .28rem;--structra-field-input-font-size: .8125rem;--structra-field-input-line-height: 1.25;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height)}.base-field--size-sm .base-field__control ::ng-deep .select-field__chevron-btn,.base-field--size-sm .base-field__control ::ng-deep .multiselect-field__chevron-btn,.base-field--size-sm .base-field__control ::ng-deep .dropdown-search-field__chevron-btn{width:1.65rem;height:1.65rem;min-width:1.65rem;min-height:1.65rem;margin:0 .06rem}.base-field--size-sm .base-field__control ::ng-deep .select-field__chevron-icon,.base-field--size-sm .base-field__control ::ng-deep .multiselect-field__chevron-icon,.base-field--size-sm .base-field__control ::ng-deep .dropdown-search-field__chevron-icon{font-size:.72rem;padding-top:1px}.base-field--size-sm .base-field__control ::ng-deep .multiselect-field__trigger-suffix{padding-top:2px}.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;line-height:1.2;transform:translate3d(0,.6846875rem,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,.base-field--size-lg.base-field--label-always-top .base-field__float-label{transform:translateZ(0) scale(.75)}.base-field--size-lg .base-field__box:has(.base-field__control :where(input,textarea):-webkit-autofill) .base-field__float-label,.base-field--size-lg .base-field__box:has(.base-field__control :where(input,textarea):autofill) .base-field__float-label,.base-field--size-lg .base-field__box:has(.base-field__control :where(input,textarea):not(:placeholder-shown)) .base-field__float-label{transform:translateZ(0) scale(.75)}.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:first-line,.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):autofill:first-line,.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed,.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed:first-line{font-size:17px!important;line-height:23.8px!important}.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown),.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown):first-line{font-size:var(--structra-field-input-font-size, 1.0625rem)!important;line-height:var(--structra-field-input-line-height, 1.4)!important}.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,.base-field--size-lg .base-field__control ::ng-deep .date-field__input,.base-field--size-lg .base-field__control ::ng-deep .color-picker-field__input{padding:1.55rem .9rem .5rem;--structra-field-input-font-size: 1.0625rem;--structra-field-input-line-height: 1.4;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height)}.base-field--size-lg .base-field__control ::ng-deep .date-field__input.mdc-text-field__input,.base-field--size-lg .base-field__control ::ng-deep .date-field__input.mat-mdc-input-element{min-height:3.5375rem!important}.base-field--size-lg .base-field__control ::ng-deep .date-field__display{left:.9rem;right:.9rem;font-size:1.0625rem;line-height:1.4}.base-field--size-lg .base-field__control ::ng-deep .select-field__origin,.base-field--size-lg .base-field__control ::ng-deep .select-field__value-btn,.base-field--size-lg .base-field__control ::ng-deep .multiselect-field__origin,.base-field--size-lg .base-field__control ::ng-deep .multiselect-field__value-btn,.base-field--size-lg .base-field__control ::ng-deep .dropdown-search-field__origin,.base-field--size-lg .base-field__control ::ng-deep .dropdown-search-field__input{min-height:3.5375rem}.base-field--size-lg .base-field__control ::ng-deep .select-field__value-btn,.base-field--size-lg .base-field__control ::ng-deep .multiselect-field__value-btn{padding:1.55rem .38rem .5rem .9rem;--structra-field-input-font-size: 1.0625rem;--structra-field-input-line-height: 1.4;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height)}.base-field--size-lg .base-field__control ::ng-deep .dropdown-search-field__input{padding:1.55rem .9rem .5rem;--structra-field-input-font-size: 1.0625rem;--structra-field-input-line-height: 1.4;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height)}.base-field--size-lg .base-field__control ::ng-deep .select-field__chevron-btn,.base-field--size-lg .base-field__control ::ng-deep .multiselect-field__chevron-btn,.base-field--size-lg .base-field__control ::ng-deep .dropdown-search-field__chevron-btn{width:2.35rem;height:2.35rem;min-width:2.35rem;min-height:2.35rem;margin:0 .12rem}.base-field--size-lg .base-field__control ::ng-deep .select-field__chevron-icon,.base-field--size-lg .base-field__control ::ng-deep .multiselect-field__chevron-icon,.base-field--size-lg .base-field__control ::ng-deep .dropdown-search-field__chevron-icon{font-size:.88rem}@media(max-width:768px),(hover:none)and (pointer:coarse){.base-field__control ::ng-deep :where(input,textarea,select){--structra-field-input-font-size: 16px;--structra-field-input-line-height: 1.35;font-size:16px!important;line-height:21.6px!important;-webkit-text-size-adjust:100%!important}.base-field__control ::ng-deep :where(input,textarea):first-line{font-size:16px!important;line-height:21.6px!important;-webkit-text-size-adjust:100%!important}.base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:first-line,.base-field__control ::ng-deep :where(input,textarea):autofill,.base-field__control ::ng-deep :where(input,textarea):autofill:first-line,.base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown),.base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown):first-line,.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed,.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed:first-line,.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-selected,.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-selected:first-line{font-size:16px!important;line-height:21.6px!important;-webkit-text-size-adjust:100%!important}.base-field__control ::ng-deep .text-field__input,.base-field__control ::ng-deep .integer-field__input,.base-field__control ::ng-deep .decimal-field__input,.base-field__control ::ng-deep .password-field__input,.base-field__control ::ng-deep .cep-field__input,.base-field__control ::ng-deep .phone-field__input,.base-field__control ::ng-deep .cpf-cnpj-field__input,.base-field__control ::ng-deep .input-mask-field__input,.base-field__control ::ng-deep .textarea-field__input,.base-field__control ::ng-deep .date-field__input,.base-field__control ::ng-deep .color-picker-field__input,.base-field__control ::ng-deep .dropdown-search-field__input,.base-field__control ::ng-deep .select-field__value-btn,.base-field__control ::ng-deep .multiselect-field__value-btn{--structra-field-input-font-size: 16px;--structra-field-input-line-height: 1.35;font-size:16px!important;line-height:21.6px!important}}\n"], dependencies: [{ kind: "component", type: SkeletonFieldShellComponent, selector: "app-skeleton-field-shell", inputs: ["variant", "animate", "size", "showLeadingIcon"] }, { kind: "component", type: DropdownMenuComponent, selector: "app-dropdown-menu", inputs: ["items", "placement", "minWidthPx", "matchTriggerWidth", "closeOnSelect", "menuId"], outputs: ["itemSelect", "openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3807
3807
|
}
|
|
3808
3808
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseFieldComponent, decorators: [{
|
|
3809
3809
|
type: Component,
|
|
3810
|
-
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--label-always-top]=\"labelAlwaysFloated\"\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\" [class.base-field__prefix--unused]=\"loading\">\n @if (!loading) {\n <ng-content select=\"[appFieldPrefix]\" />\n }\n @if (showFaTpl && !loading) {\n <i [attr.class]=\"prefixIconClassTpl\" 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\" [size]=\"size\" />\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 @if (!loading && showHintTpl) {\n <p class=\"base-field__hint\" [id]=\"hintId || null\">{{ hint }}</p>\n }\n</div>\n", styles: ["@charset \"UTF-8\";@keyframes structraNativeAutofillStart{0%{opacity:1}to{opacity:1}}: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;font-size:1rem;line-height:1.35}.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--unused{display:none!important;padding:0!important;width:0;min-width:0;overflow:hidden}.base-field__prefix-icon{display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:1rem;line-height:1;margin:0;color:var(--ui-field-float-prefix-color)}.base-field__prefix-icon:before{line-height:1}.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-focus-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;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__clear:hover{background:var(--app-color-prefix-hover-bg, rgba(90, 127, 163, .15));color:var(--ui-field-float-label-focus-color)}.base-field__clear:focus,.base-field__clear:focus-visible{outline:none}.base-field__clear{min-width:2rem;min-height:2rem;line-height:0}.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,.base-field--invalid .base-field__prefix-icon:before,.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--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__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;margin:0;padding:0;transform:translate3d(0,calc((1.8rem + 1.35em)/2 - .37rem - .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:not(.base-field--readonly) .base-field__box:focus-within .base-field__float-label{transform:translateZ(0) scale(.75);font-weight:var(--field-label-weight, var(--structra-label-weight))}.base-field:not(.base-field--readonly):not(.base-field--invalid) .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-float-label-focus-color)}.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within .base-field__float-label{transform:translateZ(0) scale(.75);font-weight:var(--field-label-weight, var(--structra-label-weight));color:var(--ui-field-readonly-label-top-color)}.base-field--filled .base-field__float-label,.base-field--label-always-top .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__box:has(.base-field__control :where(input,textarea):-webkit-autofill) .base-field__float-label,.base-field__box:has(.base-field__control :where(input,textarea):autofill) .base-field__float-label,.base-field__box:has(.base-field__control :where(input,textarea):not(:placeholder-shown)) .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,.base-field--invalid.base-field--filled .base-field__float-label,.base-field--invalid.base-field--label-always-top .base-field__float-label,.base-field--invalid .base-field__box:focus-within .base-field__float-label,.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--label-always-top .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__box:has(.base-field__control :where(input,textarea):-webkit-autofill) .base-field__float-label,.base-field--invalid .base-field__box:has(.base-field__control :where(input,textarea):autofill) .base-field__float-label,.base-field--invalid .base-field__box:has(.base-field__control :where(input,textarea):not(:placeholder-shown)) .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.base-field--label-always-top .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__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}.base-field__hint{margin:.28rem 0 0;padding:0 .15rem;font-size:.72rem;line-height:1.35;font-weight:var(--field-helper-weight, var(--structra-body-weight));color:var(--app-color-text-muted, var(--ui-field-float-prefix-color, #5c6b7a));user-select:none;-webkit-user-select:none}.base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:first-line,.base-field__control ::ng-deep :where(input,textarea):autofill,.base-field__control ::ng-deep :where(input,textarea):autofill:first-line{font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%}.base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown),.base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown):first-line{font-size:var(--structra-field-input-font-size, 1rem)!important;line-height:var(--structra-field-input-line-height, 1.35)!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%}.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed,.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed:first-line,.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-selected,.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-selected:first-line{font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%}@supports (-webkit-appearance: none){.base-field .base-field__control ::ng-deep :where(input,textarea):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible),.base-field .base-field__control ::ng-deep :where(input,textarea):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-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(--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:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible),.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-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(--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):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible),.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-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-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):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible),.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;caret-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 .base-field__control ::ng-deep :where(input,textarea):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible),.base-field .base-field__control ::ng-deep :where(input,textarea):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-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(--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:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible),.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-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(--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):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible),.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-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-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):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible),.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;caret-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 .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed,.base-field .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed:first-line{font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-webkit-text-fill-color:var(--ui-field-float-input-text)!important}.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed:first-line{font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-webkit-text-fill-color:var(--ui-field-readonly-input-text)!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;line-height:1.2;transform:translate3d(0,.5059375rem,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,.base-field--size-sm.base-field--label-always-top .base-field__float-label{transform:translateZ(0) scale(.75)}.base-field--size-sm .base-field__box:has(.base-field__control :where(input,textarea):-webkit-autofill) .base-field__float-label,.base-field--size-sm .base-field__box:has(.base-field__control :where(input,textarea):autofill) .base-field__float-label,.base-field--size-sm .base-field__box:has(.base-field__control :where(input,textarea):not(:placeholder-shown)) .base-field__float-label{transform:translateZ(0) scale(.75)}.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:first-line,.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):autofill:first-line,.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed,.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed:first-line{font-size:13px!important;line-height:16.25px!important}.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown),.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown):first-line{font-size:var(--structra-field-input-font-size, .8125rem)!important;line-height:var(--structra-field-input-line-height, 1.25)!important}.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,.base-field--size-sm .base-field__control ::ng-deep .date-field__input,.base-field--size-sm .base-field__control ::ng-deep .color-picker-field__input{padding:1.05rem .45rem .28rem;--structra-field-input-font-size: .8125rem;--structra-field-input-line-height: 1.25;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height)}.base-field--size-sm .base-field__control ::ng-deep .date-field__input.mdc-text-field__input,.base-field--size-sm .base-field__control ::ng-deep .date-field__input.mat-mdc-input-element{min-height:2.345625rem!important}.base-field--size-sm .base-field__control ::ng-deep .date-field__display{left:.45rem;right:.45rem;font-size:.8125rem;line-height:1.25}.base-field--size-sm .base-field__control ::ng-deep .select-field__origin,.base-field--size-sm .base-field__control ::ng-deep .select-field__value-btn,.base-field--size-sm .base-field__control ::ng-deep .multiselect-field__origin,.base-field--size-sm .base-field__control ::ng-deep .multiselect-field__value-btn,.base-field--size-sm .base-field__control ::ng-deep .dropdown-search-field__origin,.base-field--size-sm .base-field__control ::ng-deep .dropdown-search-field__input{min-height:2.345625rem}.base-field--size-sm .base-field__control ::ng-deep .select-field__value-btn,.base-field--size-sm .base-field__control ::ng-deep .multiselect-field__value-btn{padding:1.05rem .28rem .28rem .45rem;font-size:.8125rem;line-height:1.25}.base-field--size-sm .base-field__control ::ng-deep .dropdown-search-field__input{padding:1.05rem .45rem .28rem;font-size:.8125rem;line-height:1.25}.base-field--size-sm .base-field__control ::ng-deep .select-field__chevron-btn,.base-field--size-sm .base-field__control ::ng-deep .multiselect-field__chevron-btn,.base-field--size-sm .base-field__control ::ng-deep .dropdown-search-field__chevron-btn{width:1.65rem;height:1.65rem;min-width:1.65rem;min-height:1.65rem;margin:0 .06rem}.base-field--size-sm .base-field__control ::ng-deep .select-field__chevron-icon,.base-field--size-sm .base-field__control ::ng-deep .multiselect-field__chevron-icon,.base-field--size-sm .base-field__control ::ng-deep .dropdown-search-field__chevron-icon{font-size:.72rem;padding-top:1px}.base-field--size-sm .base-field__control ::ng-deep .multiselect-field__trigger-suffix{padding-top:2px}.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;line-height:1.2;transform:translate3d(0,.6846875rem,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,.base-field--size-lg.base-field--label-always-top .base-field__float-label{transform:translateZ(0) scale(.75)}.base-field--size-lg .base-field__box:has(.base-field__control :where(input,textarea):-webkit-autofill) .base-field__float-label,.base-field--size-lg .base-field__box:has(.base-field__control :where(input,textarea):autofill) .base-field__float-label,.base-field--size-lg .base-field__box:has(.base-field__control :where(input,textarea):not(:placeholder-shown)) .base-field__float-label{transform:translateZ(0) scale(.75)}.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:first-line,.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):autofill:first-line,.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed,.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed:first-line{font-size:17px!important;line-height:23.8px!important}.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown),.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown):first-line{font-size:var(--structra-field-input-font-size, 1.0625rem)!important;line-height:var(--structra-field-input-line-height, 1.4)!important}.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,.base-field--size-lg .base-field__control ::ng-deep .date-field__input,.base-field--size-lg .base-field__control ::ng-deep .color-picker-field__input{padding:1.55rem .9rem .5rem;--structra-field-input-font-size: 1.0625rem;--structra-field-input-line-height: 1.4;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height)}.base-field--size-lg .base-field__control ::ng-deep .date-field__input.mdc-text-field__input,.base-field--size-lg .base-field__control ::ng-deep .date-field__input.mat-mdc-input-element{min-height:3.5375rem!important}.base-field--size-lg .base-field__control ::ng-deep .date-field__display{left:.9rem;right:.9rem;font-size:1.0625rem;line-height:1.4}.base-field--size-lg .base-field__control ::ng-deep .select-field__origin,.base-field--size-lg .base-field__control ::ng-deep .select-field__value-btn,.base-field--size-lg .base-field__control ::ng-deep .multiselect-field__origin,.base-field--size-lg .base-field__control ::ng-deep .multiselect-field__value-btn,.base-field--size-lg .base-field__control ::ng-deep .dropdown-search-field__origin,.base-field--size-lg .base-field__control ::ng-deep .dropdown-search-field__input{min-height:3.5375rem}.base-field--size-lg .base-field__control ::ng-deep .select-field__value-btn,.base-field--size-lg .base-field__control ::ng-deep .multiselect-field__value-btn{padding:1.55rem .38rem .5rem .9rem;font-size:1.0625rem;line-height:1.4}.base-field--size-lg .base-field__control ::ng-deep .dropdown-search-field__input{padding:1.55rem .9rem .5rem;font-size:1.0625rem;line-height:1.4}.base-field--size-lg .base-field__control ::ng-deep .select-field__chevron-btn,.base-field--size-lg .base-field__control ::ng-deep .multiselect-field__chevron-btn,.base-field--size-lg .base-field__control ::ng-deep .dropdown-search-field__chevron-btn{width:2.35rem;height:2.35rem;min-width:2.35rem;min-height:2.35rem;margin:0 .12rem}.base-field--size-lg .base-field__control ::ng-deep .select-field__chevron-icon,.base-field--size-lg .base-field__control ::ng-deep .multiselect-field__chevron-icon,.base-field--size-lg .base-field__control ::ng-deep .dropdown-search-field__chevron-icon{font-size:.88rem}@media(max-width:768px),(hover:none)and (pointer:coarse){.base-field__control ::ng-deep :where(input,textarea,select){--structra-field-input-font-size: 16px;--structra-field-input-line-height: 1.35;font-size:16px!important;line-height:21.6px!important;-webkit-text-size-adjust:100%!important}.base-field__control ::ng-deep :where(input,textarea):first-line{font-size:16px!important;line-height:21.6px!important;-webkit-text-size-adjust:100%!important}.base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:first-line,.base-field__control ::ng-deep :where(input,textarea):autofill,.base-field__control ::ng-deep :where(input,textarea):autofill:first-line,.base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown),.base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown):first-line,.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed,.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed:first-line,.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-selected,.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-selected:first-line{font-size:16px!important;line-height:21.6px!important;-webkit-text-size-adjust:100%!important}.base-field__control ::ng-deep .text-field__input,.base-field__control ::ng-deep .integer-field__input,.base-field__control ::ng-deep .decimal-field__input,.base-field__control ::ng-deep .password-field__input,.base-field__control ::ng-deep .cep-field__input,.base-field__control ::ng-deep .phone-field__input,.base-field__control ::ng-deep .cpf-cnpj-field__input,.base-field__control ::ng-deep .input-mask-field__input,.base-field__control ::ng-deep .textarea-field__input,.base-field__control ::ng-deep .date-field__input,.base-field__control ::ng-deep .color-picker-field__input,.base-field__control ::ng-deep .dropdown-search-field__input{--structra-field-input-font-size: 16px;--structra-field-input-line-height: 1.35;font-size:16px!important;line-height:21.6px!important}}\n"] }]
|
|
3810
|
+
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--label-always-top]=\"labelAlwaysFloated\"\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\" [class.base-field__prefix--unused]=\"loading\">\n @if (!loading) {\n <ng-content select=\"[appFieldPrefix]\" />\n }\n @if (showFaTpl && !loading) {\n <i [attr.class]=\"prefixIconClassTpl\" 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\" [size]=\"size\" />\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 @if (!loading && showHintTpl) {\n <p class=\"base-field__hint\" [id]=\"hintId || null\">{{ hint }}</p>\n }\n</div>\n", styles: ["@charset \"UTF-8\";@keyframes structraNativeAutofillStart{0%{opacity:1}to{opacity:1}}: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;font-size:1rem;line-height:1.35}.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--unused{display:none!important;padding:0!important;width:0;min-width:0;overflow:hidden}.base-field__prefix-icon{display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:1rem;line-height:1;margin:0;color:var(--ui-field-float-prefix-color)}.base-field__prefix-icon:before{line-height:1}.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-focus-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;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__clear:hover{background:var(--app-color-prefix-hover-bg, rgba(90, 127, 163, .15));color:var(--ui-field-float-label-focus-color)}.base-field__clear:focus,.base-field__clear:focus-visible{outline:none}.base-field__clear{min-width:2rem;min-height:2rem;line-height:0}.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,.base-field--invalid .base-field__prefix-icon:before,.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--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__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;margin:0;padding:0;transform:translate3d(0,calc((1.8rem + 1.35em)/2 - .37rem - .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:not(.base-field--readonly) .base-field__box:focus-within .base-field__float-label{transform:translateZ(0) scale(.75);font-weight:var(--field-label-weight, var(--structra-label-weight))}.base-field:not(.base-field--readonly):not(.base-field--invalid) .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-float-label-focus-color)}.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within .base-field__float-label{transform:translateZ(0) scale(.75);font-weight:var(--field-label-weight, var(--structra-label-weight));color:var(--ui-field-readonly-label-top-color)}.base-field--filled .base-field__float-label,.base-field--label-always-top .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__box:has(.base-field__control :where(input,textarea):-webkit-autofill) .base-field__float-label,.base-field__box:has(.base-field__control :where(input,textarea):autofill) .base-field__float-label,.base-field__box:has(.base-field__control :where(input,textarea):not(:placeholder-shown)) .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,.base-field--invalid.base-field--filled .base-field__float-label,.base-field--invalid.base-field--label-always-top .base-field__float-label,.base-field--invalid .base-field__box:focus-within .base-field__float-label,.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--label-always-top .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__box:has(.base-field__control :where(input,textarea):-webkit-autofill) .base-field__float-label,.base-field--invalid .base-field__box:has(.base-field__control :where(input,textarea):autofill) .base-field__float-label,.base-field--invalid .base-field__box:has(.base-field__control :where(input,textarea):not(:placeholder-shown)) .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.base-field--label-always-top .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__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}.base-field__hint{margin:.28rem 0 0;padding:0 .15rem;font-size:.72rem;line-height:1.35;font-weight:var(--field-helper-weight, var(--structra-body-weight));color:var(--app-color-text-muted, var(--ui-field-float-prefix-color, #5c6b7a));user-select:none;-webkit-user-select:none}.base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:first-line,.base-field__control ::ng-deep :where(input,textarea):autofill,.base-field__control ::ng-deep :where(input,textarea):autofill:first-line{font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%}.base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown),.base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown):first-line{font-size:var(--structra-field-input-font-size, 1rem)!important;line-height:var(--structra-field-input-line-height, 1.35)!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%}.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed,.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed:first-line,.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-selected,.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-selected:first-line{font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%}@supports (-webkit-appearance: none){.base-field .base-field__control ::ng-deep :where(input,textarea):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible),.base-field .base-field__control ::ng-deep :where(input,textarea):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-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(--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:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible),.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-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(--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):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible),.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-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-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):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible),.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active,:-webkit-autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;caret-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 .base-field__control ::ng-deep :where(input,textarea):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible),.base-field .base-field__control ::ng-deep :where(input,textarea):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-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(--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:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible),.base-field--invalid:not(.base-field--invalid-themed):not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-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(--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):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible),.base-field--invalid.base-field--invalid-themed:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-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-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):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible),.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):is(:autofill,:autofill:hover,:autofill:focus,:autofill:active,:autofill:focus-visible):first-line{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;caret-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 .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed,.base-field .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed:first-line{font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-webkit-text-fill-color:var(--ui-field-float-input-text)!important}.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed:first-line{font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-webkit-text-fill-color:var(--ui-field-readonly-input-text)!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;line-height:1.2;transform:translate3d(0,.5059375rem,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,.base-field--size-sm.base-field--label-always-top .base-field__float-label{transform:translateZ(0) scale(.75)}.base-field--size-sm .base-field__box:has(.base-field__control :where(input,textarea):-webkit-autofill) .base-field__float-label,.base-field--size-sm .base-field__box:has(.base-field__control :where(input,textarea):autofill) .base-field__float-label,.base-field--size-sm .base-field__box:has(.base-field__control :where(input,textarea):not(:placeholder-shown)) .base-field__float-label{transform:translateZ(0) scale(.75)}.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:first-line,.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):autofill:first-line,.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed,.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed:first-line{font-size:13px!important;line-height:16.25px!important}.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown),.base-field--size-sm .base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown):first-line{font-size:var(--structra-field-input-font-size, .8125rem)!important;line-height:var(--structra-field-input-line-height, 1.25)!important}.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,.base-field--size-sm .base-field__control ::ng-deep .date-field__input,.base-field--size-sm .base-field__control ::ng-deep .color-picker-field__input{padding:1.05rem .45rem .28rem;--structra-field-input-font-size: .8125rem;--structra-field-input-line-height: 1.25;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height)}.base-field--size-sm .base-field__control ::ng-deep .date-field__input.mdc-text-field__input,.base-field--size-sm .base-field__control ::ng-deep .date-field__input.mat-mdc-input-element{min-height:2.345625rem!important}.base-field--size-sm .base-field__control ::ng-deep .date-field__display{left:.45rem;right:.45rem;font-size:.8125rem;line-height:1.25}.base-field--size-sm .base-field__control ::ng-deep .select-field__origin,.base-field--size-sm .base-field__control ::ng-deep .select-field__value-btn,.base-field--size-sm .base-field__control ::ng-deep .multiselect-field__origin,.base-field--size-sm .base-field__control ::ng-deep .multiselect-field__value-btn,.base-field--size-sm .base-field__control ::ng-deep .dropdown-search-field__origin,.base-field--size-sm .base-field__control ::ng-deep .dropdown-search-field__input{min-height:2.345625rem}.base-field--size-sm .base-field__control ::ng-deep .select-field__value-btn,.base-field--size-sm .base-field__control ::ng-deep .multiselect-field__value-btn{padding:1.05rem .28rem .28rem .45rem;--structra-field-input-font-size: .8125rem;--structra-field-input-line-height: 1.25;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height)}.base-field--size-sm .base-field__control ::ng-deep .dropdown-search-field__input{padding:1.05rem .45rem .28rem;--structra-field-input-font-size: .8125rem;--structra-field-input-line-height: 1.25;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height)}.base-field--size-sm .base-field__control ::ng-deep .select-field__chevron-btn,.base-field--size-sm .base-field__control ::ng-deep .multiselect-field__chevron-btn,.base-field--size-sm .base-field__control ::ng-deep .dropdown-search-field__chevron-btn{width:1.65rem;height:1.65rem;min-width:1.65rem;min-height:1.65rem;margin:0 .06rem}.base-field--size-sm .base-field__control ::ng-deep .select-field__chevron-icon,.base-field--size-sm .base-field__control ::ng-deep .multiselect-field__chevron-icon,.base-field--size-sm .base-field__control ::ng-deep .dropdown-search-field__chevron-icon{font-size:.72rem;padding-top:1px}.base-field--size-sm .base-field__control ::ng-deep .multiselect-field__trigger-suffix{padding-top:2px}.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;line-height:1.2;transform:translate3d(0,.6846875rem,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,.base-field--size-lg.base-field--label-always-top .base-field__float-label{transform:translateZ(0) scale(.75)}.base-field--size-lg .base-field__box:has(.base-field__control :where(input,textarea):-webkit-autofill) .base-field__float-label,.base-field--size-lg .base-field__box:has(.base-field__control :where(input,textarea):autofill) .base-field__float-label,.base-field--size-lg .base-field__box:has(.base-field__control :where(input,textarea):not(:placeholder-shown)) .base-field__float-label{transform:translateZ(0) scale(.75)}.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:first-line,.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):autofill:first-line,.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed,.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed:first-line{font-size:17px!important;line-height:23.8px!important}.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown),.base-field--size-lg .base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown):first-line{font-size:var(--structra-field-input-font-size, 1.0625rem)!important;line-height:var(--structra-field-input-line-height, 1.4)!important}.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,.base-field--size-lg .base-field__control ::ng-deep .date-field__input,.base-field--size-lg .base-field__control ::ng-deep .color-picker-field__input{padding:1.55rem .9rem .5rem;--structra-field-input-font-size: 1.0625rem;--structra-field-input-line-height: 1.4;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height)}.base-field--size-lg .base-field__control ::ng-deep .date-field__input.mdc-text-field__input,.base-field--size-lg .base-field__control ::ng-deep .date-field__input.mat-mdc-input-element{min-height:3.5375rem!important}.base-field--size-lg .base-field__control ::ng-deep .date-field__display{left:.9rem;right:.9rem;font-size:1.0625rem;line-height:1.4}.base-field--size-lg .base-field__control ::ng-deep .select-field__origin,.base-field--size-lg .base-field__control ::ng-deep .select-field__value-btn,.base-field--size-lg .base-field__control ::ng-deep .multiselect-field__origin,.base-field--size-lg .base-field__control ::ng-deep .multiselect-field__value-btn,.base-field--size-lg .base-field__control ::ng-deep .dropdown-search-field__origin,.base-field--size-lg .base-field__control ::ng-deep .dropdown-search-field__input{min-height:3.5375rem}.base-field--size-lg .base-field__control ::ng-deep .select-field__value-btn,.base-field--size-lg .base-field__control ::ng-deep .multiselect-field__value-btn{padding:1.55rem .38rem .5rem .9rem;--structra-field-input-font-size: 1.0625rem;--structra-field-input-line-height: 1.4;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height)}.base-field--size-lg .base-field__control ::ng-deep .dropdown-search-field__input{padding:1.55rem .9rem .5rem;--structra-field-input-font-size: 1.0625rem;--structra-field-input-line-height: 1.4;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height)}.base-field--size-lg .base-field__control ::ng-deep .select-field__chevron-btn,.base-field--size-lg .base-field__control ::ng-deep .multiselect-field__chevron-btn,.base-field--size-lg .base-field__control ::ng-deep .dropdown-search-field__chevron-btn{width:2.35rem;height:2.35rem;min-width:2.35rem;min-height:2.35rem;margin:0 .12rem}.base-field--size-lg .base-field__control ::ng-deep .select-field__chevron-icon,.base-field--size-lg .base-field__control ::ng-deep .multiselect-field__chevron-icon,.base-field--size-lg .base-field__control ::ng-deep .dropdown-search-field__chevron-icon{font-size:.88rem}@media(max-width:768px),(hover:none)and (pointer:coarse){.base-field__control ::ng-deep :where(input,textarea,select){--structra-field-input-font-size: 16px;--structra-field-input-line-height: 1.35;font-size:16px!important;line-height:21.6px!important;-webkit-text-size-adjust:100%!important}.base-field__control ::ng-deep :where(input,textarea):first-line{font-size:16px!important;line-height:21.6px!important;-webkit-text-size-adjust:100%!important}.base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:first-line,.base-field__control ::ng-deep :where(input,textarea):autofill,.base-field__control ::ng-deep :where(input,textarea):autofill:first-line,.base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown),.base-field__control ::ng-deep :where(input,textarea):not(:placeholder-shown):first-line,.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed,.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-previewed:first-line,.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-selected,.base-field__control ::ng-deep :where(input,textarea):-internal-autofill-selected:first-line{font-size:16px!important;line-height:21.6px!important;-webkit-text-size-adjust:100%!important}.base-field__control ::ng-deep .text-field__input,.base-field__control ::ng-deep .integer-field__input,.base-field__control ::ng-deep .decimal-field__input,.base-field__control ::ng-deep .password-field__input,.base-field__control ::ng-deep .cep-field__input,.base-field__control ::ng-deep .phone-field__input,.base-field__control ::ng-deep .cpf-cnpj-field__input,.base-field__control ::ng-deep .input-mask-field__input,.base-field__control ::ng-deep .textarea-field__input,.base-field__control ::ng-deep .date-field__input,.base-field__control ::ng-deep .color-picker-field__input,.base-field__control ::ng-deep .dropdown-search-field__input,.base-field__control ::ng-deep .select-field__value-btn,.base-field__control ::ng-deep .multiselect-field__value-btn{--structra-field-input-font-size: 16px;--structra-field-input-line-height: 1.35;font-size:16px!important;line-height:21.6px!important}}\n"] }]
|
|
3811
3811
|
}], propDecorators: { label: [{
|
|
3812
3812
|
type: Input
|
|
3813
3813
|
}], errorMessage: [{
|
|
@@ -7406,7 +7406,7 @@ class SelectFieldComponent extends DropdownOptionFieldBase {
|
|
|
7406
7406
|
useExisting: forwardRef(() => SelectFieldComponent),
|
|
7407
7407
|
multi: true,
|
|
7408
7408
|
},
|
|
7409
|
-
], viewQueries: [{ propertyName: "optionsPanelTpl", first: true, predicate: ["optionsPanelTpl"], descendants: true, static: true }, { propertyName: "dropdownTriggerRootRef", first: true, predicate: ["dropdownFieldTriggerRoot"], descendants: true, read: ElementRef }, { propertyName: "dropdownBase", first: true, predicate: DropdownBaseComponent, descendants: true }, { 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]=\"effectiveFieldSize\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"requiredEffective\" [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\"\n [inputId]=\"controlId\" [errorId]=\"errorElementId\" [hint]=\"hint\" [hintId]=\"hintElementId\" [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 || readonly ? -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]=\"1\" />\n }\n @if (listOptions.length === 0 && !optionsLoading && !(pagination && loadingMore)) {\n <div class=\"select-field__empty\" role=\"status\" aria-live=\"polite\">{{ emptyOptionsMessage }}</div>\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\";@keyframes structraNativeAutofillStart{0%{opacity:1}to{opacity:1}}: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%;flex:0 1 auto;min-height:0;max-height:min(320px,45vh);box-sizing:border-box;list-style:none;outline:none;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.select-field__empty{margin:0;padding:.85rem .75rem;min-height:3rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.9rem;line-height:1.35;font-weight:var(--structra-body-weight, 400);color:var(--app-color-text-muted, #6b7280);user-select:none;-webkit-user-select:none}.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", "hint", "hintId", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "labelAlwaysFloated", "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", "flexibleConnectedOverlay", "connectedOverlayViewportMargin", "lockConnectedOverlayPosition", "scrollStrategy", "bareOverlayPanel"], outputs: ["openChange"] }, { kind: "component", type: SkeletonListComponent, selector: "app-skeleton-list", inputs: ["rows", "leading", "rowGap", "lineHeight", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7409
|
+
], viewQueries: [{ propertyName: "optionsPanelTpl", first: true, predicate: ["optionsPanelTpl"], descendants: true, static: true }, { propertyName: "dropdownTriggerRootRef", first: true, predicate: ["dropdownFieldTriggerRoot"], descendants: true, read: ElementRef }, { propertyName: "dropdownBase", first: true, predicate: DropdownBaseComponent, descendants: true }, { 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]=\"effectiveFieldSize\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"requiredEffective\" [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\"\n [inputId]=\"controlId\" [errorId]=\"errorElementId\" [hint]=\"hint\" [hintId]=\"hintElementId\" [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 || readonly ? -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]=\"1\" />\n }\n @if (listOptions.length === 0 && !optionsLoading && !(pagination && loadingMore)) {\n <div class=\"select-field__empty\" role=\"status\" aria-live=\"polite\">{{ emptyOptionsMessage }}</div>\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\";@keyframes structraNativeAutofillStart{0%{opacity:1}to{opacity:1}}: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;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%;flex:0 1 auto;min-height:0;max-height:min(320px,45vh);box-sizing:border-box;list-style:none;outline:none;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.select-field__empty{margin:0;padding:.85rem .75rem;min-height:3rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.9rem;line-height:1.35;font-weight:var(--structra-body-weight, 400);color:var(--app-color-text-muted, #6b7280);user-select:none;-webkit-user-select:none}.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)}.select-field__value-btn,.select-field__input{--structra-field-input-font-size: 1rem;--structra-field-input-line-height: 1.35;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height);font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));-webkit-text-size-adjust:100%}:host ::ng-deep .base-field--size-sm .select-field__value-btn,:host ::ng-deep .base-field--size-sm .select-field__input{--structra-field-input-font-size: .8125rem;--structra-field-input-line-height: 1.25;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height)}:host ::ng-deep .base-field--size-lg .select-field__value-btn,:host ::ng-deep .base-field--size-lg .select-field__input{--structra-field-input-font-size: 1.0625rem;--structra-field-input-line-height: 1.4;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height)}\n"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "hint", "hintId", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "labelAlwaysFloated", "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", "flexibleConnectedOverlay", "connectedOverlayViewportMargin", "lockConnectedOverlayPosition", "scrollStrategy", "bareOverlayPanel"], outputs: ["openChange"] }, { kind: "component", type: SkeletonListComponent, selector: "app-skeleton-list", inputs: ["rows", "leading", "rowGap", "lineHeight", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7410
7410
|
}
|
|
7411
7411
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SelectFieldComponent, decorators: [{
|
|
7412
7412
|
type: Component,
|
|
@@ -7416,7 +7416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
7416
7416
|
useExisting: forwardRef(() => SelectFieldComponent),
|
|
7417
7417
|
multi: true,
|
|
7418
7418
|
},
|
|
7419
|
-
], template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [size]=\"effectiveFieldSize\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"requiredEffective\" [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\"\n [inputId]=\"controlId\" [errorId]=\"errorElementId\" [hint]=\"hint\" [hintId]=\"hintElementId\" [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 || readonly ? -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]=\"1\" />\n }\n @if (listOptions.length === 0 && !optionsLoading && !(pagination && loadingMore)) {\n <div class=\"select-field__empty\" role=\"status\" aria-live=\"polite\">{{ emptyOptionsMessage }}</div>\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\";@keyframes structraNativeAutofillStart{0%{opacity:1}to{opacity:1}}: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%;flex:0 1 auto;min-height:0;max-height:min(320px,45vh);box-sizing:border-box;list-style:none;outline:none;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.select-field__empty{margin:0;padding:.85rem .75rem;min-height:3rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.9rem;line-height:1.35;font-weight:var(--structra-body-weight, 400);color:var(--app-color-text-muted, #6b7280);user-select:none;-webkit-user-select:none}.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"] }]
|
|
7419
|
+
], template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [size]=\"effectiveFieldSize\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"requiredEffective\" [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\"\n [inputId]=\"controlId\" [errorId]=\"errorElementId\" [hint]=\"hint\" [hintId]=\"hintElementId\" [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 || readonly ? -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]=\"1\" />\n }\n @if (listOptions.length === 0 && !optionsLoading && !(pagination && loadingMore)) {\n <div class=\"select-field__empty\" role=\"status\" aria-live=\"polite\">{{ emptyOptionsMessage }}</div>\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\";@keyframes structraNativeAutofillStart{0%{opacity:1}to{opacity:1}}: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;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%;flex:0 1 auto;min-height:0;max-height:min(320px,45vh);box-sizing:border-box;list-style:none;outline:none;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.select-field__empty{margin:0;padding:.85rem .75rem;min-height:3rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.9rem;line-height:1.35;font-weight:var(--structra-body-weight, 400);color:var(--app-color-text-muted, #6b7280);user-select:none;-webkit-user-select:none}.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)}.select-field__value-btn,.select-field__input{--structra-field-input-font-size: 1rem;--structra-field-input-line-height: 1.35;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height);font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));-webkit-text-size-adjust:100%}:host ::ng-deep .base-field--size-sm .select-field__value-btn,:host ::ng-deep .base-field--size-sm .select-field__input{--structra-field-input-font-size: .8125rem;--structra-field-input-line-height: 1.25;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height)}:host ::ng-deep .base-field--size-lg .select-field__value-btn,:host ::ng-deep .base-field--size-lg .select-field__input{--structra-field-input-font-size: 1.0625rem;--structra-field-input-line-height: 1.4;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height)}\n"] }]
|
|
7420
7420
|
}], propDecorators: { hostInvalidClass: [{
|
|
7421
7421
|
type: HostBinding,
|
|
7422
7422
|
args: ['class.select-field--invalid']
|
|
@@ -8148,7 +8148,7 @@ class MultiselectFieldComponent extends DropdownMultiOptionFieldBase {
|
|
|
8148
8148
|
useExisting: forwardRef(() => MultiselectFieldComponent),
|
|
8149
8149
|
multi: true,
|
|
8150
8150
|
},
|
|
8151
|
-
], viewQueries: [{ propertyName: "optionsPanelTpl", first: true, predicate: ["optionsPanelTpl"], descendants: true, static: true }, { propertyName: "dropdownTriggerRootRef", first: true, predicate: ["dropdownFieldTriggerRoot"], descendants: true, read: ElementRef }, { propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }, { propertyName: "dropdownBase", first: true, predicate: DropdownBaseComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-field [label]=\"displayLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [size]=\"effectiveFieldSize\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"requiredEffective\" [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\"\n [inputId]=\"controlId\" [errorId]=\"errorElementId\" [hint]=\"hint\" [hintId]=\"hintElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\"\n [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\" [showSuffixSlot]=\"showSuffixSlot\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <div class=\"multiselect-field__wrap\">\n <app-dropdown-base [open]=\"panelOpen\" [panelTemplate]=\"optionsPanelTpl\" [panelWidthPx]=\"panelOverlayWidth\"\n [lockConnectedOverlayPosition]=\"lockOverlayWhileOpen\"\n (openChange)=\"onDropdownOpenChange($event)\">\n <div #dropdownFieldTriggerRoot class=\"multiselect-field__origin\" appDropdownTrigger\n (keydown)=\"onTriggerKeydown($event)\">\n <div\n #nativeInput\n role=\"combobox\"\n class=\"multiselect-field__value-btn\"\n [class.multiselect-field__value-btn--is-disabled]=\"disabled\"\n [id]=\"controlId\"\n [attr.name]=\"name || null\"\n [attr.tabindex]=\"disabled || readonly ? -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]=\"displayAriaLabel\"\n (click)=\"openToggle()\"\n (blur)=\"onDropdownBlur($event)\"\n >\n <span class=\"multiselect-field__value\">{{ displaySummary }}</span>\n </div>\n <span class=\"multiselect-field__trigger-suffix\">\n <ng-content select=\"[appMultiselectTriggerSuffix]\" />\n </span>\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 <ng-content select=\"[appFieldSuffix]\" />\n</app-base-field>\n\n<ng-template #optionsPanelTpl>\n <div class=\"multiselect-field__panel-inner\" (mousedown)=\"$event.preventDefault()\">\n @if (searchable) {\n <div class=\"multiselect-field__search-wrap\">\n <input type=\"search\" class=\"multiselect-field__search-input\" [id]=\"panelSearchInputId\"\n autocomplete=\"off\" spellcheck=\"false\" placeholder=\"Pesquisar\u2026\" aria-label=\"Pesquisar op\u00E7\u00F5es\"\n [value]=\"panelSearchQuery\" (input)=\"onPanelSearchInput($event)\" (keydown)=\"onPanelSearchKeydown($event)\"\n (blur)=\"onDropdownBlur($event)\" />\n </div>\n }\n <div class=\"multiselect-field__list\" [id]=\"optionsListId\" role=\"listbox\" tabindex=\"-1\" aria-multiselectable=\"true\"\n (blur)=\"onDropdownBlur($event)\" (keydown)=\"onListKeydown($event)\" (scroll)=\"onOptionsListScroll($event)\">\n @if (listOptions.length === 0 && (optionsLoading || (pagination && loadingMore))) {\n <app-skeleton-list [rows]=\"1\" />\n }\n @if (listOptions.length === 0 && !optionsLoading && !(pagination && loadingMore)) {\n <div class=\"multiselect-field__empty\" role=\"status\" aria-live=\"polite\">{{ emptyOptionsMessage }}</div>\n }\n @for (opt of listOptions; track trackOption($index, opt)) {\n <div role=\"option\" class=\"multiselect-field__option\" [class.multiselect-field__option--disabled]=\"optionSelectDisabled(opt)\"\n [class.multiselect-field__option--selected]=\"isSelected(opt)\"\n [class.multiselect-field__option--active]=\"!optionSelectDisabled(opt) && activeIndex === $index\"\n [attr.tabindex]=\"optionSelectDisabled(opt) ? 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 </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";@keyframes structraNativeAutofillStart{0%{opacity:1}to{opacity:1}}: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__trigger-suffix{display:flex;flex-shrink:0;align-items:center;align-self:center;box-sizing:border-box;padding-top:3px}.multiselect-field__trigger-suffix:not(:has(>*)){display:none}.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}:host.multiselect-field--invalid .multiselect-field__trigger-suffix{--ui-field-float-prefix-color: var(--ui-field-float-label-invalid-color);--ui-field-float-label-top-color: var(--ui-field-float-label-invalid-color);--ui-field-icon-slot-hover-bg: rgba(185, 28, 28, .12);color:var(--ui-field-float-label-invalid-color)}.multiselect-field__chevron-icon{display:inline-flex;align-items:center;justify-content:center;padding-top:2px;font-size:.8rem;line-height:1}.multiselect-field__panel-inner{display:flex;flex-direction:column;min-width:0;width:100%;box-sizing:border-box;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.multiselect-field__search-wrap{flex-shrink:0;padding:.45rem .5rem .35rem;border-bottom:1px solid rgba(0,0,0,.08);box-sizing:border-box}.multiselect-field__search-input{width:100%;box-sizing:border-box;margin:0;padding:.45rem .65rem;font:inherit;font-size:.92rem;line-height:1.35;color:var(--ui-field-float-input-text);background:var(--app-color-surface, #fff);border:1px solid var(--ui-field-float-border, rgba(0, 0, 0, .12));border-radius:8px;outline:none}.multiselect-field__search-input:focus{border-color:var(--ui-field-float-border-focus);box-shadow:0 0 0 2px var(--ui-field-float-focus-ring)}.multiselect-field__search-input::placeholder{color:var(--app-color-text-muted, #6b7280)}.multiselect-field__list{margin:0;padding:.25rem 0;width:100%;flex:0 1 auto;min-height:0;max-height:min(320px,45vh);-webkit-overflow-scrolling:touch;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__empty{margin:0;padding:.85rem .75rem;min-height:3rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.9rem;line-height:1.35;font-weight:var(--structra-body-weight, 400);color:var(--app-color-text-muted, #6b7280);user-select:none;-webkit-user-select:none}.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", "hint", "hintId", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "labelAlwaysFloated", "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", "flexibleConnectedOverlay", "connectedOverlayViewportMargin", "lockConnectedOverlayPosition", "scrollStrategy", "bareOverlayPanel"], outputs: ["openChange"] }, { kind: "component", type: SkeletonListComponent, selector: "app-skeleton-list", inputs: ["rows", "leading", "rowGap", "lineHeight", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8151
|
+
], viewQueries: [{ propertyName: "optionsPanelTpl", first: true, predicate: ["optionsPanelTpl"], descendants: true, static: true }, { propertyName: "dropdownTriggerRootRef", first: true, predicate: ["dropdownFieldTriggerRoot"], descendants: true, read: ElementRef }, { propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }, { propertyName: "dropdownBase", first: true, predicate: DropdownBaseComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-field [label]=\"displayLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [size]=\"effectiveFieldSize\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"requiredEffective\" [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\"\n [inputId]=\"controlId\" [errorId]=\"errorElementId\" [hint]=\"hint\" [hintId]=\"hintElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\"\n [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\" [showSuffixSlot]=\"showSuffixSlot\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <div class=\"multiselect-field__wrap\">\n <app-dropdown-base [open]=\"panelOpen\" [panelTemplate]=\"optionsPanelTpl\" [panelWidthPx]=\"panelOverlayWidth\"\n [lockConnectedOverlayPosition]=\"lockOverlayWhileOpen\"\n (openChange)=\"onDropdownOpenChange($event)\">\n <div #dropdownFieldTriggerRoot class=\"multiselect-field__origin\" appDropdownTrigger\n (keydown)=\"onTriggerKeydown($event)\">\n <div\n #nativeInput\n role=\"combobox\"\n class=\"multiselect-field__value-btn\"\n [class.multiselect-field__value-btn--is-disabled]=\"disabled\"\n [id]=\"controlId\"\n [attr.name]=\"name || null\"\n [attr.tabindex]=\"disabled || readonly ? -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]=\"displayAriaLabel\"\n (click)=\"openToggle()\"\n (blur)=\"onDropdownBlur($event)\"\n >\n <span class=\"multiselect-field__value\">{{ displaySummary }}</span>\n </div>\n <span class=\"multiselect-field__trigger-suffix\">\n <ng-content select=\"[appMultiselectTriggerSuffix]\" />\n </span>\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 <ng-content select=\"[appFieldSuffix]\" />\n</app-base-field>\n\n<ng-template #optionsPanelTpl>\n <div class=\"multiselect-field__panel-inner\" (mousedown)=\"$event.preventDefault()\">\n @if (searchable) {\n <div class=\"multiselect-field__search-wrap\">\n <input type=\"search\" class=\"multiselect-field__search-input\" [id]=\"panelSearchInputId\"\n autocomplete=\"off\" spellcheck=\"false\" placeholder=\"Pesquisar\u2026\" aria-label=\"Pesquisar op\u00E7\u00F5es\"\n [value]=\"panelSearchQuery\" (input)=\"onPanelSearchInput($event)\" (keydown)=\"onPanelSearchKeydown($event)\"\n (blur)=\"onDropdownBlur($event)\" />\n </div>\n }\n <div class=\"multiselect-field__list\" [id]=\"optionsListId\" role=\"listbox\" tabindex=\"-1\" aria-multiselectable=\"true\"\n (blur)=\"onDropdownBlur($event)\" (keydown)=\"onListKeydown($event)\" (scroll)=\"onOptionsListScroll($event)\">\n @if (listOptions.length === 0 && (optionsLoading || (pagination && loadingMore))) {\n <app-skeleton-list [rows]=\"1\" />\n }\n @if (listOptions.length === 0 && !optionsLoading && !(pagination && loadingMore)) {\n <div class=\"multiselect-field__empty\" role=\"status\" aria-live=\"polite\">{{ emptyOptionsMessage }}</div>\n }\n @for (opt of listOptions; track trackOption($index, opt)) {\n <div role=\"option\" class=\"multiselect-field__option\" [class.multiselect-field__option--disabled]=\"optionSelectDisabled(opt)\"\n [class.multiselect-field__option--selected]=\"isSelected(opt)\"\n [class.multiselect-field__option--active]=\"!optionSelectDisabled(opt) && activeIndex === $index\"\n [attr.tabindex]=\"optionSelectDisabled(opt) ? 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 </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";@keyframes structraNativeAutofillStart{0%{opacity:1}to{opacity:1}}: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;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__trigger-suffix{display:flex;flex-shrink:0;align-items:center;align-self:center;box-sizing:border-box;padding-top:3px}.multiselect-field__trigger-suffix:not(:has(>*)){display:none}.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}:host.multiselect-field--invalid .multiselect-field__trigger-suffix{--ui-field-float-prefix-color: var(--ui-field-float-label-invalid-color);--ui-field-float-label-top-color: var(--ui-field-float-label-invalid-color);--ui-field-icon-slot-hover-bg: rgba(185, 28, 28, .12);color:var(--ui-field-float-label-invalid-color)}.multiselect-field__chevron-icon{display:inline-flex;align-items:center;justify-content:center;padding-top:2px;font-size:.8rem;line-height:1}.multiselect-field__panel-inner{display:flex;flex-direction:column;min-width:0;width:100%;box-sizing:border-box;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.multiselect-field__search-wrap{flex-shrink:0;padding:.45rem .5rem .35rem;border-bottom:1px solid rgba(0,0,0,.08);box-sizing:border-box}.multiselect-field__search-input{width:100%;box-sizing:border-box;margin:0;padding:.45rem .65rem;font:inherit;font-size:.92rem;line-height:1.35;color:var(--ui-field-float-input-text);background:var(--app-color-surface, #fff);border:1px solid var(--ui-field-float-border, rgba(0, 0, 0, .12));border-radius:8px;outline:none}.multiselect-field__search-input:focus{border-color:var(--ui-field-float-border-focus);box-shadow:0 0 0 2px var(--ui-field-float-focus-ring)}.multiselect-field__search-input::placeholder{color:var(--app-color-text-muted, #6b7280)}.multiselect-field__list{margin:0;padding:.25rem 0;width:100%;flex:0 1 auto;min-height:0;max-height:min(320px,45vh);-webkit-overflow-scrolling:touch;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__empty{margin:0;padding:.85rem .75rem;min-height:3rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.9rem;line-height:1.35;font-weight:var(--structra-body-weight, 400);color:var(--app-color-text-muted, #6b7280);user-select:none;-webkit-user-select:none}.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}.multiselect-field__value-btn,.multiselect-field__input{--structra-field-input-font-size: 1rem;--structra-field-input-line-height: 1.35;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height);font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));-webkit-text-size-adjust:100%}:host ::ng-deep .base-field--size-sm .multiselect-field__value-btn,:host ::ng-deep .base-field--size-sm .multiselect-field__input{--structra-field-input-font-size: .8125rem;--structra-field-input-line-height: 1.25;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height)}:host ::ng-deep .base-field--size-lg .multiselect-field__value-btn,:host ::ng-deep .base-field--size-lg .multiselect-field__input{--structra-field-input-font-size: 1.0625rem;--structra-field-input-line-height: 1.4;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height)}\n"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "hint", "hintId", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "labelAlwaysFloated", "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", "flexibleConnectedOverlay", "connectedOverlayViewportMargin", "lockConnectedOverlayPosition", "scrollStrategy", "bareOverlayPanel"], outputs: ["openChange"] }, { kind: "component", type: SkeletonListComponent, selector: "app-skeleton-list", inputs: ["rows", "leading", "rowGap", "lineHeight", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8152
8152
|
}
|
|
8153
8153
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MultiselectFieldComponent, decorators: [{
|
|
8154
8154
|
type: Component,
|
|
@@ -8158,7 +8158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
8158
8158
|
useExisting: forwardRef(() => MultiselectFieldComponent),
|
|
8159
8159
|
multi: true,
|
|
8160
8160
|
},
|
|
8161
|
-
], template: "<app-base-field [label]=\"displayLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [size]=\"effectiveFieldSize\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"requiredEffective\" [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\"\n [inputId]=\"controlId\" [errorId]=\"errorElementId\" [hint]=\"hint\" [hintId]=\"hintElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\"\n [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\" [showSuffixSlot]=\"showSuffixSlot\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <div class=\"multiselect-field__wrap\">\n <app-dropdown-base [open]=\"panelOpen\" [panelTemplate]=\"optionsPanelTpl\" [panelWidthPx]=\"panelOverlayWidth\"\n [lockConnectedOverlayPosition]=\"lockOverlayWhileOpen\"\n (openChange)=\"onDropdownOpenChange($event)\">\n <div #dropdownFieldTriggerRoot class=\"multiselect-field__origin\" appDropdownTrigger\n (keydown)=\"onTriggerKeydown($event)\">\n <div\n #nativeInput\n role=\"combobox\"\n class=\"multiselect-field__value-btn\"\n [class.multiselect-field__value-btn--is-disabled]=\"disabled\"\n [id]=\"controlId\"\n [attr.name]=\"name || null\"\n [attr.tabindex]=\"disabled || readonly ? -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]=\"displayAriaLabel\"\n (click)=\"openToggle()\"\n (blur)=\"onDropdownBlur($event)\"\n >\n <span class=\"multiselect-field__value\">{{ displaySummary }}</span>\n </div>\n <span class=\"multiselect-field__trigger-suffix\">\n <ng-content select=\"[appMultiselectTriggerSuffix]\" />\n </span>\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 <ng-content select=\"[appFieldSuffix]\" />\n</app-base-field>\n\n<ng-template #optionsPanelTpl>\n <div class=\"multiselect-field__panel-inner\" (mousedown)=\"$event.preventDefault()\">\n @if (searchable) {\n <div class=\"multiselect-field__search-wrap\">\n <input type=\"search\" class=\"multiselect-field__search-input\" [id]=\"panelSearchInputId\"\n autocomplete=\"off\" spellcheck=\"false\" placeholder=\"Pesquisar\u2026\" aria-label=\"Pesquisar op\u00E7\u00F5es\"\n [value]=\"panelSearchQuery\" (input)=\"onPanelSearchInput($event)\" (keydown)=\"onPanelSearchKeydown($event)\"\n (blur)=\"onDropdownBlur($event)\" />\n </div>\n }\n <div class=\"multiselect-field__list\" [id]=\"optionsListId\" role=\"listbox\" tabindex=\"-1\" aria-multiselectable=\"true\"\n (blur)=\"onDropdownBlur($event)\" (keydown)=\"onListKeydown($event)\" (scroll)=\"onOptionsListScroll($event)\">\n @if (listOptions.length === 0 && (optionsLoading || (pagination && loadingMore))) {\n <app-skeleton-list [rows]=\"1\" />\n }\n @if (listOptions.length === 0 && !optionsLoading && !(pagination && loadingMore)) {\n <div class=\"multiselect-field__empty\" role=\"status\" aria-live=\"polite\">{{ emptyOptionsMessage }}</div>\n }\n @for (opt of listOptions; track trackOption($index, opt)) {\n <div role=\"option\" class=\"multiselect-field__option\" [class.multiselect-field__option--disabled]=\"optionSelectDisabled(opt)\"\n [class.multiselect-field__option--selected]=\"isSelected(opt)\"\n [class.multiselect-field__option--active]=\"!optionSelectDisabled(opt) && activeIndex === $index\"\n [attr.tabindex]=\"optionSelectDisabled(opt) ? 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 </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";@keyframes structraNativeAutofillStart{0%{opacity:1}to{opacity:1}}: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__trigger-suffix{display:flex;flex-shrink:0;align-items:center;align-self:center;box-sizing:border-box;padding-top:3px}.multiselect-field__trigger-suffix:not(:has(>*)){display:none}.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}:host.multiselect-field--invalid .multiselect-field__trigger-suffix{--ui-field-float-prefix-color: var(--ui-field-float-label-invalid-color);--ui-field-float-label-top-color: var(--ui-field-float-label-invalid-color);--ui-field-icon-slot-hover-bg: rgba(185, 28, 28, .12);color:var(--ui-field-float-label-invalid-color)}.multiselect-field__chevron-icon{display:inline-flex;align-items:center;justify-content:center;padding-top:2px;font-size:.8rem;line-height:1}.multiselect-field__panel-inner{display:flex;flex-direction:column;min-width:0;width:100%;box-sizing:border-box;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.multiselect-field__search-wrap{flex-shrink:0;padding:.45rem .5rem .35rem;border-bottom:1px solid rgba(0,0,0,.08);box-sizing:border-box}.multiselect-field__search-input{width:100%;box-sizing:border-box;margin:0;padding:.45rem .65rem;font:inherit;font-size:.92rem;line-height:1.35;color:var(--ui-field-float-input-text);background:var(--app-color-surface, #fff);border:1px solid var(--ui-field-float-border, rgba(0, 0, 0, .12));border-radius:8px;outline:none}.multiselect-field__search-input:focus{border-color:var(--ui-field-float-border-focus);box-shadow:0 0 0 2px var(--ui-field-float-focus-ring)}.multiselect-field__search-input::placeholder{color:var(--app-color-text-muted, #6b7280)}.multiselect-field__list{margin:0;padding:.25rem 0;width:100%;flex:0 1 auto;min-height:0;max-height:min(320px,45vh);-webkit-overflow-scrolling:touch;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__empty{margin:0;padding:.85rem .75rem;min-height:3rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.9rem;line-height:1.35;font-weight:var(--structra-body-weight, 400);color:var(--app-color-text-muted, #6b7280);user-select:none;-webkit-user-select:none}.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"] }]
|
|
8161
|
+
], template: "<app-base-field [label]=\"displayLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [size]=\"effectiveFieldSize\"\n [loading]=\"loading\"\n [errorMessage]=\"uiErrorMessage\" [required]=\"requiredEffective\" [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\"\n [inputId]=\"controlId\" [errorId]=\"errorElementId\" [hint]=\"hint\" [hintId]=\"hintElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\"\n [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\" [showSuffixSlot]=\"showSuffixSlot\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n <ng-content select=\"[appFieldPrefix]\" />\n <div class=\"multiselect-field__wrap\">\n <app-dropdown-base [open]=\"panelOpen\" [panelTemplate]=\"optionsPanelTpl\" [panelWidthPx]=\"panelOverlayWidth\"\n [lockConnectedOverlayPosition]=\"lockOverlayWhileOpen\"\n (openChange)=\"onDropdownOpenChange($event)\">\n <div #dropdownFieldTriggerRoot class=\"multiselect-field__origin\" appDropdownTrigger\n (keydown)=\"onTriggerKeydown($event)\">\n <div\n #nativeInput\n role=\"combobox\"\n class=\"multiselect-field__value-btn\"\n [class.multiselect-field__value-btn--is-disabled]=\"disabled\"\n [id]=\"controlId\"\n [attr.name]=\"name || null\"\n [attr.tabindex]=\"disabled || readonly ? -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]=\"displayAriaLabel\"\n (click)=\"openToggle()\"\n (blur)=\"onDropdownBlur($event)\"\n >\n <span class=\"multiselect-field__value\">{{ displaySummary }}</span>\n </div>\n <span class=\"multiselect-field__trigger-suffix\">\n <ng-content select=\"[appMultiselectTriggerSuffix]\" />\n </span>\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 <ng-content select=\"[appFieldSuffix]\" />\n</app-base-field>\n\n<ng-template #optionsPanelTpl>\n <div class=\"multiselect-field__panel-inner\" (mousedown)=\"$event.preventDefault()\">\n @if (searchable) {\n <div class=\"multiselect-field__search-wrap\">\n <input type=\"search\" class=\"multiselect-field__search-input\" [id]=\"panelSearchInputId\"\n autocomplete=\"off\" spellcheck=\"false\" placeholder=\"Pesquisar\u2026\" aria-label=\"Pesquisar op\u00E7\u00F5es\"\n [value]=\"panelSearchQuery\" (input)=\"onPanelSearchInput($event)\" (keydown)=\"onPanelSearchKeydown($event)\"\n (blur)=\"onDropdownBlur($event)\" />\n </div>\n }\n <div class=\"multiselect-field__list\" [id]=\"optionsListId\" role=\"listbox\" tabindex=\"-1\" aria-multiselectable=\"true\"\n (blur)=\"onDropdownBlur($event)\" (keydown)=\"onListKeydown($event)\" (scroll)=\"onOptionsListScroll($event)\">\n @if (listOptions.length === 0 && (optionsLoading || (pagination && loadingMore))) {\n <app-skeleton-list [rows]=\"1\" />\n }\n @if (listOptions.length === 0 && !optionsLoading && !(pagination && loadingMore)) {\n <div class=\"multiselect-field__empty\" role=\"status\" aria-live=\"polite\">{{ emptyOptionsMessage }}</div>\n }\n @for (opt of listOptions; track trackOption($index, opt)) {\n <div role=\"option\" class=\"multiselect-field__option\" [class.multiselect-field__option--disabled]=\"optionSelectDisabled(opt)\"\n [class.multiselect-field__option--selected]=\"isSelected(opt)\"\n [class.multiselect-field__option--active]=\"!optionSelectDisabled(opt) && activeIndex === $index\"\n [attr.tabindex]=\"optionSelectDisabled(opt) ? 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 </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";@keyframes structraNativeAutofillStart{0%{opacity:1}to{opacity:1}}: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;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__trigger-suffix{display:flex;flex-shrink:0;align-items:center;align-self:center;box-sizing:border-box;padding-top:3px}.multiselect-field__trigger-suffix:not(:has(>*)){display:none}.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}:host.multiselect-field--invalid .multiselect-field__trigger-suffix{--ui-field-float-prefix-color: var(--ui-field-float-label-invalid-color);--ui-field-float-label-top-color: var(--ui-field-float-label-invalid-color);--ui-field-icon-slot-hover-bg: rgba(185, 28, 28, .12);color:var(--ui-field-float-label-invalid-color)}.multiselect-field__chevron-icon{display:inline-flex;align-items:center;justify-content:center;padding-top:2px;font-size:.8rem;line-height:1}.multiselect-field__panel-inner{display:flex;flex-direction:column;min-width:0;width:100%;box-sizing:border-box;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.multiselect-field__search-wrap{flex-shrink:0;padding:.45rem .5rem .35rem;border-bottom:1px solid rgba(0,0,0,.08);box-sizing:border-box}.multiselect-field__search-input{width:100%;box-sizing:border-box;margin:0;padding:.45rem .65rem;font:inherit;font-size:.92rem;line-height:1.35;color:var(--ui-field-float-input-text);background:var(--app-color-surface, #fff);border:1px solid var(--ui-field-float-border, rgba(0, 0, 0, .12));border-radius:8px;outline:none}.multiselect-field__search-input:focus{border-color:var(--ui-field-float-border-focus);box-shadow:0 0 0 2px var(--ui-field-float-focus-ring)}.multiselect-field__search-input::placeholder{color:var(--app-color-text-muted, #6b7280)}.multiselect-field__list{margin:0;padding:.25rem 0;width:100%;flex:0 1 auto;min-height:0;max-height:min(320px,45vh);-webkit-overflow-scrolling:touch;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__empty{margin:0;padding:.85rem .75rem;min-height:3rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.9rem;line-height:1.35;font-weight:var(--structra-body-weight, 400);color:var(--app-color-text-muted, #6b7280);user-select:none;-webkit-user-select:none}.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}.multiselect-field__value-btn,.multiselect-field__input{--structra-field-input-font-size: 1rem;--structra-field-input-line-height: 1.35;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height);font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));-webkit-text-size-adjust:100%}:host ::ng-deep .base-field--size-sm .multiselect-field__value-btn,:host ::ng-deep .base-field--size-sm .multiselect-field__input{--structra-field-input-font-size: .8125rem;--structra-field-input-line-height: 1.25;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height)}:host ::ng-deep .base-field--size-lg .multiselect-field__value-btn,:host ::ng-deep .base-field--size-lg .multiselect-field__input{--structra-field-input-font-size: 1.0625rem;--structra-field-input-line-height: 1.4;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height)}\n"] }]
|
|
8162
8162
|
}], propDecorators: { hostInvalidClass: [{
|
|
8163
8163
|
type: HostBinding,
|
|
8164
8164
|
args: ['class.multiselect-field--invalid']
|
|
@@ -8864,7 +8864,7 @@ class DropdownSearchFieldComponent extends DropdownOptionFieldBase {
|
|
|
8864
8864
|
useExisting: forwardRef(() => DropdownSearchFieldComponent),
|
|
8865
8865
|
multi: true,
|
|
8866
8866
|
},
|
|
8867
|
-
], viewQueries: [{ propertyName: "optionsPanelTpl", first: true, predicate: ["optionsPanelTpl"], descendants: true, static: true }, { propertyName: "dropdownTriggerRootRef", first: true, predicate: ["dropdownFieldTriggerRoot"], descendants: true, read: ElementRef }, { propertyName: "dropdownBase", first: true, predicate: DropdownBaseComponent, descendants: true }, { propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }, { propertyName: "optionsListRef", first: true, predicate: ["optionsListEl"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [size]=\"effectiveFieldSize\" [loading]=\"loading\" [errorMessage]=\"uiErrorMessage\" [required]=\"requiredEffective\"\n [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\n [errorId]=\"errorElementId\" [hint]=\"hint\" [hintId]=\"hintElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\n [clearAriaLabel]=\"clearAriaLabel\" [showSuffixSlot]=\"true\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\"\n [contextMenuId]=\"contextMenuId\" (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 [flexibleConnectedOverlay]=\"false\" (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\"\n [attr.tabindex]=\"readonly ? -1 : null\" [attr.placeholder]=\"''\"\n autocomplete=\"off\" spellcheck=\"false\" [attr.aria-expanded]=\"panelOpen\" aria-autocomplete=\"list\"\n role=\"combobox\" [attr.aria-controls]=\"panelOpen ? optionsListId : null\" [attr.aria-invalid]=\"uiInvalid\"\n [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [attr.aria-label]=\"floatLabelCaption || placeholder || 'Buscar e selecionar'\" [value]=\"searchQuery\"\n (focus)=\"onMainFocus()\" (input)=\"onMainInput($event)\" (keydown)=\"onMainKeydown($event)\"\n (blur)=\"onMainBlur($event)\" />\n <span class=\"dropdown-search-field__trigger-suffix\">\n <ng-content select=\"[appMultiselectTriggerSuffix]\" />\n </span>\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 #optionsListEl 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]=\"1\" />\n }\n @if (listOptions.length === 0 && !optionsLoading && !loadingMore) {\n <div class=\"dropdown-search-field__empty\" role=\"status\" aria-live=\"polite\">{{ emptyOptionsMessage }}</div>\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 <div class=\"dropdown-search-field__loading-more\" role=\"status\" aria-live=\"polite\">Carregando\u2026</div>\n }\n </div>\n </div>\n</ng-template>", styles: ["@charset \"UTF-8\";@keyframes structraNativeAutofillStart{0%{opacity:1}to{opacity:1}}:host{display:block;width:100%;box-sizing:border-box}:host ::ng-deep .base-field__float-label{right:6.75rem}: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{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;min-height:calc(1.8rem + 1.35em);-webkit-text-size-adjust:100%;-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:-webkit-autofill:first-line,.dropdown-search-field__input:-webkit-autofill:hover:first-line,.dropdown-search-field__input:-webkit-autofill:focus:first-line,.dropdown-search-field__input:-webkit-autofill:active:first-line,.dropdown-search-field__input:-webkit-autofill:focus-visible:first-line{font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-webkit-text-fill-color:var(--ui-field-float-input-text)!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{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;min-height:calc(1.8rem + 1.35em);-webkit-text-size-adjust:100%;-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:autofill:first-line,.dropdown-search-field__input:autofill:hover:first-line,.dropdown-search-field__input:autofill:focus:first-line,.dropdown-search-field__input:autofill:active:first-line,.dropdown-search-field__input:autofill:focus-visible:first-line{font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-webkit-text-fill-color:var(--ui-field-float-input-text)!important}.dropdown-search-field__input:-internal-autofill-previewed,.dropdown-search-field__input:-internal-autofill-previewed:first-line,.dropdown-search-field__input:-internal-autofill-selected,.dropdown-search-field__input:-internal-autofill-selected:first-line{font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%}.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:text;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__trigger-suffix{display:flex;flex-shrink:0;align-items:center;align-self:center;box-sizing:border-box;padding-top:3px}.dropdown-search-field__trigger-suffix:not(:has(>*)){display:none}.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}:host.dropdown-search-field--invalid .dropdown-search-field__trigger-suffix{--ui-field-float-prefix-color: var(--ui-field-float-label-invalid-color);--ui-field-float-label-top-color: var(--ui-field-float-label-invalid-color);--ui-field-icon-slot-hover-bg: rgba(185, 28, 28, .12);color:var(--ui-field-float-label-invalid-color)}.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:block;width:100%;max-height:min(280px,45vh);box-sizing:border-box;overflow:hidden;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.dropdown-search-field__list{margin:0;padding:.25rem 0;width:100%;max-height:min(280px,45vh);box-sizing:border-box;outline:none;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.dropdown-search-field__loading-more{margin:0;padding:.5rem .75rem;font-size:.8125rem;line-height:1.25;color:var(--app-color-text-muted, #6b7280);text-align:center;-webkit-user-select:none;user-select:none}.dropdown-search-field__empty{margin:0;padding:.85rem .75rem;min-height:3rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.9rem;line-height:1.35;font-weight:var(--structra-body-weight, 400);color:var(--app-color-text-muted, #6b7280);user-select:none;-webkit-user-select:none}.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", "hint", "hintId", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "labelAlwaysFloated", "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", "flexibleConnectedOverlay", "connectedOverlayViewportMargin", "lockConnectedOverlayPosition", "scrollStrategy", "bareOverlayPanel"], outputs: ["openChange"] }, { kind: "component", type: SkeletonListComponent, selector: "app-skeleton-list", inputs: ["rows", "leading", "rowGap", "lineHeight", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8867
|
+
], viewQueries: [{ propertyName: "optionsPanelTpl", first: true, predicate: ["optionsPanelTpl"], descendants: true, static: true }, { propertyName: "dropdownTriggerRootRef", first: true, predicate: ["dropdownFieldTriggerRoot"], descendants: true, read: ElementRef }, { propertyName: "dropdownBase", first: true, predicate: DropdownBaseComponent, descendants: true }, { propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true, read: ElementRef }, { propertyName: "optionsListRef", first: true, predicate: ["optionsListEl"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [size]=\"effectiveFieldSize\" [loading]=\"loading\" [errorMessage]=\"uiErrorMessage\" [required]=\"requiredEffective\"\n [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\n [errorId]=\"errorElementId\" [hint]=\"hint\" [hintId]=\"hintElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\n [clearAriaLabel]=\"clearAriaLabel\" [showSuffixSlot]=\"true\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\"\n [contextMenuId]=\"contextMenuId\" (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 [flexibleConnectedOverlay]=\"false\" (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\"\n [attr.tabindex]=\"readonly ? -1 : null\" [attr.placeholder]=\"''\"\n autocomplete=\"off\" spellcheck=\"false\" [attr.aria-expanded]=\"panelOpen\" aria-autocomplete=\"list\"\n role=\"combobox\" [attr.aria-controls]=\"panelOpen ? optionsListId : null\" [attr.aria-invalid]=\"uiInvalid\"\n [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [attr.aria-label]=\"floatLabelCaption || placeholder || 'Buscar e selecionar'\" [value]=\"searchQuery\"\n (focus)=\"onMainFocus()\" (input)=\"onMainInput($event)\" (keydown)=\"onMainKeydown($event)\"\n (blur)=\"onMainBlur($event)\" />\n <span class=\"dropdown-search-field__trigger-suffix\">\n <ng-content select=\"[appMultiselectTriggerSuffix]\" />\n </span>\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 #optionsListEl 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]=\"1\" />\n }\n @if (listOptions.length === 0 && !optionsLoading && !loadingMore) {\n <div class=\"dropdown-search-field__empty\" role=\"status\" aria-live=\"polite\">{{ emptyOptionsMessage }}</div>\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 <div class=\"dropdown-search-field__loading-more\" role=\"status\" aria-live=\"polite\">Carregando\u2026</div>\n }\n </div>\n </div>\n</ng-template>", styles: ["@charset \"UTF-8\";@keyframes structraNativeAutofillStart{0%{opacity:1}to{opacity:1}}:host{display:block;width:100%;box-sizing:border-box}:host ::ng-deep .base-field__float-label{right:6.75rem}: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;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{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;min-height:calc(1.8rem + 1.35em);-webkit-text-size-adjust:100%;-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:-webkit-autofill:first-line,.dropdown-search-field__input:-webkit-autofill:hover:first-line,.dropdown-search-field__input:-webkit-autofill:focus:first-line,.dropdown-search-field__input:-webkit-autofill:active:first-line,.dropdown-search-field__input:-webkit-autofill:focus-visible:first-line{font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-webkit-text-fill-color:var(--ui-field-float-input-text)!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{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;min-height:calc(1.8rem + 1.35em);-webkit-text-size-adjust:100%;-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:autofill:first-line,.dropdown-search-field__input:autofill:hover:first-line,.dropdown-search-field__input:autofill:focus:first-line,.dropdown-search-field__input:autofill:active:first-line,.dropdown-search-field__input:autofill:focus-visible:first-line{font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-webkit-text-fill-color:var(--ui-field-float-input-text)!important}.dropdown-search-field__input:-internal-autofill-previewed,.dropdown-search-field__input:-internal-autofill-previewed:first-line,.dropdown-search-field__input:-internal-autofill-selected,.dropdown-search-field__input:-internal-autofill-selected:first-line{font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%}.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:text;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__trigger-suffix{display:flex;flex-shrink:0;align-items:center;align-self:center;box-sizing:border-box;padding-top:3px}.dropdown-search-field__trigger-suffix:not(:has(>*)){display:none}.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}:host.dropdown-search-field--invalid .dropdown-search-field__trigger-suffix{--ui-field-float-prefix-color: var(--ui-field-float-label-invalid-color);--ui-field-float-label-top-color: var(--ui-field-float-label-invalid-color);--ui-field-icon-slot-hover-bg: rgba(185, 28, 28, .12);color:var(--ui-field-float-label-invalid-color)}.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:block;width:100%;max-height:min(280px,45vh);box-sizing:border-box;overflow:hidden;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.dropdown-search-field__list{margin:0;padding:.25rem 0;width:100%;max-height:min(280px,45vh);box-sizing:border-box;outline:none;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.dropdown-search-field__loading-more{margin:0;padding:.5rem .75rem;font-size:.8125rem;line-height:1.25;color:var(--app-color-text-muted, #6b7280);text-align:center;-webkit-user-select:none;user-select:none}.dropdown-search-field__empty{margin:0;padding:.85rem .75rem;min-height:3rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.9rem;line-height:1.35;font-weight:var(--structra-body-weight, 400);color:var(--app-color-text-muted, #6b7280);user-select:none;-webkit-user-select:none}.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)}.dropdown-search-field__value-btn,.dropdown-search-field__input{--structra-field-input-font-size: 1rem;--structra-field-input-line-height: 1.35;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height);font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));-webkit-text-size-adjust:100%}:host ::ng-deep .base-field--size-sm .dropdown-search-field__value-btn,:host ::ng-deep .base-field--size-sm .dropdown-search-field__input{--structra-field-input-font-size: .8125rem;--structra-field-input-line-height: 1.25;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height)}:host ::ng-deep .base-field--size-lg .dropdown-search-field__value-btn,:host ::ng-deep .base-field--size-lg .dropdown-search-field__input{--structra-field-input-font-size: 1.0625rem;--structra-field-input-line-height: 1.4;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height)}\n"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "hint", "hintId", "required", "showRequiredMark", "invalid", "invalidThemed", "filled", "labelAlwaysFloated", "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", "flexibleConnectedOverlay", "connectedOverlayViewportMargin", "lockConnectedOverlayPosition", "scrollStrategy", "bareOverlayPanel"], outputs: ["openChange"] }, { kind: "component", type: SkeletonListComponent, selector: "app-skeleton-list", inputs: ["rows", "leading", "rowGap", "lineHeight", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8868
8868
|
}
|
|
8869
8869
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownSearchFieldComponent, decorators: [{
|
|
8870
8870
|
type: Component,
|
|
@@ -8874,7 +8874,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
8874
8874
|
useExisting: forwardRef(() => DropdownSearchFieldComponent),
|
|
8875
8875
|
multi: true,
|
|
8876
8876
|
},
|
|
8877
|
-
], template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [size]=\"effectiveFieldSize\" [loading]=\"loading\" [errorMessage]=\"uiErrorMessage\" [required]=\"requiredEffective\"\n [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\n [errorId]=\"errorElementId\" [hint]=\"hint\" [hintId]=\"hintElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\n [clearAriaLabel]=\"clearAriaLabel\" [showSuffixSlot]=\"true\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\"\n [contextMenuId]=\"contextMenuId\" (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 [flexibleConnectedOverlay]=\"false\" (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\"\n [attr.tabindex]=\"readonly ? -1 : null\" [attr.placeholder]=\"''\"\n autocomplete=\"off\" spellcheck=\"false\" [attr.aria-expanded]=\"panelOpen\" aria-autocomplete=\"list\"\n role=\"combobox\" [attr.aria-controls]=\"panelOpen ? optionsListId : null\" [attr.aria-invalid]=\"uiInvalid\"\n [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [attr.aria-label]=\"floatLabelCaption || placeholder || 'Buscar e selecionar'\" [value]=\"searchQuery\"\n (focus)=\"onMainFocus()\" (input)=\"onMainInput($event)\" (keydown)=\"onMainKeydown($event)\"\n (blur)=\"onMainBlur($event)\" />\n <span class=\"dropdown-search-field__trigger-suffix\">\n <ng-content select=\"[appMultiselectTriggerSuffix]\" />\n </span>\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 #optionsListEl 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]=\"1\" />\n }\n @if (listOptions.length === 0 && !optionsLoading && !loadingMore) {\n <div class=\"dropdown-search-field__empty\" role=\"status\" aria-live=\"polite\">{{ emptyOptionsMessage }}</div>\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 <div class=\"dropdown-search-field__loading-more\" role=\"status\" aria-live=\"polite\">Carregando\u2026</div>\n }\n </div>\n </div>\n</ng-template>", styles: ["@charset \"UTF-8\";@keyframes structraNativeAutofillStart{0%{opacity:1}to{opacity:1}}:host{display:block;width:100%;box-sizing:border-box}:host ::ng-deep .base-field__float-label{right:6.75rem}: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{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;min-height:calc(1.8rem + 1.35em);-webkit-text-size-adjust:100%;-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:-webkit-autofill:first-line,.dropdown-search-field__input:-webkit-autofill:hover:first-line,.dropdown-search-field__input:-webkit-autofill:focus:first-line,.dropdown-search-field__input:-webkit-autofill:active:first-line,.dropdown-search-field__input:-webkit-autofill:focus-visible:first-line{font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-webkit-text-fill-color:var(--ui-field-float-input-text)!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{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;min-height:calc(1.8rem + 1.35em);-webkit-text-size-adjust:100%;-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:autofill:first-line,.dropdown-search-field__input:autofill:hover:first-line,.dropdown-search-field__input:autofill:focus:first-line,.dropdown-search-field__input:autofill:active:first-line,.dropdown-search-field__input:autofill:focus-visible:first-line{font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-webkit-text-fill-color:var(--ui-field-float-input-text)!important}.dropdown-search-field__input:-internal-autofill-previewed,.dropdown-search-field__input:-internal-autofill-previewed:first-line,.dropdown-search-field__input:-internal-autofill-selected,.dropdown-search-field__input:-internal-autofill-selected:first-line{font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%}.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:text;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__trigger-suffix{display:flex;flex-shrink:0;align-items:center;align-self:center;box-sizing:border-box;padding-top:3px}.dropdown-search-field__trigger-suffix:not(:has(>*)){display:none}.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}:host.dropdown-search-field--invalid .dropdown-search-field__trigger-suffix{--ui-field-float-prefix-color: var(--ui-field-float-label-invalid-color);--ui-field-float-label-top-color: var(--ui-field-float-label-invalid-color);--ui-field-icon-slot-hover-bg: rgba(185, 28, 28, .12);color:var(--ui-field-float-label-invalid-color)}.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:block;width:100%;max-height:min(280px,45vh);box-sizing:border-box;overflow:hidden;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.dropdown-search-field__list{margin:0;padding:.25rem 0;width:100%;max-height:min(280px,45vh);box-sizing:border-box;outline:none;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.dropdown-search-field__loading-more{margin:0;padding:.5rem .75rem;font-size:.8125rem;line-height:1.25;color:var(--app-color-text-muted, #6b7280);text-align:center;-webkit-user-select:none;user-select:none}.dropdown-search-field__empty{margin:0;padding:.85rem .75rem;min-height:3rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.9rem;line-height:1.35;font-weight:var(--structra-body-weight, 400);color:var(--app-color-text-muted, #6b7280);user-select:none;-webkit-user-select:none}.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"] }]
|
|
8877
|
+
], template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n [size]=\"effectiveFieldSize\" [loading]=\"loading\" [errorMessage]=\"uiErrorMessage\" [required]=\"requiredEffective\"\n [showRequiredMark]=\"showRequiredMark\" [invalid]=\"uiInvalid\" [invalidThemed]=\"invalidThemed\" [inputId]=\"controlId\"\n [errorId]=\"errorElementId\" [hint]=\"hint\" [hintId]=\"hintElementId\" [showPrefixIcon]=\"showPrefixIcon\" [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\"\n [clearAriaLabel]=\"clearAriaLabel\" [showSuffixSlot]=\"true\"\n [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\"\n [contextMenuId]=\"contextMenuId\" (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 [flexibleConnectedOverlay]=\"false\" (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\"\n [attr.tabindex]=\"readonly ? -1 : null\" [attr.placeholder]=\"''\"\n autocomplete=\"off\" spellcheck=\"false\" [attr.aria-expanded]=\"panelOpen\" aria-autocomplete=\"list\"\n role=\"combobox\" [attr.aria-controls]=\"panelOpen ? optionsListId : null\" [attr.aria-invalid]=\"uiInvalid\"\n [attr.aria-describedby]=\"uiAriaDescribedBy\"\n [attr.aria-label]=\"floatLabelCaption || placeholder || 'Buscar e selecionar'\" [value]=\"searchQuery\"\n (focus)=\"onMainFocus()\" (input)=\"onMainInput($event)\" (keydown)=\"onMainKeydown($event)\"\n (blur)=\"onMainBlur($event)\" />\n <span class=\"dropdown-search-field__trigger-suffix\">\n <ng-content select=\"[appMultiselectTriggerSuffix]\" />\n </span>\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 #optionsListEl 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]=\"1\" />\n }\n @if (listOptions.length === 0 && !optionsLoading && !loadingMore) {\n <div class=\"dropdown-search-field__empty\" role=\"status\" aria-live=\"polite\">{{ emptyOptionsMessage }}</div>\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 <div class=\"dropdown-search-field__loading-more\" role=\"status\" aria-live=\"polite\">Carregando\u2026</div>\n }\n </div>\n </div>\n</ng-template>", styles: ["@charset \"UTF-8\";@keyframes structraNativeAutofillStart{0%{opacity:1}to{opacity:1}}:host{display:block;width:100%;box-sizing:border-box}:host ::ng-deep .base-field__float-label{right:6.75rem}: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;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{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;min-height:calc(1.8rem + 1.35em);-webkit-text-size-adjust:100%;-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:-webkit-autofill:first-line,.dropdown-search-field__input:-webkit-autofill:hover:first-line,.dropdown-search-field__input:-webkit-autofill:focus:first-line,.dropdown-search-field__input:-webkit-autofill:active:first-line,.dropdown-search-field__input:-webkit-autofill:focus-visible:first-line{font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-webkit-text-fill-color:var(--ui-field-float-input-text)!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{animation-name:structraNativeAutofillStart;animation-duration:1ms;font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;min-height:calc(1.8rem + 1.35em);-webkit-text-size-adjust:100%;-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:autofill:first-line,.dropdown-search-field__input:autofill:hover:first-line,.dropdown-search-field__input:autofill:focus:first-line,.dropdown-search-field__input:autofill:active:first-line,.dropdown-search-field__input:autofill:focus-visible:first-line{font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%;-webkit-text-fill-color:var(--ui-field-float-input-text)!important}.dropdown-search-field__input:-internal-autofill-previewed,.dropdown-search-field__input:-internal-autofill-previewed:first-line,.dropdown-search-field__input:-internal-autofill-selected,.dropdown-search-field__input:-internal-autofill-selected:first-line{font-size:16px!important;line-height:21.6px!important;font-family:inherit!important;font-weight:inherit!important;-webkit-text-size-adjust:100%}.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:text;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__trigger-suffix{display:flex;flex-shrink:0;align-items:center;align-self:center;box-sizing:border-box;padding-top:3px}.dropdown-search-field__trigger-suffix:not(:has(>*)){display:none}.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}:host.dropdown-search-field--invalid .dropdown-search-field__trigger-suffix{--ui-field-float-prefix-color: var(--ui-field-float-label-invalid-color);--ui-field-float-label-top-color: var(--ui-field-float-label-invalid-color);--ui-field-icon-slot-hover-bg: rgba(185, 28, 28, .12);color:var(--ui-field-float-label-invalid-color)}.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:block;width:100%;max-height:min(280px,45vh);box-sizing:border-box;overflow:hidden;background:var(--app-color-nav-surface, var(--app-color-surface, #fff))}.dropdown-search-field__list{margin:0;padding:.25rem 0;width:100%;max-height:min(280px,45vh);box-sizing:border-box;outline:none;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.dropdown-search-field__loading-more{margin:0;padding:.5rem .75rem;font-size:.8125rem;line-height:1.25;color:var(--app-color-text-muted, #6b7280);text-align:center;-webkit-user-select:none;user-select:none}.dropdown-search-field__empty{margin:0;padding:.85rem .75rem;min-height:3rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.9rem;line-height:1.35;font-weight:var(--structra-body-weight, 400);color:var(--app-color-text-muted, #6b7280);user-select:none;-webkit-user-select:none}.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)}.dropdown-search-field__value-btn,.dropdown-search-field__input{--structra-field-input-font-size: 1rem;--structra-field-input-line-height: 1.35;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height);font-family:inherit;font-weight:var(--field-value-weight, var(--structra-body-weight));-webkit-text-size-adjust:100%}:host ::ng-deep .base-field--size-sm .dropdown-search-field__value-btn,:host ::ng-deep .base-field--size-sm .dropdown-search-field__input{--structra-field-input-font-size: .8125rem;--structra-field-input-line-height: 1.25;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height)}:host ::ng-deep .base-field--size-lg .dropdown-search-field__value-btn,:host ::ng-deep .base-field--size-lg .dropdown-search-field__input{--structra-field-input-font-size: 1.0625rem;--structra-field-input-line-height: 1.4;font-size:var(--structra-field-input-font-size);line-height:var(--structra-field-input-line-height)}\n"] }]
|
|
8878
8878
|
}], propDecorators: { hostInvalidClass: [{
|
|
8879
8879
|
type: HostBinding,
|
|
8880
8880
|
args: ['class.dropdown-search-field--invalid']
|
|
@@ -20167,14 +20167,14 @@ class StructraCookieNoticeComponent {
|
|
|
20167
20167
|
window.setTimeout(() => this.cookieNotice.accept(), DISMISS_ANIMATION_MS);
|
|
20168
20168
|
}
|
|
20169
20169
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StructraCookieNoticeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
20170
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: StructraCookieNoticeComponent, isStandalone: true, selector: "app-structra-cookie-notice", host: { properties: { "class.structra-cookie-notice-host--visible": "visible()" }, classAttribute: "structra-cookie-notice-host" }, ngImport: i0, template: "@if (visible()) {\n<div\n class=\"structra-cookie-notice\"\n [class.structra-cookie-notice--hiding]=\"hiding()\"\n role=\"region\"\n [attr.aria-label]=\"copy().regionAriaLabel\"\n>\n <div class=\"structra-cookie-notice__icon\" aria-hidden=\"true\">\n <i class=\"fa-solid fa-cookie-bite\"></i>\n </div>\n\n <div class=\"structra-cookie-notice__content\">\n <p class=\"structra-cookie-notice__title\">{{ copy().title }}</p>\n <p class=\"structra-cookie-notice__description\">{{ copy().description }}</p>\n </div>\n\n <div class=\"structra-cookie-notice__actions\">\n <app-button\n type=\"button\"\n variant=\"primary\"\n size=\"md\"\n [fullWidth]=\"false\"\n [attr.aria-label]=\"copy().acceptAriaLabel\"\n (click)=\"accept()\"\n >\n {{ copy().acceptLabel }}\n </app-button>\n </div>\n\n <button\n type=\"button\"\n class=\"structra-cookie-notice__close\"\n [attr.aria-label]=\"copy().closeAriaLabel\"\n (click)=\"accept()\"\n >\n <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n </button>\n</div>\n}\n", styles: [":host{display:flex;justify-content:center;position:fixed;inset-inline:0;bottom:0;z-index:1100;pointer-events:none;padding:0 .75rem .75rem;box-sizing:border-box;max-width:100vw}:host:not(.structra-cookie-notice-host--visible){display:none}.structra-cookie-notice{pointer-events:auto;box-sizing:border-box;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:\"icon content\" \"actions actions\";align-items:start;column-gap:1rem;row-gap:.875rem;width:100%;margin-inline:0;padding:1rem 1.125rem;padding-inline-end:2.75rem;border-radius:.75rem;border:1px solid var(--app-color-border-subtle, rgba(15, 23, 42, .1));background:var(--app-color-surface, #fff);color:var(--app-color-text-primary, #1a2f45);box-shadow:0 10px 24px color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 10%,transparent),0 2px 6px color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 6%,transparent);animation:structra-cookie-notice-enter .28s ease-out;transition:opacity .22s ease,transform .22s ease;position:relative}.structra-cookie-notice--hiding{opacity:0;transform:translateY(.65rem)}.structra-cookie-notice__icon{grid-area:icon;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:999px;background:color-mix(in srgb,var(--app-color-primary, #2563eb) 12%,var(--app-color-surface, #fff));color:var(--app-color-primary, #2563eb);font-size:1.05rem}.structra-cookie-notice__content{grid-area:content;min-width:0}.structra-cookie-notice__title{margin:0;font-size:.9375rem;font-weight:600;line-height:1.35;color:var(--app-color-text-primary, #1a2f45)}.structra-cookie-notice__description{margin:.35rem 0 0;font-size:.8125rem;line-height:1.45;color:var(--app-color-text-secondary, #4a6682)}.structra-cookie-notice__actions{grid-area:actions;display:flex;align-items:center;align-self:center;justify-self:start}.structra-cookie-notice__close{position:absolute;top:.65rem;inset-inline-end:.65rem;display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:0;border-radius:.375rem;background:transparent;color:var(--app-color-text-secondary, #4a6682);cursor:pointer;transition:background-color .15s ease,color .15s ease}.structra-cookie-notice__close:hover{background:color-mix(in srgb,var(--app-color-text-secondary, #4a6682) 12%,transparent);color:var(--app-color-text-primary, #1a2f45)}.structra-cookie-notice__close:focus-visible{outline:2px solid var(--app-color-primary, #2563eb);outline-offset:2px}@media(min-width:840px){:host{inset-inline:0;bottom:max(1rem,env(safe-area-inset-bottom));padding:0 1rem}.structra-cookie-notice{grid-template-columns:auto minmax(0,1fr);grid-template-areas:\"icon content\" \"
|
|
20170
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: StructraCookieNoticeComponent, isStandalone: true, selector: "app-structra-cookie-notice", host: { properties: { "class.structra-cookie-notice-host--visible": "visible()" }, classAttribute: "structra-cookie-notice-host" }, ngImport: i0, template: "@if (visible()) {\n<div\n class=\"structra-cookie-notice\"\n [class.structra-cookie-notice--hiding]=\"hiding()\"\n role=\"region\"\n [attr.aria-label]=\"copy().regionAriaLabel\"\n>\n <div class=\"structra-cookie-notice__icon\" aria-hidden=\"true\">\n <i class=\"fa-solid fa-cookie-bite\"></i>\n </div>\n\n <div class=\"structra-cookie-notice__content\">\n <p class=\"structra-cookie-notice__title\">{{ copy().title }}</p>\n <p class=\"structra-cookie-notice__description\">{{ copy().description }}</p>\n </div>\n\n <div class=\"structra-cookie-notice__actions\">\n <app-button\n type=\"button\"\n variant=\"primary\"\n size=\"md\"\n [fullWidth]=\"false\"\n [attr.aria-label]=\"copy().acceptAriaLabel\"\n (click)=\"accept()\"\n >\n {{ copy().acceptLabel }}\n </app-button>\n </div>\n\n <button\n type=\"button\"\n class=\"structra-cookie-notice__close\"\n [attr.aria-label]=\"copy().closeAriaLabel\"\n (click)=\"accept()\"\n >\n <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n </button>\n</div>\n}\n", styles: [":host{display:flex;justify-content:center;position:fixed;inset-inline:0;bottom:0;z-index:1100;pointer-events:none;padding:0 .75rem .75rem;box-sizing:border-box;max-width:100vw}:host:not(.structra-cookie-notice-host--visible){display:none}.structra-cookie-notice{pointer-events:auto;box-sizing:border-box;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:\"icon content\" \"actions actions\";align-items:start;column-gap:1rem;row-gap:.875rem;width:100%;margin-inline:0;padding:1rem 1.125rem;padding-inline-end:2.75rem;border-radius:.75rem;border:1px solid var(--app-color-border-subtle, rgba(15, 23, 42, .1));background:var(--app-color-surface, #fff);color:var(--app-color-text-primary, #1a2f45);box-shadow:0 10px 24px color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 10%,transparent),0 2px 6px color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 6%,transparent);animation:structra-cookie-notice-enter .28s ease-out;transition:opacity .22s ease,transform .22s ease;position:relative}.structra-cookie-notice--hiding{opacity:0;transform:translateY(.65rem)}.structra-cookie-notice__icon{grid-area:icon;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:999px;background:color-mix(in srgb,var(--app-color-primary, #2563eb) 12%,var(--app-color-surface, #fff));color:var(--app-color-primary, #2563eb);font-size:1.05rem}.structra-cookie-notice__content{grid-area:content;min-width:0}.structra-cookie-notice__title{margin:0;font-size:.9375rem;font-weight:600;line-height:1.35;color:var(--app-color-text-primary, #1a2f45)}.structra-cookie-notice__description{margin:.35rem 0 0;font-size:.8125rem;line-height:1.45;color:var(--app-color-text-secondary, #4a6682)}.structra-cookie-notice__actions{grid-area:actions;display:flex;align-items:center;align-self:center;justify-self:start}.structra-cookie-notice__close{position:absolute;top:.65rem;inset-inline-end:.65rem;display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:0;border-radius:.375rem;background:transparent;color:var(--app-color-text-secondary, #4a6682);cursor:pointer;transition:background-color .15s ease,color .15s ease}.structra-cookie-notice__close:hover{background:color-mix(in srgb,var(--app-color-text-secondary, #4a6682) 12%,transparent);color:var(--app-color-text-primary, #1a2f45)}.structra-cookie-notice__close:focus-visible{outline:2px solid var(--app-color-primary, #2563eb);outline-offset:2px}@media(min-width:840px){:host{inset-inline:0;bottom:max(1rem,env(safe-area-inset-bottom));padding:0 1rem}.structra-cookie-notice{grid-template-columns:auto minmax(0,1fr);grid-template-areas:\"icon content\" \". actions\";align-items:start;width:100%;max-width:min(42rem,92vw);margin-inline:0}.structra-cookie-notice__actions{justify-self:stretch;width:100%;justify-content:flex-end}}@media(max-width:639px){:host{padding:0;padding-bottom:env(safe-area-inset-bottom,0)}.structra-cookie-notice{column-gap:.625rem;row-gap:.625rem;max-width:none;padding:.75rem 2.5rem .75rem .75rem;border-radius:.75rem .75rem 0 0}.structra-cookie-notice__icon{width:2rem;height:2rem;font-size:.95rem}.structra-cookie-notice__title{font-size:.875rem}.structra-cookie-notice__description{margin-top:.25rem;font-size:.75rem;line-height:1.4}.structra-cookie-notice__actions{grid-area:actions;align-self:stretch;width:100%}:host ::ng-deep .structra-cookie-notice__actions app-button{display:block;width:100%}:host ::ng-deep .structra-cookie-notice__actions app-button .base-button__native{width:100%}.structra-cookie-notice__close{top:.5rem;inset-inline-end:.5rem}}@keyframes structra-cookie-notice-enter{0%{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "app-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
20171
20171
|
}
|
|
20172
20172
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StructraCookieNoticeComponent, decorators: [{
|
|
20173
20173
|
type: Component,
|
|
20174
20174
|
args: [{ selector: 'app-structra-cookie-notice', standalone: true, imports: [ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
20175
20175
|
class: 'structra-cookie-notice-host',
|
|
20176
20176
|
'[class.structra-cookie-notice-host--visible]': 'visible()',
|
|
20177
|
-
}, template: "@if (visible()) {\n<div\n class=\"structra-cookie-notice\"\n [class.structra-cookie-notice--hiding]=\"hiding()\"\n role=\"region\"\n [attr.aria-label]=\"copy().regionAriaLabel\"\n>\n <div class=\"structra-cookie-notice__icon\" aria-hidden=\"true\">\n <i class=\"fa-solid fa-cookie-bite\"></i>\n </div>\n\n <div class=\"structra-cookie-notice__content\">\n <p class=\"structra-cookie-notice__title\">{{ copy().title }}</p>\n <p class=\"structra-cookie-notice__description\">{{ copy().description }}</p>\n </div>\n\n <div class=\"structra-cookie-notice__actions\">\n <app-button\n type=\"button\"\n variant=\"primary\"\n size=\"md\"\n [fullWidth]=\"false\"\n [attr.aria-label]=\"copy().acceptAriaLabel\"\n (click)=\"accept()\"\n >\n {{ copy().acceptLabel }}\n </app-button>\n </div>\n\n <button\n type=\"button\"\n class=\"structra-cookie-notice__close\"\n [attr.aria-label]=\"copy().closeAriaLabel\"\n (click)=\"accept()\"\n >\n <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n </button>\n</div>\n}\n", styles: [":host{display:flex;justify-content:center;position:fixed;inset-inline:0;bottom:0;z-index:1100;pointer-events:none;padding:0 .75rem .75rem;box-sizing:border-box;max-width:100vw}:host:not(.structra-cookie-notice-host--visible){display:none}.structra-cookie-notice{pointer-events:auto;box-sizing:border-box;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:\"icon content\" \"actions actions\";align-items:start;column-gap:1rem;row-gap:.875rem;width:100%;margin-inline:0;padding:1rem 1.125rem;padding-inline-end:2.75rem;border-radius:.75rem;border:1px solid var(--app-color-border-subtle, rgba(15, 23, 42, .1));background:var(--app-color-surface, #fff);color:var(--app-color-text-primary, #1a2f45);box-shadow:0 10px 24px color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 10%,transparent),0 2px 6px color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 6%,transparent);animation:structra-cookie-notice-enter .28s ease-out;transition:opacity .22s ease,transform .22s ease;position:relative}.structra-cookie-notice--hiding{opacity:0;transform:translateY(.65rem)}.structra-cookie-notice__icon{grid-area:icon;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:999px;background:color-mix(in srgb,var(--app-color-primary, #2563eb) 12%,var(--app-color-surface, #fff));color:var(--app-color-primary, #2563eb);font-size:1.05rem}.structra-cookie-notice__content{grid-area:content;min-width:0}.structra-cookie-notice__title{margin:0;font-size:.9375rem;font-weight:600;line-height:1.35;color:var(--app-color-text-primary, #1a2f45)}.structra-cookie-notice__description{margin:.35rem 0 0;font-size:.8125rem;line-height:1.45;color:var(--app-color-text-secondary, #4a6682)}.structra-cookie-notice__actions{grid-area:actions;display:flex;align-items:center;align-self:center;justify-self:start}.structra-cookie-notice__close{position:absolute;top:.65rem;inset-inline-end:.65rem;display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:0;border-radius:.375rem;background:transparent;color:var(--app-color-text-secondary, #4a6682);cursor:pointer;transition:background-color .15s ease,color .15s ease}.structra-cookie-notice__close:hover{background:color-mix(in srgb,var(--app-color-text-secondary, #4a6682) 12%,transparent);color:var(--app-color-text-primary, #1a2f45)}.structra-cookie-notice__close:focus-visible{outline:2px solid var(--app-color-primary, #2563eb);outline-offset:2px}@media(min-width:840px){:host{inset-inline:0;bottom:max(1rem,env(safe-area-inset-bottom));padding:0 1rem}.structra-cookie-notice{grid-template-columns:auto minmax(0,1fr);grid-template-areas:\"icon content\" \"
|
|
20177
|
+
}, template: "@if (visible()) {\n<div\n class=\"structra-cookie-notice\"\n [class.structra-cookie-notice--hiding]=\"hiding()\"\n role=\"region\"\n [attr.aria-label]=\"copy().regionAriaLabel\"\n>\n <div class=\"structra-cookie-notice__icon\" aria-hidden=\"true\">\n <i class=\"fa-solid fa-cookie-bite\"></i>\n </div>\n\n <div class=\"structra-cookie-notice__content\">\n <p class=\"structra-cookie-notice__title\">{{ copy().title }}</p>\n <p class=\"structra-cookie-notice__description\">{{ copy().description }}</p>\n </div>\n\n <div class=\"structra-cookie-notice__actions\">\n <app-button\n type=\"button\"\n variant=\"primary\"\n size=\"md\"\n [fullWidth]=\"false\"\n [attr.aria-label]=\"copy().acceptAriaLabel\"\n (click)=\"accept()\"\n >\n {{ copy().acceptLabel }}\n </app-button>\n </div>\n\n <button\n type=\"button\"\n class=\"structra-cookie-notice__close\"\n [attr.aria-label]=\"copy().closeAriaLabel\"\n (click)=\"accept()\"\n >\n <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n </button>\n</div>\n}\n", styles: [":host{display:flex;justify-content:center;position:fixed;inset-inline:0;bottom:0;z-index:1100;pointer-events:none;padding:0 .75rem .75rem;box-sizing:border-box;max-width:100vw}:host:not(.structra-cookie-notice-host--visible){display:none}.structra-cookie-notice{pointer-events:auto;box-sizing:border-box;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:\"icon content\" \"actions actions\";align-items:start;column-gap:1rem;row-gap:.875rem;width:100%;margin-inline:0;padding:1rem 1.125rem;padding-inline-end:2.75rem;border-radius:.75rem;border:1px solid var(--app-color-border-subtle, rgba(15, 23, 42, .1));background:var(--app-color-surface, #fff);color:var(--app-color-text-primary, #1a2f45);box-shadow:0 10px 24px color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 10%,transparent),0 2px 6px color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 6%,transparent);animation:structra-cookie-notice-enter .28s ease-out;transition:opacity .22s ease,transform .22s ease;position:relative}.structra-cookie-notice--hiding{opacity:0;transform:translateY(.65rem)}.structra-cookie-notice__icon{grid-area:icon;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:999px;background:color-mix(in srgb,var(--app-color-primary, #2563eb) 12%,var(--app-color-surface, #fff));color:var(--app-color-primary, #2563eb);font-size:1.05rem}.structra-cookie-notice__content{grid-area:content;min-width:0}.structra-cookie-notice__title{margin:0;font-size:.9375rem;font-weight:600;line-height:1.35;color:var(--app-color-text-primary, #1a2f45)}.structra-cookie-notice__description{margin:.35rem 0 0;font-size:.8125rem;line-height:1.45;color:var(--app-color-text-secondary, #4a6682)}.structra-cookie-notice__actions{grid-area:actions;display:flex;align-items:center;align-self:center;justify-self:start}.structra-cookie-notice__close{position:absolute;top:.65rem;inset-inline-end:.65rem;display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:0;border-radius:.375rem;background:transparent;color:var(--app-color-text-secondary, #4a6682);cursor:pointer;transition:background-color .15s ease,color .15s ease}.structra-cookie-notice__close:hover{background:color-mix(in srgb,var(--app-color-text-secondary, #4a6682) 12%,transparent);color:var(--app-color-text-primary, #1a2f45)}.structra-cookie-notice__close:focus-visible{outline:2px solid var(--app-color-primary, #2563eb);outline-offset:2px}@media(min-width:840px){:host{inset-inline:0;bottom:max(1rem,env(safe-area-inset-bottom));padding:0 1rem}.structra-cookie-notice{grid-template-columns:auto minmax(0,1fr);grid-template-areas:\"icon content\" \". actions\";align-items:start;width:100%;max-width:min(42rem,92vw);margin-inline:0}.structra-cookie-notice__actions{justify-self:stretch;width:100%;justify-content:flex-end}}@media(max-width:639px){:host{padding:0;padding-bottom:env(safe-area-inset-bottom,0)}.structra-cookie-notice{column-gap:.625rem;row-gap:.625rem;max-width:none;padding:.75rem 2.5rem .75rem .75rem;border-radius:.75rem .75rem 0 0}.structra-cookie-notice__icon{width:2rem;height:2rem;font-size:.95rem}.structra-cookie-notice__title{font-size:.875rem}.structra-cookie-notice__description{margin-top:.25rem;font-size:.75rem;line-height:1.4}.structra-cookie-notice__actions{grid-area:actions;align-self:stretch;width:100%}:host ::ng-deep .structra-cookie-notice__actions app-button{display:block;width:100%}:host ::ng-deep .structra-cookie-notice__actions app-button .base-button__native{width:100%}.structra-cookie-notice__close{top:.5rem;inset-inline-end:.5rem}}@keyframes structra-cookie-notice-enter{0%{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
20178
20178
|
}] });
|
|
20179
20179
|
|
|
20180
20180
|
/**
|