structra-ui 0.1.95 → 0.1.97

package/fesm2022/structra-ui.mjs

@@ -384,7 +384,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{ selector: 'app-button', standalone: true, imports: [SkeletonBlockComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!loading) {\r\n<button\r\n  #nativeBtn\r\n  class=\"base-button__native\"\r\n  [attr.type]=\"type\"\r\n  [disabled]=\"disabled || readonly\"\r\n  [attr.aria-readonly]=\"readonly ? true : null\"\r\n>\r\n  <ng-content />\r\n</button>\r\n} @else {\r\n<div class=\"base-button__native base-button__native--skeleton\" role=\"status\" aria-live=\"polite\" aria-busy=\"true\"\r\n  aria-label=\"A carregar\">\r\n  <app-skeleton-block width=\"40%\" height=\"0.7rem\" radius=\"8px\" />\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:fit-content;max-width:100%;box-sizing:border-box;vertical-align:middle}:host(.base-button--size-sm){--bb-fs: .8125rem;--bb-min-h: 2rem;--bb-pad-y: .375rem;--bb-pad-x: .875rem;--bb-gap: .375rem;--bb-min-w: 4rem}:host(.base-button--size-md){--bb-fs: .9375rem;--bb-min-h: 2.5rem;--bb-pad-y: .5rem;--bb-pad-x: 1.25rem;--bb-gap: .5rem;--bb-min-w: 5rem}:host(.base-button--size-lg){--bb-fs: 1rem;--bb-min-h: 2.875rem;--bb-pad-y: .625rem;--bb-pad-x: 1.5rem;--bb-gap: .625rem;--bb-min-w: 5.5rem}:host(.base-button--size-xl){--bb-fs: 1.0625rem;--bb-min-h: 3.25rem;--bb-pad-y: .75rem;--bb-pad-x: 1.75rem;--bb-gap: .75rem;--bb-min-w: 6rem}:host(.base-button--size-xxl){--bb-fs: 1.125rem;--bb-min-h: 3.625rem;--bb-pad-y: .875rem;--bb-pad-x: 2rem;--bb-gap: .875rem;--bb-min-w: 6.5rem}:host(.base-button--ghost){--bb-min-h: 2.25rem;--bb-pad-y: .35rem;--bb-pad-x: .5rem;--bb-fs: .95rem;--bb-gap: .45rem;--bb-min-w: 0}:host(.base-button--ghost.base-button--size-sm){--bb-min-h: 2rem;--bb-pad-y: .28rem;--bb-pad-x: .42rem;--bb-fs: .875rem;--bb-gap: .35rem}:host(.base-button--ghost.base-button--size-lg){--bb-min-h: 2.5rem;--bb-pad-y: .42rem;--bb-pad-x: .62rem;--bb-fs: 1.05rem;--bb-gap: .5rem}:host(.base-button--ghost.base-button--size-xl){--bb-min-h: 2.875rem;--bb-pad-y: .5rem;--bb-pad-x: .72rem;--bb-fs: 1.1rem;--bb-gap: .55rem}:host(.base-button--ghost.base-button--size-xxl){--bb-min-h: 3.125rem;--bb-pad-y: .58rem;--bb-pad-x: .82rem;--bb-fs: 1.16rem;--bb-gap: .62rem}:host(.base-button--link){--bb-min-h: 0;--bb-min-w: 0;--bb-gap: .35rem;--bb-pad-x: 0}:host(.base-button--link.base-button--size-sm){--bb-fs: .8125rem;--bb-pad-y: .05rem;--bb-gap: .3rem}:host(.base-button--link.base-button--size-md){--bb-fs: .9375rem}:host(.base-button--link.base-button--size-lg){--bb-fs: 1rem;--bb-pad-y: .12rem;--bb-gap: .4rem}:host(.base-button--link.base-button--size-xl){--bb-fs: 1.0625rem;--bb-pad-y: .14rem;--bb-gap: .45rem}:host(.base-button--link.base-button--size-xxl){--bb-fs: 1.125rem;--bb-pad-y: .16rem;--bb-gap: .5rem}.base-button__native{-webkit-appearance:none;appearance:none;display:flex;width:auto;min-width:var(--bb-min-w, 5rem);align-items:center;justify-content:center;text-align:center;gap:var(--bb-gap, .5rem);min-height:var(--bb-min-h, 2.5rem);padding:var(--bb-pad-y, .5rem) var(--bb-pad-x, 1.25rem);margin:0;border:1px solid transparent;border-radius:var(--ui-field-float-border-radius, 14px);font:inherit;font-size:var(--bb-fs, .9375rem);font-weight:600;line-height:1.25;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background-color .12s ease,border-color .12s ease,color .12s ease,box-shadow .15s ease,opacity .15s ease,filter .12s ease}:host(.base-button--radius-none) .base-button__native{border-radius:var(--radius-none, 0px)}:host(.base-button--radius-sm) .base-button__native{border-radius:var(--radius-sm, 4px)}:host(.base-button--radius-md) .base-button__native{border-radius:var(--ui-field-float-border-radius, 14px)}:host(.base-button--radius-lg) .base-button__native{border-radius:var(--radius-lg, 12px)}:host(.base-button--radius-pill) .base-button__native{border-radius:var(--radius-pill, 999px)}:host(.base-button--full-width){display:block;width:auto;min-width:0;max-width:100%;box-sizing:border-box}:host(.base-button--full-width) .base-button__native{width:100%;min-width:0}.base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ui-field-float-focus-ring, rgba(43, 127, 217, .35))}:host(.base-button--primary) .base-button__native{color:var(--app-color-primary-contrast, #ffffff);background:var(--ui-button-primary-bg, var(--ui-field-float-border-focus, #2b7fd9));border-color:var(--ui-button-primary-border, var(--ui-field-float-border-focus, #2b7fd9))}:host(.base-button--primary) .base-button__native:hover:not(:disabled){background:var(--ui-button-primary-bg-hover);border-color:var(--ui-button-primary-border-hover)}:host(.base-button--primary) .base-button__native:active:not(:disabled){background:var(--ui-button-primary-bg-active);border-color:var(--ui-button-primary-border-active)}:host(.base-button--secondary) .base-button__native{color:var(--ui-field-float-label-top-color, #4a6d8c);background:var(--ui-field-float-bg, #f3f7fb);border-color:var(--ui-field-float-border, #b6cce5)}:host(.base-button--secondary) .base-button__native:hover:not(:disabled){background:var(--app-color-button-secondary-hover-bg, #e8f0fa)}:host(.base-button--secondary) .base-button__native:active:not(:disabled){background:var(--ui-button-secondary-bg-active)}:host(.base-button--ghost) .base-button__native{color:var(--app-color-text-primary, #1a2f45);background:transparent;border-color:transparent;border-radius:8px;font-weight:600;justify-content:flex-start}:host(.base-button--ghost) .base-button__native:hover:not(:disabled){color:var(--app-color-nav-link);background:color-mix(in srgb,var(--app-color-primary) 6%,transparent)}:host(.base-button--ghost) .base-button__native:active:not(:disabled){background:var(--ui-button-ghost-bg-active)}:host(.base-button--link) .base-button__native{color:var(--app-color-primary, #2b7fd9);background:transparent;border:none;border-radius:0;padding:var(--bb-pad-y, .1rem) var(--bb-pad-x, 0);min-height:0;font-family:inherit;font-weight:500;line-height:inherit;justify-content:flex-start;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;box-shadow:none;transition:color .15s ease,opacity .15s ease}:host(.base-button--link) .base-button__native:hover:not(:disabled){color:var(--app-color-secondary, #1a2f45);background:transparent;border-color:transparent;filter:none}:host(.base-button--link) .base-button__native:active:not(:disabled){color:var(--ui-button-link-text-active)}:host(.base-button--link) .base-button__native:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ui-field-float-focus-ring, rgba(43, 127, 217, .4));border-radius:2px}:host(.base-button--danger) .base-button__native{color:var(--app-color-error-contrast, #fff);background:var(--ui-button-danger-bg);border-color:var(--ui-button-danger-border)}:host(.base-button--danger) .base-button__native:hover:not(:disabled){background:var(--ui-button-danger-bg-hover);border-color:var(--ui-button-danger-border-hover)}:host(.base-button--danger) .base-button__native:active:not(:disabled){background:var(--ui-button-danger-bg-active);border-color:var(--ui-button-danger-border-active)}:host(.base-button--danger) .base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--app-color-error-focus-ring, rgba(220, 38, 38, .35))}:host(.base-button--warning) .base-button__native{color:var(--ui-button-warning-text, #111827);background:var(--ui-button-warning-bg);border-color:var(--ui-button-warning-border)}:host(.base-button--warning) .base-button__native:hover:not(:disabled){background:var(--ui-button-warning-bg-hover);border-color:var(--ui-button-warning-border-hover)}:host(.base-button--warning) .base-button__native:active:not(:disabled){background:var(--ui-button-warning-bg-active);border-color:var(--ui-button-warning-border-active)}:host(.base-button--warning) .base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ui-button-warning-focus-ring, rgba(202, 138, 4, .4))}:host(.base-button--success) .base-button__native{color:var(--ui-button-success-text, #ffffff);background:var(--ui-button-success-bg);border-color:var(--ui-button-success-border)}:host(.base-button--success) .base-button__native:hover:not(:disabled){background:var(--ui-button-success-bg-hover);border-color:var(--ui-button-success-border-hover)}:host(.base-button--success) .base-button__native:active:not(:disabled){background:var(--ui-button-success-bg-active);border-color:var(--ui-button-success-border-active)}:host(.base-button--success) .base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ui-button-success-focus-ring, rgba(21, 128, 61, .35))}:host(.base-button--disabled:not(.base-button--readonly)) .base-button__native,.base-button__native:disabled:not([aria-readonly=true]){cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity, .65)}:host(.base-button--readonly) .base-button__native{cursor:default;opacity:1;color:var(--ui-field-readonly-button-text, #37474f);background:var(--ui-field-readonly-button-bg, #cfd8dc);border-color:var(--ui-field-readonly-button-border, #90a4ae)}:host(.base-button--readonly) .base-button__native:hover:not(:disabled){filter:brightness(.97)}:host(.base-button--readonly) .base-button__native:focus-visible{box-shadow:0 0 0 3px var(--ui-field-readonly-button-focus-ring, rgba(96, 125, 139, .35))}:host(.base-button--readonly.base-button--link) .base-button__native{background:transparent;border:none;text-decoration:underline}.base-button__native--skeleton{pointer-events:none;cursor:default}:host(.base-button--primary.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--ui-field-float-border-focus, #2b7fd9) 82%,#ffffff);border-color:color-mix(in srgb,var(--ui-field-float-border-focus, #2b7fd9) 82%,#ffffff)}:host(.base-button--secondary.base-button--loading) .base-button__native--skeleton{background:var(--ui-field-float-bg, #f3f7fb);border-color:var(--ui-field-float-border, #b6cce5)}:host(.base-button--ghost.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 8%,transparent);border-color:transparent}:host(.base-button--link.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-primary, #2b7fd9) 12%,transparent);border:none;min-height:calc(var(--bb-fs, .9375rem) * 1.35);border-radius:2px}:host(.base-button--danger.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-error, #b91c1c) 82%,#ffffff);border-color:color-mix(in srgb,var(--app-color-error-border, #dc2626) 88%,#ffffff)}:host(.base-button--warning.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-warning, #ca8a04) 82%,#ffffff);border-color:color-mix(in srgb,var(--app-color-warning, #ca8a04) 88%,#ffffff)}:host(.base-button--success.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-success, #15803d) 82%,#ffffff);border-color:color-mix(in srgb,var(--app-color-success, #15803d) 88%,#ffffff)}\n"] }]
         }] });
 
