structra-ui 0.1.96 → 0.1.98
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/structra-ui.mjs +93 -21
- package/fesm2022/structra-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/structra-ui.d.ts +33 -7
package/fesm2022/structra-ui.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import '../structra-ui.css';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { booleanAttribute, HostBinding, Input, ChangeDetectionStrategy, Component, numberAttribute, ElementRef, ViewChild, inject, ChangeDetectorRef, Injector, DestroyRef, EventEmitter, Output, Directive, signal, computed, Injectable, HostListener, ViewChildren, forwardRef, ApplicationRef, afterNextRender, ContentChildren, NgZone, ViewContainerRef, TemplateRef, ContentChild } from '@angular/core';
|
|
3
|
+
import { booleanAttribute, HostBinding, Input, ChangeDetectionStrategy, Component, numberAttribute, ElementRef, ViewChild, inject, ChangeDetectorRef, Injector, DestroyRef, EventEmitter, Output, Directive, signal, computed, Injectable, Renderer2, HostListener, ViewChildren, forwardRef, ApplicationRef, afterNextRender, ContentChildren, NgZone, ViewContainerRef, TemplateRef, ContentChild } from '@angular/core';
|
|
4
4
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
6
6
|
import { Validators, FormGroupDirective, NgForm, NgControl, NG_VALUE_ACCESSOR, FormsModule, FormGroup, FormArray, FormControl } from '@angular/forms';
|
|
@@ -417,10 +417,10 @@ class BaseFieldDirective {
|
|
|
417
417
|
this.showRequiredMark = false;
|
|
418
418
|
this.readonly = false;
|
|
419
419
|
/** Exibe ícone à esquerda (classes Font Awesome, ex.: `fa-solid fa-user`). */
|
|
420
|
-
this.showPrefixIcon =
|
|
420
|
+
this.showPrefixIcon = true;
|
|
421
421
|
this.prefixIcon = '';
|
|
422
422
|
/** Exibe botão à direita para limpar o valor quando houver texto. */
|
|
423
|
-
this.clearable =
|
|
423
|
+
this.clearable = false;
|
|
424
424
|
this.clearAriaLabel = 'Limpar campo';
|
|
425
425
|
/**
|
|
426
426
|
* Se `true`, o atributo HTML fica `autocomplete="on"` (sugestões do browser).
|
|
@@ -451,6 +451,10 @@ class BaseFieldDirective {
|
|
|
451
451
|
get controlId() {
|
|
452
452
|
return this.id || this.autoId;
|
|
453
453
|
}
|
|
454
|
+
/** Útil para inspeção no DOM sem colidir com `id` do input interno. */
|
|
455
|
+
get hostDataControlId() {
|
|
456
|
+
return this.controlId;
|
|
457
|
+
}
|
|
454
458
|
get autoIdPrefix() {
|
|
455
459
|
const tag = this.hostElementRef.nativeElement.tagName
|
|
456
460
|
.toLowerCase()
|
|
@@ -568,7 +572,7 @@ class BaseFieldDirective {
|
|
|
568
572
|
this.cdr.markForCheck();
|
|
569
573
|
}
|
|
570
574
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
571
|
-
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 }); }
|
|
575
|
+
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 }); }
|
|
572
576
|
}
|
|
573
577
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseFieldDirective, decorators: [{
|
|
574
578
|
type: Directive
|
|
@@ -616,8 +620,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
616
620
|
type: Input
|
|
617
621
|
}], contextMenuSelect: [{
|
|
618
622
|
type: Output
|
|
623
|
+
}], hostDataControlId: [{
|
|
624
|
+
type: HostBinding,
|
|
625
|
+
args: ['attr.data-control-id']
|
|
619
626
|
}] } });
|
|
620
627
|
|
|
628
|
+
const STRUCTRA_THEME_IDS = [
|
|
629
|
+
'blue',
|
|
630
|
+
'green',
|
|
631
|
+
'purple',
|
|
632
|
+
'orange',
|
|
633
|
+
'white',
|
|
634
|
+
'gray',
|
|
635
|
+
'sepia',
|
|
636
|
+
'black',
|
|
637
|
+
];
|
|
638
|
+
|
|
639
|
+
const APP_THEME_BASE_CLASS = 'app-library-theme';
|
|
640
|
+
function normalizeStructraTheme(theme) {
|
|
641
|
+
const candidate = String(theme);
|
|
642
|
+
if (STRUCTRA_THEME_IDS.includes(candidate)) {
|
|
643
|
+
return candidate;
|
|
644
|
+
}
|
|
645
|
+
return 'black';
|
|
646
|
+
}
|
|
647
|
+
function getThemeTokenClass(theme) {
|
|
648
|
+
return `theme-${normalizeStructraTheme(theme)}`;
|
|
649
|
+
}
|
|
650
|
+
function getThemeClassList(theme) {
|
|
651
|
+
return [APP_THEME_BASE_CLASS, getThemeTokenClass(theme)];
|
|
652
|
+
}
|
|
653
|
+
function getThemeClass(theme) {
|
|
654
|
+
return getThemeClassList(theme).join(' ');
|
|
655
|
+
}
|
|
656
|
+
|
|
621
657
|
/** Identificadores de paleta suportados pela library (uso em `AppThemeService.setTheme`). */
|
|
622
658
|
var AppTheme;
|
|
623
659
|
(function (AppTheme) {
|
|
@@ -631,14 +667,7 @@ var AppTheme;
|
|
|
631
667
|
AppTheme["Black"] = "black";
|
|
632
668
|
})(AppTheme || (AppTheme = {}));
|
|
633
669
|
const APP_THEME_IDS = [
|
|
634
|
-
|
|
635
|
-
AppTheme.Green,
|
|
636
|
-
AppTheme.Purple,
|
|
637
|
-
AppTheme.Orange,
|
|
638
|
-
AppTheme.White,
|
|
639
|
-
AppTheme.Gray,
|
|
640
|
-
AppTheme.Sepia,
|
|
641
|
-
AppTheme.Black,
|
|
670
|
+
...STRUCTRA_THEME_IDS,
|
|
642
671
|
];
|
|
643
672
|
/**
|
|
644
673
|
* Estado global do tema da library: **sempre** `.app-library-theme` + `theme-*` juntos.
|
|
@@ -652,12 +681,12 @@ class AppThemeService {
|
|
|
652
681
|
/**
|
|
653
682
|
* Classes separadas (ex.: CDK `panelClass` — uma string com espaço quebra `classList.add`).
|
|
654
683
|
*/
|
|
655
|
-
this.themeClassList = computed(() =>
|
|
684
|
+
this.themeClassList = computed(() => getThemeClassList(this.activeId()), ...(ngDevMode ? [{ debugName: "themeClassList" }] : /* istanbul ignore next */ []));
|
|
656
685
|
/**
|
|
657
686
|
* As duas classes numa string — útil para `[class]`, `[ngClass]` com string, ou hosts HTML.
|
|
658
687
|
* Ex.: `<div [ngClass]="libTheme.getTheme()">` aplica paleta completa no consumidor.
|
|
659
688
|
*/
|
|
660
|
-
this.getTheme = computed(() => this.
|
|
689
|
+
this.getTheme = computed(() => getThemeClass(this.activeId()), ...(ngDevMode ? [{ debugName: "getTheme" }] : /* istanbul ignore next */ []));
|
|
661
690
|
/** Mapa para `[ngClass]` com chaves dinâmicas (painéis overlay). */
|
|
662
691
|
this.themeClassMap = computed(() => {
|
|
663
692
|
const [base, token] = this.themeClassList();
|
|
@@ -689,6 +718,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
689
718
|
args: [{ providedIn: 'root' }]
|
|
690
719
|
}] });
|
|
691
720
|
|
|
721
|
+
class ThemeDirective {
|
|
722
|
+
constructor() {
|
|
723
|
+
this.theme = 'black';
|
|
724
|
+
this.elementRef = inject((ElementRef));
|
|
725
|
+
this.renderer = inject(Renderer2);
|
|
726
|
+
this.themeTokenClasses = STRUCTRA_THEME_IDS.map((themeId) => `theme-${themeId}`);
|
|
727
|
+
}
|
|
728
|
+
ngOnChanges() {
|
|
729
|
+
const element = this.elementRef.nativeElement;
|
|
730
|
+
this.renderer.addClass(element, APP_THEME_BASE_CLASS);
|
|
731
|
+
for (const themeClass of this.themeTokenClasses) {
|
|
732
|
+
this.renderer.removeClass(element, themeClass);
|
|
733
|
+
}
|
|
734
|
+
this.renderer.addClass(element, getThemeTokenClass(this.theme));
|
|
735
|
+
}
|
|
736
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
737
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: ThemeDirective, isStandalone: true, selector: "[appTheme]", inputs: { theme: ["appTheme", "theme"] }, usesOnChanges: true, ngImport: i0 }); }
|
|
738
|
+
}
|
|
739
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeDirective, decorators: [{
|
|
740
|
+
type: Directive,
|
|
741
|
+
args: [{
|
|
742
|
+
selector: '[appTheme]',
|
|
743
|
+
standalone: true,
|
|
744
|
+
}]
|
|
745
|
+
}], propDecorators: { theme: [{
|
|
746
|
+
type: Input,
|
|
747
|
+
args: ['appTheme']
|
|
748
|
+
}] } });
|
|
749
|
+
|
|
692
750
|
/** Posição por omissão do CDK (equivalente ao comportamento anterior sem `positions` explícitas). */
|
|
693
751
|
const DEFAULT_CONNECTED_POSITIONS = [
|
|
694
752
|
{
|
|
@@ -1826,6 +1884,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1826
1884
|
class PasswordFieldComponent extends NgControlFieldDirective {
|
|
1827
1885
|
constructor() {
|
|
1828
1886
|
super(...arguments);
|
|
1887
|
+
/** Password já nasce com ícone de chave no prefixo; pode ser sobrescrito via `prefixIcon`. */
|
|
1888
|
+
this.showPrefixIcon = true;
|
|
1889
|
+
this.prefixIcon = 'fa-solid fa-key';
|
|
1829
1890
|
/** Por defeito `false`: o botão de limpar compete com o toggle de visibilidade. */
|
|
1830
1891
|
this.clearable = false;
|
|
1831
1892
|
this.maxLength = 500;
|
|
@@ -1921,7 +1982,7 @@ class PasswordFieldComponent extends NgControlFieldDirective {
|
|
|
1921
1982
|
this.cdr.markForCheck();
|
|
1922
1983
|
}
|
|
1923
1984
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PasswordFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1924
|
-
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: [
|
|
1985
|
+
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: [
|
|
1925
1986
|
{
|
|
1926
1987
|
provide: NG_VALUE_ACCESSOR,
|
|
1927
1988
|
useExisting: forwardRef(() => PasswordFieldComponent),
|
|
@@ -1938,7 +1999,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1938
1999
|
multi: true,
|
|
1939
2000
|
},
|
|
1940
2001
|
], 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"] }]
|
|
1941
|
-
}], propDecorators: {
|
|
2002
|
+
}], propDecorators: { showPrefixIcon: [{
|
|
2003
|
+
type: Input,
|
|
2004
|
+
args: [{ transform: booleanAttribute }]
|
|
2005
|
+
}], prefixIcon: [{
|
|
2006
|
+
type: Input
|
|
2007
|
+
}], hostInvalidClass: [{
|
|
1942
2008
|
type: HostBinding,
|
|
1943
2009
|
args: ['class.password-field--invalid']
|
|
1944
2010
|
}], clearable: [{
|
|
@@ -3432,8 +3498,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
3432
3498
|
class CheckboxFieldComponent extends BooleanFieldDirective {
|
|
3433
3499
|
constructor() {
|
|
3434
3500
|
super(...arguments);
|
|
3435
|
-
/** `
|
|
3436
|
-
this.fullWidth =
|
|
3501
|
+
/** `false` (padrão): host usa largura intrínseca. Com `true`, ocupa 100%. */
|
|
3502
|
+
this.fullWidth = false;
|
|
3437
3503
|
}
|
|
3438
3504
|
get fullWidthClass() {
|
|
3439
3505
|
return this.fullWidth;
|
|
@@ -5886,6 +5952,9 @@ class FileUploadFieldComponent {
|
|
|
5886
5952
|
const manual = this.id.trim();
|
|
5887
5953
|
return manual.length > 0 ? manual : this.autoId;
|
|
5888
5954
|
}
|
|
5955
|
+
get hostDataControlId() {
|
|
5956
|
+
return this.fieldId;
|
|
5957
|
+
}
|
|
5889
5958
|
ngOnChanges(c) {
|
|
5890
5959
|
if (c['value']) {
|
|
5891
5960
|
this.internalError = null;
|
|
@@ -6247,7 +6316,7 @@ class FileUploadFieldComponent {
|
|
|
6247
6316
|
this.filePreviewObjectUrls.clear();
|
|
6248
6317
|
}
|
|
6249
6318
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileUploadFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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 }); }
|
|
6319
|
+
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 }); }
|
|
6251
6320
|
}
|
|
6252
6321
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileUploadFieldComponent, decorators: [{
|
|
6253
6322
|
type: Component,
|
|
@@ -6290,6 +6359,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
6290
6359
|
}], fileInputRef: [{
|
|
6291
6360
|
type: ViewChild,
|
|
6292
6361
|
args: ['fileInput', { read: ElementRef }]
|
|
6362
|
+
}], hostDataControlId: [{
|
|
6363
|
+
type: HostBinding,
|
|
6364
|
+
args: ['attr.data-control-id']
|
|
6293
6365
|
}] } });
|
|
6294
6366
|
|
|
6295
6367
|
/**
|
|
@@ -7394,7 +7466,7 @@ class FormSectionComponent {
|
|
|
7394
7466
|
constructor() {
|
|
7395
7467
|
this.subtitulo = '';
|
|
7396
7468
|
this.dense = false;
|
|
7397
|
-
this.divider =
|
|
7469
|
+
this.divider = false;
|
|
7398
7470
|
}
|
|
7399
7471
|
get hostClass() {
|
|
7400
7472
|
const parts = ['form-section'];
|
|
@@ -10271,5 +10343,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
10271
10343
|
* Generated bundle index. Do not edit.
|
|
10272
10344
|
*/
|
|
10273
10345
|
|
|
10274
|
-
export { ADAPTIVE_DATA_VIEW_MOBILE_QUERY, APP_SIDEBAR_LABEL_REVEAL_LAG_MS, APP_SIDEBAR_LAYOUT_DURATION_MS, APP_SIDEBAR_NAV_REVEAL_TOTAL_MS, APP_THEME_IDS, ActionMenuComponent, AdaptiveDataViewComponent, AnchoredOverlayComponent, AppBreadcrumbComponent, AppDialogComponent, AppLibLightBlockScrollStrategy, AppShellComponent, AppShellSidebarTemplateDirective, AppShellSidebarToggleComponent, AppSidebarComponent, AppSidebarToolbarDirective, AppTheme, AppThemeService, AppTopbarComponent, AppUserMenuComponent, BR_ESTADOS_NOME_SIGLA, BaseFieldComponent, BaseFieldDirective, BooleanFieldDirective, ButtonComponent, ButtonRadius, ButtonSize, ButtonType, ButtonVariant, CardListComponent, CepFieldComponent, CheckboxFieldComponent, ConfirmDialogComponent, ConfirmDialogService, ContextMenuComponent, CpfCnpjFieldComponent, DashboardSectionComponent, DataCardComponent, DataGridComponent, DataListComponent, DataToolbarComponent, DateFieldComponent, DecimalFieldComponent, DetailsFieldComponent, DetailsViewComponent, DialogFooterDirective, DividerComponent, DrawerComponent, DrawerSide, DrawerSize, DropdownBaseComponent, DropdownMenuComponent, DropdownMultiOptionFieldBase, DropdownOptionFieldBase, DropdownSearchFieldComponent, EmptyStateComponent, FILE_PREVIEW_UNAVAILABLE_MESSAGE, FileUploadFieldComponent, FormActionsAlign, FormActionsComponent, FormColComponent, FormGroupComponent, FormGroupVariant, FormLayoutGap, FormRowAlign, FormRowComponent, FormRowJustify, FormSectionComponent, FormTabComponent, FormTabsComponent, ImagePreviewPanelComponent, InputMaskFieldComponent, IntegerFieldComponent, LAYOUT_STACK_SIDE_BY_SIDE, LAYOUT_STACK_STACKED, LayoutStackAlign, LayoutStackComponent, LayoutStackDirection, LayoutStackItemAlign, LibDialogSize, ListItemComponent, LoadingDialogComponent, LoadingDialogService, MaskedTextFieldBase, MenuDividerComponent, MenuDropdownPlacement, MenuGroupComponent, MenuListComponent, MultiselectFieldComponent, NgControlFieldDirective, OverlayPlacement, PDF_IFRAME_VIEWER_HASH, PasswordFieldComponent, PhoneFieldComponent, PopoverBodyTemplateDirective, PopoverComponent, PopoverFooterTemplateDirective, PopoverTriggerDirective, STRUCTRA_UI, SelectFieldComponent, SkeletonBlockComponent, SkeletonCardComponent, SkeletonFieldShellComponent, SkeletonListComponent, SkeletonTableComponent, SkeletonTextComponent, StatCardComponent, StatusBadgeComponent, SwitchFieldComponent, TableEmptyStateComponent, TableToolbarComponent, TextFieldComponent, TextareaFieldComponent, ToastHostComponent, ToastService, TooltipComponent, TooltipPanelTemplateDirective, ValidationSummaryComponent, anchoredOverlayPositions, appendPdfIframeViewerParams, applyPickedCalendarDate, buildDecimalBrDisplay, buildDecimalBrParseString, buildEmptyStateOverlayHtml, caretIndexFromIntegerDigitCount, caretIndexFromSemantic, cepMaskCompleteValidator, cpfCnpjMaskCompleteValidator, escapeHtml, extractDecimalBrParts, fileIsLikelyImage, fileMatchesAccept, fixedDigitsMaskCompleteValidator, formatAcceptForDisplay, formatDateTimePtBr, formatDecimalBr, formatFileSizeBytes, formatIntegerThousandsBr, formatMaskDigits, formatUiFieldDateValue, getFilePreviewKind, libDialogPanelClasses, mapEstadosToOptions, maskDigitCount, normalizeFormDateValue, parseDecimalBr, parseIntegerString, parseUiFieldDateValue, phoneBrMaskCompleteValidator, resolveControlAtPath, sanitizeDecimalBrInput, sanitizeIntegerDigits, sectionHasVisibleInvalid, semanticCaretAt, semanticIntegerDigitCountLeft, stripToDigits, subscribeMarkForCheckOnInvalidUiRefresh, subtreeHasVisibleInvalid };
|
|
10346
|
+
export { ADAPTIVE_DATA_VIEW_MOBILE_QUERY, APP_SIDEBAR_LABEL_REVEAL_LAG_MS, APP_SIDEBAR_LAYOUT_DURATION_MS, APP_SIDEBAR_NAV_REVEAL_TOTAL_MS, APP_THEME_BASE_CLASS, APP_THEME_IDS, ActionMenuComponent, AdaptiveDataViewComponent, AnchoredOverlayComponent, AppBreadcrumbComponent, AppDialogComponent, AppLibLightBlockScrollStrategy, AppShellComponent, AppShellSidebarTemplateDirective, AppShellSidebarToggleComponent, AppSidebarComponent, AppSidebarToolbarDirective, AppTheme, AppThemeService, AppTopbarComponent, AppUserMenuComponent, BR_ESTADOS_NOME_SIGLA, BaseFieldComponent, BaseFieldDirective, BooleanFieldDirective, ButtonComponent, ButtonRadius, ButtonSize, ButtonType, ButtonVariant, CardListComponent, CepFieldComponent, CheckboxFieldComponent, ConfirmDialogComponent, ConfirmDialogService, ContextMenuComponent, CpfCnpjFieldComponent, DashboardSectionComponent, DataCardComponent, DataGridComponent, DataListComponent, DataToolbarComponent, DateFieldComponent, DecimalFieldComponent, DetailsFieldComponent, DetailsViewComponent, DialogFooterDirective, DividerComponent, DrawerComponent, DrawerSide, DrawerSize, DropdownBaseComponent, DropdownMenuComponent, DropdownMultiOptionFieldBase, DropdownOptionFieldBase, DropdownSearchFieldComponent, EmptyStateComponent, FILE_PREVIEW_UNAVAILABLE_MESSAGE, FileUploadFieldComponent, FormActionsAlign, FormActionsComponent, FormColComponent, FormGroupComponent, FormGroupVariant, FormLayoutGap, FormRowAlign, FormRowComponent, FormRowJustify, FormSectionComponent, FormTabComponent, FormTabsComponent, ImagePreviewPanelComponent, InputMaskFieldComponent, IntegerFieldComponent, LAYOUT_STACK_SIDE_BY_SIDE, LAYOUT_STACK_STACKED, LayoutStackAlign, LayoutStackComponent, LayoutStackDirection, LayoutStackItemAlign, LibDialogSize, ListItemComponent, LoadingDialogComponent, LoadingDialogService, MaskedTextFieldBase, MenuDividerComponent, MenuDropdownPlacement, MenuGroupComponent, MenuListComponent, MultiselectFieldComponent, NgControlFieldDirective, OverlayPlacement, PDF_IFRAME_VIEWER_HASH, PasswordFieldComponent, PhoneFieldComponent, PopoverBodyTemplateDirective, PopoverComponent, PopoverFooterTemplateDirective, PopoverTriggerDirective, STRUCTRA_THEME_IDS, STRUCTRA_UI, SelectFieldComponent, SkeletonBlockComponent, SkeletonCardComponent, SkeletonFieldShellComponent, SkeletonListComponent, SkeletonTableComponent, SkeletonTextComponent, StatCardComponent, StatusBadgeComponent, SwitchFieldComponent, TableEmptyStateComponent, TableToolbarComponent, TextFieldComponent, TextareaFieldComponent, ThemeDirective, ToastHostComponent, ToastService, TooltipComponent, TooltipPanelTemplateDirective, ValidationSummaryComponent, anchoredOverlayPositions, appendPdfIframeViewerParams, applyPickedCalendarDate, buildDecimalBrDisplay, buildDecimalBrParseString, buildEmptyStateOverlayHtml, caretIndexFromIntegerDigitCount, caretIndexFromSemantic, cepMaskCompleteValidator, cpfCnpjMaskCompleteValidator, escapeHtml, extractDecimalBrParts, fileIsLikelyImage, fileMatchesAccept, fixedDigitsMaskCompleteValidator, formatAcceptForDisplay, formatDateTimePtBr, formatDecimalBr, formatFileSizeBytes, formatIntegerThousandsBr, formatMaskDigits, formatUiFieldDateValue, getFilePreviewKind, getThemeClass, getThemeClassList, getThemeTokenClass, libDialogPanelClasses, mapEstadosToOptions, maskDigitCount, normalizeFormDateValue, normalizeStructraTheme, parseDecimalBr, parseIntegerString, parseUiFieldDateValue, phoneBrMaskCompleteValidator, resolveControlAtPath, sanitizeDecimalBrInput, sanitizeIntegerDigits, sectionHasVisibleInvalid, semanticCaretAt, semanticIntegerDigitCountLeft, stripToDigits, subscribeMarkForCheckOnInvalidUiRefresh, subtreeHasVisibleInvalid };
|
|
10275
10347
|
//# sourceMappingURL=structra-ui.mjs.map
|