ryzen-ui 0.2.13 → 0.2.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/ryzen-ui.mjs +30 -28
  2. package/fesm2022/ryzen-ui.mjs.map +1 -1
  3. package/index.d.ts +1 -0
  4. package/package.json +1 -1
package/fesm2022/ryzen-ui.mjs CHANGED
@@ -53,7 +53,7 @@ class CheckboxComponent {
53
53
  this.checked.update(v => !v);
54
54
  }
55
55
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
56
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CheckboxComponent, isStandalone: true, selector: "app-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--rz-accent": "_accentColorValue", "style.width": "_width" } }, ngImport: i0, template: "<label class=\"rz-cb-field\" [class.is-disabled]=\"disabled()\">\n <span\n class=\"rz-cb-box\"\n [class.is-checked]=\"checked()\"\n [class.is-indeterminate]=\"indeterminate() && !checked()\"\n role=\"checkbox\"\n [attr.aria-checked]=\"indeterminate() && !checked() ? 'mixed' : checked()\"\n tabindex=\"0\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n >\n @if (checked()) {\n <i class=\"pi pi-check\" style=\"color:white;font-weight:700\"></i>\n } @else if (indeterminate()) {\n <span class=\"rz-cb-indet\" style=\"background:white\"></span>\n }\n </span>\n\n @if (label()) {\n <span class=\"rz-cb-label\">{{ label() }}</span>\n }\n</label>\n\n@if (hint() && !error()) {\n <span class=\"rz-cb-msg rz-cb-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-cb-msg rz-cb-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary, oklch(.32 .09 258));--rz-bg: var(--color-surface, oklch(.99 0 0));--rz-border: var(--color-border, oklch(.83 .015 260));--rz-text: var(--color-text, oklch(.14 .01 260));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));position:relative;display:inline-flex;flex-direction:column;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--rz-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--rz-accent: var(--color-info, oklch(.55 .15 235))}.rz-cb-field{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.rz-cb-field.is-disabled{opacity:.5;cursor:not-allowed}.rz-cb-box{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--rz-border);border-radius:4px;background:var(--rz-bg);transition:all .15s ease;flex-shrink:0}.rz-cb-box.is-checked,.rz-cb-box.is-indeterminate{background:var(--rz-accent);border-color:var(--rz-accent)}.rz-cb-box:focus-visible{outline:2px solid var(--rz-accent);outline-offset:2px}:host([data-size=\"sm\"]) .rz-cb-box{width:1rem;height:1rem;font-size:.625rem}:host([data-size=\"md\"]) .rz-cb-box{width:1.25rem;height:1.25rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-cb-box{width:1.5rem;height:1.5rem;font-size:.875rem}.rz-cb-indet{display:block;width:.5rem;height:.125rem;border-radius:9999px}.rz-cb-label{font-family:var(--font-sans);-webkit-user-select:none;user-select:none;color:var(--rz-text)}:host([data-size=\"sm\"]) .rz-cb-label{font-size:.75rem}:host([data-size=\"md\"]) .rz-cb-label{font-size:.875rem}:host([data-size=\"lg\"]) .rz-cb-label{font-size:1rem}:host(.has-error) .rz-cb-box{border-color:var(--color-danger, oklch(.55 .25 25))}.rz-cb-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-cb-hint{color:var(--color-text-muted)}.rz-cb-error{color:var(--color-danger)}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
56
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CheckboxComponent, isStandalone: true, selector: "app-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--rz-accent": "_accentColorValue", "style.width": "_width" } }, ngImport: i0, template: "<label class=\"rz-cb-field\" [class.is-disabled]=\"disabled()\" (click)=\"toggle()\">\n <span\n class=\"rz-cb-box\"\n [class.is-checked]=\"checked()\"\n [class.is-indeterminate]=\"indeterminate() && !checked()\"\n role=\"checkbox\"\n [attr.aria-checked]=\"indeterminate() && !checked() ? 'mixed' : checked()\"\n tabindex=\"0\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n >\n @if (checked()) {\n <i class=\"pi pi-check\" style=\"color:white;font-weight:700\"></i>\n } @else if (indeterminate()) {\n <span class=\"rz-cb-indet\" style=\"background:white\"></span>\n }\n </span>\n\n @if (label()) {\n <span class=\"rz-cb-label\">{{ label() }}</span>\n }\n</label>\n\n@if (hint() && !error()) {\n <span class=\"rz-cb-msg rz-cb-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-cb-msg rz-cb-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary, oklch(.32 .09 258));--rz-bg: var(--color-surface, oklch(.99 0 0));--rz-border: var(--color-border, oklch(.83 .015 260));--rz-text: var(--color-text, oklch(.14 .01 260));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));position:relative;display:inline-flex;flex-direction:column;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--rz-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--rz-accent: var(--color-info, oklch(.55 .15 235))}.rz-cb-field{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.rz-cb-field.is-disabled{opacity:.5;cursor:not-allowed}.rz-cb-box{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--rz-border);border-radius:4px;background:var(--rz-bg);transition:all .15s ease;flex-shrink:0}.rz-cb-box.is-checked,.rz-cb-box.is-indeterminate{background:var(--rz-accent);border-color:var(--rz-accent)}.rz-cb-box:focus-visible{outline:2px solid var(--rz-accent);outline-offset:2px}:host([data-size=\"sm\"]) .rz-cb-box{width:1rem;height:1rem;font-size:.625rem}:host([data-size=\"md\"]) .rz-cb-box{width:1.25rem;height:1.25rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-cb-box{width:1.5rem;height:1.5rem;font-size:.875rem}.rz-cb-indet{display:block;width:.5rem;height:.125rem;border-radius:9999px}.rz-cb-label{font-family:var(--font-sans);-webkit-user-select:none;user-select:none;color:var(--rz-text)}:host([data-size=\"sm\"]) .rz-cb-label{font-size:.75rem}:host([data-size=\"md\"]) .rz-cb-label{font-size:.875rem}:host([data-size=\"lg\"]) .rz-cb-label{font-size:1rem}:host(.has-error) .rz-cb-box{border-color:var(--color-danger, oklch(.55 .25 25))}.rz-cb-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-cb-hint{color:var(--color-text-muted)}.rz-cb-error{color:var(--color-danger)}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
57
57
  }