-let fieldControlAutoId = 0;
+const counters = new Map();
+function createAutoId(prefix) {
+    const next = (counters.get(prefix) ?? 0) + 1;
+    counters.set(prefix, next);
+    return `${prefix}-${next}`;
+}
+
 /**
  * Diretiva base abstrata: CVA, valor interno, disabled, touched e inputs comuns.
  * Sem UI; os campos concretos envolvem o input com `BaseFieldComponent`.
@@ -394,10 +400,11 @@ class BaseFieldDirective {
         this.cdr = inject(ChangeDetectorRef);
         this.injector = inject(Injector);
         this.destroyRef = inject(DestroyRef);
+        this.hostElementRef = inject((ElementRef));
         this.formGroupDir = undefined;
         this.ngFormDir = undefined;
         /** Identificador estável para a11y quando `id` não é informado */
-        this.autoId = `app-field-${++fieldControlAutoId}`;
+        this.autoId = createAutoId(this.autoIdPrefix);
         this.id = '';
         this.name = '';
         this.label = '';
@@ -410,10 +417,10 @@ class BaseFieldDirective {
         this.showRequiredMark = false;
         this.readonly = false;
         /** Exibe ícone à esquerda (classes Font Awesome, ex.: `fa-solid fa-user`). */
-        this.showPrefixIcon = false;
+        this.showPrefixIcon = true;
         this.prefixIcon = '';
         /** Exibe botão à direita para limpar o valor quando houver texto. */
-        this.clearable = true;
+        this.clearable = false;
         this.clearAriaLabel = 'Limpar campo';
         /**
          * Se `true`, o atributo HTML fica `autocomplete="on"` (sugestões do browser).
@@ -444,6 +451,16 @@ class BaseFieldDirective {
     get controlId() {
         return this.id || this.autoId;
     }
+    /** Útil para inspeção no DOM sem colidir com `id` do input interno. */
+    get hostDataControlId() {
+        return this.controlId;
+    }
+    get autoIdPrefix() {
+        const tag = this.hostElementRef.nativeElement.tagName
+            .toLowerCase()
+            .replace(/^app-/, '');
+        return `str-${tag || 'field'}`;
+    }
     /** Valor do atributo HTML `autocomplete` derivado de {@link autocomplete}. */
     get autocompleteAttr() {
         return this.autocomplete ? 'on' : 'off';
@@ -555,7 +572,7 @@ class BaseFieldDirective {
         this.cdr.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.9", type: BaseFieldDirective, isStandalone: true, inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", errorMessage: "errorMessage", showErrorMessage: "showErrorMessage", required: "required", showRequiredMark: "showRequiredMark", readonly: "readonly", showPrefixIcon: "showPrefixIcon", prefixIcon: "prefixIcon", iconLeft: "iconLeft", clearable: "clearable", clearAriaLabel: "clearAriaLabel", autocomplete: ["autocomplete", "autocomplete", booleanAttribute], loading: ["loading", "loading", booleanAttribute], mostrarMenuContexto: ["mostrarMenuContexto", "mostrarMenuContexto", booleanAttribute], contextMenuItems: "contextMenuItems", contextMenuId: "contextMenuId" }, outputs: { contextMenuSelect: "contextMenuSelect" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.9", type: BaseFieldDirective, isStandalone: true, inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", errorMessage: "errorMessage", showErrorMessage: "showErrorMessage", required: "required", showRequiredMark: "showRequiredMark", readonly: "readonly", showPrefixIcon: "showPrefixIcon", prefixIcon: "prefixIcon", iconLeft: "iconLeft", clearable: "clearable", clearAriaLabel: "clearAriaLabel", autocomplete: ["autocomplete", "autocomplete", booleanAttribute], loading: ["loading", "loading", booleanAttribute], mostrarMenuContexto: ["mostrarMenuContexto", "mostrarMenuContexto", booleanAttribute], contextMenuItems: "contextMenuItems", contextMenuId: "contextMenuId" }, outputs: { contextMenuSelect: "contextMenuSelect" }, host: { properties: { "attr.data-control-id": "this.hostDataControlId" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseFieldDirective, decorators: [{
             type: Directive
@@ -603,6 +620,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 type: Input
             }], contextMenuSelect: [{
                 type: Output
+            }], hostDataControlId: [{
+                type: HostBinding,
+                args: ['attr.data-control-id']
             }] } });
 
 /** Identificadores de paleta suportados pela library (uso em `AppThemeService.setTheme`). */
@@ -1813,6 +1833,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class PasswordFieldComponent extends NgControlFieldDirective {
     constructor() {
         super(...arguments);
+        /** Password já nasce com ícone de chave no prefixo; pode ser sobrescrito via `prefixIcon`. */
+        this.showPrefixIcon = true;
+        this.prefixIcon = 'fa-solid fa-key';
         /** Por defeito `false`: o botão de limpar compete com o toggle de visibilidade. */
         this.clearable = false;
         this.maxLength = 500;
@@ -1908,7 +1931,7 @@ class PasswordFieldComponent extends NgControlFieldDirective {
         this.cdr.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PasswordFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: PasswordFieldComponent, isStandalone: true, selector: "app-password-field", inputs: { clearable: ["clearable", "clearable", booleanAttribute], maxLength: ["maxLength", "maxLength", numberAttribute], autoComplete: "autoComplete" }, host: { properties: { "class.password-field--invalid": "this.hostInvalidClass" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: PasswordFieldComponent, isStandalone: true, selector: "app-password-field", inputs: { showPrefixIcon: ["showPrefixIcon", "showPrefixIcon", booleanAttribute], prefixIcon: "prefixIcon", clearable: ["clearable", "clearable", booleanAttribute], maxLength: ["maxLength", "maxLength", numberAttribute], autoComplete: "autoComplete" }, host: { properties: { "class.password-field--invalid": "this.hostInvalidClass" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => PasswordFieldComponent),
@@ -1925,7 +1948,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             multi: true,
                         },
                     ], template: "<app-base-field [label]=\"floatLabelCaption\" [filled]=\"filledUi\" [disabled]=\"disabled\" [readonly]=\"readonly\"\n  [loading]=\"loading\"\n  [errorMessage]=\"uiErrorMessage\" [required]=\"uiRequiredEffective\" [showRequiredMark]=\"showRequiredMark\"\n  [invalid]=\"uiInvalid\" [inputId]=\"controlId\" [errorId]=\"errorElementId\" [showPrefixIcon]=\"showPrefixIcon\"\n  [prefixIcon]=\"prefixIcon\" [clearable]=\"clearable\" [clearAriaLabel]=\"clearAriaLabel\" [showSuffixSlot]=\"true\"\n  [mostrarMenuContexto]=\"mostrarMenuContexto\" [contextMenuItems]=\"contextMenuItems\" [contextMenuId]=\"contextMenuId\"\n  (clear)=\"onClear()\" (contextMenuSelect)=\"contextMenuSelect.emit($event)\">\n  <ng-content select=\"[appFieldPrefix]\" />\n  <input class=\"password-field__input\" [type]=\"inputTypeUi\" [id]=\"controlId\" [attr.name]=\"name || null\"\n    [attr.placeholder]=\"''\" [attr.autocomplete]=\"autocomplete ? autoComplete : 'off'\" [attr.maxlength]=\"maxLength > 0 ? maxLength : null\"\n    [disabled]=\"disabled\" [readonly]=\"readonly\" [required]=\"uiRequiredEffective\" [attr.aria-invalid]=\"uiInvalid\"\n    [attr.aria-describedby]=\"uiAriaDescribedBy\" [value]=\"inputText\" (input)=\"onNativeInput($event)\"\n    (blur)=\"onBlur()\" />\n  <button type=\"button\" appFieldSuffix class=\"password-field__toggle\" tabindex=\"-1\"\n    [disabled]=\"disabled || readonly\" [attr.aria-label]=\"toggleAriaLabelUi\" [attr.aria-pressed]=\"passwordVisible\"\n    (click)=\"togglePasswordVisible($event)\">\n    <i [class]=\"toggleIconClassUi\" aria-hidden=\"true\"></i>\n  </button>\n</app-base-field>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.password-field__input{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:1.35rem .75rem .45rem;font-size:1rem;line-height:1.35;font-family:inherit;color:var(--ui-field-float-input-text);border:none;border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.password-field__input::placeholder{color:transparent}.password-field__input:focus,.password-field__input:focus-visible{outline:none}.password-field__input:-webkit-autofill,.password-field__input:-webkit-autofill:hover,.password-field__input:-webkit-autofill:focus,.password-field__input:-webkit-autofill:active,.password-field__input:-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;caret-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-float-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-float-bg) inset!important;transition:background-color 50000s ease 0s!important}.password-field__input:autofill,.password-field__input:autofill:hover,.password-field__input:autofill:focus,.password-field__input:autofill:active,.password-field__input:autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;caret-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-float-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-float-bg) inset!important;background-color:var(--ui-field-float-bg)!important;transition:background-color 50000s ease 0s!important}.password-field__input--invalid:not(:disabled)::placeholder{color:transparent}.password-field__input:disabled{opacity:var(--ui-field-input-disabled-opacity);cursor:not-allowed}.password-field__toggle{display: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;transition:background .15s ease,color .15s ease}.password-field__toggle:hover:not(:disabled){background:#5a7fa326;color:var(--ui-field-float-label-top-color)}.password-field__toggle:focus,.password-field__toggle:focus-visible{outline:none}.password-field__toggle:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}.password-field__toggle i{font-size:.95rem;line-height:1}:host.password-field--invalid .password-field__toggle{color:var(--ui-field-float-label-invalid-color)}:host.password-field--invalid .password-field__toggle:hover:not(:disabled){background:#b91c1c1f;color:var(--ui-field-float-label-invalid-color)}:host.password-field--invalid .password-field__toggle:focus,:host.password-field--invalid .password-field__toggle:focus-visible{outline:none}\n"] }]
-        }], propDecorators: { hostInvalidClass: [{
+        }], propDecorators: { showPrefixIcon: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], prefixIcon: [{
+                type: Input
+            }], hostInvalidClass: [{
                 type: HostBinding,
                 args: ['class.password-field--invalid']
             }], clearable: [{
@@ -5827,12 +5855,12 @@ function formatAcceptForDisplay(accept) {
     return parts.join(' · ');
 }
 
-let nextFileUploadId = 0;
 class FileUploadFieldComponent {
     constructor() {
         this.cdr = inject(ChangeDetectorRef);
         this.confirmDialog = inject(ConfirmDialogService);
         this.label = '';
+        this.id = '';
         this.hint = '';
         this.accept = '';
         /** Se definido, mostra-se no drop zone em vez do texto formatado a partir de `accept`. */
@@ -5862,13 +5890,20 @@ class FileUploadFieldComponent {
          * a este evento e `fileItemRowClickable !== false`.
          */
         this.fileItemClick = new EventEmitter();
-        this.fieldId = `app-file-upload-${++nextFileUploadId}`;
+        this.autoId = createAutoId('str-file-upload-field');
         this.isDragging = false;
         this.hasHover = false;
         this.internalError = null;
         /** `URL.createObjectURL` por `File` ativo; revogado ao trocar valor ou destruir. */
         this.filePreviewObjectUrls = new Map();
     }
+    get fieldId() {
+        const manual = this.id.trim();
+        return manual.length > 0 ? manual : this.autoId;
+    }
+    get hostDataControlId() {
+        return this.fieldId;
+    }
     ngOnChanges(c) {
         if (c['value']) {
             this.internalError = null;
@@ -6230,13 +6265,15 @@ 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", 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" }, 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-focus, #2563eb);box-shadow:0 0 0 1px var(--ui-field-float-border-focus, #2563eb)}.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(--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-focus, #2563eb);box-shadow:0 0 0 1px var(--ui-field-float-border-focus, #2563eb)}.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-focus, #2563eb);box-shadow:0 0 0 1px var(--ui-field-float-border-focus, #2563eb)}.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: [{
+                type: Input
             }], hint: [{
                 type: Input
             }], accept: [{
@@ -6271,6 +6308,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }], fileInputRef: [{
                 type: ViewChild,
                 args: ['fileInput', { read: ElementRef }]
+            }], hostDataControlId: [{
+                type: HostBinding,
+                args: ['attr.data-control-id']
             }] } });
 
 /**
@@ -7375,14 +7415,14 @@ class FormSectionComponent {
     constructor() {
         this.subtitulo = '';
         this.dense = false;
-        this.withDivider = true;
+        this.divider = true;
     }
     get hostClass() {
         const parts = ['form-section'];
         if (this.dense) {
             parts.push('form-section--dense');
         }
-        if (this.withDivider) {
+        if (this.divider) {
             parts.push('form-section--divider');
         }
         return parts.join(' ');
@@ -7391,7 +7431,7 @@ class FormSectionComponent {
         return this.titulo.trim().length > 0 || this.subtitulo.trim().length > 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FormSectionComponent, isStandalone: true, selector: "app-form-section", inputs: { titulo: "titulo", subtitulo: "subtitulo", dense: ["dense", "dense", booleanAttribute], withDivider: ["withDivider", "withDivider", booleanAttribute] }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "@if (showHeader) {\r\n<header class=\"form-section__header\">\r\n  @if (titulo.trim()) {\r\n  <h2 class=\"form-section__title\">{{ titulo }}</h2>\r\n  }\r\n  @if (subtitulo.trim()) {\r\n  <p class=\"form-section__subtitle\">{{ subtitulo }}</p>\r\n  }\r\n</header>\r\n}\r\n<div class=\"form-section__body\">\r\n  <ng-content />\r\n</div>", styles: [":host{display:block;width:100%;min-width:0;box-sizing:border-box}.form-section__header{margin:0 0 1.25rem;padding:0}.form-section__title{margin:0 0 .35rem;font-size:1.25rem;font-weight:600;line-height:1.3;color:var(--ui-field-label-color, #1a1a1a)}.form-section__subtitle{margin:0;font-size:.9rem;line-height:1.45;color:#525252}.form-section__body{display:flex;flex-direction:column;gap:1rem;min-width:0}:host.form-section--dense .form-section__header{margin-bottom:.75rem}:host.form-section--dense .form-section__title{font-size:1.1rem}:host.form-section--dense .form-section__body{gap:.65rem}:host.form-section--divider{padding-bottom:1.75rem;margin-bottom:1.75rem;border-bottom:1px solid #e5e5e5}:host.form-section--dense.form-section--divider{padding-bottom:1.25rem;margin-bottom:1.25rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FormSectionComponent, isStandalone: true, selector: "app-form-section", inputs: { titulo: "titulo", subtitulo: "subtitulo", dense: ["dense", "dense", booleanAttribute], divider: ["divider", "divider", booleanAttribute] }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "@if (showHeader) {\r\n<header class=\"form-section__header\">\r\n  @if (titulo.trim()) {\r\n  <h2 class=\"form-section__title\">{{ titulo }}</h2>\r\n  }\r\n  @if (subtitulo.trim()) {\r\n  <p class=\"form-section__subtitle\">{{ subtitulo }}</p>\r\n  }\r\n</header>\r\n}\r\n<div class=\"form-section__body\">\r\n  <ng-content />\r\n</div>", styles: [":host{display:block;width:100%;min-width:0;box-sizing:border-box}.form-section__header{margin:0 0 1.25rem;padding:0}.form-section__title{margin:0 0 .35rem;font-size:1.25rem;font-weight:600;line-height:1.3;color:var(--ui-field-label-color, #1a1a1a)}.form-section__subtitle{margin:0;font-size:.9rem;line-height:1.45;color:#525252}.form-section__body{display:flex;flex-direction:column;gap:1rem;min-width:0}:host.form-section--dense .form-section__header{margin-bottom:.75rem}:host.form-section--dense .form-section__title{font-size:1.1rem}:host.form-section--dense .form-section__body{gap:.65rem}:host.form-section--divider{padding-bottom:1.75rem;margin-bottom:1.75rem;border-bottom:1px solid #e5e5e5}:host.form-section--dense.form-section--divider{padding-bottom:1.25rem;margin-bottom:1.25rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormSectionComponent, decorators: [{
             type: Component,
@@ -7404,7 +7444,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }], dense: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], withDivider: [{
+            }], divider: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], hostClass: [{