@raintonic/formaui 0.3.0 → 0.4.0
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-cdk-overlay.mjs +8 -1
- package/fesm2022/raintonic-formaui-cdk-overlay.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-checkbox.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-checkbox.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-date-picker.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-date-picker.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-menu.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-menu.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-paginator.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-paginator.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-popover.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-popover.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-select.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-select.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-time-picker.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-time-picker.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-cdk-overlay.d.ts.map +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":"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"}
|
|
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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"}
|
|
@@ -1324,7 +1324,7 @@ class FuiDatePickerComponent {
|
|
|
1324
1324
|
provide: FUI_FORM_FIELD_CONTROL,
|
|
1325
1325
|
useExisting: FuiDatePickerComponent,
|
|
1326
1326
|
},
|
|
1327
|
-
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "calendarPanel", first: true, predicate: ["calendarPanel"], descendants: true }, { propertyName: "startInputEl", first: true, predicate: ["startInput"], descendants: true }, { propertyName: "endInputEl", first: true, predicate: ["endInput"], descendants: true }, { propertyName: "calendarComponent", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "<!-- Trigger area -->\r\n<div #triggerEl class=\"fui-date-picker__trigger\" (click)=\"onTriggerClick()\">\r\n <!-- Start input -->\r\n <input\r\n #startInput\r\n class=\"fui-date-picker__input\"\r\n [id]=\"id\"\r\n [value]=\"startInputText()\"\r\n [placeholder]=\"getStartPlaceholder()\"\r\n [disabled]=\"disabled()\"\r\n [readonly]=\"readonly()\"\r\n [attr.aria-describedby]=\"_ariaDescribedby\"\r\n [attr.aria-required]=\"required()\"\r\n [attr.aria-invalid]=\"errorState()\"\r\n [attr.aria-expanded]=\"panelOpen()\"\r\n aria-haspopup=\"dialog\"\r\n aria-autocomplete=\"none\"\r\n role=\"combobox\"\r\n inputmode=\"numeric\"\r\n autocomplete=\"off\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onBlur()\"\r\n (focus)=\"onInputFocus()\"\r\n (keydown)=\"onKeydown($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n\r\n <!-- Range separator + end input -->\r\n @if (range()) {\r\n <span class=\"fui-date-picker__range-separator\" aria-hidden=\"true\">{{ rangeSeparator() }}</span>\r\n <input\r\n #endInput\r\n class=\"fui-date-picker__input fui-date-picker__input--end\"\r\n [value]=\"endInputText()\"\r\n [placeholder]=\"getEndPlaceholder()\"\r\n [disabled]=\"disabled()\"\r\n [readonly]=\"readonly()\"\r\n [attr.aria-label]=\"intl.endDateAriaLabel\"\r\n [attr.aria-invalid]=\"errorState()\"\r\n inputmode=\"numeric\"\r\n autocomplete=\"off\"\r\n (input)=\"onEndInput($event)\"\r\n (blur)=\"onEndBlur()\"\r\n (focus)=\"onInputFocus()\"\r\n (keydown)=\"onEndKeydown($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n\r\n <!-- Calendar toggle button \u2014 hidden in readOnly mode -->\r\n @if (!_readOnly()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-date-picker__toggle\"\r\n tabindex=\"-1\"\r\n [attr.aria-expanded]=\"panelOpen()\"\r\n [disabled]=\"disabled()\"\r\n aria-haspopup=\"dialog\"\r\n [attr.aria-label]=\"intl.openCalendarAriaLabel\"\r\n (click)=\"onToggleClick($event)\"\r\n >\r\n <fui-icon name=\"calendar-blank\" size=\"sm\" />\r\n </button>\r\n }\r\n</div>\r\n\r\n<!-- Calendar panel -->\r\n@if (panelOpen()) {\r\n <div\r\n #calendarPanel\r\n class=\"fui-date-picker__panel\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n [attr.aria-label]=\"intl.calendarDialogAriaLabel\"\r\n >\r\n <fui-calendar\r\n #calendar\r\n [selected]=\"selectedDate()\"\r\n [rangeStart]=\"rangeStartDate()\"\r\n [rangeEnd]=\"rangeEndDate()\"\r\n [range]=\"range()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [dateFilter]=\"dateFilter()\"\r\n [startAt]=\"startAt()\"\r\n [firstDayOfWeek]=\"firstDayOfWeek()\"\r\n [hoveredDate]=\"hoveredDate()\"\r\n (dateSelected)=\"onDateSelected($event)\"\r\n (dateHovered)=\"onDateHovered($event)\"\r\n />\r\n </div>\r\n}\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-date-picker{--fui-date-picker-font-size: var(--fui-font-size-02);--fui-date-picker-toggle-size: 1.5rem;display:inline-block;width:100%;position:relative}.fui-date-picker__trigger{width:100%;min-height:100%;display:flex;align-items:center;gap:var(--fui-spacing-01);cursor:pointer;background:transparent;border:none}.fui-date-picker__input{flex:1;min-width:0;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);padding:0;cursor:text}.fui-date-picker__input::placeholder{color:var(--fui-text-disabled)}.fui-date-picker__input:disabled{cursor:not-allowed;opacity:.5}.fui-date-picker__range-separator{flex-shrink:0;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);-webkit-user-select:none;user-select:none}.fui-date-picker__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-date-picker__toggle:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-date-picker__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;color:var(--fui-text-secondary);border-radius:var(--fui-border-radius-sm);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-date-picker__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-date-picker__toggle:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-date-picker--disabled{pointer-events:none}.fui-date-picker--disabled .fui-date-picker__trigger{cursor:not-allowed;opacity:.5}.fui-date-picker--readonly{pointer-events:none}.fui-date-picker--readonly .fui-date-picker__trigger{cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input:disabled{opacity:1;cursor:default}.fui-date-picker__panel{--fui-date-picker-panel-border-radius: var(--fui-border-radius-md);--fui-date-picker-panel-shadow: var(--fui-shadow-04);--fui-date-picker-panel-bg: var(--fui-surface-00);--fui-date-picker-panel-border-color: var(--fui-border-color);background:var(--fui-date-picker-panel-bg);border:1px solid var(--fui-date-picker-panel-border-color);border-radius:var(--fui-date-picker-panel-border-radius);box-shadow:var(--fui-date-picker-panel-shadow);padding:var(--fui-spacing-02);transform-origin:top center;animation:fui-popover-enter var(--fui-duration-moderate-01) var(--fui-ease-entrance) both;will-change:transform,opacity}.fui-date-picker-backdrop{background:transparent}
|
|
1327
|
+
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "calendarPanel", first: true, predicate: ["calendarPanel"], descendants: true }, { propertyName: "startInputEl", first: true, predicate: ["startInput"], descendants: true }, { propertyName: "endInputEl", first: true, predicate: ["endInput"], descendants: true }, { propertyName: "calendarComponent", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "<!-- Trigger area -->\r\n<div #triggerEl class=\"fui-date-picker__trigger\" (click)=\"onTriggerClick()\">\r\n <!-- Start input -->\r\n <input\r\n #startInput\r\n class=\"fui-date-picker__input\"\r\n [id]=\"id\"\r\n [value]=\"startInputText()\"\r\n [placeholder]=\"getStartPlaceholder()\"\r\n [disabled]=\"disabled()\"\r\n [readonly]=\"readonly()\"\r\n [attr.aria-describedby]=\"_ariaDescribedby\"\r\n [attr.aria-required]=\"required()\"\r\n [attr.aria-invalid]=\"errorState()\"\r\n [attr.aria-expanded]=\"panelOpen()\"\r\n aria-haspopup=\"dialog\"\r\n aria-autocomplete=\"none\"\r\n role=\"combobox\"\r\n inputmode=\"numeric\"\r\n autocomplete=\"off\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onBlur()\"\r\n (focus)=\"onInputFocus()\"\r\n (keydown)=\"onKeydown($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n\r\n <!-- Range separator + end input -->\r\n @if (range()) {\r\n <span class=\"fui-date-picker__range-separator\" aria-hidden=\"true\">{{ rangeSeparator() }}</span>\r\n <input\r\n #endInput\r\n class=\"fui-date-picker__input fui-date-picker__input--end\"\r\n [value]=\"endInputText()\"\r\n [placeholder]=\"getEndPlaceholder()\"\r\n [disabled]=\"disabled()\"\r\n [readonly]=\"readonly()\"\r\n [attr.aria-label]=\"intl.endDateAriaLabel\"\r\n [attr.aria-invalid]=\"errorState()\"\r\n inputmode=\"numeric\"\r\n autocomplete=\"off\"\r\n (input)=\"onEndInput($event)\"\r\n (blur)=\"onEndBlur()\"\r\n (focus)=\"onInputFocus()\"\r\n (keydown)=\"onEndKeydown($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n\r\n <!-- Calendar toggle button \u2014 hidden in readOnly mode -->\r\n @if (!_readOnly()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-date-picker__toggle\"\r\n tabindex=\"-1\"\r\n [attr.aria-expanded]=\"panelOpen()\"\r\n [disabled]=\"disabled()\"\r\n aria-haspopup=\"dialog\"\r\n [attr.aria-label]=\"intl.openCalendarAriaLabel\"\r\n (click)=\"onToggleClick($event)\"\r\n >\r\n <fui-icon name=\"calendar-blank\" size=\"sm\" />\r\n </button>\r\n }\r\n</div>\r\n\r\n<!-- Calendar panel -->\r\n@if (panelOpen()) {\r\n <div\r\n #calendarPanel\r\n class=\"fui-date-picker__panel\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n [attr.aria-label]=\"intl.calendarDialogAriaLabel\"\r\n >\r\n <fui-calendar\r\n #calendar\r\n [selected]=\"selectedDate()\"\r\n [rangeStart]=\"rangeStartDate()\"\r\n [rangeEnd]=\"rangeEndDate()\"\r\n [range]=\"range()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [dateFilter]=\"dateFilter()\"\r\n [startAt]=\"startAt()\"\r\n [firstDayOfWeek]=\"firstDayOfWeek()\"\r\n [hoveredDate]=\"hoveredDate()\"\r\n (dateSelected)=\"onDateSelected($event)\"\r\n (dateHovered)=\"onDateHovered($event)\"\r\n />\r\n </div>\r\n}\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-date-picker{--fui-date-picker-font-size: var(--fui-font-size-02);--fui-date-picker-toggle-size: 1.5rem;display:inline-block;width:100%;position:relative}.fui-date-picker__trigger{width:100%;min-height:100%;display:flex;align-items:center;gap:var(--fui-spacing-01);cursor:pointer;background:transparent;border:none}.fui-date-picker__input{flex:1;min-width:0;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);padding:0;cursor:text}.fui-date-picker__input::placeholder{color:var(--fui-text-disabled)}.fui-date-picker__input:disabled{cursor:not-allowed;opacity:.5}.fui-date-picker__range-separator{flex-shrink:0;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);-webkit-user-select:none;user-select:none}.fui-date-picker__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-date-picker__toggle:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-date-picker__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;color:var(--fui-text-secondary);border-radius:var(--fui-border-radius-sm);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-date-picker__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-date-picker__toggle:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-date-picker--disabled{pointer-events:none}.fui-date-picker--disabled .fui-date-picker__trigger{cursor:not-allowed;opacity:.5}.fui-date-picker--readonly{pointer-events:none}.fui-date-picker--readonly .fui-date-picker__trigger{cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input:disabled{opacity:1;cursor:default}.fui-date-picker__panel{--fui-date-picker-panel-border-radius: var(--fui-border-radius-md);--fui-date-picker-panel-shadow: var(--fui-shadow-04);--fui-date-picker-panel-bg: var(--fui-surface-00);--fui-date-picker-panel-border-color: var(--fui-border-color);background:var(--fui-date-picker-panel-bg);border:1px solid var(--fui-date-picker-panel-border-color);border-radius:var(--fui-date-picker-panel-border-radius);box-shadow:var(--fui-date-picker-panel-shadow);padding:var(--fui-spacing-02);transform-origin:top center;animation:fui-popover-enter var(--fui-duration-moderate-01) var(--fui-ease-entrance) both;will-change:transform,opacity}.fui-date-picker-backdrop{background:transparent}@media(prefers-contrast:high){.fui-date-picker__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-date-picker__panel{animation:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiCalendarComponent, selector: "fui-calendar", inputs: ["selected", "rangeStart", "rangeEnd", "range", "min", "max", "dateFilter", "startAt", "firstDayOfWeek", "hoveredDate"], outputs: ["dateSelected", "dateHovered", "monthChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1328
1328
|
}
|
|
1329
1329
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDatePickerComponent, decorators: [{
|
|
1330
1330
|
type: Component,
|
|
@@ -1352,7 +1352,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
1352
1352
|
provide: FUI_FORM_FIELD_CONTROL,
|
|
1353
1353
|
useExisting: FuiDatePickerComponent,
|
|
1354
1354
|
},
|
|
1355
|
-
], template: "<!-- Trigger area -->\r\n<div #triggerEl class=\"fui-date-picker__trigger\" (click)=\"onTriggerClick()\">\r\n <!-- Start input -->\r\n <input\r\n #startInput\r\n class=\"fui-date-picker__input\"\r\n [id]=\"id\"\r\n [value]=\"startInputText()\"\r\n [placeholder]=\"getStartPlaceholder()\"\r\n [disabled]=\"disabled()\"\r\n [readonly]=\"readonly()\"\r\n [attr.aria-describedby]=\"_ariaDescribedby\"\r\n [attr.aria-required]=\"required()\"\r\n [attr.aria-invalid]=\"errorState()\"\r\n [attr.aria-expanded]=\"panelOpen()\"\r\n aria-haspopup=\"dialog\"\r\n aria-autocomplete=\"none\"\r\n role=\"combobox\"\r\n inputmode=\"numeric\"\r\n autocomplete=\"off\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onBlur()\"\r\n (focus)=\"onInputFocus()\"\r\n (keydown)=\"onKeydown($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n\r\n <!-- Range separator + end input -->\r\n @if (range()) {\r\n <span class=\"fui-date-picker__range-separator\" aria-hidden=\"true\">{{ rangeSeparator() }}</span>\r\n <input\r\n #endInput\r\n class=\"fui-date-picker__input fui-date-picker__input--end\"\r\n [value]=\"endInputText()\"\r\n [placeholder]=\"getEndPlaceholder()\"\r\n [disabled]=\"disabled()\"\r\n [readonly]=\"readonly()\"\r\n [attr.aria-label]=\"intl.endDateAriaLabel\"\r\n [attr.aria-invalid]=\"errorState()\"\r\n inputmode=\"numeric\"\r\n autocomplete=\"off\"\r\n (input)=\"onEndInput($event)\"\r\n (blur)=\"onEndBlur()\"\r\n (focus)=\"onInputFocus()\"\r\n (keydown)=\"onEndKeydown($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n\r\n <!-- Calendar toggle button \u2014 hidden in readOnly mode -->\r\n @if (!_readOnly()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-date-picker__toggle\"\r\n tabindex=\"-1\"\r\n [attr.aria-expanded]=\"panelOpen()\"\r\n [disabled]=\"disabled()\"\r\n aria-haspopup=\"dialog\"\r\n [attr.aria-label]=\"intl.openCalendarAriaLabel\"\r\n (click)=\"onToggleClick($event)\"\r\n >\r\n <fui-icon name=\"calendar-blank\" size=\"sm\" />\r\n </button>\r\n }\r\n</div>\r\n\r\n<!-- Calendar panel -->\r\n@if (panelOpen()) {\r\n <div\r\n #calendarPanel\r\n class=\"fui-date-picker__panel\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n [attr.aria-label]=\"intl.calendarDialogAriaLabel\"\r\n >\r\n <fui-calendar\r\n #calendar\r\n [selected]=\"selectedDate()\"\r\n [rangeStart]=\"rangeStartDate()\"\r\n [rangeEnd]=\"rangeEndDate()\"\r\n [range]=\"range()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [dateFilter]=\"dateFilter()\"\r\n [startAt]=\"startAt()\"\r\n [firstDayOfWeek]=\"firstDayOfWeek()\"\r\n [hoveredDate]=\"hoveredDate()\"\r\n (dateSelected)=\"onDateSelected($event)\"\r\n (dateHovered)=\"onDateHovered($event)\"\r\n />\r\n </div>\r\n}\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-date-picker{--fui-date-picker-font-size: var(--fui-font-size-02);--fui-date-picker-toggle-size: 1.5rem;display:inline-block;width:100%;position:relative}.fui-date-picker__trigger{width:100%;min-height:100%;display:flex;align-items:center;gap:var(--fui-spacing-01);cursor:pointer;background:transparent;border:none}.fui-date-picker__input{flex:1;min-width:0;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);padding:0;cursor:text}.fui-date-picker__input::placeholder{color:var(--fui-text-disabled)}.fui-date-picker__input:disabled{cursor:not-allowed;opacity:.5}.fui-date-picker__range-separator{flex-shrink:0;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);-webkit-user-select:none;user-select:none}.fui-date-picker__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-date-picker__toggle:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-date-picker__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;color:var(--fui-text-secondary);border-radius:var(--fui-border-radius-sm);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-date-picker__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-date-picker__toggle:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-date-picker--disabled{pointer-events:none}.fui-date-picker--disabled .fui-date-picker__trigger{cursor:not-allowed;opacity:.5}.fui-date-picker--readonly{pointer-events:none}.fui-date-picker--readonly .fui-date-picker__trigger{cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input:disabled{opacity:1;cursor:default}.fui-date-picker__panel{--fui-date-picker-panel-border-radius: var(--fui-border-radius-md);--fui-date-picker-panel-shadow: var(--fui-shadow-04);--fui-date-picker-panel-bg: var(--fui-surface-00);--fui-date-picker-panel-border-color: var(--fui-border-color);background:var(--fui-date-picker-panel-bg);border:1px solid var(--fui-date-picker-panel-border-color);border-radius:var(--fui-date-picker-panel-border-radius);box-shadow:var(--fui-date-picker-panel-shadow);padding:var(--fui-spacing-02);transform-origin:top center;animation:fui-popover-enter var(--fui-duration-moderate-01) var(--fui-ease-entrance) both;will-change:transform,opacity}.fui-date-picker-backdrop{background:transparent}
|
|
1355
|
+
], template: "<!-- Trigger area -->\r\n<div #triggerEl class=\"fui-date-picker__trigger\" (click)=\"onTriggerClick()\">\r\n <!-- Start input -->\r\n <input\r\n #startInput\r\n class=\"fui-date-picker__input\"\r\n [id]=\"id\"\r\n [value]=\"startInputText()\"\r\n [placeholder]=\"getStartPlaceholder()\"\r\n [disabled]=\"disabled()\"\r\n [readonly]=\"readonly()\"\r\n [attr.aria-describedby]=\"_ariaDescribedby\"\r\n [attr.aria-required]=\"required()\"\r\n [attr.aria-invalid]=\"errorState()\"\r\n [attr.aria-expanded]=\"panelOpen()\"\r\n aria-haspopup=\"dialog\"\r\n aria-autocomplete=\"none\"\r\n role=\"combobox\"\r\n inputmode=\"numeric\"\r\n autocomplete=\"off\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onBlur()\"\r\n (focus)=\"onInputFocus()\"\r\n (keydown)=\"onKeydown($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n\r\n <!-- Range separator + end input -->\r\n @if (range()) {\r\n <span class=\"fui-date-picker__range-separator\" aria-hidden=\"true\">{{ rangeSeparator() }}</span>\r\n <input\r\n #endInput\r\n class=\"fui-date-picker__input fui-date-picker__input--end\"\r\n [value]=\"endInputText()\"\r\n [placeholder]=\"getEndPlaceholder()\"\r\n [disabled]=\"disabled()\"\r\n [readonly]=\"readonly()\"\r\n [attr.aria-label]=\"intl.endDateAriaLabel\"\r\n [attr.aria-invalid]=\"errorState()\"\r\n inputmode=\"numeric\"\r\n autocomplete=\"off\"\r\n (input)=\"onEndInput($event)\"\r\n (blur)=\"onEndBlur()\"\r\n (focus)=\"onInputFocus()\"\r\n (keydown)=\"onEndKeydown($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n\r\n <!-- Calendar toggle button \u2014 hidden in readOnly mode -->\r\n @if (!_readOnly()) {\r\n <button\r\n type=\"button\"\r\n class=\"fui-date-picker__toggle\"\r\n tabindex=\"-1\"\r\n [attr.aria-expanded]=\"panelOpen()\"\r\n [disabled]=\"disabled()\"\r\n aria-haspopup=\"dialog\"\r\n [attr.aria-label]=\"intl.openCalendarAriaLabel\"\r\n (click)=\"onToggleClick($event)\"\r\n >\r\n <fui-icon name=\"calendar-blank\" size=\"sm\" />\r\n </button>\r\n }\r\n</div>\r\n\r\n<!-- Calendar panel -->\r\n@if (panelOpen()) {\r\n <div\r\n #calendarPanel\r\n class=\"fui-date-picker__panel\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n [attr.aria-label]=\"intl.calendarDialogAriaLabel\"\r\n >\r\n <fui-calendar\r\n #calendar\r\n [selected]=\"selectedDate()\"\r\n [rangeStart]=\"rangeStartDate()\"\r\n [rangeEnd]=\"rangeEndDate()\"\r\n [range]=\"range()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [dateFilter]=\"dateFilter()\"\r\n [startAt]=\"startAt()\"\r\n [firstDayOfWeek]=\"firstDayOfWeek()\"\r\n [hoveredDate]=\"hoveredDate()\"\r\n (dateSelected)=\"onDateSelected($event)\"\r\n (dateHovered)=\"onDateHovered($event)\"\r\n />\r\n </div>\r\n}\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-date-picker{--fui-date-picker-font-size: var(--fui-font-size-02);--fui-date-picker-toggle-size: 1.5rem;display:inline-block;width:100%;position:relative}.fui-date-picker__trigger{width:100%;min-height:100%;display:flex;align-items:center;gap:var(--fui-spacing-01);cursor:pointer;background:transparent;border:none}.fui-date-picker__input{flex:1;min-width:0;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);padding:0;cursor:text}.fui-date-picker__input::placeholder{color:var(--fui-text-disabled)}.fui-date-picker__input:disabled{cursor:not-allowed;opacity:.5}.fui-date-picker__range-separator{flex-shrink:0;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);-webkit-user-select:none;user-select:none}.fui-date-picker__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-date-picker__toggle:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-date-picker__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;color:var(--fui-text-secondary);border-radius:var(--fui-border-radius-sm);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-date-picker__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-date-picker__toggle:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-date-picker--disabled{pointer-events:none}.fui-date-picker--disabled .fui-date-picker__trigger{cursor:not-allowed;opacity:.5}.fui-date-picker--readonly{pointer-events:none}.fui-date-picker--readonly .fui-date-picker__trigger{cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-date-picker--readonly .fui-date-picker__input:disabled{opacity:1;cursor:default}.fui-date-picker__panel{--fui-date-picker-panel-border-radius: var(--fui-border-radius-md);--fui-date-picker-panel-shadow: var(--fui-shadow-04);--fui-date-picker-panel-bg: var(--fui-surface-00);--fui-date-picker-panel-border-color: var(--fui-border-color);background:var(--fui-date-picker-panel-bg);border:1px solid var(--fui-date-picker-panel-border-color);border-radius:var(--fui-date-picker-panel-border-radius);box-shadow:var(--fui-date-picker-panel-shadow);padding:var(--fui-spacing-02);transform-origin:top center;animation:fui-popover-enter var(--fui-duration-moderate-01) var(--fui-ease-entrance) both;will-change:transform,opacity}.fui-date-picker-backdrop{background:transparent}@media(prefers-contrast:high){.fui-date-picker__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-date-picker__panel{animation:none}}\n"] }]
|
|
1356
1356
|
}], ctorParameters: () => [], propDecorators: { placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], rangeSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeSeparator", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], triggerEl: [{
|
|
1357
1357
|
type: ViewChild,
|
|
1358
1358
|
args: ['triggerEl', { static: false }]
|