structra-ui 0.2.9 → 0.2.11

package/fesm2022/structra-ui.mjs

@@ -1620,11 +1620,11 @@ class BaseFieldComponent {
         this.contextMenuSelect.emit(id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: BaseFieldComponent, isStandalone: true, selector: "app-base-field", inputs: { label: "label", errorMessage: "errorMessage", required: "required", showRequiredMark: "showRequiredMark", invalid: "invalid", filled: "filled", disabled: "disabled", readonly: "readonly", inputId: "inputId", errorId: "errorId", showPrefixIcon: "showPrefixIcon", prefixIcon: "prefixIcon", clearable: "clearable", clearAriaLabel: "clearAriaLabel", showSuffixSlot: "showSuffixSlot", valueAlignEnd: "valueAlignEnd", loading: ["loading", "loading", booleanAttribute], skeletonVariant: "skeletonVariant", mostrarMenuContexto: ["mostrarMenuContexto", "mostrarMenuContexto", booleanAttribute], contextMenuItems: "contextMenuItems", contextMenuId: "contextMenuId" }, outputs: { clear: "clear", contextMenuSelect: "contextMenuSelect" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"base-field\" [class.base-field--invalid]=\"invalid\" [class.base-field--filled]=\"filled\"\n  [class.base-field--disabled]=\"disabled\" [class.base-field--readonly]=\"readonly\"\n  [class.base-field--loading]=\"loading\" [attr.aria-busy]=\"loading ? true : null\"\n  [attr.aria-label]=\"loading && showFloatTpl ? label : null\">\n  <div class=\"base-field__box\">\n    <div class=\"base-field__prefix\">\n      @if (!loading) {\n      <ng-content select=\"[appFieldPrefix]\" />\n      }\n      @if (showFaTpl) {\n      <i [attr.class]=\"prefixIconClassTpl + (loading ? ' base-field__prefix-icon--loading-dim' : '')\"\n        aria-hidden=\"true\"></i>\n      }\n    </div>\n\n    <div class=\"base-field__field\">\n      @if (showFloatTpl && !loading) {\n      <label class=\"base-field__float-label\" [attr.for]=\"inputId || null\">\n        {{ label }}\n        @if (required && showRequiredMark) {\n        <span class=\"base-field__required\" aria-hidden=\"true\">*</span>\n        }\n      </label>\n      }\n\n      <div class=\"base-field__control\" [class.base-field__control--value-end]=\"valueAlignEnd\">\n        @if (!loading) {\n        <ng-content />\n        } @else {\n        <app-skeleton-field-shell [variant]=\"skeletonVariant\" [showLeadingIcon]=\"!showFaTpl\" />\n        }\n      </div>\n    </div>\n\n    @if (showSuffixTpl) {\n    <div class=\"base-field__suffix\" [class.base-field__suffix--loading]=\"loading\">\n      @if (!loading) {\n      @if (showCtxMenuTpl) {\n      <app-dropdown-menu\n        class=\"base-field__ctx-dropdown\"\n        [items]=\"contextMenuItems\"\n        [minWidthPx]=\"200\"\n        [matchTriggerWidth]=\"false\"\n        [menuId]=\"resolvedContextMenuId\"\n        (itemSelect)=\"onContextMenuItemSelect($event)\"\n      >\n        <button type=\"button\" class=\"base-field__ctx-trigger\" aria-label=\"Mais op\u00E7\u00F5es\" tabindex=\"-1\">\n          <i class=\"fa-solid fa-ellipsis\" aria-hidden=\"true\"></i>\n        </button>\n      </app-dropdown-menu>\n      }\n      @if (showSuffixSlot) {\n      <ng-content select=\"[appFieldSuffix]\" />\n      }\n      @if (showClearTpl) {\n      <button type=\"button\" class=\"base-field__clear\" tabindex=\"-1\" [attr.aria-label]=\"clearAriaLabel\"\n        (click)=\"onClearClick()\">\n        <span class=\"base-field__clear-x\" aria-hidden=\"true\">&times;</span>\n      </button>\n      }\n      } @else if (loading && showSuffixSlot) {\n      <span class=\"base-field__suffix-reserve\" aria-hidden=\"true\"></span>\n      }\n    </div>\n    }\n  </div>\n\n  @if (!loading && showErrorTpl) {\n  <p class=\"base-field__error\" [id]=\"errorId || null\" role=\"alert\">\n    {{ errorMessage }}\n  </p>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.base-field{display:flex;flex-direction:column;gap:.35rem;width:100%;max-width:100%;box-sizing:border-box}.base-field--loading .base-field__box{pointer-events:none}.base-field--loading .base-field__field{justify-content:center}.base-field--loading .base-field__control{display:flex;align-items:center;width:100%;min-height:0}.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(--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 .base-field__box{border-color:var(--ui-field-input-invalid-border);box-shadow:none;background:var(--ui-field-invalid-input-bg, #fef2f2)}.base-field--readonly.base-field--invalid:not(.base-field--disabled) .base-field__box{background:var(--ui-field-invalid-input-bg, #fef2f2)}.base-field--invalid:not(.base-field--disabled):not(.base-field--readonly) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.base-field--disabled .base-field__box{opacity:var(--ui-field-input-disabled-opacity)}.base-field__prefix{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding-left:.75rem;color:var(--ui-field-float-prefix-color);user-select:none;-webkit-user-select:none}.base-field__prefix:empty{display:none}.base-field__prefix-icon{font-style:normal;font-size:1rem;line-height:1;color:var(--ui-field-float-prefix-color)}.base-field__prefix-icon--loading-dim{opacity:.34;pointer-events:none}.base-field__suffix{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;gap:.125rem;padding-right:.4rem;padding-left:.1rem}.base-field__ctx-dropdown{display:inline-flex;flex-shrink:0;align-items:center;max-width:100%}.base-field__ctx-trigger{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.base-field__ctx-trigger:hover{background:var(--app-color-prefix-hover-bg, rgba(90, 127, 163, .15));color:var(--ui-field-float-label-top-color)}.base-field__ctx-trigger:focus,.base-field__ctx-trigger:focus-visible{outline:none}.base-field__clear{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;min-width:2rem;min-height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;line-height:0;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.base-field__clear:hover{background:var(--app-color-prefix-hover-bg, rgba(90, 127, 163, .15));color:var(--ui-field-float-label-top-color)}.base-field__clear:focus,.base-field__clear:focus-visible{outline:none}.base-field__clear-x{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;font-size:1.2rem;line-height:1;font-weight:300}.base-field--invalid .base-field__prefix,.base-field--invalid .base-field__prefix-icon{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__prefix-icon:before{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__suffix,.base-field--invalid .base-field__clear,.base-field--invalid .base-field__ctx-trigger{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__clear:hover,.base-field--invalid .base-field__ctx-trigger:hover{background:var(--app-color-error-bg-subtle, rgba(185, 28, 28, .12));color:var(--ui-field-float-label-invalid-color)}.base-field__field{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;contain:layout style}.base-field__float-label{position:absolute;left:.75rem;right:.75rem;top:.45rem;transform:translate3d(0,calc((1.8rem + 1.35em)/2 - .45rem - .6em),0) scale(1);transform-origin:left top;font-size:1rem;font-weight:var(--field-float-label-rest-weight, var(--structra-body-weight));line-height:1.2;color:var(--ui-field-float-label-color);pointer-events:none;user-select:none;-webkit-user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .11s cubic-bezier(.4,0,.2,1),color .11s ease}@media(prefers-reduced-motion:reduce){.base-field__float-label{transition:none}}.base-field__box:focus-within .base-field__float-label,.base-field--filled .base-field__float-label{transform:translateZ(0) scale(.75);font-weight:var(--field-label-weight, var(--structra-label-weight));color:var(--ui-field-float-label-top-color)}.base-field--invalid .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid.base-field--filled .base-field__float-label,.base-field--invalid .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field__required{color:var(--ui-field-required-mark-color);margin-left:.15rem}.base-field--invalid .base-field__required{color:var(--ui-field-float-label-invalid-color)}.base-field__control{display:block;width:100%;min-width:0}.base-field__suffix-reserve{display:block;flex-shrink:0;width:2rem;height:2rem;margin:0 .1rem;box-sizing:border-box}.base-field__control--value-end :where(input){text-align:right}.base-field--readonly:not(.base-field--disabled) .base-field__float-label{color:var(--ui-field-readonly-label-color)}.base-field--readonly.base-field--filled .base-field__float-label,.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-readonly-label-top-color)}.base-field--readonly:not(.base-field--disabled) .base-field__prefix,.base-field--readonly:not(.base-field--disabled) .base-field__prefix-icon{color:var(--ui-field-readonly-prefix-color)}.base-field--readonly:not(.base-field--disabled) .base-field__control :where(input,textarea){color:var(--ui-field-readonly-input-text)}.base-field--invalid.base-field--readonly .base-field__float-label,.base-field--invalid.base-field--readonly.base-field--filled .base-field__float-label,.base-field--invalid.base-field--readonly .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__prefix,.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__prefix-icon{color:var(--ui-field-float-label-invalid-color)}.base-field__error{margin:0;padding-left:.15rem;font-size:.75rem;font-weight:var(--field-helper-weight, var(--structra-body-weight));color:var(--ui-field-error-text-color);user-select:none;-webkit-user-select:none}@supports (-webkit-appearance: none){.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:hover,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:active,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;transition:background-color 50000s ease 0s!important}.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:hover,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:active,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;transition:background-color 50000s ease 0s!important}}.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:hover,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:focus{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;background-color:var(--ui-field-invalid-input-bg, #fef2f2)!important;transition:background-color 50000s ease 0s!important}.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill:hover,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill:focus{-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;background-color:var(--ui-field-readonly-bg)!important;transition:background-color 50000s ease 0s!important}\n"], dependencies: [{ kind: "component", type: SkeletonFieldShellComponent, selector: "app-skeleton-field-shell", inputs: ["variant", "animate", "showLeadingIcon"] }, { kind: "component", type: DropdownMenuComponent, selector: "app-dropdown-menu", inputs: ["items", "placement", "minWidthPx", "matchTriggerWidth", "menuId"], outputs: ["itemSelect", "openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: BaseFieldComponent, isStandalone: true, selector: "app-base-field", inputs: { label: "label", errorMessage: "errorMessage", required: "required", showRequiredMark: "showRequiredMark", invalid: "invalid", filled: "filled", disabled: "disabled", readonly: "readonly", inputId: "inputId", errorId: "errorId", showPrefixIcon: "showPrefixIcon", prefixIcon: "prefixIcon", clearable: "clearable", clearAriaLabel: "clearAriaLabel", showSuffixSlot: "showSuffixSlot", valueAlignEnd: "valueAlignEnd", loading: ["loading", "loading", booleanAttribute], skeletonVariant: "skeletonVariant", mostrarMenuContexto: ["mostrarMenuContexto", "mostrarMenuContexto", booleanAttribute], contextMenuItems: "contextMenuItems", contextMenuId: "contextMenuId" }, outputs: { clear: "clear", contextMenuSelect: "contextMenuSelect" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"base-field\" [class.base-field--invalid]=\"invalid\" [class.base-field--filled]=\"filled\"\n  [class.base-field--disabled]=\"disabled\" [class.base-field--readonly]=\"readonly\"\n  [class.base-field--loading]=\"loading\" [attr.aria-busy]=\"loading ? true : null\"\n  [attr.aria-label]=\"loading && showFloatTpl ? label : null\">\n  <div class=\"base-field__box\">\n    <div class=\"base-field__prefix\">\n      @if (!loading) {\n      <ng-content select=\"[appFieldPrefix]\" />\n      }\n      @if (showFaTpl) {\n      <i [attr.class]=\"prefixIconClassTpl + (loading ? ' base-field__prefix-icon--loading-dim' : '')\"\n        aria-hidden=\"true\"></i>\n      }\n    </div>\n\n    <div class=\"base-field__field\">\n      @if (showFloatTpl && !loading) {\n      <label class=\"base-field__float-label\" [attr.for]=\"inputId || null\">\n        {{ label }}\n        @if (required && showRequiredMark) {\n        <span class=\"base-field__required\" aria-hidden=\"true\">*</span>\n        }\n      </label>\n      }\n\n      <div class=\"base-field__control\" [class.base-field__control--value-end]=\"valueAlignEnd\">\n        @if (!loading) {\n        <ng-content />\n        } @else {\n        <app-skeleton-field-shell [variant]=\"skeletonVariant\" [showLeadingIcon]=\"!showFaTpl\" />\n        }\n      </div>\n    </div>\n\n    @if (showSuffixTpl) {\n    <div class=\"base-field__suffix\" [class.base-field__suffix--loading]=\"loading\">\n      @if (!loading) {\n      @if (showCtxMenuTpl) {\n      <app-dropdown-menu\n        class=\"base-field__ctx-dropdown\"\n        [items]=\"contextMenuItems\"\n        [minWidthPx]=\"200\"\n        [matchTriggerWidth]=\"false\"\n        [menuId]=\"resolvedContextMenuId\"\n        (itemSelect)=\"onContextMenuItemSelect($event)\"\n      >\n        <button type=\"button\" class=\"base-field__ctx-trigger\" aria-label=\"Mais op\u00E7\u00F5es\" tabindex=\"-1\">\n          <i class=\"fa-solid fa-ellipsis\" aria-hidden=\"true\"></i>\n        </button>\n      </app-dropdown-menu>\n      }\n      @if (showSuffixSlot) {\n      <ng-content select=\"[appFieldSuffix]\" />\n      }\n      @if (showClearTpl) {\n      <button type=\"button\" class=\"base-field__clear\" tabindex=\"-1\" [attr.aria-label]=\"clearAriaLabel\"\n        (click)=\"onClearClick()\">\n        <span class=\"base-field__clear-x\" aria-hidden=\"true\">&times;</span>\n      </button>\n      }\n      } @else if (loading && showSuffixSlot) {\n      <span class=\"base-field__suffix-reserve\" aria-hidden=\"true\"></span>\n      }\n    </div>\n    }\n  </div>\n\n  @if (!loading && showErrorTpl) {\n  <p class=\"base-field__error\" [id]=\"errorId || null\" role=\"alert\">\n    {{ errorMessage }}\n  </p>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.base-field{display:flex;flex-direction:column;gap:.35rem;width:100%;max-width:100%;box-sizing:border-box}.base-field--loading .base-field__box{pointer-events:none}.base-field--loading .base-field__field{justify-content:center}.base-field--loading .base-field__control{display:flex;align-items:center;width:100%;min-height:0}.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 .base-field__box{border-color:var(--ui-field-input-invalid-border);box-shadow:none;background:var(--ui-field-invalid-input-bg, #fef2f2)}.base-field--readonly.base-field--invalid:not(.base-field--disabled) .base-field__box{background:var(--ui-field-invalid-input-bg, #fef2f2)}.base-field--invalid:not(.base-field--disabled):not(.base-field--readonly) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.base-field--disabled .base-field__box{opacity:var(--ui-field-input-disabled-opacity)}.base-field__prefix{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding-left:.75rem;color:var(--ui-field-float-prefix-color);user-select:none;-webkit-user-select:none}.base-field__prefix:empty{display:none}.base-field__prefix-icon{font-style:normal;font-size:1rem;line-height:1;color:var(--ui-field-float-prefix-color)}.base-field__prefix-icon--loading-dim{opacity:.34;pointer-events:none}.base-field__suffix{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;gap:.125rem;padding-right:.4rem;padding-left:.1rem}.base-field__ctx-dropdown{display:inline-flex;flex-shrink:0;align-items:center;max-width:100%}.base-field__ctx-trigger{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.base-field__ctx-trigger:hover{background:var(--app-color-prefix-hover-bg, rgba(90, 127, 163, .15));color:var(--ui-field-float-label-top-color)}.base-field__ctx-trigger:focus,.base-field__ctx-trigger:focus-visible{outline:none}.base-field__clear{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;min-width:2rem;min-height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;line-height:0;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.base-field__clear:hover{background:var(--app-color-prefix-hover-bg, rgba(90, 127, 163, .15));color:var(--ui-field-float-label-top-color)}.base-field__clear:focus,.base-field__clear:focus-visible{outline:none}.base-field__clear-x{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;font-size:1.2rem;line-height:1;font-weight:300}.base-field--invalid .base-field__prefix,.base-field--invalid .base-field__prefix-icon{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__prefix-icon:before{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__suffix,.base-field--invalid .base-field__clear,.base-field--invalid .base-field__ctx-trigger{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__clear:hover,.base-field--invalid .base-field__ctx-trigger:hover{background:var(--app-color-error-bg-subtle, rgba(185, 28, 28, .12));color:var(--ui-field-float-label-invalid-color)}.base-field__field{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;contain:layout style}.base-field__float-label{position:absolute;left:.75rem;right:.75rem;top:.45rem;transform:translate3d(0,calc((1.8rem + 1.35em)/2 - .45rem - .6em),0) scale(1);transform-origin:left top;font-size:1rem;font-weight:var(--field-float-label-rest-weight, var(--structra-body-weight));line-height:1.2;color:var(--ui-field-float-label-color);pointer-events:none;user-select:none;-webkit-user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .11s cubic-bezier(.4,0,.2,1),color .11s ease}@media(prefers-reduced-motion:reduce){.base-field__float-label{transition:none}}.base-field__box:focus-within .base-field__float-label,.base-field--filled .base-field__float-label{transform:translateZ(0) scale(.75);font-weight:var(--field-label-weight, var(--structra-label-weight));color:var(--ui-field-float-label-top-color)}.base-field--invalid .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid.base-field--filled .base-field__float-label,.base-field--invalid .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field__required{color:var(--ui-field-required-mark-color);margin-left:.15rem}.base-field--invalid .base-field__required{color:var(--ui-field-float-label-invalid-color)}.base-field__control{display:block;width:100%;min-width:0}.base-field__suffix-reserve{display:block;flex-shrink:0;width:2rem;height:2rem;margin:0 .1rem;box-sizing:border-box}.base-field__control--value-end :where(input){text-align:right}.base-field--readonly:not(.base-field--disabled) .base-field__float-label{color:var(--ui-field-readonly-label-color)}.base-field--readonly.base-field--filled .base-field__float-label,.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-readonly-label-top-color)}.base-field--readonly:not(.base-field--disabled) .base-field__prefix,.base-field--readonly:not(.base-field--disabled) .base-field__prefix-icon{color:var(--ui-field-readonly-prefix-color)}.base-field--readonly:not(.base-field--disabled) .base-field__control :where(input,textarea){color:var(--ui-field-readonly-input-text)}.base-field--invalid.base-field--readonly .base-field__float-label,.base-field--invalid.base-field--readonly.base-field--filled .base-field__float-label,.base-field--invalid.base-field--readonly .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__prefix,.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__prefix-icon{color:var(--ui-field-float-label-invalid-color)}.base-field__error{margin:0;padding-left:.15rem;font-size:.75rem;font-weight:var(--field-helper-weight, var(--structra-body-weight));color:var(--ui-field-error-text-color);user-select:none;-webkit-user-select:none}@supports (-webkit-appearance: none){.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:hover,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:active,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;transition:background-color 50000s ease 0s!important}.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:hover,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:active,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;transition:background-color 50000s ease 0s!important}}.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:hover,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:focus{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;background-color:var(--ui-field-invalid-input-bg, #fef2f2)!important;transition:background-color 50000s ease 0s!important}.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill:hover,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill:focus{-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;background-color:var(--ui-field-readonly-bg)!important;transition:background-color 50000s ease 0s!important}\n"], dependencies: [{ kind: "component", type: SkeletonFieldShellComponent, selector: "app-skeleton-field-shell", inputs: ["variant", "animate", "showLeadingIcon"] }, { kind: "component", type: DropdownMenuComponent, selector: "app-dropdown-menu", inputs: ["items", "placement", "minWidthPx", "matchTriggerWidth", "menuId"], outputs: ["itemSelect", "openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-base-field', imports: [SkeletonFieldShellComponent, DropdownMenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"base-field\" [class.base-field--invalid]=\"invalid\" [class.base-field--filled]=\"filled\"\n  [class.base-field--disabled]=\"disabled\" [class.base-field--readonly]=\"readonly\"\n  [class.base-field--loading]=\"loading\" [attr.aria-busy]=\"loading ? true : null\"\n  [attr.aria-label]=\"loading && showFloatTpl ? label : null\">\n  <div class=\"base-field__box\">\n    <div class=\"base-field__prefix\">\n      @if (!loading) {\n      <ng-content select=\"[appFieldPrefix]\" />\n      }\n      @if (showFaTpl) {\n      <i [attr.class]=\"prefixIconClassTpl + (loading ? ' base-field__prefix-icon--loading-dim' : '')\"\n        aria-hidden=\"true\"></i>\n      }\n    </div>\n\n    <div class=\"base-field__field\">\n      @if (showFloatTpl && !loading) {\n      <label class=\"base-field__float-label\" [attr.for]=\"inputId || null\">\n        {{ label }}\n        @if (required && showRequiredMark) {\n        <span class=\"base-field__required\" aria-hidden=\"true\">*</span>\n        }\n      </label>\n      }\n\n      <div class=\"base-field__control\" [class.base-field__control--value-end]=\"valueAlignEnd\">\n        @if (!loading) {\n        <ng-content />\n        } @else {\n        <app-skeleton-field-shell [variant]=\"skeletonVariant\" [showLeadingIcon]=\"!showFaTpl\" />\n        }\n      </div>\n    </div>\n\n    @if (showSuffixTpl) {\n    <div class=\"base-field__suffix\" [class.base-field__suffix--loading]=\"loading\">\n      @if (!loading) {\n      @if (showCtxMenuTpl) {\n      <app-dropdown-menu\n        class=\"base-field__ctx-dropdown\"\n        [items]=\"contextMenuItems\"\n        [minWidthPx]=\"200\"\n        [matchTriggerWidth]=\"false\"\n        [menuId]=\"resolvedContextMenuId\"\n        (itemSelect)=\"onContextMenuItemSelect($event)\"\n      >\n        <button type=\"button\" class=\"base-field__ctx-trigger\" aria-label=\"Mais op\u00E7\u00F5es\" tabindex=\"-1\">\n          <i class=\"fa-solid fa-ellipsis\" aria-hidden=\"true\"></i>\n        </button>\n      </app-dropdown-menu>\n      }\n      @if (showSuffixSlot) {\n      <ng-content select=\"[appFieldSuffix]\" />\n      }\n      @if (showClearTpl) {\n      <button type=\"button\" class=\"base-field__clear\" tabindex=\"-1\" [attr.aria-label]=\"clearAriaLabel\"\n        (click)=\"onClearClick()\">\n        <span class=\"base-field__clear-x\" aria-hidden=\"true\">&times;</span>\n      </button>\n      }\n      } @else if (loading && showSuffixSlot) {\n      <span class=\"base-field__suffix-reserve\" aria-hidden=\"true\"></span>\n      }\n    </div>\n    }\n  </div>\n\n  @if (!loading && showErrorTpl) {\n  <p class=\"base-field__error\" [id]=\"errorId || null\" role=\"alert\">\n    {{ errorMessage }}\n  </p>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.base-field{display:flex;flex-direction:column;gap:.35rem;width:100%;max-width:100%;box-sizing:border-box}.base-field--loading .base-field__box{pointer-events:none}.base-field--loading .base-field__field{justify-content:center}.base-field--loading .base-field__control{display:flex;align-items:center;width:100%;min-height:0}.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(--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 .base-field__box{border-color:var(--ui-field-input-invalid-border);box-shadow:none;background:var(--ui-field-invalid-input-bg, #fef2f2)}.base-field--readonly.base-field--invalid:not(.base-field--disabled) .base-field__box{background:var(--ui-field-invalid-input-bg, #fef2f2)}.base-field--invalid:not(.base-field--disabled):not(.base-field--readonly) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.base-field--disabled .base-field__box{opacity:var(--ui-field-input-disabled-opacity)}.base-field__prefix{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding-left:.75rem;color:var(--ui-field-float-prefix-color);user-select:none;-webkit-user-select:none}.base-field__prefix:empty{display:none}.base-field__prefix-icon{font-style:normal;font-size:1rem;line-height:1;color:var(--ui-field-float-prefix-color)}.base-field__prefix-icon--loading-dim{opacity:.34;pointer-events:none}.base-field__suffix{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;gap:.125rem;padding-right:.4rem;padding-left:.1rem}.base-field__ctx-dropdown{display:inline-flex;flex-shrink:0;align-items:center;max-width:100%}.base-field__ctx-trigger{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.base-field__ctx-trigger:hover{background:var(--app-color-prefix-hover-bg, rgba(90, 127, 163, .15));color:var(--ui-field-float-label-top-color)}.base-field__ctx-trigger:focus,.base-field__ctx-trigger:focus-visible{outline:none}.base-field__clear{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;min-width:2rem;min-height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;line-height:0;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.base-field__clear:hover{background:var(--app-color-prefix-hover-bg, rgba(90, 127, 163, .15));color:var(--ui-field-float-label-top-color)}.base-field__clear:focus,.base-field__clear:focus-visible{outline:none}.base-field__clear-x{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;font-size:1.2rem;line-height:1;font-weight:300}.base-field--invalid .base-field__prefix,.base-field--invalid .base-field__prefix-icon{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__prefix-icon:before{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__suffix,.base-field--invalid .base-field__clear,.base-field--invalid .base-field__ctx-trigger{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__clear:hover,.base-field--invalid .base-field__ctx-trigger:hover{background:var(--app-color-error-bg-subtle, rgba(185, 28, 28, .12));color:var(--ui-field-float-label-invalid-color)}.base-field__field{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;contain:layout style}.base-field__float-label{position:absolute;left:.75rem;right:.75rem;top:.45rem;transform:translate3d(0,calc((1.8rem + 1.35em)/2 - .45rem - .6em),0) scale(1);transform-origin:left top;font-size:1rem;font-weight:var(--field-float-label-rest-weight, var(--structra-body-weight));line-height:1.2;color:var(--ui-field-float-label-color);pointer-events:none;user-select:none;-webkit-user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .11s cubic-bezier(.4,0,.2,1),color .11s ease}@media(prefers-reduced-motion:reduce){.base-field__float-label{transition:none}}.base-field__box:focus-within .base-field__float-label,.base-field--filled .base-field__float-label{transform:translateZ(0) scale(.75);font-weight:var(--field-label-weight, var(--structra-label-weight));color:var(--ui-field-float-label-top-color)}.base-field--invalid .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid.base-field--filled .base-field__float-label,.base-field--invalid .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field__required{color:var(--ui-field-required-mark-color);margin-left:.15rem}.base-field--invalid .base-field__required{color:var(--ui-field-float-label-invalid-color)}.base-field__control{display:block;width:100%;min-width:0}.base-field__suffix-reserve{display:block;flex-shrink:0;width:2rem;height:2rem;margin:0 .1rem;box-sizing:border-box}.base-field__control--value-end :where(input){text-align:right}.base-field--readonly:not(.base-field--disabled) .base-field__float-label{color:var(--ui-field-readonly-label-color)}.base-field--readonly.base-field--filled .base-field__float-label,.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-readonly-label-top-color)}.base-field--readonly:not(.base-field--disabled) .base-field__prefix,.base-field--readonly:not(.base-field--disabled) .base-field__prefix-icon{color:var(--ui-field-readonly-prefix-color)}.base-field--readonly:not(.base-field--disabled) .base-field__control :where(input,textarea){color:var(--ui-field-readonly-input-text)}.base-field--invalid.base-field--readonly .base-field__float-label,.base-field--invalid.base-field--readonly.base-field--filled .base-field__float-label,.base-field--invalid.base-field--readonly .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__prefix,.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__prefix-icon{color:var(--ui-field-float-label-invalid-color)}.base-field__error{margin:0;padding-left:.15rem;font-size:.75rem;font-weight:var(--field-helper-weight, var(--structra-body-weight));color:var(--ui-field-error-text-color);user-select:none;-webkit-user-select:none}@supports (-webkit-appearance: none){.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:hover,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:active,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;transition:background-color 50000s ease 0s!important}.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:hover,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:active,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;transition:background-color 50000s ease 0s!important}}.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:hover,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:focus{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;background-color:var(--ui-field-invalid-input-bg, #fef2f2)!important;transition:background-color 50000s ease 0s!important}.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill:hover,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill:focus{-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;background-color:var(--ui-field-readonly-bg)!important;transition:background-color 50000s ease 0s!important}\n"] }]
+            args: [{ selector: 'app-base-field', imports: [SkeletonFieldShellComponent, DropdownMenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"base-field\" [class.base-field--invalid]=\"invalid\" [class.base-field--filled]=\"filled\"\n  [class.base-field--disabled]=\"disabled\" [class.base-field--readonly]=\"readonly\"\n  [class.base-field--loading]=\"loading\" [attr.aria-busy]=\"loading ? true : null\"\n  [attr.aria-label]=\"loading && showFloatTpl ? label : null\">\n  <div class=\"base-field__box\">\n    <div class=\"base-field__prefix\">\n      @if (!loading) {\n      <ng-content select=\"[appFieldPrefix]\" />\n      }\n      @if (showFaTpl) {\n      <i [attr.class]=\"prefixIconClassTpl + (loading ? ' base-field__prefix-icon--loading-dim' : '')\"\n        aria-hidden=\"true\"></i>\n      }\n    </div>\n\n    <div class=\"base-field__field\">\n      @if (showFloatTpl && !loading) {\n      <label class=\"base-field__float-label\" [attr.for]=\"inputId || null\">\n        {{ label }}\n        @if (required && showRequiredMark) {\n        <span class=\"base-field__required\" aria-hidden=\"true\">*</span>\n        }\n      </label>\n      }\n\n      <div class=\"base-field__control\" [class.base-field__control--value-end]=\"valueAlignEnd\">\n        @if (!loading) {\n        <ng-content />\n        } @else {\n        <app-skeleton-field-shell [variant]=\"skeletonVariant\" [showLeadingIcon]=\"!showFaTpl\" />\n        }\n      </div>\n    </div>\n\n    @if (showSuffixTpl) {\n    <div class=\"base-field__suffix\" [class.base-field__suffix--loading]=\"loading\">\n      @if (!loading) {\n      @if (showCtxMenuTpl) {\n      <app-dropdown-menu\n        class=\"base-field__ctx-dropdown\"\n        [items]=\"contextMenuItems\"\n        [minWidthPx]=\"200\"\n        [matchTriggerWidth]=\"false\"\n        [menuId]=\"resolvedContextMenuId\"\n        (itemSelect)=\"onContextMenuItemSelect($event)\"\n      >\n        <button type=\"button\" class=\"base-field__ctx-trigger\" aria-label=\"Mais op\u00E7\u00F5es\" tabindex=\"-1\">\n          <i class=\"fa-solid fa-ellipsis\" aria-hidden=\"true\"></i>\n        </button>\n      </app-dropdown-menu>\n      }\n      @if (showSuffixSlot) {\n      <ng-content select=\"[appFieldSuffix]\" />\n      }\n      @if (showClearTpl) {\n      <button type=\"button\" class=\"base-field__clear\" tabindex=\"-1\" [attr.aria-label]=\"clearAriaLabel\"\n        (click)=\"onClearClick()\">\n        <span class=\"base-field__clear-x\" aria-hidden=\"true\">&times;</span>\n      </button>\n      }\n      } @else if (loading && showSuffixSlot) {\n      <span class=\"base-field__suffix-reserve\" aria-hidden=\"true\"></span>\n      }\n    </div>\n    }\n  </div>\n\n  @if (!loading && showErrorTpl) {\n  <p class=\"base-field__error\" [id]=\"errorId || null\" role=\"alert\">\n    {{ errorMessage }}\n  </p>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.base-field{display:flex;flex-direction:column;gap:.35rem;width:100%;max-width:100%;box-sizing:border-box}.base-field--loading .base-field__box{pointer-events:none}.base-field--loading .base-field__field{justify-content:center}.base-field--loading .base-field__control{display:flex;align-items:center;width:100%;min-height:0}.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 .base-field__box{border-color:var(--ui-field-input-invalid-border);box-shadow:none;background:var(--ui-field-invalid-input-bg, #fef2f2)}.base-field--readonly.base-field--invalid:not(.base-field--disabled) .base-field__box{background:var(--ui-field-invalid-input-bg, #fef2f2)}.base-field--invalid:not(.base-field--disabled):not(.base-field--readonly) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.base-field--disabled .base-field__box{opacity:var(--ui-field-input-disabled-opacity)}.base-field__prefix{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding-left:.75rem;color:var(--ui-field-float-prefix-color);user-select:none;-webkit-user-select:none}.base-field__prefix:empty{display:none}.base-field__prefix-icon{font-style:normal;font-size:1rem;line-height:1;color:var(--ui-field-float-prefix-color)}.base-field__prefix-icon--loading-dim{opacity:.34;pointer-events:none}.base-field__suffix{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;gap:.125rem;padding-right:.4rem;padding-left:.1rem}.base-field__ctx-dropdown{display:inline-flex;flex-shrink:0;align-items:center;max-width:100%}.base-field__ctx-trigger{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.base-field__ctx-trigger:hover{background:var(--app-color-prefix-hover-bg, rgba(90, 127, 163, .15));color:var(--ui-field-float-label-top-color)}.base-field__ctx-trigger:focus,.base-field__ctx-trigger:focus-visible{outline:none}.base-field__clear{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;min-width:2rem;min-height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;line-height:0;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.base-field__clear:hover{background:var(--app-color-prefix-hover-bg, rgba(90, 127, 163, .15));color:var(--ui-field-float-label-top-color)}.base-field__clear:focus,.base-field__clear:focus-visible{outline:none}.base-field__clear-x{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;font-size:1.2rem;line-height:1;font-weight:300}.base-field--invalid .base-field__prefix,.base-field--invalid .base-field__prefix-icon{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__prefix-icon:before{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__suffix,.base-field--invalid .base-field__clear,.base-field--invalid .base-field__ctx-trigger{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__clear:hover,.base-field--invalid .base-field__ctx-trigger:hover{background:var(--app-color-error-bg-subtle, rgba(185, 28, 28, .12));color:var(--ui-field-float-label-invalid-color)}.base-field__field{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;contain:layout style}.base-field__float-label{position:absolute;left:.75rem;right:.75rem;top:.45rem;transform:translate3d(0,calc((1.8rem + 1.35em)/2 - .45rem - .6em),0) scale(1);transform-origin:left top;font-size:1rem;font-weight:var(--field-float-label-rest-weight, var(--structra-body-weight));line-height:1.2;color:var(--ui-field-float-label-color);pointer-events:none;user-select:none;-webkit-user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .11s cubic-bezier(.4,0,.2,1),color .11s ease}@media(prefers-reduced-motion:reduce){.base-field__float-label{transition:none}}.base-field__box:focus-within .base-field__float-label,.base-field--filled .base-field__float-label{transform:translateZ(0) scale(.75);font-weight:var(--field-label-weight, var(--structra-label-weight));color:var(--ui-field-float-label-top-color)}.base-field--invalid .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid.base-field--filled .base-field__float-label,.base-field--invalid .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field__required{color:var(--ui-field-required-mark-color);margin-left:.15rem}.base-field--invalid .base-field__required{color:var(--ui-field-float-label-invalid-color)}.base-field__control{display:block;width:100%;min-width:0}.base-field__suffix-reserve{display:block;flex-shrink:0;width:2rem;height:2rem;margin:0 .1rem;box-sizing:border-box}.base-field__control--value-end :where(input){text-align:right}.base-field--readonly:not(.base-field--disabled) .base-field__float-label{color:var(--ui-field-readonly-label-color)}.base-field--readonly.base-field--filled .base-field__float-label,.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-readonly-label-top-color)}.base-field--readonly:not(.base-field--disabled) .base-field__prefix,.base-field--readonly:not(.base-field--disabled) .base-field__prefix-icon{color:var(--ui-field-readonly-prefix-color)}.base-field--readonly:not(.base-field--disabled) .base-field__control :where(input,textarea){color:var(--ui-field-readonly-input-text)}.base-field--invalid.base-field--readonly .base-field__float-label,.base-field--invalid.base-field--readonly.base-field--filled .base-field__float-label,.base-field--invalid.base-field--readonly .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__prefix,.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__prefix-icon{color:var(--ui-field-float-label-invalid-color)}.base-field__error{margin:0;padding-left:.15rem;font-size:.75rem;font-weight:var(--field-helper-weight, var(--structra-body-weight));color:var(--ui-field-error-text-color);user-select:none;-webkit-user-select:none}@supports (-webkit-appearance: none){.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:hover,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:active,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;transition:background-color 50000s ease 0s!important}.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:hover,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:active,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;transition:background-color 50000s ease 0s!important}}.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:hover,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:focus{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;background-color:var(--ui-field-invalid-input-bg, #fef2f2)!important;transition:background-color 50000s ease 0s!important}.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill:hover,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill:focus{-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;background-color:var(--ui-field-readonly-bg)!important;transition:background-color 50000s ease 0s!important}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], errorMessage: [{
@@ -3521,7 +3521,7 @@ class CheckboxFieldComponent extends BooleanFieldDirective {
                 useExisting: forwardRef(() => CheckboxFieldComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if (!loading) {\r\n<div class=\"checkbox-field\" [class.checkbox-field--invalid]=\"uiInvalid\"\r\n  [class.checkbox-field--readonly]=\"readonly\">\r\n  <label class=\"checkbox-field__row\">\r\n    <input\r\n      type=\"checkbox\"\r\n      class=\"checkbox-field__native\"\r\n      [id]=\"controlId\"\r\n      [attr.name]=\"name || null\"\r\n      [attr.tabindex]=\"readonly ? -1 : null\"\r\n      [checked]=\"checked\"\r\n      [disabled]=\"disabled\"\r\n      [required]=\"uiRequiredEffective\"\r\n      [attr.aria-invalid]=\"uiInvalid\"\r\n      [attr.aria-describedby]=\"uiAriaDescribedBy\"\r\n      [attr.aria-readonly]=\"readonly ? true : null\"\r\n      [attr.aria-label]=\"label || placeholder || 'Op\u00E7\u00E3o'\"\r\n      (click)=\"onCheckboxClick($event)\"\r\n      (change)=\"onNativeChange($event)\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    @if (label) {\r\n    <span class=\"checkbox-field__label\">{{ label }}</span>\r\n    }\r\n  </label>\r\n  @if (showErrorMessage && uiInvalid && uiErrorMessage) {\r\n  <p class=\"checkbox-field__error\" [id]=\"errorElementId\" role=\"alert\">{{ uiErrorMessage }}</p>\r\n  }\r\n</div>\r\n} @else {\r\n<div class=\"checkbox-field checkbox-field--loading\" role=\"status\" aria-live=\"polite\" [attr.aria-busy]=\"true\"\r\n  [attr.aria-label]=\"label || 'A carregar'\">\r\n  <div class=\"checkbox-field__skeleton-row\" aria-hidden=\"true\">\r\n    <app-skeleton-block width=\"1.1rem\" height=\"1.1rem\" radius=\"4px\" />\r\n    <app-skeleton-block width=\"11rem\" height=\"0.72rem\" radius=\"6px\" />\r\n  </div>\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:auto;box-sizing:border-box}:host(.checkbox-field--full-width){width:100%}.checkbox-field__row{display:flex;align-items:center;gap:.5rem;margin:0;cursor:pointer;width:fit-content;max-width:100%}.checkbox-field__native{appearance:none;-webkit-appearance:none;width:1.1rem;height:1.1rem;margin:0;flex-shrink:0;box-sizing:border-box;border:1px solid var(--ui-field-float-border);border-radius:4px;background-color:var(--ui-field-float-bg);background-repeat:no-repeat;background-position:center;background-size:.65rem auto;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}.checkbox-field__native:focus-visible{outline:2px solid var(--ui-field-float-border-focus);outline-offset:2px}.checkbox-field__native:focus:not(:focus-visible){outline:2px solid var(--ui-field-float-border-focus);outline-offset:2px}.checkbox-field__native:checked{border-color:var(--ui-field-float-border-focus);background-color:var(--ui-field-float-border-focus);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6l2.5 2.5 4.5-5'/%3E%3C/svg%3E\")}.checkbox-field__native:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}.checkbox-field--invalid .checkbox-field__native{border-color:var(--ui-field-input-invalid-border)}.checkbox-field--invalid .checkbox-field__native:checked{border-color:var(--ui-field-input-invalid-border);background-color:var(--ui-field-input-invalid-border);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6l2.5 2.5 4.5-5'/%3E%3C/svg%3E\")}.checkbox-field--invalid .checkbox-field__native:focus-visible{outline-color:var(--ui-field-input-invalid-border)}.checkbox-field--invalid .checkbox-field__native:focus:not(:focus-visible){outline:2px solid var(--ui-field-input-invalid-border);outline-offset:2px}.checkbox-field__label{font-family:var(--structra-font-family);font-size:1rem;font-weight:var(--checkbox-label-weight, var(--structra-label-weight));line-height:1.35;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;padding-top:.1em}.checkbox-field__error{margin:.35rem 0 0 1.6rem;padding:0;font-size:.75rem;font-weight:var(--checkbox-helper-weight, var(--structra-body-weight));color:var(--ui-field-error-text-color);user-select:none;-webkit-user-select:none}.checkbox-field--loading{width:100%;max-width:100%;box-sizing:border-box}.checkbox-field--loading .checkbox-field__skeleton-row{display:flex;align-items:center;gap:.5rem;width:100%;max-width:100%;box-sizing:border-box}.checkbox-field--readonly .checkbox-field__row{cursor:default;pointer-events:none}.checkbox-field--readonly .checkbox-field__native{border-color:var(--ui-field-readonly-border);background-color:var(--ui-field-readonly-bg);cursor:default}.checkbox-field--readonly .checkbox-field__native:checked{border-color:var(--ui-field-readonly-border-focus);background-color:var(--ui-field-readonly-border-focus);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6l2.5 2.5 4.5-5'/%3E%3C/svg%3E\")}.checkbox-field--readonly .checkbox-field__native:focus,.checkbox-field--readonly .checkbox-field__native:focus-visible{outline:none}.checkbox-field--readonly .checkbox-field__label{color:#000;cursor:default}\n"], dependencies: [{ kind: "component", type: SkeletonBlockComponent, selector: "app-skeleton-block", inputs: ["width", "height", "radius", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (!loading) {\r\n<div class=\"checkbox-field\" [class.checkbox-field--invalid]=\"uiInvalid\"\r\n  [class.checkbox-field--readonly]=\"readonly\">\r\n  <label class=\"checkbox-field__row\">\r\n    <input\r\n      type=\"checkbox\"\r\n      class=\"checkbox-field__native\"\r\n      [id]=\"controlId\"\r\n      [attr.name]=\"name || null\"\r\n      [attr.tabindex]=\"readonly ? -1 : null\"\r\n      [checked]=\"checked\"\r\n      [disabled]=\"disabled\"\r\n      [required]=\"uiRequiredEffective\"\r\n      [attr.aria-invalid]=\"uiInvalid\"\r\n      [attr.aria-describedby]=\"uiAriaDescribedBy\"\r\n      [attr.aria-readonly]=\"readonly ? true : null\"\r\n      [attr.aria-label]=\"label || placeholder || 'Op\u00E7\u00E3o'\"\r\n      (click)=\"onCheckboxClick($event)\"\r\n      (change)=\"onNativeChange($event)\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    @if (label) {\r\n    <span class=\"checkbox-field__label\">{{ label }}</span>\r\n    }\r\n  </label>\r\n  @if (showErrorMessage && uiInvalid && uiErrorMessage) {\r\n  <p class=\"checkbox-field__error\" [id]=\"errorElementId\" role=\"alert\">{{ uiErrorMessage }}</p>\r\n  }\r\n</div>\r\n} @else {\r\n<div class=\"checkbox-field checkbox-field--loading\" role=\"status\" aria-live=\"polite\" [attr.aria-busy]=\"true\"\r\n  [attr.aria-label]=\"label || 'A carregar'\">\r\n  <div class=\"checkbox-field__skeleton-row\" aria-hidden=\"true\">\r\n    <app-skeleton-block width=\"1.1rem\" height=\"1.1rem\" radius=\"4px\" />\r\n    <app-skeleton-block width=\"11rem\" height=\"0.72rem\" radius=\"6px\" />\r\n  </div>\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:auto;box-sizing:border-box}:host(.checkbox-field--full-width){width:100%}.checkbox-field__row{display:flex;align-items:center;gap:.5rem;margin:0;cursor:pointer;width:fit-content;max-width:100%}.checkbox-field__native{appearance:none;-webkit-appearance:none;width:1.1rem;height:1.1rem;margin:0;flex-shrink:0;box-sizing:border-box;border:1px solid var(--ui-field-float-border);border-radius:4px;background-color:var(--field-background, var(--ui-field-float-bg));background-repeat:no-repeat;background-position:center;background-size:.65rem auto;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}.checkbox-field__native:focus-visible{outline:2px solid var(--ui-field-float-border-focus);outline-offset:2px}.checkbox-field__native:focus:not(:focus-visible){outline:2px solid var(--ui-field-float-border-focus);outline-offset:2px}.checkbox-field__native:checked{border-color:var(--ui-field-float-border-focus);background-color:var(--ui-field-float-border-focus);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6l2.5 2.5 4.5-5'/%3E%3C/svg%3E\")}.checkbox-field__native:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}.checkbox-field--invalid .checkbox-field__native{border-color:var(--ui-field-input-invalid-border)}.checkbox-field--invalid .checkbox-field__native:checked{border-color:var(--ui-field-input-invalid-border);background-color:var(--ui-field-input-invalid-border);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6l2.5 2.5 4.5-5'/%3E%3C/svg%3E\")}.checkbox-field--invalid .checkbox-field__native:focus-visible{outline-color:var(--ui-field-input-invalid-border)}.checkbox-field--invalid .checkbox-field__native:focus:not(:focus-visible){outline:2px solid var(--ui-field-input-invalid-border);outline-offset:2px}.checkbox-field__label{font-family:var(--structra-font-family);font-size:1rem;font-weight:var(--checkbox-label-weight, var(--structra-label-weight));line-height:1.35;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;padding-top:.1em}.checkbox-field__error{margin:.35rem 0 0 1.6rem;padding:0;font-size:.75rem;font-weight:var(--checkbox-helper-weight, var(--structra-body-weight));color:var(--ui-field-error-text-color);user-select:none;-webkit-user-select:none}.checkbox-field--loading{width:100%;max-width:100%;box-sizing:border-box}.checkbox-field--loading .checkbox-field__skeleton-row{display:flex;align-items:center;gap:.5rem;width:100%;max-width:100%;box-sizing:border-box}.checkbox-field--readonly .checkbox-field__row{cursor:default;pointer-events:none}.checkbox-field--readonly .checkbox-field__native{border-color:var(--ui-field-readonly-border);background-color:var(--ui-field-readonly-bg);cursor:default}.checkbox-field--readonly .checkbox-field__native:checked{border-color:var(--ui-field-readonly-border-focus);background-color:var(--ui-field-readonly-border-focus);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6l2.5 2.5 4.5-5'/%3E%3C/svg%3E\")}.checkbox-field--readonly .checkbox-field__native:focus,.checkbox-field--readonly .checkbox-field__native:focus-visible{outline:none}.checkbox-field--readonly .checkbox-field__label{color:#000;cursor:default}\n"], dependencies: [{ kind: "component", type: SkeletonBlockComponent, selector: "app-skeleton-block", inputs: ["width", "height", "radius", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CheckboxFieldComponent, decorators: [{
             type: Component,
@@ -3531,7 +3531,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useExisting: forwardRef(() => CheckboxFieldComponent),
                             multi: true,
                         },
-                    ], template: "@if (!loading) {\r\n<div class=\"checkbox-field\" [class.checkbox-field--invalid]=\"uiInvalid\"\r\n  [class.checkbox-field--readonly]=\"readonly\">\r\n  <label class=\"checkbox-field__row\">\r\n    <input\r\n      type=\"checkbox\"\r\n      class=\"checkbox-field__native\"\r\n      [id]=\"controlId\"\r\n      [attr.name]=\"name || null\"\r\n      [attr.tabindex]=\"readonly ? -1 : null\"\r\n      [checked]=\"checked\"\r\n      [disabled]=\"disabled\"\r\n      [required]=\"uiRequiredEffective\"\r\n      [attr.aria-invalid]=\"uiInvalid\"\r\n      [attr.aria-describedby]=\"uiAriaDescribedBy\"\r\n      [attr.aria-readonly]=\"readonly ? true : null\"\r\n      [attr.aria-label]=\"label || placeholder || 'Op\u00E7\u00E3o'\"\r\n      (click)=\"onCheckboxClick($event)\"\r\n      (change)=\"onNativeChange($event)\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    @if (label) {\r\n    <span class=\"checkbox-field__label\">{{ label }}</span>\r\n    }\r\n  </label>\r\n  @if (showErrorMessage && uiInvalid && uiErrorMessage) {\r\n  <p class=\"checkbox-field__error\" [id]=\"errorElementId\" role=\"alert\">{{ uiErrorMessage }}</p>\r\n  }\r\n</div>\r\n} @else {\r\n<div class=\"checkbox-field checkbox-field--loading\" role=\"status\" aria-live=\"polite\" [attr.aria-busy]=\"true\"\r\n  [attr.aria-label]=\"label || 'A carregar'\">\r\n  <div class=\"checkbox-field__skeleton-row\" aria-hidden=\"true\">\r\n    <app-skeleton-block width=\"1.1rem\" height=\"1.1rem\" radius=\"4px\" />\r\n    <app-skeleton-block width=\"11rem\" height=\"0.72rem\" radius=\"6px\" />\r\n  </div>\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:auto;box-sizing:border-box}:host(.checkbox-field--full-width){width:100%}.checkbox-field__row{display:flex;align-items:center;gap:.5rem;margin:0;cursor:pointer;width:fit-content;max-width:100%}.checkbox-field__native{appearance:none;-webkit-appearance:none;width:1.1rem;height:1.1rem;margin:0;flex-shrink:0;box-sizing:border-box;border:1px solid var(--ui-field-float-border);border-radius:4px;background-color:var(--ui-field-float-bg);background-repeat:no-repeat;background-position:center;background-size:.65rem auto;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}.checkbox-field__native:focus-visible{outline:2px solid var(--ui-field-float-border-focus);outline-offset:2px}.checkbox-field__native:focus:not(:focus-visible){outline:2px solid var(--ui-field-float-border-focus);outline-offset:2px}.checkbox-field__native:checked{border-color:var(--ui-field-float-border-focus);background-color:var(--ui-field-float-border-focus);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6l2.5 2.5 4.5-5'/%3E%3C/svg%3E\")}.checkbox-field__native:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}.checkbox-field--invalid .checkbox-field__native{border-color:var(--ui-field-input-invalid-border)}.checkbox-field--invalid .checkbox-field__native:checked{border-color:var(--ui-field-input-invalid-border);background-color:var(--ui-field-input-invalid-border);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6l2.5 2.5 4.5-5'/%3E%3C/svg%3E\")}.checkbox-field--invalid .checkbox-field__native:focus-visible{outline-color:var(--ui-field-input-invalid-border)}.checkbox-field--invalid .checkbox-field__native:focus:not(:focus-visible){outline:2px solid var(--ui-field-input-invalid-border);outline-offset:2px}.checkbox-field__label{font-family:var(--structra-font-family);font-size:1rem;font-weight:var(--checkbox-label-weight, var(--structra-label-weight));line-height:1.35;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;padding-top:.1em}.checkbox-field__error{margin:.35rem 0 0 1.6rem;padding:0;font-size:.75rem;font-weight:var(--checkbox-helper-weight, var(--structra-body-weight));color:var(--ui-field-error-text-color);user-select:none;-webkit-user-select:none}.checkbox-field--loading{width:100%;max-width:100%;box-sizing:border-box}.checkbox-field--loading .checkbox-field__skeleton-row{display:flex;align-items:center;gap:.5rem;width:100%;max-width:100%;box-sizing:border-box}.checkbox-field--readonly .checkbox-field__row{cursor:default;pointer-events:none}.checkbox-field--readonly .checkbox-field__native{border-color:var(--ui-field-readonly-border);background-color:var(--ui-field-readonly-bg);cursor:default}.checkbox-field--readonly .checkbox-field__native:checked{border-color:var(--ui-field-readonly-border-focus);background-color:var(--ui-field-readonly-border-focus);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6l2.5 2.5 4.5-5'/%3E%3C/svg%3E\")}.checkbox-field--readonly .checkbox-field__native:focus,.checkbox-field--readonly .checkbox-field__native:focus-visible{outline:none}.checkbox-field--readonly .checkbox-field__label{color:#000;cursor:default}\n"] }]
+                    ], template: "@if (!loading) {\r\n<div class=\"checkbox-field\" [class.checkbox-field--invalid]=\"uiInvalid\"\r\n  [class.checkbox-field--readonly]=\"readonly\">\r\n  <label class=\"checkbox-field__row\">\r\n    <input\r\n      type=\"checkbox\"\r\n      class=\"checkbox-field__native\"\r\n      [id]=\"controlId\"\r\n      [attr.name]=\"name || null\"\r\n      [attr.tabindex]=\"readonly ? -1 : null\"\r\n      [checked]=\"checked\"\r\n      [disabled]=\"disabled\"\r\n      [required]=\"uiRequiredEffective\"\r\n      [attr.aria-invalid]=\"uiInvalid\"\r\n      [attr.aria-describedby]=\"uiAriaDescribedBy\"\r\n      [attr.aria-readonly]=\"readonly ? true : null\"\r\n      [attr.aria-label]=\"label || placeholder || 'Op\u00E7\u00E3o'\"\r\n      (click)=\"onCheckboxClick($event)\"\r\n      (change)=\"onNativeChange($event)\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    @if (label) {\r\n    <span class=\"checkbox-field__label\">{{ label }}</span>\r\n    }\r\n  </label>\r\n  @if (showErrorMessage && uiInvalid && uiErrorMessage) {\r\n  <p class=\"checkbox-field__error\" [id]=\"errorElementId\" role=\"alert\">{{ uiErrorMessage }}</p>\r\n  }\r\n</div>\r\n} @else {\r\n<div class=\"checkbox-field checkbox-field--loading\" role=\"status\" aria-live=\"polite\" [attr.aria-busy]=\"true\"\r\n  [attr.aria-label]=\"label || 'A carregar'\">\r\n  <div class=\"checkbox-field__skeleton-row\" aria-hidden=\"true\">\r\n    <app-skeleton-block width=\"1.1rem\" height=\"1.1rem\" radius=\"4px\" />\r\n    <app-skeleton-block width=\"11rem\" height=\"0.72rem\" radius=\"6px\" />\r\n  </div>\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:auto;box-sizing:border-box}:host(.checkbox-field--full-width){width:100%}.checkbox-field__row{display:flex;align-items:center;gap:.5rem;margin:0;cursor:pointer;width:fit-content;max-width:100%}.checkbox-field__native{appearance:none;-webkit-appearance:none;width:1.1rem;height:1.1rem;margin:0;flex-shrink:0;box-sizing:border-box;border:1px solid var(--ui-field-float-border);border-radius:4px;background-color:var(--field-background, var(--ui-field-float-bg));background-repeat:no-repeat;background-position:center;background-size:.65rem auto;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}.checkbox-field__native:focus-visible{outline:2px solid var(--ui-field-float-border-focus);outline-offset:2px}.checkbox-field__native:focus:not(:focus-visible){outline:2px solid var(--ui-field-float-border-focus);outline-offset:2px}.checkbox-field__native:checked{border-color:var(--ui-field-float-border-focus);background-color:var(--ui-field-float-border-focus);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6l2.5 2.5 4.5-5'/%3E%3C/svg%3E\")}.checkbox-field__native:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}.checkbox-field--invalid .checkbox-field__native{border-color:var(--ui-field-input-invalid-border)}.checkbox-field--invalid .checkbox-field__native:checked{border-color:var(--ui-field-input-invalid-border);background-color:var(--ui-field-input-invalid-border);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6l2.5 2.5 4.5-5'/%3E%3C/svg%3E\")}.checkbox-field--invalid .checkbox-field__native:focus-visible{outline-color:var(--ui-field-input-invalid-border)}.checkbox-field--invalid .checkbox-field__native:focus:not(:focus-visible){outline:2px solid var(--ui-field-input-invalid-border);outline-offset:2px}.checkbox-field__label{font-family:var(--structra-font-family);font-size:1rem;font-weight:var(--checkbox-label-weight, var(--structra-label-weight));line-height:1.35;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;padding-top:.1em}.checkbox-field__error{margin:.35rem 0 0 1.6rem;padding:0;font-size:.75rem;font-weight:var(--checkbox-helper-weight, var(--structra-body-weight));color:var(--ui-field-error-text-color);user-select:none;-webkit-user-select:none}.checkbox-field--loading{width:100%;max-width:100%;box-sizing:border-box}.checkbox-field--loading .checkbox-field__skeleton-row{display:flex;align-items:center;gap:.5rem;width:100%;max-width:100%;box-sizing:border-box}.checkbox-field--readonly .checkbox-field__row{cursor:default;pointer-events:none}.checkbox-field--readonly .checkbox-field__native{border-color:var(--ui-field-readonly-border);background-color:var(--ui-field-readonly-bg);cursor:default}.checkbox-field--readonly .checkbox-field__native:checked{border-color:var(--ui-field-readonly-border-focus);background-color:var(--ui-field-readonly-border-focus);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6l2.5 2.5 4.5-5'/%3E%3C/svg%3E\")}.checkbox-field--readonly .checkbox-field__native:focus,.checkbox-field--readonly .checkbox-field__native:focus-visible{outline:none}.checkbox-field--readonly .checkbox-field__label{color:#000;cursor:default}\n"] }]
         }], propDecorators: { fullWidth: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -3557,7 +3557,7 @@ class SwitchFieldComponent extends BooleanFieldDirective {
                 useExisting: forwardRef(() => SwitchFieldComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if (!loading) {\r\n<div class=\"switch-field\" [class.switch-field--invalid]=\"uiInvalid\"\r\n  [class.switch-field--readonly]=\"readonly\">\r\n  <label class=\"switch-field__row\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"switch-field__track\"\r\n      role=\"switch\"\r\n      [id]=\"controlId\"\r\n      [attr.name]=\"name || null\"\r\n      [attr.aria-checked]=\"checked\"\r\n      [attr.aria-labelledby]=\"label ? labelId : null\"\r\n      [attr.aria-invalid]=\"uiInvalid\"\r\n      [attr.aria-describedby]=\"uiAriaDescribedBy\"\r\n      [attr.aria-readonly]=\"readonly ? true : null\"\r\n      [disabled]=\"disabled || readonly\"\r\n      (click)=\"toggle()\"\r\n      (blur)=\"onBlur()\"\r\n    >\r\n      <span class=\"switch-field__thumb\" aria-hidden=\"true\"></span>\r\n    </button>\r\n    @if (label) {\r\n    <span class=\"switch-field__label\" [id]=\"labelId\">\r\n      {{ label }}\r\n      @if (uiRequiredEffective && showRequiredMark) {\r\n      <span class=\"switch-field__required\" aria-hidden=\"true\">*</span>\r\n      }\r\n    </span>\r\n    }\r\n  </label>\r\n  @if (showErrorMessage && uiInvalid && uiErrorMessage) {\r\n  <p class=\"switch-field__error\" [id]=\"errorElementId\" role=\"alert\">{{ uiErrorMessage }}</p>\r\n  }\r\n</div>\r\n} @else {\r\n<div class=\"switch-field switch-field--loading\" role=\"status\" aria-live=\"polite\" [attr.aria-busy]=\"true\"\r\n  [attr.aria-label]=\"label || 'A carregar'\">\r\n  <div class=\"switch-field__skeleton-row\" aria-hidden=\"true\">\r\n    <app-skeleton-block width=\"2.75rem\" height=\"1.5rem\" radius=\"999px\" />\r\n    <app-skeleton-block width=\"4.25rem\" height=\"0.72rem\" radius=\"6px\" />\r\n  </div>\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.switch-field__row{display:flex;align-items:center;gap:.65rem;margin:0;cursor:pointer;width:fit-content;max-width:100%}.switch-field__track{position:relative;width:2.75rem;height:1.5rem;padding:0;border:1px solid var(--ui-field-float-border);border-radius:999px;background:var(--ui-field-float-bg, #f3f3f3);cursor:pointer;flex-shrink:0;transition:background .15s ease,border-color .15s ease}.switch-field__track[aria-checked=true]{background:var(--ui-field-float-border-focus);border-color:var(--ui-field-float-border-focus)}.switch-field__track:focus-visible{outline:2px solid var(--ui-field-float-border-focus);outline-offset:2px}.switch-field__track:focus:not(:focus-visible){outline:2px solid var(--ui-field-float-border-focus);outline-offset:2px}.switch-field--invalid .switch-field__track{border-color:var(--ui-field-input-invalid-border)}.switch-field--invalid .switch-field__track[aria-checked=true]{background:var(--ui-field-input-invalid-border);border-color:var(--ui-field-input-invalid-border)}.switch-field--invalid .switch-field__track:focus-visible{outline:2px solid var(--ui-field-input-invalid-border);outline-offset:2px}.switch-field--invalid .switch-field__track:focus:not(:focus-visible){outline:2px solid var(--ui-field-input-invalid-border);outline-offset:2px}.switch-field__track:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}.switch-field__thumb{position:absolute;top:2px;left:2px;width:1.1rem;height:1.1rem;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003;transition:transform .15s ease}.switch-field__track[aria-checked=true] .switch-field__thumb{transform:translate(1.2rem)}.switch-field__label{font-family:var(--structra-font-family);font-size:1rem;font-weight:var(--switch-label-weight, var(--structra-label-weight));line-height:1.35;color:#000;-webkit-user-select:none;user-select:none}.switch-field__required{color:var(--ui-field-required-mark-color);margin-left:.15rem}.switch-field__error{margin:.35rem 0 0;padding:0;font-size:.75rem;font-weight:var(--switch-helper-weight, var(--structra-body-weight));color:var(--ui-field-error-text-color);user-select:none;-webkit-user-select:none}.switch-field--loading{min-width:8.5rem;width:100%;max-width:100%;box-sizing:border-box}.switch-field--loading .switch-field__skeleton-row{display:flex;align-items:center;gap:.65rem;width:100%;min-width:0;max-width:100%;box-sizing:border-box}.switch-field--readonly .switch-field__row{cursor:default}.switch-field--readonly .switch-field__track:disabled{cursor:default;border-color:var(--ui-field-readonly-border);background:var(--ui-field-readonly-bg);opacity:1}.switch-field--readonly .switch-field__track:disabled[aria-checked=true]{background:var(--ui-field-readonly-border-focus);border-color:var(--ui-field-readonly-border-focus)}.switch-field--readonly .switch-field__track:disabled:focus,.switch-field--readonly .switch-field__track:disabled:focus-visible{outline:none}.switch-field--readonly .switch-field__label{color:#000}\n"], dependencies: [{ kind: "component", type: SkeletonBlockComponent, selector: "app-skeleton-block", inputs: ["width", "height", "radius", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (!loading) {\r\n<div class=\"switch-field\" [class.switch-field--invalid]=\"uiInvalid\"\r\n  [class.switch-field--readonly]=\"readonly\">\r\n  <label class=\"switch-field__row\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"switch-field__track\"\r\n      role=\"switch\"\r\n      [id]=\"controlId\"\r\n      [attr.name]=\"name || null\"\r\n      [attr.aria-checked]=\"checked\"\r\n      [attr.aria-labelledby]=\"label ? labelId : null\"\r\n      [attr.aria-invalid]=\"uiInvalid\"\r\n      [attr.aria-describedby]=\"uiAriaDescribedBy\"\r\n      [attr.aria-readonly]=\"readonly ? true : null\"\r\n      [disabled]=\"disabled || readonly\"\r\n      (click)=\"toggle()\"\r\n      (blur)=\"onBlur()\"\r\n    >\r\n      <span class=\"switch-field__thumb\" aria-hidden=\"true\"></span>\r\n    </button>\r\n    @if (label) {\r\n    <span class=\"switch-field__label\" [id]=\"labelId\">\r\n      {{ label }}\r\n      @if (uiRequiredEffective && showRequiredMark) {\r\n      <span class=\"switch-field__required\" aria-hidden=\"true\">*</span>\r\n      }\r\n    </span>\r\n    }\r\n  </label>\r\n  @if (showErrorMessage && uiInvalid && uiErrorMessage) {\r\n  <p class=\"switch-field__error\" [id]=\"errorElementId\" role=\"alert\">{{ uiErrorMessage }}</p>\r\n  }\r\n</div>\r\n} @else {\r\n<div class=\"switch-field switch-field--loading\" role=\"status\" aria-live=\"polite\" [attr.aria-busy]=\"true\"\r\n  [attr.aria-label]=\"label || 'A carregar'\">\r\n  <div class=\"switch-field__skeleton-row\" aria-hidden=\"true\">\r\n    <app-skeleton-block width=\"2.75rem\" height=\"1.5rem\" radius=\"999px\" />\r\n    <app-skeleton-block width=\"4.25rem\" height=\"0.72rem\" radius=\"6px\" />\r\n  </div>\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.switch-field__row{display:flex;align-items:center;gap:.65rem;margin:0;cursor:pointer;width:fit-content;max-width:100%}.switch-field__track{position:relative;width:2.75rem;height:1.5rem;padding:0;border:1px solid var(--ui-field-float-border);border-radius:999px;background:var(--field-background, var(--ui-field-float-bg, #f3f3f3));cursor:pointer;flex-shrink:0;transition:background .15s ease,border-color .15s ease}.switch-field__track[aria-checked=true]{background:var(--ui-field-float-border-focus);border-color:var(--ui-field-float-border-focus)}.switch-field__track:focus-visible{outline:2px solid var(--ui-field-float-border-focus);outline-offset:2px}.switch-field__track:focus:not(:focus-visible){outline:2px solid var(--ui-field-float-border-focus);outline-offset:2px}.switch-field--invalid .switch-field__track{border-color:var(--ui-field-input-invalid-border)}.switch-field--invalid .switch-field__track[aria-checked=true]{background:var(--ui-field-input-invalid-border);border-color:var(--ui-field-input-invalid-border)}.switch-field--invalid .switch-field__track:focus-visible{outline:2px solid var(--ui-field-input-invalid-border);outline-offset:2px}.switch-field--invalid .switch-field__track:focus:not(:focus-visible){outline:2px solid var(--ui-field-input-invalid-border);outline-offset:2px}.switch-field__track:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}.switch-field__thumb{position:absolute;top:2px;left:2px;width:1.1rem;height:1.1rem;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003;transition:transform .15s ease}.switch-field__track[aria-checked=true] .switch-field__thumb{transform:translate(1.2rem)}.switch-field__label{font-family:var(--structra-font-family);font-size:1rem;font-weight:var(--switch-label-weight, var(--structra-label-weight));line-height:1.35;color:#000;-webkit-user-select:none;user-select:none}.switch-field__required{color:var(--ui-field-required-mark-color);margin-left:.15rem}.switch-field__error{margin:.35rem 0 0;padding:0;font-size:.75rem;font-weight:var(--switch-helper-weight, var(--structra-body-weight));color:var(--ui-field-error-text-color);user-select:none;-webkit-user-select:none}.switch-field--loading{min-width:8.5rem;width:100%;max-width:100%;box-sizing:border-box}.switch-field--loading .switch-field__skeleton-row{display:flex;align-items:center;gap:.65rem;width:100%;min-width:0;max-width:100%;box-sizing:border-box}.switch-field--readonly .switch-field__row{cursor:default}.switch-field--readonly .switch-field__track:disabled{cursor:default;border-color:var(--ui-field-readonly-border);background:var(--ui-field-readonly-bg);opacity:1}.switch-field--readonly .switch-field__track:disabled[aria-checked=true]{background:var(--ui-field-readonly-border-focus);border-color:var(--ui-field-readonly-border-focus)}.switch-field--readonly .switch-field__track:disabled:focus,.switch-field--readonly .switch-field__track:disabled:focus-visible{outline:none}.switch-field--readonly .switch-field__label{color:#000}\n"], dependencies: [{ kind: "component", type: SkeletonBlockComponent, selector: "app-skeleton-block", inputs: ["width", "height", "radius", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SwitchFieldComponent, decorators: [{
             type: Component,
@@ -3567,7 +3567,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useExisting: forwardRef(() => SwitchFieldComponent),
                             multi: true,
                         },
-                    ], template: "@if (!loading) {\r\n<div class=\"switch-field\" [class.switch-field--invalid]=\"uiInvalid\"\r\n  [class.switch-field--readonly]=\"readonly\">\r\n  <label class=\"switch-field__row\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"switch-field__track\"\r\n      role=\"switch\"\r\n      [id]=\"controlId\"\r\n      [attr.name]=\"name || null\"\r\n      [attr.aria-checked]=\"checked\"\r\n      [attr.aria-labelledby]=\"label ? labelId : null\"\r\n      [attr.aria-invalid]=\"uiInvalid\"\r\n      [attr.aria-describedby]=\"uiAriaDescribedBy\"\r\n      [attr.aria-readonly]=\"readonly ? true : null\"\r\n      [disabled]=\"disabled || readonly\"\r\n      (click)=\"toggle()\"\r\n      (blur)=\"onBlur()\"\r\n    >\r\n      <span class=\"switch-field__thumb\" aria-hidden=\"true\"></span>\r\n    </button>\r\n    @if (label) {\r\n    <span class=\"switch-field__label\" [id]=\"labelId\">\r\n      {{ label }}\r\n      @if (uiRequiredEffective && showRequiredMark) {\r\n      <span class=\"switch-field__required\" aria-hidden=\"true\">*</span>\r\n      }\r\n    </span>\r\n    }\r\n  </label>\r\n  @if (showErrorMessage && uiInvalid && uiErrorMessage) {\r\n  <p class=\"switch-field__error\" [id]=\"errorElementId\" role=\"alert\">{{ uiErrorMessage }}</p>\r\n  }\r\n</div>\r\n} @else {\r\n<div class=\"switch-field switch-field--loading\" role=\"status\" aria-live=\"polite\" [attr.aria-busy]=\"true\"\r\n  [attr.aria-label]=\"label || 'A carregar'\">\r\n  <div class=\"switch-field__skeleton-row\" aria-hidden=\"true\">\r\n    <app-skeleton-block width=\"2.75rem\" height=\"1.5rem\" radius=\"999px\" />\r\n    <app-skeleton-block width=\"4.25rem\" height=\"0.72rem\" radius=\"6px\" />\r\n  </div>\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.switch-field__row{display:flex;align-items:center;gap:.65rem;margin:0;cursor:pointer;width:fit-content;max-width:100%}.switch-field__track{position:relative;width:2.75rem;height:1.5rem;padding:0;border:1px solid var(--ui-field-float-border);border-radius:999px;background:var(--ui-field-float-bg, #f3f3f3);cursor:pointer;flex-shrink:0;transition:background .15s ease,border-color .15s ease}.switch-field__track[aria-checked=true]{background:var(--ui-field-float-border-focus);border-color:var(--ui-field-float-border-focus)}.switch-field__track:focus-visible{outline:2px solid var(--ui-field-float-border-focus);outline-offset:2px}.switch-field__track:focus:not(:focus-visible){outline:2px solid var(--ui-field-float-border-focus);outline-offset:2px}.switch-field--invalid .switch-field__track{border-color:var(--ui-field-input-invalid-border)}.switch-field--invalid .switch-field__track[aria-checked=true]{background:var(--ui-field-input-invalid-border);border-color:var(--ui-field-input-invalid-border)}.switch-field--invalid .switch-field__track:focus-visible{outline:2px solid var(--ui-field-input-invalid-border);outline-offset:2px}.switch-field--invalid .switch-field__track:focus:not(:focus-visible){outline:2px solid var(--ui-field-input-invalid-border);outline-offset:2px}.switch-field__track:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}.switch-field__thumb{position:absolute;top:2px;left:2px;width:1.1rem;height:1.1rem;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003;transition:transform .15s ease}.switch-field__track[aria-checked=true] .switch-field__thumb{transform:translate(1.2rem)}.switch-field__label{font-family:var(--structra-font-family);font-size:1rem;font-weight:var(--switch-label-weight, var(--structra-label-weight));line-height:1.35;color:#000;-webkit-user-select:none;user-select:none}.switch-field__required{color:var(--ui-field-required-mark-color);margin-left:.15rem}.switch-field__error{margin:.35rem 0 0;padding:0;font-size:.75rem;font-weight:var(--switch-helper-weight, var(--structra-body-weight));color:var(--ui-field-error-text-color);user-select:none;-webkit-user-select:none}.switch-field--loading{min-width:8.5rem;width:100%;max-width:100%;box-sizing:border-box}.switch-field--loading .switch-field__skeleton-row{display:flex;align-items:center;gap:.65rem;width:100%;min-width:0;max-width:100%;box-sizing:border-box}.switch-field--readonly .switch-field__row{cursor:default}.switch-field--readonly .switch-field__track:disabled{cursor:default;border-color:var(--ui-field-readonly-border);background:var(--ui-field-readonly-bg);opacity:1}.switch-field--readonly .switch-field__track:disabled[aria-checked=true]{background:var(--ui-field-readonly-border-focus);border-color:var(--ui-field-readonly-border-focus)}.switch-field--readonly .switch-field__track:disabled:focus,.switch-field--readonly .switch-field__track:disabled:focus-visible{outline:none}.switch-field--readonly .switch-field__label{color:#000}\n"] }]
+                    ], template: "@if (!loading) {\r\n<div class=\"switch-field\" [class.switch-field--invalid]=\"uiInvalid\"\r\n  [class.switch-field--readonly]=\"readonly\">\r\n  <label class=\"switch-field__row\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"switch-field__track\"\r\n      role=\"switch\"\r\n      [id]=\"controlId\"\r\n      [attr.name]=\"name || null\"\r\n      [attr.aria-checked]=\"checked\"\r\n      [attr.aria-labelledby]=\"label ? labelId : null\"\r\n      [attr.aria-invalid]=\"uiInvalid\"\r\n      [attr.aria-describedby]=\"uiAriaDescribedBy\"\r\n      [attr.aria-readonly]=\"readonly ? true : null\"\r\n      [disabled]=\"disabled || readonly\"\r\n      (click)=\"toggle()\"\r\n      (blur)=\"onBlur()\"\r\n    >\r\n      <span class=\"switch-field__thumb\" aria-hidden=\"true\"></span>\r\n    </button>\r\n    @if (label) {\r\n    <span class=\"switch-field__label\" [id]=\"labelId\">\r\n      {{ label }}\r\n      @if (uiRequiredEffective && showRequiredMark) {\r\n      <span class=\"switch-field__required\" aria-hidden=\"true\">*</span>\r\n      }\r\n    </span>\r\n    }\r\n  </label>\r\n  @if (showErrorMessage && uiInvalid && uiErrorMessage) {\r\n  <p class=\"switch-field__error\" [id]=\"errorElementId\" role=\"alert\">{{ uiErrorMessage }}</p>\r\n  }\r\n</div>\r\n} @else {\r\n<div class=\"switch-field switch-field--loading\" role=\"status\" aria-live=\"polite\" [attr.aria-busy]=\"true\"\r\n  [attr.aria-label]=\"label || 'A carregar'\">\r\n  <div class=\"switch-field__skeleton-row\" aria-hidden=\"true\">\r\n    <app-skeleton-block width=\"2.75rem\" height=\"1.5rem\" radius=\"999px\" />\r\n    <app-skeleton-block width=\"4.25rem\" height=\"0.72rem\" radius=\"6px\" />\r\n  </div>\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.switch-field__row{display:flex;align-items:center;gap:.65rem;margin:0;cursor:pointer;width:fit-content;max-width:100%}.switch-field__track{position:relative;width:2.75rem;height:1.5rem;padding:0;border:1px solid var(--ui-field-float-border);border-radius:999px;background:var(--field-background, var(--ui-field-float-bg, #f3f3f3));cursor:pointer;flex-shrink:0;transition:background .15s ease,border-color .15s ease}.switch-field__track[aria-checked=true]{background:var(--ui-field-float-border-focus);border-color:var(--ui-field-float-border-focus)}.switch-field__track:focus-visible{outline:2px solid var(--ui-field-float-border-focus);outline-offset:2px}.switch-field__track:focus:not(:focus-visible){outline:2px solid var(--ui-field-float-border-focus);outline-offset:2px}.switch-field--invalid .switch-field__track{border-color:var(--ui-field-input-invalid-border)}.switch-field--invalid .switch-field__track[aria-checked=true]{background:var(--ui-field-input-invalid-border);border-color:var(--ui-field-input-invalid-border)}.switch-field--invalid .switch-field__track:focus-visible{outline:2px solid var(--ui-field-input-invalid-border);outline-offset:2px}.switch-field--invalid .switch-field__track:focus:not(:focus-visible){outline:2px solid var(--ui-field-input-invalid-border);outline-offset:2px}.switch-field__track:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}.switch-field__thumb{position:absolute;top:2px;left:2px;width:1.1rem;height:1.1rem;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003;transition:transform .15s ease}.switch-field__track[aria-checked=true] .switch-field__thumb{transform:translate(1.2rem)}.switch-field__label{font-family:var(--structra-font-family);font-size:1rem;font-weight:var(--switch-label-weight, var(--structra-label-weight));line-height:1.35;color:#000;-webkit-user-select:none;user-select:none}.switch-field__required{color:var(--ui-field-required-mark-color);margin-left:.15rem}.switch-field__error{margin:.35rem 0 0;padding:0;font-size:.75rem;font-weight:var(--switch-helper-weight, var(--structra-body-weight));color:var(--ui-field-error-text-color);user-select:none;-webkit-user-select:none}.switch-field--loading{min-width:8.5rem;width:100%;max-width:100%;box-sizing:border-box}.switch-field--loading .switch-field__skeleton-row{display:flex;align-items:center;gap:.65rem;width:100%;min-width:0;max-width:100%;box-sizing:border-box}.switch-field--readonly .switch-field__row{cursor:default}.switch-field--readonly .switch-field__track:disabled{cursor:default;border-color:var(--ui-field-readonly-border);background:var(--ui-field-readonly-bg);opacity:1}.switch-field--readonly .switch-field__track:disabled[aria-checked=true]{background:var(--ui-field-readonly-border-focus);border-color:var(--ui-field-readonly-border-focus)}.switch-field--readonly .switch-field__track:disabled:focus,.switch-field--readonly .switch-field__track:disabled:focus-visible{outline:none}.switch-field--readonly .switch-field__label{color:#000}\n"] }]
         }] });
 
 /**
@@ -6316,11 +6316,11 @@ class FileUploadFieldComponent {
         this.filePreviewObjectUrls.clear();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileUploadFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FileUploadFieldComponent, isStandalone: true, selector: "app-file-upload-field", inputs: { label: "label", id: "id", hint: "hint", accept: "accept", acceptLabel: "acceptLabel", maxSizeMb: ["maxSizeMb", "maxSizeMb", numberAttribute], maxFiles: ["maxFiles", "maxFiles", numberAttribute], disabled: ["disabled", "disabled", booleanAttribute], multiple: ["multiple", "multiple", booleanAttribute], value: "value", fileItemRowClickable: ["fileItemRowClickable", "fileItemRowClickable", booleanAttribute], showFileDownload: "showFileDownload" }, outputs: { valueChange: "valueChange", fileRejected: "fileRejected", fileItemClick: "fileItemClick" }, host: { properties: { "attr.data-control-id": "this.hostDataControlId" } }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div\r\n  class=\"file-upload-field\"\r\n  [class.file-upload-field--disabled]=\"disabled\"\r\n  [class.file-upload-field--error]=\"errorMessage\"\r\n>\r\n  @if (label && label.length > 0) {\r\n    <label class=\"file-upload-field__label\" [attr.for]=\"fieldId\">\r\n      {{ label }}\r\n    </label>\r\n  }\r\n  <div\r\n    class=\"file-upload-field__zone\"\r\n    (click)=\"openSelector($event)\"\r\n    (dragover)=\"onDragOver($event)\"\r\n    (dragleave)=\"onDragLeave($event)\"\r\n    (drop)=\"onDrop($event)\"\r\n    (mouseenter)=\"onZoneEnter()\"\r\n    (mouseleave)=\"onZoneLeave()\"\r\n    [class.file-upload-field__zone--dragging]=\"isDragging\"\r\n    [class.file-upload-field__zone--hover]=\"hasHover && !disabled\"\r\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\r\n    role=\"button\"\r\n    [attr.tabindex]=\"disabled ? -1 : 0\"\r\n    (keydown)=\"onZoneKeydown($event)\"\r\n  >\r\n    <input\r\n      #fileInput\r\n      [id]=\"fieldId\"\r\n      type=\"file\"\r\n      class=\"file-upload-field__native\"\r\n      [attr.accept]=\"accept && accept.length ? accept : null\"\r\n      [multiple]=\"multiple\"\r\n      [disabled]=\"disabled\"\r\n      (change)=\"onNativeChange($event)\"\r\n    />\r\n    <div class=\"file-upload-field__zone-inner\">\r\n      <i class=\"fa-solid fa-cloud-arrow-up file-upload-field__icon\" aria-hidden=\"true\"></i>\r\n      <span class=\"file-upload-field__hint-main\">\r\n        Arraste arquivos ou\r\n        <span class=\"file-upload-field__hint-cta\">clique para procurar</span>\r\n      </span>\r\n      @if (acceptDisplayText) {\r\n        <span class=\"file-upload-field__hint-accept\">{{ acceptDisplayText }}</span>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (hint && hint.length > 0) {\r\n    <p class=\"file-upload-field__hint\" [id]=\"fieldId + '-hint'\">{{ hint }}</p>\r\n  }\r\n\r\n  @if (errorMessage) {\r\n    <p class=\"file-upload-field__error\" role=\"alert\" [id]=\"fieldId + '-err'\">\r\n      {{ errorMessage }}\r\n    </p>\r\n  }\r\n\r\n  @if (hasValue) {\r\n    <ul class=\"file-upload-field__list\" [attr.aria-label]=\"'Arquivos selecionados'\">\r\n      @for (row of filesList; track row.file) {\r\n        <li\r\n          class=\"file-upload-field__item\"\r\n          [class.file-upload-field__item--with-image]=\"imageListPreviewUrl(row.file)\"\r\n          [class.file-upload-field__item--selectable]=\"fileItemClickActive\"\r\n          (click)=\"onFileItemRowClick($event, row.file)\"\r\n        >\r\n          @if (imageListPreviewUrl(row.file); as thumbSrc) {\r\n            <div class=\"file-upload-field__thumb\" aria-hidden=\"true\">\r\n              <img\r\n                class=\"file-upload-field__thumb-img\"\r\n                [src]=\"thumbSrc\"\r\n                [alt]=\"'Pr\u00E9-visualiza\u00E7\u00E3o: ' + row.name\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              />\r\n            </div>\r\n          }\r\n          <div class=\"file-upload-field__item-meta\">\r\n            <span class=\"file-upload-field__name\">{{ row.name }}</span>\r\n            <span class=\"file-upload-field__size\">{{ row.sizeLabel }}</span>\r\n            <span class=\"file-upload-field__type\">{{ row.typeLabel }}</span>\r\n          </div>\r\n          <div class=\"file-upload-field__item-actions\">\r\n            @if (showFileDownload) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"file-upload-field__download\"\r\n                [disabled]=\"disabled\"\r\n                [attr.aria-label]=\"'Download ' + row.name\"\r\n                (click)=\"onDownloadFile(row.file, $event)\"\r\n              >\r\n                <i class=\"fa-solid fa-download\" aria-hidden=\"true\"></i>\r\n                <span class=\"file-upload-field__download-text\">Download</span>\r\n              </button>\r\n            }\r\n            <button\r\n              type=\"button\"\r\n              class=\"file-upload-field__remove\"\r\n              [disabled]=\"disabled\"\r\n              [attr.aria-label]=\"'Remover ' + row.name\"\r\n              (click)=\"onRemoveFile($index, $event)\"\r\n            >\r\n              <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\r\n              <span class=\"file-upload-field__remove-text\">Remover</span>\r\n            </button>\r\n          </div>\r\n        </li>\r\n      }\r\n    </ul>\r\n    @if (showClearAllButton) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"file-upload-field__clear\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"clearAll($event)\"\r\n      >\r\n        Limpar tudo\r\n      </button>\r\n    }\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box;user-select:none;-webkit-user-select:none}.file-upload-field{display:flex;flex-direction:column;gap:.35rem;min-width:0;width:100%}.file-upload-field__label{display:block;font-size:.82rem;font-weight:500;color:var(--ui-text-secondary, #404040)}.file-upload-field--disabled .file-upload-field__label,.file-upload-field--disabled .file-upload-field__hint,.file-upload-field--disabled .file-upload-field__hint-main{opacity:var(--ui-field-input-disabled-opacity, .6)}.file-upload-field__zone{position:relative;display:flex;flex-direction:column;align-items:stretch;min-height:4.5rem;border:1px solid var(--ui-field-float-border, #d1d1d1);border-radius:var(--ui-field-float-border-radius, 8px);background:var(--ui-field-float-bg, #ffffff);cursor:pointer;user-select:none;-webkit-user-select:none;transition:border-color .1s ease,box-shadow .1s ease,background .1s ease}.file-upload-field__zone:focus{outline:none}.file-upload-field--disabled .file-upload-field__zone,.file-upload-field--disabled .file-upload-field__zone[role=button]{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity, .6);pointer-events:none}.file-upload-field--error .file-upload-field__zone{border-color:var(--ui-field-input-invalid-border, #b91c1c);background:var(--ui-field-invalid-input-bg, #fef2f2)}.file-upload-field--error .file-upload-field__zone--hover,.file-upload-field--error .file-upload-field__zone--dragging{border-color:var(--ui-field-input-invalid-border, #b91c1c);box-shadow:0 0 0 2px var(--ui-field-input-invalid-focus-halo, rgba(185, 28, 28, .2))}.file-upload-field:not(.file-upload-field--error) .file-upload-field__zone--hover{border-color:var(--ui-field-float-border-hover);box-shadow:none}.file-upload-field__zone--dragging{border-style:dashed;border-width:2px;border-color:var(--ui-field-float-border-focus, #2563eb);background:var(--ui-field-readonly-bg, #f4f4f5);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring, rgba(37, 99, 235, .2))}.file-upload-field:not(.file-upload-field--disabled) .file-upload-field__zone:focus-visible{border-color:var(--ui-field-float-border-focus, #2563eb);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring, rgba(37, 99, 235, .25))}.file-upload-field__zone-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;text-align:center;padding:1.1rem .9rem;min-height:3.4rem}.file-upload-field__icon{font-size:1.35rem;color:var(--ui-field-float-prefix-color, #6b6b6b);opacity:.9}.file-upload-field__zone--dragging .file-upload-field__icon{color:var(--ui-field-float-border-focus, #2563eb)}.file-upload-field__hint-main{font-size:.8rem;line-height:1.4;color:var(--ui-text-secondary, #525252);max-width:18rem}.file-upload-field__hint-cta{color:var(--ui-field-float-border-focus, #2563eb);font-weight:500;text-decoration:underline;text-underline-offset:2px}.file-upload-field__hint-accept{display:block;font-size:.72rem;color:var(--ui-text-muted, #737373);max-width:20rem;word-break:break-word}.file-upload-field__native{position:absolute;width:.1px;height:.1px;opacity:0;overflow:hidden;z-index:-1;pointer-events:none}.file-upload-field__hint{font-size:.75rem;line-height:1.4;margin:.15rem 0 0;color:var(--ui-text-secondary, #525252)}.file-upload-field__error{font-size:.75rem;line-height:1.4;margin:.1rem 0 0;color:#b91c1c}.file-upload-field__list{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem}.file-upload-field__item{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:.5rem .75rem;padding:.55rem .65rem;border:1px solid var(--ui-field-float-border, #e5e5e5);border-radius:6px;background:var(--ui-page-bg, #fafafa);font-size:.78rem;line-height:1.35}.file-upload-field__item--selectable{cursor:pointer}.file-upload-field__thumb{flex-shrink:0;width:4.5rem;height:4.5rem;border-radius:6px;overflow:hidden;background:#e5e5e5;border:1px solid var(--ui-field-float-border, #e5e5e5)}.file-upload-field__thumb-img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.file-upload-field__item-meta{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1 1 8rem}.file-upload-field__name{font-weight:500;color:#171717;word-break:break-word}.file-upload-field__size{color:#737373;font-size:.76rem}.file-upload-field__type{color:#8b8b8b;font-size:.72rem;font-family:ui-monospace,Consolas,monospace}.file-upload-field__item-actions{display:inline-flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;justify-content:flex-end;gap:.2rem .35rem;flex-shrink:0;min-height:0}.file-upload-field__download{display:inline-grid;grid-template-columns:1em minmax(0,max-content);column-gap:.35rem;place-items:center;border:0;background:transparent;color:var(--app-color-primary, #2563eb);padding:.15rem .35rem;border-radius:4px;cursor:pointer;font:inherit;font-size:.75rem;font-weight:500;line-height:1.15;flex-shrink:0;transition:background .1s ease,color .1s ease}.file-upload-field__download:hover:not(:disabled){background:color-mix(in srgb,var(--app-color-primary, #2563eb) 10%,transparent)}.file-upload-field__download:disabled{opacity:.45;cursor:not-allowed}.file-upload-field__remove{display:inline-grid;grid-template-columns:1em minmax(0,max-content);column-gap:.35rem;place-items:center;border:0;background:transparent;color:#b91c1c;padding:.15rem .35rem;border-radius:4px;cursor:pointer;font:inherit;font-size:.75rem;font-weight:500;line-height:1.15;flex-shrink:0;transition:background .1s ease}.file-upload-field__remove:hover:not(:disabled){background:#fef2f2}.file-upload-field__remove:disabled{opacity:.45;cursor:not-allowed}.file-upload-field__remove i,.file-upload-field__download i{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1em;height:1em;line-height:0;font-size:1em;align-self:center;justify-self:center}.file-upload-field__remove-text,.file-upload-field__download-text{position:relative;width:auto;min-width:0;height:auto;clip:auto;line-height:1.15;transform:translateY(.08em)}.file-upload-field__clear{align-self:flex-start;margin-top:.1rem;font-size:.75rem;color:#525252;background:transparent;border:0;text-decoration:underline;text-underline-offset:2px;padding:.15rem .1rem .15rem 0;cursor:pointer;transition:color .1s ease}.file-upload-field__clear:hover:not(:disabled){color:#171717;background:transparent}.file-upload-field__clear:disabled{opacity:.45;cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FileUploadFieldComponent, isStandalone: true, selector: "app-file-upload-field", inputs: { label: "label", id: "id", hint: "hint", accept: "accept", acceptLabel: "acceptLabel", maxSizeMb: ["maxSizeMb", "maxSizeMb", numberAttribute], maxFiles: ["maxFiles", "maxFiles", numberAttribute], disabled: ["disabled", "disabled", booleanAttribute], multiple: ["multiple", "multiple", booleanAttribute], value: "value", fileItemRowClickable: ["fileItemRowClickable", "fileItemRowClickable", booleanAttribute], showFileDownload: "showFileDownload" }, outputs: { valueChange: "valueChange", fileRejected: "fileRejected", fileItemClick: "fileItemClick" }, host: { properties: { "attr.data-control-id": "this.hostDataControlId" } }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div\r\n  class=\"file-upload-field\"\r\n  [class.file-upload-field--disabled]=\"disabled\"\r\n  [class.file-upload-field--error]=\"errorMessage\"\r\n>\r\n  @if (label && label.length > 0) {\r\n    <label class=\"file-upload-field__label\" [attr.for]=\"fieldId\">\r\n      {{ label }}\r\n    </label>\r\n  }\r\n  <div\r\n    class=\"file-upload-field__zone\"\r\n    (click)=\"openSelector($event)\"\r\n    (dragover)=\"onDragOver($event)\"\r\n    (dragleave)=\"onDragLeave($event)\"\r\n    (drop)=\"onDrop($event)\"\r\n    (mouseenter)=\"onZoneEnter()\"\r\n    (mouseleave)=\"onZoneLeave()\"\r\n    [class.file-upload-field__zone--dragging]=\"isDragging\"\r\n    [class.file-upload-field__zone--hover]=\"hasHover && !disabled\"\r\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\r\n    role=\"button\"\r\n    [attr.tabindex]=\"disabled ? -1 : 0\"\r\n    (keydown)=\"onZoneKeydown($event)\"\r\n  >\r\n    <input\r\n      #fileInput\r\n      [id]=\"fieldId\"\r\n      type=\"file\"\r\n      class=\"file-upload-field__native\"\r\n      [attr.accept]=\"accept && accept.length ? accept : null\"\r\n      [multiple]=\"multiple\"\r\n      [disabled]=\"disabled\"\r\n      (change)=\"onNativeChange($event)\"\r\n    />\r\n    <div class=\"file-upload-field__zone-inner\">\r\n      <i class=\"fa-solid fa-cloud-arrow-up file-upload-field__icon\" aria-hidden=\"true\"></i>\r\n      <span class=\"file-upload-field__hint-main\">\r\n        Arraste arquivos ou\r\n        <span class=\"file-upload-field__hint-cta\">clique para procurar</span>\r\n      </span>\r\n      @if (acceptDisplayText) {\r\n        <span class=\"file-upload-field__hint-accept\">{{ acceptDisplayText }}</span>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (hint && hint.length > 0) {\r\n    <p class=\"file-upload-field__hint\" [id]=\"fieldId + '-hint'\">{{ hint }}</p>\r\n  }\r\n\r\n  @if (errorMessage) {\r\n    <p class=\"file-upload-field__error\" role=\"alert\" [id]=\"fieldId + '-err'\">\r\n      {{ errorMessage }}\r\n    </p>\r\n  }\r\n\r\n  @if (hasValue) {\r\n    <ul class=\"file-upload-field__list\" [attr.aria-label]=\"'Arquivos selecionados'\">\r\n      @for (row of filesList; track row.file) {\r\n        <li\r\n          class=\"file-upload-field__item\"\r\n          [class.file-upload-field__item--with-image]=\"imageListPreviewUrl(row.file)\"\r\n          [class.file-upload-field__item--selectable]=\"fileItemClickActive\"\r\n          (click)=\"onFileItemRowClick($event, row.file)\"\r\n        >\r\n          @if (imageListPreviewUrl(row.file); as thumbSrc) {\r\n            <div class=\"file-upload-field__thumb\" aria-hidden=\"true\">\r\n              <img\r\n                class=\"file-upload-field__thumb-img\"\r\n                [src]=\"thumbSrc\"\r\n                [alt]=\"'Pr\u00E9-visualiza\u00E7\u00E3o: ' + row.name\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              />\r\n            </div>\r\n          }\r\n          <div class=\"file-upload-field__item-meta\">\r\n            <span class=\"file-upload-field__name\">{{ row.name }}</span>\r\n            <span class=\"file-upload-field__size\">{{ row.sizeLabel }}</span>\r\n            <span class=\"file-upload-field__type\">{{ row.typeLabel }}</span>\r\n          </div>\r\n          <div class=\"file-upload-field__item-actions\">\r\n            @if (showFileDownload) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"file-upload-field__download\"\r\n                [disabled]=\"disabled\"\r\n                [attr.aria-label]=\"'Download ' + row.name\"\r\n                (click)=\"onDownloadFile(row.file, $event)\"\r\n              >\r\n                <i class=\"fa-solid fa-download\" aria-hidden=\"true\"></i>\r\n                <span class=\"file-upload-field__download-text\">Download</span>\r\n              </button>\r\n            }\r\n            <button\r\n              type=\"button\"\r\n              class=\"file-upload-field__remove\"\r\n              [disabled]=\"disabled\"\r\n              [attr.aria-label]=\"'Remover ' + row.name\"\r\n              (click)=\"onRemoveFile($index, $event)\"\r\n            >\r\n              <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\r\n              <span class=\"file-upload-field__remove-text\">Remover</span>\r\n            </button>\r\n          </div>\r\n        </li>\r\n      }\r\n    </ul>\r\n    @if (showClearAllButton) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"file-upload-field__clear\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"clearAll($event)\"\r\n      >\r\n        Limpar tudo\r\n      </button>\r\n    }\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box;user-select:none;-webkit-user-select:none}.file-upload-field{display:flex;flex-direction:column;gap:.35rem;min-width:0;width:100%}.file-upload-field__label{display:block;font-size:.82rem;font-weight:500;color:var(--ui-text-secondary, #404040)}.file-upload-field--disabled .file-upload-field__label,.file-upload-field--disabled .file-upload-field__hint,.file-upload-field--disabled .file-upload-field__hint-main{opacity:var(--ui-field-input-disabled-opacity, .6)}.file-upload-field__zone{position:relative;display:flex;flex-direction:column;align-items:stretch;min-height:4.5rem;border:1px solid var(--ui-field-float-border, #d1d1d1);border-radius:var(--ui-field-float-border-radius, 8px);background:var(--field-background, var(--ui-field-float-bg, #ffffff));cursor:pointer;user-select:none;-webkit-user-select:none;transition:border-color .1s ease,box-shadow .1s ease,background .1s ease}.file-upload-field__zone:focus{outline:none}.file-upload-field--disabled .file-upload-field__zone,.file-upload-field--disabled .file-upload-field__zone[role=button]{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity, .6);pointer-events:none}.file-upload-field--error .file-upload-field__zone{border-color:var(--ui-field-input-invalid-border, #b91c1c);background:var(--ui-field-invalid-input-bg, #fef2f2)}.file-upload-field--error .file-upload-field__zone--hover,.file-upload-field--error .file-upload-field__zone--dragging{border-color:var(--ui-field-input-invalid-border, #b91c1c);box-shadow:0 0 0 2px var(--ui-field-input-invalid-focus-halo, rgba(185, 28, 28, .2))}.file-upload-field:not(.file-upload-field--error) .file-upload-field__zone--hover{border-color:var(--ui-field-float-border-hover);box-shadow:none}.file-upload-field__zone--dragging{border-style:dashed;border-width:2px;border-color:var(--ui-field-float-border-focus, #2563eb);background:var(--ui-field-readonly-bg, #f4f4f5);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring, rgba(37, 99, 235, .2))}.file-upload-field:not(.file-upload-field--disabled) .file-upload-field__zone:focus-visible{border-color:var(--ui-field-float-border-focus, #2563eb);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring, rgba(37, 99, 235, .25))}.file-upload-field__zone-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;text-align:center;padding:1.1rem .9rem;min-height:3.4rem}.file-upload-field__icon{font-size:1.35rem;color:var(--ui-field-float-prefix-color, #6b6b6b);opacity:.9}.file-upload-field__zone--dragging .file-upload-field__icon{color:var(--ui-field-float-border-focus, #2563eb)}.file-upload-field__hint-main{font-size:.8rem;line-height:1.4;color:var(--ui-text-secondary, #525252);max-width:18rem}.file-upload-field__hint-cta{color:var(--ui-field-float-border-focus, #2563eb);font-weight:500;text-decoration:underline;text-underline-offset:2px}.file-upload-field__hint-accept{display:block;font-size:.72rem;color:var(--ui-text-muted, #737373);max-width:20rem;word-break:break-word}.file-upload-field__native{position:absolute;width:.1px;height:.1px;opacity:0;overflow:hidden;z-index:-1;pointer-events:none}.file-upload-field__hint{font-size:.75rem;line-height:1.4;margin:.15rem 0 0;color:var(--ui-text-secondary, #525252)}.file-upload-field__error{font-size:.75rem;line-height:1.4;margin:.1rem 0 0;color:#b91c1c}.file-upload-field__list{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem}.file-upload-field__item{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:.5rem .75rem;padding:.55rem .65rem;border:1px solid var(--ui-field-float-border, #e5e5e5);border-radius:6px;background:var(--ui-page-bg, #fafafa);font-size:.78rem;line-height:1.35}.file-upload-field__item--selectable{cursor:pointer}.file-upload-field__thumb{flex-shrink:0;width:4.5rem;height:4.5rem;border-radius:6px;overflow:hidden;background:#e5e5e5;border:1px solid var(--ui-field-float-border, #e5e5e5)}.file-upload-field__thumb-img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.file-upload-field__item-meta{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1 1 8rem}.file-upload-field__name{font-weight:500;color:#171717;word-break:break-word}.file-upload-field__size{color:#737373;font-size:.76rem}.file-upload-field__type{color:#8b8b8b;font-size:.72rem;font-family:ui-monospace,Consolas,monospace}.file-upload-field__item-actions{display:inline-flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;justify-content:flex-end;gap:.2rem .35rem;flex-shrink:0;min-height:0}.file-upload-field__download{display:inline-grid;grid-template-columns:1em minmax(0,max-content);column-gap:.35rem;place-items:center;border:0;background:transparent;color:var(--app-color-primary, #2563eb);padding:.15rem .35rem;border-radius:4px;cursor:pointer;font:inherit;font-size:.75rem;font-weight:500;line-height:1.15;flex-shrink:0;transition:background .1s ease,color .1s ease}.file-upload-field__download:hover:not(:disabled){background:color-mix(in srgb,var(--app-color-primary, #2563eb) 10%,transparent)}.file-upload-field__download:disabled{opacity:.45;cursor:not-allowed}.file-upload-field__remove{display:inline-grid;grid-template-columns:1em minmax(0,max-content);column-gap:.35rem;place-items:center;border:0;background:transparent;color:#b91c1c;padding:.15rem .35rem;border-radius:4px;cursor:pointer;font:inherit;font-size:.75rem;font-weight:500;line-height:1.15;flex-shrink:0;transition:background .1s ease}.file-upload-field__remove:hover:not(:disabled){background:#fef2f2}.file-upload-field__remove:disabled{opacity:.45;cursor:not-allowed}.file-upload-field__remove i,.file-upload-field__download i{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1em;height:1em;line-height:0;font-size:1em;align-self:center;justify-self:center}.file-upload-field__remove-text,.file-upload-field__download-text{position:relative;width:auto;min-width:0;height:auto;clip:auto;line-height:1.15;transform:translateY(.08em)}.file-upload-field__clear{align-self:flex-start;margin-top:.1rem;font-size:.75rem;color:#525252;background:transparent;border:0;text-decoration:underline;text-underline-offset:2px;padding:.15rem .1rem .15rem 0;cursor:pointer;transition:color .1s ease}.file-upload-field__clear:hover:not(:disabled){color:#171717;background:transparent}.file-upload-field__clear:disabled{opacity:.45;cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileUploadFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-file-upload-field', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"file-upload-field\"\r\n  [class.file-upload-field--disabled]=\"disabled\"\r\n  [class.file-upload-field--error]=\"errorMessage\"\r\n>\r\n  @if (label && label.length > 0) {\r\n    <label class=\"file-upload-field__label\" [attr.for]=\"fieldId\">\r\n      {{ label }}\r\n    </label>\r\n  }\r\n  <div\r\n    class=\"file-upload-field__zone\"\r\n    (click)=\"openSelector($event)\"\r\n    (dragover)=\"onDragOver($event)\"\r\n    (dragleave)=\"onDragLeave($event)\"\r\n    (drop)=\"onDrop($event)\"\r\n    (mouseenter)=\"onZoneEnter()\"\r\n    (mouseleave)=\"onZoneLeave()\"\r\n    [class.file-upload-field__zone--dragging]=\"isDragging\"\r\n    [class.file-upload-field__zone--hover]=\"hasHover && !disabled\"\r\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\r\n    role=\"button\"\r\n    [attr.tabindex]=\"disabled ? -1 : 0\"\r\n    (keydown)=\"onZoneKeydown($event)\"\r\n  >\r\n    <input\r\n      #fileInput\r\n      [id]=\"fieldId\"\r\n      type=\"file\"\r\n      class=\"file-upload-field__native\"\r\n      [attr.accept]=\"accept && accept.length ? accept : null\"\r\n      [multiple]=\"multiple\"\r\n      [disabled]=\"disabled\"\r\n      (change)=\"onNativeChange($event)\"\r\n    />\r\n    <div class=\"file-upload-field__zone-inner\">\r\n      <i class=\"fa-solid fa-cloud-arrow-up file-upload-field__icon\" aria-hidden=\"true\"></i>\r\n      <span class=\"file-upload-field__hint-main\">\r\n        Arraste arquivos ou\r\n        <span class=\"file-upload-field__hint-cta\">clique para procurar</span>\r\n      </span>\r\n      @if (acceptDisplayText) {\r\n        <span class=\"file-upload-field__hint-accept\">{{ acceptDisplayText }}</span>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (hint && hint.length > 0) {\r\n    <p class=\"file-upload-field__hint\" [id]=\"fieldId + '-hint'\">{{ hint }}</p>\r\n  }\r\n\r\n  @if (errorMessage) {\r\n    <p class=\"file-upload-field__error\" role=\"alert\" [id]=\"fieldId + '-err'\">\r\n      {{ errorMessage }}\r\n    </p>\r\n  }\r\n\r\n  @if (hasValue) {\r\n    <ul class=\"file-upload-field__list\" [attr.aria-label]=\"'Arquivos selecionados'\">\r\n      @for (row of filesList; track row.file) {\r\n        <li\r\n          class=\"file-upload-field__item\"\r\n          [class.file-upload-field__item--with-image]=\"imageListPreviewUrl(row.file)\"\r\n          [class.file-upload-field__item--selectable]=\"fileItemClickActive\"\r\n          (click)=\"onFileItemRowClick($event, row.file)\"\r\n        >\r\n          @if (imageListPreviewUrl(row.file); as thumbSrc) {\r\n            <div class=\"file-upload-field__thumb\" aria-hidden=\"true\">\r\n              <img\r\n                class=\"file-upload-field__thumb-img\"\r\n                [src]=\"thumbSrc\"\r\n                [alt]=\"'Pr\u00E9-visualiza\u00E7\u00E3o: ' + row.name\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              />\r\n            </div>\r\n          }\r\n          <div class=\"file-upload-field__item-meta\">\r\n            <span class=\"file-upload-field__name\">{{ row.name }}</span>\r\n            <span class=\"file-upload-field__size\">{{ row.sizeLabel }}</span>\r\n            <span class=\"file-upload-field__type\">{{ row.typeLabel }}</span>\r\n          </div>\r\n          <div class=\"file-upload-field__item-actions\">\r\n            @if (showFileDownload) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"file-upload-field__download\"\r\n                [disabled]=\"disabled\"\r\n                [attr.aria-label]=\"'Download ' + row.name\"\r\n                (click)=\"onDownloadFile(row.file, $event)\"\r\n              >\r\n                <i class=\"fa-solid fa-download\" aria-hidden=\"true\"></i>\r\n                <span class=\"file-upload-field__download-text\">Download</span>\r\n              </button>\r\n            }\r\n            <button\r\n              type=\"button\"\r\n              class=\"file-upload-field__remove\"\r\n              [disabled]=\"disabled\"\r\n              [attr.aria-label]=\"'Remover ' + row.name\"\r\n              (click)=\"onRemoveFile($index, $event)\"\r\n            >\r\n              <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\r\n              <span class=\"file-upload-field__remove-text\">Remover</span>\r\n            </button>\r\n          </div>\r\n        </li>\r\n      }\r\n    </ul>\r\n    @if (showClearAllButton) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"file-upload-field__clear\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"clearAll($event)\"\r\n      >\r\n        Limpar tudo\r\n      </button>\r\n    }\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box;user-select:none;-webkit-user-select:none}.file-upload-field{display:flex;flex-direction:column;gap:.35rem;min-width:0;width:100%}.file-upload-field__label{display:block;font-size:.82rem;font-weight:500;color:var(--ui-text-secondary, #404040)}.file-upload-field--disabled .file-upload-field__label,.file-upload-field--disabled .file-upload-field__hint,.file-upload-field--disabled .file-upload-field__hint-main{opacity:var(--ui-field-input-disabled-opacity, .6)}.file-upload-field__zone{position:relative;display:flex;flex-direction:column;align-items:stretch;min-height:4.5rem;border:1px solid var(--ui-field-float-border, #d1d1d1);border-radius:var(--ui-field-float-border-radius, 8px);background:var(--ui-field-float-bg, #ffffff);cursor:pointer;user-select:none;-webkit-user-select:none;transition:border-color .1s ease,box-shadow .1s ease,background .1s ease}.file-upload-field__zone:focus{outline:none}.file-upload-field--disabled .file-upload-field__zone,.file-upload-field--disabled .file-upload-field__zone[role=button]{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity, .6);pointer-events:none}.file-upload-field--error .file-upload-field__zone{border-color:var(--ui-field-input-invalid-border, #b91c1c);background:var(--ui-field-invalid-input-bg, #fef2f2)}.file-upload-field--error .file-upload-field__zone--hover,.file-upload-field--error .file-upload-field__zone--dragging{border-color:var(--ui-field-input-invalid-border, #b91c1c);box-shadow:0 0 0 2px var(--ui-field-input-invalid-focus-halo, rgba(185, 28, 28, .2))}.file-upload-field:not(.file-upload-field--error) .file-upload-field__zone--hover{border-color:var(--ui-field-float-border-hover);box-shadow:none}.file-upload-field__zone--dragging{border-style:dashed;border-width:2px;border-color:var(--ui-field-float-border-focus, #2563eb);background:var(--ui-field-readonly-bg, #f4f4f5);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring, rgba(37, 99, 235, .2))}.file-upload-field:not(.file-upload-field--disabled) .file-upload-field__zone:focus-visible{border-color:var(--ui-field-float-border-focus, #2563eb);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring, rgba(37, 99, 235, .25))}.file-upload-field__zone-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;text-align:center;padding:1.1rem .9rem;min-height:3.4rem}.file-upload-field__icon{font-size:1.35rem;color:var(--ui-field-float-prefix-color, #6b6b6b);opacity:.9}.file-upload-field__zone--dragging .file-upload-field__icon{color:var(--ui-field-float-border-focus, #2563eb)}.file-upload-field__hint-main{font-size:.8rem;line-height:1.4;color:var(--ui-text-secondary, #525252);max-width:18rem}.file-upload-field__hint-cta{color:var(--ui-field-float-border-focus, #2563eb);font-weight:500;text-decoration:underline;text-underline-offset:2px}.file-upload-field__hint-accept{display:block;font-size:.72rem;color:var(--ui-text-muted, #737373);max-width:20rem;word-break:break-word}.file-upload-field__native{position:absolute;width:.1px;height:.1px;opacity:0;overflow:hidden;z-index:-1;pointer-events:none}.file-upload-field__hint{font-size:.75rem;line-height:1.4;margin:.15rem 0 0;color:var(--ui-text-secondary, #525252)}.file-upload-field__error{font-size:.75rem;line-height:1.4;margin:.1rem 0 0;color:#b91c1c}.file-upload-field__list{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem}.file-upload-field__item{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:.5rem .75rem;padding:.55rem .65rem;border:1px solid var(--ui-field-float-border, #e5e5e5);border-radius:6px;background:var(--ui-page-bg, #fafafa);font-size:.78rem;line-height:1.35}.file-upload-field__item--selectable{cursor:pointer}.file-upload-field__thumb{flex-shrink:0;width:4.5rem;height:4.5rem;border-radius:6px;overflow:hidden;background:#e5e5e5;border:1px solid var(--ui-field-float-border, #e5e5e5)}.file-upload-field__thumb-img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.file-upload-field__item-meta{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1 1 8rem}.file-upload-field__name{font-weight:500;color:#171717;word-break:break-word}.file-upload-field__size{color:#737373;font-size:.76rem}.file-upload-field__type{color:#8b8b8b;font-size:.72rem;font-family:ui-monospace,Consolas,monospace}.file-upload-field__item-actions{display:inline-flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;justify-content:flex-end;gap:.2rem .35rem;flex-shrink:0;min-height:0}.file-upload-field__download{display:inline-grid;grid-template-columns:1em minmax(0,max-content);column-gap:.35rem;place-items:center;border:0;background:transparent;color:var(--app-color-primary, #2563eb);padding:.15rem .35rem;border-radius:4px;cursor:pointer;font:inherit;font-size:.75rem;font-weight:500;line-height:1.15;flex-shrink:0;transition:background .1s ease,color .1s ease}.file-upload-field__download:hover:not(:disabled){background:color-mix(in srgb,var(--app-color-primary, #2563eb) 10%,transparent)}.file-upload-field__download:disabled{opacity:.45;cursor:not-allowed}.file-upload-field__remove{display:inline-grid;grid-template-columns:1em minmax(0,max-content);column-gap:.35rem;place-items:center;border:0;background:transparent;color:#b91c1c;padding:.15rem .35rem;border-radius:4px;cursor:pointer;font:inherit;font-size:.75rem;font-weight:500;line-height:1.15;flex-shrink:0;transition:background .1s ease}.file-upload-field__remove:hover:not(:disabled){background:#fef2f2}.file-upload-field__remove:disabled{opacity:.45;cursor:not-allowed}.file-upload-field__remove i,.file-upload-field__download i{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1em;height:1em;line-height:0;font-size:1em;align-self:center;justify-self:center}.file-upload-field__remove-text,.file-upload-field__download-text{position:relative;width:auto;min-width:0;height:auto;clip:auto;line-height:1.15;transform:translateY(.08em)}.file-upload-field__clear{align-self:flex-start;margin-top:.1rem;font-size:.75rem;color:#525252;background:transparent;border:0;text-decoration:underline;text-underline-offset:2px;padding:.15rem .1rem .15rem 0;cursor:pointer;transition:color .1s ease}.file-upload-field__clear:hover:not(:disabled){color:#171717;background:transparent}.file-upload-field__clear:disabled{opacity:.45;cursor:not-allowed}\n"] }]
+            args: [{ selector: 'app-file-upload-field', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"file-upload-field\"\r\n  [class.file-upload-field--disabled]=\"disabled\"\r\n  [class.file-upload-field--error]=\"errorMessage\"\r\n>\r\n  @if (label && label.length > 0) {\r\n    <label class=\"file-upload-field__label\" [attr.for]=\"fieldId\">\r\n      {{ label }}\r\n    </label>\r\n  }\r\n  <div\r\n    class=\"file-upload-field__zone\"\r\n    (click)=\"openSelector($event)\"\r\n    (dragover)=\"onDragOver($event)\"\r\n    (dragleave)=\"onDragLeave($event)\"\r\n    (drop)=\"onDrop($event)\"\r\n    (mouseenter)=\"onZoneEnter()\"\r\n    (mouseleave)=\"onZoneLeave()\"\r\n    [class.file-upload-field__zone--dragging]=\"isDragging\"\r\n    [class.file-upload-field__zone--hover]=\"hasHover && !disabled\"\r\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\r\n    role=\"button\"\r\n    [attr.tabindex]=\"disabled ? -1 : 0\"\r\n    (keydown)=\"onZoneKeydown($event)\"\r\n  >\r\n    <input\r\n      #fileInput\r\n      [id]=\"fieldId\"\r\n      type=\"file\"\r\n      class=\"file-upload-field__native\"\r\n      [attr.accept]=\"accept && accept.length ? accept : null\"\r\n      [multiple]=\"multiple\"\r\n      [disabled]=\"disabled\"\r\n      (change)=\"onNativeChange($event)\"\r\n    />\r\n    <div class=\"file-upload-field__zone-inner\">\r\n      <i class=\"fa-solid fa-cloud-arrow-up file-upload-field__icon\" aria-hidden=\"true\"></i>\r\n      <span class=\"file-upload-field__hint-main\">\r\n        Arraste arquivos ou\r\n        <span class=\"file-upload-field__hint-cta\">clique para procurar</span>\r\n      </span>\r\n      @if (acceptDisplayText) {\r\n        <span class=\"file-upload-field__hint-accept\">{{ acceptDisplayText }}</span>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (hint && hint.length > 0) {\r\n    <p class=\"file-upload-field__hint\" [id]=\"fieldId + '-hint'\">{{ hint }}</p>\r\n  }\r\n\r\n  @if (errorMessage) {\r\n    <p class=\"file-upload-field__error\" role=\"alert\" [id]=\"fieldId + '-err'\">\r\n      {{ errorMessage }}\r\n    </p>\r\n  }\r\n\r\n  @if (hasValue) {\r\n    <ul class=\"file-upload-field__list\" [attr.aria-label]=\"'Arquivos selecionados'\">\r\n      @for (row of filesList; track row.file) {\r\n        <li\r\n          class=\"file-upload-field__item\"\r\n          [class.file-upload-field__item--with-image]=\"imageListPreviewUrl(row.file)\"\r\n          [class.file-upload-field__item--selectable]=\"fileItemClickActive\"\r\n          (click)=\"onFileItemRowClick($event, row.file)\"\r\n        >\r\n          @if (imageListPreviewUrl(row.file); as thumbSrc) {\r\n            <div class=\"file-upload-field__thumb\" aria-hidden=\"true\">\r\n              <img\r\n                class=\"file-upload-field__thumb-img\"\r\n                [src]=\"thumbSrc\"\r\n                [alt]=\"'Pr\u00E9-visualiza\u00E7\u00E3o: ' + row.name\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              />\r\n            </div>\r\n          }\r\n          <div class=\"file-upload-field__item-meta\">\r\n            <span class=\"file-upload-field__name\">{{ row.name }}</span>\r\n            <span class=\"file-upload-field__size\">{{ row.sizeLabel }}</span>\r\n            <span class=\"file-upload-field__type\">{{ row.typeLabel }}</span>\r\n          </div>\r\n          <div class=\"file-upload-field__item-actions\">\r\n            @if (showFileDownload) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"file-upload-field__download\"\r\n                [disabled]=\"disabled\"\r\n                [attr.aria-label]=\"'Download ' + row.name\"\r\n                (click)=\"onDownloadFile(row.file, $event)\"\r\n              >\r\n                <i class=\"fa-solid fa-download\" aria-hidden=\"true\"></i>\r\n                <span class=\"file-upload-field__download-text\">Download</span>\r\n              </button>\r\n            }\r\n            <button\r\n              type=\"button\"\r\n              class=\"file-upload-field__remove\"\r\n              [disabled]=\"disabled\"\r\n              [attr.aria-label]=\"'Remover ' + row.name\"\r\n              (click)=\"onRemoveFile($index, $event)\"\r\n            >\r\n              <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\r\n              <span class=\"file-upload-field__remove-text\">Remover</span>\r\n            </button>\r\n          </div>\r\n        </li>\r\n      }\r\n    </ul>\r\n    @if (showClearAllButton) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"file-upload-field__clear\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"clearAll($event)\"\r\n      >\r\n        Limpar tudo\r\n      </button>\r\n    }\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box;user-select:none;-webkit-user-select:none}.file-upload-field{display:flex;flex-direction:column;gap:.35rem;min-width:0;width:100%}.file-upload-field__label{display:block;font-size:.82rem;font-weight:500;color:var(--ui-text-secondary, #404040)}.file-upload-field--disabled .file-upload-field__label,.file-upload-field--disabled .file-upload-field__hint,.file-upload-field--disabled .file-upload-field__hint-main{opacity:var(--ui-field-input-disabled-opacity, .6)}.file-upload-field__zone{position:relative;display:flex;flex-direction:column;align-items:stretch;min-height:4.5rem;border:1px solid var(--ui-field-float-border, #d1d1d1);border-radius:var(--ui-field-float-border-radius, 8px);background:var(--field-background, var(--ui-field-float-bg, #ffffff));cursor:pointer;user-select:none;-webkit-user-select:none;transition:border-color .1s ease,box-shadow .1s ease,background .1s ease}.file-upload-field__zone:focus{outline:none}.file-upload-field--disabled .file-upload-field__zone,.file-upload-field--disabled .file-upload-field__zone[role=button]{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity, .6);pointer-events:none}.file-upload-field--error .file-upload-field__zone{border-color:var(--ui-field-input-invalid-border, #b91c1c);background:var(--ui-field-invalid-input-bg, #fef2f2)}.file-upload-field--error .file-upload-field__zone--hover,.file-upload-field--error .file-upload-field__zone--dragging{border-color:var(--ui-field-input-invalid-border, #b91c1c);box-shadow:0 0 0 2px var(--ui-field-input-invalid-focus-halo, rgba(185, 28, 28, .2))}.file-upload-field:not(.file-upload-field--error) .file-upload-field__zone--hover{border-color:var(--ui-field-float-border-hover);box-shadow:none}.file-upload-field__zone--dragging{border-style:dashed;border-width:2px;border-color:var(--ui-field-float-border-focus, #2563eb);background:var(--ui-field-readonly-bg, #f4f4f5);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring, rgba(37, 99, 235, .2))}.file-upload-field:not(.file-upload-field--disabled) .file-upload-field__zone:focus-visible{border-color:var(--ui-field-float-border-focus, #2563eb);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring, rgba(37, 99, 235, .25))}.file-upload-field__zone-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;text-align:center;padding:1.1rem .9rem;min-height:3.4rem}.file-upload-field__icon{font-size:1.35rem;color:var(--ui-field-float-prefix-color, #6b6b6b);opacity:.9}.file-upload-field__zone--dragging .file-upload-field__icon{color:var(--ui-field-float-border-focus, #2563eb)}.file-upload-field__hint-main{font-size:.8rem;line-height:1.4;color:var(--ui-text-secondary, #525252);max-width:18rem}.file-upload-field__hint-cta{color:var(--ui-field-float-border-focus, #2563eb);font-weight:500;text-decoration:underline;text-underline-offset:2px}.file-upload-field__hint-accept{display:block;font-size:.72rem;color:var(--ui-text-muted, #737373);max-width:20rem;word-break:break-word}.file-upload-field__native{position:absolute;width:.1px;height:.1px;opacity:0;overflow:hidden;z-index:-1;pointer-events:none}.file-upload-field__hint{font-size:.75rem;line-height:1.4;margin:.15rem 0 0;color:var(--ui-text-secondary, #525252)}.file-upload-field__error{font-size:.75rem;line-height:1.4;margin:.1rem 0 0;color:#b91c1c}.file-upload-field__list{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem}.file-upload-field__item{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:.5rem .75rem;padding:.55rem .65rem;border:1px solid var(--ui-field-float-border, #e5e5e5);border-radius:6px;background:var(--ui-page-bg, #fafafa);font-size:.78rem;line-height:1.35}.file-upload-field__item--selectable{cursor:pointer}.file-upload-field__thumb{flex-shrink:0;width:4.5rem;height:4.5rem;border-radius:6px;overflow:hidden;background:#e5e5e5;border:1px solid var(--ui-field-float-border, #e5e5e5)}.file-upload-field__thumb-img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.file-upload-field__item-meta{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1 1 8rem}.file-upload-field__name{font-weight:500;color:#171717;word-break:break-word}.file-upload-field__size{color:#737373;font-size:.76rem}.file-upload-field__type{color:#8b8b8b;font-size:.72rem;font-family:ui-monospace,Consolas,monospace}.file-upload-field__item-actions{display:inline-flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;justify-content:flex-end;gap:.2rem .35rem;flex-shrink:0;min-height:0}.file-upload-field__download{display:inline-grid;grid-template-columns:1em minmax(0,max-content);column-gap:.35rem;place-items:center;border:0;background:transparent;color:var(--app-color-primary, #2563eb);padding:.15rem .35rem;border-radius:4px;cursor:pointer;font:inherit;font-size:.75rem;font-weight:500;line-height:1.15;flex-shrink:0;transition:background .1s ease,color .1s ease}.file-upload-field__download:hover:not(:disabled){background:color-mix(in srgb,var(--app-color-primary, #2563eb) 10%,transparent)}.file-upload-field__download:disabled{opacity:.45;cursor:not-allowed}.file-upload-field__remove{display:inline-grid;grid-template-columns:1em minmax(0,max-content);column-gap:.35rem;place-items:center;border:0;background:transparent;color:#b91c1c;padding:.15rem .35rem;border-radius:4px;cursor:pointer;font:inherit;font-size:.75rem;font-weight:500;line-height:1.15;flex-shrink:0;transition:background .1s ease}.file-upload-field__remove:hover:not(:disabled){background:#fef2f2}.file-upload-field__remove:disabled{opacity:.45;cursor:not-allowed}.file-upload-field__remove i,.file-upload-field__download i{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1em;height:1em;line-height:0;font-size:1em;align-self:center;justify-self:center}.file-upload-field__remove-text,.file-upload-field__download-text{position:relative;width:auto;min-width:0;height:auto;clip:auto;line-height:1.15;transform:translateY(.08em)}.file-upload-field__clear{align-self:flex-start;margin-top:.1rem;font-size:.75rem;color:#525252;background:transparent;border:0;text-decoration:underline;text-underline-offset:2px;padding:.15rem .1rem .15rem 0;cursor:pointer;transition:color .1s ease}.file-upload-field__clear:hover:not(:disabled){color:#171717;background:transparent}.file-upload-field__clear:disabled{opacity:.45;cursor:not-allowed}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], id: [{