58
58
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CheckboxComponent, decorators: [{
59
59
  type: Component,
@@ -63,7 +63,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
63
63
  '[class.has-error]': 'error()',
64
64
  '[style.--rz-accent]': '_accentColorValue',
65
65
  '[style.width]': '_width',
66
- }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"rz-cb-field\" [class.is-disabled]=\"disabled()\">\n <span\n class=\"rz-cb-box\"\n [class.is-checked]=\"checked()\"\n [class.is-indeterminate]=\"indeterminate() && !checked()\"\n role=\"checkbox\"\n [attr.aria-checked]=\"indeterminate() && !checked() ? 'mixed' : checked()\"\n tabindex=\"0\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n >\n @if (checked()) {\n <i class=\"pi pi-check\" style=\"color:white;font-weight:700\"></i>\n } @else if (indeterminate()) {\n <span class=\"rz-cb-indet\" style=\"background:white\"></span>\n }\n </span>\n\n @if (label()) {\n <span class=\"rz-cb-label\">{{ label() }}</span>\n }\n</label>\n\n@if (hint() && !error()) {\n <span class=\"rz-cb-msg rz-cb-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-cb-msg rz-cb-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary, oklch(.32 .09 258));--rz-bg: var(--color-surface, oklch(.99 0 0));--rz-border: var(--color-border, oklch(.83 .015 260));--rz-text: var(--color-text, oklch(.14 .01 260));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));position:relative;display:inline-flex;flex-direction:column;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--rz-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--rz-accent: var(--color-info, oklch(.55 .15 235))}.rz-cb-field{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.rz-cb-field.is-disabled{opacity:.5;cursor:not-allowed}.rz-cb-box{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--rz-border);border-radius:4px;background:var(--rz-bg);transition:all .15s ease;flex-shrink:0}.rz-cb-box.is-checked,.rz-cb-box.is-indeterminate{background:var(--rz-accent);border-color:var(--rz-accent)}.rz-cb-box:focus-visible{outline:2px solid var(--rz-accent);outline-offset:2px}:host([data-size=\"sm\"]) .rz-cb-box{width:1rem;height:1rem;font-size:.625rem}:host([data-size=\"md\"]) .rz-cb-box{width:1.25rem;height:1.25rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-cb-box{width:1.5rem;height:1.5rem;font-size:.875rem}.rz-cb-indet{display:block;width:.5rem;height:.125rem;border-radius:9999px}.rz-cb-label{font-family:var(--font-sans);-webkit-user-select:none;user-select:none;color:var(--rz-text)}:host([data-size=\"sm\"]) .rz-cb-label{font-size:.75rem}:host([data-size=\"md\"]) .rz-cb-label{font-size:.875rem}:host([data-size=\"lg\"]) .rz-cb-label{font-size:1rem}:host(.has-error) .rz-cb-box{border-color:var(--color-danger, oklch(.55 .25 25))}.rz-cb-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-cb-hint{color:var(--color-text-muted)}.rz-cb-error{color:var(--color-danger)}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
66
+ }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"rz-cb-field\" [class.is-disabled]=\"disabled()\" (click)=\"toggle()\">\n <span\n class=\"rz-cb-box\"\n [class.is-checked]=\"checked()\"\n [class.is-indeterminate]=\"indeterminate() && !checked()\"\n role=\"checkbox\"\n [attr.aria-checked]=\"indeterminate() && !checked() ? 'mixed' : checked()\"\n tabindex=\"0\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n >\n @if (checked()) {\n <i class=\"pi pi-check\" style=\"color:white;font-weight:700\"></i>\n } @else if (indeterminate()) {\n <span class=\"rz-cb-indet\" style=\"background:white\"></span>\n }\n </span>\n\n @if (label()) {\n <span class=\"rz-cb-label\">{{ label() }}</span>\n }\n</label>\n\n@if (hint() && !error()) {\n <span class=\"rz-cb-msg rz-cb-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-cb-msg rz-cb-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary, oklch(.32 .09 258));--rz-bg: var(--color-surface, oklch(.99 0 0));--rz-border: var(--color-border, oklch(.83 .015 260));--rz-text: var(--color-text, oklch(.14 .01 260));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));position:relative;display:inline-flex;flex-direction:column;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--rz-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--rz-accent: var(--color-info, oklch(.55 .15 235))}.rz-cb-field{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.rz-cb-field.is-disabled{opacity:.5;cursor:not-allowed}.rz-cb-box{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--rz-border);border-radius:4px;background:var(--rz-bg);transition:all .15s ease;flex-shrink:0}.rz-cb-box.is-checked,.rz-cb-box.is-indeterminate{background:var(--rz-accent);border-color:var(--rz-accent)}.rz-cb-box:focus-visible{outline:2px solid var(--rz-accent);outline-offset:2px}:host([data-size=\"sm\"]) .rz-cb-box{width:1rem;height:1rem;font-size:.625rem}:host([data-size=\"md\"]) .rz-cb-box{width:1.25rem;height:1.25rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-cb-box{width:1.5rem;height:1.5rem;font-size:.875rem}.rz-cb-indet{display:block;width:.5rem;height:.125rem;border-radius:9999px}.rz-cb-label{font-family:var(--font-sans);-webkit-user-select:none;user-select:none;color:var(--rz-text)}:host([data-size=\"sm\"]) .rz-cb-label{font-size:.75rem}:host([data-size=\"md\"]) .rz-cb-label{font-size:.875rem}:host([data-size=\"lg\"]) .rz-cb-label{font-size:1rem}:host(.has-error) .rz-cb-box{border-color:var(--color-danger, oklch(.55 .25 25))}.rz-cb-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-cb-hint{color:var(--color-text-muted)}.rz-cb-error{color:var(--color-danger)}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
67
67
  }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], accentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentColor", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
68
68
 
