structra-ui 0.1.94 → 0.1.96

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/structra-ui.mjs +40 -11
  2. package/fesm2022/structra-ui.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/structra-ui.d.ts +14 -5
package/fesm2022/structra-ui.mjs CHANGED
@@ -384,7 +384,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
384
384
  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"] }]
385
385
  }] });
386
386
 
387
- let fieldControlAutoId = 0;
387
+ const counters = new Map();
388
+ function createAutoId(prefix) {
389
+ const next = (counters.get(prefix) ?? 0) + 1;
390
+ counters.set(prefix, next);
391
+ return `${prefix}-${next}`;
392
+ }
393
+
388
394
  /**
389
395
  * Diretiva base abstrata: CVA, valor interno, disabled, touched e inputs comuns.
390
396
  * Sem UI; os campos concretos envolvem o input com `BaseFieldComponent`.
@@ -394,10 +400,11 @@ class BaseFieldDirective {
394
400
  this.cdr = inject(ChangeDetectorRef);
395
401
  this.injector = inject(Injector);
396
402
  this.destroyRef = inject(DestroyRef);
403
+ this.hostElementRef = inject((ElementRef));
397
404
  this.formGroupDir = undefined;
398
405
  this.ngFormDir = undefined;
399
406
  /** Identificador estável para a11y quando `id` não é informado */
400
- this.autoId = `app-field-${++fieldControlAutoId}`;
407
+ this.autoId = createAutoId(this.autoIdPrefix);
401
408
  this.id = '';
402
409
  this.name = '';
403
410
  this.label = '';
@@ -444,6 +451,12 @@ class BaseFieldDirective {
444
451
  get controlId() {
445
452
  return this.id || this.autoId;
446
453
  }
454
+ get autoIdPrefix() {
455
+ const tag = this.hostElementRef.nativeElement.tagName
456
+ .toLowerCase()
457
+ .replace(/^app-/, '');
458
+ return `str-${tag || 'field'}`;
459
+ }
447
460
  /** Valor do atributo HTML `autocomplete` derivado de {@link autocomplete}. */
448
461
  get autocompleteAttr() {
449
462
  return this.autocomplete ? 'on' : 'off';
@@ -5827,12 +5840,12 @@ function formatAcceptForDisplay(accept) {
5827
5840
  return parts.join(' · ');
5828
5841
  }
5829
5842
 
5830
- let nextFileUploadId = 0;
5831
5843
  class FileUploadFieldComponent {
5832
5844
  constructor() {
5833
5845
  this.cdr = inject(ChangeDetectorRef);
5834
5846
  this.confirmDialog = inject(ConfirmDialogService);
5835
5847
  this.label = '';
5848
+ this.id = '';
5836
5849
  this.hint = '';
5837
5850
  this.accept = '';
5838
5851
  /** Se definido, mostra-se no drop zone em vez do texto formatado a partir de `accept`. */
@@ -5862,13 +5875,17 @@ class FileUploadFieldComponent {
5862
5875
  * a este evento e `fileItemRowClickable !== false`.
5863
5876
  */
5864
5877
  this.fileItemClick = new EventEmitter();
5865
- this.fieldId = `app-file-upload-${++nextFileUploadId}`;
5878
+ this.autoId = createAutoId('str-file-upload-field');
5866
5879
  this.isDragging = false;
5867
5880
  this.hasHover = false;
5868
5881
  this.internalError = null;
5869
5882
  /** `URL.createObjectURL` por `File` ativo; revogado ao trocar valor ou destruir. */
5870
5883
  this.filePreviewObjectUrls = new Map();
5871
5884
  }
5885
+ get fieldId() {
5886
+ const manual = this.id.trim();
5887
+ return manual.length > 0 ? manual : this.autoId;
5888
+ }
5872
5889
  ngOnChanges(c) {
5873
5890
  if (c['value']) {
5874
5891
  this.internalError = null;
@@ -6230,13 +6247,15 @@ class FileUploadFieldComponent {
6230
6247
  this.filePreviewObjectUrls.clear();
6231
6248
  }
6232
6249
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileUploadFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6233
- 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 }); }
6250
+ 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 }); }
6234
6251
  }
