structra-ui 0.1.96 → 0.1.97

package/fesm2022/structra-ui.mjs

@@ -417,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).
@@ -451,6 +451,10 @@ 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()
@@ -568,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
@@ -616,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`). */
@@ -1826,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;
@@ -1921,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),
@@ -1938,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: [{
@@ -5886,6 +5901,9 @@ class FileUploadFieldComponent {
         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;
@@ -6247,7 +6265,7 @@ 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" }, 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,
@@ -6290,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']
             }] } });
 
 /**