ryzen-ui 0.2.10 → 0.2.11

package/fesm2022/ryzen-ui.mjs

@@ -38,6 +38,14 @@ class CheckboxComponent {
         const c = this.accentColor();
         return c && !isThemeColor(c) ? c : null;
     }, ...(ngDevMode ? [{ debugName: "_rawAccent" }] : []));
+    _accentColorValue = computed(() => {
+        const c = this.accentColor();
+        if (c && !isThemeColor(c))
+            return c;
+        const key = c && isThemeColor(c) ? c : 'primary';
+        const fallbacks = { primary: 'oklch(0.32 0.09 258)', secondary: 'oklch(0.55 0.12 40)', accent: 'oklch(0.64 0.2 50)', success: 'oklch(0.55 0.18 145)', warning: 'oklch(0.68 0.18 75)', danger: 'oklch(0.55 0.22 25)', info: 'oklch(0.55 0.15 235)' };
+        return `var(--color-${key}, ${fallbacks[key]})`;
+    }, ...(ngDevMode ? [{ debugName: "_accentColorValue" }] : []));
     _width = computed(() => this.width() || null, ...(ngDevMode ? [{ debugName: "_width" }] : []));
     toggle() {
         if (this.disabled())
@@ -45,7 +53,7 @@ class CheckboxComponent {
         this.checked.update(v => !v);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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": "_rawAccent", "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 });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -53,7 +61,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         '[attr.data-size]': '_size',
                         '[attr.data-accent]': '_accentKey',
                         '[class.has-error]': 'error()',
-                        '[style.--rz-accent]': '_rawAccent',
+                        '[style.--rz-accent]': '_accentColorValue',
                         '[style.width]': '_width',
                     }, 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"] }]
         }], 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 }] }] } });
