@raintonic/formaui 0.3.0 → 0.3.1
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/raintonic-formaui-components-checkbox.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-checkbox.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-form-field.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-form-field.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-radio.mjs +6 -5
- package/fesm2022/raintonic-formaui-components-radio.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tooltip.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-tooltip.mjs.map +1 -1
- package/fesm2022/raintonic-formaui.mjs +1 -1
- package/fesm2022/raintonic-formaui.mjs.map +1 -1
- package/llms-full.txt +1 -0
- package/package.json +1 -1
- package/types/raintonic-formaui-components-radio.d.ts +2 -1
- package/types/raintonic-formaui-components-radio.d.ts.map +1 -1
- package/types/raintonic-formaui.d.ts +1 -1
|
@@ -263,7 +263,7 @@ class FuiCheckboxComponent {
|
|
|
263
263
|
useExisting: FuiCheckboxComponent,
|
|
264
264
|
multi: true,
|
|
265
265
|
},
|
|
266
|
-
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<label class=\"fui-checkbox__container\" [attr.for]=\"inputId\">\r\n <span class=\"fui-checkbox__frame\">\r\n <input\r\n #inputElement\r\n type=\"checkbox\"\r\n class=\"fui-checkbox__native-control\"\r\n [id]=\"inputId\"\r\n [name]=\"name()\"\r\n [value]=\"value()\"\r\n [checked]=\"checked()\"\r\n [disabled]=\"disabled()\"\r\n [required]=\"required()\"\r\n [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [attr.aria-labelledby]=\"ariaLabelledby()\"\r\n [attr.aria-describedby]=\"ariaDescribedby()\"\r\n [attr.aria-invalid]=\"errorState() ? 'true' : null\"\r\n [attr.aria-required]=\"required() ? 'true' : null\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n (change)=\"onInputChange($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n\r\n <span class=\"fui-checkbox__checkmark\">\r\n @if (checked() && !indeterminate()) {\r\n <svg\r\n class=\"fui-checkbox__checkmark-icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"3\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n aria-hidden=\"true\"\r\n >\r\n <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n </svg>\r\n }\r\n\r\n @if (indeterminate()) {\r\n <svg\r\n class=\"fui-checkbox__indeterminate-icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"3\"\r\n stroke-linecap=\"round\"\r\n aria-hidden=\"true\"\r\n >\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\r\n </svg>\r\n }\r\n </span>\r\n\r\n @if (!disableRipple() && !disabled()) {\r\n <span class=\"fui-checkbox__ripple\"></span>\r\n }\r\n </span>\r\n\r\n <span class=\"fui-checkbox__label\">\r\n <ng-content></ng-content>\r\n </span>\r\n</label>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-checkbox{--fui-checkbox-size: 1.125rem;--fui-checkbox-border-width:
|
|
266
|
+
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<label class=\"fui-checkbox__container\" [attr.for]=\"inputId\">\r\n <span class=\"fui-checkbox__frame\">\r\n <input\r\n #inputElement\r\n type=\"checkbox\"\r\n class=\"fui-checkbox__native-control\"\r\n [id]=\"inputId\"\r\n [name]=\"name()\"\r\n [value]=\"value()\"\r\n [checked]=\"checked()\"\r\n [disabled]=\"disabled()\"\r\n [required]=\"required()\"\r\n [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [attr.aria-labelledby]=\"ariaLabelledby()\"\r\n [attr.aria-describedby]=\"ariaDescribedby()\"\r\n [attr.aria-invalid]=\"errorState() ? 'true' : null\"\r\n [attr.aria-required]=\"required() ? 'true' : null\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n (change)=\"onInputChange($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n\r\n <span class=\"fui-checkbox__checkmark\">\r\n @if (checked() && !indeterminate()) {\r\n <svg\r\n class=\"fui-checkbox__checkmark-icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"3\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n aria-hidden=\"true\"\r\n >\r\n <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n </svg>\r\n }\r\n\r\n @if (indeterminate()) {\r\n <svg\r\n class=\"fui-checkbox__indeterminate-icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"3\"\r\n stroke-linecap=\"round\"\r\n aria-hidden=\"true\"\r\n >\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\r\n </svg>\r\n }\r\n </span>\r\n\r\n @if (!disableRipple() && !disabled()) {\r\n <span class=\"fui-checkbox__ripple\"></span>\r\n }\r\n </span>\r\n\r\n <span class=\"fui-checkbox__label\">\r\n <ng-content></ng-content>\r\n </span>\r\n</label>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-checkbox{--fui-checkbox-size: 1.125rem;--fui-checkbox-border-width: 1px;--fui-checkbox-border-radius: var(--fui-border-radius-xs);--fui-checkbox-active-bg: var(--fui-white);--fui-checkbox-border-color: var(--fui-border-color);--fui-checkbox-checked-bg: var(--fui-primary-30);--fui-checkbox-checked-color: var(--fui-primary);--fui-checkbox-label-gap: var(--fui-spacing-03);--fui-checkbox-label-font-size: var(--fui-font-size-02);--fui-checkbox-ripple-size: 2.5rem;display:inline-flex;align-items:flex-start;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle}.fui-checkbox__container{display:inline-flex;align-items:center;cursor:inherit;gap:var(--fui-checkbox-label-gap);width:100%}.fui-checkbox__frame{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--fui-checkbox-size);height:var(--fui-checkbox-size)}.fui-checkbox__native-control{position:absolute;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:inherit;z-index:1}.fui-checkbox__native-control:focus-visible+.fui-checkbox__checkmark{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-checkbox__checkmark{display:flex;align-items:center;justify-content:center;width:var(--fui-checkbox-size);height:var(--fui-checkbox-size);border:var(--fui-checkbox-border-width) solid var(--fui-checkbox-border-color);border-radius:var(--fui-checkbox-border-radius);background-color:var(--fui-checkbox-active-bg);transition:background-color,border-color,transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-checkbox__checkmark:hover{border-color:var(--fui-primary)}.fui-checkbox__checkmark-icon,.fui-checkbox__indeterminate-icon{width:.75rem;height:.75rem;color:var(--fui-checkbox-checked-color);opacity:0;transform:scale(.5);transition:opacity,transform var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-checkbox__label{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:1.5;color:var(--fui-text-primary);cursor:inherit}.fui-checkbox__ripple{position:absolute;top:50%;left:50%;width:calc(var(--fui-checkbox-size) * 1.3);height:calc(var(--fui-checkbox-size) * 1.3);transform:translate(-50%,-50%);border-radius:var(--fui-checkbox-border-radius);background-color:var(--fui-checkbox-border-color);opacity:0;z-index:-1;pointer-events:none;transition:opacity,transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-checkbox:not(.fui-checkbox--disabled):hover .fui-checkbox__checkmark{border-color:var(--fui-primary-hover)}.fui-checkbox:not(.fui-checkbox--disabled):hover .fui-checkbox__ripple{opacity:.8}.fui-checkbox--focused:not(.fui-checkbox--disabled) .fui-checkbox__ripple{opacity:.08}.fui-checkbox--checked .fui-checkbox__checkmark{background-color:var(--fui-checkbox-checked-bg);border-color:var(--fui-checkbox-checked-color)}.fui-checkbox--checked .fui-checkbox__checkmark-icon{opacity:1;transform:scale(1)}.fui-checkbox--indeterminate .fui-checkbox__checkmark{background-color:var(--fui-checkbox-checked-bg);border-color:var(--fui-checkbox-checked-color)}.fui-checkbox--indeterminate .fui-checkbox__indeterminate-icon{opacity:1;transform:scale(1)}.fui-checkbox--disabled{cursor:not-allowed;opacity:var(--fui-opacity-disabled)}.fui-checkbox--disabled .fui-checkbox__checkmark{border-color:var(--fui-text-disabled);background-color:transparent}.fui-checkbox--disabled.fui-checkbox--checked .fui-checkbox__checkmark,.fui-checkbox--disabled.fui-checkbox--indeterminate .fui-checkbox__checkmark{background-color:var(--fui-text-disabled);border-color:var(--fui-text-disabled)}.fui-checkbox--disabled .fui-checkbox__checkmark-icon{color:var(--fui-white)}.fui-checkbox--disabled .fui-checkbox__label{color:var(--fui-text-disabled)}.fui-checkbox--disabled .fui-checkbox__ripple{display:none}.fui-checkbox--readonly{cursor:default;pointer-events:none}.fui-checkbox--readonly .fui-checkbox__label{color:var(--fui-text-secondary)}.fui-checkbox--readonly .fui-checkbox__ripple{display:none}.fui-checkbox--error .fui-checkbox__checkmark{border-color:var(--fui-state-error)}.fui-checkbox--error.fui-checkbox--checked .fui-checkbox__checkmark,.fui-checkbox--error.fui-checkbox--indeterminate .fui-checkbox__checkmark{background-color:var(--fui-state-error);border-color:var(--fui-state-error)}.fui-checkbox--error .fui-checkbox__label{color:var(--fui-state-error)}.fui-checkbox--label-before .fui-checkbox__container{flex-direction:row-reverse;justify-content:flex-end}@media(prefers-contrast:high){.fui-checkbox__checkmark{border-width:3px}.fui-checkbox__native-control:focus-visible+.fui-checkbox__checkmark{outline-width:3px}}@media(prefers-reduced-motion:reduce){.fui-checkbox__checkmark,.fui-checkbox__checkmark-icon,.fui-checkbox__indeterminate-icon,.fui-checkbox__ripple{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
267
267
|
}
|
|
268
268
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiCheckboxComponent, decorators: [{
|
|
269
269
|
type: Component,
|
|
@@ -284,7 +284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
284
284
|
useExisting: FuiCheckboxComponent,
|
|
285
285
|
multi: true,
|
|
286
286
|
},
|
|
287
|
-
], template: "<label class=\"fui-checkbox__container\" [attr.for]=\"inputId\">\r\n <span class=\"fui-checkbox__frame\">\r\n <input\r\n #inputElement\r\n type=\"checkbox\"\r\n class=\"fui-checkbox__native-control\"\r\n [id]=\"inputId\"\r\n [name]=\"name()\"\r\n [value]=\"value()\"\r\n [checked]=\"checked()\"\r\n [disabled]=\"disabled()\"\r\n [required]=\"required()\"\r\n [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [attr.aria-labelledby]=\"ariaLabelledby()\"\r\n [attr.aria-describedby]=\"ariaDescribedby()\"\r\n [attr.aria-invalid]=\"errorState() ? 'true' : null\"\r\n [attr.aria-required]=\"required() ? 'true' : null\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n (change)=\"onInputChange($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n\r\n <span class=\"fui-checkbox__checkmark\">\r\n @if (checked() && !indeterminate()) {\r\n <svg\r\n class=\"fui-checkbox__checkmark-icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"3\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n aria-hidden=\"true\"\r\n >\r\n <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n </svg>\r\n }\r\n\r\n @if (indeterminate()) {\r\n <svg\r\n class=\"fui-checkbox__indeterminate-icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"3\"\r\n stroke-linecap=\"round\"\r\n aria-hidden=\"true\"\r\n >\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\r\n </svg>\r\n }\r\n </span>\r\n\r\n @if (!disableRipple() && !disabled()) {\r\n <span class=\"fui-checkbox__ripple\"></span>\r\n }\r\n </span>\r\n\r\n <span class=\"fui-checkbox__label\">\r\n <ng-content></ng-content>\r\n </span>\r\n</label>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-checkbox{--fui-checkbox-size: 1.125rem;--fui-checkbox-border-width:
|
|
287
|
+
], template: "<label class=\"fui-checkbox__container\" [attr.for]=\"inputId\">\r\n <span class=\"fui-checkbox__frame\">\r\n <input\r\n #inputElement\r\n type=\"checkbox\"\r\n class=\"fui-checkbox__native-control\"\r\n [id]=\"inputId\"\r\n [name]=\"name()\"\r\n [value]=\"value()\"\r\n [checked]=\"checked()\"\r\n [disabled]=\"disabled()\"\r\n [required]=\"required()\"\r\n [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [attr.aria-labelledby]=\"ariaLabelledby()\"\r\n [attr.aria-describedby]=\"ariaDescribedby()\"\r\n [attr.aria-invalid]=\"errorState() ? 'true' : null\"\r\n [attr.aria-required]=\"required() ? 'true' : null\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n (change)=\"onInputChange($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n\r\n <span class=\"fui-checkbox__checkmark\">\r\n @if (checked() && !indeterminate()) {\r\n <svg\r\n class=\"fui-checkbox__checkmark-icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"3\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n aria-hidden=\"true\"\r\n >\r\n <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n </svg>\r\n }\r\n\r\n @if (indeterminate()) {\r\n <svg\r\n class=\"fui-checkbox__indeterminate-icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"3\"\r\n stroke-linecap=\"round\"\r\n aria-hidden=\"true\"\r\n >\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\r\n </svg>\r\n }\r\n </span>\r\n\r\n @if (!disableRipple() && !disabled()) {\r\n <span class=\"fui-checkbox__ripple\"></span>\r\n }\r\n </span>\r\n\r\n <span class=\"fui-checkbox__label\">\r\n <ng-content></ng-content>\r\n </span>\r\n</label>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-checkbox{--fui-checkbox-size: 1.125rem;--fui-checkbox-border-width: 1px;--fui-checkbox-border-radius: var(--fui-border-radius-xs);--fui-checkbox-active-bg: var(--fui-white);--fui-checkbox-border-color: var(--fui-border-color);--fui-checkbox-checked-bg: var(--fui-primary-30);--fui-checkbox-checked-color: var(--fui-primary);--fui-checkbox-label-gap: var(--fui-spacing-03);--fui-checkbox-label-font-size: var(--fui-font-size-02);--fui-checkbox-ripple-size: 2.5rem;display:inline-flex;align-items:flex-start;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle}.fui-checkbox__container{display:inline-flex;align-items:center;cursor:inherit;gap:var(--fui-checkbox-label-gap);width:100%}.fui-checkbox__frame{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--fui-checkbox-size);height:var(--fui-checkbox-size)}.fui-checkbox__native-control{position:absolute;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:inherit;z-index:1}.fui-checkbox__native-control:focus-visible+.fui-checkbox__checkmark{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-checkbox__checkmark{display:flex;align-items:center;justify-content:center;width:var(--fui-checkbox-size);height:var(--fui-checkbox-size);border:var(--fui-checkbox-border-width) solid var(--fui-checkbox-border-color);border-radius:var(--fui-checkbox-border-radius);background-color:var(--fui-checkbox-active-bg);transition:background-color,border-color,transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-checkbox__checkmark:hover{border-color:var(--fui-primary)}.fui-checkbox__checkmark-icon,.fui-checkbox__indeterminate-icon{width:.75rem;height:.75rem;color:var(--fui-checkbox-checked-color);opacity:0;transform:scale(.5);transition:opacity,transform var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-checkbox__label{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:1.5;color:var(--fui-text-primary);cursor:inherit}.fui-checkbox__ripple{position:absolute;top:50%;left:50%;width:calc(var(--fui-checkbox-size) * 1.3);height:calc(var(--fui-checkbox-size) * 1.3);transform:translate(-50%,-50%);border-radius:var(--fui-checkbox-border-radius);background-color:var(--fui-checkbox-border-color);opacity:0;z-index:-1;pointer-events:none;transition:opacity,transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-checkbox:not(.fui-checkbox--disabled):hover .fui-checkbox__checkmark{border-color:var(--fui-primary-hover)}.fui-checkbox:not(.fui-checkbox--disabled):hover .fui-checkbox__ripple{opacity:.8}.fui-checkbox--focused:not(.fui-checkbox--disabled) .fui-checkbox__ripple{opacity:.08}.fui-checkbox--checked .fui-checkbox__checkmark{background-color:var(--fui-checkbox-checked-bg);border-color:var(--fui-checkbox-checked-color)}.fui-checkbox--checked .fui-checkbox__checkmark-icon{opacity:1;transform:scale(1)}.fui-checkbox--indeterminate .fui-checkbox__checkmark{background-color:var(--fui-checkbox-checked-bg);border-color:var(--fui-checkbox-checked-color)}.fui-checkbox--indeterminate .fui-checkbox__indeterminate-icon{opacity:1;transform:scale(1)}.fui-checkbox--disabled{cursor:not-allowed;opacity:var(--fui-opacity-disabled)}.fui-checkbox--disabled .fui-checkbox__checkmark{border-color:var(--fui-text-disabled);background-color:transparent}.fui-checkbox--disabled.fui-checkbox--checked .fui-checkbox__checkmark,.fui-checkbox--disabled.fui-checkbox--indeterminate .fui-checkbox__checkmark{background-color:var(--fui-text-disabled);border-color:var(--fui-text-disabled)}.fui-checkbox--disabled .fui-checkbox__checkmark-icon{color:var(--fui-white)}.fui-checkbox--disabled .fui-checkbox__label{color:var(--fui-text-disabled)}.fui-checkbox--disabled .fui-checkbox__ripple{display:none}.fui-checkbox--readonly{cursor:default;pointer-events:none}.fui-checkbox--readonly .fui-checkbox__label{color:var(--fui-text-secondary)}.fui-checkbox--readonly .fui-checkbox__ripple{display:none}.fui-checkbox--error .fui-checkbox__checkmark{border-color:var(--fui-state-error)}.fui-checkbox--error.fui-checkbox--checked .fui-checkbox__checkmark,.fui-checkbox--error.fui-checkbox--indeterminate .fui-checkbox__checkmark{background-color:var(--fui-state-error);border-color:var(--fui-state-error)}.fui-checkbox--error .fui-checkbox__label{color:var(--fui-state-error)}.fui-checkbox--label-before .fui-checkbox__container{flex-direction:row-reverse;justify-content:flex-end}@media(prefers-contrast:high){.fui-checkbox__checkmark{border-width:3px}.fui-checkbox__native-control:focus-visible+.fui-checkbox__checkmark{outline-width:3px}}@media(prefers-reduced-motion:reduce){.fui-checkbox__checkmark,.fui-checkbox__checkmark-icon,.fui-checkbox__indeterminate-icon,.fui-checkbox__ripple{transition:none}}\n"] }]
|
|
288
288
|
}], ctorParameters: () => [], propDecorators: { readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], checkedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminateInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], disableRipple: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRipple", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], indeterminateChange: [{ type: i0.Output, args: ["indeterminateChange"] }], inputElement: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }] } });
|
|
289
289
|
|
|
290
290
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"raintonic-formaui-components-checkbox.mjs","sources":["../../../lib/components/checkbox/checkbox.component.ts","../../../lib/components/checkbox/checkbox.component.html","../../../lib/components/checkbox/raintonic-formaui-components-checkbox.ts"],"sourcesContent":["import {\r\n Component,\r\n ChangeDetectionStrategy,\r\n ViewEncapsulation,\r\n input,\r\n output,\r\n computed,\r\n signal,\r\n viewChild,\r\n ElementRef,\r\n OutputEmitterRef,\r\n Signal,\r\n WritableSignal,\r\n OnDestroy,\r\n DoCheck,\r\n inject,\r\n effect,\r\n booleanAttribute,\r\n} from '@angular/core';\r\n\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, FormGroupDirective, NgForm } from '@angular/forms';\r\nimport { Subject } from 'rxjs';\r\nimport { DefaultErrorStateMatcher, ErrorStateMatcher } from '@raintonic/formaui/core';\r\nimport { injectNgControl, updateErrorState, syncRequiredState, syncNgControlDisabled } from '@raintonic/formaui/cdk/form-field';\r\n\r\n/**\r\n * Checkbox label position\r\n */\r\nexport type FuiCheckboxLabelPosition = 'before' | 'after';\r\n\r\n/**\r\n * Checkbox change event interface (compatible with MatCheckboxChange)\r\n */\r\nexport interface FuiCheckboxChange {\r\n /** The source checkbox of the event. */\r\n source: FuiCheckboxComponent;\r\n /** The new `checked` value of the checkbox. */\r\n checked: boolean;\r\n}\r\n\r\n/**\r\n * # FuiCheckbox Component\r\n *\r\n * A checkbox component with full Angular Reactive Forms support.\r\n * Compatible with Angular Material's mat-checkbox interface.\r\n *\r\n * ## Features\r\n * - Full Reactive Forms integration (ControlValueAccessor)\r\n * - Indeterminate state support\r\n * - Label position configuration (before/after)\r\n * - Built-in validation and error display\r\n * - Disabled state\r\n * - Full accessibility support (ARIA)\r\n * - Compatible with mat-checkbox interface\r\n *\r\n * ## Usage\r\n *\r\n * ### Basic Checkbox\r\n * ```html\r\n * <fui-checkbox>Accept terms</fui-checkbox>\r\n * ```\r\n *\r\n * ### With Reactive Forms\r\n * ```html\r\n * <form [formGroup]=\"form\">\r\n * <fui-checkbox formControlName=\"acceptTerms\">\r\n * I accept the terms and conditions\r\n * </fui-checkbox>\r\n * </form>\r\n * ```\r\n *\r\n * ### Indeterminate State\r\n * ```html\r\n * <fui-checkbox [indeterminate]=\"true\">\r\n * Select all\r\n * </fui-checkbox>\r\n * ```\r\n *\r\n * ### Label Position\r\n * ```html\r\n * <fui-checkbox labelPosition=\"before\">\r\n * Label before checkbox\r\n * </fui-checkbox>\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-checkbox',\r\n standalone: true,\r\n imports: [],\r\n templateUrl: './checkbox.component.html',\r\n styleUrls: ['./checkbox.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-checkbox',\r\n '[class.fui-checkbox--checked]': 'checked()',\r\n '[class.fui-checkbox--disabled]': 'disabled() && !readonlyInput()',\r\n '[class.fui-checkbox--readonly]': 'readonlyInput()',\r\n '[class.fui-checkbox--indeterminate]': 'indeterminate()',\r\n '[class.fui-checkbox--label-before]': 'labelPosition() === \"before\"',\r\n '[class.fui-checkbox--focused]': 'focused()',\r\n '[class.fui-checkbox--error]': 'errorState()',\r\n '[attr.id]': 'id',\r\n '[attr.tabindex]': 'null',\r\n },\r\n providers: [\r\n {\r\n provide: NG_VALUE_ACCESSOR,\r\n useExisting: FuiCheckboxComponent,\r\n multi: true,\r\n },\r\n ],\r\n})\r\nexport class FuiCheckboxComponent implements ControlValueAccessor, DoCheck, OnDestroy {\r\n // Static properties\r\n static nextId = 0;\r\n readonly controlType = 'fui-checkbox';\r\n\r\n // Inputs using new signal-based API (mat-checkbox compatible)\r\n readonly readonlyInput = input<boolean, unknown>(false, {\r\n alias: 'readonly',\r\n transform: booleanAttribute,\r\n });\r\n readonly checkedInput = input<boolean, unknown>(false, {\r\n alias: 'checked',\r\n transform: booleanAttribute,\r\n });\r\n readonly disabledInput = input<boolean, unknown>(false, {\r\n alias: 'disabled',\r\n transform: booleanAttribute,\r\n });\r\n readonly indeterminateInput = input<boolean, unknown>(false, {\r\n alias: 'indeterminate',\r\n transform: booleanAttribute,\r\n });\r\n readonly requiredInput = input<boolean, unknown>(false, {\r\n alias: 'required',\r\n transform: booleanAttribute,\r\n });\r\n readonly labelPosition = input<FuiCheckboxLabelPosition>('after');\r\n readonly name = input<string | null>(null);\r\n readonly value = input('on');\r\n readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });\r\n readonly ariaLabelledby = input<string | null>(null, { alias: 'aria-labelledby' });\r\n readonly ariaDescribedby = input<string | null>(null, { alias: 'aria-describedby' });\r\n readonly disableRipple = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n readonly tabIndex = input(0);\r\n readonly errorStateMatcher = input<ErrorStateMatcher | null>(null);\r\n\r\n // Outputs (mat-checkbox compatible)\r\n readonly change: OutputEmitterRef<FuiCheckboxChange> = output<FuiCheckboxChange>();\r\n readonly indeterminateChange: OutputEmitterRef<boolean> = output<boolean>();\r\n\r\n // Internal state signals - single source of truth like mat-checkbox\r\n private readonly _checked: WritableSignal<boolean> = signal(false);\r\n private readonly _indeterminate: WritableSignal<boolean> = signal(false);\r\n private readonly _focused: WritableSignal<boolean> = signal(false);\r\n private readonly _disabled: WritableSignal<boolean> = signal(false);\r\n\r\n // Public signals - expose internal state as readonly\r\n readonly checked: Signal<boolean> = this._checked.asReadonly();\r\n readonly indeterminate: Signal<boolean> = this._indeterminate.asReadonly();\r\n readonly focused: Signal<boolean> = this._focused.asReadonly();\r\n\r\n // State changes subject for form field compatibility\r\n readonly stateChanges = new Subject<void>();\r\n private _uid = `fui-checkbox-${FuiCheckboxComponent.nextId++}`;\r\n readonly id = this._uid;\r\n readonly inputId = `${this._uid}-input`;\r\n\r\n // Error state\r\n private readonly _errorState: WritableSignal<boolean> = signal(false);\r\n readonly errorState = this._errorState.asReadonly();\r\n\r\n // Form control references\r\n private _parentForm = inject(NgForm, { optional: true });\r\n private _parentFormGroup = inject(FormGroupDirective, { optional: true });\r\n private _defaultErrorStateMatcher = inject(DefaultErrorStateMatcher);\r\n private readonly _ngControlRef = injectNgControl();\r\n\r\n get ngControl(): NgControl | null {\r\n return this._ngControlRef.ngControl;\r\n }\r\n\r\n // Required signal\r\n private readonly _required: WritableSignal<boolean> = signal(false);\r\n readonly required: Signal<boolean> = computed(() => this._required() || this.requiredInput());\r\n\r\n // NgControl disabled state\r\n private readonly _ngControlDisabled: WritableSignal<boolean> = signal(false);\r\n readonly disabled: Signal<boolean> = computed(\r\n () => this._disabled() || this.disabledInput() || this._ngControlDisabled(),\r\n );\r\n\r\n // ViewChild for input element\r\n readonly inputElement: Signal<ElementRef<HTMLInputElement> | undefined> =\r\n viewChild<ElementRef<HTMLInputElement>>('inputElement');\r\n\r\n // ControlValueAccessor callbacks\r\n private _onChange: (value: boolean) => void = () => {\r\n // Intentionally empty: will be replaced by Angular forms\r\n };\r\n private _onTouched: () => void = () => {\r\n // Intentionally empty: will be replaced by Angular forms\r\n };\r\n\r\n // Track if writeValue has been called by a form control\r\n private _formControlInitialized = false;\r\n\r\n constructor() {\r\n // Set valueAccessor after NgControl is resolved\r\n void Promise.resolve().then(() => {\r\n if (this._ngControlRef.ngControl) {\r\n this._ngControlRef.ngControl.valueAccessor = this;\r\n }\r\n });\r\n\r\n // Effect to sync checked input to internal state (like mat-checkbox @Input setter)\r\n // This allows [checked]=\"value\" to work, but form controls take precedence via writeValue\r\n effect(() => {\r\n const inputChecked = this.checkedInput();\r\n // Only apply input value if form control hasn't initialized with writeValue\r\n if (!this._formControlInitialized) {\r\n this._checked.set(inputChecked);\r\n }\r\n });\r\n\r\n // Effect to sync indeterminate input to internal state\r\n effect(() => {\r\n const inputIndeterminate = this.indeterminateInput();\r\n this._indeterminate.set(inputIndeterminate);\r\n });\r\n\r\n // Effect to emit state changes\r\n effect(() => {\r\n // Track all reactive inputs and internal signals\r\n this.checkedInput();\r\n this.disabledInput();\r\n this.indeterminateInput();\r\n this.requiredInput();\r\n this.labelPosition();\r\n this.name();\r\n this.value();\r\n this.errorStateMatcher();\r\n this._checked();\r\n this._indeterminate();\r\n this._focused();\r\n this._disabled();\r\n this._ngControlDisabled();\r\n this._required();\r\n this._errorState();\r\n\r\n // Emit state change\r\n this.stateChanges.next();\r\n });\r\n }\r\n\r\n ngDoCheck(): void {\r\n if (this.ngControl) {\r\n updateErrorState(\r\n this.ngControl,\r\n this._errorState,\r\n this.errorStateMatcher(),\r\n this._defaultErrorStateMatcher,\r\n this._parentForm,\r\n this._parentFormGroup,\r\n this.stateChanges,\r\n );\r\n syncRequiredState(this.ngControl, this._required, this.stateChanges);\r\n syncNgControlDisabled(this.ngControl, this._ngControlDisabled, this.stateChanges);\r\n }\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.stateChanges.complete();\r\n }\r\n\r\n // ControlValueAccessor implementation\r\n writeValue(value: boolean): void {\r\n this._formControlInitialized = true;\r\n this._checked.set(value);\r\n this.stateChanges.next();\r\n }\r\n\r\n registerOnChange(fn: (value: boolean) => void): void {\r\n this._onChange = fn;\r\n }\r\n\r\n registerOnTouched(fn: () => void): void {\r\n this._onTouched = fn;\r\n }\r\n\r\n setDisabledState(isDisabled: boolean): void {\r\n this._disabled.set(isDisabled);\r\n this.stateChanges.next();\r\n }\r\n\r\n // Event handlers\r\n onInputChange(event: Event): void {\r\n event.stopPropagation();\r\n\r\n if (this.disabled()) {\r\n return;\r\n }\r\n\r\n // Read the new checked state from the native input element\r\n const target = event.target as HTMLInputElement;\r\n const newChecked = target.checked;\r\n\r\n // Update internal state\r\n this._checked.set(newChecked);\r\n\r\n // Clear indeterminate when checking/unchecking\r\n if (this._indeterminate()) {\r\n this._indeterminate.set(false);\r\n this.indeterminateChange.emit(false);\r\n }\r\n\r\n // Emit change events (this updates the form control)\r\n this._onChange(newChecked);\r\n this.change.emit({\r\n source: this,\r\n checked: newChecked,\r\n });\r\n this.stateChanges.next();\r\n }\r\n\r\n onFocus(): void {\r\n if (!this._focused()) {\r\n this._focused.set(true);\r\n this.stateChanges.next();\r\n }\r\n }\r\n\r\n onBlur(): void {\r\n if (this._focused()) {\r\n this._focused.set(false);\r\n this._onTouched();\r\n this.stateChanges.next();\r\n }\r\n }\r\n\r\n // Public methods (mat-checkbox compatible)\r\n\r\n /** Toggles the `checked` state of the checkbox. */\r\n toggle(): void {\r\n if (!this.disabled()) {\r\n const newChecked = !this._checked();\r\n this._checked.set(newChecked);\r\n\r\n // Clear indeterminate when toggling\r\n if (this._indeterminate()) {\r\n this._indeterminate.set(false);\r\n this.indeterminateChange.emit(false);\r\n }\r\n\r\n this._onChange(newChecked);\r\n this.change.emit({\r\n source: this,\r\n checked: newChecked,\r\n });\r\n this.stateChanges.next();\r\n }\r\n }\r\n\r\n /** Focuses the checkbox. */\r\n focus(): void {\r\n this.inputElement()?.nativeElement.focus();\r\n }\r\n\r\n /** Sets the indeterminate state programmatically. */\r\n setIndeterminate(value: boolean): void {\r\n if (this._indeterminate() !== value) {\r\n this._indeterminate.set(value);\r\n this.indeterminateChange.emit(value);\r\n this.stateChanges.next();\r\n }\r\n }\r\n}\r\n","<label class=\"fui-checkbox__container\" [attr.for]=\"inputId\">\r\n <span class=\"fui-checkbox__frame\">\r\n <input\r\n #inputElement\r\n type=\"checkbox\"\r\n class=\"fui-checkbox__native-control\"\r\n [id]=\"inputId\"\r\n [name]=\"name()\"\r\n [value]=\"value()\"\r\n [checked]=\"checked()\"\r\n [disabled]=\"disabled()\"\r\n [required]=\"required()\"\r\n [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [attr.aria-labelledby]=\"ariaLabelledby()\"\r\n [attr.aria-describedby]=\"ariaDescribedby()\"\r\n [attr.aria-invalid]=\"errorState() ? 'true' : null\"\r\n [attr.aria-required]=\"required() ? 'true' : null\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n (change)=\"onInputChange($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n\r\n <span class=\"fui-checkbox__checkmark\">\r\n @if (checked() && !indeterminate()) {\r\n <svg\r\n class=\"fui-checkbox__checkmark-icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"3\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n aria-hidden=\"true\"\r\n >\r\n <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n </svg>\r\n }\r\n\r\n @if (indeterminate()) {\r\n <svg\r\n class=\"fui-checkbox__indeterminate-icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"3\"\r\n stroke-linecap=\"round\"\r\n aria-hidden=\"true\"\r\n >\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\r\n </svg>\r\n }\r\n </span>\r\n\r\n @if (!disableRipple() && !disabled()) {\r\n <span class=\"fui-checkbox__ripple\"></span>\r\n }\r\n </span>\r\n\r\n <span class=\"fui-checkbox__label\">\r\n <ng-content></ng-content>\r\n </span>\r\n</label>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAwCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CG;MA6BU,oBAAoB,CAAA;;AAE/B,IAAA,OAAO,MAAM,GAAG,CAAC;IACR,WAAW,GAAG,cAAc;;AAG5B,IAAA,aAAa,GAAG,KAAK,CAAmB,KAAK,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,eAAA,EAAA,8BAAA,EAAA,CAAA,EACpD,KAAK,EAAE,UAAU;QACjB,SAAS,EAAE,gBAAgB,EAAA,CAC3B;AACO,IAAA,YAAY,GAAG,KAAK,CAAmB,KAAK,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,cAAA,EAAA,8BAAA,EAAA,CAAA,EACnD,KAAK,EAAE,SAAS;QAChB,SAAS,EAAE,gBAAgB,EAAA,CAC3B;AACO,IAAA,aAAa,GAAG,KAAK,CAAmB,KAAK,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,eAAA,EAAA,8BAAA,EAAA,CAAA,EACpD,KAAK,EAAE,UAAU;QACjB,SAAS,EAAE,gBAAgB,EAAA,CAC3B;AACO,IAAA,kBAAkB,GAAG,KAAK,CAAmB,KAAK,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,oBAAA,EAAA,8BAAA,EAAA,CAAA,EACzD,KAAK,EAAE,eAAe;QACtB,SAAS,EAAE,gBAAgB,EAAA,CAC3B;AACO,IAAA,aAAa,GAAG,KAAK,CAAmB,KAAK,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,eAAA,EAAA,8BAAA,EAAA,CAAA,EACpD,KAAK,EAAE,UAAU;QACjB,SAAS,EAAE,gBAAgB,EAAA,CAC3B;AACO,IAAA,aAAa,GAAG,KAAK,CAA2B,OAAO,oFAAC;AACxD,IAAA,IAAI,GAAG,KAAK,CAAgB,IAAI,2EAAC;AACjC,IAAA,KAAK,GAAG,KAAK,CAAC,IAAI,4EAAC;IACnB,SAAS,GAAG,KAAK,CAAgB,IAAI,iFAAI,KAAK,EAAE,YAAY,EAAA,CAAG;IAC/D,cAAc,GAAG,KAAK,CAAgB,IAAI,sFAAI,KAAK,EAAE,iBAAiB,EAAA,CAAG;IACzE,eAAe,GAAG,KAAK,CAAgB,IAAI,uFAAI,KAAK,EAAE,kBAAkB,EAAA,CAAG;IAC3E,aAAa,GAAG,KAAK,CAAmB,KAAK,qFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAC/E,IAAA,QAAQ,GAAG,KAAK,CAAC,CAAC,+EAAC;AACnB,IAAA,iBAAiB,GAAG,KAAK,CAA2B,IAAI,wFAAC;;IAGzD,MAAM,GAAwC,MAAM,EAAqB;IACzE,mBAAmB,GAA8B,MAAM,EAAW;;AAG1D,IAAA,QAAQ,GAA4B,MAAM,CAAC,KAAK,+EAAC;AACjD,IAAA,cAAc,GAA4B,MAAM,CAAC,KAAK,qFAAC;AACvD,IAAA,QAAQ,GAA4B,MAAM,CAAC,KAAK,+EAAC;AACjD,IAAA,SAAS,GAA4B,MAAM,CAAC,KAAK,gFAAC;;AAG1D,IAAA,OAAO,GAAoB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE;AACrD,IAAA,aAAa,GAAoB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE;AACjE,IAAA,OAAO,GAAoB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE;;AAGrD,IAAA,YAAY,GAAG,IAAI,OAAO,EAAQ;AACnC,IAAA,IAAI,GAAG,CAAA,aAAA,EAAgB,oBAAoB,CAAC,MAAM,EAAE,EAAE;AACrD,IAAA,EAAE,GAAG,IAAI,CAAC,IAAI;AACd,IAAA,OAAO,GAAG,CAAA,EAAG,IAAI,CAAC,IAAI,QAAQ;;AAGtB,IAAA,WAAW,GAA4B,MAAM,CAAC,KAAK,kFAAC;AAC5D,IAAA,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE;;IAG3C,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IAChD,gBAAgB,GAAG,MAAM,CAAC,kBAAkB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACjE,IAAA,yBAAyB,GAAG,MAAM,CAAC,wBAAwB,CAAC;IACnD,aAAa,GAAG,eAAe,EAAE;AAElD,IAAA,IAAI,SAAS,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,aAAa,CAAC,SAAS;IACrC;;AAGiB,IAAA,SAAS,GAA4B,MAAM,CAAC,KAAK,gFAAC;AAC1D,IAAA,QAAQ,GAAoB,QAAQ,CAAC,MAAM,IAAI,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,aAAa,EAAE,+EAAC;;AAG5E,IAAA,kBAAkB,GAA4B,MAAM,CAAC,KAAK,yFAAC;IACnE,QAAQ,GAAoB,QAAQ,CAC3C,MAAM,IAAI,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,aAAa,EAAE,IAAI,IAAI,CAAC,kBAAkB,EAAE,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAC5E;;AAGQ,IAAA,YAAY,GACnB,SAAS,CAA+B,cAAc,mFAAC;;IAGjD,SAAS,GAA6B,MAAK;;AAEnD,IAAA,CAAC;IACO,UAAU,GAAe,MAAK;;AAEtC,IAAA,CAAC;;IAGO,uBAAuB,GAAG,KAAK;AAEvC,IAAA,WAAA,GAAA;;QAEE,KAAK,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,MAAK;AAC/B,YAAA,IAAI,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE;gBAChC,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,aAAa,GAAG,IAAI;YACnD;AACF,QAAA,CAAC,CAAC;;;QAIF,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,EAAE;;AAExC,YAAA,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE;AACjC,gBAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,YAAY,CAAC;YACjC;AACF,QAAA,CAAC,CAAC;;QAGF,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,EAAE;AACpD,YAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC;AAC7C,QAAA,CAAC,CAAC;;QAGF,MAAM,CAAC,MAAK;;YAEV,IAAI,CAAC,YAAY,EAAE;YACnB,IAAI,CAAC,aAAa,EAAE;YACpB,IAAI,CAAC,kBAAkB,EAAE;YACzB,IAAI,CAAC,aAAa,EAAE;YACpB,IAAI,CAAC,aAAa,EAAE;YACpB,IAAI,CAAC,IAAI,EAAE;YACX,IAAI,CAAC,KAAK,EAAE;YACZ,IAAI,CAAC,iBAAiB,EAAE;YACxB,IAAI,CAAC,QAAQ,EAAE;YACf,IAAI,CAAC,cAAc,EAAE;YACrB,IAAI,CAAC,QAAQ,EAAE;YACf,IAAI,CAAC,SAAS,EAAE;YAChB,IAAI,CAAC,kBAAkB,EAAE;YACzB,IAAI,CAAC,SAAS,EAAE;YAChB,IAAI,CAAC,WAAW,EAAE;;AAGlB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;AAC1B,QAAA,CAAC,CAAC;IACJ;IAEA,SAAS,GAAA;AACP,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,YAAA,gBAAgB,CACd,IAAI,CAAC,SAAS,EACd,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,iBAAiB,EAAE,EACxB,IAAI,CAAC,yBAAyB,EAC9B,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,gBAAgB,EACrB,IAAI,CAAC,YAAY,CAClB;AACD,YAAA,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC;AACpE,YAAA,qBAAqB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC,YAAY,CAAC;QACnF;IACF;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE;IAC9B;;AAGA,IAAA,UAAU,CAAC,KAAc,EAAA;AACvB,QAAA,IAAI,CAAC,uBAAuB,GAAG,IAAI;AACnC,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;AACxB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;IAC1B;AAEA,IAAA,gBAAgB,CAAC,EAA4B,EAAA;AAC3C,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AAEA,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,UAAU,GAAG,EAAE;IACtB;AAEA,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC;AAC9B,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;IAC1B;;AAGA,IAAA,aAAa,CAAC,KAAY,EAAA;QACxB,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACnB;QACF;;AAGA,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,QAAA,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO;;AAGjC,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC;;AAG7B,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE,EAAE;AACzB,YAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC;AAC9B,YAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC;QACtC;;AAGA,QAAA,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;AAC1B,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;AACf,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,OAAO,EAAE,UAAU;AACpB,SAAA,CAAC;AACF,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;IAC1B;IAEA,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE;AACpB,YAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC;AACvB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;QAC1B;IACF;IAEA,MAAM,GAAA;AACJ,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;AACnB,YAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;YACxB,IAAI,CAAC,UAAU,EAAE;AACjB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;QAC1B;IACF;;;IAKA,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE;AACpB,YAAA,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE;AACnC,YAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC;;AAG7B,YAAA,IAAI,IAAI,CAAC,cAAc,EAAE,EAAE;AACzB,gBAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC;AAC9B,gBAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC;YACtC;AAEA,YAAA,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;AAC1B,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;AACf,gBAAA,MAAM,EAAE,IAAI;AACZ,gBAAA,OAAO,EAAE,UAAU;AACpB,aAAA,CAAC;AACF,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;QAC1B;IACF;;IAGA,KAAK,GAAA;QACH,IAAI,CAAC,YAAY,EAAE,EAAE,aAAa,CAAC,KAAK,EAAE;IAC5C;;AAGA,IAAA,gBAAgB,CAAC,KAAc,EAAA;AAC7B,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE,KAAK,KAAK,EAAE;AACnC,YAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC;AAC9B,YAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC;AACpC,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;QAC1B;IACF;uGAxQW,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,UAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,qBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,6BAAA,EAAA,WAAA,EAAA,8BAAA,EAAA,gCAAA,EAAA,8BAAA,EAAA,iBAAA,EAAA,mCAAA,EAAA,iBAAA,EAAA,kCAAA,EAAA,gCAAA,EAAA,6BAAA,EAAA,WAAA,EAAA,2BAAA,EAAA,cAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,cAAA,EAAA,cAAA,EAAA,EAAA,SAAA,EARpB;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,oBAAoB;AACjC,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;AACF,SAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,cAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,cAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC/GH,siEAgEA,EAAA,MAAA,EAAA,CAAA,85MAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDiDa,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBA5BhC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAAA,UAAA,EACZ,IAAI,EAAA,OAAA,EACP,EAAE,EAAA,eAAA,EAGM,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,KAAK,EAAE,cAAc;AACrB,wBAAA,+BAA+B,EAAE,WAAW;AAC5C,wBAAA,gCAAgC,EAAE,gCAAgC;AAClE,wBAAA,gCAAgC,EAAE,iBAAiB;AACnD,wBAAA,qCAAqC,EAAE,iBAAiB;AACxD,wBAAA,oCAAoC,EAAE,8BAA8B;AACpE,wBAAA,+BAA+B,EAAE,WAAW;AAC5C,wBAAA,6BAA6B,EAAE,cAAc;AAC7C,wBAAA,WAAW,EAAE,IAAI;AACjB,wBAAA,iBAAiB,EAAE,MAAM;qBAC1B,EAAA,SAAA,EACU;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAA,oBAAsB;AACjC,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;AACF,qBAAA,EAAA,QAAA,EAAA,siEAAA,EAAA,MAAA,EAAA,CAAA,85MAAA,CAAA,EAAA;wnDAqFyC,cAAc,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AEpM1D;;AAEG;;;;"}
|
|
1
|
+
{"version":3,"file":"raintonic-formaui-components-checkbox.mjs","sources":["../../../lib/components/checkbox/checkbox.component.ts","../../../lib/components/checkbox/checkbox.component.html","../../../lib/components/checkbox/raintonic-formaui-components-checkbox.ts"],"sourcesContent":["import {\r\n Component,\r\n ChangeDetectionStrategy,\r\n ViewEncapsulation,\r\n input,\r\n output,\r\n computed,\r\n signal,\r\n viewChild,\r\n ElementRef,\r\n OutputEmitterRef,\r\n Signal,\r\n WritableSignal,\r\n OnDestroy,\r\n DoCheck,\r\n inject,\r\n effect,\r\n booleanAttribute,\r\n} from '@angular/core';\r\n\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, FormGroupDirective, NgForm } from '@angular/forms';\r\nimport { Subject } from 'rxjs';\r\nimport { DefaultErrorStateMatcher, ErrorStateMatcher } from '@raintonic/formaui/core';\r\nimport { injectNgControl, updateErrorState, syncRequiredState, syncNgControlDisabled } from '@raintonic/formaui/cdk/form-field';\r\n\r\n/**\r\n * Checkbox label position\r\n */\r\nexport type FuiCheckboxLabelPosition = 'before' | 'after';\r\n\r\n/**\r\n * Checkbox change event interface (compatible with MatCheckboxChange)\r\n */\r\nexport interface FuiCheckboxChange {\r\n /** The source checkbox of the event. */\r\n source: FuiCheckboxComponent;\r\n /** The new `checked` value of the checkbox. */\r\n checked: boolean;\r\n}\r\n\r\n/**\r\n * # FuiCheckbox Component\r\n *\r\n * A checkbox component with full Angular Reactive Forms support.\r\n * Compatible with Angular Material's mat-checkbox interface.\r\n *\r\n * ## Features\r\n * - Full Reactive Forms integration (ControlValueAccessor)\r\n * - Indeterminate state support\r\n * - Label position configuration (before/after)\r\n * - Built-in validation and error display\r\n * - Disabled state\r\n * - Full accessibility support (ARIA)\r\n * - Compatible with mat-checkbox interface\r\n *\r\n * ## Usage\r\n *\r\n * ### Basic Checkbox\r\n * ```html\r\n * <fui-checkbox>Accept terms</fui-checkbox>\r\n * ```\r\n *\r\n * ### With Reactive Forms\r\n * ```html\r\n * <form [formGroup]=\"form\">\r\n * <fui-checkbox formControlName=\"acceptTerms\">\r\n * I accept the terms and conditions\r\n * </fui-checkbox>\r\n * </form>\r\n * ```\r\n *\r\n * ### Indeterminate State\r\n * ```html\r\n * <fui-checkbox [indeterminate]=\"true\">\r\n * Select all\r\n * </fui-checkbox>\r\n * ```\r\n *\r\n * ### Label Position\r\n * ```html\r\n * <fui-checkbox labelPosition=\"before\">\r\n * Label before checkbox\r\n * </fui-checkbox>\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-checkbox',\r\n standalone: true,\r\n imports: [],\r\n templateUrl: './checkbox.component.html',\r\n styleUrls: ['./checkbox.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-checkbox',\r\n '[class.fui-checkbox--checked]': 'checked()',\r\n '[class.fui-checkbox--disabled]': 'disabled() && !readonlyInput()',\r\n '[class.fui-checkbox--readonly]': 'readonlyInput()',\r\n '[class.fui-checkbox--indeterminate]': 'indeterminate()',\r\n '[class.fui-checkbox--label-before]': 'labelPosition() === \"before\"',\r\n '[class.fui-checkbox--focused]': 'focused()',\r\n '[class.fui-checkbox--error]': 'errorState()',\r\n '[attr.id]': 'id',\r\n '[attr.tabindex]': 'null',\r\n },\r\n providers: [\r\n {\r\n provide: NG_VALUE_ACCESSOR,\r\n useExisting: FuiCheckboxComponent,\r\n multi: true,\r\n },\r\n ],\r\n})\r\nexport class FuiCheckboxComponent implements ControlValueAccessor, DoCheck, OnDestroy {\r\n // Static properties\r\n static nextId = 0;\r\n readonly controlType = 'fui-checkbox';\r\n\r\n // Inputs using new signal-based API (mat-checkbox compatible)\r\n readonly readonlyInput = input<boolean, unknown>(false, {\r\n alias: 'readonly',\r\n transform: booleanAttribute,\r\n });\r\n readonly checkedInput = input<boolean, unknown>(false, {\r\n alias: 'checked',\r\n transform: booleanAttribute,\r\n });\r\n readonly disabledInput = input<boolean, unknown>(false, {\r\n alias: 'disabled',\r\n transform: booleanAttribute,\r\n });\r\n readonly indeterminateInput = input<boolean, unknown>(false, {\r\n alias: 'indeterminate',\r\n transform: booleanAttribute,\r\n });\r\n readonly requiredInput = input<boolean, unknown>(false, {\r\n alias: 'required',\r\n transform: booleanAttribute,\r\n });\r\n readonly labelPosition = input<FuiCheckboxLabelPosition>('after');\r\n readonly name = input<string | null>(null);\r\n readonly value = input('on');\r\n readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });\r\n readonly ariaLabelledby = input<string | null>(null, { alias: 'aria-labelledby' });\r\n readonly ariaDescribedby = input<string | null>(null, { alias: 'aria-describedby' });\r\n readonly disableRipple = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n readonly tabIndex = input(0);\r\n readonly errorStateMatcher = input<ErrorStateMatcher | null>(null);\r\n\r\n // Outputs (mat-checkbox compatible)\r\n readonly change: OutputEmitterRef<FuiCheckboxChange> = output<FuiCheckboxChange>();\r\n readonly indeterminateChange: OutputEmitterRef<boolean> = output<boolean>();\r\n\r\n // Internal state signals - single source of truth like mat-checkbox\r\n private readonly _checked: WritableSignal<boolean> = signal(false);\r\n private readonly _indeterminate: WritableSignal<boolean> = signal(false);\r\n private readonly _focused: WritableSignal<boolean> = signal(false);\r\n private readonly _disabled: WritableSignal<boolean> = signal(false);\r\n\r\n // Public signals - expose internal state as readonly\r\n readonly checked: Signal<boolean> = this._checked.asReadonly();\r\n readonly indeterminate: Signal<boolean> = this._indeterminate.asReadonly();\r\n readonly focused: Signal<boolean> = this._focused.asReadonly();\r\n\r\n // State changes subject for form field compatibility\r\n readonly stateChanges = new Subject<void>();\r\n private _uid = `fui-checkbox-${FuiCheckboxComponent.nextId++}`;\r\n readonly id = this._uid;\r\n readonly inputId = `${this._uid}-input`;\r\n\r\n // Error state\r\n private readonly _errorState: WritableSignal<boolean> = signal(false);\r\n readonly errorState = this._errorState.asReadonly();\r\n\r\n // Form control references\r\n private _parentForm = inject(NgForm, { optional: true });\r\n private _parentFormGroup = inject(FormGroupDirective, { optional: true });\r\n private _defaultErrorStateMatcher = inject(DefaultErrorStateMatcher);\r\n private readonly _ngControlRef = injectNgControl();\r\n\r\n get ngControl(): NgControl | null {\r\n return this._ngControlRef.ngControl;\r\n }\r\n\r\n // Required signal\r\n private readonly _required: WritableSignal<boolean> = signal(false);\r\n readonly required: Signal<boolean> = computed(() => this._required() || this.requiredInput());\r\n\r\n // NgControl disabled state\r\n private readonly _ngControlDisabled: WritableSignal<boolean> = signal(false);\r\n readonly disabled: Signal<boolean> = computed(\r\n () => this._disabled() || this.disabledInput() || this._ngControlDisabled(),\r\n );\r\n\r\n // ViewChild for input element\r\n readonly inputElement: Signal<ElementRef<HTMLInputElement> | undefined> =\r\n viewChild<ElementRef<HTMLInputElement>>('inputElement');\r\n\r\n // ControlValueAccessor callbacks\r\n private _onChange: (value: boolean) => void = () => {\r\n // Intentionally empty: will be replaced by Angular forms\r\n };\r\n private _onTouched: () => void = () => {\r\n // Intentionally empty: will be replaced by Angular forms\r\n };\r\n\r\n // Track if writeValue has been called by a form control\r\n private _formControlInitialized = false;\r\n\r\n constructor() {\r\n // Set valueAccessor after NgControl is resolved\r\n void Promise.resolve().then(() => {\r\n if (this._ngControlRef.ngControl) {\r\n this._ngControlRef.ngControl.valueAccessor = this;\r\n }\r\n });\r\n\r\n // Effect to sync checked input to internal state (like mat-checkbox @Input setter)\r\n // This allows [checked]=\"value\" to work, but form controls take precedence via writeValue\r\n effect(() => {\r\n const inputChecked = this.checkedInput();\r\n // Only apply input value if form control hasn't initialized with writeValue\r\n if (!this._formControlInitialized) {\r\n this._checked.set(inputChecked);\r\n }\r\n });\r\n\r\n // Effect to sync indeterminate input to internal state\r\n effect(() => {\r\n const inputIndeterminate = this.indeterminateInput();\r\n this._indeterminate.set(inputIndeterminate);\r\n });\r\n\r\n // Effect to emit state changes\r\n effect(() => {\r\n // Track all reactive inputs and internal signals\r\n this.checkedInput();\r\n this.disabledInput();\r\n this.indeterminateInput();\r\n this.requiredInput();\r\n this.labelPosition();\r\n this.name();\r\n this.value();\r\n this.errorStateMatcher();\r\n this._checked();\r\n this._indeterminate();\r\n this._focused();\r\n this._disabled();\r\n this._ngControlDisabled();\r\n this._required();\r\n this._errorState();\r\n\r\n // Emit state change\r\n this.stateChanges.next();\r\n });\r\n }\r\n\r\n ngDoCheck(): void {\r\n if (this.ngControl) {\r\n updateErrorState(\r\n this.ngControl,\r\n this._errorState,\r\n this.errorStateMatcher(),\r\n this._defaultErrorStateMatcher,\r\n this._parentForm,\r\n this._parentFormGroup,\r\n this.stateChanges,\r\n );\r\n syncRequiredState(this.ngControl, this._required, this.stateChanges);\r\n syncNgControlDisabled(this.ngControl, this._ngControlDisabled, this.stateChanges);\r\n }\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.stateChanges.complete();\r\n }\r\n\r\n // ControlValueAccessor implementation\r\n writeValue(value: boolean): void {\r\n this._formControlInitialized = true;\r\n this._checked.set(value);\r\n this.stateChanges.next();\r\n }\r\n\r\n registerOnChange(fn: (value: boolean) => void): void {\r\n this._onChange = fn;\r\n }\r\n\r\n registerOnTouched(fn: () => void): void {\r\n this._onTouched = fn;\r\n }\r\n\r\n setDisabledState(isDisabled: boolean): void {\r\n this._disabled.set(isDisabled);\r\n this.stateChanges.next();\r\n }\r\n\r\n // Event handlers\r\n onInputChange(event: Event): void {\r\n event.stopPropagation();\r\n\r\n if (this.disabled()) {\r\n return;\r\n }\r\n\r\n // Read the new checked state from the native input element\r\n const target = event.target as HTMLInputElement;\r\n const newChecked = target.checked;\r\n\r\n // Update internal state\r\n this._checked.set(newChecked);\r\n\r\n // Clear indeterminate when checking/unchecking\r\n if (this._indeterminate()) {\r\n this._indeterminate.set(false);\r\n this.indeterminateChange.emit(false);\r\n }\r\n\r\n // Emit change events (this updates the form control)\r\n this._onChange(newChecked);\r\n this.change.emit({\r\n source: this,\r\n checked: newChecked,\r\n });\r\n this.stateChanges.next();\r\n }\r\n\r\n onFocus(): void {\r\n if (!this._focused()) {\r\n this._focused.set(true);\r\n this.stateChanges.next();\r\n }\r\n }\r\n\r\n onBlur(): void {\r\n if (this._focused()) {\r\n this._focused.set(false);\r\n this._onTouched();\r\n this.stateChanges.next();\r\n }\r\n }\r\n\r\n // Public methods (mat-checkbox compatible)\r\n\r\n /** Toggles the `checked` state of the checkbox. */\r\n toggle(): void {\r\n if (!this.disabled()) {\r\n const newChecked = !this._checked();\r\n this._checked.set(newChecked);\r\n\r\n // Clear indeterminate when toggling\r\n if (this._indeterminate()) {\r\n this._indeterminate.set(false);\r\n this.indeterminateChange.emit(false);\r\n }\r\n\r\n this._onChange(newChecked);\r\n this.change.emit({\r\n source: this,\r\n checked: newChecked,\r\n });\r\n this.stateChanges.next();\r\n }\r\n }\r\n\r\n /** Focuses the checkbox. */\r\n focus(): void {\r\n this.inputElement()?.nativeElement.focus();\r\n }\r\n\r\n /** Sets the indeterminate state programmatically. */\r\n setIndeterminate(value: boolean): void {\r\n if (this._indeterminate() !== value) {\r\n this._indeterminate.set(value);\r\n this.indeterminateChange.emit(value);\r\n this.stateChanges.next();\r\n }\r\n }\r\n}\r\n","<label class=\"fui-checkbox__container\" [attr.for]=\"inputId\">\r\n <span class=\"fui-checkbox__frame\">\r\n <input\r\n #inputElement\r\n type=\"checkbox\"\r\n class=\"fui-checkbox__native-control\"\r\n [id]=\"inputId\"\r\n [name]=\"name()\"\r\n [value]=\"value()\"\r\n [checked]=\"checked()\"\r\n [disabled]=\"disabled()\"\r\n [required]=\"required()\"\r\n [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [attr.aria-labelledby]=\"ariaLabelledby()\"\r\n [attr.aria-describedby]=\"ariaDescribedby()\"\r\n [attr.aria-invalid]=\"errorState() ? 'true' : null\"\r\n [attr.aria-required]=\"required() ? 'true' : null\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n (change)=\"onInputChange($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n\r\n <span class=\"fui-checkbox__checkmark\">\r\n @if (checked() && !indeterminate()) {\r\n <svg\r\n class=\"fui-checkbox__checkmark-icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"3\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n aria-hidden=\"true\"\r\n >\r\n <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n </svg>\r\n }\r\n\r\n @if (indeterminate()) {\r\n <svg\r\n class=\"fui-checkbox__indeterminate-icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"3\"\r\n stroke-linecap=\"round\"\r\n aria-hidden=\"true\"\r\n >\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\r\n </svg>\r\n }\r\n </span>\r\n\r\n @if (!disableRipple() && !disabled()) {\r\n <span class=\"fui-checkbox__ripple\"></span>\r\n }\r\n </span>\r\n\r\n <span class=\"fui-checkbox__label\">\r\n <ng-content></ng-content>\r\n </span>\r\n</label>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -335,7 +335,7 @@ class FuiFormFieldComponent {
|
|
|
335
335
|
return (this._suffixes?.length ?? 0) > 0;
|
|
336
336
|
}
|
|
337
337
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
338
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiFormFieldComponent, isStandalone: true, selector: "fui-form-field", inputs: { readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, hideRequiredMarker: { classPropertyName: "hideRequiredMarker", publicName: "hideRequiredMarker", isSignal: true, isRequired: false, transformFunction: null }, hideSubscript: { classPropertyName: "hideSubscript", publicName: "hideSubscript", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "class.fui-form-field--disabled": "isDisabled()", "class.fui-form-field--focused": "isFocused()", "class.fui-form-field--error": "hasError()", "class.fui-form-field--empty": "isEmpty()", "class.fui-form-field--readonly": "readOnly()", "class.fui-form-field--float": "appearance() === \"float\"", "class.fui-form-field--fill": "appearance() === \"fill\"", "class.fui-form-field--float-active": "shouldFloat()", "attr.aria-labelledby": "labelId", "attr.aria-disabled": "isDisabled() || null" }, classAttribute: "fui-form-field" }, queries: [{ propertyName: "control", first: true, predicate: FUI_FORM_FIELD_CONTROL, descendants: true, isSignal: true }, { propertyName: "_prefixes", predicate: FuiPrefixDirective, descendants: true }, { propertyName: "_suffixes", predicate: FuiSuffixDirective, descendants: true }], viewQueries: [{ propertyName: "_connectionContainerRef", first: true, predicate: ["connectionContainer"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"fui-form-field__container\">\r\n <!-- Label - Carbon Design System style (outside wrapper) -->\r\n <label class=\"fui-form-field__label fui-animate-fade\" [attr.id]=\"labelId\" [attr.for]=\"control()?.id\">\r\n <ng-content select=\"fui-label\"></ng-content>\r\n @if (isRequired() && !readOnly()) {\r\n <span class=\"fui-form-field__required-marker\" [class.--has-error]=\"hasError()\">*</span>\r\n }\r\n </label>\r\n\r\n <!-- Wrapper \u2014 always visible, styled as read-only when applicable -->\r\n <div\r\n class=\"fui-form-field__wrapper\"\r\n [class.fui-form-field__wrapper--readonly]=\"readOnly()\"\r\n (click)=\"onContainerClick($event)\"\r\n >\r\n <!-- Prefix -->\r\n @if (hasPrefix()) {\r\n <div class=\"fui-form-field__prefix\">\r\n <ng-content select=\"[fuiPrefix]\"></ng-content>\r\n </div>\r\n }\r\n\r\n <!-- Infix (contains input) -->\r\n <div class=\"fui-form-field__infix\">\r\n <!-- Input container -->\r\n <div class=\"fui-form-field__input\" #connectionContainer>\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n\r\n <!-- Suffix -->\r\n @if (hasSuffix() || (hasSelectControl() && !isMultipleSelect()) || readOnly()) {\r\n <div class=\"fui-form-field__suffix\">\r\n <!-- User-projected suffix content -->\r\n <ng-content select=\"[fuiSuffix]\"></ng-content>\r\n\r\n <!-- Dropdown icon for select elements (not multiple) \u2014 hidden in readOnly -->\r\n @if (hasSelectControl() && !isMultipleSelect() && !readOnly()) {\r\n <div class=\"fui-form-field__select-icon\">\r\n <fui-icon name=\"caret-down\" size=\"sm\"></fui-icon>\r\n </div>\r\n }\r\n\r\n <!-- Copy button \u2014 visible only in readOnly on hover -->\r\n @if (readOnly()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-form-field__copy-btn\"\r\n (click)=\"copyValue(); $event.stopPropagation()\"\r\n [attr.aria-label]=\"copied() ? intl.copiedAriaLabel : intl.copyAriaLabel\"\r\n >\r\n <fui-icon [name]=\"copied() ? 'check' : 'copy'\" size=\"sm\"></fui-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (!hideSubscript()) {\r\n <!-- Helper text and error messages container -->\r\n <div class=\"fui-form-field__subscript-wrapper\">\r\n <!-- Error messages -->\r\n @if (hasError()) {\r\n <div class=\"fui-form-field__error-wrapper fui-animate-slide-in-top\">\r\n <div class=\"fui-form-field__error\" [attr.id]=\"errorId\">\r\n <ng-content select=\"fui-error\"></ng-content>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Hint text -->\r\n <div class=\"fui-form-field__hint-wrapper fui-animate-fade\">\r\n <div class=\"fui-form-field__hint\" [attr.id]=\"hintId\">\r\n <ng-content select=\"fui-hint\"></ng-content>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-form-field{--fui-form-field-height: var(--fui-input-height);--fui-form-field-font-size: var(--fui-font-size-02);--fui-form-field-border-radius: var(--fui-border-radius-sm);--fui-form-field-padding-x: var(--fui-spacing-04);--fui-form-field-bg: var(--fui-surface-02);--fui-form-field-border-color: var(--fui-border-color);--fui-form-field-label-color: var(--fui-text-primary);--fui-form-field-label-font-size: var(--fui-font-size-01);--fui-form-field-label-spacing: var(--fui-spacing-02);--fui-form-field-hint-color: var(--fui-text-secondary);--fui-form-field-error-color: var(--fui-field-border-error);display:block;position:relative;font-family:var(--fui-font-family-sans);font-size:var(--fui-form-field-font-size)}.fui-form-field__container{display:block;width:100%}.fui-form-field__wrapper{position:relative;display:flex;align-items:center;width:100%;min-height:var(--fui-form-field-height);cursor:text;transition:background-color,border-color,box-shadow var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms;background-color:var(--fui-form-field-bg);border:var(--fui-border-width-sm) solid var(--fui-form-field-border-color);border-radius:var(--fui-form-field-border-radius);padding:0 var(--fui-form-field-padding-x);box-shadow:var(--fui-shadow-01)}.fui-form-field:hover:not(.fui-form-field--disabled):not(.fui-form-field--readonly) .fui-form-field__wrapper{background-color:var(--fui-surface-01);border-color:var(--fui-primary)}.fui-form-field.fui-form-field--error .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-state-error);box-shadow:0 0 0 4px var(--fui-danger-50)}.fui-form-field.fui-form-field--error.fui-form-field--focused .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-field-border-error)}.fui-form-field:has(input:focus) .fui-form-field__wrapper,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-primary)!important;background-color:var(--fui-surface-01);position:relative;box-shadow:0 0 0 4px var(--fui-primary-20)}.fui-form-field:has(input:focus) .fui-form-field__prefix,.fui-form-field:has(input:focus) .fui-form-field__suffix,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__prefix,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__suffix{color:var(--fui-primary)}.fui-form-field--disabled:not(.fui-form-field--readonly){opacity:.5}.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__wrapper{box-shadow:none;cursor:not-allowed}.fui-form-field--disabled:not(.fui-form-field--readonly) input,.fui-form-field--disabled:not(.fui-form-field--readonly) textarea,.fui-form-field--disabled:not(.fui-form-field--readonly) select{cursor:not-allowed}.fui-form-field--readonly .fui-form-field__label{color:var(--fui-text-secondary)}.fui-form-field--readonly .fui-form-field__wrapper{cursor:default;background-color:var(--fui-surface-02);border-color:var(--fui-border-color);box-shadow:none}.fui-form-field--readonly:has(input:focus) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-color)!important;box-shadow:none;background-color:var(--fui-surface-00)}.fui-form-field--readonly:has(input:focus) .fui-form-field__prefix,.fui-form-field--readonly:has(input:focus) .fui-form-field__suffix{color:var(--fui-text-secondary)}.fui-form-field--readonly .fui-form-field__input input,.fui-form-field--readonly .fui-form-field__input textarea,.fui-form-field--readonly .fui-form-field__input select{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-form-field--readonly .fui-form-field__input input::placeholder,.fui-form-field--readonly .fui-form-field__input textarea::placeholder,.fui-form-field--readonly .fui-form-field__input select::placeholder{color:transparent;-webkit-text-fill-color:transparent}.fui-form-field--readonly .fui-form-field__wrapper:hover .fui-form-field__copy-btn{opacity:1;pointer-events:auto}.fui-form-field__prefix,.fui-form-field__suffix{display:flex;align-items:center;white-space:nowrap;flex:0 0 auto;position:relative;z-index:2;padding:0 var(--fui-spacing-02);color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field--focused .fui-form-field__prefix,.fui-form-field--focused .fui-form-field__suffix{color:var(--fui-field-border-focus)}.fui-form-field--error .fui-form-field__prefix,.fui-form-field--error .fui-form-field__suffix{color:var(--fui-field-border-error)}.fui-form-field--disabled .fui-form-field__prefix,.fui-form-field--disabled .fui-form-field__suffix{color:var(--fui-text-secondary)}.fui-form-field__select-icon{display:flex;align-items:center;justify-content:center;width:var(--fui-icon-size-sm);height:var(--fui-icon-size-sm);margin-left:var(--fui-spacing-02);color:var(--fui-icon-secondary);pointer-events:none;transition:color,transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field:has(.fui-select--open) .fui-form-field__select-icon{color:var(--fui-field-border-focus);transform:rotate(180deg)}.fui-form-field--error .fui-form-field__select-icon{color:var(--fui-field-border-error)}.fui-form-field--disabled .fui-form-field__select-icon{color:var(--fui-text-secondary)}.fui-form-field__infix{position:relative;flex:1 1 auto;min-width:0;padding:0;z-index:2}.fui-form-field__label{display:block;text-transform:uppercase;margin-bottom:var(--fui-form-field-label-spacing);font-size:var(--fui-form-field-label-font-size);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-wide);color:var(--fui-form-field-label-color);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field__required-marker{color:var(--fui-state-error);margin-left:var(--fui-spacing-02);font-weight:var(--fui-font-weight-regular)}.fui-form-field__input{position:relative;width:100%}.fui-form-field__input input,.fui-form-field__input textarea,.fui-form-field__input select{width:100%;height:100%;border:none;outline:none;background:transparent;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-normal);color:var(--fui-text-primary);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field__input input::placeholder,.fui-form-field__input textarea::placeholder,.fui-form-field__input select::placeholder{color:var(--fui-text-disabled);opacity:1;transition:opacity var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field__input input:focus,.fui-form-field__input textarea:focus,.fui-form-field__input select:focus{outline:none}.fui-form-field__input input:focus-visible,.fui-form-field__input textarea:focus-visible,.fui-form-field__input select:focus-visible{outline:none}.fui-form-field__input input:disabled,.fui-form-field__input textarea:disabled,.fui-form-field__input select:disabled{color:var(--fui-text-secondary);-webkit-text-fill-color:var(--fui-text-secondary)}.fui-form-field__input input:-webkit-autofill,.fui-form-field__input textarea:-webkit-autofill,.fui-form-field__input select:-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--fui-field-background) inset;-webkit-text-fill-color:var(--fui-text-primary);transition:background-color 5000s ease-in-out 0s}.fui-form-field__copy-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-form-field__copy-btn:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-form-field__copy-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-border-radius-sm);color:var(--fui-text-secondary);opacity:0;pointer-events:none;transition:opacity,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field__copy-btn:hover{color:var(--fui-primary)}.fui-form-field__subscript-wrapper{position:relative;min-height:1.25rem;padding:var(--fui-spacing-02) 0 0;font-size:var(--fui-font-size-01);line-height:var(--fui-line-height-03);letter-spacing:var(--fui-letter-spacing-wide)}.fui-form-field__error-wrapper{color:var(--fui-form-field-error-color)}.fui-form-field__error{transition:all var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms;font-weight:var(--fui-font-weight-regular)}.fui-form-field__hint-wrapper{color:var(--fui-form-field-hint-color)}.fui-form-field__hint{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms;font-weight:var(--fui-font-weight-regular)}.fui-form-field--error .fui-form-field__hint{opacity:0}.fui-form-field--float .fui-form-field__container{position:relative}.fui-form-field--float .fui-form-field__label{position:absolute;left:var(--fui-spacing-04);top:50%;transform:translateY(-50%);transform-origin:left center;pointer-events:none;z-index:3;margin-bottom:0;font-size:var(--fui-font-size-02);text-transform:none;color:var(--fui-text-secondary);transition:transform,font-size,top,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field--float.fui-form-field--float-active .fui-form-field__label{top:-.5em;transform:translateY(0) scale(.75);font-size:var(--fui-font-size-01);color:var(--fui-primary);background-color:var(--fui-surface-00);padding:0 var(--fui-spacing-02)}.fui-form-field--float.fui-form-field--error.fui-form-field--float-active .fui-form-field__label{color:var(--fui-state-error)}.fui-form-field--float .fui-form-field__wrapper{margin-top:var(--fui-spacing-03)}.fui-form-field--fill .fui-form-field__wrapper{background-color:var(--fui-surface-03);border-bottom:var(--fui-border-width-md) solid var(--fui-form-field-border-color);border-top:none;border-left:none;border-right:none;border-radius:var(--fui-border-radius-sm) var(--fui-border-radius-sm) 0 0;box-shadow:none}.fui-form-field--fill:hover:not(.fui-form-field--disabled) .fui-form-field__wrapper{background-color:var(--fui-surface-04);border-top:none;border-left:none;border-right:none}.fui-form-field--fill.fui-form-field--focused .fui-form-field__wrapper,.fui-form-field--fill:has(input:focus) .fui-form-field__wrapper,.fui-form-field--fill:has(select:focus) .fui-form-field__wrapper{border-bottom-color:var(--fui-primary);border-top:none!important;border-left:none!important;border-right:none!important;box-shadow:none}.fui-form-field--fill.fui-form-field--error .fui-form-field__wrapper{border-bottom-color:var(--fui-state-error);border-top:none;border-left:none;border-right:none;box-shadow:none}.fui-form-field__input textarea{min-height:5rem;resize:vertical;padding:var(--fui-spacing-03) 0;line-height:1.4}.fui-form-field__input select{cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:var(--fui-spacing-06)}.fui-form-field__input select::-ms-expand{display:none}.fui-form-field__input select:disabled{cursor:not-allowed}.fui-form-field__input select option{padding:var(--fui-spacing-02);background-color:var(--fui-surface-00);color:var(--fui-text-primary)}.fui-form-field:has(select:focus) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-primary)!important;background-color:var(--fui-surface-01);position:relative;box-shadow:0 0 0 4px var(--fui-primary-20)}.fui-form-field:has(select:focus) .fui-form-field__prefix,.fui-form-field:has(select:focus) .fui-form-field__suffix{color:var(--fui-primary)}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
338
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiFormFieldComponent, isStandalone: true, selector: "fui-form-field", inputs: { readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, hideRequiredMarker: { classPropertyName: "hideRequiredMarker", publicName: "hideRequiredMarker", isSignal: true, isRequired: false, transformFunction: null }, hideSubscript: { classPropertyName: "hideSubscript", publicName: "hideSubscript", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "class.fui-form-field--disabled": "isDisabled()", "class.fui-form-field--focused": "isFocused()", "class.fui-form-field--error": "hasError()", "class.fui-form-field--empty": "isEmpty()", "class.fui-form-field--readonly": "readOnly()", "class.fui-form-field--float": "appearance() === \"float\"", "class.fui-form-field--fill": "appearance() === \"fill\"", "class.fui-form-field--float-active": "shouldFloat()", "attr.aria-labelledby": "labelId", "attr.aria-disabled": "isDisabled() || null" }, classAttribute: "fui-form-field" }, queries: [{ propertyName: "control", first: true, predicate: FUI_FORM_FIELD_CONTROL, descendants: true, isSignal: true }, { propertyName: "_prefixes", predicate: FuiPrefixDirective, descendants: true }, { propertyName: "_suffixes", predicate: FuiSuffixDirective, descendants: true }], viewQueries: [{ propertyName: "_connectionContainerRef", first: true, predicate: ["connectionContainer"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"fui-form-field__container\">\r\n <!-- Label - Carbon Design System style (outside wrapper) -->\r\n <label class=\"fui-form-field__label fui-animate-fade\" [attr.id]=\"labelId\" [attr.for]=\"control()?.id\">\r\n <ng-content select=\"fui-label\"></ng-content>\r\n @if (isRequired() && !readOnly()) {\r\n <span class=\"fui-form-field__required-marker\" [class.--has-error]=\"hasError()\">*</span>\r\n }\r\n </label>\r\n\r\n <!-- Wrapper \u2014 always visible, styled as read-only when applicable -->\r\n <div\r\n class=\"fui-form-field__wrapper\"\r\n [class.fui-form-field__wrapper--readonly]=\"readOnly()\"\r\n (click)=\"onContainerClick($event)\"\r\n >\r\n <!-- Prefix -->\r\n @if (hasPrefix()) {\r\n <div class=\"fui-form-field__prefix\">\r\n <ng-content select=\"[fuiPrefix]\"></ng-content>\r\n </div>\r\n }\r\n\r\n <!-- Infix (contains input) -->\r\n <div class=\"fui-form-field__infix\">\r\n <!-- Input container -->\r\n <div class=\"fui-form-field__input\" #connectionContainer>\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n\r\n <!-- Suffix -->\r\n @if (hasSuffix() || (hasSelectControl() && !isMultipleSelect()) || readOnly()) {\r\n <div class=\"fui-form-field__suffix\">\r\n <!-- User-projected suffix content -->\r\n <ng-content select=\"[fuiSuffix]\"></ng-content>\r\n\r\n <!-- Dropdown icon for select elements (not multiple) \u2014 hidden in readOnly -->\r\n @if (hasSelectControl() && !isMultipleSelect() && !readOnly()) {\r\n <div class=\"fui-form-field__select-icon\">\r\n <fui-icon name=\"caret-down\" size=\"sm\"></fui-icon>\r\n </div>\r\n }\r\n\r\n <!-- Copy button \u2014 visible only in readOnly on hover -->\r\n @if (readOnly()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-form-field__copy-btn\"\r\n (click)=\"copyValue(); $event.stopPropagation()\"\r\n [attr.aria-label]=\"copied() ? intl.copiedAriaLabel : intl.copyAriaLabel\"\r\n >\r\n <fui-icon [name]=\"copied() ? 'check' : 'copy'\" size=\"sm\"></fui-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (!hideSubscript()) {\r\n <!-- Helper text and error messages container -->\r\n <div class=\"fui-form-field__subscript-wrapper\">\r\n <!-- Error messages -->\r\n @if (hasError()) {\r\n <div class=\"fui-form-field__error-wrapper fui-animate-slide-in-top\">\r\n <div class=\"fui-form-field__error\" [attr.id]=\"errorId\">\r\n <ng-content select=\"fui-error\"></ng-content>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Hint text -->\r\n <div class=\"fui-form-field__hint-wrapper fui-animate-fade\">\r\n <div class=\"fui-form-field__hint\" [attr.id]=\"hintId\">\r\n <ng-content select=\"fui-hint\"></ng-content>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-form-field{--fui-form-field-height: var(--fui-input-height);--fui-form-field-font-size: var(--fui-font-size-02);--fui-form-field-border-radius: var(--fui-border-radius-sm);--fui-form-field-padding-x: var(--fui-spacing-04);--fui-form-field-bg: var(--fui-surface-02);--fui-form-field-border-color: var(--fui-border-color);--fui-form-field-label-color: var(--fui-text-primary);--fui-form-field-label-font-size: var(--fui-font-size-01);--fui-form-field-label-spacing: var(--fui-spacing-02);--fui-form-field-hint-color: var(--fui-text-secondary);--fui-form-field-error-color: var(--fui-field-border-error);display:block;position:relative;font-family:var(--fui-font-family-sans);font-size:var(--fui-form-field-font-size)}.fui-form-field__container{display:block;width:100%}.fui-form-field__wrapper{position:relative;display:flex;align-items:center;width:100%;min-height:var(--fui-form-field-height);cursor:text;transition:background-color,border-color,box-shadow var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms;background-color:var(--fui-form-field-bg);border:var(--fui-border-width-sm) solid var(--fui-form-field-border-color);border-radius:var(--fui-form-field-border-radius);padding:0 var(--fui-form-field-padding-x);box-shadow:var(--fui-shadow-01)}.fui-form-field:hover:not(.fui-form-field--disabled):not(.fui-form-field--readonly) .fui-form-field__wrapper{background-color:var(--fui-surface-01);border-color:var(--fui-primary)}.fui-form-field:hover:not(.fui-form-field--disabled):not(.fui-form-field--readonly) .fui-form-field__input input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--fui-surface-01) inset}.fui-form-field.fui-form-field--error .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-state-error);box-shadow:0 0 0 4px var(--fui-danger-50)}.fui-form-field.fui-form-field--error.fui-form-field--focused .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-field-border-error)}.fui-form-field:has(input:focus) .fui-form-field__wrapper,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-primary)!important;background-color:var(--fui-surface-01);position:relative;box-shadow:0 0 0 4px var(--fui-primary-20)}.fui-form-field:has(input:focus) .fui-form-field__input input:-webkit-autofill,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__input input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--fui-surface-01) inset}.fui-form-field:has(input:focus) .fui-form-field__prefix,.fui-form-field:has(input:focus) .fui-form-field__suffix,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__prefix,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__suffix{color:var(--fui-primary)}.fui-form-field--disabled:not(.fui-form-field--readonly){opacity:.5}.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__wrapper{box-shadow:none;cursor:not-allowed}.fui-form-field--disabled:not(.fui-form-field--readonly) input,.fui-form-field--disabled:not(.fui-form-field--readonly) textarea,.fui-form-field--disabled:not(.fui-form-field--readonly) select{cursor:not-allowed}.fui-form-field--readonly .fui-form-field__label{color:var(--fui-text-secondary)}.fui-form-field--readonly .fui-form-field__wrapper{cursor:default;background-color:var(--fui-surface-02);border-color:var(--fui-border-color);box-shadow:none}.fui-form-field--readonly:has(input:focus) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-color)!important;box-shadow:none;background-color:var(--fui-surface-00)}.fui-form-field--readonly:has(input:focus) .fui-form-field__prefix,.fui-form-field--readonly:has(input:focus) .fui-form-field__suffix{color:var(--fui-text-secondary)}.fui-form-field--readonly .fui-form-field__input input,.fui-form-field--readonly .fui-form-field__input textarea,.fui-form-field--readonly .fui-form-field__input select{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-form-field--readonly .fui-form-field__input input::placeholder,.fui-form-field--readonly .fui-form-field__input textarea::placeholder,.fui-form-field--readonly .fui-form-field__input select::placeholder{color:transparent;-webkit-text-fill-color:transparent}.fui-form-field--readonly .fui-form-field__wrapper:hover .fui-form-field__copy-btn{opacity:1;pointer-events:auto}.fui-form-field__prefix,.fui-form-field__suffix{display:flex;align-items:center;white-space:nowrap;flex:0 0 auto;position:relative;z-index:2;padding:0 var(--fui-spacing-02);color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field--focused .fui-form-field__prefix,.fui-form-field--focused .fui-form-field__suffix{color:var(--fui-field-border-focus)}.fui-form-field--error .fui-form-field__prefix,.fui-form-field--error .fui-form-field__suffix{color:var(--fui-field-border-error)}.fui-form-field--disabled .fui-form-field__prefix,.fui-form-field--disabled .fui-form-field__suffix{color:var(--fui-text-secondary)}.fui-form-field__select-icon{display:flex;align-items:center;justify-content:center;width:var(--fui-icon-size-sm);height:var(--fui-icon-size-sm);margin-left:var(--fui-spacing-02);color:var(--fui-icon-secondary);pointer-events:none;transition:color,transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field:has(.fui-select--open) .fui-form-field__select-icon{color:var(--fui-field-border-focus);transform:rotate(180deg)}.fui-form-field--error .fui-form-field__select-icon{color:var(--fui-field-border-error)}.fui-form-field--disabled .fui-form-field__select-icon{color:var(--fui-text-secondary)}.fui-form-field__infix{position:relative;flex:1 1 auto;min-width:0;padding:0;z-index:2}.fui-form-field__label{display:block;text-transform:uppercase;margin-bottom:var(--fui-form-field-label-spacing);font-size:var(--fui-form-field-label-font-size);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-wide);color:var(--fui-form-field-label-color);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field__required-marker{color:var(--fui-state-error);margin-left:var(--fui-spacing-02);font-weight:var(--fui-font-weight-regular)}.fui-form-field__input{position:relative;width:100%}.fui-form-field__input input,.fui-form-field__input textarea,.fui-form-field__input select{width:100%;height:100%;border:none;outline:none;background:transparent;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-normal);color:var(--fui-text-primary);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field__input input::placeholder,.fui-form-field__input textarea::placeholder,.fui-form-field__input select::placeholder{color:var(--fui-text-disabled);opacity:1;transition:opacity var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field__input input:focus,.fui-form-field__input textarea:focus,.fui-form-field__input select:focus{outline:none}.fui-form-field__input input:focus-visible,.fui-form-field__input textarea:focus-visible,.fui-form-field__input select:focus-visible{outline:none}.fui-form-field__input input:disabled,.fui-form-field__input textarea:disabled,.fui-form-field__input select:disabled{color:var(--fui-text-secondary);-webkit-text-fill-color:var(--fui-text-secondary)}.fui-form-field__input input:-webkit-autofill,.fui-form-field__input input:-webkit-autofill:hover,.fui-form-field__input input:-webkit-autofill:focus,.fui-form-field__input input:-webkit-autofill:active,.fui-form-field__input textarea:-webkit-autofill,.fui-form-field__input textarea:-webkit-autofill:hover,.fui-form-field__input textarea:-webkit-autofill:focus,.fui-form-field__input textarea:-webkit-autofill:active,.fui-form-field__input select:-webkit-autofill,.fui-form-field__input select:-webkit-autofill:hover,.fui-form-field__input select:-webkit-autofill:focus,.fui-form-field__input select:-webkit-autofill:active{-webkit-box-shadow:0 0 0 100px var(--fui-form-field-bg) inset;-webkit-text-fill-color:var(--fui-text-primary);caret-color:var(--fui-text-primary);transition:background-color 5000s ease-in-out 0s,color 5000s ease-in-out 0s}.fui-form-field__copy-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-form-field__copy-btn:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-form-field__copy-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-border-radius-sm);color:var(--fui-text-secondary);opacity:0;pointer-events:none;transition:opacity,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field__copy-btn:hover{color:var(--fui-primary)}.fui-form-field__subscript-wrapper{position:relative;min-height:1.25rem;padding:var(--fui-spacing-02) 0 0;font-size:var(--fui-font-size-01);line-height:var(--fui-line-height-03);letter-spacing:var(--fui-letter-spacing-wide)}.fui-form-field__error-wrapper{color:var(--fui-form-field-error-color)}.fui-form-field__error{transition:all var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms;font-weight:var(--fui-font-weight-regular)}.fui-form-field__hint-wrapper{color:var(--fui-form-field-hint-color)}.fui-form-field__hint{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms;font-weight:var(--fui-font-weight-regular)}.fui-form-field--error .fui-form-field__hint{opacity:0}.fui-form-field--float .fui-form-field__container{position:relative}.fui-form-field--float .fui-form-field__label{position:absolute;left:var(--fui-spacing-04);top:50%;transform:translateY(-50%);transform-origin:left center;pointer-events:none;z-index:3;margin-bottom:0;font-size:var(--fui-font-size-02);text-transform:none;color:var(--fui-text-secondary);transition:transform,font-size,top,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field--float.fui-form-field--float-active .fui-form-field__label{top:-.5em;transform:translateY(0) scale(.75);font-size:var(--fui-font-size-01);color:var(--fui-primary);background-color:var(--fui-surface-00);padding:0 var(--fui-spacing-02)}.fui-form-field--float.fui-form-field--error.fui-form-field--float-active .fui-form-field__label{color:var(--fui-state-error)}.fui-form-field--float .fui-form-field__wrapper{margin-top:var(--fui-spacing-03)}.fui-form-field--fill .fui-form-field__wrapper{background-color:var(--fui-surface-03);border-bottom:var(--fui-border-width-md) solid var(--fui-form-field-border-color);border-top:none;border-left:none;border-right:none;border-radius:var(--fui-border-radius-sm) var(--fui-border-radius-sm) 0 0;box-shadow:none}.fui-form-field--fill:hover:not(.fui-form-field--disabled) .fui-form-field__wrapper{background-color:var(--fui-surface-04);border-top:none;border-left:none;border-right:none}.fui-form-field--fill.fui-form-field--focused .fui-form-field__wrapper,.fui-form-field--fill:has(input:focus) .fui-form-field__wrapper,.fui-form-field--fill:has(select:focus) .fui-form-field__wrapper{border-bottom-color:var(--fui-primary);border-top:none!important;border-left:none!important;border-right:none!important;box-shadow:none}.fui-form-field--fill.fui-form-field--error .fui-form-field__wrapper{border-bottom-color:var(--fui-state-error);border-top:none;border-left:none;border-right:none;box-shadow:none}.fui-form-field__input textarea{min-height:5rem;resize:vertical;padding:var(--fui-spacing-03) 0;line-height:1.4}.fui-form-field__input select{cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:var(--fui-spacing-06)}.fui-form-field__input select::-ms-expand{display:none}.fui-form-field__input select:disabled{cursor:not-allowed}.fui-form-field__input select option{padding:var(--fui-spacing-02);background-color:var(--fui-surface-00);color:var(--fui-text-primary)}.fui-form-field:has(select:focus) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-primary)!important;background-color:var(--fui-surface-01);position:relative;box-shadow:0 0 0 4px var(--fui-primary-20)}.fui-form-field:has(select:focus) .fui-form-field__prefix,.fui-form-field:has(select:focus) .fui-form-field__suffix{color:var(--fui-primary)}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
339
339
|
}
|
|
340
340
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiFormFieldComponent, decorators: [{
|
|
341
341
|
type: Component,
|
|
@@ -352,7 +352,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
352
352
|
role: 'group',
|
|
353
353
|
'[attr.aria-labelledby]': 'labelId',
|
|
354
354
|
'[attr.aria-disabled]': 'isDisabled() || null',
|
|
355
|
-
}, template: "<div class=\"fui-form-field__container\">\r\n <!-- Label - Carbon Design System style (outside wrapper) -->\r\n <label class=\"fui-form-field__label fui-animate-fade\" [attr.id]=\"labelId\" [attr.for]=\"control()?.id\">\r\n <ng-content select=\"fui-label\"></ng-content>\r\n @if (isRequired() && !readOnly()) {\r\n <span class=\"fui-form-field__required-marker\" [class.--has-error]=\"hasError()\">*</span>\r\n }\r\n </label>\r\n\r\n <!-- Wrapper \u2014 always visible, styled as read-only when applicable -->\r\n <div\r\n class=\"fui-form-field__wrapper\"\r\n [class.fui-form-field__wrapper--readonly]=\"readOnly()\"\r\n (click)=\"onContainerClick($event)\"\r\n >\r\n <!-- Prefix -->\r\n @if (hasPrefix()) {\r\n <div class=\"fui-form-field__prefix\">\r\n <ng-content select=\"[fuiPrefix]\"></ng-content>\r\n </div>\r\n }\r\n\r\n <!-- Infix (contains input) -->\r\n <div class=\"fui-form-field__infix\">\r\n <!-- Input container -->\r\n <div class=\"fui-form-field__input\" #connectionContainer>\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n\r\n <!-- Suffix -->\r\n @if (hasSuffix() || (hasSelectControl() && !isMultipleSelect()) || readOnly()) {\r\n <div class=\"fui-form-field__suffix\">\r\n <!-- User-projected suffix content -->\r\n <ng-content select=\"[fuiSuffix]\"></ng-content>\r\n\r\n <!-- Dropdown icon for select elements (not multiple) \u2014 hidden in readOnly -->\r\n @if (hasSelectControl() && !isMultipleSelect() && !readOnly()) {\r\n <div class=\"fui-form-field__select-icon\">\r\n <fui-icon name=\"caret-down\" size=\"sm\"></fui-icon>\r\n </div>\r\n }\r\n\r\n <!-- Copy button \u2014 visible only in readOnly on hover -->\r\n @if (readOnly()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-form-field__copy-btn\"\r\n (click)=\"copyValue(); $event.stopPropagation()\"\r\n [attr.aria-label]=\"copied() ? intl.copiedAriaLabel : intl.copyAriaLabel\"\r\n >\r\n <fui-icon [name]=\"copied() ? 'check' : 'copy'\" size=\"sm\"></fui-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (!hideSubscript()) {\r\n <!-- Helper text and error messages container -->\r\n <div class=\"fui-form-field__subscript-wrapper\">\r\n <!-- Error messages -->\r\n @if (hasError()) {\r\n <div class=\"fui-form-field__error-wrapper fui-animate-slide-in-top\">\r\n <div class=\"fui-form-field__error\" [attr.id]=\"errorId\">\r\n <ng-content select=\"fui-error\"></ng-content>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Hint text -->\r\n <div class=\"fui-form-field__hint-wrapper fui-animate-fade\">\r\n <div class=\"fui-form-field__hint\" [attr.id]=\"hintId\">\r\n <ng-content select=\"fui-hint\"></ng-content>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-form-field{--fui-form-field-height: var(--fui-input-height);--fui-form-field-font-size: var(--fui-font-size-02);--fui-form-field-border-radius: var(--fui-border-radius-sm);--fui-form-field-padding-x: var(--fui-spacing-04);--fui-form-field-bg: var(--fui-surface-02);--fui-form-field-border-color: var(--fui-border-color);--fui-form-field-label-color: var(--fui-text-primary);--fui-form-field-label-font-size: var(--fui-font-size-01);--fui-form-field-label-spacing: var(--fui-spacing-02);--fui-form-field-hint-color: var(--fui-text-secondary);--fui-form-field-error-color: var(--fui-field-border-error);display:block;position:relative;font-family:var(--fui-font-family-sans);font-size:var(--fui-form-field-font-size)}.fui-form-field__container{display:block;width:100%}.fui-form-field__wrapper{position:relative;display:flex;align-items:center;width:100%;min-height:var(--fui-form-field-height);cursor:text;transition:background-color,border-color,box-shadow var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms;background-color:var(--fui-form-field-bg);border:var(--fui-border-width-sm) solid var(--fui-form-field-border-color);border-radius:var(--fui-form-field-border-radius);padding:0 var(--fui-form-field-padding-x);box-shadow:var(--fui-shadow-01)}.fui-form-field:hover:not(.fui-form-field--disabled):not(.fui-form-field--readonly) .fui-form-field__wrapper{background-color:var(--fui-surface-01);border-color:var(--fui-primary)}.fui-form-field.fui-form-field--error .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-state-error);box-shadow:0 0 0 4px var(--fui-danger-50)}.fui-form-field.fui-form-field--error.fui-form-field--focused .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-field-border-error)}.fui-form-field:has(input:focus) .fui-form-field__wrapper,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-primary)!important;background-color:var(--fui-surface-01);position:relative;box-shadow:0 0 0 4px var(--fui-primary-20)}.fui-form-field:has(input:focus) .fui-form-field__prefix,.fui-form-field:has(input:focus) .fui-form-field__suffix,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__prefix,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__suffix{color:var(--fui-primary)}.fui-form-field--disabled:not(.fui-form-field--readonly){opacity:.5}.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__wrapper{box-shadow:none;cursor:not-allowed}.fui-form-field--disabled:not(.fui-form-field--readonly) input,.fui-form-field--disabled:not(.fui-form-field--readonly) textarea,.fui-form-field--disabled:not(.fui-form-field--readonly) select{cursor:not-allowed}.fui-form-field--readonly .fui-form-field__label{color:var(--fui-text-secondary)}.fui-form-field--readonly .fui-form-field__wrapper{cursor:default;background-color:var(--fui-surface-02);border-color:var(--fui-border-color);box-shadow:none}.fui-form-field--readonly:has(input:focus) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-color)!important;box-shadow:none;background-color:var(--fui-surface-00)}.fui-form-field--readonly:has(input:focus) .fui-form-field__prefix,.fui-form-field--readonly:has(input:focus) .fui-form-field__suffix{color:var(--fui-text-secondary)}.fui-form-field--readonly .fui-form-field__input input,.fui-form-field--readonly .fui-form-field__input textarea,.fui-form-field--readonly .fui-form-field__input select{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-form-field--readonly .fui-form-field__input input::placeholder,.fui-form-field--readonly .fui-form-field__input textarea::placeholder,.fui-form-field--readonly .fui-form-field__input select::placeholder{color:transparent;-webkit-text-fill-color:transparent}.fui-form-field--readonly .fui-form-field__wrapper:hover .fui-form-field__copy-btn{opacity:1;pointer-events:auto}.fui-form-field__prefix,.fui-form-field__suffix{display:flex;align-items:center;white-space:nowrap;flex:0 0 auto;position:relative;z-index:2;padding:0 var(--fui-spacing-02);color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field--focused .fui-form-field__prefix,.fui-form-field--focused .fui-form-field__suffix{color:var(--fui-field-border-focus)}.fui-form-field--error .fui-form-field__prefix,.fui-form-field--error .fui-form-field__suffix{color:var(--fui-field-border-error)}.fui-form-field--disabled .fui-form-field__prefix,.fui-form-field--disabled .fui-form-field__suffix{color:var(--fui-text-secondary)}.fui-form-field__select-icon{display:flex;align-items:center;justify-content:center;width:var(--fui-icon-size-sm);height:var(--fui-icon-size-sm);margin-left:var(--fui-spacing-02);color:var(--fui-icon-secondary);pointer-events:none;transition:color,transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field:has(.fui-select--open) .fui-form-field__select-icon{color:var(--fui-field-border-focus);transform:rotate(180deg)}.fui-form-field--error .fui-form-field__select-icon{color:var(--fui-field-border-error)}.fui-form-field--disabled .fui-form-field__select-icon{color:var(--fui-text-secondary)}.fui-form-field__infix{position:relative;flex:1 1 auto;min-width:0;padding:0;z-index:2}.fui-form-field__label{display:block;text-transform:uppercase;margin-bottom:var(--fui-form-field-label-spacing);font-size:var(--fui-form-field-label-font-size);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-wide);color:var(--fui-form-field-label-color);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field__required-marker{color:var(--fui-state-error);margin-left:var(--fui-spacing-02);font-weight:var(--fui-font-weight-regular)}.fui-form-field__input{position:relative;width:100%}.fui-form-field__input input,.fui-form-field__input textarea,.fui-form-field__input select{width:100%;height:100%;border:none;outline:none;background:transparent;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-normal);color:var(--fui-text-primary);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field__input input::placeholder,.fui-form-field__input textarea::placeholder,.fui-form-field__input select::placeholder{color:var(--fui-text-disabled);opacity:1;transition:opacity var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field__input input:focus,.fui-form-field__input textarea:focus,.fui-form-field__input select:focus{outline:none}.fui-form-field__input input:focus-visible,.fui-form-field__input textarea:focus-visible,.fui-form-field__input select:focus-visible{outline:none}.fui-form-field__input input:disabled,.fui-form-field__input textarea:disabled,.fui-form-field__input select:disabled{color:var(--fui-text-secondary);-webkit-text-fill-color:var(--fui-text-secondary)}.fui-form-field__input input:-webkit-autofill,.fui-form-field__input textarea:-webkit-autofill,.fui-form-field__input select:-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--fui-field-background) inset;-webkit-text-fill-color:var(--fui-text-primary);transition:background-color 5000s ease-in-out 0s}.fui-form-field__copy-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-form-field__copy-btn:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-form-field__copy-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-border-radius-sm);color:var(--fui-text-secondary);opacity:0;pointer-events:none;transition:opacity,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field__copy-btn:hover{color:var(--fui-primary)}.fui-form-field__subscript-wrapper{position:relative;min-height:1.25rem;padding:var(--fui-spacing-02) 0 0;font-size:var(--fui-font-size-01);line-height:var(--fui-line-height-03);letter-spacing:var(--fui-letter-spacing-wide)}.fui-form-field__error-wrapper{color:var(--fui-form-field-error-color)}.fui-form-field__error{transition:all var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms;font-weight:var(--fui-font-weight-regular)}.fui-form-field__hint-wrapper{color:var(--fui-form-field-hint-color)}.fui-form-field__hint{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms;font-weight:var(--fui-font-weight-regular)}.fui-form-field--error .fui-form-field__hint{opacity:0}.fui-form-field--float .fui-form-field__container{position:relative}.fui-form-field--float .fui-form-field__label{position:absolute;left:var(--fui-spacing-04);top:50%;transform:translateY(-50%);transform-origin:left center;pointer-events:none;z-index:3;margin-bottom:0;font-size:var(--fui-font-size-02);text-transform:none;color:var(--fui-text-secondary);transition:transform,font-size,top,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field--float.fui-form-field--float-active .fui-form-field__label{top:-.5em;transform:translateY(0) scale(.75);font-size:var(--fui-font-size-01);color:var(--fui-primary);background-color:var(--fui-surface-00);padding:0 var(--fui-spacing-02)}.fui-form-field--float.fui-form-field--error.fui-form-field--float-active .fui-form-field__label{color:var(--fui-state-error)}.fui-form-field--float .fui-form-field__wrapper{margin-top:var(--fui-spacing-03)}.fui-form-field--fill .fui-form-field__wrapper{background-color:var(--fui-surface-03);border-bottom:var(--fui-border-width-md) solid var(--fui-form-field-border-color);border-top:none;border-left:none;border-right:none;border-radius:var(--fui-border-radius-sm) var(--fui-border-radius-sm) 0 0;box-shadow:none}.fui-form-field--fill:hover:not(.fui-form-field--disabled) .fui-form-field__wrapper{background-color:var(--fui-surface-04);border-top:none;border-left:none;border-right:none}.fui-form-field--fill.fui-form-field--focused .fui-form-field__wrapper,.fui-form-field--fill:has(input:focus) .fui-form-field__wrapper,.fui-form-field--fill:has(select:focus) .fui-form-field__wrapper{border-bottom-color:var(--fui-primary);border-top:none!important;border-left:none!important;border-right:none!important;box-shadow:none}.fui-form-field--fill.fui-form-field--error .fui-form-field__wrapper{border-bottom-color:var(--fui-state-error);border-top:none;border-left:none;border-right:none;box-shadow:none}.fui-form-field__input textarea{min-height:5rem;resize:vertical;padding:var(--fui-spacing-03) 0;line-height:1.4}.fui-form-field__input select{cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:var(--fui-spacing-06)}.fui-form-field__input select::-ms-expand{display:none}.fui-form-field__input select:disabled{cursor:not-allowed}.fui-form-field__input select option{padding:var(--fui-spacing-02);background-color:var(--fui-surface-00);color:var(--fui-text-primary)}.fui-form-field:has(select:focus) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-primary)!important;background-color:var(--fui-surface-01);position:relative;box-shadow:0 0 0 4px var(--fui-primary-20)}.fui-form-field:has(select:focus) .fui-form-field__prefix,.fui-form-field:has(select:focus) .fui-form-field__suffix{color:var(--fui-primary)}\n"] }]
|
|
355
|
+
}, template: "<div class=\"fui-form-field__container\">\r\n <!-- Label - Carbon Design System style (outside wrapper) -->\r\n <label class=\"fui-form-field__label fui-animate-fade\" [attr.id]=\"labelId\" [attr.for]=\"control()?.id\">\r\n <ng-content select=\"fui-label\"></ng-content>\r\n @if (isRequired() && !readOnly()) {\r\n <span class=\"fui-form-field__required-marker\" [class.--has-error]=\"hasError()\">*</span>\r\n }\r\n </label>\r\n\r\n <!-- Wrapper \u2014 always visible, styled as read-only when applicable -->\r\n <div\r\n class=\"fui-form-field__wrapper\"\r\n [class.fui-form-field__wrapper--readonly]=\"readOnly()\"\r\n (click)=\"onContainerClick($event)\"\r\n >\r\n <!-- Prefix -->\r\n @if (hasPrefix()) {\r\n <div class=\"fui-form-field__prefix\">\r\n <ng-content select=\"[fuiPrefix]\"></ng-content>\r\n </div>\r\n }\r\n\r\n <!-- Infix (contains input) -->\r\n <div class=\"fui-form-field__infix\">\r\n <!-- Input container -->\r\n <div class=\"fui-form-field__input\" #connectionContainer>\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n\r\n <!-- Suffix -->\r\n @if (hasSuffix() || (hasSelectControl() && !isMultipleSelect()) || readOnly()) {\r\n <div class=\"fui-form-field__suffix\">\r\n <!-- User-projected suffix content -->\r\n <ng-content select=\"[fuiSuffix]\"></ng-content>\r\n\r\n <!-- Dropdown icon for select elements (not multiple) \u2014 hidden in readOnly -->\r\n @if (hasSelectControl() && !isMultipleSelect() && !readOnly()) {\r\n <div class=\"fui-form-field__select-icon\">\r\n <fui-icon name=\"caret-down\" size=\"sm\"></fui-icon>\r\n </div>\r\n }\r\n\r\n <!-- Copy button \u2014 visible only in readOnly on hover -->\r\n @if (readOnly()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-form-field__copy-btn\"\r\n (click)=\"copyValue(); $event.stopPropagation()\"\r\n [attr.aria-label]=\"copied() ? intl.copiedAriaLabel : intl.copyAriaLabel\"\r\n >\r\n <fui-icon [name]=\"copied() ? 'check' : 'copy'\" size=\"sm\"></fui-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (!hideSubscript()) {\r\n <!-- Helper text and error messages container -->\r\n <div class=\"fui-form-field__subscript-wrapper\">\r\n <!-- Error messages -->\r\n @if (hasError()) {\r\n <div class=\"fui-form-field__error-wrapper fui-animate-slide-in-top\">\r\n <div class=\"fui-form-field__error\" [attr.id]=\"errorId\">\r\n <ng-content select=\"fui-error\"></ng-content>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Hint text -->\r\n <div class=\"fui-form-field__hint-wrapper fui-animate-fade\">\r\n <div class=\"fui-form-field__hint\" [attr.id]=\"hintId\">\r\n <ng-content select=\"fui-hint\"></ng-content>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-form-field{--fui-form-field-height: var(--fui-input-height);--fui-form-field-font-size: var(--fui-font-size-02);--fui-form-field-border-radius: var(--fui-border-radius-sm);--fui-form-field-padding-x: var(--fui-spacing-04);--fui-form-field-bg: var(--fui-surface-02);--fui-form-field-border-color: var(--fui-border-color);--fui-form-field-label-color: var(--fui-text-primary);--fui-form-field-label-font-size: var(--fui-font-size-01);--fui-form-field-label-spacing: var(--fui-spacing-02);--fui-form-field-hint-color: var(--fui-text-secondary);--fui-form-field-error-color: var(--fui-field-border-error);display:block;position:relative;font-family:var(--fui-font-family-sans);font-size:var(--fui-form-field-font-size)}.fui-form-field__container{display:block;width:100%}.fui-form-field__wrapper{position:relative;display:flex;align-items:center;width:100%;min-height:var(--fui-form-field-height);cursor:text;transition:background-color,border-color,box-shadow var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms;background-color:var(--fui-form-field-bg);border:var(--fui-border-width-sm) solid var(--fui-form-field-border-color);border-radius:var(--fui-form-field-border-radius);padding:0 var(--fui-form-field-padding-x);box-shadow:var(--fui-shadow-01)}.fui-form-field:hover:not(.fui-form-field--disabled):not(.fui-form-field--readonly) .fui-form-field__wrapper{background-color:var(--fui-surface-01);border-color:var(--fui-primary)}.fui-form-field:hover:not(.fui-form-field--disabled):not(.fui-form-field--readonly) .fui-form-field__input input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--fui-surface-01) inset}.fui-form-field.fui-form-field--error .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-state-error);box-shadow:0 0 0 4px var(--fui-danger-50)}.fui-form-field.fui-form-field--error.fui-form-field--focused .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-field-border-error)}.fui-form-field:has(input:focus) .fui-form-field__wrapper,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-primary)!important;background-color:var(--fui-surface-01);position:relative;box-shadow:0 0 0 4px var(--fui-primary-20)}.fui-form-field:has(input:focus) .fui-form-field__input input:-webkit-autofill,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__input input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--fui-surface-01) inset}.fui-form-field:has(input:focus) .fui-form-field__prefix,.fui-form-field:has(input:focus) .fui-form-field__suffix,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__prefix,.fui-form-field--focused:not(.fui-form-field--error) .fui-form-field__suffix{color:var(--fui-primary)}.fui-form-field--disabled:not(.fui-form-field--readonly){opacity:.5}.fui-form-field--disabled:not(.fui-form-field--readonly) .fui-form-field__wrapper{box-shadow:none;cursor:not-allowed}.fui-form-field--disabled:not(.fui-form-field--readonly) input,.fui-form-field--disabled:not(.fui-form-field--readonly) textarea,.fui-form-field--disabled:not(.fui-form-field--readonly) select{cursor:not-allowed}.fui-form-field--readonly .fui-form-field__label{color:var(--fui-text-secondary)}.fui-form-field--readonly .fui-form-field__wrapper{cursor:default;background-color:var(--fui-surface-02);border-color:var(--fui-border-color);box-shadow:none}.fui-form-field--readonly:has(input:focus) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-border-color)!important;box-shadow:none;background-color:var(--fui-surface-00)}.fui-form-field--readonly:has(input:focus) .fui-form-field__prefix,.fui-form-field--readonly:has(input:focus) .fui-form-field__suffix{color:var(--fui-text-secondary)}.fui-form-field--readonly .fui-form-field__input input,.fui-form-field--readonly .fui-form-field__input textarea,.fui-form-field--readonly .fui-form-field__input select{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-form-field--readonly .fui-form-field__input input::placeholder,.fui-form-field--readonly .fui-form-field__input textarea::placeholder,.fui-form-field--readonly .fui-form-field__input select::placeholder{color:transparent;-webkit-text-fill-color:transparent}.fui-form-field--readonly .fui-form-field__wrapper:hover .fui-form-field__copy-btn{opacity:1;pointer-events:auto}.fui-form-field__prefix,.fui-form-field__suffix{display:flex;align-items:center;white-space:nowrap;flex:0 0 auto;position:relative;z-index:2;padding:0 var(--fui-spacing-02);color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field--focused .fui-form-field__prefix,.fui-form-field--focused .fui-form-field__suffix{color:var(--fui-field-border-focus)}.fui-form-field--error .fui-form-field__prefix,.fui-form-field--error .fui-form-field__suffix{color:var(--fui-field-border-error)}.fui-form-field--disabled .fui-form-field__prefix,.fui-form-field--disabled .fui-form-field__suffix{color:var(--fui-text-secondary)}.fui-form-field__select-icon{display:flex;align-items:center;justify-content:center;width:var(--fui-icon-size-sm);height:var(--fui-icon-size-sm);margin-left:var(--fui-spacing-02);color:var(--fui-icon-secondary);pointer-events:none;transition:color,transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field:has(.fui-select--open) .fui-form-field__select-icon{color:var(--fui-field-border-focus);transform:rotate(180deg)}.fui-form-field--error .fui-form-field__select-icon{color:var(--fui-field-border-error)}.fui-form-field--disabled .fui-form-field__select-icon{color:var(--fui-text-secondary)}.fui-form-field__infix{position:relative;flex:1 1 auto;min-width:0;padding:0;z-index:2}.fui-form-field__label{display:block;text-transform:uppercase;margin-bottom:var(--fui-form-field-label-spacing);font-size:var(--fui-form-field-label-font-size);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-wide);color:var(--fui-form-field-label-color);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field__required-marker{color:var(--fui-state-error);margin-left:var(--fui-spacing-02);font-weight:var(--fui-font-weight-regular)}.fui-form-field__input{position:relative;width:100%}.fui-form-field__input input,.fui-form-field__input textarea,.fui-form-field__input select{width:100%;height:100%;border:none;outline:none;background:transparent;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-normal);color:var(--fui-text-primary);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field__input input::placeholder,.fui-form-field__input textarea::placeholder,.fui-form-field__input select::placeholder{color:var(--fui-text-disabled);opacity:1;transition:opacity var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field__input input:focus,.fui-form-field__input textarea:focus,.fui-form-field__input select:focus{outline:none}.fui-form-field__input input:focus-visible,.fui-form-field__input textarea:focus-visible,.fui-form-field__input select:focus-visible{outline:none}.fui-form-field__input input:disabled,.fui-form-field__input textarea:disabled,.fui-form-field__input select:disabled{color:var(--fui-text-secondary);-webkit-text-fill-color:var(--fui-text-secondary)}.fui-form-field__input input:-webkit-autofill,.fui-form-field__input input:-webkit-autofill:hover,.fui-form-field__input input:-webkit-autofill:focus,.fui-form-field__input input:-webkit-autofill:active,.fui-form-field__input textarea:-webkit-autofill,.fui-form-field__input textarea:-webkit-autofill:hover,.fui-form-field__input textarea:-webkit-autofill:focus,.fui-form-field__input textarea:-webkit-autofill:active,.fui-form-field__input select:-webkit-autofill,.fui-form-field__input select:-webkit-autofill:hover,.fui-form-field__input select:-webkit-autofill:focus,.fui-form-field__input select:-webkit-autofill:active{-webkit-box-shadow:0 0 0 100px var(--fui-form-field-bg) inset;-webkit-text-fill-color:var(--fui-text-primary);caret-color:var(--fui-text-primary);transition:background-color 5000s ease-in-out 0s,color 5000s ease-in-out 0s}.fui-form-field__copy-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-form-field__copy-btn:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-form-field__copy-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-border-radius-sm);color:var(--fui-text-secondary);opacity:0;pointer-events:none;transition:opacity,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field__copy-btn:hover{color:var(--fui-primary)}.fui-form-field__subscript-wrapper{position:relative;min-height:1.25rem;padding:var(--fui-spacing-02) 0 0;font-size:var(--fui-font-size-01);line-height:var(--fui-line-height-03);letter-spacing:var(--fui-letter-spacing-wide)}.fui-form-field__error-wrapper{color:var(--fui-form-field-error-color)}.fui-form-field__error{transition:all var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms;font-weight:var(--fui-font-weight-regular)}.fui-form-field__hint-wrapper{color:var(--fui-form-field-hint-color)}.fui-form-field__hint{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms;font-weight:var(--fui-font-weight-regular)}.fui-form-field--error .fui-form-field__hint{opacity:0}.fui-form-field--float .fui-form-field__container{position:relative}.fui-form-field--float .fui-form-field__label{position:absolute;left:var(--fui-spacing-04);top:50%;transform:translateY(-50%);transform-origin:left center;pointer-events:none;z-index:3;margin-bottom:0;font-size:var(--fui-font-size-02);text-transform:none;color:var(--fui-text-secondary);transition:transform,font-size,top,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-form-field--float.fui-form-field--float-active .fui-form-field__label{top:-.5em;transform:translateY(0) scale(.75);font-size:var(--fui-font-size-01);color:var(--fui-primary);background-color:var(--fui-surface-00);padding:0 var(--fui-spacing-02)}.fui-form-field--float.fui-form-field--error.fui-form-field--float-active .fui-form-field__label{color:var(--fui-state-error)}.fui-form-field--float .fui-form-field__wrapper{margin-top:var(--fui-spacing-03)}.fui-form-field--fill .fui-form-field__wrapper{background-color:var(--fui-surface-03);border-bottom:var(--fui-border-width-md) solid var(--fui-form-field-border-color);border-top:none;border-left:none;border-right:none;border-radius:var(--fui-border-radius-sm) var(--fui-border-radius-sm) 0 0;box-shadow:none}.fui-form-field--fill:hover:not(.fui-form-field--disabled) .fui-form-field__wrapper{background-color:var(--fui-surface-04);border-top:none;border-left:none;border-right:none}.fui-form-field--fill.fui-form-field--focused .fui-form-field__wrapper,.fui-form-field--fill:has(input:focus) .fui-form-field__wrapper,.fui-form-field--fill:has(select:focus) .fui-form-field__wrapper{border-bottom-color:var(--fui-primary);border-top:none!important;border-left:none!important;border-right:none!important;box-shadow:none}.fui-form-field--fill.fui-form-field--error .fui-form-field__wrapper{border-bottom-color:var(--fui-state-error);border-top:none;border-left:none;border-right:none;box-shadow:none}.fui-form-field__input textarea{min-height:5rem;resize:vertical;padding:var(--fui-spacing-03) 0;line-height:1.4}.fui-form-field__input select{cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:var(--fui-spacing-06)}.fui-form-field__input select::-ms-expand{display:none}.fui-form-field__input select:disabled{cursor:not-allowed}.fui-form-field__input select option{padding:var(--fui-spacing-02);background-color:var(--fui-surface-00);color:var(--fui-text-primary)}.fui-form-field:has(select:focus) .fui-form-field__wrapper{border:var(--fui-border-width-sm) solid var(--fui-primary)!important;background-color:var(--fui-surface-01);position:relative;box-shadow:0 0 0 4px var(--fui-primary-20)}.fui-form-field:has(select:focus) .fui-form-field__prefix,.fui-form-field:has(select:focus) .fui-form-field__suffix{color:var(--fui-primary)}\n"] }]
|
|
356
356
|
}], ctorParameters: () => [], propDecorators: { readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], hideRequiredMarker: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideRequiredMarker", required: false }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FUI_FORM_FIELD_CONTROL), { isSignal: true }] }], _prefixes: [{
|
|
357
357
|
type: ContentChildren,
|
|
358
358
|
args: [FuiPrefixDirective, { descendants: true }]
|