69
69
  class DatePickerComponent {
@@ -142,14 +142,14 @@ class DatePickerComponent {
142
142
  _appendToParent = computed(() => {
143
143
  const a = this.appendTo();
144
144
  if (a)
145
- return a === 'parent';
145
+ return a === 'body';
146
146
  const cb = this.config().appendToBody;
147
147
  if (cb !== undefined)
148
- return !cb;
148
+ return cb;
149
149
  const cp = this.config().appendToParent;
150
150
  if (cp !== undefined)
151
- return cp;
152
- return false;
151
+ return !cp;
152
+ return true;
153
153
  }, ...(ngDevMode ? [{ debugName: "_appendToParent" }] : []));
154
154
  _panelFixed = computed(() => this._isOpen() && this._appendToParent() ? 'fixed' : null, ...(ngDevMode ? [{ debugName: "_panelFixed" }] : []));
155
155
  _showTodayBtn = computed(() => this.config().showTodayButton !== false, ...(ngDevMode ? [{ debugName: "_showTodayBtn" }] : []));
@@ -278,22 +278,23 @@ class DatePickerComponent {
278
278
  this._panelEl = null;
279
279
  }
280
280
  _close() {
281
- if (!this._isOpen())
282
- return;
283
- this._docClickCleanup?.();
284
- this._docClickCleanup = undefined;
285
- if (this._closeTimer)
286
- clearTimeout(this._closeTimer);
287
281
  this._isClosing.set(true);
288
- if (this._appendToParent())
289
- this._detachFromBody();
290
282
  this._closeTimer = setTimeout(() => {
291
283
  this._isOpen.set(false);
292
284
  this._isClosing.set(false);
293
- this._viewMode.set('days');
294
- this._closeTimer = null;
285
+ this._detachFromBody();
286
+ this._docClickCleanup?.();
295
287
  }, 150);
296
288
  }
289
+ _reposition() {
290
+ if (!this._isOpen() || !this._appendToParent())
291
+ return;
292
+ const rect = this._elementRef.nativeElement.getBoundingClientRect();
293
+ this._panelDirection.set(window.innerHeight - rect.bottom >= 320 ? 'down' : 'up');
294
+ this._panelX.set(rect.left);
295
+ this._panelY.set(this._panelDirection() === 'down' ? rect.bottom : rect.top);
296
+ this._panelWidth.set(rect.width);
297
+ }
297
298
  ngOnDestroy() {
298
299
  this._docClickCleanup?.();
299
300
  if (this._closeTimer)
@@ -375,7 +376,7 @@ class DatePickerComponent {
375
376
  this._close();
376
377
  }
377
378
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
378
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DatePickerComponent, isStandalone: true, selector: "app-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, headerBg: { classPropertyName: "headerBg", publicName: "headerBg", isSignal: true, isRequired: false, transformFunction: null }, headerTextColor: { classPropertyName: "headerTextColor", publicName: "headerTextColor", isSignal: true, isRequired: false, transformFunction: null }, bodyBg: { classPropertyName: "bodyBg", publicName: "bodyBg", isSignal: true, isRequired: false, transformFunction: null }, dayTextColor: { classPropertyName: "dayTextColor", publicName: "dayTextColor", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--rz-accent": "_accentColorValue", "style.--rz-dp-header-bg": "_headerBg", "style.--rz-dp-header-text": "_headerText", "style.--rz-dp-body-bg": "_bodyBg", "style.--rz-dp-text": "_dayTxt", "style.width": "_width" } }, ngImport: i0, template: "<div class=\"rz-dp-wrapper\">\n <label class=\"rz-dp-trigger\" (click)=\"_onTriggerClick($event)\">\n <input\n class=\"rz-dp-input\"\n type=\"text\"\n readonly\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"_displayValue()\"\n />\n\n @if (_displayValue() && !disabled()) {\n <button class=\"rz-dp-clear\" type=\"button\" (click)=\"_clear($event)\" aria-label=\"Clear date\">\n <i class=\"pi pi-times\"></i>\n </button>\n }\n\n <i class=\"rz-dp-icon pi pi-calendar\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-dp-panel\n class=\"rz-dp-panel\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.rz-dp-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.rz-dp-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n\n <div class=\"rz-dp-header\" [style.background-color]=\"_accentColorValue()\">\n <div class=\"rz-dp-nav\">\n @if (_viewMode() === 'days' && _showYearNav()) {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_prevYear()\" aria-label=\"Previous year\">\n <i class=\"pi pi-angle-double-left\"></i>\n </button>\n }\n @if (_viewMode() !== 'years') {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_prevPeriod()\" aria-label=\"Previous\">\n <i class=\"pi pi-angle-left\"></i>\n </button>\n }\n\n <div class=\"rz-dp-nav-title\">\n @if (_viewMode() === 'days') {\n <button type=\"button\" class=\"rz-dp-nav-link\" (click)=\"_showMonths()\">{{ _monthName() }}</button>\n <button type=\"button\" class=\"rz-dp-nav-link\" (click)=\"_showYears()\">{{ _year() }}</button>\n }\n @if (_viewMode() === 'months') {\n <button type=\"button\" class=\"rz-dp-nav-link\" (click)=\"_showYears()\">{{ _year() }}</button>\n }\n @if (_viewMode() === 'years') {\n <span class=\"rz-dp-decade-label\">{{ _decadeLabel() }}</span>\n }\n </div>\n\n @if (_viewMode() !== 'years') {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_nextPeriod()\" aria-label=\"Next\">\n <i class=\"pi pi-angle-right\"></i>\n </button>\n }\n @if (_viewMode() === 'days' && _showYearNav()) {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_nextYear()\" aria-label=\"Next year\">\n <i class=\"pi pi-angle-double-right\"></i>\n </button>\n }\n </div>\n\n @if (_showTodayBtn() && _viewMode() === 'days') {\n <button type=\"button\" class=\"rz-dp-today-btn\" (click)=\"_goToToday()\">\n <i class=\"pi pi-calendar-plus\"></i>\n Today\n </button>\n }\n </div>\n\n @if (_viewMode() === 'days') {\n <div class=\"rz-dp-days-view\">\n <div class=\"rz-dp-weekdays\">\n @for (day of _weekDaysOrdered(); track $index) {\n <div class=\"rz-dp-weekday-cell\">{{ day }}</div>\n }\n </div>\n <div class=\"rz-dp-days-grid\">\n @for (day of _calendarDays(); track day.date.getTime()) {\n @if (day.date.getMonth() === _viewDate().getMonth() || day.date.getMonth() === _viewDate().getMonth() - 1 || day.date.getMonth() === _viewDate().getMonth() + 1) {\n <button\n type=\"button\"\n class=\"rz-dp-day\"\n [class.other-month]=\"!day.isCurrentMonth && !day.isSelected\"\n [class.today]=\"day.isToday && !day.isSelected\"\n [class.selected]=\"day.isSelected\"\n [class.highlighted]=\"day.isHighlighted && !day.isSelected\"\n [class.disabled]=\"day.isDisabled\"\n [disabled]=\"day.isDisabled\"\n (click)=\"_selectDate(day.date)\"\n [attr.aria-label]=\"day.date.toLocaleDateString()\"\n >{{ day.day }}</button>\n }\n }\n </div>\n </div>\n }\n\n @if (_viewMode() === 'months') {\n <div class=\"rz-dp-months-grid\">\n @for (month of _monthNames; track $index) {\n <button\n type=\"button\"\n class=\"rz-dp-month-btn\"\n [class.current]=\"_isCurrentMonth($index)\"\n (click)=\"_selectMonth($index)\"\n >{{ _monthsShort[$index] }}</button>\n }\n </div>\n }\n\n @if (_viewMode() === 'years') {\n <div class=\"rz-dp-years-view\">\n <div class=\"rz-dp-years-nav\">\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_prevDecade()\">\n <i class=\"pi pi-chevron-left\"></i>\n </button>\n <span class=\"rz-dp-decade-label\">{{ _decadeLabel() }}</span>\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_nextDecade()\">\n <i class=\"pi pi-chevron-right\"></i>\n </button>\n </div>\n <div class=\"rz-dp-years-grid\">\n @for (year of _yearsList(); track $index) {\n <button\n type=\"button\"\n class=\"rz-dp-year-btn\"\n [class.current]=\"_isCurrentYear(year)\"\n (click)=\"_selectYear(year)\"\n >{{ year }}</button>\n }\n </div>\n </div>\n }\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"rz-dp-msg rz-dp-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-dp-msg rz-dp-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}", styles: [":host{--rz-accent: var(--color-primary, oklch(.32 .09 258));--rz-bg: var(--color-surface, oklch(.99 0 0));--rz-border: var(--color-border, oklch(.83 .015 260));--rz-text: var(--color-text, oklch(.14 .01 260));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--rz-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--rz-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error .rz-dp-input{border-color:var(--color-danger)!important}:host.has-error .rz-dp-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.rz-dp-wrapper{position:relative;overflow:visible}.rz-dp-trigger{display:flex;align-items:center;width:100%}.rz-dp-input{width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem 2.75rem .5rem .75rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease;cursor:pointer;box-sizing:border-box}.rz-dp-input::placeholder{color:var(--rz-muted)}.rz-dp-input:disabled{opacity:.5;cursor:not-allowed}:host([data-accent]) .rz-dp-input{border-color:color-mix(in srgb,var(--rz-accent) 40%,var(--rz-border))}.rz-dp-input:focus{border-color:var(--rz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--rz-accent) 20%,transparent)}:host([data-size=\"sm\"]) .rz-dp-input{padding:.25rem 2.25rem .25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dp-input{padding:.75rem 3rem .75rem 1rem;font-size:1rem}.rz-dp-clear{position:absolute;top:50%;translate:0 -50%;inset-inline-end:2rem;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;color:var(--rz-muted);font-size:.75rem;transition:color .15s}.rz-dp-clear:hover{color:var(--rz-text)}.rz-dp-icon{position:absolute;top:50%;translate:0 -50%;inset-inline-end:.625rem;pointer-events:none;color:var(--rz-accent);font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center}:host([data-size=\"sm\"]) .rz-dp-icon{inset-inline-end:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dp-icon{inset-inline-end:.75rem;font-size:1.125rem}.rz-dp-panel{--rz-text: var(--rz-dp-text, var(--color-text, oklch(.14 .01 260)));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));left:0;z-index:50;width:100%;min-width:17.5rem;background:var(--rz-dp-body-bg, var(--color-surface, oklch(.99 0 0)));border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:var(--radius-md, .5rem);box-shadow:0 10px 15px -3px color-mix(in srgb,var(--color-text) 10%,transparent),0 4px 6px -4px color-mix(in srgb,var(--color-text) 10%,transparent);overflow:hidden;color:var(--color-text, oklch(.14 .01 260));box-sizing:border-box}.rz-dp-panel.absolute{position:absolute}.rz-dp-header{padding:.75rem;background:var(--rz-dp-header-bg, var(--color-primary, oklch(.32 .09 258)));color:var(--rz-dp-header-text, white)}.rz-dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.375rem}.rz-dp-nav-btn{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:50%;background:transparent;color:color-mix(in srgb,white 80%,transparent);cursor:pointer;transition:background .15s;font-size:.75rem;flex-shrink:0}.rz-dp-nav-btn:hover{background:color-mix(in srgb,white 20%,transparent)}.rz-dp-nav-title{display:flex;align-items:center;gap:.25rem;font-size:.875rem;font-weight:600}.rz-dp-nav-link{padding:.125rem .375rem;border:none;border-radius:.25rem;background:transparent;color:#fff;cursor:pointer;transition:background .15s}.rz-dp-nav-link:hover{background:color-mix(in srgb,white 20%,transparent)}.rz-dp-decade-label{padding:0 .375rem}.rz-dp-today-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.375rem;padding:.25rem .5rem;border:none;border-radius:.25rem;background:color-mix(in srgb,white 20%,transparent);color:#fff;font-size:.75rem;cursor:pointer;transition:background .15s}.rz-dp-today-btn:hover{background:color-mix(in srgb,white 30%,transparent)}.rz-dp-days-view{padding:.625rem;box-sizing:border-box}.rz-dp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:.125rem;width:100%}.rz-dp-weekday-cell{display:flex;align-items:center;justify-content:center;height:1.75rem;font-size:.75rem;font-weight:500;color:var(--color-text-muted);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);min-width:0}.rz-dp-days-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.125rem;width:100%}.rz-dp-day{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;max-width:2.5rem;margin:0 auto;padding:0;border:none;border-radius:50%;cursor:pointer;font-size:.875rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);transition:all .15s;color:var(--rz-text);background:var(--rz-dp-day-bg, var(--color-surface-alt, oklch(.975 .005 260)));min-width:0;box-sizing:border-box}.rz-dp-day.other-month{color:var(--rz-muted)}.rz-dp-day.today{font-weight:600;box-shadow:0 0 0 2px var(--rz-accent)}.rz-dp-day.selected{background:var(--rz-accent);color:#fff;font-weight:600}.rz-dp-day.highlighted{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-day.disabled{opacity:.3;cursor:not-allowed}.rz-dp-day:not(.selected):not(.disabled):hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-months-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:.75rem}.rz-dp-month-btn{padding:.5rem;border-radius:.5rem;border:none;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);transition:background .15s,color .15s;cursor:pointer;color:var(--rz-text);background:transparent}.rz-dp-month-btn.current{background:var(--rz-accent);color:#fff}.rz-dp-month-btn:not(.current):hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-years-view{padding:.625rem}.rz-dp-years-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;padding:0 .25rem}.rz-dp-years-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.rz-dp-year-btn{padding:.5rem;border-radius:.5rem;border:none;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);transition:background .15s,color .15s;cursor:pointer;color:var(--rz-text);background:transparent}.rz-dp-year-btn.current{background:var(--rz-accent);color:#fff}.rz-dp-year-btn:not(.current):hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-dp-hint{color:var(--color-text-muted)}.rz-dp-error{color:var(--color-danger)}.rz-dp-fade-in{animation:rz-dp-in .2s ease}.rz-dp-fade-out{animation:rz-dp-out .15s ease forwards}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-dp-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes rz-dp-out{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
379
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DatePickerComponent, isStandalone: true, selector: "app-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, headerBg: { classPropertyName: "headerBg", publicName: "headerBg", isSignal: true, isRequired: false, transformFunction: null }, headerTextColor: { classPropertyName: "headerTextColor", publicName: "headerTextColor", isSignal: true, isRequired: false, transformFunction: null }, bodyBg: { classPropertyName: "bodyBg", publicName: "bodyBg", isSignal: true, isRequired: false, transformFunction: null }, dayTextColor: { classPropertyName: "dayTextColor", publicName: "dayTextColor", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "window:scroll": "_reposition()" }, properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--rz-accent": "_accentColorValue", "style.--rz-dp-header-bg": "_headerBg", "style.--rz-dp-header-text": "_headerText", "style.--rz-dp-body-bg": "_bodyBg", "style.--rz-dp-text": "_dayTxt", "style.width": "_width" } }, ngImport: i0, template: "<div class=\"rz-dp-wrapper\">\n <label class=\"rz-dp-trigger\" (click)=\"_onTriggerClick($event)\">\n <input\n class=\"rz-dp-input\"\n type=\"text\"\n readonly\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"_displayValue()\"\n />\n\n @if (_displayValue() && !disabled()) {\n <button class=\"rz-dp-clear\" type=\"button\" (click)=\"_clear($event)\" aria-label=\"Clear date\">\n <i class=\"pi pi-times\"></i>\n </button>\n }\n\n <i class=\"rz-dp-icon pi pi-calendar\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-dp-panel\n class=\"rz-dp-panel\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.rz-dp-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.rz-dp-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n\n <div class=\"rz-dp-header\" [style.background-color]=\"_accentColorValue()\">\n <div class=\"rz-dp-nav\">\n @if (_viewMode() === 'days' && _showYearNav()) {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_prevYear()\" aria-label=\"Previous year\">\n <i class=\"pi pi-angle-double-left\"></i>\n </button>\n }\n @if (_viewMode() !== 'years') {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_prevPeriod()\" aria-label=\"Previous\">\n <i class=\"pi pi-angle-left\"></i>\n </button>\n }\n\n <div class=\"rz-dp-nav-title\">\n @if (_viewMode() === 'days') {\n <button type=\"button\" class=\"rz-dp-nav-link\" (click)=\"_showMonths()\">{{ _monthName() }}</button>\n <button type=\"button\" class=\"rz-dp-nav-link\" (click)=\"_showYears()\">{{ _year() }}</button>\n }\n @if (_viewMode() === 'months') {\n <button type=\"button\" class=\"rz-dp-nav-link\" (click)=\"_showYears()\">{{ _year() }}</button>\n }\n @if (_viewMode() === 'years') {\n <span class=\"rz-dp-decade-label\">{{ _decadeLabel() }}</span>\n }\n </div>\n\n @if (_viewMode() !== 'years') {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_nextPeriod()\" aria-label=\"Next\">\n <i class=\"pi pi-angle-right\"></i>\n </button>\n }\n @if (_viewMode() === 'days' && _showYearNav()) {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_nextYear()\" aria-label=\"Next year\">\n <i class=\"pi pi-angle-double-right\"></i>\n </button>\n }\n </div>\n\n @if (_showTodayBtn() && _viewMode() === 'days') {\n <button type=\"button\" class=\"rz-dp-today-btn\" (click)=\"_goToToday()\">\n <i class=\"pi pi-calendar-plus\"></i>\n Today\n </button>\n }\n </div>\n\n @if (_viewMode() === 'days') {\n <div class=\"rz-dp-days-view\">\n <div class=\"rz-dp-weekdays\">\n @for (day of _weekDaysOrdered(); track $index) {\n <div class=\"rz-dp-weekday-cell\">{{ day }}</div>\n }\n </div>\n <div class=\"rz-dp-days-grid\">\n @for (day of _calendarDays(); track day.date.getTime()) {\n @if (day.date.getMonth() === _viewDate().getMonth() || day.date.getMonth() === _viewDate().getMonth() - 1 || day.date.getMonth() === _viewDate().getMonth() + 1) {\n <button\n type=\"button\"\n class=\"rz-dp-day\"\n [class.other-month]=\"!day.isCurrentMonth && !day.isSelected\"\n [class.today]=\"day.isToday && !day.isSelected\"\n [class.selected]=\"day.isSelected\"\n [class.highlighted]=\"day.isHighlighted && !day.isSelected\"\n [class.disabled]=\"day.isDisabled\"\n [disabled]=\"day.isDisabled\"\n (click)=\"_selectDate(day.date)\"\n [attr.aria-label]=\"day.date.toLocaleDateString()\"\n >{{ day.day }}</button>\n }\n }\n </div>\n </div>\n }\n\n @if (_viewMode() === 'months') {\n <div class=\"rz-dp-months-grid\">\n @for (month of _monthNames; track $index) {\n <button\n type=\"button\"\n class=\"rz-dp-month-btn\"\n [class.current]=\"_isCurrentMonth($index)\"\n (click)=\"_selectMonth($index)\"\n >{{ _monthsShort[$index] }}</button>\n }\n </div>\n }\n\n @if (_viewMode() === 'years') {\n <div class=\"rz-dp-years-view\">\n <div class=\"rz-dp-years-nav\">\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_prevDecade()\">\n <i class=\"pi pi-chevron-left\"></i>\n </button>\n <span class=\"rz-dp-decade-label\">{{ _decadeLabel() }}</span>\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_nextDecade()\">\n <i class=\"pi pi-chevron-right\"></i>\n </button>\n </div>\n <div class=\"rz-dp-years-grid\">\n @for (year of _yearsList(); track $index) {\n <button\n type=\"button\"\n class=\"rz-dp-year-btn\"\n [class.current]=\"_isCurrentYear(year)\"\n (click)=\"_selectYear(year)\"\n >{{ year }}</button>\n }\n </div>\n </div>\n }\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"rz-dp-msg rz-dp-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-dp-msg rz-dp-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}", styles: [":host{--rz-accent: var(--color-primary, oklch(.32 .09 258));--rz-bg: var(--color-surface, oklch(.99 0 0));--rz-border: var(--color-border, oklch(.83 .015 260));--rz-text: var(--color-text, oklch(.14 .01 260));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--rz-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--rz-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error .rz-dp-input{border-color:var(--color-danger)!important}:host.has-error .rz-dp-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.rz-dp-wrapper{position:relative;overflow:visible}.rz-dp-trigger{display:flex;align-items:center;width:100%}.rz-dp-input{width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem 2.75rem .5rem .75rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease;cursor:pointer;box-sizing:border-box}.rz-dp-input::placeholder{color:var(--rz-muted)}.rz-dp-input:disabled{opacity:.5;cursor:not-allowed}:host([data-accent]) .rz-dp-input{border-color:color-mix(in srgb,var(--rz-accent) 40%,var(--rz-border))}.rz-dp-input:focus{border-color:var(--rz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--rz-accent) 20%,transparent)}:host([data-size=\"sm\"]) .rz-dp-input{padding:.25rem 2.25rem .25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dp-input{padding:.75rem 3rem .75rem 1rem;font-size:1rem}.rz-dp-clear{position:absolute;top:50%;translate:0 -50%;inset-inline-end:2rem;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;color:var(--rz-muted);font-size:.75rem;transition:color .15s}.rz-dp-clear:hover{color:var(--rz-text)}.rz-dp-icon{position:absolute;top:50%;translate:0 -50%;inset-inline-end:.625rem;pointer-events:none;color:var(--rz-accent);font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center}:host([data-size=\"sm\"]) .rz-dp-icon{inset-inline-end:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dp-icon{inset-inline-end:.75rem;font-size:1.125rem}.rz-dp-panel{--rz-text: var(--rz-dp-text, var(--color-text, oklch(.14 .01 260)));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));left:0;z-index:50;width:100%;min-width:17.5rem;background:var(--rz-dp-body-bg, var(--color-surface, oklch(.99 0 0)));border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:var(--radius-md, .5rem);box-shadow:0 10px 15px -3px color-mix(in srgb,var(--color-text) 10%,transparent),0 4px 6px -4px color-mix(in srgb,var(--color-text) 10%,transparent);overflow:hidden;color:var(--color-text, oklch(.14 .01 260));box-sizing:border-box}.rz-dp-panel.absolute{position:absolute}.rz-dp-header{padding:.75rem;background:var(--rz-dp-header-bg, var(--color-primary, oklch(.32 .09 258)));color:var(--rz-dp-header-text, white)}.rz-dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.375rem}.rz-dp-nav-btn{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:50%;background:transparent;color:color-mix(in srgb,white 80%,transparent);cursor:pointer;transition:background .15s;font-size:.75rem;flex-shrink:0}.rz-dp-nav-btn:hover{background:color-mix(in srgb,white 20%,transparent)}.rz-dp-nav-title{display:flex;align-items:center;gap:.25rem;font-size:.875rem;font-weight:600}.rz-dp-nav-link{padding:.125rem .375rem;border:none;border-radius:.25rem;background:transparent;color:#fff;cursor:pointer;transition:background .15s}.rz-dp-nav-link:hover{background:color-mix(in srgb,white 20%,transparent)}.rz-dp-decade-label{padding:0 .375rem}.rz-dp-today-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.375rem;padding:.25rem .5rem;border:none;border-radius:.25rem;background:color-mix(in srgb,white 20%,transparent);color:#fff;font-size:.75rem;cursor:pointer;transition:background .15s}.rz-dp-today-btn:hover{background:color-mix(in srgb,white 30%,transparent)}.rz-dp-days-view{padding:.625rem;box-sizing:border-box}.rz-dp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:.125rem;width:100%}.rz-dp-weekday-cell{display:flex;align-items:center;justify-content:center;height:1.75rem;font-size:.75rem;font-weight:500;color:var(--color-text-muted);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);min-width:0}.rz-dp-days-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.125rem;width:100%}.rz-dp-day{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;max-width:2.5rem;margin:0 auto;padding:0;border:none;border-radius:50%;cursor:pointer;font-size:.875rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);transition:all .15s;color:var(--rz-text);background:var(--rz-dp-day-bg, var(--color-surface-alt, oklch(.975 .005 260)));min-width:0;box-sizing:border-box}.rz-dp-day.other-month{color:var(--rz-muted)}.rz-dp-day.today{font-weight:600;box-shadow:0 0 0 2px var(--rz-accent)}.rz-dp-day.selected{background:var(--rz-accent);color:#fff;font-weight:600}.rz-dp-day.highlighted{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-day.disabled{opacity:.3;cursor:not-allowed}.rz-dp-day:not(.selected):not(.disabled):hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-months-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:.75rem}.rz-dp-month-btn{padding:.5rem;border-radius:.5rem;border:none;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);transition:background .15s,color .15s;cursor:pointer;color:var(--rz-text);background:transparent}.rz-dp-month-btn.current{background:var(--rz-accent);color:#fff}.rz-dp-month-btn:not(.current):hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-years-view{padding:.625rem}.rz-dp-years-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;padding:0 .25rem}.rz-dp-years-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.rz-dp-year-btn{padding:.5rem;border-radius:.5rem;border:none;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);transition:background .15s,color .15s;cursor:pointer;color:var(--rz-text);background:transparent}.rz-dp-year-btn.current{background:var(--rz-accent);color:#fff}.rz-dp-year-btn:not(.current):hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-dp-hint{color:var(--color-text-muted)}.rz-dp-error{color:var(--color-danger)}.rz-dp-fade-in{animation:rz-dp-in .2s ease}.rz-dp-fade-out{animation:rz-dp-out .15s ease forwards}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-dp-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes rz-dp-out{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
379
380
  }
380
381
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DatePickerComponent, decorators: [{
381
382
  type: Component,
@@ -389,6 +390,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
389
390
  '[style.--rz-dp-body-bg]': '_bodyBg',
390
391
  '[style.--rz-dp-text]': '_dayTxt',
391
392
  '[style.width]': '_width',
393
+ '(window:scroll)': '_reposition()',
392
394
  }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rz-dp-wrapper\">\n <label class=\"rz-dp-trigger\" (click)=\"_onTriggerClick($event)\">\n <input\n class=\"rz-dp-input\"\n type=\"text\"\n readonly\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"_displayValue()\"\n />\n\n @if (_displayValue() && !disabled()) {\n <button class=\"rz-dp-clear\" type=\"button\" (click)=\"_clear($event)\" aria-label=\"Clear date\">\n <i class=\"pi pi-times\"></i>\n </button>\n }\n\n <i class=\"rz-dp-icon pi pi-calendar\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-dp-panel\n class=\"rz-dp-panel\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.rz-dp-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.rz-dp-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n\n <div class=\"rz-dp-header\" [style.background-color]=\"_accentColorValue()\">\n <div class=\"rz-dp-nav\">\n @if (_viewMode() === 'days' && _showYearNav()) {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_prevYear()\" aria-label=\"Previous year\">\n <i class=\"pi pi-angle-double-left\"></i>\n </button>\n }\n @if (_viewMode() !== 'years') {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_prevPeriod()\" aria-label=\"Previous\">\n <i class=\"pi pi-angle-left\"></i>\n </button>\n }\n\n <div class=\"rz-dp-nav-title\">\n @if (_viewMode() === 'days') {\n <button type=\"button\" class=\"rz-dp-nav-link\" (click)=\"_showMonths()\">{{ _monthName() }}</button>\n <button type=\"button\" class=\"rz-dp-nav-link\" (click)=\"_showYears()\">{{ _year() }}</button>\n }\n @if (_viewMode() === 'months') {\n <button type=\"button\" class=\"rz-dp-nav-link\" (click)=\"_showYears()\">{{ _year() }}</button>\n }\n @if (_viewMode() === 'years') {\n <span class=\"rz-dp-decade-label\">{{ _decadeLabel() }}</span>\n }\n </div>\n\n @if (_viewMode() !== 'years') {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_nextPeriod()\" aria-label=\"Next\">\n <i class=\"pi pi-angle-right\"></i>\n </button>\n }\n @if (_viewMode() === 'days' && _showYearNav()) {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_nextYear()\" aria-label=\"Next year\">\n <i class=\"pi pi-angle-double-right\"></i>\n </button>\n }\n </div>\n\n @if (_showTodayBtn() && _viewMode() === 'days') {\n <button type=\"button\" class=\"rz-dp-today-btn\" (click)=\"_goToToday()\">\n <i class=\"pi pi-calendar-plus\"></i>\n Today\n </button>\n }\n </div>\n\n @if (_viewMode() === 'days') {\n <div class=\"rz-dp-days-view\">\n <div class=\"rz-dp-weekdays\">\n @for (day of _weekDaysOrdered(); track $index) {\n <div class=\"rz-dp-weekday-cell\">{{ day }}</div>\n }\n </div>\n <div class=\"rz-dp-days-grid\">\n @for (day of _calendarDays(); track day.date.getTime()) {\n @if (day.date.getMonth() === _viewDate().getMonth() || day.date.getMonth() === _viewDate().getMonth() - 1 || day.date.getMonth() === _viewDate().getMonth() + 1) {\n <button\n type=\"button\"\n class=\"rz-dp-day\"\n [class.other-month]=\"!day.isCurrentMonth && !day.isSelected\"\n [class.today]=\"day.isToday && !day.isSelected\"\n [class.selected]=\"day.isSelected\"\n [class.highlighted]=\"day.isHighlighted && !day.isSelected\"\n [class.disabled]=\"day.isDisabled\"\n [disabled]=\"day.isDisabled\"\n (click)=\"_selectDate(day.date)\"\n [attr.aria-label]=\"day.date.toLocaleDateString()\"\n >{{ day.day }}</button>\n }\n }\n </div>\n </div>\n }\n\n @if (_viewMode() === 'months') {\n <div class=\"rz-dp-months-grid\">\n @for (month of _monthNames; track $index) {\n <button\n type=\"button\"\n class=\"rz-dp-month-btn\"\n [class.current]=\"_isCurrentMonth($index)\"\n (click)=\"_selectMonth($index)\"\n >{{ _monthsShort[$index] }}</button>\n }\n </div>\n }\n\n @if (_viewMode() === 'years') {\n <div class=\"rz-dp-years-view\">\n <div class=\"rz-dp-years-nav\">\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_prevDecade()\">\n <i class=\"pi pi-chevron-left\"></i>\n </button>\n <span class=\"rz-dp-decade-label\">{{ _decadeLabel() }}</span>\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_nextDecade()\">\n <i class=\"pi pi-chevron-right\"></i>\n </button>\n </div>\n <div class=\"rz-dp-years-grid\">\n @for (year of _yearsList(); track $index) {\n <button\n type=\"button\"\n class=\"rz-dp-year-btn\"\n [class.current]=\"_isCurrentYear(year)\"\n (click)=\"_selectYear(year)\"\n >{{ year }}</button>\n }\n </div>\n </div>\n }\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"rz-dp-msg rz-dp-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-dp-msg rz-dp-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}", styles: [":host{--rz-accent: var(--color-primary, oklch(.32 .09 258));--rz-bg: var(--color-surface, oklch(.99 0 0));--rz-border: var(--color-border, oklch(.83 .015 260));--rz-text: var(--color-text, oklch(.14 .01 260));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--rz-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--rz-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error .rz-dp-input{border-color:var(--color-danger)!important}:host.has-error .rz-dp-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.rz-dp-wrapper{position:relative;overflow:visible}.rz-dp-trigger{display:flex;align-items:center;width:100%}.rz-dp-input{width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem 2.75rem .5rem .75rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease;cursor:pointer;box-sizing:border-box}.rz-dp-input::placeholder{color:var(--rz-muted)}.rz-dp-input:disabled{opacity:.5;cursor:not-allowed}:host([data-accent]) .rz-dp-input{border-color:color-mix(in srgb,var(--rz-accent) 40%,var(--rz-border))}.rz-dp-input:focus{border-color:var(--rz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--rz-accent) 20%,transparent)}:host([data-size=\"sm\"]) .rz-dp-input{padding:.25rem 2.25rem .25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dp-input{padding:.75rem 3rem .75rem 1rem;font-size:1rem}.rz-dp-clear{position:absolute;top:50%;translate:0 -50%;inset-inline-end:2rem;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;color:var(--rz-muted);font-size:.75rem;transition:color .15s}.rz-dp-clear:hover{color:var(--rz-text)}.rz-dp-icon{position:absolute;top:50%;translate:0 -50%;inset-inline-end:.625rem;pointer-events:none;color:var(--rz-accent);font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center}:host([data-size=\"sm\"]) .rz-dp-icon{inset-inline-end:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dp-icon{inset-inline-end:.75rem;font-size:1.125rem}.rz-dp-panel{--rz-text: var(--rz-dp-text, var(--color-text, oklch(.14 .01 260)));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));left:0;z-index:50;width:100%;min-width:17.5rem;background:var(--rz-dp-body-bg, var(--color-surface, oklch(.99 0 0)));border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:var(--radius-md, .5rem);box-shadow:0 10px 15px -3px color-mix(in srgb,var(--color-text) 10%,transparent),0 4px 6px -4px color-mix(in srgb,var(--color-text) 10%,transparent);overflow:hidden;color:var(--color-text, oklch(.14 .01 260));box-sizing:border-box}.rz-dp-panel.absolute{position:absolute}.rz-dp-header{padding:.75rem;background:var(--rz-dp-header-bg, var(--color-primary, oklch(.32 .09 258)));color:var(--rz-dp-header-text, white)}.rz-dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.375rem}.rz-dp-nav-btn{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:50%;background:transparent;color:color-mix(in srgb,white 80%,transparent);cursor:pointer;transition:background .15s;font-size:.75rem;flex-shrink:0}.rz-dp-nav-btn:hover{background:color-mix(in srgb,white 20%,transparent)}.rz-dp-nav-title{display:flex;align-items:center;gap:.25rem;font-size:.875rem;font-weight:600}.rz-dp-nav-link{padding:.125rem .375rem;border:none;border-radius:.25rem;background:transparent;color:#fff;cursor:pointer;transition:background .15s}.rz-dp-nav-link:hover{background:color-mix(in srgb,white 20%,transparent)}.rz-dp-decade-label{padding:0 .375rem}.rz-dp-today-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.375rem;padding:.25rem .5rem;border:none;border-radius:.25rem;background:color-mix(in srgb,white 20%,transparent);color:#fff;font-size:.75rem;cursor:pointer;transition:background .15s}.rz-dp-today-btn:hover{background:color-mix(in srgb,white 30%,transparent)}.rz-dp-days-view{padding:.625rem;box-sizing:border-box}.rz-dp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:.125rem;width:100%}.rz-dp-weekday-cell{display:flex;align-items:center;justify-content:center;height:1.75rem;font-size:.75rem;font-weight:500;color:var(--color-text-muted);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);min-width:0}.rz-dp-days-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.125rem;width:100%}.rz-dp-day{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;max-width:2.5rem;margin:0 auto;padding:0;border:none;border-radius:50%;cursor:pointer;font-size:.875rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);transition:all .15s;color:var(--rz-text);background:var(--rz-dp-day-bg, var(--color-surface-alt, oklch(.975 .005 260)));min-width:0;box-sizing:border-box}.rz-dp-day.other-month{color:var(--rz-muted)}.rz-dp-day.today{font-weight:600;box-shadow:0 0 0 2px var(--rz-accent)}.rz-dp-day.selected{background:var(--rz-accent);color:#fff;font-weight:600}.rz-dp-day.highlighted{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-day.disabled{opacity:.3;cursor:not-allowed}.rz-dp-day:not(.selected):not(.disabled):hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-months-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:.75rem}.rz-dp-month-btn{padding:.5rem;border-radius:.5rem;border:none;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);transition:background .15s,color .15s;cursor:pointer;color:var(--rz-text);background:transparent}.rz-dp-month-btn.current{background:var(--rz-accent);color:#fff}.rz-dp-month-btn:not(.current):hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-years-view{padding:.625rem}.rz-dp-years-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;padding:0 .25rem}.rz-dp-years-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.rz-dp-year-btn{padding:.5rem;border-radius:.5rem;border:none;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);transition:background .15s,color .15s;cursor:pointer;color:var(--rz-text);background:transparent}.rz-dp-year-btn.current{background:var(--rz-accent);color:#fff}.rz-dp-year-btn:not(.current):hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-dp-hint{color:var(--color-text-muted)}.rz-dp-error{color:var(--color-danger)}.rz-dp-fade-in{animation:rz-dp-in .2s ease}.rz-dp-fade-out{animation:rz-dp-out .15s ease forwards}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-dp-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes rz-dp-out{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
393
395
  }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], accentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentColor", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], headerBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerBg", required: false }] }], headerTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTextColor", required: false }] }], bodyBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyBg", required: false }] }], dayTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayTextColor", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }] } });