@@ -74,7 +82,7 @@ class DatePickerComponent {
     format = input('dd/MM/yyyy', ...(ngDevMode ? [{ debugName: "format" }] : []));
     width = input('', ...(ngDevMode ? [{ debugName: "width" }] : []));
     config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
-    appendToBody = input(undefined, ...(ngDevMode ? [{ debugName: "appendToBody" }] : []));
+    appendTo = input('body', ...(ngDevMode ? [{ debugName: "appendTo" }] : []));
     _size = computed(() => this.size(), ...(ngDevMode ? [{ debugName: "_size" }] : []));
     _accentKey = computed(() => {
         const c = this.accentColor();
@@ -123,7 +131,18 @@ class DatePickerComponent {
     _monthName = computed(() => this._monthNames[this._viewDate().getMonth()], ...(ngDevMode ? [{ debugName: "_monthName" }] : []));
     _year = computed(() => this._viewDate().getFullYear(), ...(ngDevMode ? [{ debugName: "_year" }] : []));
     _decadeLabel = computed(() => `${this._decade()} - ${this._decade() + 9}`, ...(ngDevMode ? [{ debugName: "_decadeLabel" }] : []));
-    _appendToParent = computed(() => this.appendToBody() ?? this.config().appendToBody ?? this.config().appendToParent ?? true, ...(ngDevMode ? [{ debugName: "_appendToParent" }] : []));
+    _appendToParent = computed(() => {
+        const a = this.appendTo();
+        if (a)
+            return a === 'parent';
+        const cb = this.config().appendToBody;
+        if (cb !== undefined)
+            return !cb;
+        const cp = this.config().appendToParent;
+        if (cp !== undefined)
+            return cp;
+        return false;
+    }, ...(ngDevMode ? [{ debugName: "_appendToParent" }] : []));
     _panelFixed = computed(() => this._isOpen() && this._appendToParent() ? 'fixed' : null, ...(ngDevMode ? [{ debugName: "_panelFixed" }] : []));
     _showTodayBtn = computed(() => this.config().showTodayButton !== false, ...(ngDevMode ? [{ debugName: "_showTodayBtn" }] : []));
     _showYearNav = computed(() => this.config().showYearNavigation !== false, ...(ngDevMode ? [{ debugName: "_showYearNav" }] : []));
@@ -340,7 +359,7 @@ class DatePickerComponent {
         this._close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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 }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", 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.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(--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(--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;color:#fff}.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);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 });
+    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 }, 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.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(--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(--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;color:#fff}.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);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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -351,7 +370,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         '[style.--rz-accent]': '_accentColorValue',
                         '[style.width]': '_width',
                     }, 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(--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(--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;color:#fff}.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);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"] }]
-        }], 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 }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }] } });
+        }], 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 }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }] } });
 
 class DropDownComponent {
     _elementRef = inject(ElementRef);
@@ -369,7 +388,7 @@ class DropDownComponent {
     error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
     width = input('', ...(ngDevMode ? [{ debugName: "width" }] : []));
     config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
-    appendToBody = input(undefined, ...(ngDevMode ? [{ debugName: "appendToBody" }] : []));
+    appendTo = input('body', ...(ngDevMode ? [{ debugName: "appendTo" }] : []));
     _size = computed(() => this.size(), ...(ngDevMode ? [{ debugName: "_size" }] : []));
     _direction = computed(() => this.config().direction ?? 'down', ...(ngDevMode ? [{ debugName: "_direction" }] : []));
     _accentKey = computed(() => {
@@ -398,7 +417,18 @@ class DropDownComponent {
     _panelWidth = signal(0, ...(ngDevMode ? [{ debugName: "_panelWidth" }] : []));
     _panelEl = null;
     _searchQuery = signal('', ...(ngDevMode ? [{ debugName: "_searchQuery" }] : []));
-    _appendToParent = computed(() => this.appendToBody() ?? this.config().appendToBody ?? this.config().appendToParent ?? true, ...(ngDevMode ? [{ debugName: "_appendToParent" }] : []));
+    _appendToParent = computed(() => {
+        const a = this.appendTo();
+        if (a)
+            return a === 'parent';
+        const cb = this.config().appendToBody;
+        if (cb !== undefined)
+            return !cb;
+        const cp = this.config().appendToParent;
+        if (cp !== undefined)
+            return cp;
+        return false;
+    }, ...(ngDevMode ? [{ debugName: "_appendToParent" }] : []));
     _panelFixed = computed(() => this._isOpen() && this._appendToParent() ? 'fixed' : null, ...(ngDevMode ? [{ debugName: "_panelFixed" }] : []));
     _maxHeight = computed(() => this.config().maxHeight ?? '256px', ...(ngDevMode ? [{ debugName: "_maxHeight" }] : []));
     _selectedLabel = computed(() => {
@@ -521,7 +551,7 @@ class DropDownComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropDownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DropDownComponent, isStandalone: true, selector: "app-drop-down", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", 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 }, searchable: { classPropertyName: "searchable", publicName: "searchable", 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 }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "window:scroll": "_onWindowScroll()" }, properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--rz-accent": "_accentColorValue", "style.width": "_width" } }, ngImport: i0, template: "<div class=\"rz-dd-wrapper\">\n  <label class=\"rz-dd-trigger\" (click)=\"_onTriggerClick($event)\">\n    <input\n      class=\"rz-dd-input\"\n      type=\"text\"\n      readonly\n      [attr.placeholder]=\"placeholder()\"\n      [attr.disabled]=\"disabled() ? true : null\"\n      [value]=\"_selectedLabel()\"\n    />\n\n    @if (_selectedLabel() && !disabled()) {\n      <button class=\"rz-dd-clear\" type=\"button\" (click)=\"_clear($event)\" aria-label=\"Clear\">\n        <i class=\"pi pi-times\"></i>\n      </button>\n    }\n\n    <i class=\"rz-dd-icon pi pi-chevron-down\" [class.is-open]=\"_isOpen()\"></i>\n  </label>\n\n  @if (_isOpen() || _isClosing()) {\n    <div\n      data-dd-panel\n      class=\"rz-dd-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-dd-fade-in]=\"_isOpen() && !_isClosing()\"\n      [class.rz-dd-fade-out]=\"_isClosing()\"\n      (click)=\"_onPanelClick($event)\">\n\n      @if (searchable()) {\n        <div class=\"rz-dd-search-wrap\">\n          <input\n            data-dd-search\n            type=\"text\"\n            class=\"rz-dd-search-input\"\n            placeholder=\"Search...\"\n            [value]=\"_searchQuery()\"\n            (input)=\"_searchQuery.set($any($event.target).value)\"\n            (click)=\"$event.stopPropagation()\"\n          />\n        </div>\n      }\n\n      <div\n        class=\"rz-dd-options\"\n        [style.max-height]=\"_maxHeight()\"\n        (scroll)=\"$event.stopPropagation()\">\n        @for (option of _filteredOptions(); track option.value) {\n          <button\n            type=\"button\"\n            class=\"rz-dd-option\"\n            [class.selected]=\"option.value === value()\"\n            (click)=\"_selectOption(option)\"\n          >{{ option.label }}</button>\n        }\n\n        @if (_filteredOptions().length === 0) {\n          <div class=\"rz-dd-empty\">No results found</div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (hint() && !error()) {\n  <span class=\"rz-dd-msg rz-dd-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"rz-dd-msg rz-dd-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}", styles: [":host{--rz-accent: var(--color-accent, oklch(.64 .2 50));--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-surface: var(--color-surface-alt, oklch(.975 .005 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-dd-input{border-color:var(--color-danger, oklch(.55 .25 25))!important}:host.has-error .rz-dd-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger, oklch(.55 .25 25)) 20%,transparent)!important}.rz-dd-wrapper{position:relative;overflow:visible}.rz-dd-trigger{display:flex;align-items:center;width:100%}.rz-dd-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-dd-input::placeholder{color:var(--rz-muted)}.rz-dd-input:disabled{opacity:.5;cursor:not-allowed}:host([data-accent]) .rz-dd-input{border-color:color-mix(in srgb,var(--rz-accent) 40%,var(--rz-border))}.rz-dd-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-dd-input{padding:.25rem 2.25rem .25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dd-input{padding:.75rem 3rem .75rem 1rem;font-size:1rem}.rz-dd-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-dd-clear:hover{color:var(--rz-text)}.rz-dd-icon{position:absolute;top:50%;translate:0 -50%;inset-inline-end:.625rem;pointer-events:none;color:var(--rz-muted);font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:transform .2s}.rz-dd-icon.is-open{transform:rotate(180deg)}:host([data-size=\"sm\"]) .rz-dd-icon{inset-inline-end:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dd-icon{inset-inline-end:.75rem;font-size:1.125rem}.rz-dd-panel{left:0;z-index:50;width:100%;min-width:15rem;background: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-dd-panel.absolute{position:absolute}.rz-dd-search-wrap{padding:.5rem .5rem 0}.rz-dd-search-input{width:100%;padding:.375rem .5rem;font-size:.875rem;border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:.25rem;outline:none;background:var(--color-surface, oklch(.99 0 0));color:var(--color-text, oklch(.14 .01 260));font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);box-sizing:border-box}.rz-dd-search-input::placeholder{color:var(--color-text-muted)}.rz-dd-search-input:focus{border-color:var(--color-accent)}.rz-dd-options{overflow-y:auto}.rz-dd-option{width:100%;text-align:left;border:none;cursor:pointer;transition:background .1s,color .1s;background:transparent;color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem .75rem;font-size:.875rem;box-sizing:border-box}.rz-dd-option:hover{background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface))}.rz-dd-option.selected{background:var(--rz-accent);color:var(--color-primary-inverse, oklch(.99 0 0));font-weight:600}:host([data-size=\"sm\"]) .rz-dd-option{padding:.375rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dd-option{padding:.75rem 1rem;font-size:1rem}.rz-dd-empty{padding:1rem .75rem;text-align:center;font-size:.875rem;color:var(--rz-muted)}.rz-dd-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-dd-hint{color:var(--color-text-muted)}.rz-dd-error{color:var(--color-danger)}.rz-dd-fade-in{animation:rz-dd-in .2s ease}.rz-dd-fade-out{animation:rz-dd-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-dd-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes rz-dd-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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DropDownComponent, isStandalone: true, selector: "app-drop-down", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", 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 }, searchable: { classPropertyName: "searchable", publicName: "searchable", 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 }, 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": "_onWindowScroll()" }, properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--rz-accent": "_accentColorValue", "style.width": "_width" } }, ngImport: i0, template: "<div class=\"rz-dd-wrapper\">\n  <label class=\"rz-dd-trigger\" (click)=\"_onTriggerClick($event)\">\n    <input\n      class=\"rz-dd-input\"\n      type=\"text\"\n      readonly\n      [attr.placeholder]=\"placeholder()\"\n      [attr.disabled]=\"disabled() ? true : null\"\n      [value]=\"_selectedLabel()\"\n    />\n\n    @if (_selectedLabel() && !disabled()) {\n      <button class=\"rz-dd-clear\" type=\"button\" (click)=\"_clear($event)\" aria-label=\"Clear\">\n        <i class=\"pi pi-times\"></i>\n      </button>\n    }\n\n    <i class=\"rz-dd-icon pi pi-chevron-down\" [class.is-open]=\"_isOpen()\"></i>\n  </label>\n\n  @if (_isOpen() || _isClosing()) {\n    <div\n      data-dd-panel\n      class=\"rz-dd-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-dd-fade-in]=\"_isOpen() && !_isClosing()\"\n      [class.rz-dd-fade-out]=\"_isClosing()\"\n      (click)=\"_onPanelClick($event)\">\n\n      @if (searchable()) {\n        <div class=\"rz-dd-search-wrap\">\n          <input\n            data-dd-search\n            type=\"text\"\n            class=\"rz-dd-search-input\"\n            placeholder=\"Search...\"\n            [value]=\"_searchQuery()\"\n            (input)=\"_searchQuery.set($any($event.target).value)\"\n            (click)=\"$event.stopPropagation()\"\n          />\n        </div>\n      }\n\n      <div\n        class=\"rz-dd-options\"\n        [style.max-height]=\"_maxHeight()\"\n        (scroll)=\"$event.stopPropagation()\">\n        @for (option of _filteredOptions(); track option.value) {\n          <button\n            type=\"button\"\n            class=\"rz-dd-option\"\n            [class.selected]=\"option.value === value()\"\n            (click)=\"_selectOption(option)\"\n          >{{ option.label }}</button>\n        }\n\n        @if (_filteredOptions().length === 0) {\n          <div class=\"rz-dd-empty\">No results found</div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (hint() && !error()) {\n  <span class=\"rz-dd-msg rz-dd-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"rz-dd-msg rz-dd-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}", styles: [":host{--rz-accent: var(--color-accent, oklch(.64 .2 50));--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-surface: var(--color-surface-alt, oklch(.975 .005 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-dd-input{border-color:var(--color-danger, oklch(.55 .25 25))!important}:host.has-error .rz-dd-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger, oklch(.55 .25 25)) 20%,transparent)!important}.rz-dd-wrapper{position:relative;overflow:visible}.rz-dd-trigger{display:flex;align-items:center;width:100%}.rz-dd-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-dd-input::placeholder{color:var(--rz-muted)}.rz-dd-input:disabled{opacity:.5;cursor:not-allowed}:host([data-accent]) .rz-dd-input{border-color:color-mix(in srgb,var(--rz-accent) 40%,var(--rz-border))}.rz-dd-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-dd-input{padding:.25rem 2.25rem .25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dd-input{padding:.75rem 3rem .75rem 1rem;font-size:1rem}.rz-dd-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-dd-clear:hover{color:var(--rz-text)}.rz-dd-icon{position:absolute;top:50%;translate:0 -50%;inset-inline-end:.625rem;pointer-events:none;color:var(--rz-muted);font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:transform .2s}.rz-dd-icon.is-open{transform:rotate(180deg)}:host([data-size=\"sm\"]) .rz-dd-icon{inset-inline-end:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dd-icon{inset-inline-end:.75rem;font-size:1.125rem}.rz-dd-panel{left:0;z-index:50;width:100%;min-width:15rem;background: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-dd-panel.absolute{position:absolute}.rz-dd-search-wrap{padding:.5rem .5rem 0}.rz-dd-search-input{width:100%;padding:.375rem .5rem;font-size:.875rem;border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:.25rem;outline:none;background:var(--color-surface, oklch(.99 0 0));color:var(--color-text, oklch(.14 .01 260));font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);box-sizing:border-box}.rz-dd-search-input::placeholder{color:var(--color-text-muted)}.rz-dd-search-input:focus{border-color:var(--color-accent)}.rz-dd-options{overflow-y:auto}.rz-dd-option{width:100%;text-align:left;border:none;cursor:pointer;transition:background .1s,color .1s;background:transparent;color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem .75rem;font-size:.875rem;box-sizing:border-box}.rz-dd-option:hover{background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface))}.rz-dd-option.selected{background:var(--rz-accent);color:var(--color-primary-inverse, oklch(.99 0 0));font-weight:600}:host([data-size=\"sm\"]) .rz-dd-option{padding:.375rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dd-option{padding:.75rem 1rem;font-size:1rem}.rz-dd-empty{padding:1rem .75rem;text-align:center;font-size:.875rem;color:var(--rz-muted)}.rz-dd-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-dd-hint{color:var(--color-text-muted)}.rz-dd-error{color:var(--color-danger)}.rz-dd-fade-in{animation:rz-dd-in .2s ease}.rz-dd-fade-out{animation:rz-dd-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-dd-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes rz-dd-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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropDownComponent, decorators: [{
             type: Component,
@@ -533,7 +563,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         '[style.width]': '_width',
                         '(window:scroll)': '_onWindowScroll()',
                     }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rz-dd-wrapper\">\n  <label class=\"rz-dd-trigger\" (click)=\"_onTriggerClick($event)\">\n    <input\n      class=\"rz-dd-input\"\n      type=\"text\"\n      readonly\n      [attr.placeholder]=\"placeholder()\"\n      [attr.disabled]=\"disabled() ? true : null\"\n      [value]=\"_selectedLabel()\"\n    />\n\n    @if (_selectedLabel() && !disabled()) {\n      <button class=\"rz-dd-clear\" type=\"button\" (click)=\"_clear($event)\" aria-label=\"Clear\">\n        <i class=\"pi pi-times\"></i>\n      </button>\n    }\n\n    <i class=\"rz-dd-icon pi pi-chevron-down\" [class.is-open]=\"_isOpen()\"></i>\n  </label>\n\n  @if (_isOpen() || _isClosing()) {\n    <div\n      data-dd-panel\n      class=\"rz-dd-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-dd-fade-in]=\"_isOpen() && !_isClosing()\"\n      [class.rz-dd-fade-out]=\"_isClosing()\"\n      (click)=\"_onPanelClick($event)\">\n\n      @if (searchable()) {\n        <div class=\"rz-dd-search-wrap\">\n          <input\n            data-dd-search\n            type=\"text\"\n            class=\"rz-dd-search-input\"\n            placeholder=\"Search...\"\n            [value]=\"_searchQuery()\"\n            (input)=\"_searchQuery.set($any($event.target).value)\"\n            (click)=\"$event.stopPropagation()\"\n          />\n        </div>\n      }\n\n      <div\n        class=\"rz-dd-options\"\n        [style.max-height]=\"_maxHeight()\"\n        (scroll)=\"$event.stopPropagation()\">\n        @for (option of _filteredOptions(); track option.value) {\n          <button\n            type=\"button\"\n            class=\"rz-dd-option\"\n            [class.selected]=\"option.value === value()\"\n            (click)=\"_selectOption(option)\"\n          >{{ option.label }}</button>\n        }\n\n        @if (_filteredOptions().length === 0) {\n          <div class=\"rz-dd-empty\">No results found</div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (hint() && !error()) {\n  <span class=\"rz-dd-msg rz-dd-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"rz-dd-msg rz-dd-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}", styles: [":host{--rz-accent: var(--color-accent, oklch(.64 .2 50));--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-surface: var(--color-surface-alt, oklch(.975 .005 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-dd-input{border-color:var(--color-danger, oklch(.55 .25 25))!important}:host.has-error .rz-dd-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger, oklch(.55 .25 25)) 20%,transparent)!important}.rz-dd-wrapper{position:relative;overflow:visible}.rz-dd-trigger{display:flex;align-items:center;width:100%}.rz-dd-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-dd-input::placeholder{color:var(--rz-muted)}.rz-dd-input:disabled{opacity:.5;cursor:not-allowed}:host([data-accent]) .rz-dd-input{border-color:color-mix(in srgb,var(--rz-accent) 40%,var(--rz-border))}.rz-dd-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-dd-input{padding:.25rem 2.25rem .25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dd-input{padding:.75rem 3rem .75rem 1rem;font-size:1rem}.rz-dd-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-dd-clear:hover{color:var(--rz-text)}.rz-dd-icon{position:absolute;top:50%;translate:0 -50%;inset-inline-end:.625rem;pointer-events:none;color:var(--rz-muted);font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:transform .2s}.rz-dd-icon.is-open{transform:rotate(180deg)}:host([data-size=\"sm\"]) .rz-dd-icon{inset-inline-end:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dd-icon{inset-inline-end:.75rem;font-size:1.125rem}.rz-dd-panel{left:0;z-index:50;width:100%;min-width:15rem;background: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-dd-panel.absolute{position:absolute}.rz-dd-search-wrap{padding:.5rem .5rem 0}.rz-dd-search-input{width:100%;padding:.375rem .5rem;font-size:.875rem;border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:.25rem;outline:none;background:var(--color-surface, oklch(.99 0 0));color:var(--color-text, oklch(.14 .01 260));font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);box-sizing:border-box}.rz-dd-search-input::placeholder{color:var(--color-text-muted)}.rz-dd-search-input:focus{border-color:var(--color-accent)}.rz-dd-options{overflow-y:auto}.rz-dd-option{width:100%;text-align:left;border:none;cursor:pointer;transition:background .1s,color .1s;background:transparent;color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem .75rem;font-size:.875rem;box-sizing:border-box}.rz-dd-option:hover{background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface))}.rz-dd-option.selected{background:var(--rz-accent);color:var(--color-primary-inverse, oklch(.99 0 0));font-weight:600}:host([data-size=\"sm\"]) .rz-dd-option{padding:.375rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dd-option{padding:.75rem 1rem;font-size:1rem}.rz-dd-empty{padding:1rem .75rem;text-align:center;font-size:.875rem;color:var(--rz-muted)}.rz-dd-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-dd-hint{color:var(--color-text-muted)}.rz-dd-error{color:var(--color-danger)}.rz-dd-fade-in{animation:rz-dd-in .2s ease}.rz-dd-fade-out{animation:rz-dd-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-dd-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes rz-dd-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"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], 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 }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", 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 }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], 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 }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", 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 }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }] } });
 
 class FileUploadComponent {
     files = model([], ...(ngDevMode ? [{ debugName: "files" }] : []));
@@ -637,7 +667,7 @@ class MultiSelectComponent {
     error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
     width = input('', ...(ngDevMode ? [{ debugName: "width" }] : []));
     config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
-    appendToBody = input(undefined, ...(ngDevMode ? [{ debugName: "appendToBody" }] : []));
+    appendTo = input('body', ...(ngDevMode ? [{ debugName: "appendTo" }] : []));
     _size = computed(() => this.size(), ...(ngDevMode ? [{ debugName: "_size" }] : []));
     _direction = computed(() => this.config().direction ?? 'auto', ...(ngDevMode ? [{ debugName: "_direction" }] : []));
     _accentKey = computed(() => {
@@ -666,7 +696,18 @@ class MultiSelectComponent {
     _panelWidth = signal(0, ...(ngDevMode ? [{ debugName: "_panelWidth" }] : []));
     _panelEl = null;
     _searchQuery = signal('', ...(ngDevMode ? [{ debugName: "_searchQuery" }] : []));
-    _appendToParent = computed(() => this.appendToBody() ?? this.config().appendToBody ?? this.config().appendToParent ?? true, ...(ngDevMode ? [{ debugName: "_appendToParent" }] : []));
+    _appendToParent = computed(() => {
+        const a = this.appendTo();
+        if (a)
+            return a === 'parent';
+        const cb = this.config().appendToBody;
+        if (cb !== undefined)
+            return !cb;
+        const cp = this.config().appendToParent;
+        if (cp !== undefined)
+            return cp;
+        return false;
+    }, ...(ngDevMode ? [{ debugName: "_appendToParent" }] : []));
     _panelFixed = computed(() => this._isOpen() && this._appendToParent() ? 'fixed' : null, ...(ngDevMode ? [{ debugName: "_panelFixed" }] : []));
     _maxHeight = computed(() => this.config().maxHeight ?? '256px', ...(ngDevMode ? [{ debugName: "_maxHeight" }] : []));
     _selectedLabels = computed(() => {
@@ -830,7 +871,7 @@ class MultiSelectComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: MultiSelectComponent, isStandalone: true, selector: "app-multi-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", 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 }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", 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 }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "window:scroll": "_onWindowScroll()" }, properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--rz-accent": "_accentColorValue", "style.width": "_width" } }, ngImport: i0, template: "<div class=\"rz-ms-wrapper\">\n  <label class=\"rz-ms-trigger\" (click)=\"_onTriggerClick($event)\">\n    @let chips = _selectedLabels();\n\n    <div class=\"rz-ms-field\">\n      @for (label of chips; track label) {\n        <span class=\"rz-ms-chip\">\n          {{ label }}\n          <button type=\"button\" class=\"rz-ms-chip-remove\"\n            (click)=\"_removeChip(value()[$index], $event)\"\n            tabindex=\"-1\"\n            aria-label=\"Remove {{ label }}\"\n          >&times;</button>\n        </span>\n      }\n\n      <input\n        type=\"text\"\n        class=\"rz-ms-search-input\"\n        [attr.placeholder]=\"chips.length ? '' : placeholder()\"\n        [attr.disabled]=\"disabled() ? true : null\"\n        (input)=\"_onInput($event)\"\n        (click)=\"$event.stopPropagation()\"\n      />\n    </div>\n\n    <i class=\"rz-ms-icon pi pi-chevron-down\" [class.is-open]=\"_isOpen()\"></i>\n  </label>\n\n  @if (_isOpen() || _isClosing()) {\n    <div\n      data-ms-panel\n      class=\"rz-ms-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-ms-fade-in]=\"_isOpen() && !_isClosing()\"\n      [class.rz-ms-fade-out]=\"_isClosing()\"\n      (click)=\"_onPanelClick($event)\">\n\n      @if (searchable()) {\n        <div class=\"rz-ms-search-wrap\">\n          <input\n            data-ms-search\n            type=\"text\"\n            class=\"rz-ms-search-field-input\"\n            placeholder=\"Search...\"\n            [value]=\"_searchQuery()\"\n            (input)=\"_searchQuery.set($any($event.target).value)\"\n            (click)=\"$event.stopPropagation()\"\n          />\n        </div>\n      }\n\n      <div\n        class=\"rz-ms-options\"\n        [style.max-height]=\"_maxHeight()\"\n        (scroll)=\"$event.stopPropagation()\">\n\n        @if (selectAll() && _filteredOptions().length > 0) {\n          <button\n            type=\"button\"\n            class=\"rz-ms-option\"\n            (click)=\"_toggleSelectAll()\"\n          >\n            <span class=\"rz-ms-checkbox\" [class.checked]=\"_allFilteredSelected()\">\n              @if (_allFilteredSelected()) { &#10003; }\n            </span>\n            <span class=\"rz-ms-option-label\">{{ selectAllLabel() }}</span>\n          </button>\n          <div class=\"rz-ms-divider\"></div>\n        }\n\n        @for (option of _filteredOptions(); track option.value) {\n          <button\n            type=\"button\"\n            class=\"rz-ms-option\"\n            [class.selected]=\"_isSelected(_optVal(option))\"\n            (click)=\"_toggleOption(option)\"\n          >\n            <span class=\"rz-ms-checkbox\" [class.checked]=\"_isSelected(_optVal(option))\">\n              @if (_isSelected(_optVal(option))) { &#10003; }\n            </span>\n            <span>{{ option.label }}</span>\n          </button>\n        }\n\n        @if (_filteredOptions().length === 0) {\n          <div class=\"rz-ms-empty\">No results found</div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (hint() && !error()) {\n  <span class=\"rz-ms-msg rz-ms-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"rz-ms-msg rz-ms-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-accent, oklch(.64 .2 50));--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-surface: var(--color-surface-alt, oklch(.975 .005 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-ms-field{border-color:var(--color-danger, oklch(.55 .25 25))!important}:host.has-error .rz-ms-field:focus-within{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger, oklch(.55 .25 25)) 20%,transparent)!important}.rz-ms-wrapper{position:relative}.rz-ms-trigger{display:flex;align-items:center;width:100%;cursor:text}.rz-ms-field{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;min-height:0;height:auto;cursor:pointer;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);transition:border-color .2s ease,box-shadow .2s ease;padding:.375rem 2.5rem .375rem .75rem;font-size:.875rem}.rz-ms-field:disabled{opacity:.5;cursor:not-allowed}:host([data-size=\"sm\"]) .rz-ms-field{padding:.25rem 2rem .25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-ms-field{padding:.75rem 2.75rem .75rem 1rem;font-size:1rem}.rz-ms-chip{display:inline-flex;align-items:center;gap:2px;padding:1px 6px 1px 8px;font-size:.75rem;border-radius:9999px;white-space:nowrap;background:color-mix(in srgb,var(--rz-accent) 15%,transparent);color:var(--rz-accent);line-height:1.5}.rz-ms-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:inherit;font-size:10px;transition:background .15s}.rz-ms-chip-remove:hover{background:color-mix(in srgb,var(--rz-accent) 20%,transparent)}.rz-ms-search-input{flex:1;min-width:50px;outline:none;border:none;background:transparent;color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:0;margin:0}.rz-ms-search-input::placeholder{color:var(--rz-muted)}:host([data-size=\"sm\"]) .rz-ms-search-input{font-size:.75rem;height:1.25rem}:host([data-size=\"md\"]) .rz-ms-search-input{font-size:.875rem;height:1.5rem}:host([data-size=\"lg\"]) .rz-ms-search-input{font-size:1rem;height:1.5rem}.rz-ms-icon{position:absolute;top:50%;translate:0 -50%;right:.625rem;pointer-events:none;color:var(--rz-muted);font-size:.875rem;transition:transform .2s}.rz-ms-icon.is-open{transform:rotate(180deg)}:host([data-size=\"sm\"]) .rz-ms-icon{right:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-ms-icon{right:.75rem;font-size:1.125rem}.rz-ms-panel{left:0;z-index:50;width:100%;min-width:15rem;background: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))}.rz-ms-panel.absolute{position:absolute}.rz-ms-search-wrap{padding:.5rem .5rem 0}.rz-ms-search-field-input{width:100%;padding:.375rem .5rem;font-size:.875rem;border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:.25rem;outline:none;background:var(--color-surface, oklch(.99 0 0));color:var(--color-text, oklch(.14 .01 260));font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif)}.rz-ms-search-field-input::placeholder{color:var(--color-text-muted)}.rz-ms-search-field-input:focus{border-color:var(--color-accent)}.rz-ms-options{overflow-y:auto}.rz-ms-option{width:100%;display:flex;align-items:center;gap:.5rem;text-align:left;border:none;cursor:pointer;transition:background .1s,color .1s;background:transparent;color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem .75rem;font-size:.875rem}.rz-ms-option:hover{background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface))}.rz-ms-option.selected{background:var(--rz-accent)!important;color:var(--color-primary-inverse, oklch(.99 0 0))!important}:host([data-size=\"sm\"]) .rz-ms-option{padding:.375rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-ms-option{padding:.75rem 1rem;font-size:1rem}.rz-ms-checkbox{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;border-radius:.25rem;border:1px solid var(--rz-border);font-size:.625rem;flex-shrink:0;transition:all .15s;color:transparent}.rz-ms-checkbox.checked{background:var(--rz-accent);border-color:var(--rz-accent);color:#fff}.rz-ms-option-label{font-weight:500}.rz-ms-divider{height:1px;margin:0 .5rem;background:var(--rz-border)}.rz-ms-empty{padding:1rem .75rem;text-align:center;font-size:.875rem;color:var(--rz-muted)}.rz-ms-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-ms-hint{color:var(--color-text-muted)}.rz-ms-error{color:var(--color-danger)}.rz-ms-fade-in{animation:rz-ms-in .2s ease}.rz-ms-fade-out{animation:rz-ms-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-ms-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes rz-ms-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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: MultiSelectComponent, isStandalone: true, selector: "app-multi-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", 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 }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", 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 }, 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": "_onWindowScroll()" }, properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--rz-accent": "_accentColorValue", "style.width": "_width" } }, ngImport: i0, template: "<div class=\"rz-ms-wrapper\">\n  <label class=\"rz-ms-trigger\" (click)=\"_onTriggerClick($event)\">\n    @let chips = _selectedLabels();\n\n    <div class=\"rz-ms-field\">\n      @for (label of chips; track label) {\n        <span class=\"rz-ms-chip\">\n          {{ label }}\n          <button type=\"button\" class=\"rz-ms-chip-remove\"\n            (click)=\"_removeChip(value()[$index], $event)\"\n            tabindex=\"-1\"\n            aria-label=\"Remove {{ label }}\"\n          >&times;</button>\n        </span>\n      }\n\n      <input\n        type=\"text\"\n        class=\"rz-ms-search-input\"\n        [attr.placeholder]=\"chips.length ? '' : placeholder()\"\n        [attr.disabled]=\"disabled() ? true : null\"\n        (input)=\"_onInput($event)\"\n        (click)=\"$event.stopPropagation()\"\n      />\n    </div>\n\n    <i class=\"rz-ms-icon pi pi-chevron-down\" [class.is-open]=\"_isOpen()\"></i>\n  </label>\n\n  @if (_isOpen() || _isClosing()) {\n    <div\n      data-ms-panel\n      class=\"rz-ms-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-ms-fade-in]=\"_isOpen() && !_isClosing()\"\n      [class.rz-ms-fade-out]=\"_isClosing()\"\n      (click)=\"_onPanelClick($event)\">\n\n      @if (searchable()) {\n        <div class=\"rz-ms-search-wrap\">\n          <input\n            data-ms-search\n            type=\"text\"\n            class=\"rz-ms-search-field-input\"\n            placeholder=\"Search...\"\n            [value]=\"_searchQuery()\"\n            (input)=\"_searchQuery.set($any($event.target).value)\"\n            (click)=\"$event.stopPropagation()\"\n          />\n        </div>\n      }\n\n      <div\n        class=\"rz-ms-options\"\n        [style.max-height]=\"_maxHeight()\"\n        (scroll)=\"$event.stopPropagation()\">\n\n        @if (selectAll() && _filteredOptions().length > 0) {\n          <button\n            type=\"button\"\n            class=\"rz-ms-option\"\n            (click)=\"_toggleSelectAll()\"\n          >\n            <span class=\"rz-ms-checkbox\" [class.checked]=\"_allFilteredSelected()\">\n              @if (_allFilteredSelected()) { &#10003; }\n            </span>\n            <span class=\"rz-ms-option-label\">{{ selectAllLabel() }}</span>\n          </button>\n          <div class=\"rz-ms-divider\"></div>\n        }\n\n        @for (option of _filteredOptions(); track option.value) {\n          <button\n            type=\"button\"\n            class=\"rz-ms-option\"\n            [class.selected]=\"_isSelected(_optVal(option))\"\n            (click)=\"_toggleOption(option)\"\n          >\n            <span class=\"rz-ms-checkbox\" [class.checked]=\"_isSelected(_optVal(option))\">\n              @if (_isSelected(_optVal(option))) { &#10003; }\n            </span>\n            <span>{{ option.label }}</span>\n          </button>\n        }\n\n        @if (_filteredOptions().length === 0) {\n          <div class=\"rz-ms-empty\">No results found</div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (hint() && !error()) {\n  <span class=\"rz-ms-msg rz-ms-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"rz-ms-msg rz-ms-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-accent, oklch(.64 .2 50));--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-surface: var(--color-surface-alt, oklch(.975 .005 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-ms-field{border-color:var(--color-danger, oklch(.55 .25 25))!important}:host.has-error .rz-ms-field:focus-within{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger, oklch(.55 .25 25)) 20%,transparent)!important}.rz-ms-wrapper{position:relative}.rz-ms-trigger{display:flex;align-items:center;width:100%;cursor:text}.rz-ms-field{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;min-height:0;height:auto;cursor:pointer;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);transition:border-color .2s ease,box-shadow .2s ease;padding:.375rem 2.5rem .375rem .75rem;font-size:.875rem}.rz-ms-field:disabled{opacity:.5;cursor:not-allowed}:host([data-size=\"sm\"]) .rz-ms-field{padding:.25rem 2rem .25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-ms-field{padding:.75rem 2.75rem .75rem 1rem;font-size:1rem}.rz-ms-chip{display:inline-flex;align-items:center;gap:2px;padding:1px 6px 1px 8px;font-size:.75rem;border-radius:9999px;white-space:nowrap;background:color-mix(in srgb,var(--rz-accent) 15%,transparent);color:var(--rz-accent);line-height:1.5}.rz-ms-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:inherit;font-size:10px;transition:background .15s}.rz-ms-chip-remove:hover{background:color-mix(in srgb,var(--rz-accent) 20%,transparent)}.rz-ms-search-input{flex:1;min-width:50px;outline:none;border:none;background:transparent;color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:0;margin:0}.rz-ms-search-input::placeholder{color:var(--rz-muted)}:host([data-size=\"sm\"]) .rz-ms-search-input{font-size:.75rem;height:1.25rem}:host([data-size=\"md\"]) .rz-ms-search-input{font-size:.875rem;height:1.5rem}:host([data-size=\"lg\"]) .rz-ms-search-input{font-size:1rem;height:1.5rem}.rz-ms-icon{position:absolute;top:50%;translate:0 -50%;right:.625rem;pointer-events:none;color:var(--rz-muted);font-size:.875rem;transition:transform .2s}.rz-ms-icon.is-open{transform:rotate(180deg)}:host([data-size=\"sm\"]) .rz-ms-icon{right:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-ms-icon{right:.75rem;font-size:1.125rem}.rz-ms-panel{left:0;z-index:50;width:100%;min-width:15rem;background: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))}.rz-ms-panel.absolute{position:absolute}.rz-ms-search-wrap{padding:.5rem .5rem 0}.rz-ms-search-field-input{width:100%;padding:.375rem .5rem;font-size:.875rem;border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:.25rem;outline:none;background:var(--color-surface, oklch(.99 0 0));color:var(--color-text, oklch(.14 .01 260));font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif)}.rz-ms-search-field-input::placeholder{color:var(--color-text-muted)}.rz-ms-search-field-input:focus{border-color:var(--color-accent)}.rz-ms-options{overflow-y:auto}.rz-ms-option{width:100%;display:flex;align-items:center;gap:.5rem;text-align:left;border:none;cursor:pointer;transition:background .1s,color .1s;background:transparent;color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem .75rem;font-size:.875rem}.rz-ms-option:hover{background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface))}.rz-ms-option.selected{background:var(--rz-accent)!important;color:var(--color-primary-inverse, oklch(.99 0 0))!important}:host([data-size=\"sm\"]) .rz-ms-option{padding:.375rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-ms-option{padding:.75rem 1rem;font-size:1rem}.rz-ms-checkbox{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;border-radius:.25rem;border:1px solid var(--rz-border);font-size:.625rem;flex-shrink:0;transition:all .15s;color:transparent}.rz-ms-checkbox.checked{background:var(--rz-accent);border-color:var(--rz-accent);color:#fff}.rz-ms-option-label{font-weight:500}.rz-ms-divider{height:1px;margin:0 .5rem;background:var(--rz-border)}.rz-ms-empty{padding:1rem .75rem;text-align:center;font-size:.875rem;color:var(--rz-muted)}.rz-ms-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-ms-hint{color:var(--color-text-muted)}.rz-ms-error{color:var(--color-danger)}.rz-ms-fade-in{animation:rz-ms-in .2s ease}.rz-ms-fade-out{animation:rz-ms-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-ms-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes rz-ms-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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -842,7 +883,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         '[style.width]': '_width',
                         '(window:scroll)': '_onWindowScroll()',
                     }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rz-ms-wrapper\">\n  <label class=\"rz-ms-trigger\" (click)=\"_onTriggerClick($event)\">\n    @let chips = _selectedLabels();\n\n    <div class=\"rz-ms-field\">\n      @for (label of chips; track label) {\n        <span class=\"rz-ms-chip\">\n          {{ label }}\n          <button type=\"button\" class=\"rz-ms-chip-remove\"\n            (click)=\"_removeChip(value()[$index], $event)\"\n            tabindex=\"-1\"\n            aria-label=\"Remove {{ label }}\"\n          >&times;</button>\n        </span>\n      }\n\n      <input\n        type=\"text\"\n        class=\"rz-ms-search-input\"\n        [attr.placeholder]=\"chips.length ? '' : placeholder()\"\n        [attr.disabled]=\"disabled() ? true : null\"\n        (input)=\"_onInput($event)\"\n        (click)=\"$event.stopPropagation()\"\n      />\n    </div>\n\n    <i class=\"rz-ms-icon pi pi-chevron-down\" [class.is-open]=\"_isOpen()\"></i>\n  </label>\n\n  @if (_isOpen() || _isClosing()) {\n    <div\n      data-ms-panel\n      class=\"rz-ms-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-ms-fade-in]=\"_isOpen() && !_isClosing()\"\n      [class.rz-ms-fade-out]=\"_isClosing()\"\n      (click)=\"_onPanelClick($event)\">\n\n      @if (searchable()) {\n        <div class=\"rz-ms-search-wrap\">\n          <input\n            data-ms-search\n            type=\"text\"\n            class=\"rz-ms-search-field-input\"\n            placeholder=\"Search...\"\n            [value]=\"_searchQuery()\"\n            (input)=\"_searchQuery.set($any($event.target).value)\"\n            (click)=\"$event.stopPropagation()\"\n          />\n        </div>\n      }\n\n      <div\n        class=\"rz-ms-options\"\n        [style.max-height]=\"_maxHeight()\"\n        (scroll)=\"$event.stopPropagation()\">\n\n        @if (selectAll() && _filteredOptions().length > 0) {\n          <button\n            type=\"button\"\n            class=\"rz-ms-option\"\n            (click)=\"_toggleSelectAll()\"\n          >\n            <span class=\"rz-ms-checkbox\" [class.checked]=\"_allFilteredSelected()\">\n              @if (_allFilteredSelected()) { &#10003; }\n            </span>\n            <span class=\"rz-ms-option-label\">{{ selectAllLabel() }}</span>\n          </button>\n          <div class=\"rz-ms-divider\"></div>\n        }\n\n        @for (option of _filteredOptions(); track option.value) {\n          <button\n            type=\"button\"\n            class=\"rz-ms-option\"\n            [class.selected]=\"_isSelected(_optVal(option))\"\n            (click)=\"_toggleOption(option)\"\n          >\n            <span class=\"rz-ms-checkbox\" [class.checked]=\"_isSelected(_optVal(option))\">\n              @if (_isSelected(_optVal(option))) { &#10003; }\n            </span>\n            <span>{{ option.label }}</span>\n          </button>\n        }\n\n        @if (_filteredOptions().length === 0) {\n          <div class=\"rz-ms-empty\">No results found</div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (hint() && !error()) {\n  <span class=\"rz-ms-msg rz-ms-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"rz-ms-msg rz-ms-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-accent, oklch(.64 .2 50));--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-surface: var(--color-surface-alt, oklch(.975 .005 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-ms-field{border-color:var(--color-danger, oklch(.55 .25 25))!important}:host.has-error .rz-ms-field:focus-within{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger, oklch(.55 .25 25)) 20%,transparent)!important}.rz-ms-wrapper{position:relative}.rz-ms-trigger{display:flex;align-items:center;width:100%;cursor:text}.rz-ms-field{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;min-height:0;height:auto;cursor:pointer;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);transition:border-color .2s ease,box-shadow .2s ease;padding:.375rem 2.5rem .375rem .75rem;font-size:.875rem}.rz-ms-field:disabled{opacity:.5;cursor:not-allowed}:host([data-size=\"sm\"]) .rz-ms-field{padding:.25rem 2rem .25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-ms-field{padding:.75rem 2.75rem .75rem 1rem;font-size:1rem}.rz-ms-chip{display:inline-flex;align-items:center;gap:2px;padding:1px 6px 1px 8px;font-size:.75rem;border-radius:9999px;white-space:nowrap;background:color-mix(in srgb,var(--rz-accent) 15%,transparent);color:var(--rz-accent);line-height:1.5}.rz-ms-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:inherit;font-size:10px;transition:background .15s}.rz-ms-chip-remove:hover{background:color-mix(in srgb,var(--rz-accent) 20%,transparent)}.rz-ms-search-input{flex:1;min-width:50px;outline:none;border:none;background:transparent;color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:0;margin:0}.rz-ms-search-input::placeholder{color:var(--rz-muted)}:host([data-size=\"sm\"]) .rz-ms-search-input{font-size:.75rem;height:1.25rem}:host([data-size=\"md\"]) .rz-ms-search-input{font-size:.875rem;height:1.5rem}:host([data-size=\"lg\"]) .rz-ms-search-input{font-size:1rem;height:1.5rem}.rz-ms-icon{position:absolute;top:50%;translate:0 -50%;right:.625rem;pointer-events:none;color:var(--rz-muted);font-size:.875rem;transition:transform .2s}.rz-ms-icon.is-open{transform:rotate(180deg)}:host([data-size=\"sm\"]) .rz-ms-icon{right:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-ms-icon{right:.75rem;font-size:1.125rem}.rz-ms-panel{left:0;z-index:50;width:100%;min-width:15rem;background: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))}.rz-ms-panel.absolute{position:absolute}.rz-ms-search-wrap{padding:.5rem .5rem 0}.rz-ms-search-field-input{width:100%;padding:.375rem .5rem;font-size:.875rem;border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:.25rem;outline:none;background:var(--color-surface, oklch(.99 0 0));color:var(--color-text, oklch(.14 .01 260));font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif)}.rz-ms-search-field-input::placeholder{color:var(--color-text-muted)}.rz-ms-search-field-input:focus{border-color:var(--color-accent)}.rz-ms-options{overflow-y:auto}.rz-ms-option{width:100%;display:flex;align-items:center;gap:.5rem;text-align:left;border:none;cursor:pointer;transition:background .1s,color .1s;background:transparent;color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem .75rem;font-size:.875rem}.rz-ms-option:hover{background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface))}.rz-ms-option.selected{background:var(--rz-accent)!important;color:var(--color-primary-inverse, oklch(.99 0 0))!important}:host([data-size=\"sm\"]) .rz-ms-option{padding:.375rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-ms-option{padding:.75rem 1rem;font-size:1rem}.rz-ms-checkbox{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;border-radius:.25rem;border:1px solid var(--rz-border);font-size:.625rem;flex-shrink:0;transition:all .15s;color:transparent}.rz-ms-checkbox.checked{background:var(--rz-accent);border-color:var(--rz-accent);color:#fff}.rz-ms-option-label{font-weight:500}.rz-ms-divider{height:1px;margin:0 .5rem;background:var(--rz-border)}.rz-ms-empty{padding:1rem .75rem;text-align:center;font-size:.875rem;color:var(--rz-muted)}.rz-ms-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-ms-hint{color:var(--color-text-muted)}.rz-ms-error{color:var(--color-danger)}.rz-ms-fade-in{animation:rz-ms-in .2s ease}.rz-ms-fade-out{animation:rz-ms-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-ms-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes rz-ms-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"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], 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 }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], accentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentColor", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", 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 }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], 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 }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], accentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentColor", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", 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 }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }] } });
 
 class PasswordInputComponent {
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
@@ -866,6 +907,14 @@ class PasswordInputComponent {
         const c = this.accentColor();
         return c && !isThemeColor(c) ? c : null;
     }, ...(ngDevMode ? [{ debugName: "_rawAccent" }] : []));