6235
6252
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileUploadFieldComponent, decorators: [{
6236
6253
  type: Component,
6237
6254
  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"] }]
6238
6255
  }], propDecorators: { label: [{
6239
6256
  type: Input
6257
+ }], id: [{
6258
+ type: Input
6240
6259
  }], hint: [{
6241
6260
  type: Input
6242
6261
  }], accept: [{
@@ -6349,6 +6368,16 @@ class ImagePreviewPanelComponent {
6349
6368
  }
6350
6369
  return (this.fileKind === 'image');
6351
6370
  }
6371
+ /**
6372
+ * Mantém o `<img>` montado (para disparar load/error) mesmo quando remoto ainda não terminou de carregar.
6373
+ * Evita flick de ações e permite cair no fallback amarelo quando a URL falha.
6374
+ */
6375
+ get shouldRenderImage() {
6376
+ return (!this.loading &&
6377
+ (this.fileKind === 'image' || this.fileKind === 'remote') &&
6378
+ !!this.displaySrc &&
6379
+ !this.imageLoadError);
6380
+ }
6352
6381
  get showPdf() {
6353
6382
  return (!this.loading &&
6354
6383
  this.fileKind === 'pdf' &&
@@ -6417,11 +6446,11 @@ class ImagePreviewPanelComponent {
6417
6446
  }
6418
6447
  }
6419
6448
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ImagePreviewPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6420
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ImagePreviewPanelComponent, isStandalone: true, selector: "app-image-preview-panel", inputs: { title: "title", subtitle: "subtitle", imageUrl: "imageUrl", file: "file", emptyText: "emptyText", loading: ["loading", "loading", booleanAttribute], rounded: ["rounded", "rounded", booleanAttribute], showImageActions: ["showImageActions", "showImageActions", booleanAttribute], objectFit: "objectFit" }, outputs: { remove: "remove", change: "change" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"image-preview-panel\"\r\n [class.image-preview-panel--rounded]=\"rounded\"\r\n [class.image-preview-panel--loading]=\"loading\"\r\n>\r\n @if (title && title.length > 0) {\r\n <h3 class=\"image-preview-panel__title\">{{ title }}</h3>\r\n }\r\n @if (subtitle && subtitle.length > 0) {\r\n <p class=\"image-preview-panel__subtitle\">{{ subtitle }}</p>\r\n }\r\n\r\n <div\r\n class=\"image-preview-panel__frame\"\r\n [class.image-preview-panel__frame--rounded]=\"rounded\"\r\n >\r\n @if (loading) {\r\n <div\r\n class=\"image-preview-panel__skeleton\"\r\n role=\"status\"\r\n aria-label=\"Carregando pr\u00E9-visualiza\u00E7\u00E3o\"\r\n >\r\n <app-skeleton-block\r\n class=\"image-preview-panel__skeleton-poster\"\r\n width=\"100%\"\r\n height=\"100%\"\r\n radius=\"0\"\r\n />\r\n <div class=\"image-preview-panel__skeleton-lines\">\r\n <app-skeleton-block width=\"72%\" height=\"0.6rem\" radius=\"6px\" />\r\n <app-skeleton-block width=\"48%\" height=\"0.55rem\" radius=\"6px\" />\r\n </div>\r\n </div>\r\n } @else if (showEmpty) {\r\n <div class=\"image-preview-panel__empty\" role=\"img\" [attr.aria-label]=\"emptyText\">\r\n <i class=\"fa-regular fa-image image-preview-panel__empty-icon\" aria-hidden=\"true\"></i>\r\n <span class=\"image-preview-panel__empty-text\">{{ emptyText }}</span>\r\n </div>\r\n } @else {\r\n @if (showPreviewFallback) {\r\n <div\r\n class=\"image-preview-panel__preview-fallback\"\r\n role=\"status\"\r\n [attr.aria-label]=\"previewUnavailableMessage\"\r\n >\r\n <i\r\n class=\"fa-solid fa-triangle-exclamation image-preview-panel__preview-fallback-icon\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n <span class=\"image-preview-panel__preview-fallback-text\">{{ previewUnavailableMessage }}</span>\r\n </div>\r\n } @else if (showPdf) {\r\n <iframe\r\n class=\"image-preview-panel__pdf\"\r\n [src]=\"safePdfUrl\"\r\n title=\"Pr\u00E9-visualiza\u00E7\u00E3o do PDF\"\r\n (error)=\"onPdfFrameError()\"\r\n ></iframe>\r\n } @else if (showImage) {\r\n <img\r\n class=\"image-preview-panel__img\"\r\n [src]=\"displaySrc!\"\r\n [alt]=\"title || 'Pr\u00E9-visualiza\u00E7\u00E3o'\"\r\n [style.object-fit]=\"objectFit\"\r\n (load)=\"onImgLoad()\"\r\n (error)=\"onImgError()\"\r\n />\r\n }\r\n }\r\n </div>\r\n\r\n @if (showActions) {\r\n <div class=\"image-preview-panel__actions\" role=\"group\" [attr.aria-label]=\"'A\u00E7\u00F5es da imagem'\">\r\n <app-button\r\n type=\"button\"\r\n variant=\"secondary\"\r\n [fullWidth]=\"false\"\r\n (click)=\"onTrocar()\"\r\n >\r\n Trocar\r\n </app-button>\r\n <app-button\r\n type=\"button\"\r\n variant=\"danger\"\r\n [fullWidth]=\"false\"\r\n (click)=\"onRemover()\"\r\n >\r\n Remover\r\n </app-button>\r\n </div>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;max-width:100%;box-sizing:border-box;user-select:none;-webkit-user-select:none}.image-preview-panel{display:flex;flex-direction:column;gap:.75rem;min-width:0}.image-preview-panel--rounded .image-preview-panel__title,.image-preview-panel--rounded .image-preview-panel__subtitle{padding-left:.05rem}.image-preview-panel__title{font-size:.95rem;font-weight:600;margin:0;color:#171717;line-height:1.3}.image-preview-panel__subtitle{font-size:.8rem;line-height:1.4;margin:-.2rem 0 0;color:#525252}.image-preview-panel__frame{position:relative;width:100%;min-height:12rem;aspect-ratio:4/3;max-height:min(50vh,24rem);border:1px solid var(--ui-field-float-border, #e5e5e5);border-radius:8px;background:var(--ui-page-bg, #f4f4f5);overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.image-preview-panel__frame--rounded{border-radius:12px}.image-preview-panel__img{display:block;width:100%;height:100%;min-width:0;min-height:0;flex:1 1 auto;align-self:stretch;object-position:center;border-radius:0}.image-preview-panel__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.5rem 1rem;text-align:center;color:#737373;width:100%;height:100%;min-height:0;box-sizing:border-box}.image-preview-panel__empty-icon{font-size:1.75rem;opacity:.55}.image-preview-panel__empty-text{font-size:.82rem;line-height:1.4;max-width:16rem}.image-preview-panel__preview-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;padding:1.5rem 1rem;text-align:center;color:#a16207;background:#fffbeb;width:100%;height:100%;min-height:0;box-sizing:border-box}.image-preview-panel__preview-fallback-icon{font-size:1.25rem;opacity:.9}.image-preview-panel__preview-fallback-text{font-size:.8rem;line-height:1.4;max-width:16rem}.image-preview-panel__pdf{display:block;width:100%;height:100%;min-width:0;min-height:0;flex:1 1 auto;border:0;background:#fff}.image-preview-panel__skeleton{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;background:#f4f4f5}.image-preview-panel__skeleton-poster{display:block;flex:1 1 auto;min-height:0;width:100%!important;height:auto!important}.image-preview-panel__skeleton-lines{display:flex;flex-direction:column;gap:.5rem;padding:.75rem .9rem .85rem;flex:0 0 auto}.image-preview-panel__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}.image-preview-panel--loading .image-preview-panel__actions{display:none}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "app-button" }, { kind: "component", type: SkeletonBlockComponent, selector: "app-skeleton-block", inputs: ["width", "height", "radius", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
6449
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ImagePreviewPanelComponent, isStandalone: true, selector: "app-image-preview-panel", inputs: { title: "title", subtitle: "subtitle", imageUrl: "imageUrl", file: "file", emptyText: "emptyText", loading: ["loading", "loading", booleanAttribute], rounded: ["rounded", "rounded", booleanAttribute], showImageActions: ["showImageActions", "showImageActions", booleanAttribute], objectFit: "objectFit" }, outputs: { remove: "remove", change: "change" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"image-preview-panel\"\r\n [class.image-preview-panel--rounded]=\"rounded\"\r\n [class.image-preview-panel--loading]=\"loading\"\r\n>\r\n @if (title && title.length > 0) {\r\n <h3 class=\"image-preview-panel__title\">{{ title }}</h3>\r\n }\r\n @if (subtitle && subtitle.length > 0) {\r\n <p class=\"image-preview-panel__subtitle\">{{ subtitle }}</p>\r\n }\r\n\r\n <div\r\n class=\"image-preview-panel__frame\"\r\n [class.image-preview-panel__frame--rounded]=\"rounded\"\r\n >\r\n @if (loading) {\r\n <div\r\n class=\"image-preview-panel__skeleton\"\r\n role=\"status\"\r\n aria-label=\"Carregando pr\u00E9-visualiza\u00E7\u00E3o\"\r\n >\r\n <app-skeleton-block\r\n class=\"image-preview-panel__skeleton-poster\"\r\n width=\"100%\"\r\n height=\"100%\"\r\n radius=\"0\"\r\n />\r\n <div class=\"image-preview-panel__skeleton-lines\">\r\n <app-skeleton-block width=\"72%\" height=\"0.6rem\" radius=\"6px\" />\r\n <app-skeleton-block width=\"48%\" height=\"0.55rem\" radius=\"6px\" />\r\n </div>\r\n </div>\r\n } @else if (showEmpty) {\r\n <div class=\"image-preview-panel__empty\" role=\"img\" [attr.aria-label]=\"emptyText\">\r\n <i class=\"fa-regular fa-image image-preview-panel__empty-icon\" aria-hidden=\"true\"></i>\r\n <span class=\"image-preview-panel__empty-text\">{{ emptyText }}</span>\r\n </div>\r\n } @else {\r\n @if (showPreviewFallback) {\r\n <div\r\n class=\"image-preview-panel__preview-fallback\"\r\n role=\"status\"\r\n [attr.aria-label]=\"previewUnavailableMessage\"\r\n >\r\n <i\r\n class=\"fa-solid fa-triangle-exclamation image-preview-panel__preview-fallback-icon\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n <span class=\"image-preview-panel__preview-fallback-text\">{{ previewUnavailableMessage }}</span>\r\n </div>\r\n } @else if (showPdf) {\r\n <iframe\r\n class=\"image-preview-panel__pdf\"\r\n [src]=\"safePdfUrl\"\r\n title=\"Pr\u00E9-visualiza\u00E7\u00E3o do PDF\"\r\n (error)=\"onPdfFrameError()\"\r\n ></iframe>\r\n } @else if (shouldRenderImage) {\r\n <img\r\n class=\"image-preview-panel__img\"\r\n [class.image-preview-panel__img--hidden]=\"!showImage\"\r\n [src]=\"displaySrc!\"\r\n [alt]=\"title || 'Pr\u00E9-visualiza\u00E7\u00E3o'\"\r\n [style.object-fit]=\"objectFit\"\r\n (load)=\"onImgLoad()\"\r\n (error)=\"onImgError()\"\r\n />\r\n }\r\n }\r\n </div>\r\n\r\n @if (showActions) {\r\n <div class=\"image-preview-panel__actions\" role=\"group\" [attr.aria-label]=\"'A\u00E7\u00F5es da imagem'\">\r\n <app-button\r\n type=\"button\"\r\n variant=\"secondary\"\r\n [fullWidth]=\"false\"\r\n (click)=\"onTrocar()\"\r\n >\r\n Trocar\r\n </app-button>\r\n <app-button\r\n type=\"button\"\r\n variant=\"danger\"\r\n [fullWidth]=\"false\"\r\n (click)=\"onRemover()\"\r\n >\r\n Remover\r\n </app-button>\r\n </div>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;max-width:100%;box-sizing:border-box;user-select:none;-webkit-user-select:none}.image-preview-panel{display:flex;flex-direction:column;gap:.75rem;min-width:0}.image-preview-panel--rounded .image-preview-panel__title,.image-preview-panel--rounded .image-preview-panel__subtitle{padding-left:.05rem}.image-preview-panel__title{font-size:.95rem;font-weight:600;margin:0;color:#171717;line-height:1.3}.image-preview-panel__subtitle{font-size:.8rem;line-height:1.4;margin:-.2rem 0 0;color:#525252}.image-preview-panel__frame{position:relative;width:100%;min-height:12rem;aspect-ratio:4/3;max-height:min(50vh,24rem);border:1px solid var(--ui-field-float-border, #e5e5e5);border-radius:8px;background:var(--ui-page-bg, #f4f4f5);overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.image-preview-panel__frame--rounded{border-radius:12px}.image-preview-panel__img{display:block;width:100%;height:100%;min-width:0;min-height:0;flex:1 1 auto;align-self:stretch;object-position:center;border-radius:0}.image-preview-panel__img--hidden{visibility:hidden}.image-preview-panel__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.5rem 1rem;text-align:center;color:#737373;width:100%;height:100%;min-height:0;box-sizing:border-box}.image-preview-panel__empty-icon{font-size:1.75rem;opacity:.55}.image-preview-panel__empty-text{font-size:.82rem;line-height:1.4;max-width:16rem}.image-preview-panel__preview-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;padding:1.5rem 1rem;text-align:center;color:#a16207;background:#fffbeb;width:100%;height:100%;min-height:0;box-sizing:border-box}.image-preview-panel__preview-fallback-icon{font-size:1.25rem;opacity:.9}.image-preview-panel__preview-fallback-text{font-size:.8rem;line-height:1.4;max-width:16rem}.image-preview-panel__pdf{display:block;width:100%;height:100%;min-width:0;min-height:0;flex:1 1 auto;border:0;background:#fff}.image-preview-panel__skeleton{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;background:#f4f4f5}.image-preview-panel__skeleton-poster{display:block;flex:1 1 auto;min-height:0;width:100%!important;height:auto!important}.image-preview-panel__skeleton-lines{display:flex;flex-direction:column;gap:.5rem;padding:.75rem .9rem .85rem;flex:0 0 auto}.image-preview-panel__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}.image-preview-panel--loading .image-preview-panel__actions{display:none}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "app-button" }, { kind: "component", type: SkeletonBlockComponent, selector: "app-skeleton-block", inputs: ["width", "height", "radius", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
6421
6450
  }
6422
6451
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ImagePreviewPanelComponent, decorators: [{
6423
6452
  type: Component,
6424
- args: [{ selector: 'app-image-preview-panel', standalone: true, imports: [ButtonComponent, SkeletonBlockComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"image-preview-panel\"\r\n [class.image-preview-panel--rounded]=\"rounded\"\r\n [class.image-preview-panel--loading]=\"loading\"\r\n>\r\n @if (title && title.length > 0) {\r\n <h3 class=\"image-preview-panel__title\">{{ title }}</h3>\r\n }\r\n @if (subtitle && subtitle.length > 0) {\r\n <p class=\"image-preview-panel__subtitle\">{{ subtitle }}</p>\r\n }\r\n\r\n <div\r\n class=\"image-preview-panel__frame\"\r\n [class.image-preview-panel__frame--rounded]=\"rounded\"\r\n >\r\n @if (loading) {\r\n <div\r\n class=\"image-preview-panel__skeleton\"\r\n role=\"status\"\r\n aria-label=\"Carregando pr\u00E9-visualiza\u00E7\u00E3o\"\r\n >\r\n <app-skeleton-block\r\n class=\"image-preview-panel__skeleton-poster\"\r\n width=\"100%\"\r\n height=\"100%\"\r\n radius=\"0\"\r\n />\r\n <div class=\"image-preview-panel__skeleton-lines\">\r\n <app-skeleton-block width=\"72%\" height=\"0.6rem\" radius=\"6px\" />\r\n <app-skeleton-block width=\"48%\" height=\"0.55rem\" radius=\"6px\" />\r\n </div>\r\n </div>\r\n } @else if (showEmpty) {\r\n <div class=\"image-preview-panel__empty\" role=\"img\" [attr.aria-label]=\"emptyText\">\r\n <i class=\"fa-regular fa-image image-preview-panel__empty-icon\" aria-hidden=\"true\"></i>\r\n <span class=\"image-preview-panel__empty-text\">{{ emptyText }}</span>\r\n </div>\r\n } @else {\r\n @if (showPreviewFallback) {\r\n <div\r\n class=\"image-preview-panel__preview-fallback\"\r\n role=\"status\"\r\n [attr.aria-label]=\"previewUnavailableMessage\"\r\n >\r\n <i\r\n class=\"fa-solid fa-triangle-exclamation image-preview-panel__preview-fallback-icon\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n <span class=\"image-preview-panel__preview-fallback-text\">{{ previewUnavailableMessage }}</span>\r\n </div>\r\n } @else if (showPdf) {\r\n <iframe\r\n class=\"image-preview-panel__pdf\"\r\n [src]=\"safePdfUrl\"\r\n title=\"Pr\u00E9-visualiza\u00E7\u00E3o do PDF\"\r\n (error)=\"onPdfFrameError()\"\r\n ></iframe>\r\n } @else if (showImage) {\r\n <img\r\n class=\"image-preview-panel__img\"\r\n [src]=\"displaySrc!\"\r\n [alt]=\"title || 'Pr\u00E9-visualiza\u00E7\u00E3o'\"\r\n [style.object-fit]=\"objectFit\"\r\n (load)=\"onImgLoad()\"\r\n (error)=\"onImgError()\"\r\n />\r\n }\r\n }\r\n </div>\r\n\r\n @if (showActions) {\r\n <div class=\"image-preview-panel__actions\" role=\"group\" [attr.aria-label]=\"'A\u00E7\u00F5es da imagem'\">\r\n <app-button\r\n type=\"button\"\r\n variant=\"secondary\"\r\n [fullWidth]=\"false\"\r\n (click)=\"onTrocar()\"\r\n >\r\n Trocar\r\n </app-button>\r\n <app-button\r\n type=\"button\"\r\n variant=\"danger\"\r\n [fullWidth]=\"false\"\r\n (click)=\"onRemover()\"\r\n >\r\n Remover\r\n </app-button>\r\n </div>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;max-width:100%;box-sizing:border-box;user-select:none;-webkit-user-select:none}.image-preview-panel{display:flex;flex-direction:column;gap:.75rem;min-width:0}.image-preview-panel--rounded .image-preview-panel__title,.image-preview-panel--rounded .image-preview-panel__subtitle{padding-left:.05rem}.image-preview-panel__title{font-size:.95rem;font-weight:600;margin:0;color:#171717;line-height:1.3}.image-preview-panel__subtitle{font-size:.8rem;line-height:1.4;margin:-.2rem 0 0;color:#525252}.image-preview-panel__frame{position:relative;width:100%;min-height:12rem;aspect-ratio:4/3;max-height:min(50vh,24rem);border:1px solid var(--ui-field-float-border, #e5e5e5);border-radius:8px;background:var(--ui-page-bg, #f4f4f5);overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.image-preview-panel__frame--rounded{border-radius:12px}.image-preview-panel__img{display:block;width:100%;height:100%;min-width:0;min-height:0;flex:1 1 auto;align-self:stretch;object-position:center;border-radius:0}.image-preview-panel__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.5rem 1rem;text-align:center;color:#737373;width:100%;height:100%;min-height:0;box-sizing:border-box}.image-preview-panel__empty-icon{font-size:1.75rem;opacity:.55}.image-preview-panel__empty-text{font-size:.82rem;line-height:1.4;max-width:16rem}.image-preview-panel__preview-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;padding:1.5rem 1rem;text-align:center;color:#a16207;background:#fffbeb;width:100%;height:100%;min-height:0;box-sizing:border-box}.image-preview-panel__preview-fallback-icon{font-size:1.25rem;opacity:.9}.image-preview-panel__preview-fallback-text{font-size:.8rem;line-height:1.4;max-width:16rem}.image-preview-panel__pdf{display:block;width:100%;height:100%;min-width:0;min-height:0;flex:1 1 auto;border:0;background:#fff}.image-preview-panel__skeleton{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;background:#f4f4f5}.image-preview-panel__skeleton-poster{display:block;flex:1 1 auto;min-height:0;width:100%!important;height:auto!important}.image-preview-panel__skeleton-lines{display:flex;flex-direction:column;gap:.5rem;padding:.75rem .9rem .85rem;flex:0 0 auto}.image-preview-panel__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}.image-preview-panel--loading .image-preview-panel__actions{display:none}\n"] }]
6453
+ args: [{ selector: 'app-image-preview-panel', standalone: true, imports: [ButtonComponent, SkeletonBlockComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"image-preview-panel\"\r\n [class.image-preview-panel--rounded]=\"rounded\"\r\n [class.image-preview-panel--loading]=\"loading\"\r\n>\r\n @if (title && title.length > 0) {\r\n <h3 class=\"image-preview-panel__title\">{{ title }}</h3>\r\n }\r\n @if (subtitle && subtitle.length > 0) {\r\n <p class=\"image-preview-panel__subtitle\">{{ subtitle }}</p>\r\n }\r\n\r\n <div\r\n class=\"image-preview-panel__frame\"\r\n [class.image-preview-panel__frame--rounded]=\"rounded\"\r\n >\r\n @if (loading) {\r\n <div\r\n class=\"image-preview-panel__skeleton\"\r\n role=\"status\"\r\n aria-label=\"Carregando pr\u00E9-visualiza\u00E7\u00E3o\"\r\n >\r\n <app-skeleton-block\r\n class=\"image-preview-panel__skeleton-poster\"\r\n width=\"100%\"\r\n height=\"100%\"\r\n radius=\"0\"\r\n />\r\n <div class=\"image-preview-panel__skeleton-lines\">\r\n <app-skeleton-block width=\"72%\" height=\"0.6rem\" radius=\"6px\" />\r\n <app-skeleton-block width=\"48%\" height=\"0.55rem\" radius=\"6px\" />\r\n </div>\r\n </div>\r\n } @else if (showEmpty) {\r\n <div class=\"image-preview-panel__empty\" role=\"img\" [attr.aria-label]=\"emptyText\">\r\n <i class=\"fa-regular fa-image image-preview-panel__empty-icon\" aria-hidden=\"true\"></i>\r\n <span class=\"image-preview-panel__empty-text\">{{ emptyText }}</span>\r\n </div>\r\n } @else {\r\n @if (showPreviewFallback) {\r\n <div\r\n class=\"image-preview-panel__preview-fallback\"\r\n role=\"status\"\r\n [attr.aria-label]=\"previewUnavailableMessage\"\r\n >\r\n <i\r\n class=\"fa-solid fa-triangle-exclamation image-preview-panel__preview-fallback-icon\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n <span class=\"image-preview-panel__preview-fallback-text\">{{ previewUnavailableMessage }}</span>\r\n </div>\r\n } @else if (showPdf) {\r\n <iframe\r\n class=\"image-preview-panel__pdf\"\r\n [src]=\"safePdfUrl\"\r\n title=\"Pr\u00E9-visualiza\u00E7\u00E3o do PDF\"\r\n (error)=\"onPdfFrameError()\"\r\n ></iframe>\r\n } @else if (shouldRenderImage) {\r\n <img\r\n class=\"image-preview-panel__img\"\r\n [class.image-preview-panel__img--hidden]=\"!showImage\"\r\n [src]=\"displaySrc!\"\r\n [alt]=\"title || 'Pr\u00E9-visualiza\u00E7\u00E3o'\"\r\n [style.object-fit]=\"objectFit\"\r\n (load)=\"onImgLoad()\"\r\n (error)=\"onImgError()\"\r\n />\r\n }\r\n }\r\n </div>\r\n\r\n @if (showActions) {\r\n <div class=\"image-preview-panel__actions\" role=\"group\" [attr.aria-label]=\"'A\u00E7\u00F5es da imagem'\">\r\n <app-button\r\n type=\"button\"\r\n variant=\"secondary\"\r\n [fullWidth]=\"false\"\r\n (click)=\"onTrocar()\"\r\n >\r\n Trocar\r\n </app-button>\r\n <app-button\r\n type=\"button\"\r\n variant=\"danger\"\r\n [fullWidth]=\"false\"\r\n (click)=\"onRemover()\"\r\n >\r\n Remover\r\n </app-button>\r\n </div>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;max-width:100%;box-sizing:border-box;user-select:none;-webkit-user-select:none}.image-preview-panel{display:flex;flex-direction:column;gap:.75rem;min-width:0}.image-preview-panel--rounded .image-preview-panel__title,.image-preview-panel--rounded .image-preview-panel__subtitle{padding-left:.05rem}.image-preview-panel__title{font-size:.95rem;font-weight:600;margin:0;color:#171717;line-height:1.3}.image-preview-panel__subtitle{font-size:.8rem;line-height:1.4;margin:-.2rem 0 0;color:#525252}.image-preview-panel__frame{position:relative;width:100%;min-height:12rem;aspect-ratio:4/3;max-height:min(50vh,24rem);border:1px solid var(--ui-field-float-border, #e5e5e5);border-radius:8px;background:var(--ui-page-bg, #f4f4f5);overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.image-preview-panel__frame--rounded{border-radius:12px}.image-preview-panel__img{display:block;width:100%;height:100%;min-width:0;min-height:0;flex:1 1 auto;align-self:stretch;object-position:center;border-radius:0}.image-preview-panel__img--hidden{visibility:hidden}.image-preview-panel__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.5rem 1rem;text-align:center;color:#737373;width:100%;height:100%;min-height:0;box-sizing:border-box}.image-preview-panel__empty-icon{font-size:1.75rem;opacity:.55}.image-preview-panel__empty-text{font-size:.82rem;line-height:1.4;max-width:16rem}.image-preview-panel__preview-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;padding:1.5rem 1rem;text-align:center;color:#a16207;background:#fffbeb;width:100%;height:100%;min-height:0;box-sizing:border-box}.image-preview-panel__preview-fallback-icon{font-size:1.25rem;opacity:.9}.image-preview-panel__preview-fallback-text{font-size:.8rem;line-height:1.4;max-width:16rem}.image-preview-panel__pdf{display:block;width:100%;height:100%;min-width:0;min-height:0;flex:1 1 auto;border:0;background:#fff}.image-preview-panel__skeleton{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;background:#f4f4f5}.image-preview-panel__skeleton-poster{display:block;flex:1 1 auto;min-height:0;width:100%!important;height:auto!important}.image-preview-panel__skeleton-lines{display:flex;flex-direction:column;gap:.5rem;padding:.75rem .9rem .85rem;flex:0 0 auto}.image-preview-panel__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}.image-preview-panel--loading .image-preview-panel__actions{display:none}\n"] }]
6425
6454
  }], propDecorators: { title: [{
6426
6455
  type: Input
6427
6456
  }], subtitle: [{
@@ -7365,14 +7394,14 @@ class FormSectionComponent {
7365
7394
  constructor() {
7366
7395
  this.subtitulo = '';
7367
7396
  this.dense = false;
7368
- this.withDivider = true;
7397
+ this.divider = true;
7369
7398
  }
7370
7399
  get hostClass() {
7371
7400
  const parts = ['form-section'];
7372
7401
  if (this.dense) {
7373
7402
  parts.push('form-section--dense');
7374
7403
  }
7375
- if (this.withDivider) {
7404
+ if (this.divider) {
7376
7405
  parts.push('form-section--divider');
7377
7406
  }
7378
7407
  return parts.join(' ');
@@ -7381,7 +7410,7 @@ class FormSectionComponent {
7381
7410
  return this.titulo.trim().length > 0 || this.subtitulo.trim().length > 0;
7382
7411
  }
7383
7412
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7384
- 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 }); }
7413
+ 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 }); }
7385
7414
  }
7386
7415
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormSectionComponent, decorators: [{
7387
7416
  type: Component,
@@ -7394,7 +7423,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
7394
7423
  }], dense: [{
7395
7424
  type: Input,
7396
7425
  args: [{ transform: booleanAttribute }]
7397
- }], withDivider: [{
7426
+ }], divider: [{
7398
7427
  type: Input,
7399
7428
  args: [{ transform: booleanAttribute }]
7400
7429
  }], hostClass: [{