394
396
 
@@ -410,7 +412,7 @@ class DropDownComponent {
410
412
  config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
411
413
  appendTo = input('body', ...(ngDevMode ? [{ debugName: "appendTo" }] : []));
412
414
  _size = computed(() => this.size(), ...(ngDevMode ? [{ debugName: "_size" }] : []));
413
- _direction = computed(() => this.config().direction ?? 'down', ...(ngDevMode ? [{ debugName: "_direction" }] : []));
415
+ _direction = computed(() => this.config().direction ?? 'auto', ...(ngDevMode ? [{ debugName: "_direction" }] : []));
414
416
  _accentKey = computed(() => {
415
417
  const c = this.accentColor();
416
418
  return c && isThemeColor(c) ? c : null;
@@ -440,14 +442,14 @@ class DropDownComponent {
440
442
  _appendToParent = computed(() => {
441
443
  const a = this.appendTo();
442
444
  if (a)
443
- return a === 'parent';
445
+ return a === 'body';
444
446
  const cb = this.config().appendToBody;
445
447
  if (cb !== undefined)
446
- return !cb;
448
+ return cb;
447
449
  const cp = this.config().appendToParent;
448
450
  if (cp !== undefined)
449
- return cp;
450
- return false;
451
+ return !cp;
452
+ return true;
451
453
  }, ...(ngDevMode ? [{ debugName: "_appendToParent" }] : []));
452
454
  _panelFixed = computed(() => this._isOpen() && this._appendToParent() ? 'fixed' : null, ...(ngDevMode ? [{ debugName: "_panelFixed" }] : []));
453
455
  _maxHeight = computed(() => this.config().maxHeight ?? '256px', ...(ngDevMode ? [{ debugName: "_maxHeight" }] : []));
@@ -719,14 +721,14 @@ class MultiSelectComponent {
719
721
  _appendToParent = computed(() => {
720
722
  const a = this.appendTo();
721
723
  if (a)
722
- return a === 'parent';
724
+ return a === 'body';
723
725
  const cb = this.config().appendToBody;
724
726
  if (cb !== undefined)
725
- return !cb;
727
+ return cb;
726
728
  const cp = this.config().appendToParent;
727
729
  if (cp !== undefined)
728
- return cp;
729
- return false;
730
+ return !cp;
731
+ return true;
730
732
  }, ...(ngDevMode ? [{ debugName: "_appendToParent" }] : []));
731
733
  _panelFixed = computed(() => this._isOpen() && this._appendToParent() ? 'fixed' : null, ...(ngDevMode ? [{ debugName: "_panelFixed" }] : []));
732
734
  _maxHeight = computed(() => this.config().maxHeight ?? '256px', ...(ngDevMode ? [{ debugName: "_maxHeight" }] : []));
@@ -1092,7 +1094,7 @@ class ToggleComponent {
1092
1094
  this.checked.update(v => !v);
1093
1095
  }
1094
1096
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1095
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ToggleComponent, isStandalone: true, selector: "app-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "class.is-checked": "checked()", "style.--rz-accent": "_accentColorValue", "style.width": "_width" } }, ngImport: i0, template: "<label class=\"rz-toggle-field\">\n @if (label()) {\n <span class=\"rz-toggle-label\">{{ label() }}</span>\n }\n\n <button\n class=\"rz-toggle-track\"\n type=\"button\"\n role=\"switch\"\n [attr.aria-checked]=\"checked()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n >\n <span class=\"rz-toggle-knob\"></span>\n </button>\n</label>\n\n@if (hint() && !error()) {\n <span class=\"rz-toggle-msg rz-toggle-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-toggle-msg rz-toggle-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary);--rz-toggle-bg: var(--color-text-muted);--rz-toggle-knob: var(--color-surface);--rz-toggle-knob-border: var(--color-border-light);--rz-muted: var(--color-text-muted);--rz-text: var(--color-text);--rz-radius: var(--radius-full);position:relative;display:inline-flex;flex-direction:column;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent)}:host([data-accent=\"success\"]){--rz-accent: var(--color-success)}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger)}:host([data-accent=\"info\"]){--rz-accent: var(--color-info)}.rz-toggle-field{display:inline-flex;align-items:center;gap:.625rem;cursor:default}.rz-toggle-label{font-family:var(--font-sans);font-size:.875rem;color:var(--rz-text);-webkit-user-select:none;user-select:none}:host([data-size=\"sm\"]) .rz-toggle-label{font-size:.75rem}:host([data-size=\"md\"]) .rz-toggle-label{font-size:.875rem}:host([data-size=\"lg\"]) .rz-toggle-label{font-size:1rem}.rz-toggle-track{position:relative;display:inline-flex;align-items:center;padding:3px;border:none;border-radius:var(--rz-radius);background:var(--rz-toggle-bg);cursor:pointer;transition:background .2s ease}.rz-toggle-track:focus-visible{outline:2px solid var(--rz-accent);outline-offset:2px}.rz-toggle-track:disabled{opacity:.5;cursor:not-allowed}:host([data-size=\"sm\"]) .rz-toggle-track{width:2.125rem;height:1.25rem}:host([data-size=\"md\"]) .rz-toggle-track{width:2.75rem;height:1.5rem}:host([data-size=\"lg\"]) .rz-toggle-track{width:3.25rem;height:1.75rem}.rz-toggle-knob{position:absolute;top:3px;left:3px;background:var(--rz-toggle-knob);border:1px solid var(--rz-toggle-knob-border);border-radius:50%;transition:left .25s ease;box-shadow:0 1px 3px color-mix(in srgb,var(--color-text) 15%,transparent)}:host([data-size=\"sm\"]){--rz-toggle-knob-size: .875rem}:host([data-size=\"sm\"]) .rz-toggle-knob{width:.875rem;height:.875rem}:host([data-size=\"md\"]){--rz-toggle-knob-size: 1.125rem}:host([data-size=\"md\"]) .rz-toggle-knob{width:1.125rem;height:1.125rem}:host([data-size=\"lg\"]){--rz-toggle-knob-size: 1.375rem}:host([data-size=\"lg\"]) .rz-toggle-knob{width:1.375rem;height:1.375rem}:host(.is-checked) .rz-toggle-track{background:var(--rz-accent)}:host(.is-checked) .rz-toggle-knob{left:calc(100% - var(--rz-toggle-knob-size) - 3px)}.rz-toggle-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-toggle-hint{color:var(--color-text-muted)}.rz-toggle-error{color:var(--color-danger)}:host(.has-error) .rz-toggle-track{outline:2px solid var(--color-danger)}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1097
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ToggleComponent, isStandalone: true, selector: "app-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "class.is-checked": "checked()", "style.--rz-accent": "_accentColorValue", "style.width": "_width" } }, ngImport: i0, template: "<label class=\"rz-toggle-field\" (click)=\"toggle()\">\n @if (label()) {\n <span class=\"rz-toggle-label\">{{ label() }}</span>\n }\n\n <button\n class=\"rz-toggle-track\"\n type=\"button\"\n role=\"switch\"\n [attr.aria-checked]=\"checked()\"\n [disabled]=\"disabled()\"\n >\n <span class=\"rz-toggle-knob\"></span>\n </button>\n</label>\n\n@if (hint() && !error()) {\n <span class=\"rz-toggle-msg rz-toggle-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-toggle-msg rz-toggle-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary);--rz-toggle-bg: var(--color-text-muted);--rz-toggle-knob: var(--color-surface);--rz-toggle-knob-border: var(--color-border-light);--rz-muted: var(--color-text-muted);--rz-text: var(--color-text);--rz-radius: var(--radius-full);position:relative;display:inline-flex;flex-direction:column;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent)}:host([data-accent=\"success\"]){--rz-accent: var(--color-success)}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger)}:host([data-accent=\"info\"]){--rz-accent: var(--color-info)}.rz-toggle-field{display:inline-flex;align-items:center;gap:.625rem;cursor:default}.rz-toggle-label{font-family:var(--font-sans);font-size:.875rem;color:var(--rz-text);-webkit-user-select:none;user-select:none}:host([data-size=\"sm\"]) .rz-toggle-label{font-size:.75rem}:host([data-size=\"md\"]) .rz-toggle-label{font-size:.875rem}:host([data-size=\"lg\"]) .rz-toggle-label{font-size:1rem}.rz-toggle-track{position:relative;display:inline-flex;align-items:center;padding:3px;border:none;border-radius:var(--rz-radius);background:var(--rz-toggle-bg);cursor:pointer;transition:background .2s ease}.rz-toggle-track:focus-visible{outline:2px solid var(--rz-accent);outline-offset:2px}.rz-toggle-track:disabled{opacity:.5;cursor:not-allowed}:host([data-size=\"sm\"]) .rz-toggle-track{width:2.125rem;height:1.25rem}:host([data-size=\"md\"]) .rz-toggle-track{width:2.75rem;height:1.5rem}:host([data-size=\"lg\"]) .rz-toggle-track{width:3.25rem;height:1.75rem}.rz-toggle-knob{position:absolute;top:3px;left:3px;background:var(--rz-toggle-knob);border:1px solid var(--rz-toggle-knob-border);border-radius:50%;transition:left .25s ease;box-shadow:0 1px 3px color-mix(in srgb,var(--color-text) 15%,transparent)}:host([data-size=\"sm\"]){--rz-toggle-knob-size: .875rem}:host([data-size=\"sm\"]) .rz-toggle-knob{width:.875rem;height:.875rem}:host([data-size=\"md\"]){--rz-toggle-knob-size: 1.125rem}:host([data-size=\"md\"]) .rz-toggle-knob{width:1.125rem;height:1.125rem}:host([data-size=\"lg\"]){--rz-toggle-knob-size: 1.375rem}:host([data-size=\"lg\"]) .rz-toggle-knob{width:1.375rem;height:1.375rem}:host(.is-checked) .rz-toggle-track{background:var(--rz-accent)}:host(.is-checked) .rz-toggle-knob{left:calc(100% - var(--rz-toggle-knob-size) - 3px)}.rz-toggle-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-toggle-hint{color:var(--color-text-muted)}.rz-toggle-error{color:var(--color-danger)}:host(.has-error) .rz-toggle-track{outline:2px solid var(--color-danger)}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1096
1098
  }
1097
1099
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToggleComponent, decorators: [{
1098
1100
  type: Component,
@@ -1103,7 +1105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
1103
1105
  '[class.is-checked]': 'checked()',
1104
1106
  '[style.--rz-accent]': '_accentColorValue',
1105
1107
  '[style.width]': '_width',
1106
- }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"rz-toggle-field\">\n @if (label()) {\n <span class=\"rz-toggle-label\">{{ label() }}</span>\n }\n\n <button\n class=\"rz-toggle-track\"\n type=\"button\"\n role=\"switch\"\n [attr.aria-checked]=\"checked()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n >\n <span class=\"rz-toggle-knob\"></span>\n </button>\n</label>\n\n@if (hint() && !error()) {\n <span class=\"rz-toggle-msg rz-toggle-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-toggle-msg rz-toggle-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary);--rz-toggle-bg: var(--color-text-muted);--rz-toggle-knob: var(--color-surface);--rz-toggle-knob-border: var(--color-border-light);--rz-muted: var(--color-text-muted);--rz-text: var(--color-text);--rz-radius: var(--radius-full);position:relative;display:inline-flex;flex-direction:column;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent)}:host([data-accent=\"success\"]){--rz-accent: var(--color-success)}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger)}:host([data-accent=\"info\"]){--rz-accent: var(--color-info)}.rz-toggle-field{display:inline-flex;align-items:center;gap:.625rem;cursor:default}.rz-toggle-label{font-family:var(--font-sans);font-size:.875rem;color:var(--rz-text);-webkit-user-select:none;user-select:none}:host([data-size=\"sm\"]) .rz-toggle-label{font-size:.75rem}:host([data-size=\"md\"]) .rz-toggle-label{font-size:.875rem}:host([data-size=\"lg\"]) .rz-toggle-label{font-size:1rem}.rz-toggle-track{position:relative;display:inline-flex;align-items:center;padding:3px;border:none;border-radius:var(--rz-radius);background:var(--rz-toggle-bg);cursor:pointer;transition:background .2s ease}.rz-toggle-track:focus-visible{outline:2px solid var(--rz-accent);outline-offset:2px}.rz-toggle-track:disabled{opacity:.5;cursor:not-allowed}:host([data-size=\"sm\"]) .rz-toggle-track{width:2.125rem;height:1.25rem}:host([data-size=\"md\"]) .rz-toggle-track{width:2.75rem;height:1.5rem}:host([data-size=\"lg\"]) .rz-toggle-track{width:3.25rem;height:1.75rem}.rz-toggle-knob{position:absolute;top:3px;left:3px;background:var(--rz-toggle-knob);border:1px solid var(--rz-toggle-knob-border);border-radius:50%;transition:left .25s ease;box-shadow:0 1px 3px color-mix(in srgb,var(--color-text) 15%,transparent)}:host([data-size=\"sm\"]){--rz-toggle-knob-size: .875rem}:host([data-size=\"sm\"]) .rz-toggle-knob{width:.875rem;height:.875rem}:host([data-size=\"md\"]){--rz-toggle-knob-size: 1.125rem}:host([data-size=\"md\"]) .rz-toggle-knob{width:1.125rem;height:1.125rem}:host([data-size=\"lg\"]){--rz-toggle-knob-size: 1.375rem}:host([data-size=\"lg\"]) .rz-toggle-knob{width:1.375rem;height:1.375rem}:host(.is-checked) .rz-toggle-track{background:var(--rz-accent)}:host(.is-checked) .rz-toggle-knob{left:calc(100% - var(--rz-toggle-knob-size) - 3px)}.rz-toggle-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-toggle-hint{color:var(--color-text-muted)}.rz-toggle-error{color:var(--color-danger)}:host(.has-error) .rz-toggle-track{outline:2px solid var(--color-danger)}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
1108
+ }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"rz-toggle-field\" (click)=\"toggle()\">\n @if (label()) {\n <span class=\"rz-toggle-label\">{{ label() }}</span>\n }\n\n <button\n class=\"rz-toggle-track\"\n type=\"button\"\n role=\"switch\"\n [attr.aria-checked]=\"checked()\"\n [disabled]=\"disabled()\"\n >\n <span class=\"rz-toggle-knob\"></span>\n </button>\n</label>\n\n@if (hint() && !error()) {\n <span class=\"rz-toggle-msg rz-toggle-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-toggle-msg rz-toggle-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary);--rz-toggle-bg: var(--color-text-muted);--rz-toggle-knob: var(--color-surface);--rz-toggle-knob-border: var(--color-border-light);--rz-muted: var(--color-text-muted);--rz-text: var(--color-text);--rz-radius: var(--radius-full);position:relative;display:inline-flex;flex-direction:column;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent)}:host([data-accent=\"success\"]){--rz-accent: var(--color-success)}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger)}:host([data-accent=\"info\"]){--rz-accent: var(--color-info)}.rz-toggle-field{display:inline-flex;align-items:center;gap:.625rem;cursor:default}.rz-toggle-label{font-family:var(--font-sans);font-size:.875rem;color:var(--rz-text);-webkit-user-select:none;user-select:none}:host([data-size=\"sm\"]) .rz-toggle-label{font-size:.75rem}:host([data-size=\"md\"]) .rz-toggle-label{font-size:.875rem}:host([data-size=\"lg\"]) .rz-toggle-label{font-size:1rem}.rz-toggle-track{position:relative;display:inline-flex;align-items:center;padding:3px;border:none;border-radius:var(--rz-radius);background:var(--rz-toggle-bg);cursor:pointer;transition:background .2s ease}.rz-toggle-track:focus-visible{outline:2px solid var(--rz-accent);outline-offset:2px}.rz-toggle-track:disabled{opacity:.5;cursor:not-allowed}:host([data-size=\"sm\"]) .rz-toggle-track{width:2.125rem;height:1.25rem}:host([data-size=\"md\"]) .rz-toggle-track{width:2.75rem;height:1.5rem}:host([data-size=\"lg\"]) .rz-toggle-track{width:3.25rem;height:1.75rem}.rz-toggle-knob{position:absolute;top:3px;left:3px;background:var(--rz-toggle-knob);border:1px solid var(--rz-toggle-knob-border);border-radius:50%;transition:left .25s ease;box-shadow:0 1px 3px color-mix(in srgb,var(--color-text) 15%,transparent)}:host([data-size=\"sm\"]){--rz-toggle-knob-size: .875rem}:host([data-size=\"sm\"]) .rz-toggle-knob{width:.875rem;height:.875rem}:host([data-size=\"md\"]){--rz-toggle-knob-size: 1.125rem}:host([data-size=\"md\"]) .rz-toggle-knob{width:1.125rem;height:1.125rem}:host([data-size=\"lg\"]){--rz-toggle-knob-size: 1.375rem}:host([data-size=\"lg\"]) .rz-toggle-knob{width:1.375rem;height:1.375rem}:host(.is-checked) .rz-toggle-track{background:var(--rz-accent)}:host(.is-checked) .rz-toggle-knob{left:calc(100% - var(--rz-toggle-knob-size) - 3px)}.rz-toggle-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-toggle-hint{color:var(--color-text-muted)}.rz-toggle-error{color:var(--color-danger)}:host(.has-error) .rz-toggle-track{outline:2px solid var(--color-danger)}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
1107
1109
  }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], accentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentColor", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
1108
1110
 
1109
1111
  class BadgeComponent {