+    _accentColorValue = computed(() => {
+        const c = this.accentColor();
+        if (c && !isThemeColor(c))
+            return c;
+        const key = c && isThemeColor(c) ? c : 'primary';
+        const fallbacks = { primary: 'oklch(0.32 0.09 258)', secondary: 'oklch(0.55 0.12 40)', accent: 'oklch(0.64 0.2 50)', success: 'oklch(0.55 0.18 145)', warning: 'oklch(0.68 0.18 75)', danger: 'oklch(0.55 0.22 25)', info: 'oklch(0.55 0.15 235)' };
+        return `var(--color-${key}, ${fallbacks[key]})`;
+    }, ...(ngDevMode ? [{ debugName: "_accentColorValue" }] : []));
     _width = computed(() => this.width() || null, ...(ngDevMode ? [{ debugName: "_width" }] : []));
     _touched = signal(false, ...(ngDevMode ? [{ debugName: "_touched" }] : []));
     toggleVisibility() {
@@ -878,7 +927,7 @@ class PasswordInputComponent {
         this._touched.set(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PasswordInputComponent, isStandalone: true, selector: "app-password-input", 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 }, hideToggle: { classPropertyName: "hideToggle", publicName: "hideToggle", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", 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": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<label class=\"rz-pw-field\">\n  <input\n    class=\"rz-pw-input\"\n    [attr.type]=\"_type()\"\n    [attr.placeholder]=\"placeholder()\"\n    [attr.disabled]=\"disabled() ? true : null\"\n    [value]=\"value()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  @if (!hideToggle()) {\n    <button\n      class=\"rz-pw-toggle\"\n      type=\"button\"\n      (click)=\"toggleVisibility()\"\n      [attr.aria-label]=\"visible() ? 'Hide password' : 'Show password'\"\n    >\n      <i [class]=\"visible() ? 'pi pi-eye-slash' : 'pi pi-eye'\"></i>\n    </button>\n  }\n</label>\n\n@if (hint() && !error()) {\n  <span class=\"rz-pw-msg rz-pw-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"rz-pw-msg rz-pw-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary);--rz-bg: var(--color-surface);--rz-border: var(--color-border);--rz-text: var(--color-text);--rz-muted: var(--color-text-muted);--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1rem}:host([data-size=\"lg\"]){padding-bottom:1.75rem}:host([data-size=\"lg\"]) .rz-pw-input{padding:.85rem 2.75rem .85rem 1.15rem;font-size:1.05rem}:host([data-size=\"sm\"]) .rz-pw-input{padding:.25rem 2rem .25rem .5rem;font-size:.75rem}: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)}:host.has-error .rz-pw-input{border-color:var(--color-danger)!important}:host.has-error .rz-pw-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.rz-pw-field{position:relative;display:flex;align-items:center;width:100%}.rz-pw-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.5rem .5rem .75rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease}.rz-pw-input::placeholder{color:var(--rz-muted)}.rz-pw-input:disabled{opacity:.5;cursor:not-allowed}:host([data-accent]) .rz-pw-input{border-color:color-mix(in srgb,var(--rz-accent) 40%,var(--rz-border))}.rz-pw-input:focus{border-color:var(--rz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--rz-accent) 20%,transparent)}.rz-pw-toggle{position:absolute;display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:var(--rz-muted);transition:color .15s,background .15s;inset-inline-end:.375rem;width:1.5rem;height:1.5rem;font-size:.875rem;top:50%;translate:0 -50%}.rz-pw-toggle:hover{color:var(--rz-text);background:var(--color-surface-alt)}:host([data-size=\"sm\"]) .rz-pw-toggle{inset-inline-end:.25rem;width:1.25rem;height:1.25rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-pw-toggle{inset-inline-end:.5rem;width:1.5rem;height:1.5rem;font-size:1.125rem}.rz-pw-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-pw-hint{color:var(--color-text-muted)}.rz-pw-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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PasswordInputComponent, isStandalone: true, selector: "app-password-input", 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 }, hideToggle: { classPropertyName: "hideToggle", publicName: "hideToggle", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", 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.width": "_width" } }, ngImport: i0, template: "<label class=\"rz-pw-field\">\n  <input\n    class=\"rz-pw-input\"\n    [attr.type]=\"_type()\"\n    [attr.placeholder]=\"placeholder()\"\n    [attr.disabled]=\"disabled() ? true : null\"\n    [value]=\"value()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  @if (!hideToggle()) {\n    <button\n      class=\"rz-pw-toggle\"\n      type=\"button\"\n      (click)=\"toggleVisibility()\"\n      [attr.aria-label]=\"visible() ? 'Hide password' : 'Show password'\"\n    >\n      <i [class]=\"visible() ? 'pi pi-eye-slash' : 'pi pi-eye'\"></i>\n    </button>\n  }\n</label>\n\n@if (hint() && !error()) {\n  <span class=\"rz-pw-msg rz-pw-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"rz-pw-msg rz-pw-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary);--rz-bg: var(--color-surface);--rz-border: var(--color-border);--rz-text: var(--color-text);--rz-muted: var(--color-text-muted);--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1rem}:host([data-size=\"lg\"]){padding-bottom:1.75rem}:host([data-size=\"lg\"]) .rz-pw-input{padding:.85rem 2.75rem .85rem 1.15rem;font-size:1.05rem}:host([data-size=\"sm\"]) .rz-pw-input{padding:.25rem 2rem .25rem .5rem;font-size:.75rem}: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)}:host.has-error .rz-pw-input{border-color:var(--color-danger)!important}:host.has-error .rz-pw-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.rz-pw-field{position:relative;display:flex;align-items:center;width:100%}.rz-pw-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.5rem .5rem .75rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease}.rz-pw-input::placeholder{color:var(--rz-muted)}.rz-pw-input:disabled{opacity:.5;cursor:not-allowed}:host([data-accent]) .rz-pw-input{border-color:color-mix(in srgb,var(--rz-accent) 40%,var(--rz-border))}.rz-pw-input:focus{border-color:var(--rz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--rz-accent) 20%,transparent)}.rz-pw-toggle{position:absolute;display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:var(--rz-muted);transition:color .15s,background .15s;inset-inline-end:.375rem;width:1.5rem;height:1.5rem;font-size:.875rem;top:50%;translate:0 -50%}.rz-pw-toggle:hover{color:var(--rz-text);background:var(--color-surface-alt)}:host([data-size=\"sm\"]) .rz-pw-toggle{inset-inline-end:.25rem;width:1.25rem;height:1.25rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-pw-toggle{inset-inline-end:.5rem;width:1.5rem;height:1.5rem;font-size:1.125rem}.rz-pw-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-pw-hint{color:var(--color-text-muted)}.rz-pw-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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PasswordInputComponent, decorators: [{
             type: Component,
@@ -886,7 +935,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         '[attr.data-size]': '_size',
                         '[attr.data-accent]': '_accentKey',
                         '[class.has-error]': 'error()',
-                        '[style.--rz-accent]': '_rawAccent',
+                        '[style.--rz-accent]': '_accentColorValue',
                         '[style.width]': '_width',
                     }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"rz-pw-field\">\n  <input\n    class=\"rz-pw-input\"\n    [attr.type]=\"_type()\"\n    [attr.placeholder]=\"placeholder()\"\n    [attr.disabled]=\"disabled() ? true : null\"\n    [value]=\"value()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  @if (!hideToggle()) {\n    <button\n      class=\"rz-pw-toggle\"\n      type=\"button\"\n      (click)=\"toggleVisibility()\"\n      [attr.aria-label]=\"visible() ? 'Hide password' : 'Show password'\"\n    >\n      <i [class]=\"visible() ? 'pi pi-eye-slash' : 'pi pi-eye'\"></i>\n    </button>\n  }\n</label>\n\n@if (hint() && !error()) {\n  <span class=\"rz-pw-msg rz-pw-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"rz-pw-msg rz-pw-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary);--rz-bg: var(--color-surface);--rz-border: var(--color-border);--rz-text: var(--color-text);--rz-muted: var(--color-text-muted);--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1rem}:host([data-size=\"lg\"]){padding-bottom:1.75rem}:host([data-size=\"lg\"]) .rz-pw-input{padding:.85rem 2.75rem .85rem 1.15rem;font-size:1.05rem}:host([data-size=\"sm\"]) .rz-pw-input{padding:.25rem 2rem .25rem .5rem;font-size:.75rem}: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)}:host.has-error .rz-pw-input{border-color:var(--color-danger)!important}:host.has-error .rz-pw-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.rz-pw-field{position:relative;display:flex;align-items:center;width:100%}.rz-pw-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.5rem .5rem .75rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease}.rz-pw-input::placeholder{color:var(--rz-muted)}.rz-pw-input:disabled{opacity:.5;cursor:not-allowed}:host([data-accent]) .rz-pw-input{border-color:color-mix(in srgb,var(--rz-accent) 40%,var(--rz-border))}.rz-pw-input:focus{border-color:var(--rz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--rz-accent) 20%,transparent)}.rz-pw-toggle{position:absolute;display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:var(--rz-muted);transition:color .15s,background .15s;inset-inline-end:.375rem;width:1.5rem;height:1.5rem;font-size:.875rem;top:50%;translate:0 -50%}.rz-pw-toggle:hover{color:var(--rz-text);background:var(--color-surface-alt)}:host([data-size=\"sm\"]) .rz-pw-toggle{inset-inline-end:.25rem;width:1.25rem;height:1.25rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-pw-toggle{inset-inline-end:.5rem;width:1.5rem;height:1.5rem;font-size:1.125rem}.rz-pw-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-pw-hint{color:var(--color-text-muted)}.rz-pw-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"] }]
         }], 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 }] }], hideToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideToggle", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
