structra-ui 0.2.10 → 0.2.12
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
CHANGED
|
@@ -1620,11 +1620,11 @@ class BaseFieldComponent {
|
|
|
1620
1620
|
this.contextMenuSelect.emit(id);
|
|
1621
1621
|
}
|
|
1622
1622
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1623
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: BaseFieldComponent, isStandalone: true, selector: "app-base-field", inputs: { label: "label", errorMessage: "errorMessage", required: "required", showRequiredMark: "showRequiredMark", invalid: "invalid", filled: "filled", disabled: "disabled", readonly: "readonly", inputId: "inputId", errorId: "errorId", showPrefixIcon: "showPrefixIcon", prefixIcon: "prefixIcon", clearable: "clearable", clearAriaLabel: "clearAriaLabel", showSuffixSlot: "showSuffixSlot", valueAlignEnd: "valueAlignEnd", loading: ["loading", "loading", booleanAttribute], skeletonVariant: "skeletonVariant", mostrarMenuContexto: ["mostrarMenuContexto", "mostrarMenuContexto", booleanAttribute], contextMenuItems: "contextMenuItems", contextMenuId: "contextMenuId" }, outputs: { clear: "clear", contextMenuSelect: "contextMenuSelect" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"base-field\" [class.base-field--invalid]=\"invalid\" [class.base-field--filled]=\"filled\"\n [class.base-field--disabled]=\"disabled\" [class.base-field--readonly]=\"readonly\"\n [class.base-field--loading]=\"loading\" [attr.aria-busy]=\"loading ? true : null\"\n [attr.aria-label]=\"loading && showFloatTpl ? label : null\">\n <div class=\"base-field__box\">\n <div class=\"base-field__prefix\">\n @if (!loading) {\n <ng-content select=\"[appFieldPrefix]\" />\n }\n @if (showFaTpl) {\n <i [attr.class]=\"prefixIconClassTpl + (loading ? ' base-field__prefix-icon--loading-dim' : '')\"\n aria-hidden=\"true\"></i>\n }\n </div>\n\n <div class=\"base-field__field\">\n @if (showFloatTpl && !loading) {\n <label class=\"base-field__float-label\" [attr.for]=\"inputId || null\">\n {{ label }}\n @if (required && showRequiredMark) {\n <span class=\"base-field__required\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n <div class=\"base-field__control\" [class.base-field__control--value-end]=\"valueAlignEnd\">\n @if (!loading) {\n <ng-content />\n } @else {\n <app-skeleton-field-shell [variant]=\"skeletonVariant\" [showLeadingIcon]=\"!showFaTpl\" />\n }\n </div>\n </div>\n\n @if (showSuffixTpl) {\n <div class=\"base-field__suffix\" [class.base-field__suffix--loading]=\"loading\">\n @if (!loading) {\n @if (showCtxMenuTpl) {\n <app-dropdown-menu\n class=\"base-field__ctx-dropdown\"\n [items]=\"contextMenuItems\"\n [minWidthPx]=\"200\"\n [matchTriggerWidth]=\"false\"\n [menuId]=\"resolvedContextMenuId\"\n (itemSelect)=\"onContextMenuItemSelect($event)\"\n >\n <button type=\"button\" class=\"base-field__ctx-trigger\" aria-label=\"Mais op\u00E7\u00F5es\" tabindex=\"-1\">\n <i class=\"fa-solid fa-ellipsis\" aria-hidden=\"true\"></i>\n </button>\n </app-dropdown-menu>\n }\n @if (showSuffixSlot) {\n <ng-content select=\"[appFieldSuffix]\" />\n }\n @if (showClearTpl) {\n <button type=\"button\" class=\"base-field__clear\" tabindex=\"-1\" [attr.aria-label]=\"clearAriaLabel\"\n (click)=\"onClearClick()\">\n <span class=\"base-field__clear-x\" aria-hidden=\"true\">×</span>\n </button>\n }\n } @else if (loading && showSuffixSlot) {\n <span class=\"base-field__suffix-reserve\" aria-hidden=\"true\"></span>\n }\n </div>\n }\n </div>\n\n @if (!loading && showErrorTpl) {\n <p class=\"base-field__error\" [id]=\"errorId || null\" role=\"alert\">\n {{ errorMessage }}\n </p>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.base-field{display:flex;flex-direction:column;gap:.35rem;width:100%;max-width:100%;box-sizing:border-box}.base-field--loading .base-field__box{pointer-events:none}.base-field--loading .base-field__field{justify-content:center}.base-field--loading .base-field__control{display:flex;align-items:center;width:100%;min-height:0}.base-field__box{display:flex;align-items:stretch;width:100%;min-width:0;border:1px solid var(--ui-field-float-border);border-radius:var(--ui-field-float-border-radius);overflow:hidden;background:var(--field-background, var(--ui-field-float-bg));transition:border-color .1s ease,box-shadow .1s ease;contain:layout}.base-field:not(.base-field--invalid):not(.base-field--disabled):not(.base-field--readonly):not(:focus-within):hover .base-field__box{border-color:var(--ui-field-float-border-hover);box-shadow:none}.base-field--readonly:not(.base-field--disabled):not(.base-field--invalid):not(:focus-within):hover .base-field__box{border-color:var(--ui-field-readonly-border-hover);box-shadow:none}.base-field:not(.base-field--invalid):not(.base-field--disabled):not(.base-field--readonly) .base-field__box:focus-within{border-color:var(--ui-field-float-border-focus);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring)}.base-field--readonly:not(.base-field--disabled) .base-field__box{background:var(--ui-field-readonly-bg);border-color:var(--ui-field-readonly-border)}.base-field--readonly:not(.base-field--disabled):not(.base-field--invalid) .base-field__box:focus-within{border-color:var(--ui-field-readonly-border-focus);box-shadow:0 0 0 3px var(--ui-field-readonly-focus-ring)}.base-field--invalid .base-field__box{border-color:var(--ui-field-input-invalid-border);box-shadow:none;background:var(--ui-field-invalid-input-bg, #fef2f2)}.base-field--readonly.base-field--invalid:not(.base-field--disabled) .base-field__box{background:var(--ui-field-invalid-input-bg, #fef2f2)}.base-field--invalid:not(.base-field--disabled):not(.base-field--readonly) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.base-field--disabled .base-field__box{opacity:var(--ui-field-input-disabled-opacity)}.base-field__prefix{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding-left:.75rem;color:var(--ui-field-float-prefix-color);user-select:none;-webkit-user-select:none}.base-field__prefix:empty{display:none}.base-field__prefix-icon{font-style:normal;font-size:1rem;line-height:1;color:var(--ui-field-float-prefix-color)}.base-field__prefix-icon--loading-dim{opacity:.34;pointer-events:none}.base-field__suffix{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;gap:.125rem;padding-right:.4rem;padding-left:.1rem}.base-field__ctx-dropdown{display:inline-flex;flex-shrink:0;align-items:center;max-width:100%}.base-field__ctx-trigger{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.base-field__ctx-trigger:hover{background:var(--app-color-prefix-hover-bg, rgba(90, 127, 163, .15));color:var(--ui-field-float-label-top-color)}.base-field__ctx-trigger:focus,.base-field__ctx-trigger:focus-visible{outline:none}.base-field__clear{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;min-width:2rem;min-height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;line-height:0;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.base-field__clear:hover{background:var(--app-color-prefix-hover-bg, rgba(90, 127, 163, .15));color:var(--ui-field-float-label-top-color)}.base-field__clear:focus,.base-field__clear:focus-visible{outline:none}.base-field__clear-x{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;font-size:1.2rem;line-height:1;font-weight:300}.base-field--invalid .base-field__prefix,.base-field--invalid .base-field__prefix-icon{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__prefix-icon:before{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__suffix,.base-field--invalid .base-field__clear,.base-field--invalid .base-field__ctx-trigger{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__clear:hover,.base-field--invalid .base-field__ctx-trigger:hover{background:var(--app-color-error-bg-subtle, rgba(185, 28, 28, .12));color:var(--ui-field-float-label-invalid-color)}.base-field__field{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;contain:layout style}.base-field__float-label{position:absolute;left:.75rem;right:.75rem;top:.45rem;transform:translate3d(0,calc((1.8rem + 1.35em)/2 - .45rem - .6em),0) scale(1);transform-origin:left top;font-size:1rem;font-weight:var(--field-float-label-rest-weight, var(--structra-body-weight));line-height:1.2;color:var(--ui-field-float-label-color);pointer-events:none;user-select:none;-webkit-user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .11s cubic-bezier(.4,0,.2,1),color .11s ease}@media(prefers-reduced-motion:reduce){.base-field__float-label{transition:none}}.base-field__box:focus-within .base-field__float-label,.base-field--filled .base-field__float-label{transform:translateZ(0) scale(.75);font-weight:var(--field-label-weight, var(--structra-label-weight));color:var(--ui-field-float-label-top-color)}.base-field--invalid .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid.base-field--filled .base-field__float-label,.base-field--invalid .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field__required{color:var(--ui-field-required-mark-color);margin-left:.15rem}.base-field--invalid .base-field__required{color:var(--ui-field-float-label-invalid-color)}.base-field__control{display:block;width:100%;min-width:0}.base-field__suffix-reserve{display:block;flex-shrink:0;width:2rem;height:2rem;margin:0 .1rem;box-sizing:border-box}.base-field__control--value-end :where(input){text-align:right}.base-field--readonly:not(.base-field--disabled) .base-field__float-label{color:var(--ui-field-readonly-label-color)}.base-field--readonly.base-field--filled .base-field__float-label,.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-readonly-label-top-color)}.base-field--readonly:not(.base-field--disabled) .base-field__prefix,.base-field--readonly:not(.base-field--disabled) .base-field__prefix-icon{color:var(--ui-field-readonly-prefix-color)}.base-field--readonly:not(.base-field--disabled) .base-field__control :where(input,textarea){color:var(--ui-field-readonly-input-text)}.base-field--invalid.base-field--readonly .base-field__float-label,.base-field--invalid.base-field--readonly.base-field--filled .base-field__float-label,.base-field--invalid.base-field--readonly .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__prefix,.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__prefix-icon{color:var(--ui-field-float-label-invalid-color)}.base-field__error{margin:0;padding-left:.15rem;font-size:.75rem;font-weight:var(--field-helper-weight, var(--structra-body-weight));color:var(--ui-field-error-text-color);user-select:none;-webkit-user-select:none}@supports (-webkit-appearance: none){.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:hover,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:active,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;transition:background-color 50000s ease 0s!important}.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:hover,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:active,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;transition:background-color 50000s ease 0s!important}}.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:hover,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:focus{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;background-color:var(--ui-field-invalid-input-bg, #fef2f2)!important;transition:background-color 50000s ease 0s!important}.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill:hover,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill:focus{-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;background-color:var(--ui-field-readonly-bg)!important;transition:background-color 50000s ease 0s!important}\n"], dependencies: [{ kind: "component", type: SkeletonFieldShellComponent, selector: "app-skeleton-field-shell", inputs: ["variant", "animate", "showLeadingIcon"] }, { kind: "component", type: DropdownMenuComponent, selector: "app-dropdown-menu", inputs: ["items", "placement", "minWidthPx", "matchTriggerWidth", "menuId"], outputs: ["itemSelect", "openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1623
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: BaseFieldComponent, isStandalone: true, selector: "app-base-field", inputs: { label: "label", errorMessage: "errorMessage", required: "required", showRequiredMark: "showRequiredMark", invalid: "invalid", filled: "filled", disabled: "disabled", readonly: "readonly", inputId: "inputId", errorId: "errorId", showPrefixIcon: "showPrefixIcon", prefixIcon: "prefixIcon", clearable: "clearable", clearAriaLabel: "clearAriaLabel", showSuffixSlot: "showSuffixSlot", valueAlignEnd: "valueAlignEnd", loading: ["loading", "loading", booleanAttribute], skeletonVariant: "skeletonVariant", mostrarMenuContexto: ["mostrarMenuContexto", "mostrarMenuContexto", booleanAttribute], contextMenuItems: "contextMenuItems", contextMenuId: "contextMenuId" }, outputs: { clear: "clear", contextMenuSelect: "contextMenuSelect" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"base-field\" [class.base-field--invalid]=\"invalid\" [class.base-field--filled]=\"filled\"\n [class.base-field--disabled]=\"disabled\" [class.base-field--readonly]=\"readonly\"\n [class.base-field--loading]=\"loading\" [attr.aria-busy]=\"loading ? true : null\"\n [attr.aria-label]=\"loading && showFloatTpl ? label : null\">\n <div class=\"base-field__box\">\n <div class=\"base-field__prefix\">\n @if (!loading) {\n <ng-content select=\"[appFieldPrefix]\" />\n }\n @if (showFaTpl) {\n <i [attr.class]=\"prefixIconClassTpl + (loading ? ' base-field__prefix-icon--loading-dim' : '')\"\n aria-hidden=\"true\"></i>\n }\n </div>\n\n <div class=\"base-field__field\">\n @if (showFloatTpl && !loading) {\n <label class=\"base-field__float-label\" [attr.for]=\"inputId || null\">\n {{ label }}\n @if (required && showRequiredMark) {\n <span class=\"base-field__required\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n <div class=\"base-field__control\" [class.base-field__control--value-end]=\"valueAlignEnd\">\n @if (!loading) {\n <ng-content />\n } @else {\n <app-skeleton-field-shell [variant]=\"skeletonVariant\" [showLeadingIcon]=\"!showFaTpl\" />\n }\n </div>\n </div>\n\n @if (showSuffixTpl) {\n <div class=\"base-field__suffix\" [class.base-field__suffix--loading]=\"loading\">\n @if (!loading) {\n @if (showCtxMenuTpl) {\n <app-dropdown-menu\n class=\"base-field__ctx-dropdown\"\n [items]=\"contextMenuItems\"\n [minWidthPx]=\"200\"\n [matchTriggerWidth]=\"false\"\n [menuId]=\"resolvedContextMenuId\"\n (itemSelect)=\"onContextMenuItemSelect($event)\"\n >\n <button type=\"button\" class=\"base-field__ctx-trigger\" aria-label=\"Mais op\u00E7\u00F5es\" tabindex=\"-1\">\n <i class=\"fa-solid fa-ellipsis\" aria-hidden=\"true\"></i>\n </button>\n </app-dropdown-menu>\n }\n @if (showSuffixSlot) {\n <ng-content select=\"[appFieldSuffix]\" />\n }\n @if (showClearTpl) {\n <button type=\"button\" class=\"base-field__clear\" tabindex=\"-1\" [attr.aria-label]=\"clearAriaLabel\"\n (click)=\"onClearClick()\">\n <span class=\"base-field__clear-x\" aria-hidden=\"true\">×</span>\n </button>\n }\n } @else if (loading && showSuffixSlot) {\n <span class=\"base-field__suffix-reserve\" aria-hidden=\"true\"></span>\n }\n </div>\n }\n </div>\n\n @if (!loading && showErrorTpl) {\n <p class=\"base-field__error\" [id]=\"errorId || null\" role=\"alert\">\n {{ errorMessage }}\n </p>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.base-field{display:flex;flex-direction:column;gap:.35rem;width:100%;max-width:100%;box-sizing:border-box}.base-field--loading .base-field__box{pointer-events:none}.base-field--loading .base-field__field{justify-content:center}.base-field--loading .base-field__control{display:flex;align-items:center;width:100%;min-height:0}.base-field__box{display:flex;align-items:stretch;width:100%;min-width:0;border:1px solid var(--ui-field-float-border);border-radius:var(--ui-field-float-border-radius);overflow:hidden;background:var(--field-background, var(--ui-field-float-bg));transition:border-color .1s ease,box-shadow .1s ease;contain:layout}.base-field:not(.base-field--invalid):not(.base-field--disabled):not(.base-field--readonly):not(:focus-within):hover .base-field__box{border-color:var(--ui-field-float-border-hover);box-shadow:none}.base-field--readonly:not(.base-field--disabled):not(.base-field--invalid):not(:focus-within):hover .base-field__box{border-color:var(--ui-field-readonly-border-hover);box-shadow:none}.base-field:not(.base-field--invalid):not(.base-field--disabled):not(.base-field--readonly) .base-field__box:focus-within{border-color:var(--ui-field-float-border-focus);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring)}.base-field--readonly:not(.base-field--disabled) .base-field__box{background:var(--ui-field-readonly-bg);border-color:var(--ui-field-readonly-border)}.base-field--readonly:not(.base-field--disabled):not(.base-field--invalid) .base-field__box:focus-within{border-color:var(--ui-field-readonly-border-focus);box-shadow:0 0 0 3px var(--ui-field-readonly-focus-ring)}.base-field--invalid .base-field__box{border-color:var(--ui-field-input-invalid-border);box-shadow:none;background:var(--ui-field-invalid-input-bg, #fef2f2)}.base-field--readonly.base-field--invalid:not(.base-field--disabled) .base-field__box{background:var(--ui-field-invalid-input-bg, #fef2f2)}.base-field--invalid:not(.base-field--disabled):not(.base-field--readonly) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.base-field--disabled .base-field__box{opacity:var(--ui-field-input-disabled-opacity)}.base-field__prefix{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding-left:.75rem;color:var(--ui-field-float-prefix-color);user-select:none;-webkit-user-select:none}.base-field__prefix:empty{display:none}.base-field__prefix-icon{font-style:normal;font-size:1rem;line-height:1;color:var(--ui-field-float-prefix-color)}.base-field__prefix-icon--loading-dim{opacity:.34;pointer-events:none}.base-field__suffix{display:grid;grid-auto-flow:column;grid-auto-columns:auto;column-gap:.125rem;align-content:center;justify-content:end;justify-items:center;flex-shrink:0;padding-right:.4rem;padding-left:.1rem;min-height:0;align-self:stretch}.base-field__ctx-dropdown{display:inline-flex;flex-shrink:0;align-items:center;max-width:100%}.base-field__ctx-trigger{display:inline-grid;place-items:center;width:2rem;height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.base-field__ctx-trigger:hover{background:var(--app-color-prefix-hover-bg, rgba(90, 127, 163, .15));color:var(--ui-field-float-label-top-color)}.base-field__ctx-trigger:focus,.base-field__ctx-trigger:focus-visible{outline:none}.base-field__clear{display:inline-grid;place-items:center;width:2rem;height:2rem;min-width:2rem;min-height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;line-height:0;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.base-field__clear:hover{background:var(--app-color-prefix-hover-bg, rgba(90, 127, 163, .15));color:var(--ui-field-float-label-top-color)}.base-field__clear:focus,.base-field__clear:focus-visible{outline:none}.base-field__clear-x{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;font-size:1.2rem;line-height:1;font-weight:300}.base-field--invalid .base-field__prefix,.base-field--invalid .base-field__prefix-icon{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__prefix-icon:before{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__suffix,.base-field--invalid .base-field__clear,.base-field--invalid .base-field__ctx-trigger{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__clear:hover,.base-field--invalid .base-field__ctx-trigger:hover{background:var(--app-color-error-bg-subtle, rgba(185, 28, 28, .12));color:var(--ui-field-float-label-invalid-color)}.base-field__field{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;contain:layout style}.base-field__float-label{position:absolute;left:.75rem;right:.75rem;top:.45rem;transform:translate3d(0,calc((1.8rem + 1.35em)/2 - .45rem - .6em),0) scale(1);transform-origin:left top;font-size:1rem;font-weight:var(--field-float-label-rest-weight, var(--structra-body-weight));line-height:1.2;color:var(--ui-field-float-label-color);pointer-events:none;user-select:none;-webkit-user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .11s cubic-bezier(.4,0,.2,1),color .11s ease}@media(prefers-reduced-motion:reduce){.base-field__float-label{transition:none}}.base-field__box:focus-within .base-field__float-label,.base-field--filled .base-field__float-label{transform:translateZ(0) scale(.75);font-weight:var(--field-label-weight, var(--structra-label-weight));color:var(--ui-field-float-label-top-color)}.base-field--invalid .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid.base-field--filled .base-field__float-label,.base-field--invalid .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field__required{color:var(--ui-field-required-mark-color);margin-left:.15rem}.base-field--invalid .base-field__required{color:var(--ui-field-float-label-invalid-color)}.base-field__control{display:block;width:100%;min-width:0}.base-field__suffix-reserve{display:block;flex-shrink:0;width:2rem;height:2rem;margin:0 .1rem;box-sizing:border-box}.base-field__control--value-end :where(input){text-align:right}.base-field--readonly:not(.base-field--disabled) .base-field__float-label{color:var(--ui-field-readonly-label-color)}.base-field--readonly.base-field--filled .base-field__float-label,.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-readonly-label-top-color)}.base-field--readonly:not(.base-field--disabled) .base-field__prefix,.base-field--readonly:not(.base-field--disabled) .base-field__prefix-icon{color:var(--ui-field-readonly-prefix-color)}.base-field--readonly:not(.base-field--disabled) .base-field__control :where(input,textarea){color:var(--ui-field-readonly-input-text)}.base-field--invalid.base-field--readonly .base-field__float-label,.base-field--invalid.base-field--readonly.base-field--filled .base-field__float-label,.base-field--invalid.base-field--readonly .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__prefix,.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__prefix-icon{color:var(--ui-field-float-label-invalid-color)}.base-field__error{margin:0;padding-left:.15rem;font-size:.75rem;font-weight:var(--field-helper-weight, var(--structra-body-weight));color:var(--ui-field-error-text-color);user-select:none;-webkit-user-select:none}@supports (-webkit-appearance: none){.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:hover,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:active,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;transition:background-color 50000s ease 0s!important}.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:hover,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:active,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;transition:background-color 50000s ease 0s!important}}.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:hover,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:focus{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;background-color:var(--ui-field-invalid-input-bg, #fef2f2)!important;transition:background-color 50000s ease 0s!important}.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill:hover,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill:focus{-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;background-color:var(--ui-field-readonly-bg)!important;transition:background-color 50000s ease 0s!important}\n"], dependencies: [{ kind: "component", type: SkeletonFieldShellComponent, selector: "app-skeleton-field-shell", inputs: ["variant", "animate", "showLeadingIcon"] }, { kind: "component", type: DropdownMenuComponent, selector: "app-dropdown-menu", inputs: ["items", "placement", "minWidthPx", "matchTriggerWidth", "menuId"], outputs: ["itemSelect", "openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1624
1624
|
}
|
|
1625
1625
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseFieldComponent, decorators: [{
|
|
1626
1626
|
type: Component,
|
|
1627
|
-
args: [{ selector: 'app-base-field', imports: [SkeletonFieldShellComponent, DropdownMenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"base-field\" [class.base-field--invalid]=\"invalid\" [class.base-field--filled]=\"filled\"\n [class.base-field--disabled]=\"disabled\" [class.base-field--readonly]=\"readonly\"\n [class.base-field--loading]=\"loading\" [attr.aria-busy]=\"loading ? true : null\"\n [attr.aria-label]=\"loading && showFloatTpl ? label : null\">\n <div class=\"base-field__box\">\n <div class=\"base-field__prefix\">\n @if (!loading) {\n <ng-content select=\"[appFieldPrefix]\" />\n }\n @if (showFaTpl) {\n <i [attr.class]=\"prefixIconClassTpl + (loading ? ' base-field__prefix-icon--loading-dim' : '')\"\n aria-hidden=\"true\"></i>\n }\n </div>\n\n <div class=\"base-field__field\">\n @if (showFloatTpl && !loading) {\n <label class=\"base-field__float-label\" [attr.for]=\"inputId || null\">\n {{ label }}\n @if (required && showRequiredMark) {\n <span class=\"base-field__required\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n <div class=\"base-field__control\" [class.base-field__control--value-end]=\"valueAlignEnd\">\n @if (!loading) {\n <ng-content />\n } @else {\n <app-skeleton-field-shell [variant]=\"skeletonVariant\" [showLeadingIcon]=\"!showFaTpl\" />\n }\n </div>\n </div>\n\n @if (showSuffixTpl) {\n <div class=\"base-field__suffix\" [class.base-field__suffix--loading]=\"loading\">\n @if (!loading) {\n @if (showCtxMenuTpl) {\n <app-dropdown-menu\n class=\"base-field__ctx-dropdown\"\n [items]=\"contextMenuItems\"\n [minWidthPx]=\"200\"\n [matchTriggerWidth]=\"false\"\n [menuId]=\"resolvedContextMenuId\"\n (itemSelect)=\"onContextMenuItemSelect($event)\"\n >\n <button type=\"button\" class=\"base-field__ctx-trigger\" aria-label=\"Mais op\u00E7\u00F5es\" tabindex=\"-1\">\n <i class=\"fa-solid fa-ellipsis\" aria-hidden=\"true\"></i>\n </button>\n </app-dropdown-menu>\n }\n @if (showSuffixSlot) {\n <ng-content select=\"[appFieldSuffix]\" />\n }\n @if (showClearTpl) {\n <button type=\"button\" class=\"base-field__clear\" tabindex=\"-1\" [attr.aria-label]=\"clearAriaLabel\"\n (click)=\"onClearClick()\">\n <span class=\"base-field__clear-x\" aria-hidden=\"true\">×</span>\n </button>\n }\n } @else if (loading && showSuffixSlot) {\n <span class=\"base-field__suffix-reserve\" aria-hidden=\"true\"></span>\n }\n </div>\n }\n </div>\n\n @if (!loading && showErrorTpl) {\n <p class=\"base-field__error\" [id]=\"errorId || null\" role=\"alert\">\n {{ errorMessage }}\n </p>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.base-field{display:flex;flex-direction:column;gap:.35rem;width:100%;max-width:100%;box-sizing:border-box}.base-field--loading .base-field__box{pointer-events:none}.base-field--loading .base-field__field{justify-content:center}.base-field--loading .base-field__control{display:flex;align-items:center;width:100%;min-height:0}.base-field__box{display:flex;align-items:stretch;width:100%;min-width:0;border:1px solid var(--ui-field-float-border);border-radius:var(--ui-field-float-border-radius);overflow:hidden;background:var(--field-background, var(--ui-field-float-bg));transition:border-color .1s ease,box-shadow .1s ease;contain:layout}.base-field:not(.base-field--invalid):not(.base-field--disabled):not(.base-field--readonly):not(:focus-within):hover .base-field__box{border-color:var(--ui-field-float-border-hover);box-shadow:none}.base-field--readonly:not(.base-field--disabled):not(.base-field--invalid):not(:focus-within):hover .base-field__box{border-color:var(--ui-field-readonly-border-hover);box-shadow:none}.base-field:not(.base-field--invalid):not(.base-field--disabled):not(.base-field--readonly) .base-field__box:focus-within{border-color:var(--ui-field-float-border-focus);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring)}.base-field--readonly:not(.base-field--disabled) .base-field__box{background:var(--ui-field-readonly-bg);border-color:var(--ui-field-readonly-border)}.base-field--readonly:not(.base-field--disabled):not(.base-field--invalid) .base-field__box:focus-within{border-color:var(--ui-field-readonly-border-focus);box-shadow:0 0 0 3px var(--ui-field-readonly-focus-ring)}.base-field--invalid .base-field__box{border-color:var(--ui-field-input-invalid-border);box-shadow:none;background:var(--ui-field-invalid-input-bg, #fef2f2)}.base-field--readonly.base-field--invalid:not(.base-field--disabled) .base-field__box{background:var(--ui-field-invalid-input-bg, #fef2f2)}.base-field--invalid:not(.base-field--disabled):not(.base-field--readonly) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.base-field--disabled .base-field__box{opacity:var(--ui-field-input-disabled-opacity)}.base-field__prefix{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding-left:.75rem;color:var(--ui-field-float-prefix-color);user-select:none;-webkit-user-select:none}.base-field__prefix:empty{display:none}.base-field__prefix-icon{font-style:normal;font-size:1rem;line-height:1;color:var(--ui-field-float-prefix-color)}.base-field__prefix-icon--loading-dim{opacity:.34;pointer-events:none}.base-field__suffix{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;gap:.125rem;padding-right:.4rem;padding-left:.1rem}.base-field__ctx-dropdown{display:inline-flex;flex-shrink:0;align-items:center;max-width:100%}.base-field__ctx-trigger{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.base-field__ctx-trigger:hover{background:var(--app-color-prefix-hover-bg, rgba(90, 127, 163, .15));color:var(--ui-field-float-label-top-color)}.base-field__ctx-trigger:focus,.base-field__ctx-trigger:focus-visible{outline:none}.base-field__clear{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;min-width:2rem;min-height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;line-height:0;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.base-field__clear:hover{background:var(--app-color-prefix-hover-bg, rgba(90, 127, 163, .15));color:var(--ui-field-float-label-top-color)}.base-field__clear:focus,.base-field__clear:focus-visible{outline:none}.base-field__clear-x{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;font-size:1.2rem;line-height:1;font-weight:300}.base-field--invalid .base-field__prefix,.base-field--invalid .base-field__prefix-icon{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__prefix-icon:before{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__suffix,.base-field--invalid .base-field__clear,.base-field--invalid .base-field__ctx-trigger{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__clear:hover,.base-field--invalid .base-field__ctx-trigger:hover{background:var(--app-color-error-bg-subtle, rgba(185, 28, 28, .12));color:var(--ui-field-float-label-invalid-color)}.base-field__field{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;contain:layout style}.base-field__float-label{position:absolute;left:.75rem;right:.75rem;top:.45rem;transform:translate3d(0,calc((1.8rem + 1.35em)/2 - .45rem - .6em),0) scale(1);transform-origin:left top;font-size:1rem;font-weight:var(--field-float-label-rest-weight, var(--structra-body-weight));line-height:1.2;color:var(--ui-field-float-label-color);pointer-events:none;user-select:none;-webkit-user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .11s cubic-bezier(.4,0,.2,1),color .11s ease}@media(prefers-reduced-motion:reduce){.base-field__float-label{transition:none}}.base-field__box:focus-within .base-field__float-label,.base-field--filled .base-field__float-label{transform:translateZ(0) scale(.75);font-weight:var(--field-label-weight, var(--structra-label-weight));color:var(--ui-field-float-label-top-color)}.base-field--invalid .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid.base-field--filled .base-field__float-label,.base-field--invalid .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field__required{color:var(--ui-field-required-mark-color);margin-left:.15rem}.base-field--invalid .base-field__required{color:var(--ui-field-float-label-invalid-color)}.base-field__control{display:block;width:100%;min-width:0}.base-field__suffix-reserve{display:block;flex-shrink:0;width:2rem;height:2rem;margin:0 .1rem;box-sizing:border-box}.base-field__control--value-end :where(input){text-align:right}.base-field--readonly:not(.base-field--disabled) .base-field__float-label{color:var(--ui-field-readonly-label-color)}.base-field--readonly.base-field--filled .base-field__float-label,.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-readonly-label-top-color)}.base-field--readonly:not(.base-field--disabled) .base-field__prefix,.base-field--readonly:not(.base-field--disabled) .base-field__prefix-icon{color:var(--ui-field-readonly-prefix-color)}.base-field--readonly:not(.base-field--disabled) .base-field__control :where(input,textarea){color:var(--ui-field-readonly-input-text)}.base-field--invalid.base-field--readonly .base-field__float-label,.base-field--invalid.base-field--readonly.base-field--filled .base-field__float-label,.base-field--invalid.base-field--readonly .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__prefix,.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__prefix-icon{color:var(--ui-field-float-label-invalid-color)}.base-field__error{margin:0;padding-left:.15rem;font-size:.75rem;font-weight:var(--field-helper-weight, var(--structra-body-weight));color:var(--ui-field-error-text-color);user-select:none;-webkit-user-select:none}@supports (-webkit-appearance: none){.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:hover,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:active,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;transition:background-color 50000s ease 0s!important}.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:hover,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:active,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;transition:background-color 50000s ease 0s!important}}.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:hover,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:focus{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;background-color:var(--ui-field-invalid-input-bg, #fef2f2)!important;transition:background-color 50000s ease 0s!important}.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill:hover,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill:focus{-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;background-color:var(--ui-field-readonly-bg)!important;transition:background-color 50000s ease 0s!important}\n"] }]
|
|
1627
|
+
args: [{ selector: 'app-base-field', imports: [SkeletonFieldShellComponent, DropdownMenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"base-field\" [class.base-field--invalid]=\"invalid\" [class.base-field--filled]=\"filled\"\n [class.base-field--disabled]=\"disabled\" [class.base-field--readonly]=\"readonly\"\n [class.base-field--loading]=\"loading\" [attr.aria-busy]=\"loading ? true : null\"\n [attr.aria-label]=\"loading && showFloatTpl ? label : null\">\n <div class=\"base-field__box\">\n <div class=\"base-field__prefix\">\n @if (!loading) {\n <ng-content select=\"[appFieldPrefix]\" />\n }\n @if (showFaTpl) {\n <i [attr.class]=\"prefixIconClassTpl + (loading ? ' base-field__prefix-icon--loading-dim' : '')\"\n aria-hidden=\"true\"></i>\n }\n </div>\n\n <div class=\"base-field__field\">\n @if (showFloatTpl && !loading) {\n <label class=\"base-field__float-label\" [attr.for]=\"inputId || null\">\n {{ label }}\n @if (required && showRequiredMark) {\n <span class=\"base-field__required\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n <div class=\"base-field__control\" [class.base-field__control--value-end]=\"valueAlignEnd\">\n @if (!loading) {\n <ng-content />\n } @else {\n <app-skeleton-field-shell [variant]=\"skeletonVariant\" [showLeadingIcon]=\"!showFaTpl\" />\n }\n </div>\n </div>\n\n @if (showSuffixTpl) {\n <div class=\"base-field__suffix\" [class.base-field__suffix--loading]=\"loading\">\n @if (!loading) {\n @if (showCtxMenuTpl) {\n <app-dropdown-menu\n class=\"base-field__ctx-dropdown\"\n [items]=\"contextMenuItems\"\n [minWidthPx]=\"200\"\n [matchTriggerWidth]=\"false\"\n [menuId]=\"resolvedContextMenuId\"\n (itemSelect)=\"onContextMenuItemSelect($event)\"\n >\n <button type=\"button\" class=\"base-field__ctx-trigger\" aria-label=\"Mais op\u00E7\u00F5es\" tabindex=\"-1\">\n <i class=\"fa-solid fa-ellipsis\" aria-hidden=\"true\"></i>\n </button>\n </app-dropdown-menu>\n }\n @if (showSuffixSlot) {\n <ng-content select=\"[appFieldSuffix]\" />\n }\n @if (showClearTpl) {\n <button type=\"button\" class=\"base-field__clear\" tabindex=\"-1\" [attr.aria-label]=\"clearAriaLabel\"\n (click)=\"onClearClick()\">\n <span class=\"base-field__clear-x\" aria-hidden=\"true\">×</span>\n </button>\n }\n } @else if (loading && showSuffixSlot) {\n <span class=\"base-field__suffix-reserve\" aria-hidden=\"true\"></span>\n }\n </div>\n }\n </div>\n\n @if (!loading && showErrorTpl) {\n <p class=\"base-field__error\" [id]=\"errorId || null\" role=\"alert\">\n {{ errorMessage }}\n </p>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box}.base-field{display:flex;flex-direction:column;gap:.35rem;width:100%;max-width:100%;box-sizing:border-box}.base-field--loading .base-field__box{pointer-events:none}.base-field--loading .base-field__field{justify-content:center}.base-field--loading .base-field__control{display:flex;align-items:center;width:100%;min-height:0}.base-field__box{display:flex;align-items:stretch;width:100%;min-width:0;border:1px solid var(--ui-field-float-border);border-radius:var(--ui-field-float-border-radius);overflow:hidden;background:var(--field-background, var(--ui-field-float-bg));transition:border-color .1s ease,box-shadow .1s ease;contain:layout}.base-field:not(.base-field--invalid):not(.base-field--disabled):not(.base-field--readonly):not(:focus-within):hover .base-field__box{border-color:var(--ui-field-float-border-hover);box-shadow:none}.base-field--readonly:not(.base-field--disabled):not(.base-field--invalid):not(:focus-within):hover .base-field__box{border-color:var(--ui-field-readonly-border-hover);box-shadow:none}.base-field:not(.base-field--invalid):not(.base-field--disabled):not(.base-field--readonly) .base-field__box:focus-within{border-color:var(--ui-field-float-border-focus);box-shadow:0 0 0 3px var(--ui-field-float-focus-ring)}.base-field--readonly:not(.base-field--disabled) .base-field__box{background:var(--ui-field-readonly-bg);border-color:var(--ui-field-readonly-border)}.base-field--readonly:not(.base-field--disabled):not(.base-field--invalid) .base-field__box:focus-within{border-color:var(--ui-field-readonly-border-focus);box-shadow:0 0 0 3px var(--ui-field-readonly-focus-ring)}.base-field--invalid .base-field__box{border-color:var(--ui-field-input-invalid-border);box-shadow:none;background:var(--ui-field-invalid-input-bg, #fef2f2)}.base-field--readonly.base-field--invalid:not(.base-field--disabled) .base-field__box{background:var(--ui-field-invalid-input-bg, #fef2f2)}.base-field--invalid:not(.base-field--disabled):not(.base-field--readonly) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within{border-color:var(--ui-field-input-invalid-border);box-shadow:0 0 0 3px var(--ui-field-input-invalid-focus-halo)}.base-field--disabled .base-field__box{opacity:var(--ui-field-input-disabled-opacity)}.base-field__prefix{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding-left:.75rem;color:var(--ui-field-float-prefix-color);user-select:none;-webkit-user-select:none}.base-field__prefix:empty{display:none}.base-field__prefix-icon{font-style:normal;font-size:1rem;line-height:1;color:var(--ui-field-float-prefix-color)}.base-field__prefix-icon--loading-dim{opacity:.34;pointer-events:none}.base-field__suffix{display:grid;grid-auto-flow:column;grid-auto-columns:auto;column-gap:.125rem;align-content:center;justify-content:end;justify-items:center;flex-shrink:0;padding-right:.4rem;padding-left:.1rem;min-height:0;align-self:stretch}.base-field__ctx-dropdown{display:inline-flex;flex-shrink:0;align-items:center;max-width:100%}.base-field__ctx-trigger{display:inline-grid;place-items:center;width:2rem;height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.base-field__ctx-trigger:hover{background:var(--app-color-prefix-hover-bg, rgba(90, 127, 163, .15));color:var(--ui-field-float-label-top-color)}.base-field__ctx-trigger:focus,.base-field__ctx-trigger:focus-visible{outline:none}.base-field__clear{display:inline-grid;place-items:center;width:2rem;height:2rem;min-width:2rem;min-height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;line-height:0;user-select:none;-webkit-user-select:none;transition:background .15s ease,color .15s ease}.base-field__clear:hover{background:var(--app-color-prefix-hover-bg, rgba(90, 127, 163, .15));color:var(--ui-field-float-label-top-color)}.base-field__clear:focus,.base-field__clear:focus-visible{outline:none}.base-field__clear-x{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;font-size:1.2rem;line-height:1;font-weight:300}.base-field--invalid .base-field__prefix,.base-field--invalid .base-field__prefix-icon{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__prefix-icon:before{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__suffix,.base-field--invalid .base-field__clear,.base-field--invalid .base-field__ctx-trigger{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid .base-field__clear:hover,.base-field--invalid .base-field__ctx-trigger:hover{background:var(--app-color-error-bg-subtle, rgba(185, 28, 28, .12));color:var(--ui-field-float-label-invalid-color)}.base-field__field{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;contain:layout style}.base-field__float-label{position:absolute;left:.75rem;right:.75rem;top:.45rem;transform:translate3d(0,calc((1.8rem + 1.35em)/2 - .45rem - .6em),0) scale(1);transform-origin:left top;font-size:1rem;font-weight:var(--field-float-label-rest-weight, var(--structra-body-weight));line-height:1.2;color:var(--ui-field-float-label-color);pointer-events:none;user-select:none;-webkit-user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .11s cubic-bezier(.4,0,.2,1),color .11s ease}@media(prefers-reduced-motion:reduce){.base-field__float-label{transition:none}}.base-field__box:focus-within .base-field__float-label,.base-field--filled .base-field__float-label{transform:translateZ(0) scale(.75);font-weight:var(--field-label-weight, var(--structra-label-weight));color:var(--ui-field-float-label-top-color)}.base-field--invalid .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid.base-field--filled .base-field__float-label,.base-field--invalid .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field__required{color:var(--ui-field-required-mark-color);margin-left:.15rem}.base-field--invalid .base-field__required{color:var(--ui-field-float-label-invalid-color)}.base-field__control{display:block;width:100%;min-width:0}.base-field__suffix-reserve{display:block;flex-shrink:0;width:2rem;height:2rem;margin:0 .1rem;box-sizing:border-box}.base-field__control--value-end :where(input){text-align:right}.base-field--readonly:not(.base-field--disabled) .base-field__float-label{color:var(--ui-field-readonly-label-color)}.base-field--readonly.base-field--filled .base-field__float-label,.base-field--readonly:not(.base-field--disabled) .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-readonly-label-top-color)}.base-field--readonly:not(.base-field--disabled) .base-field__prefix,.base-field--readonly:not(.base-field--disabled) .base-field__prefix-icon{color:var(--ui-field-readonly-prefix-color)}.base-field--readonly:not(.base-field--disabled) .base-field__control :where(input,textarea){color:var(--ui-field-readonly-input-text)}.base-field--invalid.base-field--readonly .base-field__float-label,.base-field--invalid.base-field--readonly.base-field--filled .base-field__float-label,.base-field--invalid.base-field--readonly .base-field__box:focus-within .base-field__float-label{color:var(--ui-field-float-label-invalid-color)}.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__prefix,.base-field--invalid.base-field--readonly:not(.base-field--disabled) .base-field__prefix-icon{color:var(--ui-field-float-label-invalid-color)}.base-field__error{margin:0;padding-left:.15rem;font-size:.75rem;font-weight:var(--field-helper-weight, var(--structra-body-weight));color:var(--ui-field-error-text-color);user-select:none;-webkit-user-select:none}@supports (-webkit-appearance: none){.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:hover,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:active,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;transition:background-color 50000s ease 0s!important}.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:hover,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:active,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):-webkit-autofill:focus-visible{-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;transition:background-color 50000s ease 0s!important}}.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:hover,.base-field--invalid:not(.base-field--readonly) .base-field__control ::ng-deep :where(input,textarea):autofill:focus{-webkit-text-fill-color:var(--ui-field-float-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;box-shadow:0 0 0 1000px var(--ui-field-invalid-input-bg, #fef2f2) inset!important;background-color:var(--ui-field-invalid-input-bg, #fef2f2)!important;transition:background-color 50000s ease 0s!important}.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill:hover,.base-field--readonly:not(.base-field--disabled) .base-field__control ::ng-deep :where(input,textarea):autofill:focus{-webkit-text-fill-color:var(--ui-field-readonly-input-text)!important;-webkit-box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;box-shadow:0 0 0 1000px var(--ui-field-readonly-bg) inset!important;background-color:var(--ui-field-readonly-bg)!important;transition:background-color 50000s ease 0s!important}\n"] }]
|
|
1628
1628
|
}], propDecorators: { label: [{
|
|
1629
1629
|
type: Input
|
|
1630
1630
|
}], errorMessage: [{
|
|
@@ -1988,7 +1988,7 @@ class PasswordFieldComponent extends NgControlFieldDirective {
|
|
|
1988
1988
|
useExisting: forwardRef(() => PasswordFieldComponent),
|
|
1989
1989
|
multi: true,
|
|
1990
1990
|
},
|
|
1991
|
-
], usesInheritance: true, ngImport: i0, 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;font-weight:var(--field-value-weight, var(--structra-body-weight));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:inline-
|
|
1991
|
+
], usesInheritance: true, ngImport: i0, 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;font-weight:var(--field-value-weight, var(--structra-body-weight));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:inline-grid;place-items:center;width:2rem;height:2rem;min-width:2rem;min-height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;line-height:0;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{display:block;width:1.25rem;height:1.25rem;font-size:1rem;line-height:1;text-align:center}.password-field__toggle i:before{display:block;line-height:1.24rem}: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"], dependencies: [{ kind: "component", type: BaseFieldComponent, selector: "app-base-field", inputs: ["label", "errorMessage", "required", "showRequiredMark", "invalid", "filled", "disabled", "readonly", "inputId", "errorId", "showPrefixIcon", "prefixIcon", "clearable", "clearAriaLabel", "showSuffixSlot", "valueAlignEnd", "loading", "skeletonVariant", "mostrarMenuContexto", "contextMenuItems", "contextMenuId"], outputs: ["clear", "contextMenuSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1992
1992
|
}
|
|
1993
1993
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PasswordFieldComponent, decorators: [{
|
|
1994
1994
|
type: Component,
|
|
@@ -1998,7 +1998,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1998
1998
|
useExisting: forwardRef(() => PasswordFieldComponent),
|
|
1999
1999
|
multi: true,
|
|
2000
2000
|
},
|
|
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;font-weight:var(--field-value-weight, var(--structra-body-weight));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:inline-
|
|
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;font-weight:var(--field-value-weight, var(--structra-body-weight));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:inline-grid;place-items:center;width:2rem;height:2rem;min-width:2rem;min-height:2rem;margin:0;padding:0;border:none;border-radius:8px;background:transparent;color:var(--ui-field-float-prefix-color);cursor:pointer;line-height:0;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{display:block;width:1.25rem;height:1.25rem;font-size:1rem;line-height:1;text-align:center}.password-field__toggle i:before{display:block;line-height:1.24rem}: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"] }]
|
|
2002
2002
|
}], propDecorators: { showPrefixIcon: [{
|
|
2003
2003
|
type: Input,
|
|
2004
2004
|
args: [{ transform: booleanAttribute }]
|