@@ -910,6 +959,14 @@ class SearchInputComponent {
         const c = this.accentColor();
         return c && !isThemeColor(c) ? c : null;
     }, ...(ngDevMode ? [{ debugName: "_rawAccent" }] : []));
+    _accentColorValue = computed(() => {
+        const c = this.accentColor();
+        if (c && !isThemeColor(c))
+            return c;
+        const key = c && isThemeColor(c) ? c : 'primary';
+        const fallbacks = { primary: 'oklch(0.32 0.09 258)', secondary: 'oklch(0.55 0.12 40)', accent: 'oklch(0.64 0.2 50)', success: 'oklch(0.55 0.18 145)', warning: 'oklch(0.68 0.18 75)', danger: 'oklch(0.55 0.22 25)', info: 'oklch(0.55 0.15 235)' };
+        return `var(--color-${key}, ${fallbacks[key]})`;
+    }, ...(ngDevMode ? [{ debugName: "_accentColorValue" }] : []));
     _width = computed(() => this.width() || null, ...(ngDevMode ? [{ debugName: "_width" }] : []));
     _touched = signal(false, ...(ngDevMode ? [{ debugName: "_touched" }] : []));
     onInput(event) {
@@ -919,7 +976,7 @@ class SearchInputComponent {
         this._touched.set(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SearchInputComponent, isStandalone: true, selector: "app-search-input", 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 }, width: { classPropertyName: "width", publicName: "width", 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": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<div class=\"rz-search-field\">\n  <span class=\"rz-search-icon\" aria-hidden=\"true\">\n    <i class=\"pi pi-search\"></i>\n  </span>\n\n  <input\n    class=\"rz-search-input\"\n    type=\"search\"\n    [attr.placeholder]=\"placeholder()\"\n    [attr.disabled]=\"disabled() ? true : null\"\n    [value]=\"value()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  @if (value() && !disabled()) {\n    <button class=\"rz-search-clear\" type=\"button\" (click)=\"value.set('')\" aria-label=\"Clear search\">\n      <i class=\"pi pi-times\"></i>\n    </button>\n  }\n</div>\n\n@if (hint() && !error()) {\n  <span class=\"rz-search-msg rz-search-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"rz-search-msg rz-search-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary);--rz-bg: var(--color-surface);--rz-border: var(--color-border);--rz-text: var(--color-text);--rz-muted: var(--color-text-muted);--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1rem}:host([data-size=\"lg\"]){padding-bottom:1.75rem}: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-search-field{position:relative;display:flex;align-items:center;width:100%}.rz-search-icon{position:absolute;left:.75rem;display:flex;align-items:center;pointer-events:none;z-index:1;color:var(--rz-muted);font-size:.875rem;transition:color .2s}:host([data-size=\"sm\"]) .rz-search-icon{left:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-search-icon{left:.875rem;font-size:1.125rem}.rz-search-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.25rem .5rem 2.5rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease}.rz-search-input::placeholder{color:var(--rz-muted)}.rz-search-input:disabled{opacity:.5;cursor:not-allowed}:host([data-accent]) .rz-search-input{border-color:color-mix(in srgb,var(--rz-accent) 40%,var(--rz-border))}.rz-search-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-search-input{padding:.25rem 1.75rem .25rem 2rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-search-input{padding:.85rem 2.5rem .85rem 2.75rem;font-size:1.05rem}.rz-search-input::-webkit-search-decoration,.rz-search-input::-webkit-search-cancel-button,.rz-search-input::-webkit-search-results-button,.rz-search-input::-webkit-search-results-decoration{display:none}.rz-search-clear{position:absolute;right:.5rem;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:var(--rz-muted);font-size:.75rem;transition:color .15s,background .15s}.rz-search-clear:hover{color:var(--rz-text);background:var(--color-surface-alt)}.rz-search-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-search-hint{color:var(--color-text-muted)}.rz-search-error{color:var(--color-danger)}:host.has-error .rz-search-input{border-color:var(--color-danger)!important}:host.has-error .rz-search-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SearchInputComponent, isStandalone: true, selector: "app-search-input", 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 }, width: { classPropertyName: "width", publicName: "width", 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.width": "_width" } }, ngImport: i0, template: "<div class=\"rz-search-field\">\n  <span class=\"rz-search-icon\" aria-hidden=\"true\">\n    <i class=\"pi pi-search\"></i>\n  </span>\n\n  <input\n    class=\"rz-search-input\"\n    type=\"search\"\n    [attr.placeholder]=\"placeholder()\"\n    [attr.disabled]=\"disabled() ? true : null\"\n    [value]=\"value()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  @if (value() && !disabled()) {\n    <button class=\"rz-search-clear\" type=\"button\" (click)=\"value.set('')\" aria-label=\"Clear search\">\n      <i class=\"pi pi-times\"></i>\n    </button>\n  }\n</div>\n\n@if (hint() && !error()) {\n  <span class=\"rz-search-msg rz-search-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"rz-search-msg rz-search-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary);--rz-bg: var(--color-surface);--rz-border: var(--color-border);--rz-text: var(--color-text);--rz-muted: var(--color-text-muted);--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1rem}:host([data-size=\"lg\"]){padding-bottom:1.75rem}: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-search-field{position:relative;display:flex;align-items:center;width:100%}.rz-search-icon{position:absolute;left:.75rem;display:flex;align-items:center;pointer-events:none;z-index:1;color:var(--rz-muted);font-size:.875rem;transition:color .2s}:host([data-size=\"sm\"]) .rz-search-icon{left:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-search-icon{left:.875rem;font-size:1.125rem}.rz-search-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.25rem .5rem 2.5rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease}.rz-search-input::placeholder{color:var(--rz-muted)}.rz-search-input:disabled{opacity:.5;cursor:not-allowed}:host([data-accent]) .rz-search-input{border-color:color-mix(in srgb,var(--rz-accent) 40%,var(--rz-border))}.rz-search-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-search-input{padding:.25rem 1.75rem .25rem 2rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-search-input{padding:.85rem 2.5rem .85rem 2.75rem;font-size:1.05rem}.rz-search-input::-webkit-search-decoration,.rz-search-input::-webkit-search-cancel-button,.rz-search-input::-webkit-search-results-button,.rz-search-input::-webkit-search-results-decoration{display:none}.rz-search-clear{position:absolute;right:.5rem;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:var(--rz-muted);font-size:.75rem;transition:color .15s,background .15s}.rz-search-clear:hover{color:var(--rz-text);background:var(--color-surface-alt)}.rz-search-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-search-hint{color:var(--color-text-muted)}.rz-search-error{color:var(--color-danger)}:host.has-error .rz-search-input{border-color:var(--color-danger)!important}:host.has-error .rz-search-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchInputComponent, decorators: [{
             type: Component,
@@ -927,7 +984,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         '[attr.data-size]': '_size',
                         '[attr.data-accent]': '_accentKey',
                         '[class.has-error]': 'error()',
-                        '[style.--rz-accent]': '_rawAccent',
+                        '[style.--rz-accent]': '_accentColorValue',
                         '[style.width]': '_width',
                     }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rz-search-field\">\n  <span class=\"rz-search-icon\" aria-hidden=\"true\">\n    <i class=\"pi pi-search\"></i>\n  </span>\n\n  <input\n    class=\"rz-search-input\"\n    type=\"search\"\n    [attr.placeholder]=\"placeholder()\"\n    [attr.disabled]=\"disabled() ? true : null\"\n    [value]=\"value()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  @if (value() && !disabled()) {\n    <button class=\"rz-search-clear\" type=\"button\" (click)=\"value.set('')\" aria-label=\"Clear search\">\n      <i class=\"pi pi-times\"></i>\n    </button>\n  }\n</div>\n\n@if (hint() && !error()) {\n  <span class=\"rz-search-msg rz-search-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"rz-search-msg rz-search-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary);--rz-bg: var(--color-surface);--rz-border: var(--color-border);--rz-text: var(--color-text);--rz-muted: var(--color-text-muted);--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1rem}:host([data-size=\"lg\"]){padding-bottom:1.75rem}: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-search-field{position:relative;display:flex;align-items:center;width:100%}.rz-search-icon{position:absolute;left:.75rem;display:flex;align-items:center;pointer-events:none;z-index:1;color:var(--rz-muted);font-size:.875rem;transition:color .2s}:host([data-size=\"sm\"]) .rz-search-icon{left:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-search-icon{left:.875rem;font-size:1.125rem}.rz-search-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.25rem .5rem 2.5rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease}.rz-search-input::placeholder{color:var(--rz-muted)}.rz-search-input:disabled{opacity:.5;cursor:not-allowed}:host([data-accent]) .rz-search-input{border-color:color-mix(in srgb,var(--rz-accent) 40%,var(--rz-border))}.rz-search-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-search-input{padding:.25rem 1.75rem .25rem 2rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-search-input{padding:.85rem 2.5rem .85rem 2.75rem;font-size:1.05rem}.rz-search-input::-webkit-search-decoration,.rz-search-input::-webkit-search-cancel-button,.rz-search-input::-webkit-search-results-button,.rz-search-input::-webkit-search-results-decoration{display:none}.rz-search-clear{position:absolute;right:.5rem;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:var(--rz-muted);font-size:.75rem;transition:color .15s,background .15s}.rz-search-clear:hover{color:var(--rz-text);background:var(--color-surface-alt)}.rz-search-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-search-hint{color:var(--color-text-muted)}.rz-search-error{color:var(--color-danger)}:host.has-error .rz-search-input{border-color:var(--color-danger)!important}:host.has-error .rz-search-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.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"] }]
         }], 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 }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
@@ -951,6 +1008,14 @@ class TextInputComponent {
         const c = this.accentColor();
         return c && !isThemeColor(c) ? c : null;
     }, ...(ngDevMode ? [{ debugName: "_rawAccent" }] : []));
+    _accentColorValue = computed(() => {
+        const c = this.accentColor();
+        if (c && !isThemeColor(c))
+            return c;
+        const key = c && isThemeColor(c) ? c : 'primary';
+        const fallbacks = { primary: 'oklch(0.32 0.09 258)', secondary: 'oklch(0.55 0.12 40)', accent: 'oklch(0.64 0.2 50)', success: 'oklch(0.55 0.18 145)', warning: 'oklch(0.68 0.18 75)', danger: 'oklch(0.55 0.22 25)', info: 'oklch(0.55 0.15 235)' };
+        return `var(--color-${key}, ${fallbacks[key]})`;
+    }, ...(ngDevMode ? [{ debugName: "_accentColorValue" }] : []));
     _width = computed(() => this.width() || null, ...(ngDevMode ? [{ debugName: "_width" }] : []));
     _touched = signal(false, ...(ngDevMode ? [{ debugName: "_touched" }] : []));
     onInput(event) {
@@ -960,7 +1025,7 @@ class TextInputComponent {
         this._touched.set(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TextInputComponent, isStandalone: true, selector: "app-text-input", 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 }, width: { classPropertyName: "width", publicName: "width", 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": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<input\n  class=\"rz-text-input\"\n  type=\"text\"\n  [attr.placeholder]=\"placeholder()\"\n  [attr.disabled]=\"disabled() ? true : null\"\n  [value]=\"value()\"\n  (input)=\"onInput($event)\"\n  (blur)=\"onBlur()\"\n/>\n\n@if (hint() && !error()) {\n  <span class=\"rz-text-msg rz-text-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"rz-text-msg rz-text-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary);--rz-bg: var(--color-surface);--rz-border: var(--color-border);--rz-text: var(--color-text);--rz-muted: var(--color-text-muted);--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1rem}:host([data-size=\"lg\"]){padding-bottom:1.75rem}: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-text-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 .75rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease}.rz-text-input::placeholder{color:var(--rz-muted)}.rz-text-input:disabled{opacity:.5;cursor:not-allowed}:host([data-accent]) .rz-text-input{border-color:color-mix(in srgb,var(--rz-accent) 40%,var(--rz-border))}.rz-text-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-text-input{padding:.25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-text-input{padding:.85rem 1.15rem;font-size:1.05rem}.rz-text-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-text-hint{color:var(--color-text-muted)}.rz-text-error{color:var(--color-danger)}:host.has-error .rz-text-input{border-color:var(--color-danger)!important}:host.has-error .rz-text-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TextInputComponent, isStandalone: true, selector: "app-text-input", 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 }, width: { classPropertyName: "width", publicName: "width", 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.width": "_width" } }, ngImport: i0, template: "<input\n  class=\"rz-text-input\"\n  type=\"text\"\n  [attr.placeholder]=\"placeholder()\"\n  [attr.disabled]=\"disabled() ? true : null\"\n  [value]=\"value()\"\n  (input)=\"onInput($event)\"\n  (blur)=\"onBlur()\"\n/>\n\n@if (hint() && !error()) {\n  <span class=\"rz-text-msg rz-text-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"rz-text-msg rz-text-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary);--rz-bg: var(--color-surface);--rz-border: var(--color-border);--rz-text: var(--color-text);--rz-muted: var(--color-text-muted);--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1rem}:host([data-size=\"lg\"]){padding-bottom:1.75rem}: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-text-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 .75rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease}.rz-text-input::placeholder{color:var(--rz-muted)}.rz-text-input:disabled{opacity:.5;cursor:not-allowed}:host([data-accent]) .rz-text-input{border-color:color-mix(in srgb,var(--rz-accent) 40%,var(--rz-border))}.rz-text-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-text-input{padding:.25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-text-input{padding:.85rem 1.15rem;font-size:1.05rem}.rz-text-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-text-hint{color:var(--color-text-muted)}.rz-text-error{color:var(--color-danger)}:host.has-error .rz-text-input{border-color:var(--color-danger)!important}:host.has-error .rz-text-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
@@ -968,7 +1033,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         '[attr.data-size]': '_size',
                         '[attr.data-accent]': '_accentKey',
                         '[class.has-error]': 'error()',
-                        '[style.--rz-accent]': '_rawAccent',
+                        '[style.--rz-accent]': '_accentColorValue',
                         '[style.width]': '_width',
                     }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n  class=\"rz-text-input\"\n  type=\"text\"\n  [attr.placeholder]=\"placeholder()\"\n  [attr.disabled]=\"disabled() ? true : null\"\n  [value]=\"value()\"\n  (input)=\"onInput($event)\"\n  (blur)=\"onBlur()\"\n/>\n\n@if (hint() && !error()) {\n  <span class=\"rz-text-msg rz-text-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"rz-text-msg rz-text-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary);--rz-bg: var(--color-surface);--rz-border: var(--color-border);--rz-text: var(--color-text);--rz-muted: var(--color-text-muted);--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1rem}:host([data-size=\"lg\"]){padding-bottom:1.75rem}: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-text-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 .75rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease}.rz-text-input::placeholder{color:var(--rz-muted)}.rz-text-input:disabled{opacity:.5;cursor:not-allowed}:host([data-accent]) .rz-text-input{border-color:color-mix(in srgb,var(--rz-accent) 40%,var(--rz-border))}.rz-text-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-text-input{padding:.25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-text-input{padding:.85rem 1.15rem;font-size:1.05rem}.rz-text-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-text-hint{color:var(--color-text-muted)}.rz-text-error{color:var(--color-danger)}:host.has-error .rz-text-input{border-color:var(--color-danger)!important}:host.has-error .rz-text-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.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"] }]
         }], 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 }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
@@ -992,6 +1057,14 @@ class ToggleComponent {
         const c = this.accentColor();
         return c && !isThemeColor(c) ? c : null;
     }, ...(ngDevMode ? [{ debugName: "_rawAccent" }] : []));
+    _accentColorValue = computed(() => {
+        const c = this.accentColor();
+        if (c && !isThemeColor(c))
+            return c;
+        const key = c && isThemeColor(c) ? c : 'primary';
+        const fallbacks = { primary: 'oklch(0.32 0.09 258)', secondary: 'oklch(0.55 0.12 40)', accent: 'oklch(0.64 0.2 50)', success: 'oklch(0.55 0.18 145)', warning: 'oklch(0.68 0.18 75)', danger: 'oklch(0.55 0.22 25)', info: 'oklch(0.55 0.15 235)' };
+        return `var(--color-${key}, ${fallbacks[key]})`;
+    }, ...(ngDevMode ? [{ debugName: "_accentColorValue" }] : []));
     _width = computed(() => this.width() || null, ...(ngDevMode ? [{ debugName: "_width" }] : []));
     toggle() {
         if (this.disabled())
@@ -999,7 +1072,7 @@ class ToggleComponent {
         this.checked.update(v => !v);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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": "_rawAccent", "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 });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
@@ -1008,7 +1081,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         '[attr.data-accent]': '_accentKey',
                         '[class.has-error]': 'error()',
                         '[class.is-checked]': 'checked()',
-                        '[style.--rz-accent]': '_rawAccent',
+                        '[style.--rz-accent]': '_accentColorValue',
                         '[style.width]': '_width',
                     }, 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"] }]
         }], 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 }] }] } });
@@ -1793,7 +1866,7 @@ class TableComponent {
     }
     _trackByIndex(index) { return index; }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TableComponent, isStandalone: true, selector: "app-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, skeletonRows: { classPropertyName: "skeletonRows", publicName: "skeletonRows", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, pageable: { classPropertyName: "pageable", publicName: "pageable", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionKey: { classPropertyName: "selectionKey", publicName: "selectionKey", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, exportable: { classPropertyName: "exportable", publicName: "exportable", isSignal: true, isRequired: false, transformFunction: null }, columnToggle: { classPropertyName: "columnToggle", publicName: "columnToggle", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", pageChange: "pageChange", selectedRows: "selectedRows" }, host: { listeners: { "document:mousemove": "_onDocMouseMove($event)", "document:mouseup": "_onDocMouseUp()", "document:click": "_onDocClick($event)" } }, queries: [{ propertyName: "rowDetail", first: true, predicate: ["rowDetail"], descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (loading()) {\n  <app-table-skeleton [rows]=\"skeletonRows()\" [columns]=\"_skeletonCols()\" />\n} @else {\n  <div class=\"rz-tbl-wrapper\"\n    [style.width]=\"width() || '100%'\"\n    [style.border]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n  >\n    <table class=\"rz-tbl\" style=\"table-layout:fixed\">\n      <thead\n        [style.position]=\"stickyHeader() ? 'sticky' : undefined\"\n        [style.top]=\"stickyHeader() ? '0' : undefined\"\n        [style.z-index]=\"stickyHeader() ? '2' : undefined\"\n      >\n        <tr>\n          @if (selectable()) {\n            <th class=\"rz-tbl-header-checkbox\"\n              [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n              [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n            >\n              <input type=\"checkbox\" class=\"rz-tbl-checkbox\"\n                [checked]=\"_isAllSelected()\"\n                (change)=\"_toggleSelectAll()\"\n              />\n            </th>\n          }\n          @if (expandable()) {\n            <th class=\"rz-tbl-header-checkbox\"\n              [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n              [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n            ></th>\n          }\n          @for (col of _displayColumns(); track col.key) {\n            <th\n              class=\"rz-tbl-header\"\n              [style.text-align]=\"col.align || 'left'\"\n              [style.width]=\"_colWidth(col)\"\n              [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n              [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n              [class.rz-tbl-sortable]=\"col.sortable && sortable()\"\n              (click)=\"sortable() && col.sortable && _toggleSort(col.key)\"\n            >\n              {{ col.header }}\n              @if (col.sortable && sortable()) {\n                <i class=\"pi rz-tbl-sort-icon\" [class]=\"_sortIcon(col.key)\"></i>\n              }\n              @if (resizable()) {\n                <div class=\"rz-tbl-resize-handle\"\n                  (mousedown)=\"_onResizeStart($event,col.key)\"\n                ></div>\n              }\n            </th>\n          }\n        </tr>\n        @if (searchable() || _filterCols().length || exportable()) {\n          <tr>\n            <td [attr.colspan]=\"_colCount()\"\n              [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\"\n              [style.border-bottom]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n              [style.padding]=\"'8px 12px'\"\n              [style.vertical-align]=\"'middle'\"\n            >\n              <div class=\"rz-tbl-toolbar\">\n                @if (searchable()) {\n                  <app-search-input\n                    (valueChange)=\"_onSearch($event)\"\n                    placeholder=\"Search table...\"\n                    size=\"sm\"\n                    style=\"padding-bottom:0\"\n                  />\n                }\n                @for (col of _filterCols(); track col.key) {\n                  <app-drop-down\n                    [options]=\"col.filterOptions ?? []\"\n                    [placeholder]=\"'Filter ' + col.header\"\n                    size=\"sm\"\n                    [searchable]=\"true\"\n                    [config]=\"{ appendToParent: true }\"\n                    style=\"padding-bottom:0\"\n                    (valueChange)=\"_setFilter(col.key, $event)\"\n                  />\n                }\n                @if (columnToggle()) {\n                <div data-col-toggle class=\"rz-tbl-col-toggle\">\n                  <button\n                    type=\"button\"\n                    (click)=\"_columnToggleOpen.set(!_columnToggleOpen())\"\n                    class=\"rz-tbl-toolbar-btn\"\n                    [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n                  ><i class=\"pi pi-list rz-tbl-icon\"></i> Columns</button>\n                  @if (_columnToggleOpen()) {\n                    <div class=\"rz-tbl-dropdown\"\n                      [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n                    >\n                      @for (col of columns(); track col.key) {\n                        <label class=\"rz-tbl-dropdown-label\">\n                          <input type=\"checkbox\"\n                            [checked]=\"_isColumnVisible(col.key)\"\n                            (change)=\"_toggleColumn(col.key)\"\n                          />\n                          {{ col.header }}\n                        </label>\n                      }\n                    </div>\n                  }\n                </div>\n                }\n                @if (exportable()) {\n                  <div data-export-toggle class=\"rz-tbl-export-wrap\">\n                    <button\n                      type=\"button\"\n                      (click)=\"_exportOpen.set(!_exportOpen())\"\n                      class=\"rz-tbl-toolbar-btn\"\n                      [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n                    ><i class=\"pi pi-download rz-tbl-icon\"></i> Export</button>\n                    @if (_exportOpen()) {\n                      <div class=\"rz-tbl-export-dropdown\"\n                        [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n                      >\n                        @for (fmt of ['Excel', 'PDF']; track fmt) {\n                          <button\n                            type=\"button\"\n                            (click)=\"fmt === 'Excel' ? _exportExcel() : _exportPdf(); _exportOpen.set(false)\"\n                            class=\"rz-tbl-export-opt\"\n                          >{{ fmt }}</button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            </td>\n          </tr>\n        }\n      </thead>\n      <tbody>\n        @if (_displayRows().length === 0) {\n          <tr>\n            <td [attr.colspan]=\"_colCount()\" class=\"rz-tbl-empty\">{{ emptyMessage() }}</td>\n          </tr>\n        } @else {\n          @for (row of _displayRows(); track _trackByIndex($index); let rowIndex = $index) {\n            <tr\n              class=\"rz-tbl-row\"\n              [class.rz-tbl-row-hoverable]=\"hoverable()\"\n              [style.background-color]=\"selectable() && _isSelected(row) ? 'color-mix(in srgb,var(--color-primary,oklch(0.32 0.09 258)) 8%,transparent)' : striped() && rowIndex % 2 === 1 ? 'var(--color-surface-alt,oklch(0.975 0.005 260))' : 'transparent'\"\n            >\n              @if (selectable()) {\n                <td class=\"rz-tbl-cell-center\">\n                  <input type=\"checkbox\" class=\"rz-tbl-checkbox\"\n                    [checked]=\"_isSelected(row)\"\n                    (change)=\"_toggleSelect(row)\"\n                  />\n                </td>\n              }\n              @if (expandable()) {\n                <td class=\"rz-tbl-cell-center\">\n                  <button\n                    type=\"button\"\n                    (click)=\"_toggleExpand(rowIndex)\"\n                    class=\"rz-tbl-expand-btn\"\n                  >\n                    <i class=\"pi rz-tbl-icon\" [class.pi-chevron-down]=\"_isExpanded(rowIndex)\" [class.pi-chevron-right]=\"!_isExpanded(rowIndex)\"></i>\n                  </button>\n                </td>\n              }\n              @for (col of _displayColumns(); track col.key; let colIndex = $index) {\n                @let meta = _rowMeta()[rowIndex][colIndex];\n                @if (meta.visible) {\n                    <td\n                      [attr.rowspan]=\"meta.rowspan > 1 ? meta.rowspan : null\"\n                      [style.text-align]=\"col.align || 'left'\"\n                      class=\"rz-tbl-cell\"\n                    >\n                      @if (col.actions) {\n                        <div class=\"rz-tbl-actions\">\n                          @for (action of col.actions; track $index) {\n                            @if (!action.visible || action.visible(row)) {\n                              <button\n                                type=\"button\"\n                                class=\"rz-tbl-action-btn\"\n                                [style.color]=\"action.accentColor ? 'var(--color-' + action.accentColor + ',oklch(0.32 0.09 258))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n                                [style.opacity]=\"action.disabled?.(row) ? '0.5' : '1'\"\n                                [disabled]=\"action.disabled?.(row) ?? false\"\n                                (click)=\"action.click(row)\"\n                                [title]=\"action.label || ''\"\n                              >\n                                @if (action.icon) { <i [class]=\"action.icon\" class=\"rz-tbl-icon\"></i> }\n                                @if (action.label) { <span>{{ action.label }}</span> }\n                              </button>\n                            }\n                          }\n                        </div>\n                      } @else {\n                        <app-tooltip position=\"top\" [text]=\"_cellText(row, col)\">\n                          {{ _cellLabel(row, col) }}\n                        </app-tooltip>\n                      }\n                  </td>\n                }\n              }\n            </tr>\n            @if (expandable() && _isExpanded(rowIndex)) {\n              <tr class=\"rz-tbl-row\">\n                <td [attr.colspan]=\"_colCount()\" [style.padding]=\"'0'\">\n                  <div [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\">\n                    @if (rowDetail) {\n                      <ng-container *ngTemplateOutlet=\"rowDetail; context: { $implicit: row }\" />\n                    } @else {\n                      <div class=\"rz-tbl-detail\">No detail template</div>\n                    }\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n          @if (_footerCols().length) {\n            <tr class=\"rz-tbl-footer-row\"\n              [style.border-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n              [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\"\n            >\n              <td [attr.colspan]=\"_colCount()\" class=\"rz-tbl-cell\"\n                [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n              >{{ _footerText() }}</td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n    @if (pageable() && _totalPages() > 1) {\n      <div class=\"rz-tbl-paginator\">\n        <div class=\"rz-tbl-page-info\">\n          <span>{{ _pageInfo().from }}\u2013{{ _pageInfo().to }} of {{ _pageInfo().total }}</span>\n          <app-drop-down\n            [options]=\"_pageSizeOptions()\"\n            [value]=\"'' + _pageSize()\"\n            size=\"sm\"\n            [config]=\"{ direction: 'up' }\"\n            style=\"padding-bottom:0\"\n            (valueChange)=\"_onPageSizeChange($event)\"\n          />\n        </div>\n        <div class=\"rz-tbl-page-btns\">\n          <button type=\"button\" (click)=\"_goToPage(1)\" [disabled]=\"_page() === 1\"\n            class=\"rz-tbl-page-btn\"\n          ><i class=\"pi pi-angle-double-left rz-tbl-page-icon\"></i></button>\n          <button type=\"button\" (click)=\"_goToPage(_page() - 1)\" [disabled]=\"_page() === 1\"\n            class=\"rz-tbl-page-btn\"\n          ><i class=\"pi pi-angle-left rz-tbl-page-icon\"></i></button>\n          @for (p of _visiblePages(); track p) {\n            <button type=\"button\" (click)=\"_goToPage(p)\"\n              class=\"rz-tbl-page-btn\"\n              [style.background-color]=\"p === _page() ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n              [style.color]=\"p === _page() ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n            >{{ p }}</button>\n          }\n          <button type=\"button\" (click)=\"_goToPage(_page() + 1)\" [disabled]=\"_page() === _totalPages()\"\n            class=\"rz-tbl-page-btn\"\n          ><i class=\"pi pi-angle-right rz-tbl-page-icon\"></i></button>\n          <button type=\"button\" (click)=\"_goToPage(_totalPages())\" [disabled]=\"_page() === _totalPages()\"\n            class=\"rz-tbl-page-btn\"\n          ><i class=\"pi pi-angle-double-right rz-tbl-page-icon\"></i></button>\n        </div>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:contents}.rz-tbl-wrapper{overflow-x:auto;position:relative;border-radius:var(--radius-md, .5rem)}.rz-tbl{width:100%;border-collapse:collapse}.rz-tbl-header{position:relative;padding:.625rem .75rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.rz-tbl-header-checkbox{padding:.625rem .75rem;font-size:.75rem;white-space:nowrap;text-align:center;width:40px}.rz-tbl-sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.rz-tbl-checkbox{cursor:pointer}.rz-tbl-sort-icon{margin-left:.375rem;font-size:.625rem;vertical-align:middle}.rz-tbl-resize-handle{position:absolute;inset-inline-end:2px;top:0;bottom:0;width:6px;cursor:col-resize;z-index:10;border-inline-end:2px solid var(--color-accent, oklch(.64 .2 50));opacity:.5;transition:opacity .15s}.rz-tbl-header:hover .rz-tbl-resize-handle{opacity:1}.rz-tbl-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:.375rem}.rz-tbl-toolbar-btn{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;font-size:.75rem;border-radius:var(--radius-md, .5rem);border:1px solid var(--color-border-light, oklch(.91 .01 260));cursor:pointer;color:var(--color-text, oklch(.14 .01 260));background:transparent;transition:opacity .2s}.rz-tbl-toolbar-btn:hover{opacity:.8}.rz-tbl-icon{font-size:.625rem}.rz-tbl-col-toggle{position:relative;margin-left:auto}.rz-tbl-export-wrap{position:relative}.rz-tbl-dropdown{position:absolute;top:100%;right:0;margin-top:.25rem;min-width:140px;padding:.375rem;border-radius:var(--radius-md, .5rem);box-shadow:0 4px 12px #0000001a;z-index:50;border:1px solid var(--color-border-light, oklch(.91 .01 260));background:var(--color-surface, oklch(.99 0 0))}.rz-tbl-dropdown-label{display:flex;align-items:center;gap:.5rem;padding:.375rem .5rem;font-size:.75rem;border-radius:var(--radius-sm, .25rem);cursor:pointer;white-space:nowrap;color:var(--color-text, oklch(.14 .01 260));transition:background-color .2s}.rz-tbl-dropdown-label:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-export-dropdown{position:absolute;top:100%;left:0;margin-top:.25rem;min-width:100px;padding:.25rem;border-radius:var(--radius-md, .5rem);box-shadow:0 4px 12px #0000001a;z-index:50;border:1px solid var(--color-border-light, oklch(.91 .01 260));background:var(--color-surface, oklch(.99 0 0))}.rz-tbl-export-opt{display:block;width:100%;text-align:left;padding:.375rem .5rem;font-size:.75rem;border-radius:var(--radius-sm, .25rem);cursor:pointer;border:none;background:transparent;color:var(--color-text, oklch(.14 .01 260));transition:background-color .2s}.rz-tbl-export-opt:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-empty{padding:2rem .75rem;text-align:center;font-size:.875rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-tbl-row{border-bottom:1px solid var(--color-border-light, oklch(.91 .01 260));transition:background-color .15s}.rz-tbl-row-hoverable:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-cell{padding:.625rem .75rem;font-size:.875rem;color:var(--color-text, oklch(.14 .01 260));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rz-tbl-cell-center{padding:.625rem .75rem;text-align:center}.rz-tbl-actions{display:flex;align-items:center;gap:.25rem}.rz-tbl-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:.25rem;padding:.25rem .5rem;font-size:.75rem;border-radius:var(--radius-md, .5rem);border:none;cursor:pointer;background:transparent;transition:opacity .15s}.rz-tbl-action-btn:disabled{cursor:not-allowed}.rz-tbl-expand-btn{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border:none;background:transparent;cursor:pointer;border-radius:var(--radius-sm, .25rem);color:var(--color-text-muted, oklch(.48 .01 260));transition:background-color .15s}.rz-tbl-expand-btn:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-detail{padding:.75rem;font-size:.875rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-tbl-footer-row{border-top:2px solid var(--color-primary, oklch(.32 .09 258));font-weight:500}.rz-tbl-paginator{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-top:1px solid var(--color-border-light, oklch(.91 .01 260));background:var(--color-surface, oklch(.99 0 0))}.rz-tbl-page-info{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-tbl-page-btns{display:flex;align-items:center;gap:.125rem}.rz-tbl-page-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;font-size:.75rem;border-radius:var(--radius-sm, .25rem);border:none;cursor:pointer;background:transparent;color:var(--color-text-muted, oklch(.48 .01 260));transition:background-color .15s,color .15s;font-weight:500}.rz-tbl-page-btn:disabled{opacity:.3;cursor:not-allowed}.rz-tbl-page-icon{font-size:.625rem}\n"], dependencies: [{ kind: "component", type: SearchInputComponent, selector: "app-search-input", inputs: ["value", "placeholder", "size", "disabled", "accentColor", "hint", "errorMessage", "error", "width"], outputs: ["valueChange"] }, { kind: "component", type: DropDownComponent, selector: "app-drop-down", inputs: ["value", "options", "placeholder", "size", "disabled", "accentColor", "searchable", "hint", "errorMessage", "error", "width", "config", "appendToBody"], outputs: ["valueChange"] }, { kind: "component", type: TableSkeletonComponent, selector: "app-table-skeleton", inputs: ["rows", "columns"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TooltipComponent, selector: "app-tooltip", inputs: ["text", "position", "disabled", "alwaysShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TableComponent, isStandalone: true, selector: "app-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, skeletonRows: { classPropertyName: "skeletonRows", publicName: "skeletonRows", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, pageable: { classPropertyName: "pageable", publicName: "pageable", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionKey: { classPropertyName: "selectionKey", publicName: "selectionKey", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, exportable: { classPropertyName: "exportable", publicName: "exportable", isSignal: true, isRequired: false, transformFunction: null }, columnToggle: { classPropertyName: "columnToggle", publicName: "columnToggle", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", pageChange: "pageChange", selectedRows: "selectedRows" }, host: { listeners: { "document:mousemove": "_onDocMouseMove($event)", "document:mouseup": "_onDocMouseUp()", "document:click": "_onDocClick($event)" } }, queries: [{ propertyName: "rowDetail", first: true, predicate: ["rowDetail"], descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (loading()) {\n  <app-table-skeleton [rows]=\"skeletonRows()\" [columns]=\"_skeletonCols()\" />\n} @else {\n  <div class=\"rz-tbl-wrapper\"\n    [style.width]=\"width() || '100%'\"\n    [style.border]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n  >\n    <table class=\"rz-tbl\" style=\"table-layout:fixed\">\n      <thead\n        [style.position]=\"stickyHeader() ? 'sticky' : undefined\"\n        [style.top]=\"stickyHeader() ? '0' : undefined\"\n        [style.z-index]=\"stickyHeader() ? '2' : undefined\"\n      >\n        <tr>\n          @if (selectable()) {\n            <th class=\"rz-tbl-header-checkbox\"\n              [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n              [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n            >\n              <input type=\"checkbox\" class=\"rz-tbl-checkbox\"\n                [checked]=\"_isAllSelected()\"\n                (change)=\"_toggleSelectAll()\"\n              />\n            </th>\n          }\n          @if (expandable()) {\n            <th class=\"rz-tbl-header-checkbox\"\n              [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n              [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n            ></th>\n          }\n          @for (col of _displayColumns(); track col.key) {\n            <th\n              class=\"rz-tbl-header\"\n              [style.text-align]=\"col.align || 'left'\"\n              [style.width]=\"_colWidth(col)\"\n              [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n              [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n              [class.rz-tbl-sortable]=\"col.sortable && sortable()\"\n              (click)=\"sortable() && col.sortable && _toggleSort(col.key)\"\n            >\n              {{ col.header }}\n              @if (col.sortable && sortable()) {\n                <i class=\"pi rz-tbl-sort-icon\" [class]=\"_sortIcon(col.key)\"></i>\n              }\n              @if (resizable()) {\n                <div class=\"rz-tbl-resize-handle\"\n                  (mousedown)=\"_onResizeStart($event,col.key)\"\n                ></div>\n              }\n            </th>\n          }\n        </tr>\n        @if (searchable() || _filterCols().length || exportable()) {\n          <tr>\n            <td [attr.colspan]=\"_colCount()\"\n              [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\"\n              [style.border-bottom]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n              [style.padding]=\"'8px 12px'\"\n              [style.vertical-align]=\"'middle'\"\n            >\n              <div class=\"rz-tbl-toolbar\">\n                @if (searchable()) {\n                  <app-search-input\n                    (valueChange)=\"_onSearch($event)\"\n                    placeholder=\"Search table...\"\n                    size=\"sm\"\n                    style=\"padding-bottom:0\"\n                  />\n                }\n                @for (col of _filterCols(); track col.key) {\n                  <app-drop-down\n                    [options]=\"col.filterOptions ?? []\"\n                    [placeholder]=\"'Filter ' + col.header\"\n                    size=\"sm\"\n                    [searchable]=\"true\"\n                    [config]=\"{ appendToParent: true }\"\n                    style=\"padding-bottom:0\"\n                    (valueChange)=\"_setFilter(col.key, $event)\"\n                  />\n                }\n                @if (columnToggle()) {\n                <div data-col-toggle class=\"rz-tbl-col-toggle\">\n                  <button\n                    type=\"button\"\n                    (click)=\"_columnToggleOpen.set(!_columnToggleOpen())\"\n                    class=\"rz-tbl-toolbar-btn\"\n                    [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n                  ><i class=\"pi pi-list rz-tbl-icon\"></i> Columns</button>\n                  @if (_columnToggleOpen()) {\n                    <div class=\"rz-tbl-dropdown\"\n                      [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n                    >\n                      @for (col of columns(); track col.key) {\n                        <label class=\"rz-tbl-dropdown-label\">\n                          <input type=\"checkbox\"\n                            [checked]=\"_isColumnVisible(col.key)\"\n                            (change)=\"_toggleColumn(col.key)\"\n                          />\n                          {{ col.header }}\n                        </label>\n                      }\n                    </div>\n                  }\n                </div>\n                }\n                @if (exportable()) {\n                  <div data-export-toggle class=\"rz-tbl-export-wrap\">\n                    <button\n                      type=\"button\"\n                      (click)=\"_exportOpen.set(!_exportOpen())\"\n                      class=\"rz-tbl-toolbar-btn\"\n                      [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n                    ><i class=\"pi pi-download rz-tbl-icon\"></i> Export</button>\n                    @if (_exportOpen()) {\n                      <div class=\"rz-tbl-export-dropdown\"\n                        [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n                      >\n                        @for (fmt of ['Excel', 'PDF']; track fmt) {\n                          <button\n                            type=\"button\"\n                            (click)=\"fmt === 'Excel' ? _exportExcel() : _exportPdf(); _exportOpen.set(false)\"\n                            class=\"rz-tbl-export-opt\"\n                          >{{ fmt }}</button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            </td>\n          </tr>\n        }\n      </thead>\n      <tbody>\n        @if (_displayRows().length === 0) {\n          <tr>\n            <td [attr.colspan]=\"_colCount()\" class=\"rz-tbl-empty\">{{ emptyMessage() }}</td>\n          </tr>\n        } @else {\n          @for (row of _displayRows(); track _trackByIndex($index); let rowIndex = $index) {\n            <tr\n              class=\"rz-tbl-row\"\n              [class.rz-tbl-row-hoverable]=\"hoverable()\"\n              [style.background-color]=\"selectable() && _isSelected(row) ? 'color-mix(in srgb,var(--color-primary,oklch(0.32 0.09 258)) 8%,transparent)' : striped() && rowIndex % 2 === 1 ? 'var(--color-surface-alt,oklch(0.975 0.005 260))' : 'transparent'\"\n            >\n              @if (selectable()) {\n                <td class=\"rz-tbl-cell-center\">\n                  <input type=\"checkbox\" class=\"rz-tbl-checkbox\"\n                    [checked]=\"_isSelected(row)\"\n                    (change)=\"_toggleSelect(row)\"\n                  />\n                </td>\n              }\n              @if (expandable()) {\n                <td class=\"rz-tbl-cell-center\">\n                  <button\n                    type=\"button\"\n                    (click)=\"_toggleExpand(rowIndex)\"\n                    class=\"rz-tbl-expand-btn\"\n                  >\n                    <i class=\"pi rz-tbl-icon\" [class.pi-chevron-down]=\"_isExpanded(rowIndex)\" [class.pi-chevron-right]=\"!_isExpanded(rowIndex)\"></i>\n                  </button>\n                </td>\n              }\n              @for (col of _displayColumns(); track col.key; let colIndex = $index) {\n                @let meta = _rowMeta()[rowIndex][colIndex];\n                @if (meta.visible) {\n                    <td\n                      [attr.rowspan]=\"meta.rowspan > 1 ? meta.rowspan : null\"\n                      [style.text-align]=\"col.align || 'left'\"\n                      class=\"rz-tbl-cell\"\n                    >\n                      @if (col.actions) {\n                        <div class=\"rz-tbl-actions\">\n                          @for (action of col.actions; track $index) {\n                            @if (!action.visible || action.visible(row)) {\n                              <button\n                                type=\"button\"\n                                class=\"rz-tbl-action-btn\"\n                                [style.color]=\"action.accentColor ? 'var(--color-' + action.accentColor + ',oklch(0.32 0.09 258))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n                                [style.opacity]=\"action.disabled?.(row) ? '0.5' : '1'\"\n                                [disabled]=\"action.disabled?.(row) ?? false\"\n                                (click)=\"action.click(row)\"\n                                [title]=\"action.label || ''\"\n                              >\n                                @if (action.icon) { <i [class]=\"action.icon\" class=\"rz-tbl-icon\"></i> }\n                                @if (action.label) { <span>{{ action.label }}</span> }\n                              </button>\n                            }\n                          }\n                        </div>\n                      } @else {\n                        <app-tooltip position=\"top\" [text]=\"_cellText(row, col)\">\n                          {{ _cellLabel(row, col) }}\n                        </app-tooltip>\n                      }\n                  </td>\n                }\n              }\n            </tr>\n            @if (expandable() && _isExpanded(rowIndex)) {\n              <tr class=\"rz-tbl-row\">\n                <td [attr.colspan]=\"_colCount()\" [style.padding]=\"'0'\">\n                  <div [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\">\n                    @if (rowDetail) {\n                      <ng-container *ngTemplateOutlet=\"rowDetail; context: { $implicit: row }\" />\n                    } @else {\n                      <div class=\"rz-tbl-detail\">No detail template</div>\n                    }\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n          @if (_footerCols().length) {\n            <tr class=\"rz-tbl-footer-row\"\n              [style.border-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n              [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\"\n            >\n              <td [attr.colspan]=\"_colCount()\" class=\"rz-tbl-cell\"\n                [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n              >{{ _footerText() }}</td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n    @if (pageable() && _totalPages() > 1) {\n      <div class=\"rz-tbl-paginator\">\n        <div class=\"rz-tbl-page-info\">\n          <span>{{ _pageInfo().from }}\u2013{{ _pageInfo().to }} of {{ _pageInfo().total }}</span>\n          <app-drop-down\n            [options]=\"_pageSizeOptions()\"\n            [value]=\"'' + _pageSize()\"\n            size=\"sm\"\n            [config]=\"{ direction: 'up' }\"\n            style=\"padding-bottom:0\"\n            (valueChange)=\"_onPageSizeChange($event)\"\n          />\n        </div>\n        <div class=\"rz-tbl-page-btns\">\n          <button type=\"button\" (click)=\"_goToPage(1)\" [disabled]=\"_page() === 1\"\n            class=\"rz-tbl-page-btn\"\n          ><i class=\"pi pi-angle-double-left rz-tbl-page-icon\"></i></button>\n          <button type=\"button\" (click)=\"_goToPage(_page() - 1)\" [disabled]=\"_page() === 1\"\n            class=\"rz-tbl-page-btn\"\n          ><i class=\"pi pi-angle-left rz-tbl-page-icon\"></i></button>\n          @for (p of _visiblePages(); track p) {\n            <button type=\"button\" (click)=\"_goToPage(p)\"\n              class=\"rz-tbl-page-btn\"\n              [style.background-color]=\"p === _page() ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n              [style.color]=\"p === _page() ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n            >{{ p }}</button>\n          }\n          <button type=\"button\" (click)=\"_goToPage(_page() + 1)\" [disabled]=\"_page() === _totalPages()\"\n            class=\"rz-tbl-page-btn\"\n          ><i class=\"pi pi-angle-right rz-tbl-page-icon\"></i></button>\n          <button type=\"button\" (click)=\"_goToPage(_totalPages())\" [disabled]=\"_page() === _totalPages()\"\n            class=\"rz-tbl-page-btn\"\n          ><i class=\"pi pi-angle-double-right rz-tbl-page-icon\"></i></button>\n        </div>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:contents}.rz-tbl-wrapper{overflow-x:auto;position:relative;border-radius:var(--radius-md, .5rem)}.rz-tbl{width:100%;border-collapse:collapse}.rz-tbl-header{position:relative;padding:.625rem .75rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.rz-tbl-header-checkbox{padding:.625rem .75rem;font-size:.75rem;white-space:nowrap;text-align:center;width:40px}.rz-tbl-sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.rz-tbl-checkbox{cursor:pointer}.rz-tbl-sort-icon{margin-left:.375rem;font-size:.625rem;vertical-align:middle}.rz-tbl-resize-handle{position:absolute;inset-inline-end:2px;top:0;bottom:0;width:6px;cursor:col-resize;z-index:10;border-inline-end:2px solid var(--color-accent, oklch(.64 .2 50));opacity:.5;transition:opacity .15s}.rz-tbl-header:hover .rz-tbl-resize-handle{opacity:1}.rz-tbl-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:.375rem}.rz-tbl-toolbar-btn{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;font-size:.75rem;border-radius:var(--radius-md, .5rem);border:1px solid var(--color-border-light, oklch(.91 .01 260));cursor:pointer;color:var(--color-text, oklch(.14 .01 260));background:transparent;transition:opacity .2s}.rz-tbl-toolbar-btn:hover{opacity:.8}.rz-tbl-icon{font-size:.625rem}.rz-tbl-col-toggle{position:relative;margin-left:auto}.rz-tbl-export-wrap{position:relative}.rz-tbl-dropdown{position:absolute;top:100%;right:0;margin-top:.25rem;min-width:140px;padding:.375rem;border-radius:var(--radius-md, .5rem);box-shadow:0 4px 12px #0000001a;z-index:50;border:1px solid var(--color-border-light, oklch(.91 .01 260));background:var(--color-surface, oklch(.99 0 0))}.rz-tbl-dropdown-label{display:flex;align-items:center;gap:.5rem;padding:.375rem .5rem;font-size:.75rem;border-radius:var(--radius-sm, .25rem);cursor:pointer;white-space:nowrap;color:var(--color-text, oklch(.14 .01 260));transition:background-color .2s}.rz-tbl-dropdown-label:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-export-dropdown{position:absolute;top:100%;left:0;margin-top:.25rem;min-width:100px;padding:.25rem;border-radius:var(--radius-md, .5rem);box-shadow:0 4px 12px #0000001a;z-index:50;border:1px solid var(--color-border-light, oklch(.91 .01 260));background:var(--color-surface, oklch(.99 0 0))}.rz-tbl-export-opt{display:block;width:100%;text-align:left;padding:.375rem .5rem;font-size:.75rem;border-radius:var(--radius-sm, .25rem);cursor:pointer;border:none;background:transparent;color:var(--color-text, oklch(.14 .01 260));transition:background-color .2s}.rz-tbl-export-opt:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-empty{padding:2rem .75rem;text-align:center;font-size:.875rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-tbl-row{border-bottom:1px solid var(--color-border-light, oklch(.91 .01 260));transition:background-color .15s}.rz-tbl-row-hoverable:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-cell{padding:.625rem .75rem;font-size:.875rem;color:var(--color-text, oklch(.14 .01 260));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rz-tbl-cell-center{padding:.625rem .75rem;text-align:center}.rz-tbl-actions{display:flex;align-items:center;gap:.25rem}.rz-tbl-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:.25rem;padding:.25rem .5rem;font-size:.75rem;border-radius:var(--radius-md, .5rem);border:none;cursor:pointer;background:transparent;transition:opacity .15s}.rz-tbl-action-btn:disabled{cursor:not-allowed}.rz-tbl-expand-btn{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border:none;background:transparent;cursor:pointer;border-radius:var(--radius-sm, .25rem);color:var(--color-text-muted, oklch(.48 .01 260));transition:background-color .15s}.rz-tbl-expand-btn:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-detail{padding:.75rem;font-size:.875rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-tbl-footer-row{border-top:2px solid var(--color-primary, oklch(.32 .09 258));font-weight:500}.rz-tbl-paginator{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-top:1px solid var(--color-border-light, oklch(.91 .01 260));background:var(--color-surface, oklch(.99 0 0))}.rz-tbl-page-info{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-tbl-page-btns{display:flex;align-items:center;gap:.125rem}.rz-tbl-page-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;font-size:.75rem;border-radius:var(--radius-sm, .25rem);border:none;cursor:pointer;background:transparent;color:var(--color-text-muted, oklch(.48 .01 260));transition:background-color .15s,color .15s;font-weight:500}.rz-tbl-page-btn:disabled{opacity:.3;cursor:not-allowed}.rz-tbl-page-icon{font-size:.625rem}\n"], dependencies: [{ kind: "component", type: SearchInputComponent, selector: "app-search-input", inputs: ["value", "placeholder", "size", "disabled", "accentColor", "hint", "errorMessage", "error", "width"], outputs: ["valueChange"] }, { kind: "component", type: DropDownComponent, selector: "app-drop-down", inputs: ["value", "options", "placeholder", "size", "disabled", "accentColor", "searchable", "hint", "errorMessage", "error", "width", "config", "appendTo"], outputs: ["valueChange"] }, { kind: "component", type: TableSkeletonComponent, selector: "app-table-skeleton", inputs: ["rows", "columns"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TooltipComponent, selector: "app-tooltip", inputs: ["text", "position", "disabled", "alwaysShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,