ryzen-ui 0.1.4

package/fesm2022/ryzen-ui.mjs

@@ -0,0 +1,2337 @@
+import * as i0 from '@angular/core';
+import { model, input, computed, ChangeDetectionStrategy, Component, inject, ElementRef, signal, output, effect, TemplateRef, ContentChild, Injectable, contentChildren, DestroyRef } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { Router, NavigationEnd } from '@angular/router';
+import { filter } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+const THEME_COLORS = [
+    'primary',
+    'secondary',
+    'accent',
+    'success',
+    'warning',
+    'danger',
+    'info',
+];
+function isThemeColor(value) {
+    return THEME_COLORS.includes(value);
+}
+
+class CheckboxComponent {
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    accentColor = input(null, ...(ngDevMode ? [{ debugName: "accentColor" }] : []));
+    indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    width = input('', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    _size = computed(() => this.size(), ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _accentKey = computed(() => {
+        const c = this.accentColor();
+        return c && isThemeColor(c) ? c : null;
+    }, ...(ngDevMode ? [{ debugName: "_accentKey" }] : []));
+    _rawAccent = computed(() => {
+        const c = this.accentColor();
+        return c && !isThemeColor(c) ? c : null;
+    }, ...(ngDevMode ? [{ debugName: "_rawAccent" }] : []));
+    _width = computed(() => this.width() || null, ...(ngDevMode ? [{ debugName: "_width" }] : []));
+    toggle() {
+        if (this.disabled())
+            return;
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-checkbox', imports: [], host: {
+                        '[attr.data-size]': '_size',
+                        '[attr.data-accent]': '_accentKey',
+                        '[class.has-error]': 'error()',
+                        '[style.--rz-accent]': '_rawAccent',
+                        '[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 }] }] } });
+
+class DatePickerComponent {
+    _elementRef = inject(ElementRef);
+    _closeTimer = null;
+    _docClickCleanup;
+    _today = signal((() => { const d = new Date(); d.setHours(0, 0, 0, 0); return d; })(), ...(ngDevMode ? [{ debugName: "_today" }] : []));
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    placeholder = input('Select date', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    accentColor = input(null, ...(ngDevMode ? [{ debugName: "accentColor" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    format = input('dd/MM/yyyy', ...(ngDevMode ? [{ debugName: "format" }] : []));
+    width = input('', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
+    _size = computed(() => this.size(), ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _accentKey = computed(() => {
+        const c = this.accentColor();
+        return c && isThemeColor(c) ? c : null;
+    }, ...(ngDevMode ? [{ debugName: "_accentKey" }] : []));
+    _rawAccent = computed(() => {
+        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" }] : []));
+    _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : []));
+    _isClosing = signal(false, ...(ngDevMode ? [{ debugName: "_isClosing" }] : []));
+    _panelDirection = signal('down', ...(ngDevMode ? [{ debugName: "_panelDirection" }] : []));
+    _panelX = signal(0, ...(ngDevMode ? [{ debugName: "_panelX" }] : []));
+    _panelY = signal(0, ...(ngDevMode ? [{ debugName: "_panelY" }] : []));
+    _panelWidth = signal(0, ...(ngDevMode ? [{ debugName: "_panelWidth" }] : []));
+    _panelEl = null;
+    _viewDate = signal(new Date(), ...(ngDevMode ? [{ debugName: "_viewDate" }] : []));
+    _viewMode = signal('days', ...(ngDevMode ? [{ debugName: "_viewMode" }] : []));
+    _decade = signal(2020, ...(ngDevMode ? [{ debugName: "_decade" }] : []));
+    _monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+    _weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    _weekdaysAr = ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'];
+    _monthsShort = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    _displayValue = computed(() => {
+        const date = this.value();
+        if (!date)
+            return '';
+        const d = String(date.getDate()).padStart(2, '0');
+        const m = String(date.getMonth() + 1).padStart(2, '0');
+        const y = date.getFullYear();
+        switch (this.format()) {
+            case 'MM/dd/yyyy': return `${m}/${d}/${y}`;
+            case 'yyyy-MM-dd': return `${y}-${m}-${d}`;
+            default: return `${d}/${m}/${y}`;
+        }
+    }, ...(ngDevMode ? [{ debugName: "_displayValue" }] : []));
+    _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.config().appendToParent ?? 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" }] : []));
+    _firstDay = computed(() => this.config().firstDayOfWeek ?? 0, ...(ngDevMode ? [{ debugName: "_firstDay" }] : []));
+    _weekDaysOrdered = computed(() => {
+        const arr = [...this._weekdays];
+        if (this._firstDay() === 1)
+            arr.push(arr.shift());
+        return arr;
+    }, ...(ngDevMode ? [{ debugName: "_weekDaysOrdered" }] : []));
+    _yearsList = computed(() => Array.from({ length: 10 }, (_, i) => this._decade() + i), ...(ngDevMode ? [{ debugName: "_yearsList" }] : []));
+    _calendarDays = computed(() => {
+        const viewDate = this._viewDate();
+        const selectedDate = this.value();
+        const cfg = this.config();
+        const today = this._today();
+        const year = viewDate.getFullYear();
+        const month = viewDate.getMonth();
+        const firstDay = new Date(year, month, 1);
+        const lastDay = new Date(year, month + 1, 0);
+        let startOffset = firstDay.getDay() - this._firstDay();
+        if (startOffset < 0)
+            startOffset += 7;
+        const days = [];
+        const prevLast = new Date(year, month, 0).getDate();
+        for (let i = startOffset - 1; i >= 0; i--) {
+            const date = new Date(year, month - 1, prevLast - i);
+            days.push(this._toDay(date, false, today, selectedDate, cfg));
+        }
+        for (let d = 1; d <= lastDay.getDate(); d++) {
+            const date = new Date(year, month, d);
+            days.push(this._toDay(date, true, today, selectedDate, cfg));
+        }
+        const remaining = 42 - days.length;
+        for (let d = 1; d <= remaining; d++) {
+            const date = new Date(year, month + 1, d);
+            days.push(this._toDay(date, false, today, selectedDate, cfg));
+        }
+        return days;
+    }, ...(ngDevMode ? [{ debugName: "_calendarDays" }] : []));
+    _toDay(date, isCurrent, today, selected, cfg) {
+        const d = new Date(date);
+        d.setHours(0, 0, 0, 0);
+        const t = new Date(today);
+        t.setHours(0, 0, 0, 0);
+        const sel = selected ? new Date(selected.getFullYear(), selected.getMonth(), selected.getDate()) : null;
+        const disabled = (cfg.minDate && d < cfg.minDate)
+            || (cfg.maxDate && d > cfg.maxDate)
+            || !!cfg.disabledDates?.some(x => this._sameDay(x, date));
+        const highlighted = !!cfg.highlightedDates?.some(x => this._sameDay(x, date));
+        return {
+            date,
+            day: date.getDate(),
+            isCurrentMonth: isCurrent,
+            isToday: d.getTime() === t.getTime(),
+            isSelected: !!sel && d.getTime() === sel.getTime(),
+            isDisabled: disabled,
+            isHighlighted: highlighted,
+        };
+    }
+    _sameDay(a, b) {
+        return a.getFullYear() === b.getFullYear()
+            && a.getMonth() === b.getMonth()
+            && a.getDate() === b.getDate();
+    }
+    /* ── actions ── */
+    _onTriggerClick(event) {
+        if (this.disabled())
+            return;
+        if (this._isOpen()) {
+            this._close();
+            return;
+        }
+        this._open();
+    }
+    _onPanelClick(event) {
+        event.stopPropagation();
+    }
+    _open() {
+        this._isClosing.set(false);
+        this._isOpen.set(true);
+        const d = new Date();
+        d.setHours(0, 0, 0, 0);
+        this._today.set(d);
+        this._viewMode.set('days');
+        const val = this.value();
+        if (val)
+            this._viewDate.set(new Date(val.getFullYear(), val.getMonth(), 1));
+        this._decade.set(Math.floor(this._viewDate().getFullYear() / 10) * 10);
+        const rect = this._elementRef.nativeElement.getBoundingClientRect();
+        this._panelDirection.set(window.innerHeight - rect.bottom >= 320 ? 'down' : 'up');
+        if (this._appendToParent()) {
+            this._panelX.set(rect.left);
+            this._panelY.set(this._panelDirection() === 'down' ? rect.bottom : rect.top);
+            this._panelWidth.set(rect.width);
+            setTimeout(() => this._attachToBody());
+        }
+        const handler = (e) => this._onDocClick(e);
+        document.addEventListener('click', handler);
+        this._docClickCleanup = () => document.removeEventListener('click', handler);
+    }
+    _attachToBody() {
+        const panel = this._elementRef.nativeElement.querySelector('[data-dp-panel]');
+        if (panel) {
+            document.body.appendChild(panel);
+            this._panelEl = panel;
+        }
+    }
+    _detachFromBody() {
+        if (!this._panelEl)
+            return;
+        const wrapper = this._elementRef.nativeElement.querySelector('.dp-wrapper');
+        if (wrapper && this._panelEl.parentNode !== wrapper) {
+            wrapper.appendChild(this._panelEl);
+        }
+        this._panelEl = null;
+    }
+    _close() {
+        if (!this._isOpen())
+            return;
+        this._docClickCleanup?.();
+        this._docClickCleanup = undefined;
+        if (this._closeTimer)
+            clearTimeout(this._closeTimer);
+        this._isClosing.set(true);
+        if (this._appendToParent())
+            this._detachFromBody();
+        this._closeTimer = setTimeout(() => {
+            this._isOpen.set(false);
+            this._isClosing.set(false);
+            this._viewMode.set('days');
+            this._closeTimer = null;
+        }, 150);
+    }
+    ngOnDestroy() {
+        this._docClickCleanup?.();
+        if (this._closeTimer)
+            clearTimeout(this._closeTimer);
+        if (this._panelEl && document.body.contains(this._panelEl)) {
+            document.body.removeChild(this._panelEl);
+            this._panelEl = null;
+        }
+    }
+    _selectDate(date) {
+        const d = new Date(date);
+        const cfg = this.config();
+        if (cfg.minDate && d < cfg.minDate)
+            return;
+        if (cfg.maxDate && d > cfg.maxDate)
+            return;
+        if (cfg.disabledDates?.some(x => this._sameDay(x, d)))
+            return;
+        this.value.set(d);
+        this._close();
+    }
+    _selectMonth(idx) {
+        this._viewDate.set(new Date(this._year(), idx, 1));
+        this._viewMode.set('days');
+    }
+    _selectYear(year) {
+        this._viewDate.set(new Date(year, this._viewDate().getMonth(), 1));
+        this._viewMode.set('months');
+    }
+    _prevMonth() { this._viewDate.update(d => new Date(d.getFullYear(), d.getMonth() - 1, 1)); }
+    _nextMonth() { this._viewDate.update(d => new Date(d.getFullYear(), d.getMonth() + 1, 1)); }
+    _prevYear() { this._viewDate.update(d => new Date(d.getFullYear() - 1, d.getMonth(), 1)); }
+    _nextYear() { this._viewDate.update(d => new Date(d.getFullYear() + 1, d.getMonth(), 1)); }
+    _prevDecade() { this._decade.update(v => v - 10); }
+    _nextDecade() { this._decade.update(v => v + 10); }
+    _showMonths() { this._viewMode.set('months'); }
+    _showYears() {
+        this._decade.set(Math.floor(this._viewDate().getFullYear() / 10) * 10);
+        this._viewMode.set('years');
+    }
+    _prevPeriod() {
+        const m = this._viewMode();
+        if (m === 'days')
+            this._prevMonth();
+        else if (m === 'months')
+            this._prevYear();
+        else
+            this._prevDecade();
+    }
+    _nextPeriod() {
+        const m = this._viewMode();
+        if (m === 'days')
+            this._nextMonth();
+        else if (m === 'months')
+            this._nextYear();
+        else
+            this._nextDecade();
+    }
+    _goToToday() {
+        const today = new Date();
+        this._viewDate.set(new Date(today.getFullYear(), today.getMonth(), 1));
+        this._viewMode.set('days');
+        this._selectDate(today);
+    }
+    _clear(event) {
+        event.stopPropagation();
+        this.value.set(null);
+    }
+    _isCurrentMonth(idx) { return this._viewDate().getMonth() === idx; }
+    _isCurrentYear(year) { return this._viewDate().getFullYear() === year; }
+    _onDocClick(event) {
+        if (!this._isOpen())
+            return;
+        const target = event.target;
+        if (this._elementRef.nativeElement.contains(target))
+            return;
+        if (this._panelEl?.contains(target))
+            return;
+        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 } }, 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-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}.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{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,
+            args: [{ selector: 'app-date-picker', imports: [], host: {
+                        '[attr.data-size]': '_size',
+                        '[attr.data-accent]': '_accentKey',
+                        '[class.has-error]': 'error()',
+                        '[style.--rz-accent]': '_rawAccent',
+                        '[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}.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{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 }] }] } });
+
+class DropDownComponent {
+    _elementRef = inject(ElementRef);
+    _closeTimer = null;
+    _docClickCleanup;
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    placeholder = input('Select...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    accentColor = input(null, ...(ngDevMode ? [{ debugName: "accentColor" }] : []));
+    searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    width = input('', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
+    _size = computed(() => this.size(), ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _direction = computed(() => this.config().direction ?? 'up', ...(ngDevMode ? [{ debugName: "_direction" }] : []));
+    _accentKey = computed(() => {
+        const c = this.accentColor();
+        return c && isThemeColor(c) ? c : null;
+    }, ...(ngDevMode ? [{ debugName: "_accentKey" }] : []));
+    _rawAccent = computed(() => {
+        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" }] : []));
+    _normalizedOptions = computed(() => this.options().map(o => typeof o === 'string' ? { label: o, value: o } : o), ...(ngDevMode ? [{ debugName: "_normalizedOptions" }] : []));
+    _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : []));
+    _isClosing = signal(false, ...(ngDevMode ? [{ debugName: "_isClosing" }] : []));
+    _panelDirection = signal('down', ...(ngDevMode ? [{ debugName: "_panelDirection" }] : []));
+    _panelX = signal(0, ...(ngDevMode ? [{ debugName: "_panelX" }] : []));
+    _panelY = signal(0, ...(ngDevMode ? [{ debugName: "_panelY" }] : []));
+    _panelWidth = signal(0, ...(ngDevMode ? [{ debugName: "_panelWidth" }] : []));
+    _panelEl = null;
+    _searchQuery = signal('', ...(ngDevMode ? [{ debugName: "_searchQuery" }] : []));
+    _appendToParent = computed(() => this.config().appendToParent ?? 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(() => {
+        const v = this.value();
+        if (!v)
+            return '';
+        const found = this._normalizedOptions().find(o => o.value === v);
+        return found ? found.label : v;
+    }, ...(ngDevMode ? [{ debugName: "_selectedLabel" }] : []));
+    _filteredOptions = computed(() => {
+        const q = this._searchQuery().toLowerCase();
+        if (!q)
+            return this._normalizedOptions();
+        return this._normalizedOptions().filter(o => o.label.toLowerCase().includes(q));
+    }, ...(ngDevMode ? [{ debugName: "_filteredOptions" }] : []));
+    _onTriggerClick(event) {
+        if (this.disabled())
+            return;
+        if (this._isOpen()) {
+            this._close();
+            return;
+        }
+        this._open();
+    }
+    _onPanelClick(event) {
+        event.stopPropagation();
+    }
+    _open() {
+        this._isClosing.set(false);
+        this._isOpen.set(true);
+        this._searchQuery.set('');
+        const rect = this._elementRef.nativeElement.getBoundingClientRect();
+        const dir = this._direction();
+        if (dir === 'up' || dir === 'down') {
+            this._panelDirection.set(dir);
+        }
+        else {
+            const panelH = Math.min(320, parseInt(this._maxHeight()));
+            this._panelDirection.set(window.innerHeight - rect.bottom >= panelH + 60 ? 'down' : 'up');
+        }
+        if (this._appendToParent()) {
+            this._panelX.set(rect.left);
+            this._panelY.set(this._panelDirection() === 'down' ? rect.bottom : rect.top);
+            this._panelWidth.set(rect.width);
+            setTimeout(() => this._attachToBody());
+        }
+        if (this.searchable()) {
+            setTimeout(() => {
+                const input = this._elementRef.nativeElement.querySelector('[data-dd-search]');
+                input?.focus();
+            });
+        }
+        const handler = (e) => this._onDocClick(e);
+        document.addEventListener('click', handler);
+        this._docClickCleanup = () => document.removeEventListener('click', handler);
+    }
+    _close() {
+        if (!this._isOpen())
+            return;
+        this._docClickCleanup?.();
+        this._docClickCleanup = undefined;
+        if (this._closeTimer)
+            clearTimeout(this._closeTimer);
+        this._isClosing.set(true);
+        if (this._appendToParent())
+            this._detachFromBody();
+        this._closeTimer = setTimeout(() => {
+            this._isOpen.set(false);
+            this._isClosing.set(false);
+            this._closeTimer = null;
+        }, 150);
+    }
+    _attachToBody() {
+        const panel = this._elementRef.nativeElement.querySelector('[data-dd-panel]');
+        if (panel) {
+            document.body.appendChild(panel);
+            this._panelEl = panel;
+        }
+    }
+    _detachFromBody() {
+        if (!this._panelEl)
+            return;
+        const wrapper = this._elementRef.nativeElement.querySelector('.dd-wrapper');
+        if (wrapper && this._panelEl.parentNode !== wrapper) {
+            wrapper.appendChild(this._panelEl);
+        }
+        this._panelEl = null;
+    }
+    _selectOption(option) {
+        this.value.set(option.value);
+        this._close();
+    }
+    _clear(event) {
+        event.stopPropagation();
+        this.value.set(null);
+    }
+    _onWindowScroll() {
+        if (this._isOpen() && this._appendToParent()) {
+            this._close();
+        }
+    }
+    _onDocClick(event) {
+        if (!this._isOpen())
+            return;
+        const target = event.target;
+        if (this._elementRef.nativeElement.contains(target))
+            return;
+        if (this._panelEl?.contains(target))
+            return;
+        this._close();
+    }
+    ngOnDestroy() {
+        this._docClickCleanup?.();
+        if (this._closeTimer)
+            clearTimeout(this._closeTimer);
+        if (this._panelEl && document.body.contains(this._panelEl)) {
+            document.body.removeChild(this._panelEl);
+            this._panelEl = null;
+        }
+    }
+    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 } }, outputs: { value: "valueChange" }, host: { listeners: { "window:scroll": "_onWindowScroll()" }, 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-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}.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,
+            args: [{ selector: 'app-drop-down', imports: [], host: {
+                        '[attr.data-size]': '_size',
+                        '[attr.data-accent]': '_accentKey',
+                        '[class.has-error]': 'error()',
+                        '[style.--rz-accent]': '_rawAccent',
+                        '[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}.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 }] }] } });
+
+class FileUploadComponent {
+    files = model([], ...(ngDevMode ? [{ debugName: "files" }] : []));
+    accept = input('', ...(ngDevMode ? [{ debugName: "accept" }] : []));
+    multiple = input(true, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    maxSize = input(0, ...(ngDevMode ? [{ debugName: "maxSize" }] : []));
+    maxFiles = input(0, ...(ngDevMode ? [{ debugName: "maxFiles" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    placeholder = input('Drop files here or click to browse', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    _size = computed(() => this.size(), ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "_isDragOver" }] : []));
+    _totalSize = computed(() => this.files().reduce((s, f) => s + f.size, 0), ...(ngDevMode ? [{ debugName: "_totalSize" }] : []));
+    _onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.disabled())
+            this._isDragOver.set(true);
+    }
+    _onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this._isDragOver.set(false);
+    }
+    _onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this._isDragOver.set(false);
+        if (this.disabled())
+            return;
+        const dropped = event.dataTransfer?.files;
+        if (dropped)
+            this._addFiles(Array.from(dropped));
+    }
+    _onFileSelected(event) {
+        const input = event.target;
+        if (input.files)
+            this._addFiles(Array.from(input.files));
+        input.value = '';
+    }
+    _removeFile(index) {
+        this.files.update(f => f.filter((_, i) => i !== index));
+    }
+    _addFiles(newFiles) {
+        let current = this.files();
+        if (this.accept()) {
+            const accepted = this.accept().split(',').map(a => a.trim().toLowerCase());
+            newFiles = newFiles.filter(f => accepted.some(a => f.type.match(a.replace('*', '.*')) || f.name.toLowerCase().endsWith(a.replace('.*', ''))));
+        }
+        if (this.maxSize()) {
+            newFiles = newFiles.filter(f => f.size <= this.maxSize());
+        }
+        if (this.multiple()) {
+            const max = this.maxFiles() || Infinity;
+            const remaining = max - current.length;
+            if (remaining <= 0)
+                return;
+            newFiles = newFiles.slice(0, remaining);
+            current = [...current, ...newFiles];
+        }
+        else {
+            current = newFiles.slice(0, 1);
+        }
+        this.files.set(current);
+    }
+    _formatSize(bytes) {
+        if (bytes < 1024)
+            return `${bytes} B`;
+        if (bytes < 1048576)
+            return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${(bytes / 1048576).toFixed(1)} MB`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: FileUploadComponent, isStandalone: true, selector: "app-file-upload", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, 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 } }, outputs: { files: "filesChange" }, host: { properties: { "attr.data-size": "_size" } }, ngImport: i0, template: "<div\n  class=\"rz-fu-drop-zone\"\n  [class.is-dragover]=\"_isDragOver()\"\n  [class.is-disabled]=\"disabled()\"\n  (dragover)=\"_onDragOver($event)\"\n  (dragleave)=\"_onDragLeave($event)\"\n  (drop)=\"_onDrop($event)\"\n  (click)=\"_input.click()\"\n>\n  <input\n    #_input\n    type=\"file\"\n    [attr.accept]=\"accept() || null\"\n    [attr.multiple]=\"multiple() ? true : null\"\n    [attr.disabled]=\"disabled() ? true : null\"\n    (change)=\"_onFileSelected($event)\"\n    style=\"display:none\"\n  />\n\n  <i class=\"rz-fu-icon pi pi-cloud-upload\"></i>\n\n  @if (files().length) {\n    <span class=\"rz-fu-count\">{{ files().length }} file{{ files().length !== 1 ? 's' : '' }} selected</span>\n  } @else {\n    <span class=\"rz-fu-placeholder\">{{ placeholder() }}</span>\n  }\n\n  @if (maxSize()) {\n    <span class=\"rz-fu-maxsize\">Max {{ _formatSize(maxSize()) }} per file</span>\n  }\n</div>\n\n@if (files().length) {\n  <div class=\"rz-fu-file-list\">\n    @for (file of files(); track file.name + file.size + file.lastModified; let i = $index) {\n      <div class=\"rz-fu-file-item\">\n        <i class=\"pi pi-file rz-fu-file-icon\"></i>\n        <span class=\"rz-fu-file-name\" [title]=\"file.name\">{{ file.name }}</span>\n        <span class=\"rz-fu-file-size\">{{ _formatSize(file.size) }}</span>\n        <button type=\"button\" class=\"rz-fu-file-remove\" (click)=\"_removeFile(i)\" aria-label=\"Remove file\">&times;</button>\n      </div>\n    }\n  </div>\n}\n\n@if (hint() && !error()) {\n  <span class=\"rz-fu-msg rz-fu-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"rz-fu-msg rz-fu-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</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-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem;width:100%}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}.rz-fu-drop-zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;padding:2rem 1rem;border:2px dashed var(--rz-border);border-radius:var(--rz-radius);background:var(--rz-bg);cursor:pointer;transition:all .2s ease;color:var(--rz-muted);text-align:center}.rz-fu-drop-zone:hover,.rz-fu-drop-zone.is-dragover{border-color:var(--rz-accent);background:color-mix(in srgb,var(--rz-accent) 6%,var(--rz-bg));color:var(--rz-text)}.rz-fu-drop-zone.is-disabled{opacity:.5;cursor:not-allowed}.rz-fu-icon{font-size:1.5rem}:host([data-size=\"sm\"]) .rz-fu-icon{font-size:1.25rem}.rz-fu-count{font-size:.75rem;font-weight:500}.rz-fu-placeholder{font-size:.75rem}.rz-fu-maxsize{font-size:.625rem;opacity:.6}.rz-fu-file-list{display:flex;flex-direction:column;gap:.25rem;margin-top:.5rem}.rz-fu-file-item{display:flex;align-items:center;gap:.5rem;padding:.375rem .5rem;border-radius:calc(var(--rz-radius) - 2px);background:color-mix(in srgb,var(--rz-accent) 6%,var(--rz-bg));font-size:.8125rem;color:var(--rz-text)}.rz-fu-file-icon{flex-shrink:0;font-size:.75rem;color:var(--rz-accent)}.rz-fu-file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rz-fu-file-size{flex-shrink:0;font-size:.6875rem;color:var(--rz-muted)}.rz-fu-file-remove{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:var(--rz-muted);font-size:.6875rem;transition:all .15s}.rz-fu-file-remove:hover{background:color-mix(in srgb,var(--color-danger) 15%,transparent);color:var(--color-danger)}.rz-fu-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-fu-hint{color:var(--color-text-muted)}.rz-fu-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: FileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-file-upload', imports: [], host: {
+                        '[attr.data-size]': '_size',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"rz-fu-drop-zone\"\n  [class.is-dragover]=\"_isDragOver()\"\n  [class.is-disabled]=\"disabled()\"\n  (dragover)=\"_onDragOver($event)\"\n  (dragleave)=\"_onDragLeave($event)\"\n  (drop)=\"_onDrop($event)\"\n  (click)=\"_input.click()\"\n>\n  <input\n    #_input\n    type=\"file\"\n    [attr.accept]=\"accept() || null\"\n    [attr.multiple]=\"multiple() ? true : null\"\n    [attr.disabled]=\"disabled() ? true : null\"\n    (change)=\"_onFileSelected($event)\"\n    style=\"display:none\"\n  />\n\n  <i class=\"rz-fu-icon pi pi-cloud-upload\"></i>\n\n  @if (files().length) {\n    <span class=\"rz-fu-count\">{{ files().length }} file{{ files().length !== 1 ? 's' : '' }} selected</span>\n  } @else {\n    <span class=\"rz-fu-placeholder\">{{ placeholder() }}</span>\n  }\n\n  @if (maxSize()) {\n    <span class=\"rz-fu-maxsize\">Max {{ _formatSize(maxSize()) }} per file</span>\n  }\n</div>\n\n@if (files().length) {\n  <div class=\"rz-fu-file-list\">\n    @for (file of files(); track file.name + file.size + file.lastModified; let i = $index) {\n      <div class=\"rz-fu-file-item\">\n        <i class=\"pi pi-file rz-fu-file-icon\"></i>\n        <span class=\"rz-fu-file-name\" [title]=\"file.name\">{{ file.name }}</span>\n        <span class=\"rz-fu-file-size\">{{ _formatSize(file.size) }}</span>\n        <button type=\"button\" class=\"rz-fu-file-remove\" (click)=\"_removeFile(i)\" aria-label=\"Remove file\">&times;</button>\n      </div>\n    }\n  </div>\n}\n\n@if (hint() && !error()) {\n  <span class=\"rz-fu-msg rz-fu-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"rz-fu-msg rz-fu-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</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-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem;width:100%}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}.rz-fu-drop-zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;padding:2rem 1rem;border:2px dashed var(--rz-border);border-radius:var(--rz-radius);background:var(--rz-bg);cursor:pointer;transition:all .2s ease;color:var(--rz-muted);text-align:center}.rz-fu-drop-zone:hover,.rz-fu-drop-zone.is-dragover{border-color:var(--rz-accent);background:color-mix(in srgb,var(--rz-accent) 6%,var(--rz-bg));color:var(--rz-text)}.rz-fu-drop-zone.is-disabled{opacity:.5;cursor:not-allowed}.rz-fu-icon{font-size:1.5rem}:host([data-size=\"sm\"]) .rz-fu-icon{font-size:1.25rem}.rz-fu-count{font-size:.75rem;font-weight:500}.rz-fu-placeholder{font-size:.75rem}.rz-fu-maxsize{font-size:.625rem;opacity:.6}.rz-fu-file-list{display:flex;flex-direction:column;gap:.25rem;margin-top:.5rem}.rz-fu-file-item{display:flex;align-items:center;gap:.5rem;padding:.375rem .5rem;border-radius:calc(var(--rz-radius) - 2px);background:color-mix(in srgb,var(--rz-accent) 6%,var(--rz-bg));font-size:.8125rem;color:var(--rz-text)}.rz-fu-file-icon{flex-shrink:0;font-size:.75rem;color:var(--rz-accent)}.rz-fu-file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rz-fu-file-size{flex-shrink:0;font-size:.6875rem;color:var(--rz-muted)}.rz-fu-file-remove{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:var(--rz-muted);font-size:.6875rem;transition:all .15s}.rz-fu-file-remove:hover{background:color-mix(in srgb,var(--color-danger) 15%,transparent);color:var(--color-danger)}.rz-fu-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-fu-hint{color:var(--color-text-muted)}.rz-fu-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: { files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }, { type: i0.Output, args: ["filesChange"] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", 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 }] }] } });
+
+class MultiSelectComponent {
+    _elementRef = inject(ElementRef);
+    _closeTimer = null;
+    _docClickCleanup;
+    value = model([], ...(ngDevMode ? [{ debugName: "value" }] : []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    placeholder = input('Select...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    selectAll = input(true, ...(ngDevMode ? [{ debugName: "selectAll" }] : []));
+    selectAllLabel = input('Select All', ...(ngDevMode ? [{ debugName: "selectAllLabel" }] : []));
+    accentColor = input(null, ...(ngDevMode ? [{ debugName: "accentColor" }] : []));
+    searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    width = input('', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
+    _size = computed(() => this.size(), ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _direction = computed(() => this.config().direction ?? 'auto', ...(ngDevMode ? [{ debugName: "_direction" }] : []));
+    _accentKey = computed(() => {
+        const c = this.accentColor();
+        return c && isThemeColor(c) ? c : null;
+    }, ...(ngDevMode ? [{ debugName: "_accentKey" }] : []));
+    _rawAccent = computed(() => {
+        const c = this.accentColor();
+        return c && !isThemeColor(c) ? c : null;
+    }, ...(ngDevMode ? [{ debugName: "_rawAccent" }] : []));
+    _width = computed(() => this.width() || null, ...(ngDevMode ? [{ debugName: "_width" }] : []));
+    _normalizedOptions = computed(() => this.options().map(o => typeof o === 'string' ? { label: o, value: o } : o), ...(ngDevMode ? [{ debugName: "_normalizedOptions" }] : []));
+    _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : []));
+    _isClosing = signal(false, ...(ngDevMode ? [{ debugName: "_isClosing" }] : []));
+    _panelDirection = signal('down', ...(ngDevMode ? [{ debugName: "_panelDirection" }] : []));
+    _panelX = signal(0, ...(ngDevMode ? [{ debugName: "_panelX" }] : []));
+    _panelY = signal(0, ...(ngDevMode ? [{ debugName: "_panelY" }] : []));
+    _panelWidth = signal(0, ...(ngDevMode ? [{ debugName: "_panelWidth" }] : []));
+    _panelEl = null;
+    _searchQuery = signal('', ...(ngDevMode ? [{ debugName: "_searchQuery" }] : []));
+    _appendToParent = computed(() => this.config().appendToParent ?? 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(() => {
+        const v = this.value();
+        if (!v.length)
+            return [];
+        return this._normalizedOptions().filter(o => v.includes(o.value)).map(o => o.label);
+    }, ...(ngDevMode ? [{ debugName: "_selectedLabels" }] : []));
+    _filteredOptions = computed(() => {
+        const q = this._searchQuery().toLowerCase();
+        if (!q)
+            return this._normalizedOptions();
+        return this._normalizedOptions().filter(o => o.label.toLowerCase().includes(q));
+    }, ...(ngDevMode ? [{ debugName: "_filteredOptions" }] : []));
+    _allFilteredSelected = computed(() => {
+        const v = this.value();
+        return this._filteredOptions().every(o => v.includes(o.value));
+    }, ...(ngDevMode ? [{ debugName: "_allFilteredSelected" }] : []));
+    _triggerText = computed(() => {
+        const labels = this._selectedLabels();
+        if (!labels.length)
+            return '';
+        if (labels.length === 1)
+            return labels[0];
+        return `${labels.length} selected`;
+    }, ...(ngDevMode ? [{ debugName: "_triggerText" }] : []));
+    _isSelected(val) {
+        return this.value().includes(val);
+    }
+    _optVal(option) {
+        return option.value;
+    }
+    _onTriggerClick(event) {
+        if (this.disabled())
+            return;
+        if (this._isOpen()) {
+            this._close();
+            return;
+        }
+        this._open();
+    }
+    _onPanelClick(event) {
+        event.stopPropagation();
+    }
+    _onInput(event) {
+        this._searchQuery.set(event.target.value);
+    }
+    _open() {
+        this._isClosing.set(false);
+        this._isOpen.set(true);
+        this._searchQuery.set('');
+        const rect = this._elementRef.nativeElement.getBoundingClientRect();
+        const dir = this._direction();
+        if (dir === 'up' || dir === 'down') {
+            this._panelDirection.set(dir);
+        }
+        else {
+            const panelH = Math.min(320, parseInt(this._maxHeight()));
+            this._panelDirection.set(window.innerHeight - rect.bottom >= panelH + 60 ? 'down' : 'up');
+        }
+        if (this._appendToParent()) {
+            this._panelX.set(rect.left);
+            this._panelY.set(this._panelDirection() === 'down' ? rect.bottom : rect.top);
+            this._panelWidth.set(rect.width);
+            setTimeout(() => this._attachToBody());
+        }
+        if (this.searchable()) {
+            setTimeout(() => {
+                const input = this._elementRef.nativeElement.querySelector('[data-ms-search]');
+                input?.focus();
+            });
+        }
+        const handler = (e) => this._onDocClick(e);
+        document.addEventListener('click', handler);
+        this._docClickCleanup = () => document.removeEventListener('click', handler);
+    }
+    _close() {
+        if (!this._isOpen())
+            return;
+        this._docClickCleanup?.();
+        this._docClickCleanup = undefined;
+        if (this._closeTimer)
+            clearTimeout(this._closeTimer);
+        this._isClosing.set(true);
+        if (this._appendToParent())
+            this._detachFromBody();
+        this._closeTimer = setTimeout(() => {
+            this._isOpen.set(false);
+            this._isClosing.set(false);
+            this._closeTimer = null;
+        }, 150);
+    }
+    _attachToBody() {
+        const panel = this._elementRef.nativeElement.querySelector('[data-ms-panel]');
+        if (panel) {
+            document.body.appendChild(panel);
+            this._panelEl = panel;
+        }
+    }
+    _detachFromBody() {
+        if (!this._panelEl)
+            return;
+        const wrapper = this._elementRef.nativeElement.querySelector('.ms-wrapper');
+        if (wrapper && this._panelEl.parentNode !== wrapper) {
+            wrapper.appendChild(this._panelEl);
+        }
+        this._panelEl = null;
+    }
+    _toggleOption(option) {
+        const val = option.value;
+        const current = this.value();
+        if (current.includes(val)) {
+            this.value.set(current.filter(v => v !== val));
+        }
+        else {
+            this.value.set([...current, val]);
+        }
+    }
+    _toggleSelectAll() {
+        if (this._allFilteredSelected()) {
+            const remove = this._filteredOptions().map(o => o.value);
+            this.value.set(this.value().filter(v => !remove.includes(v)));
+        }
+        else {
+            const add = this._filteredOptions().map(o => o.value);
+            const existing = this.value();
+            this.value.set([...new Set([...existing, ...add])]);
+        }
+    }
+    _removeChip(val, event) {
+        event.stopPropagation();
+        this.value.set(this.value().filter(v => v !== val));
+    }
+    _clearAll(event) {
+        event.stopPropagation();
+        this.value.set([]);
+    }
+    _onWindowScroll() {
+        if (this._isOpen() && this._appendToParent()) {
+            this._close();
+        }
+    }
+    _onDocClick(event) {
+        if (!this._isOpen())
+            return;
+        const target = event.target;
+        if (this._elementRef.nativeElement.contains(target))
+            return;
+        if (this._panelEl?.contains(target))
+            return;
+        this._close();
+    }
+    ngOnDestroy() {
+        this._docClickCleanup?.();
+        if (this._closeTimer)
+            clearTimeout(this._closeTimer);
+        if (this._panelEl && document.body.contains(this._panelEl)) {
+            document.body.removeChild(this._panelEl);
+            this._panelEl = null;
+        }
+    }
+    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 } }, outputs: { value: "valueChange" }, host: { listeners: { "window:scroll": "_onWindowScroll()" }, 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-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,
+            args: [{ selector: 'app-multi-select', imports: [], host: {
+                        '[attr.data-size]': '_size',
+                        '[attr.data-accent]': '_accentKey',
+                        '[class.has-error]': 'error()',
+                        '[style.--rz-accent]': '_rawAccent',
+                        '[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 }] }] } });
+
+class PasswordInputComponent {
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    accentColor = input(null, ...(ngDevMode ? [{ debugName: "accentColor" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    hideToggle = input(false, ...(ngDevMode ? [{ debugName: "hideToggle" }] : []));
+    width = input('', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    _size = computed(() => this.size(), ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _type = computed(() => (this.visible() ? 'text' : 'password'), ...(ngDevMode ? [{ debugName: "_type" }] : []));
+    _accentKey = computed(() => {
+        const c = this.accentColor();
+        return c && isThemeColor(c) ? c : null;
+    }, ...(ngDevMode ? [{ debugName: "_accentKey" }] : []));
+    _rawAccent = computed(() => {
+        const c = this.accentColor();
+        return c && !isThemeColor(c) ? c : null;
+    }, ...(ngDevMode ? [{ debugName: "_rawAccent" }] : []));
+    _width = computed(() => this.width() || null, ...(ngDevMode ? [{ debugName: "_width" }] : []));
+    _touched = signal(false, ...(ngDevMode ? [{ debugName: "_touched" }] : []));
+    toggleVisibility() {
+        this.visible.update((v) => !v);
+    }
+    onInput(event) {
+        this.value.set(event.target.value);
+    }
+    onBlur() {
+        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: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)}: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}.rz-pw-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-pw-input{padding:.25rem 2rem .25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-pw-input{padding:.75rem 2.75rem .75rem 1rem;font-size:1rem}.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,
+            args: [{ selector: 'app-password-input', imports: [], host: {
+                        '[attr.data-size]': '_size',
+                        '[attr.data-accent]': '_accentKey',
+                        '[class.has-error]': 'error()',
+                        '[style.--rz-accent]': '_rawAccent',
+                        '[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: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)}: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}.rz-pw-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-pw-input{padding:.25rem 2rem .25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-pw-input{padding:.75rem 2.75rem .75rem 1rem;font-size:1rem}.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 }] }] } });
+
+class SearchInputComponent {
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    placeholder = input('Search...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    accentColor = input(null, ...(ngDevMode ? [{ debugName: "accentColor" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    width = input('', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    _size = computed(() => this.size(), ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _accentKey = computed(() => {
+        const c = this.accentColor();
+        return c && isThemeColor(c) ? c : null;
+    }, ...(ngDevMode ? [{ debugName: "_accentKey" }] : []));
+    _rawAccent = computed(() => {
+        const c = this.accentColor();
+        return c && !isThemeColor(c) ? c : null;
+    }, ...(ngDevMode ? [{ debugName: "_rawAccent" }] : []));
+    _width = computed(() => this.width() || null, ...(ngDevMode ? [{ debugName: "_width" }] : []));
+    _touched = signal(false, ...(ngDevMode ? [{ debugName: "_touched" }] : []));
+    onInput(event) {
+        this.value.set(event.target.value);
+    }
+    onBlur() {
+        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: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-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.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}.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 2rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-search-input{padding:.75rem 2.75rem;font-size:1rem}.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,
+            args: [{ selector: 'app-search-input', imports: [], host: {
+                        '[attr.data-size]': '_size',
+                        '[attr.data-accent]': '_accentKey',
+                        '[class.has-error]': 'error()',
+                        '[style.--rz-accent]': '_rawAccent',
+                        '[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: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-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.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}.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 2rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-search-input{padding:.75rem 2.75rem;font-size:1rem}.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 }] }] } });
+
+class TextInputComponent {
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    accentColor = input(null, ...(ngDevMode ? [{ debugName: "accentColor" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    width = input('', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    _size = computed(() => this.size(), ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _accentKey = computed(() => {
+        const c = this.accentColor();
+        return c && isThemeColor(c) ? c : null;
+    }, ...(ngDevMode ? [{ debugName: "_accentKey" }] : []));
+    _rawAccent = computed(() => {
+        const c = this.accentColor();
+        return c && !isThemeColor(c) ? c : null;
+    }, ...(ngDevMode ? [{ debugName: "_rawAccent" }] : []));
+    _width = computed(() => this.width() || null, ...(ngDevMode ? [{ debugName: "_width" }] : []));
+    _touched = signal(false, ...(ngDevMode ? [{ debugName: "_touched" }] : []));
+    onInput(event) {
+        this.value.set(event.target.value);
+    }
+    onBlur() {
+        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: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-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}.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:.75rem 1rem;font-size:1rem}.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,
+            args: [{ selector: 'app-text-input', imports: [], host: {
+                        '[attr.data-size]': '_size',
+                        '[attr.data-accent]': '_accentKey',
+                        '[class.has-error]': 'error()',
+                        '[style.--rz-accent]': '_rawAccent',
+                        '[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: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-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}.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:.75rem 1rem;font-size:1rem}.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 }] }] } });
+
+class ToggleComponent {
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    accentColor = input(null, ...(ngDevMode ? [{ debugName: "accentColor" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    width = input('', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    _size = computed(() => this.size(), ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _accentKey = computed(() => {
+        const c = this.accentColor();
+        return c && isThemeColor(c) ? c : null;
+    }, ...(ngDevMode ? [{ debugName: "_accentKey" }] : []));
+    _rawAccent = computed(() => {
+        const c = this.accentColor();
+        return c && !isThemeColor(c) ? c : null;
+    }, ...(ngDevMode ? [{ debugName: "_rawAccent" }] : []));
+    _width = computed(() => this.width() || null, ...(ngDevMode ? [{ debugName: "_width" }] : []));
+    toggle() {
+        if (this.disabled())
+            return;
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-toggle', imports: [], host: {
+                        '[attr.data-size]': '_size',
+                        '[attr.data-accent]': '_accentKey',
+                        '[class.has-error]': 'error()',
+                        '[class.is-checked]': 'checked()',
+                        '[style.--rz-accent]': '_rawAccent',
+                        '[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 }] }] } });
+
+class BadgeComponent {
+    accentColor = input('primary', ...(ngDevMode ? [{ debugName: "accentColor" }] : []));
+    variant = input('filled', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input('sm', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    dot = input(false, ...(ngDevMode ? [{ debugName: "dot" }] : []));
+    _sizeCls = computed(() => 'rz-badge', ...(ngDevMode ? [{ debugName: "_sizeCls" }] : []));
+    _fallback = {
+        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)',
+    };
+    _resolvedColor = computed(() => {
+        const c = this.accentColor();
+        if (isThemeColor(c))
+            return `var(--color-${c}, ${this._fallback[c] ?? this._fallback['primary']})`;
+        return c;
+    }, ...(ngDevMode ? [{ debugName: "_resolvedColor" }] : []));
+    _subtleBg = computed(() => {
+        const c = this.accentColor();
+        const key = isThemeColor(c) ? c : 'primary';
+        return `color-mix(in srgb, var(--color-${key}, ${this._fallback[key]}) 15%, var(--color-surface, oklch(0.99 0 0)))`;
+    }, ...(ngDevMode ? [{ debugName: "_subtleBg" }] : []));
+    _style = computed(() => {
+        const v = this.variant();
+        const color = this._resolvedColor();
+        if (v === 'filled')
+            return { backgroundColor: color, color: 'var(--color-primary-inverse,oklch(0.99 0 0))' };
+        if (v === 'outlined')
+            return { backgroundColor: 'transparent', color, border: `1px solid ${color}` };
+        return { backgroundColor: this._subtleBg(), color };
+    }, ...(ngDevMode ? [{ debugName: "_style" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: BadgeComponent, isStandalone: true, selector: "app-badge", inputs: { accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()" } }, ngImport: i0, template: "<span class=\"rz-badge\" [style]=\"_style()\">\n  @if (dot()) {\n    <span class=\"rz-badge-dot\"></span>\n  }\n  <ng-content />\n</span>\n", styles: [":host{display:inline-flex}.rz-badge{display:inline-flex;align-items:center;gap:.25rem;font-weight:500;border-radius:var(--radius-sm, .25rem);white-space:nowrap}:host([data-size=\"sm\"]) .rz-badge{padding:.125rem .375rem;font-size:.625rem}:host([data-size=\"md\"]) .rz-badge{padding:.125rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-badge{padding:.25rem .625rem;font-size:.875rem}.rz-badge-dot{border-radius:9999px;flex-shrink:0;width:6px;height:6px;background-color:currentColor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-badge', imports: [], host: {
+                        '[attr.data-size]': 'size()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"rz-badge\" [style]=\"_style()\">\n  @if (dot()) {\n    <span class=\"rz-badge-dot\"></span>\n  }\n  <ng-content />\n</span>\n", styles: [":host{display:inline-flex}.rz-badge{display:inline-flex;align-items:center;gap:.25rem;font-weight:500;border-radius:var(--radius-sm, .25rem);white-space:nowrap}:host([data-size=\"sm\"]) .rz-badge{padding:.125rem .375rem;font-size:.625rem}:host([data-size=\"md\"]) .rz-badge{padding:.125rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-badge{padding:.25rem .625rem;font-size:.875rem}.rz-badge-dot{border-radius:9999px;flex-shrink:0;width:6px;height:6px;background-color:currentColor}\n"] }]
+        }], propDecorators: { accentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentColor", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }] } });
+
+class BannerSliderComponent {
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
+    height = input('400px', ...(ngDevMode ? [{ debugName: "height" }] : []));
+    autoPlay = input(true, ...(ngDevMode ? [{ debugName: "autoPlay" }] : []));
+    interval = input(5000, ...(ngDevMode ? [{ debugName: "interval" }] : []));
+    showArrows = input(true, ...(ngDevMode ? [{ debugName: "showArrows" }] : []));
+    showDots = input(true, ...(ngDevMode ? [{ debugName: "showDots" }] : []));
+    overlayMode = input('left', ...(ngDevMode ? [{ debugName: "overlayMode" }] : []));
+    ctaClick = output();
+    _height = computed(() => this.height(), ...(ngDevMode ? [{ debugName: "_height" }] : []));
+    _index = signal(0, ...(ngDevMode ? [{ debugName: "_index" }] : []));
+    _overlayCls = computed(() => `overlay-${this.overlayMode()}`, ...(ngDevMode ? [{ debugName: "_overlayCls" }] : []));
+    _timer = null;
+    constructor() {
+        effect(() => {
+            if (this.autoPlay())
+                this._startTimer();
+            else
+                this._stopTimer();
+        });
+    }
+    _transform = computed(() => `translateX(-${this._index() * 100}%)`, ...(ngDevMode ? [{ debugName: "_transform" }] : []));
+    _current = computed(() => this.items()[this._index()], ...(ngDevMode ? [{ debugName: "_current" }] : []));
+    _go(index) {
+        const len = this.items().length;
+        if (len < 2)
+            return;
+        this._index.set(((index % len) + len) % len);
+        if (this.autoPlay())
+            this._startTimer();
+    }
+    _prev() { this._go(this._index() - 1); }
+    _next() { this._go(this._index() + 1); }
+    _onCtaClick() {
+        this.ctaClick.emit(this._current());
+    }
+    _startTimer() {
+        this._stopTimer();
+        this._timer = setInterval(() => this._next(), this.interval());
+    }
+    _stopTimer() {
+        if (this._timer) {
+            clearInterval(this._timer);
+            this._timer = null;
+        }
+    }
+    _xStart = 0;
+    _onTouchStart(event) {
+        this._xStart = event.touches[0].clientX;
+    }
+    _onTouchEnd(event) {
+        const dx = event.changedTouches[0].clientX - this._xStart;
+        if (Math.abs(dx) > 50)
+            dx > 0 ? this._prev() : this._next();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BannerSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: BannerSliderComponent, isStandalone: true, selector: "app-banner-slider", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, autoPlay: { classPropertyName: "autoPlay", publicName: "autoPlay", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, showArrows: { classPropertyName: "showArrows", publicName: "showArrows", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, overlayMode: { classPropertyName: "overlayMode", publicName: "overlayMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ctaClick: "ctaClick" }, ngImport: i0, template: "<div\n  class=\"bs-track\"\n  [style.transform]=\"_transform()\"\n  [style.height]=\"_height()\"\n  (touchstart)=\"_onTouchStart($event)\"\n  (touchend)=\"_onTouchEnd($event)\"\n>\n  @for (item of items(); track $index) {\n    <div class=\"bs-slide\">\n      <img [src]=\"item.src\" [alt]=\"item.alt || ''\" style=\"height:100%;width:100%;object-fit:cover\" />\n      <div class=\"bs-overlay\" [class]=\"_overlayCls()\" [style.justify-content]=\"overlayMode() === 'center' ? 'center' : overlayMode() === 'right' ? 'flex-end' : 'flex-start'\">\n        <div class=\"bs-content\" [style.text-align]=\"overlayMode() === 'center' ? 'center' : 'left'\" [style.max-width]=\"overlayMode() === 'center' ? '80%' : '50%'\">\n          @if (item.subtitle) { <span class=\"bs-subtitle\">{{ item.subtitle }}</span> }\n          @if (item.title) { <h2 class=\"bs-title\">{{ item.title }}</h2> }\n          @if (item.description) { <p class=\"bs-desc\">{{ item.description }}</p> }\n          @if (item.ctaLabel) {\n            @if (item.ctaLink) {\n              <a [href]=\"item.ctaLink\" class=\"bs-cta\" (click)=\"ctaClick.emit(item)\">\n                {{ item.ctaLabel }}\n                <i class=\"pi pi-arrow-right\" style=\"font-size:0.6875rem\"></i>\n              </a>\n            } @else {\n              <button type=\"button\" class=\"bs-cta\" (click)=\"_onCtaClick()\">\n                {{ item.ctaLabel }}\n                <i class=\"pi pi-arrow-right\" style=\"font-size:0.6875rem\"></i>\n              </button>\n            }\n          }\n        </div>\n      </div>\n    </div>\n  }\n</div>\n\n@if (showArrows() && items().length > 1) {\n  <button type=\"button\" class=\"bs-arrow bs-arrow-prev\" (click)=\"_prev()\" aria-label=\"Previous\">\n    <i class=\"pi pi-chevron-left\"></i>\n  </button>\n  <button type=\"button\" class=\"bs-arrow bs-arrow-next\" (click)=\"_next()\" aria-label=\"Next\">\n    <i class=\"pi pi-chevron-right\"></i>\n  </button>\n}\n\n@if (showDots() && items().length > 1) {\n  <div class=\"bs-dots\">\n    @for (item of items(); track $index) {\n      <button\n        type=\"button\"\n        class=\"bs-dot\"\n        [class.is-active]=\"$index === _index()\"\n        (click)=\"_go($index)\"\n        [attr.aria-label]=\"'Go to banner ' + ($index + 1)\"\n      ></button>\n    }\n  </div>\n}\n", styles: [":host{--bs-accent: var(--color-accent, oklch(.64 .2 50));--bs-radius: var(--radius-lg, .75rem);display:block;position:relative;overflow:hidden;border-radius:var(--bs-radius);width:100%;-webkit-user-select:none;user-select:none}.bs-track{display:flex;transition:transform .5s cubic-bezier(.25,.1,.25,1);will-change:transform}.bs-slide{flex:0 0 100%;min-width:0;position:relative}.bs-slide img{display:block;width:100%;height:100%;object-fit:cover}.bs-overlay{position:absolute;inset:0;display:flex;align-items:center;padding:2rem 3rem;background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,transparent 100%)}.bs-content{max-width:50%;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.3)}.bs-subtitle{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.5rem;opacity:.8}.bs-title{font-size:1.5rem;font-weight:700;line-height:1.2;margin-bottom:.5rem}.bs-desc{font-size:.875rem;line-height:1.5;opacity:.85;margin-bottom:1rem}.bs-cta{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1.25rem;border:none;border-radius:var(--bs-radius);background:var(--bs-accent);color:#fff;font-size:.8125rem;font-weight:600;cursor:pointer;transition:opacity .15s;text-decoration:none}.bs-cta:hover{opacity:.85}.bs-arrow{position:absolute;top:50%;translate:0 -50%;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;border:none;border-radius:50%;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;color:#fff;font-size:1.125rem;transition:background .15s}.bs-arrow:hover{background:#ffffff59}.bs-arrow-prev{left:.75rem}.bs-arrow-next{right:.75rem}.bs-dots{position:absolute;bottom:1rem;left:50%;translate:-50% 0;display:flex;gap:.5rem;z-index:2}.bs-dot{width:2rem;height:3px;padding:0;border:none;border-radius:2px;background:#ffffff59;cursor:pointer;transition:all .25s}.bs-dot.is-active{background:#fff;width:3rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BannerSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-banner-slider', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"bs-track\"\n  [style.transform]=\"_transform()\"\n  [style.height]=\"_height()\"\n  (touchstart)=\"_onTouchStart($event)\"\n  (touchend)=\"_onTouchEnd($event)\"\n>\n  @for (item of items(); track $index) {\n    <div class=\"bs-slide\">\n      <img [src]=\"item.src\" [alt]=\"item.alt || ''\" style=\"height:100%;width:100%;object-fit:cover\" />\n      <div class=\"bs-overlay\" [class]=\"_overlayCls()\" [style.justify-content]=\"overlayMode() === 'center' ? 'center' : overlayMode() === 'right' ? 'flex-end' : 'flex-start'\">\n        <div class=\"bs-content\" [style.text-align]=\"overlayMode() === 'center' ? 'center' : 'left'\" [style.max-width]=\"overlayMode() === 'center' ? '80%' : '50%'\">\n          @if (item.subtitle) { <span class=\"bs-subtitle\">{{ item.subtitle }}</span> }\n          @if (item.title) { <h2 class=\"bs-title\">{{ item.title }}</h2> }\n          @if (item.description) { <p class=\"bs-desc\">{{ item.description }}</p> }\n          @if (item.ctaLabel) {\n            @if (item.ctaLink) {\n              <a [href]=\"item.ctaLink\" class=\"bs-cta\" (click)=\"ctaClick.emit(item)\">\n                {{ item.ctaLabel }}\n                <i class=\"pi pi-arrow-right\" style=\"font-size:0.6875rem\"></i>\n              </a>\n            } @else {\n              <button type=\"button\" class=\"bs-cta\" (click)=\"_onCtaClick()\">\n                {{ item.ctaLabel }}\n                <i class=\"pi pi-arrow-right\" style=\"font-size:0.6875rem\"></i>\n              </button>\n            }\n          }\n        </div>\n      </div>\n    </div>\n  }\n</div>\n\n@if (showArrows() && items().length > 1) {\n  <button type=\"button\" class=\"bs-arrow bs-arrow-prev\" (click)=\"_prev()\" aria-label=\"Previous\">\n    <i class=\"pi pi-chevron-left\"></i>\n  </button>\n  <button type=\"button\" class=\"bs-arrow bs-arrow-next\" (click)=\"_next()\" aria-label=\"Next\">\n    <i class=\"pi pi-chevron-right\"></i>\n  </button>\n}\n\n@if (showDots() && items().length > 1) {\n  <div class=\"bs-dots\">\n    @for (item of items(); track $index) {\n      <button\n        type=\"button\"\n        class=\"bs-dot\"\n        [class.is-active]=\"$index === _index()\"\n        (click)=\"_go($index)\"\n        [attr.aria-label]=\"'Go to banner ' + ($index + 1)\"\n      ></button>\n    }\n  </div>\n}\n", styles: [":host{--bs-accent: var(--color-accent, oklch(.64 .2 50));--bs-radius: var(--radius-lg, .75rem);display:block;position:relative;overflow:hidden;border-radius:var(--bs-radius);width:100%;-webkit-user-select:none;user-select:none}.bs-track{display:flex;transition:transform .5s cubic-bezier(.25,.1,.25,1);will-change:transform}.bs-slide{flex:0 0 100%;min-width:0;position:relative}.bs-slide img{display:block;width:100%;height:100%;object-fit:cover}.bs-overlay{position:absolute;inset:0;display:flex;align-items:center;padding:2rem 3rem;background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,transparent 100%)}.bs-content{max-width:50%;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.3)}.bs-subtitle{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.5rem;opacity:.8}.bs-title{font-size:1.5rem;font-weight:700;line-height:1.2;margin-bottom:.5rem}.bs-desc{font-size:.875rem;line-height:1.5;opacity:.85;margin-bottom:1rem}.bs-cta{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1.25rem;border:none;border-radius:var(--bs-radius);background:var(--bs-accent);color:#fff;font-size:.8125rem;font-weight:600;cursor:pointer;transition:opacity .15s;text-decoration:none}.bs-cta:hover{opacity:.85}.bs-arrow{position:absolute;top:50%;translate:0 -50%;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;border:none;border-radius:50%;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;color:#fff;font-size:1.125rem;transition:background .15s}.bs-arrow:hover{background:#ffffff59}.bs-arrow-prev{left:.75rem}.bs-arrow-next{right:.75rem}.bs-dots{position:absolute;bottom:1rem;left:50%;translate:-50% 0;display:flex;gap:.5rem;z-index:2}.bs-dot{width:2rem;height:3px;padding:0;border:none;border-radius:2px;background:#ffffff59;cursor:pointer;transition:all .25s}.bs-dot.is-active{background:#fff;width:3rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], autoPlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlay", required: false }] }], interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: false }] }], showArrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrows", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], overlayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayMode", required: false }] }], ctaClick: [{ type: i0.Output, args: ["ctaClick"] }] } });
+
+class CarouselComponent {
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
+    height = input('320px', ...(ngDevMode ? [{ debugName: "height" }] : []));
+    autoPlay = input(true, ...(ngDevMode ? [{ debugName: "autoPlay" }] : []));
+    interval = input(4000, ...(ngDevMode ? [{ debugName: "interval" }] : []));
+    showArrows = input(true, ...(ngDevMode ? [{ debugName: "showArrows" }] : []));
+    showDots = input(true, ...(ngDevMode ? [{ debugName: "showDots" }] : []));
+    _height = computed(() => this.height(), ...(ngDevMode ? [{ debugName: "_height" }] : []));
+    _index = signal(0, ...(ngDevMode ? [{ debugName: "_index" }] : []));
+    _timer = null;
+    constructor() {
+        effect(() => {
+            const ap = this.autoPlay();
+            if (ap) {
+                this._startTimer();
+            }
+            else {
+                this._stopTimer();
+            }
+        });
+    }
+    _current = computed(() => this.items()[this._index()], ...(ngDevMode ? [{ debugName: "_current" }] : []));
+    _transform = computed(() => `translateX(-${this._index() * 100}%)`, ...(ngDevMode ? [{ debugName: "_transform" }] : []));
+    _go(index) {
+        const len = this.items().length;
+        if (len < 2)
+            return;
+        this._index.set(((index % len) + len) % len);
+        if (this.autoPlay())
+            this._startTimer();
+    }
+    _prev() { this._go(this._index() - 1); }
+    _next() { this._go(this._index() + 1); }
+    _startTimer() {
+        this._stopTimer();
+        this._timer = setInterval(() => this._next(), this.interval());
+    }
+    _stopTimer() {
+        if (this._timer) {
+            clearInterval(this._timer);
+            this._timer = null;
+        }
+    }
+    _xStart = 0;
+    _onTouchStart(event) {
+        this._xStart = event.touches[0].clientX;
+    }
+    _onTouchEnd(event) {
+        const dx = event.changedTouches[0].clientX - this._xStart;
+        if (Math.abs(dx) > 50) {
+            dx > 0 ? this._prev() : this._next();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CarouselComponent, isStandalone: true, selector: "app-carousel", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, autoPlay: { classPropertyName: "autoPlay", publicName: "autoPlay", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, showArrows: { classPropertyName: "showArrows", publicName: "showArrows", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.height": "_height" } }, ngImport: i0, template: "<div\n  class=\"carousel-track\"\n  [style.transform]=\"_transform()\"\n  (touchstart)=\"_onTouchStart($event)\"\n  (touchend)=\"_onTouchEnd($event)\"\n>\n  @for (item of items(); track $index) {\n    <div class=\"carousel-slide\">\n      <img [src]=\"item.src\" [alt]=\"item.alt || ''\" />\n      @if (item.title || item.description) {\n        <div class=\"ca-caption\">\n          @if (item.title) { <div class=\"ca-caption-title\">{{ item.title }}</div> }\n          @if (item.description) { <div class=\"ca-caption-desc\">{{ item.description }}</div> }\n        </div>\n      }\n    </div>\n  }\n</div>\n\n@if (showArrows() && items().length > 1) {\n  <button type=\"button\" class=\"arrow arrow-prev\" (click)=\"_prev()\" aria-label=\"Previous\">\n    <i class=\"pi pi-chevron-left\"></i>\n  </button>\n  <button type=\"button\" class=\"arrow arrow-next\" (click)=\"_next()\" aria-label=\"Next\">\n    <i class=\"pi pi-chevron-right\"></i>\n  </button>\n}\n\n@if (showDots() && items().length > 1) {\n  <div class=\"dots\">\n    @for (item of items(); track $index) {\n      <button\n        type=\"button\"\n        class=\"dot\"\n        [class.is-active]=\"$index === _index()\"\n        (click)=\"_go($index)\"\n        [attr.aria-label]=\"'Go to slide ' + ($index + 1)\"\n      ></button>\n    }\n  </div>\n}\n", styles: [":host{--ca-accent: var(--color-accent, oklch(.64 .2 50));--ca-bg: var(--color-surface-alt, oklch(.94 .005 260));--ca-text: var(--color-text, oklch(.14 .01 260));--ca-muted: var(--color-text-muted, oklch(.48 .01 260));--ca-radius: var(--radius-md, .5rem);display:block;position:relative;overflow:hidden;border-radius:var(--ca-radius);width:100vw;margin-inline:calc(-50vw + 50%);-webkit-user-select:none;user-select:none}.carousel-track{display:flex;height:100%;transition:transform .4s cubic-bezier(.25,.1,.25,1);will-change:transform}.carousel-slide{flex:0 0 100%;min-width:0;height:100%}.carousel-slide img{display:block;width:100%;height:100%;object-fit:cover}.arrow{position:absolute;top:50%;translate:0 -50%;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:none;border-radius:50%;background:color-mix(in srgb,var(--ca-bg) 80%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;color:var(--ca-text);font-size:1rem;opacity:0;transition:opacity .2s,background .15s}:host:hover .arrow{opacity:1}.arrow:hover{background:var(--ca-bg)}.arrow-prev{left:.75rem}.arrow-next{right:.75rem}.dots{position:absolute;bottom:.75rem;left:50%;translate:-50% 0;display:flex;gap:.375rem;z-index:2}.dot{width:.5rem;height:.5rem;padding:0;border:none;border-radius:50%;background:color-mix(in srgb,var(--ca-accent) 30%,var(--ca-bg));cursor:pointer;transition:all .2s}.dot.is-active{background:var(--ca-accent);width:1.25rem;border-radius:.25rem}.ca-caption{position:absolute;bottom:2rem;left:1rem;right:1rem;z-index:1;text-align:center;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);pointer-events:none}.ca-caption-title{font-size:1.125rem;font-weight:600;margin-bottom:.25rem}.ca-caption-desc{font-size:.8125rem;opacity:.85}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CarouselComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-carousel', imports: [], host: {
+                        '[style.height]': '_height',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"carousel-track\"\n  [style.transform]=\"_transform()\"\n  (touchstart)=\"_onTouchStart($event)\"\n  (touchend)=\"_onTouchEnd($event)\"\n>\n  @for (item of items(); track $index) {\n    <div class=\"carousel-slide\">\n      <img [src]=\"item.src\" [alt]=\"item.alt || ''\" />\n      @if (item.title || item.description) {\n        <div class=\"ca-caption\">\n          @if (item.title) { <div class=\"ca-caption-title\">{{ item.title }}</div> }\n          @if (item.description) { <div class=\"ca-caption-desc\">{{ item.description }}</div> }\n        </div>\n      }\n    </div>\n  }\n</div>\n\n@if (showArrows() && items().length > 1) {\n  <button type=\"button\" class=\"arrow arrow-prev\" (click)=\"_prev()\" aria-label=\"Previous\">\n    <i class=\"pi pi-chevron-left\"></i>\n  </button>\n  <button type=\"button\" class=\"arrow arrow-next\" (click)=\"_next()\" aria-label=\"Next\">\n    <i class=\"pi pi-chevron-right\"></i>\n  </button>\n}\n\n@if (showDots() && items().length > 1) {\n  <div class=\"dots\">\n    @for (item of items(); track $index) {\n      <button\n        type=\"button\"\n        class=\"dot\"\n        [class.is-active]=\"$index === _index()\"\n        (click)=\"_go($index)\"\n        [attr.aria-label]=\"'Go to slide ' + ($index + 1)\"\n      ></button>\n    }\n  </div>\n}\n", styles: [":host{--ca-accent: var(--color-accent, oklch(.64 .2 50));--ca-bg: var(--color-surface-alt, oklch(.94 .005 260));--ca-text: var(--color-text, oklch(.14 .01 260));--ca-muted: var(--color-text-muted, oklch(.48 .01 260));--ca-radius: var(--radius-md, .5rem);display:block;position:relative;overflow:hidden;border-radius:var(--ca-radius);width:100vw;margin-inline:calc(-50vw + 50%);-webkit-user-select:none;user-select:none}.carousel-track{display:flex;height:100%;transition:transform .4s cubic-bezier(.25,.1,.25,1);will-change:transform}.carousel-slide{flex:0 0 100%;min-width:0;height:100%}.carousel-slide img{display:block;width:100%;height:100%;object-fit:cover}.arrow{position:absolute;top:50%;translate:0 -50%;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:none;border-radius:50%;background:color-mix(in srgb,var(--ca-bg) 80%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;color:var(--ca-text);font-size:1rem;opacity:0;transition:opacity .2s,background .15s}:host:hover .arrow{opacity:1}.arrow:hover{background:var(--ca-bg)}.arrow-prev{left:.75rem}.arrow-next{right:.75rem}.dots{position:absolute;bottom:.75rem;left:50%;translate:-50% 0;display:flex;gap:.375rem;z-index:2}.dot{width:.5rem;height:.5rem;padding:0;border:none;border-radius:50%;background:color-mix(in srgb,var(--ca-accent) 30%,var(--ca-bg));cursor:pointer;transition:all .2s}.dot.is-active{background:var(--ca-accent);width:1.25rem;border-radius:.25rem}.ca-caption{position:absolute;bottom:2rem;left:1rem;right:1rem;z-index:1;text-align:center;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);pointer-events:none}.ca-caption-title{font-size:1.125rem;font-weight:600;margin-bottom:.25rem}.ca-caption-desc{font-size:.8125rem;opacity:.85}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], autoPlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlay", required: false }] }], interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: false }] }], showArrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrows", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }] } });
+
+class EmptyStateComponent {
+    icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    message = input('', ...(ngDevMode ? [{ debugName: "message" }] : []));
+    width = input('', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: EmptyStateComponent, isStandalone: true, selector: "app-empty-state", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"rz-empty\" [style.width]=\"width() || '100%'\">\n  @if (icon()) {\n    <div class=\"rz-empty-icon-wrap\">\n      <i [class]=\"icon()\" class=\"rz-empty-icon\"></i>\n    </div>\n  }\n  @if (title()) {\n    <h3 class=\"rz-empty-title\">{{ title() }}</h3>\n  }\n  @if (message()) {\n    <p class=\"rz-empty-message\">{{ message() }}</p>\n  }\n  <ng-content />\n</div>\n", styles: [":host{display:contents}.rz-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:3rem 1rem;text-align:center}.rz-empty-icon-wrap{display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;border-radius:9999px;background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-empty-icon{font-size:1.125rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-empty-title{font-size:1rem;font-weight:600;color:var(--color-text, oklch(.14 .01 260))}.rz-empty-message{font-size:.875rem;color:var(--color-text-muted, oklch(.48 .01 260));max-width:20rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: EmptyStateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-empty-state', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rz-empty\" [style.width]=\"width() || '100%'\">\n  @if (icon()) {\n    <div class=\"rz-empty-icon-wrap\">\n      <i [class]=\"icon()\" class=\"rz-empty-icon\"></i>\n    </div>\n  }\n  @if (title()) {\n    <h3 class=\"rz-empty-title\">{{ title() }}</h3>\n  }\n  @if (message()) {\n    <p class=\"rz-empty-message\">{{ message() }}</p>\n  }\n  <ng-content />\n</div>\n", styles: [":host{display:contents}.rz-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:3rem 1rem;text-align:center}.rz-empty-icon-wrap{display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;border-radius:9999px;background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-empty-icon{font-size:1.125rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-empty-title{font-size:1rem;font-weight:600;color:var(--color-text, oklch(.14 .01 260))}.rz-empty-message{font-size:.875rem;color:var(--color-text-muted, oklch(.48 .01 260));max-width:20rem}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
+
+class ImageUploadComponent {
+    images = model([], ...(ngDevMode ? [{ debugName: "images" }] : []));
+    multiple = input(true, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    maxFiles = input(4, ...(ngDevMode ? [{ debugName: "maxFiles" }] : []));
+    maxSize = input(2097152, ...(ngDevMode ? [{ debugName: "maxSize" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    placeholder = input('Drop images or click', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    _size = computed(() => this.size(), ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "_isDragOver" }] : []));
+    _onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.disabled())
+            this._isDragOver.set(true);
+    }
+    _onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this._isDragOver.set(false);
+    }
+    _onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this._isDragOver.set(false);
+        if (this.disabled())
+            return;
+        const dropped = event.dataTransfer?.files;
+        if (dropped)
+            this._addFiles(Array.from(dropped));
+    }
+    _onFileSelected(event) {
+        const input = event.target;
+        if (input.files)
+            this._addFiles(Array.from(input.files));
+        input.value = '';
+    }
+    _removeFile(index) {
+        const removed = this.images()[index];
+        URL.revokeObjectURL(removed.url);
+        this.images.update(f => f.filter((_, i) => i !== index));
+    }
+    _addFiles(newFiles) {
+        const imgs = newFiles.filter(f => f.type.startsWith('image/'));
+        if (this.maxSize()) {
+            imgs.splice(0, imgs.length, ...imgs.filter(f => f.size <= (this.maxSize() || Infinity)));
+        }
+        const current = this.images();
+        if (!this.multiple()) {
+            current.forEach(f => URL.revokeObjectURL(f.url));
+            if (imgs.length) {
+                this.images.set([{ file: imgs[0], url: URL.createObjectURL(imgs[0]) }]);
+            }
+            else {
+                this.images.set([]);
+            }
+            return;
+        }
+        const max = this.maxFiles() || Infinity;
+        const remaining = max - current.length;
+        if (remaining <= 0)
+            return;
+        const add = imgs.slice(0, remaining).map(f => ({ file: f, url: URL.createObjectURL(f) }));
+        this.images.set([...current, ...add]);
+    }
+    _formatSize(bytes) {
+        if (bytes < 1024)
+            return `${bytes} B`;
+        if (bytes < 1048576)
+            return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${(bytes / 1048576).toFixed(1)} MB`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ImageUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ImageUploadComponent, isStandalone: true, selector: "app-image-upload", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 } }, outputs: { images: "imagesChange" }, host: { properties: { "attr.data-size": "_size" } }, ngImport: i0, template: "@if (images().length) {\n  <div class=\"rz-iu-preview-grid\">\n    @for (img of images(); track img.url; let i = $index) {\n      <div class=\"rz-iu-preview-item\">\n        <img [src]=\"img.url\" [alt]=\"img.file.name\" />\n        <div class=\"rz-iu-preview-overlay\">\n          <button type=\"button\" class=\"rz-iu-remove-btn\" (click)=\"_removeFile(i)\" aria-label=\"Remove\" title=\"Remove\">&times;</button>\n        </div>\n      </div>\n    }\n    @if (multiple() && images().length < maxFiles()) {\n      <button type=\"button\" class=\"rz-iu-add-btn\" (click)=\"_input.click()\" title=\"Add image\">\n        <i class=\"pi pi-plus rz-iu-add-icon\"></i>\n        <span>Add</span>\n      </button>\n    }\n  </div>\n} @else {\n  <div\n    class=\"rz-iu-drop-zone\"\n    [class.is-dragover]=\"_isDragOver()\"\n    (dragover)=\"_onDragOver($event)\"\n    (dragleave)=\"_onDragLeave($event)\"\n    (drop)=\"_onDrop($event)\"\n    (click)=\"_input.click()\"\n  >\n    <i class=\"pi pi-image rz-iu-drop-icon\"></i>\n    <span class=\"rz-iu-drop-placeholder\">{{ placeholder() }}</span>\n    @if (maxSize()) {\n      <span class=\"rz-iu-maxsize\">Max {{ _formatSize(maxSize()) }} each</span>\n    }\n  </div>\n}\n\n<input\n  #_input\n  type=\"file\"\n  accept=\"image/*\"\n  [attr.multiple]=\"multiple() ? true : null\"\n  [attr.disabled]=\"disabled() ? true : null\"\n  (change)=\"_onFileSelected($event)\"\n  style=\"display:none\"\n/>\n\n@if (error()) {\n  <span class=\"rz-iu-msg rz-iu-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</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-radius: var(--radius-md, .5rem);position:relative;display:block;padding-bottom:1.375rem;width:100%}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}.rz-iu-drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;min-height:8rem;padding:1.5rem 1rem;border:2px dashed var(--rz-border);border-radius:var(--rz-radius);background:var(--rz-bg);cursor:pointer;transition:all .2s ease;color:var(--rz-muted);text-align:center}.rz-iu-drop-zone:hover,.rz-iu-drop-zone.is-dragover{border-color:var(--rz-accent);background:color-mix(in srgb,var(--rz-accent) 6%,var(--rz-bg));color:var(--rz-text)}.rz-iu-drop-icon{font-size:1.5rem}.rz-iu-drop-placeholder{font-size:.75rem}.rz-iu-maxsize{font-size:.625rem;opacity:.6}.rz-iu-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.5rem}.rz-iu-preview-item{position:relative;aspect-ratio:1;border-radius:calc(var(--rz-radius) - 2px);overflow:hidden;border:1px solid var(--rz-border);background:color-mix(in srgb,var(--rz-accent) 4%,var(--rz-bg))}.rz-iu-preview-item img{width:100%;height:100%;object-fit:cover;display:block}.rz-iu-preview-overlay{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:flex-end;padding:.25rem;opacity:0;transition:opacity .15s;background:linear-gradient(to bottom,rgba(0,0,0,.4) 0%,transparent 60%)}.rz-iu-preview-item:hover .rz-iu-preview-overlay{opacity:1}.rz-iu-remove-btn{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:none;border-radius:50%;background:#00000080;cursor:pointer;color:#fff;font-size:.875rem;transition:background .15s}.rz-iu-remove-btn:hover{background:var(--color-danger, oklch(.55 .22 25))}.rz-iu-add-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;border:2px dashed var(--rz-border);border-radius:calc(var(--rz-radius) - 2px);background:transparent;cursor:pointer;color:var(--rz-muted);font-size:.75rem;gap:.25rem;transition:all .2s}.rz-iu-add-btn:hover{border-color:var(--rz-accent);color:var(--rz-accent);background:color-mix(in srgb,var(--rz-accent) 6%,var(--rz-bg))}.rz-iu-add-icon{font-size:1.125rem}.rz-iu-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-iu-error{color:var(--color-danger)}.error-enter{animation:rz-error-in .25s ease-out}.error-leave{animation:rz-error-out .2s ease-in forwards}@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: ImageUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-image-upload', imports: [], host: {
+                        '[attr.data-size]': '_size',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (images().length) {\n  <div class=\"rz-iu-preview-grid\">\n    @for (img of images(); track img.url; let i = $index) {\n      <div class=\"rz-iu-preview-item\">\n        <img [src]=\"img.url\" [alt]=\"img.file.name\" />\n        <div class=\"rz-iu-preview-overlay\">\n          <button type=\"button\" class=\"rz-iu-remove-btn\" (click)=\"_removeFile(i)\" aria-label=\"Remove\" title=\"Remove\">&times;</button>\n        </div>\n      </div>\n    }\n    @if (multiple() && images().length < maxFiles()) {\n      <button type=\"button\" class=\"rz-iu-add-btn\" (click)=\"_input.click()\" title=\"Add image\">\n        <i class=\"pi pi-plus rz-iu-add-icon\"></i>\n        <span>Add</span>\n      </button>\n    }\n  </div>\n} @else {\n  <div\n    class=\"rz-iu-drop-zone\"\n    [class.is-dragover]=\"_isDragOver()\"\n    (dragover)=\"_onDragOver($event)\"\n    (dragleave)=\"_onDragLeave($event)\"\n    (drop)=\"_onDrop($event)\"\n    (click)=\"_input.click()\"\n  >\n    <i class=\"pi pi-image rz-iu-drop-icon\"></i>\n    <span class=\"rz-iu-drop-placeholder\">{{ placeholder() }}</span>\n    @if (maxSize()) {\n      <span class=\"rz-iu-maxsize\">Max {{ _formatSize(maxSize()) }} each</span>\n    }\n  </div>\n}\n\n<input\n  #_input\n  type=\"file\"\n  accept=\"image/*\"\n  [attr.multiple]=\"multiple() ? true : null\"\n  [attr.disabled]=\"disabled() ? true : null\"\n  (change)=\"_onFileSelected($event)\"\n  style=\"display:none\"\n/>\n\n@if (error()) {\n  <span class=\"rz-iu-msg rz-iu-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</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-radius: var(--radius-md, .5rem);position:relative;display:block;padding-bottom:1.375rem;width:100%}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}.rz-iu-drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;min-height:8rem;padding:1.5rem 1rem;border:2px dashed var(--rz-border);border-radius:var(--rz-radius);background:var(--rz-bg);cursor:pointer;transition:all .2s ease;color:var(--rz-muted);text-align:center}.rz-iu-drop-zone:hover,.rz-iu-drop-zone.is-dragover{border-color:var(--rz-accent);background:color-mix(in srgb,var(--rz-accent) 6%,var(--rz-bg));color:var(--rz-text)}.rz-iu-drop-icon{font-size:1.5rem}.rz-iu-drop-placeholder{font-size:.75rem}.rz-iu-maxsize{font-size:.625rem;opacity:.6}.rz-iu-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.5rem}.rz-iu-preview-item{position:relative;aspect-ratio:1;border-radius:calc(var(--rz-radius) - 2px);overflow:hidden;border:1px solid var(--rz-border);background:color-mix(in srgb,var(--rz-accent) 4%,var(--rz-bg))}.rz-iu-preview-item img{width:100%;height:100%;object-fit:cover;display:block}.rz-iu-preview-overlay{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:flex-end;padding:.25rem;opacity:0;transition:opacity .15s;background:linear-gradient(to bottom,rgba(0,0,0,.4) 0%,transparent 60%)}.rz-iu-preview-item:hover .rz-iu-preview-overlay{opacity:1}.rz-iu-remove-btn{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:none;border-radius:50%;background:#00000080;cursor:pointer;color:#fff;font-size:.875rem;transition:background .15s}.rz-iu-remove-btn:hover{background:var(--color-danger, oklch(.55 .22 25))}.rz-iu-add-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;border:2px dashed var(--rz-border);border-radius:calc(var(--rz-radius) - 2px);background:transparent;cursor:pointer;color:var(--rz-muted);font-size:.75rem;gap:.25rem;transition:all .2s}.rz-iu-add-btn:hover{border-color:var(--rz-accent);color:var(--rz-accent);background:color-mix(in srgb,var(--rz-accent) 6%,var(--rz-bg))}.rz-iu-add-icon{font-size:1.125rem}.rz-iu-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-iu-error{color:var(--color-danger)}.error-enter{animation:rz-error-in .25s ease-out}.error-leave{animation:rz-error-out .2s ease-in forwards}@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: { images: [{ type: i0.Input, args: [{ isSignal: true, alias: "images", required: false }] }, { type: i0.Output, args: ["imagesChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }] } });
+
+class SkeletonComponent {
+    variant = input('text', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    width = input('', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    height = input('', ...(ngDevMode ? [{ debugName: "height" }] : []));
+    count = input(1, ...(ngDevMode ? [{ debugName: "count" }] : []));
+    borderRadius = input('', ...(ngDevMode ? [{ debugName: "borderRadius" }] : []));
+    accentColor = input('', ...(ngDevMode ? [{ debugName: "accentColor" }] : []));
+    _items = computed(() => Array.from({ length: this.count() }), ...(ngDevMode ? [{ debugName: "_items" }] : []));
+    _baseWidth = computed(() => this.width() || (this.variant() === 'circle' ? '40px' : '100%'), ...(ngDevMode ? [{ debugName: "_baseWidth" }] : []));
+    _baseHeight = computed(() => {
+        if (this.height())
+            return this.height();
+        switch (this.variant()) {
+            case 'circle': return '40px';
+            case 'rect': return '100px';
+            case 'text':
+            default: return '14px';
+        }
+    }, ...(ngDevMode ? [{ debugName: "_baseHeight" }] : []));
+    _radius = computed(() => {
+        if (this.borderRadius())
+            return this.borderRadius();
+        switch (this.variant()) {
+            case 'circle': return '9999px';
+            case 'rect': return 'var(--radius-md,0.5rem)';
+            case 'text':
+            default: return 'var(--radius-sm,0.25rem)';
+        }
+    }, ...(ngDevMode ? [{ debugName: "_radius" }] : []));
+    _bg = computed(() => {
+        if (this.accentColor())
+            return `var(--color-${this.accentColor()}-bg,var(--color-surface-alt,oklch(0.975 0.005 260)))`;
+        return 'var(--color-surface-alt,oklch(0.975 0.005 260))';
+    }, ...(ngDevMode ? [{ debugName: "_bg" }] : []));
+    _lineWidth(index) {
+        if (this.width())
+            return this.width();
+        const total = this.count();
+        if (total <= 1)
+            return '100%';
+        if (index === total - 1)
+            return '60%';
+        return '100%';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SkeletonComponent, isStandalone: true, selector: "app-skeleton", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"rz-sk-container\" [style.width]=\"_baseWidth()\">\n  @for (item of _items(); track $index) {\n    <div\n      class=\"rz-sk-pulse\"\n      [style.height]=\"_baseHeight()\"\n      [style.width]=\"_lineWidth($index)\"\n      [style.border-radius]=\"_radius()\"\n      [style.background-color]=\"_bg()\"\n    ></div>\n  }\n</div>\n", styles: [":host{display:contents}.rz-sk-container{display:flex;flex-direction:column;gap:.5rem}.rz-sk-pulse{animation:rz-skeleton-pulse 1.5s ease-in-out infinite}@keyframes rz-skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-skeleton', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rz-sk-container\" [style.width]=\"_baseWidth()\">\n  @for (item of _items(); track $index) {\n    <div\n      class=\"rz-sk-pulse\"\n      [style.height]=\"_baseHeight()\"\n      [style.width]=\"_lineWidth($index)\"\n      [style.border-radius]=\"_radius()\"\n      [style.background-color]=\"_bg()\"\n    ></div>\n  }\n</div>\n", styles: [":host{display:contents}.rz-sk-container{display:flex;flex-direction:column;gap:.5rem}.rz-sk-pulse{animation:rz-skeleton-pulse 1.5s ease-in-out infinite}@keyframes rz-skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], accentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentColor", required: false }] }] } });
+
+class TableSkeletonComponent {
+    rows = input(5, ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    columns = input(4, ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    _rowArr = computed(() => Array.from({ length: this.rows() }), ...(ngDevMode ? [{ debugName: "_rowArr" }] : []));
+    _cols = computed(() => {
+        const c = this.columns();
+        if (typeof c === 'number')
+            return Array.from({ length: c }, () => ({ shape: 'bar' }));
+        return c.map(col => ({ shape: col.shape ?? 'bar', width: col.width }));
+    }, ...(ngDevMode ? [{ debugName: "_cols" }] : []));
+    _colWidth = computed(() => {
+        const cols = this._cols();
+        const count = cols.length;
+        if (count === 0)
+            return [];
+        const defined = cols.filter(c => c.width);
+        const definedTotal = defined.reduce((sum, c) => sum + parseFloat(c.width || '0'), 0);
+        const undefinedCount = count - defined.length;
+        const remainingPct = 100 - definedTotal;
+        const eachPct = undefinedCount > 0 ? Math.floor(remainingPct / undefinedCount) : 0;
+        return cols.map(c => c.width || `${eachPct}%`);
+    }, ...(ngDevMode ? [{ debugName: "_colWidth" }] : []));
+    _shapeClass(shape) {
+        switch (shape) {
+            case 'circle': return 'rz-ts-shape-circle';
+            case 'action': return 'rz-ts-shape-action';
+            default: return 'rz-ts-shape-bar';
+        }
+    }
+    _shapeSize(shape) {
+        switch (shape) {
+            case 'circle': return { width: '32px', height: '32px' };
+            case 'action': return { width: '28px', height: '28px' };
+            default: return { width: '100%', height: '14px' };
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TableSkeletonComponent, isStandalone: true, selector: "app-table-skeleton", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"rz-ts-wrapper\">\n  <table class=\"rz-ts-tbl\">\n    <thead>\n      <tr>\n        @for (col of _cols(); track $index) {\n          <th\n            class=\"rz-ts-th\"\n            [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n            [style.width]=\"_colWidth()[$index]\"\n          >\n            <div class=\"rz-ts-shimmer rz-ts-shape-bar\" style=\"height:14px;width:60%\"></div>\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of _rowArr(); track $index) {\n        <tr class=\"rz-ts-row\">\n          @for (col of _cols(); track $index) {\n            <td class=\"rz-ts-td\">\n              <div\n                class=\"rz-ts-shimmer\"\n                [class]=\"_shapeClass(col.shape)\"\n                [style]=\"_shapeSize(col.shape)\"\n                [class.rz-ts-mx-auto]=\"col.shape === 'circle'\"\n              ></div>\n            </td>\n          }\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n", styles: [":host{display:block}.rz-ts-wrapper{overflow:hidden;border-radius:var(--radius-lg, .75rem);border:1px solid var(--color-border-light, oklch(.91 .01 260))}.rz-ts-tbl{width:100%;border-collapse:collapse}.rz-ts-th,.rz-ts-td{padding:.625rem .75rem}.rz-ts-row{border-bottom:1px solid var(--color-border-light, oklch(.91 .01 260))}.rz-ts-shimmer{background:var(--color-surface-alt, oklch(.975 .005 260));animation:rz-shimmer 1.5s ease-in-out infinite}thead .rz-ts-shimmer{background:#fff3}.rz-ts-shape-circle{border-radius:9999px}.rz-ts-shape-action{border-radius:.375rem}.rz-ts-shape-bar{border-radius:var(--radius-sm, .25rem)}.rz-ts-mx-auto{margin-left:auto;margin-right:auto}@keyframes rz-shimmer{0%,to{opacity:1}50%{opacity:.4}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-table-skeleton', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rz-ts-wrapper\">\n  <table class=\"rz-ts-tbl\">\n    <thead>\n      <tr>\n        @for (col of _cols(); track $index) {\n          <th\n            class=\"rz-ts-th\"\n            [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n            [style.width]=\"_colWidth()[$index]\"\n          >\n            <div class=\"rz-ts-shimmer rz-ts-shape-bar\" style=\"height:14px;width:60%\"></div>\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of _rowArr(); track $index) {\n        <tr class=\"rz-ts-row\">\n          @for (col of _cols(); track $index) {\n            <td class=\"rz-ts-td\">\n              <div\n                class=\"rz-ts-shimmer\"\n                [class]=\"_shapeClass(col.shape)\"\n                [style]=\"_shapeSize(col.shape)\"\n                [class.rz-ts-mx-auto]=\"col.shape === 'circle'\"\n              ></div>\n            </td>\n          }\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n", styles: [":host{display:block}.rz-ts-wrapper{overflow:hidden;border-radius:var(--radius-lg, .75rem);border:1px solid var(--color-border-light, oklch(.91 .01 260))}.rz-ts-tbl{width:100%;border-collapse:collapse}.rz-ts-th,.rz-ts-td{padding:.625rem .75rem}.rz-ts-row{border-bottom:1px solid var(--color-border-light, oklch(.91 .01 260))}.rz-ts-shimmer{background:var(--color-surface-alt, oklch(.975 .005 260));animation:rz-shimmer 1.5s ease-in-out infinite}thead .rz-ts-shimmer{background:#fff3}.rz-ts-shape-circle{border-radius:9999px}.rz-ts-shape-action{border-radius:.375rem}.rz-ts-shape-bar{border-radius:var(--radius-sm, .25rem)}.rz-ts-mx-auto{margin-left:auto;margin-right:auto}@keyframes rz-shimmer{0%,to{opacity:1}50%{opacity:.4}}\n"] }]
+        }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }] } });
+
+class TooltipComponent {
+    _el = inject(ElementRef);
+    text = input('', ...(ngDevMode ? [{ debugName: "text" }] : []));
+    position = input('top', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    alwaysShow = input(false, ...(ngDevMode ? [{ debugName: "alwaysShow" }] : []));
+    _visible = signal(false, ...(ngDevMode ? [{ debugName: "_visible" }] : []));
+    _tipText = computed(() => this.text() || this._el.nativeElement.textContent?.trim() || '', ...(ngDevMode ? [{ debugName: "_tipText" }] : []));
+    _panelStyle = signal({}, ...(ngDevMode ? [{ debugName: "_panelStyle" }] : []));
+    _onMouseEnter(event) {
+        if (this.disabled())
+            return;
+        const content = this._el.nativeElement.querySelector('[data-tip-content]');
+        if (content && !this.alwaysShow()) {
+            if (content.scrollWidth <= content.clientWidth)
+                return;
+        }
+        this._computePosition(event);
+        this._visible.set(true);
+    }
+    _onMouseLeave() {
+        this._visible.set(false);
+    }
+    _computePosition(event) {
+        const el = event.currentTarget;
+        const rect = el.getBoundingClientRect();
+        const gap = 6;
+        const pos = this.position();
+        let top = 0, left = 0;
+        if (pos === 'top') {
+            top = rect.top - gap;
+            left = rect.left + rect.width / 2;
+        }
+        else if (pos === 'bottom') {
+            top = rect.bottom + gap;
+            left = rect.left + rect.width / 2;
+        }
+        else if (pos === 'left') {
+            top = rect.top + rect.height / 2;
+            left = rect.left - gap;
+        }
+        else {
+            top = rect.top + rect.height / 2;
+            left = rect.right + gap;
+        }
+        this._panelStyle.set({ top: `${top}px`, left: `${left}px`, transform: 'translate(-50%, -50%)' });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TooltipComponent, isStandalone: true, selector: "app-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, alwaysShow: { classPropertyName: "alwaysShow", publicName: "alwaysShow", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "_onMouseEnter($event)", "mouseleave": "_onMouseLeave()" } }, ngImport: i0, template: "<div data-tip-content class=\"rz-tt-content\">\n  <ng-content />\n</div>\n@if (_visible()) {\n  <div class=\"rz-tt-panel\"\n    [style]=\"_panelStyle()\"\n    animate.enter=\"tip-enter\"\n    animate.leave=\"tip-leave\"\n  >\n    {{ _tipText() }}\n  </div>\n}\n", styles: [":host{position:relative;display:inline-block;max-width:100%}.rz-tt-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rz-tt-panel{position:fixed;z-index:9999;pointer-events:none;padding:4px 8px;font-size:.75rem;line-height:1.25;border-radius:4px;white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis;background:var(--color-text, oklch(.14 .01 260));color:var(--color-surface, oklch(.99 0 0))}.tip-enter{animation:rz-tip-in .12s ease-out}.tip-leave{animation:rz-tip-out .08s ease-in forwards}@keyframes rz-tip-in{0%{opacity:0}to{opacity:1}}@keyframes rz-tip-out{0%{opacity:1}to{opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-tooltip', imports: [], host: {
+                        '(mouseenter)': '_onMouseEnter($event)',
+                        '(mouseleave)': '_onMouseLeave()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div data-tip-content class=\"rz-tt-content\">\n  <ng-content />\n</div>\n@if (_visible()) {\n  <div class=\"rz-tt-panel\"\n    [style]=\"_panelStyle()\"\n    animate.enter=\"tip-enter\"\n    animate.leave=\"tip-leave\"\n  >\n    {{ _tipText() }}\n  </div>\n}\n", styles: [":host{position:relative;display:inline-block;max-width:100%}.rz-tt-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rz-tt-panel{position:fixed;z-index:9999;pointer-events:none;padding:4px 8px;font-size:.75rem;line-height:1.25;border-radius:4px;white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis;background:var(--color-text, oklch(.14 .01 260));color:var(--color-surface, oklch(.99 0 0))}.tip-enter{animation:rz-tip-in .12s ease-out}.tip-leave{animation:rz-tip-out .08s ease-in forwards}@keyframes rz-tip-in{0%{opacity:0}to{opacity:1}}@keyframes rz-tip-out{0%{opacity:1}to{opacity:0}}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], alwaysShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "alwaysShow", required: false }] }] } });
+
+class TableComponent {
+    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    rows = input([], ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    striped = input(false, ...(ngDevMode ? [{ debugName: "striped" }] : []));
+    hoverable = input(true, ...(ngDevMode ? [{ debugName: "hoverable" }] : []));
+    sortable = input(false, ...(ngDevMode ? [{ debugName: "sortable" }] : []));
+    emptyMessage = input('No data available', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
+    width = input('', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
+    filterable = input(false, ...(ngDevMode ? [{ debugName: "filterable" }] : []));
+    skeletonRows = input(5, ...(ngDevMode ? [{ debugName: "skeletonRows" }] : []));
+    resizable = input(false, ...(ngDevMode ? [{ debugName: "resizable" }] : []));
+    pageable = input(false, ...(ngDevMode ? [{ debugName: "pageable" }] : []));
+    pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    pageSizeOptions = input([5, 10, 20, 50], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : []));
+    selectable = input(false, ...(ngDevMode ? [{ debugName: "selectable" }] : []));
+    selectionMode = input('multiple', ...(ngDevMode ? [{ debugName: "selectionMode" }] : []));
+    selectionKey = input('', ...(ngDevMode ? [{ debugName: "selectionKey" }] : []));
+    stickyHeader = input(false, ...(ngDevMode ? [{ debugName: "stickyHeader" }] : []));
+    exportable = input(false, ...(ngDevMode ? [{ debugName: "exportable" }] : []));
+    columnToggle = input(false, ...(ngDevMode ? [{ debugName: "columnToggle" }] : []));
+    expandable = input(false, ...(ngDevMode ? [{ debugName: "expandable" }] : []));
+    sortChange = output();
+    pageChange = output();
+    selectedRows = output();
+    rowDetail;
+    _sortKey = signal('', ...(ngDevMode ? [{ debugName: "_sortKey" }] : []));
+    _sortDir = signal('', ...(ngDevMode ? [{ debugName: "_sortDir" }] : []));
+    _searchQuery = signal('', ...(ngDevMode ? [{ debugName: "_searchQuery" }] : []));
+    _filters = signal({}, ...(ngDevMode ? [{ debugName: "_filters" }] : []));
+    _page = signal(1, ...(ngDevMode ? [{ debugName: "_page" }] : []));
+    _pageSize = signal(10, ...(ngDevMode ? [{ debugName: "_pageSize" }] : []));
+    _columnWidths = signal({}, ...(ngDevMode ? [{ debugName: "_columnWidths" }] : []));
+    _hiddenColumns = signal(new Set(), ...(ngDevMode ? [{ debugName: "_hiddenColumns" }] : []));
+    _selectedKeys = signal(new Set(), ...(ngDevMode ? [{ debugName: "_selectedKeys" }] : []));
+    _expandedKeys = signal(new Set(), ...(ngDevMode ? [{ debugName: "_expandedKeys" }] : []));
+    _pageSizeOptions = computed(() => this.pageSizeOptions().map(s => ({ label: `${s} / page`, value: String(s) })), ...(ngDevMode ? [{ debugName: "_pageSizeOptions" }] : []));
+    _columnToggleOpen = signal(false, ...(ngDevMode ? [{ debugName: "_columnToggleOpen" }] : []));
+    _exportOpen = signal(false, ...(ngDevMode ? [{ debugName: "_exportOpen" }] : []));
+    _resizing = null;
+    constructor() {
+        effect(() => { this._pageSize.set(this.pageSize()); });
+        effect(() => {
+            this._searchQuery();
+            this._filters();
+            this._page.set(1);
+        });
+    }
+    _displayColumns = computed(() => this.columns().filter(c => !this._hiddenColumns().has(c.key)), ...(ngDevMode ? [{ debugName: "_displayColumns" }] : []));
+    _colCount = computed(() => {
+        let count = this._displayColumns().length;
+        if (this.selectable())
+            count++;
+        if (this.expandable())
+            count++;
+        return count;
+    }, ...(ngDevMode ? [{ debugName: "_colCount" }] : []));
+    _filteredRows = computed(() => {
+        let data = this.rows();
+        const key = this._sortKey();
+        const dir = this._sortDir();
+        if (key && dir) {
+            data = [...data].sort((a, b) => {
+                const aVal = a[key];
+                const bVal = b[key];
+                const direction = dir === 'asc' ? 1 : -1;
+                if (aVal < bVal)
+                    return -1 * direction;
+                if (aVal > bVal)
+                    return 1 * direction;
+                return 0;
+            });
+        }
+        const query = this._searchQuery().toLowerCase().trim();
+        if (query) {
+            data = data.filter(row => Object.values(row).some(val => String(val).toLowerCase().includes(query)));
+        }
+        const filters = this._filters();
+        for (const [fk, fv] of Object.entries(filters)) {
+            if (fv)
+                data = data.filter(row => String(row[fk]) === fv);
+        }
+        return data;
+    }, ...(ngDevMode ? [{ debugName: "_filteredRows" }] : []));
+    _displayRows = computed(() => {
+        if (!this.pageable())
+            return this._filteredRows();
+        const total = this._filteredRows().length;
+        const size = this._pageSize();
+        if (total === 0)
+            return [];
+        const maxPage = Math.max(1, Math.ceil(total / size));
+        const page = Math.min(this._page(), maxPage);
+        const start = (page - 1) * size;
+        return this._filteredRows().slice(start, start + size);
+    }, ...(ngDevMode ? [{ debugName: "_displayRows" }] : []));
+    _totalPages = computed(() => this.pageable() ? Math.max(1, Math.ceil(this._filteredRows().length / this._pageSize())) : 1, ...(ngDevMode ? [{ debugName: "_totalPages" }] : []));
+    _pageInfo = computed(() => {
+        const total = this._filteredRows().length;
+        const page = this._page();
+        const size = this._pageSize();
+        const from = total > 0 ? (page - 1) * size + 1 : 0;
+        return { from, to: Math.min(page * size, total), total };
+    }, ...(ngDevMode ? [{ debugName: "_pageInfo" }] : []));
+    _visiblePages = computed(() => {
+        const total = this._totalPages();
+        const current = this._page();
+        const range = 5;
+        let start = Math.max(1, current - Math.floor(range / 2));
+        let end = Math.min(total, start + range - 1);
+        if (end - start + 1 < range)
+            start = Math.max(1, end - range + 1);
+        return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+    }, ...(ngDevMode ? [{ debugName: "_visiblePages" }] : []));
+    _rowMeta = computed(() => {
+        const cols = this._displayColumns();
+        const rows = this._displayRows();
+        const active = {};
+        return rows.map((row, rowIndex) => cols.map(col => {
+            const key = col.key;
+            if (active[key] !== undefined && active[key] > 1) {
+                active[key]--;
+                return { visible: false, rowspan: 0 };
+            }
+            if (active[key] !== undefined)
+                delete active[key];
+            if (col.rowSpan) {
+                const span = col.rowSpan(row, rowIndex, rows);
+                if (span > 1) {
+                    active[key] = span;
+                    return { visible: true, rowspan: span };
+                }
+                if (span === 0)
+                    return { visible: false, rowspan: 0 };
+            }
+            return { visible: true, rowspan: 1 };
+        }));
+    }, ...(ngDevMode ? [{ debugName: "_rowMeta" }] : []));
+    _skeletonCols = computed(() => this.columns().map(col => ({ shape: col.actions ? 'action' : 'bar', width: col.width })), ...(ngDevMode ? [{ debugName: "_skeletonCols" }] : []));
+    _filterCols = computed(() => this._displayColumns().filter(c => c.filterable && c.filterOptions), ...(ngDevMode ? [{ debugName: "_filterCols" }] : []));
+    _footerCols = computed(() => this._displayColumns().filter(c => c.footer), ...(ngDevMode ? [{ debugName: "_footerCols" }] : []));
+    _footerText = computed(() => this._footerCols().map(c => c.footer(this._filteredRows())).join(' · '), ...(ngDevMode ? [{ debugName: "_footerText" }] : []));
+    _sortIcon(key) {
+        if (this._sortKey() !== key || !this._sortDir())
+            return 'pi pi-sort-alt';
+        return this._sortDir() === 'asc' ? 'pi pi-sort-up' : 'pi pi-sort-down';
+    }
+    _toggleSort(key) {
+        if (this._sortKey() === key) {
+            if (this._sortDir() === 'asc')
+                this._sortDir.set('desc');
+            else if (this._sortDir() === 'desc') {
+                this._sortDir.set('');
+                this._sortKey.set('');
+            }
+            else
+                this._sortDir.set('asc');
+        }
+        else {
+            this._sortKey.set(key);
+            this._sortDir.set('asc');
+        }
+        this.sortChange.emit({ key: this._sortKey(), direction: this._sortDir() });
+    }
+    _onSearch(value) { this._searchQuery.set(value ?? ''); }
+    _setFilter(key, value) {
+        this._filters.update(f => {
+            if (!value) {
+                const { [key]: _, ...rest } = f;
+                return rest;
+            }
+            return { ...f, [key]: value };
+        });
+    }
+    _colWidth(col) { return this._columnWidths()[col.key] || col.width || 'auto'; }
+    _onResizeStart(event, key) {
+        if (!this.resizable())
+            return;
+        const th = event.target.closest('th');
+        if (!th)
+            return;
+        this._resizing = { key, startX: event.clientX, startWidth: th.offsetWidth };
+        event.preventDefault();
+    }
+    _onDocMouseMove(event) {
+        const r = this._resizing;
+        if (!r)
+            return;
+        const diff = event.clientX - r.startX;
+        this._columnWidths.update(w => ({ ...w, [r.key]: `${Math.max(50, r.startWidth + diff)}px` }));
+    }
+    _onDocMouseUp() { this._resizing = null; }
+    _onDocClick(event) {
+        const target = event.target;
+        if (this._columnToggleOpen() && !target.closest('[data-col-toggle]')) {
+            this._columnToggleOpen.set(false);
+        }
+        if (this._exportOpen() && !target.closest('[data-export-toggle]')) {
+            this._exportOpen.set(false);
+        }
+    }
+    _goToPage(page) {
+        const p = Math.max(1, Math.min(page, this._totalPages()));
+        this._page.set(p);
+        this.pageChange.emit(p);
+    }
+    _onPageSizeChange(val) {
+        this._pageSize.set(parseInt(val ?? '10', 10));
+        this._page.set(1);
+    }
+    _isSelected(row) {
+        const key = this.selectionKey();
+        if (!key)
+            return false;
+        const val = row[key];
+        return val != null && this._selectedKeys().has(val);
+    }
+    _toggleSelect(row) {
+        const key = this.selectionKey();
+        const val = key ? row[key] : null;
+        if (val == null)
+            return;
+        this._selectedKeys.update(s => {
+            const next = new Set(s);
+            if (this.selectionMode() === 'single')
+                next.clear();
+            if (next.has(val))
+                next.delete(val);
+            else
+                next.add(val);
+            return next;
+        });
+        this._emitSelection();
+    }
+    _isAllSelected() {
+        const rows = this._displayRows();
+        const key = this.selectionKey();
+        if (rows.length === 0 || !key)
+            return false;
+        return rows.every(row => { const val = row[key]; return val != null && this._selectedKeys().has(val); });
+    }
+    _toggleSelectAll() {
+        const key = this.selectionKey();
+        if (!key)
+            return;
+        if (this._isAllSelected()) {
+            this._selectedKeys.set(new Set());
+        }
+        else {
+            const keys = new Set();
+            for (const row of this._displayRows()) {
+                const val = row[key];
+                if (val != null)
+                    keys.add(val);
+            }
+            this._selectedKeys.set(keys);
+        }
+        this._emitSelection();
+    }
+    _emitSelection() {
+        const selected = this._selectedKeys();
+        const key = this.selectionKey();
+        if (!key) {
+            this.selectedRows.emit([]);
+            return;
+        }
+        this.selectedRows.emit(this.rows().filter(row => { const val = row[key]; return val != null && selected.has(val); }));
+    }
+    _isColumnVisible(k) { return !this._hiddenColumns().has(k); }
+    _toggleColumn(k) { this._hiddenColumns.update(h => { const n = new Set(h); if (n.has(k))
+        n.delete(k);
+    else
+        n.add(k); return n; }); }
+    _isExpanded(index) { return this._expandedKeys().has(index); }
+    _toggleExpand(index) { this._expandedKeys.update(s => { const n = new Set(s); if (n.has(index))
+        n.delete(index);
+    else
+        n.add(index); return n; }); }
+    _cellText(row, col) {
+        return col.cell ? col.cell(row) : String(row[col.key] ?? '');
+    }
+    _cellLabel(row, col) {
+        const text = this._cellText(row, col);
+        if (col.maxChars && text.length > col.maxChars)
+            return text.slice(0, col.maxChars) + '…';
+        return text;
+    }
+    async _exportExcel() {
+        const ExcelJS = (await import('exceljs')).default;
+        const workbook = new ExcelJS.Workbook();
+        const worksheet = workbook.addWorksheet('Sheet1');
+        const cols = this._displayColumns();
+        const rows = this._filteredRows();
+        const headerRow = worksheet.addRow(cols.map(c => c.header));
+        headerRow.font = { bold: true, color: { argb: 'FFFFFFFF' } };
+        headerRow.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF0D4B7C' } };
+        headerRow.alignment = { horizontal: 'center' };
+        for (const row of rows) {
+            worksheet.addRow(cols.map(c => this._cellText(row, c)));
+        }
+        cols.forEach((_, i) => { worksheet.getColumn(i + 1).width = 22; });
+        const buffer = await workbook.xlsx.writeBuffer();
+        const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `export-${new Date().toISOString().slice(0, 10)}.xlsx`;
+        a.click();
+        setTimeout(() => URL.revokeObjectURL(url), 2000);
+    }
+    async _exportPdf() {
+        const { default: jsPDF } = await import('jspdf');
+        const doc = new jsPDF({ orientation: 'landscape', unit: 'pt' });
+        const cols = this._displayColumns();
+        const rows = this._filteredRows();
+        const pageW = doc.internal.pageSize.getWidth();
+        const margin = 30;
+        const rh = 18;
+        const colW = (pageW - margin * 2) / cols.length;
+        const maxY = doc.internal.pageSize.getHeight() - margin;
+        let y = margin;
+        const drawHeader = () => {
+            doc.setFillColor(13, 75, 124);
+            doc.rect(margin, y, pageW - margin * 2, rh, 'F');
+            doc.setTextColor(255, 255, 255);
+            doc.setFontSize(9);
+            doc.setFont('Helvetica', 'bold');
+            cols.forEach((c, i) => {
+                doc.text(c.header, margin + i * colW + 3, y + 12);
+            });
+            y += rh;
+        };
+        drawHeader();
+        for (const row of rows) {
+            if (y + rh > maxY) {
+                doc.addPage();
+                y = margin;
+                drawHeader();
+            }
+            if ((rows.indexOf(row) + 1) % 2 === 0) {
+                doc.setFillColor(247, 248, 250);
+                doc.rect(margin, y, pageW - margin * 2, rh, 'F');
+            }
+            doc.setFont('Helvetica', 'normal');
+            doc.setFontSize(8);
+            doc.setTextColor(50, 50, 50);
+            cols.forEach((c, ci) => {
+                doc.text(this._cellText(row, c), margin + ci * colW + 3, y + 12);
+            });
+            doc.setDrawColor(220, 220, 220);
+            doc.line(margin, y, pageW - margin, y);
+            y += rh;
+        }
+        doc.save(`export-${new Date().toISOString().slice(0, 10)}.pdf`);
+    }
+    _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"], 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,
+            args: [{ selector: 'app-table', imports: [SearchInputComponent, DropDownComponent, TableSkeletonComponent, NgTemplateOutlet, TooltipComponent], host: {
+                        '(document:mousemove)': '_onDocMouseMove($event)',
+                        '(document:mouseup)': '_onDocMouseUp()',
+                        '(document:click)': '_onDocClick($event)',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], skeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRows", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], pageable: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageable", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selectionKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionKey", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], exportable: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportable", required: false }] }], columnToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnToggle", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], selectedRows: [{ type: i0.Output, args: ["selectedRows"] }], rowDetail: [{
+                type: ContentChild,
+                args: ['rowDetail', { read: TemplateRef, static: false }]
+            }] } });
+
+class AlertComponent {
+    type = input('info', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    dismissible = input(true, ...(ngDevMode ? [{ debugName: "dismissible" }] : []));
+    showIcon = input(true, ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
+    width = input('', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    dismiss = output();
+    _visible = signal(true, ...(ngDevMode ? [{ debugName: "_visible" }] : []));
+    _isLeaving = signal(false, ...(ngDevMode ? [{ debugName: "_isLeaving" }] : []));
+    _show = computed(() => this._visible() || this._isLeaving(), ...(ngDevMode ? [{ debugName: "_show" }] : []));
+    _icon = computed(() => {
+        const icons = {
+            success: 'pi pi-check-circle',
+            warning: 'pi pi-exclamation-triangle',
+            danger: 'pi pi-times-circle',
+            info: 'pi pi-info-circle',
+        };
+        return icons[this.type()];
+    }, ...(ngDevMode ? [{ debugName: "_icon" }] : []));
+    _fallback = {
+        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)',
+    };
+    _bg = computed(() => `var(--color-${this.type()}-bg, color-mix(in srgb, ${this._fallback[this.type()]} 15%, white))`, ...(ngDevMode ? [{ debugName: "_bg" }] : []));
+    _border = computed(() => `var(--color-${this.type()}, ${this._fallback[this.type()]})`, ...(ngDevMode ? [{ debugName: "_border" }] : []));
+    _dismiss() {
+        this._isLeaving.set(true);
+        setTimeout(() => {
+            this._visible.set(false);
+            this._isLeaving.set(false);
+            this.dismiss.emit();
+        }, 200);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: AlertComponent, isStandalone: true, selector: "app-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "@if (_show()) {\n  <div\n    class=\"rz-alert\"\n    [class.rz-alert-leave]=\"_isLeaving()\"\n    [style.background-color]=\"_bg()\"\n    [style.border-color]=\"_border()\"\n    [style.transition]=\"'opacity 0.2s ease-out, margin-bottom 0.2s ease-out'\"\n    [style.width]=\"width() || 'auto'\"\n    role=\"alert\"\n  >\n    @if (showIcon()) {\n      <i class=\"rz-alert-icon\" [class]=\"_icon()\" [style.color]=\"_border()\"></i>\n    }\n    <div class=\"rz-alert-body\">\n      @if (title()) {\n        <p class=\"rz-alert-title\">{{ title() }}</p>\n      }\n      <div class=\"rz-alert-content\"><ng-content /></div>\n    </div>\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        class=\"rz-alert-close\"\n        (click)=\"_dismiss()\"\n        aria-label=\"Close\"\n      >\n        <i class=\"pi pi-times\"></i>\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:contents}.rz-alert{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem;border-radius:var(--radius-md, .5rem);border:1px solid}.rz-alert-leave{opacity:0;margin-bottom:-3rem}.rz-alert-icon{margin-top:.125rem;font-size:.875rem}.rz-alert-body{flex:1;min-width:0}.rz-alert-title{font-size:.875rem;font-weight:600;color:var(--color-text, oklch(.14 .01 260))}.rz-alert-content{font-size:.875rem;color:var(--color-text, oklch(.14 .01 260))}.rz-alert-close{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:none;background:transparent;cursor:pointer;border-radius:9999px;color:var(--color-text-muted, oklch(.48 .01 260));flex-shrink:0}.rz-alert-close:hover{opacity:.7}.rz-alert-close i{font-size:.75rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-alert', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (_show()) {\n  <div\n    class=\"rz-alert\"\n    [class.rz-alert-leave]=\"_isLeaving()\"\n    [style.background-color]=\"_bg()\"\n    [style.border-color]=\"_border()\"\n    [style.transition]=\"'opacity 0.2s ease-out, margin-bottom 0.2s ease-out'\"\n    [style.width]=\"width() || 'auto'\"\n    role=\"alert\"\n  >\n    @if (showIcon()) {\n      <i class=\"rz-alert-icon\" [class]=\"_icon()\" [style.color]=\"_border()\"></i>\n    }\n    <div class=\"rz-alert-body\">\n      @if (title()) {\n        <p class=\"rz-alert-title\">{{ title() }}</p>\n      }\n      <div class=\"rz-alert-content\"><ng-content /></div>\n    </div>\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        class=\"rz-alert-close\"\n        (click)=\"_dismiss()\"\n        aria-label=\"Close\"\n      >\n        <i class=\"pi pi-times\"></i>\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:contents}.rz-alert{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem;border-radius:var(--radius-md, .5rem);border:1px solid}.rz-alert-leave{opacity:0;margin-bottom:-3rem}.rz-alert-icon{margin-top:.125rem;font-size:.875rem}.rz-alert-body{flex:1;min-width:0}.rz-alert-title{font-size:.875rem;font-weight:600;color:var(--color-text, oklch(.14 .01 260))}.rz-alert-content{font-size:.875rem;color:var(--color-text, oklch(.14 .01 260))}.rz-alert-close{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:none;background:transparent;cursor:pointer;border-radius:9999px;color:var(--color-text-muted, oklch(.48 .01 260));flex-shrink:0}.rz-alert-close:hover{opacity:.7}.rz-alert-close i{font-size:.75rem}\n"] }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
+
+class SpinnerComponent {
+    variant = input('dual-ring', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    accentColor = input('primary', ...(ngDevMode ? [{ debugName: "accentColor" }] : []));
+    overlay = input(false, ...(ngDevMode ? [{ debugName: "overlay" }] : []));
+    text = input('', ...(ngDevMode ? [{ debugName: "text" }] : []));
+    imageUrl = input('', ...(ngDevMode ? [{ debugName: "imageUrl" }] : []));
+    _px = computed(() => {
+        const sizes = { sm: 96, md: 144, lg: 240 };
+        return sizes[this.size()] ?? 144;
+    }, ...(ngDevMode ? [{ debugName: "_px" }] : []));
+    _dims = computed(() => {
+        const px = this._px();
+        return {
+            spinner: px,
+            border: Math.max(2, Math.round(px / 6)),
+            dualOuter: px * 2,
+            dualInner: px,
+            dualCenter: Math.round(px * 0.5),
+            dot: Math.round(px * 0.45),
+            pulse: Math.round(px * 1.8),
+            barW: Math.max(3, Math.round(px * 0.2)),
+            barH: px,
+        };
+    }, ...(ngDevMode ? [{ debugName: "_dims" }] : []));
+    _color = computed(() => {
+        const c = this.accentColor();
+        if (isThemeColor(c))
+            return `var(--color-${c}, oklch(0.32 0.09 258))`;
+        return c;
+    }, ...(ngDevMode ? [{ debugName: "_color" }] : []));
+    _circleStyle = computed(() => ({
+        width: this._dims().spinner + 'px',
+        height: this._dims().spinner + 'px',
+        borderWidth: this._dims().border + 'px',
+        borderStyle: 'solid',
+        borderColor: 'var(--color-border,oklch(0.83 0.015 260))',
+        borderTopColor: this._color(),
+    }), ...(ngDevMode ? [{ debugName: "_circleStyle" }] : []));
+    _dualOuterStyle = computed(() => ({
+        width: this._dims().dualOuter + 'px',
+        height: this._dims().dualOuter + 'px',
+        borderWidth: this._dims().border + 'px',
+        borderStyle: 'solid',
+        borderColor: 'var(--color-border,oklch(0.83 0.015 260))',
+        borderTopColor: this._color(),
+    }), ...(ngDevMode ? [{ debugName: "_dualOuterStyle" }] : []));
+    _dualInnerStyle = computed(() => ({
+        width: this._dims().dualInner + 'px',
+        height: this._dims().dualInner + 'px',
+        borderWidth: Math.max(2, this._dims().border - 1) + 'px',
+        borderStyle: 'solid',
+        borderColor: 'var(--color-border-light,oklch(0.91 0.01 260))',
+        borderTopColor: this._color(),
+    }), ...(ngDevMode ? [{ debugName: "_dualInnerStyle" }] : []));
+    _imageStyle = computed(() => ({
+        width: this._dims().dualCenter + 'px',
+        height: this._dims().dualCenter + 'px',
+    }), ...(ngDevMode ? [{ debugName: "_imageStyle" }] : []));
+    _dotStyle = computed(() => ({
+        width: this._dims().dot + 'px',
+        height: this._dims().dot + 'px',
+        backgroundColor: this._color(),
+    }), ...(ngDevMode ? [{ debugName: "_dotStyle" }] : []));
+    _pulseStyle = computed(() => ({
+        width: this._dims().pulse + 'px',
+        height: this._dims().pulse + 'px',
+        backgroundColor: this._color(),
+    }), ...(ngDevMode ? [{ debugName: "_pulseStyle" }] : []));
+    _barStyle = computed(() => ({
+        width: this._dims().barW + 'px',
+        height: this._dims().barH + 'px',
+        backgroundColor: this._color(),
+    }), ...(ngDevMode ? [{ debugName: "_barStyle" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SpinnerComponent, isStandalone: true, selector: "app-spinner", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"rz-spinner\"\n  [class.rz-spinner-overlay]=\"overlay()\"\n  [style.background-color]=\"overlay() ? 'var(--color-backdrop,oklch(0 0 0/0.3))' : 'transparent'\"\n>\n  @switch (variant()) {\n    @case ('circle') {\n      <div class=\"rz-sp-circle\" [style]=\"_circleStyle()\"></div>\n    }\n    @case ('dual-ring') {\n      <div class=\"rz-sp-dual\">\n        <div class=\"rz-sp-dual-outer\" [style]=\"_dualOuterStyle()\"></div>\n        <div class=\"rz-sp-dual-inner\" [style]=\"_dualInnerStyle()\"></div>\n        @if (imageUrl()) {\n          <div class=\"rz-sp-dual-center\">\n            <img [src]=\"imageUrl()\" [style]=\"_imageStyle()\" alt=\"\" />\n          </div>\n        }\n      </div>\n    }\n    @case ('dots') {\n      <div class=\"rz-sp-dots\">\n        @for (dot of [0,1,2]; track dot) {\n          <div class=\"rz-sp-dot\" [style]=\"_dotStyle()\" [style.animationDelay]=\"dot * 0.15 + 's'\"></div>\n        }\n      </div>\n    }\n    @case ('pulse') {\n      <div class=\"rz-sp-pulse\" [style]=\"_pulseStyle()\"></div>\n    }\n    @case ('bars') {\n      <div class=\"rz-sp-bars\">\n        @for (bar of [0,1,2,3,4]; track bar) {\n          <div class=\"rz-sp-bar\" [style]=\"_barStyle()\" [style.animationDelay]=\"bar * 0.1 + 's'\"></div>\n        }\n      </div>\n    }\n  }\n\n  @if (text()) {\n    <p class=\"rz-sp-text\" [class.rz-sp-text-inverse]=\"overlay()\">{{ text() }}</p>\n  }\n</div>\n", styles: [":host{display:contents}.rz-spinner{display:inline-flex;flex-direction:column;align-items:center;justify-content:center}.rz-spinner-overlay{display:flex;position:fixed;inset:0;z-index:50}.rz-sp-circle{border-radius:50%;border-style:solid;animation:rz-spin .8s linear infinite}.rz-sp-dual{position:relative;display:flex;align-items:center;justify-content:center}.rz-sp-dual-outer{border-radius:50%;border-style:solid;animation:rz-spin .8s linear infinite}.rz-sp-dual-inner{position:absolute;border-radius:50%;border-style:solid;animation:rz-spin-reverse 1.5s linear infinite}.rz-sp-dual-center{position:absolute;display:flex;align-items:center;justify-content:center}.rz-sp-dots{display:flex;align-items:center;gap:.375rem}.rz-sp-dot{border-radius:50%;animation:rz-dot-bounce .6s ease-in-out infinite alternate}.rz-sp-pulse{border-radius:50%;animation:rz-pulse-ring 1.5s ease-in-out infinite}.rz-sp-bars{display:flex;align-items:flex-end;gap:3px}.rz-sp-bar{border-radius:.125rem;animation:rz-bar-wave .8s ease-in-out infinite}.rz-sp-text{margin-top:.5rem;font-size:.75rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-sp-text-inverse{color:#fff}@keyframes rz-spin{to{transform:rotate(360deg)}}@keyframes rz-spin-reverse{to{transform:rotate(-360deg)}}@keyframes rz-dot-bounce{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes rz-pulse-ring{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:1}}@keyframes rz-bar-wave{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-spinner', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"rz-spinner\"\n  [class.rz-spinner-overlay]=\"overlay()\"\n  [style.background-color]=\"overlay() ? 'var(--color-backdrop,oklch(0 0 0/0.3))' : 'transparent'\"\n>\n  @switch (variant()) {\n    @case ('circle') {\n      <div class=\"rz-sp-circle\" [style]=\"_circleStyle()\"></div>\n    }\n    @case ('dual-ring') {\n      <div class=\"rz-sp-dual\">\n        <div class=\"rz-sp-dual-outer\" [style]=\"_dualOuterStyle()\"></div>\n        <div class=\"rz-sp-dual-inner\" [style]=\"_dualInnerStyle()\"></div>\n        @if (imageUrl()) {\n          <div class=\"rz-sp-dual-center\">\n            <img [src]=\"imageUrl()\" [style]=\"_imageStyle()\" alt=\"\" />\n          </div>\n        }\n      </div>\n    }\n    @case ('dots') {\n      <div class=\"rz-sp-dots\">\n        @for (dot of [0,1,2]; track dot) {\n          <div class=\"rz-sp-dot\" [style]=\"_dotStyle()\" [style.animationDelay]=\"dot * 0.15 + 's'\"></div>\n        }\n      </div>\n    }\n    @case ('pulse') {\n      <div class=\"rz-sp-pulse\" [style]=\"_pulseStyle()\"></div>\n    }\n    @case ('bars') {\n      <div class=\"rz-sp-bars\">\n        @for (bar of [0,1,2,3,4]; track bar) {\n          <div class=\"rz-sp-bar\" [style]=\"_barStyle()\" [style.animationDelay]=\"bar * 0.1 + 's'\"></div>\n        }\n      </div>\n    }\n  }\n\n  @if (text()) {\n    <p class=\"rz-sp-text\" [class.rz-sp-text-inverse]=\"overlay()\">{{ text() }}</p>\n  }\n</div>\n", styles: [":host{display:contents}.rz-spinner{display:inline-flex;flex-direction:column;align-items:center;justify-content:center}.rz-spinner-overlay{display:flex;position:fixed;inset:0;z-index:50}.rz-sp-circle{border-radius:50%;border-style:solid;animation:rz-spin .8s linear infinite}.rz-sp-dual{position:relative;display:flex;align-items:center;justify-content:center}.rz-sp-dual-outer{border-radius:50%;border-style:solid;animation:rz-spin .8s linear infinite}.rz-sp-dual-inner{position:absolute;border-radius:50%;border-style:solid;animation:rz-spin-reverse 1.5s linear infinite}.rz-sp-dual-center{position:absolute;display:flex;align-items:center;justify-content:center}.rz-sp-dots{display:flex;align-items:center;gap:.375rem}.rz-sp-dot{border-radius:50%;animation:rz-dot-bounce .6s ease-in-out infinite alternate}.rz-sp-pulse{border-radius:50%;animation:rz-pulse-ring 1.5s ease-in-out infinite}.rz-sp-bars{display:flex;align-items:flex-end;gap:3px}.rz-sp-bar{border-radius:.125rem;animation:rz-bar-wave .8s ease-in-out infinite}.rz-sp-text{margin-top:.5rem;font-size:.75rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-sp-text-inverse{color:#fff}@keyframes rz-spin{to{transform:rotate(360deg)}}@keyframes rz-spin-reverse{to{transform:rotate(-360deg)}}@keyframes rz-dot-bounce{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes rz-pulse-ring{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:1}}@keyframes rz-bar-wave{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], accentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentColor", required: false }] }], overlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlay", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }] } });
+
+class ToastService {
+    _toasts = signal([], ...(ngDevMode ? [{ debugName: "_toasts" }] : []));
+    _counter = 0;
+    toasts = this._toasts.asReadonly();
+    show(type, message, config) {
+        const id = ++this._counter;
+        const toast = {
+            id,
+            type,
+            message,
+            title: config?.title,
+            duration: config?.duration,
+        };
+        this._toasts.update(list => [...list, toast]);
+        const ms = config?.duration ?? 4000;
+        if (ms > 0) {
+            setTimeout(() => this.remove(id), ms);
+        }
+    }
+    success(message, config) {
+        this.show('success', message, config);
+    }
+    error(message, config) {
+        this.show('error', message, config);
+    }
+    warning(message, config) {
+        this.show('warning', message, config);
+    }
+    info(message, config) {
+        this.show('info', message, config);
+    }
+    remove(id) {
+        this._toasts.update(list => list.filter(t => t.id !== id));
+    }
+    clear() {
+        this._toasts.set([]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class ToastComponent {
+    position = input('top-right', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    maxVisible = input(5, ...(ngDevMode ? [{ debugName: "maxVisible" }] : []));
+    _toastService = inject(ToastService);
+    _toasts = computed(() => this._toastService.toasts().slice(-this.maxVisible()), ...(ngDevMode ? [{ debugName: "_toasts" }] : []));
+    _fallback = {
+        success: 'oklch(0.55 0.18 145)',
+        error: 'oklch(0.55 0.22 25)',
+        warning: 'oklch(0.68 0.18 75)',
+        info: 'oklch(0.55 0.15 235)',
+    };
+    _iconMap = {
+        success: 'pi pi-check-circle',
+        error: 'pi pi-times-circle',
+        warning: 'pi pi-exclamation-triangle',
+        info: 'pi pi-info-circle',
+    };
+    _themeKey(type) {
+        return type === 'error' ? 'danger' : type;
+    }
+    _getBg(type) {
+        return `var(--color-${this._themeKey(type)}-bg, color-mix(in srgb, ${this._fallback[type]} 15%, white))`;
+    }
+    _getIcon(type) {
+        return this._iconMap[type];
+    }
+    _getBorder(type) {
+        return `var(--color-${this._themeKey(type)}, ${this._fallback[type]})`;
+    }
+    _remove(id) {
+        this._toastService.remove(id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ToastComponent, isStandalone: true, selector: "app-toast", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, maxVisible: { classPropertyName: "maxVisible", publicName: "maxVisible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"rz-toast-container\"\n  [attr.data-position]=\"position()\"\n>\n  @for (toast of _toasts(); track toast.id) {\n    <div\n      class=\"rz-toast-item rz-toast-enter\"\n      [style.background-color]=\"_getBg(toast.type)\"\n      [style.border-color]=\"_getBorder(toast.type)\"\n    >\n      <i class=\"rz-toast-icon\" [class]=\"_getIcon(toast.type)\" [style.color]=\"_getBorder(toast.type)\"></i>\n      <div class=\"rz-toast-body\">\n        @if (toast.title) {\n          <p class=\"rz-toast-title\">{{ toast.title }}</p>\n        }\n        <p class=\"rz-toast-msg\">{{ toast.message }}</p>\n      </div>\n      <button\n        type=\"button\"\n        class=\"rz-toast-close\"\n        (click)=\"_remove(toast.id)\"\n        aria-label=\"Close\"\n      >\n        <i class=\"pi pi-times\"></i>\n      </button>\n    </div>\n  }\n</div>\n", styles: [":host{display:contents}.rz-toast-container{position:fixed;z-index:9999;display:flex;flex-direction:column;gap:.5rem;min-width:18rem;max-width:min(30rem,calc(100vw - 2rem));width:max-content;pointer-events:none}.rz-toast-container[data-position=top-right]{top:1rem;right:1rem}.rz-toast-container[data-position=top-left]{top:1rem;left:1rem}.rz-toast-container[data-position=bottom-right]{bottom:1rem;right:1rem}.rz-toast-container[data-position=bottom-left]{bottom:1rem;left:1rem}.rz-toast-item{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem;border-radius:var(--radius-md, .5rem);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;border:1px solid;pointer-events:auto}.rz-toast-icon{margin-top:.125rem;font-size:.875rem;flex-shrink:0}.rz-toast-body{flex:1;min-width:0}.rz-toast-title{font-size:.75rem;font-weight:600;color:var(--color-text, oklch(.14 .01 260))}.rz-toast-msg{font-size:.875rem;color:var(--color-text, oklch(.14 .01 260))}.rz-toast-close{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;border:none;background:transparent;cursor:pointer;border-radius:9999px;flex-shrink:0;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-toast-close:hover{opacity:.7}.rz-toast-close i{font-size:.75rem}.rz-toast-enter{animation:rz-toast-slide-in .3s ease-out}@keyframes rz-toast-slide-in{0%{opacity:0;translate:0 -8px}to{opacity:1;translate:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-toast', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"rz-toast-container\"\n  [attr.data-position]=\"position()\"\n>\n  @for (toast of _toasts(); track toast.id) {\n    <div\n      class=\"rz-toast-item rz-toast-enter\"\n      [style.background-color]=\"_getBg(toast.type)\"\n      [style.border-color]=\"_getBorder(toast.type)\"\n    >\n      <i class=\"rz-toast-icon\" [class]=\"_getIcon(toast.type)\" [style.color]=\"_getBorder(toast.type)\"></i>\n      <div class=\"rz-toast-body\">\n        @if (toast.title) {\n          <p class=\"rz-toast-title\">{{ toast.title }}</p>\n        }\n        <p class=\"rz-toast-msg\">{{ toast.message }}</p>\n      </div>\n      <button\n        type=\"button\"\n        class=\"rz-toast-close\"\n        (click)=\"_remove(toast.id)\"\n        aria-label=\"Close\"\n      >\n        <i class=\"pi pi-times\"></i>\n      </button>\n    </div>\n  }\n</div>\n", styles: [":host{display:contents}.rz-toast-container{position:fixed;z-index:9999;display:flex;flex-direction:column;gap:.5rem;min-width:18rem;max-width:min(30rem,calc(100vw - 2rem));width:max-content;pointer-events:none}.rz-toast-container[data-position=top-right]{top:1rem;right:1rem}.rz-toast-container[data-position=top-left]{top:1rem;left:1rem}.rz-toast-container[data-position=bottom-right]{bottom:1rem;right:1rem}.rz-toast-container[data-position=bottom-left]{bottom:1rem;left:1rem}.rz-toast-item{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem;border-radius:var(--radius-md, .5rem);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;border:1px solid;pointer-events:auto}.rz-toast-icon{margin-top:.125rem;font-size:.875rem;flex-shrink:0}.rz-toast-body{flex:1;min-width:0}.rz-toast-title{font-size:.75rem;font-weight:600;color:var(--color-text, oklch(.14 .01 260))}.rz-toast-msg{font-size:.875rem;color:var(--color-text, oklch(.14 .01 260))}.rz-toast-close{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;border:none;background:transparent;cursor:pointer;border-radius:9999px;flex-shrink:0;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-toast-close:hover{opacity:.7}.rz-toast-close i{font-size:.75rem}.rz-toast-enter{animation:rz-toast-slide-in .3s ease-out}@keyframes rz-toast-slide-in{0%{opacity:0;translate:0 -8px}to{opacity:1;translate:0}}\n"] }]
+        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], maxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisible", required: false }] }] } });
+
+class AccordionPanelComponent {
+    _accordion = inject(AccordionComponent, { optional: true });
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : []));
+    _isClosing = signal(false, ...(ngDevMode ? [{ debugName: "_isClosing" }] : []));
+    _visible = computed(() => this._isOpen() || this._isClosing(), ...(ngDevMode ? [{ debugName: "_visible" }] : []));
+    _open() {
+        if (this.disabled() || this._isOpen())
+            return;
+        if (!this._accordion?.multi()) {
+            this._accordion?.panels().forEach(p => { if (p !== this)
+                p._close(); });
+        }
+        this._isOpen.set(true);
+        this._isClosing.set(false);
+        this.expanded.set(true);
+    }
+    _close() {
+        if (!this._isOpen() || this._isClosing())
+            return;
+        this._isClosing.set(true);
+        this._isOpen.set(false);
+        setTimeout(() => {
+            this._isClosing.set(false);
+            this.expanded.set(false);
+        }, 150);
+    }
+    _toggle() {
+        if (this._isOpen())
+            this._close();
+        else
+            this._open();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: AccordionPanelComponent, isStandalone: true, selector: "app-accordion-panel", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { properties: { "class": "'rz-acc-panel'" } }, ngImport: i0, template: "<button\n  type=\"button\"\n  (click)=\"_toggle()\"\n  [disabled]=\"disabled()\"\n  class=\"rz-acc-trigger\"\n>\n  <span>{{ title() }}</span>\n  <i class=\"pi pi-chevron-down rz-acc-chevron\"\n    [style.transform]=\"_isOpen() ? 'rotate(180deg)' : 'rotate(0deg)'\"\n  ></i>\n</button>\n@if (_visible()) {\n  <div\n    class=\"rz-acc-body\"\n    [class.rz-acc-enter]=\"_isOpen() && !_isClosing()\"\n    [class.rz-acc-leave]=\"_isClosing()\"\n  >\n    <div class=\"rz-acc-content\">\n      <ng-content />\n    </div>\n  </div>\n}\n", styles: [":host{display:block}.rz-acc-panel{border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:var(--radius-md, .5rem);overflow:hidden}.rz-acc-trigger{display:inline-flex;align-items:center;justify-content:space-between;width:100%;padding:.625rem .75rem;font-size:.875rem;font-weight:500;border:none;background:transparent;cursor:pointer;color:var(--color-text, oklch(.14 .01 260));transition:background-color .15s}.rz-acc-trigger:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-acc-trigger:disabled{cursor:not-allowed;opacity:.5}.rz-acc-chevron{font-size:.75rem;transition:transform .2s}.rz-acc-body{overflow:hidden;border-top:1px solid var(--color-border-light, oklch(.91 .01 260))}.rz-acc-content{padding:.625rem .75rem;font-size:.875rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-acc-enter{animation:rz-acc-slide-in .2s ease-out}.rz-acc-leave{animation:rz-acc-slide-out .15s ease-in forwards}@keyframes rz-acc-slide-in{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}@keyframes rz-acc-slide-out{0%{opacity:1;max-height:500px}to{opacity:0;max-height:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-accordion-panel', imports: [], host: {
+                        '[class]': "'rz-acc-panel'",
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  type=\"button\"\n  (click)=\"_toggle()\"\n  [disabled]=\"disabled()\"\n  class=\"rz-acc-trigger\"\n>\n  <span>{{ title() }}</span>\n  <i class=\"pi pi-chevron-down rz-acc-chevron\"\n    [style.transform]=\"_isOpen() ? 'rotate(180deg)' : 'rotate(0deg)'\"\n  ></i>\n</button>\n@if (_visible()) {\n  <div\n    class=\"rz-acc-body\"\n    [class.rz-acc-enter]=\"_isOpen() && !_isClosing()\"\n    [class.rz-acc-leave]=\"_isClosing()\"\n  >\n    <div class=\"rz-acc-content\">\n      <ng-content />\n    </div>\n  </div>\n}\n", styles: [":host{display:block}.rz-acc-panel{border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:var(--radius-md, .5rem);overflow:hidden}.rz-acc-trigger{display:inline-flex;align-items:center;justify-content:space-between;width:100%;padding:.625rem .75rem;font-size:.875rem;font-weight:500;border:none;background:transparent;cursor:pointer;color:var(--color-text, oklch(.14 .01 260));transition:background-color .15s}.rz-acc-trigger:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-acc-trigger:disabled{cursor:not-allowed;opacity:.5}.rz-acc-chevron{font-size:.75rem;transition:transform .2s}.rz-acc-body{overflow:hidden;border-top:1px solid var(--color-border-light, oklch(.91 .01 260))}.rz-acc-content{padding:.625rem .75rem;font-size:.875rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-acc-enter{animation:rz-acc-slide-in .2s ease-out}.rz-acc-leave{animation:rz-acc-slide-out .15s ease-in forwards}@keyframes rz-acc-slide-in{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}@keyframes rz-acc-slide-out{0%{opacity:1;max-height:500px}to{opacity:0;max-height:0}}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }] } });
+
+class AccordionComponent {
+    multi = input(false, ...(ngDevMode ? [{ debugName: "multi" }] : []));
+    panels = contentChildren(AccordionPanelComponent, ...(ngDevMode ? [{ debugName: "panels" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: AccordionComponent, isStandalone: true, selector: "app-accordion", inputs: { multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "'flex'", "style.flex-direction": "'column'" } }, queries: [{ propertyName: "panels", predicate: AccordionPanelComponent, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-accordion',
+                    imports: [],
+                    template: '<ng-content />',
+                    host: { '[style.display]': "'flex'", '[style.flex-direction]': "'column'" },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AccordionPanelComponent), { isSignal: true }] }] } });
+
+class NavComponent {
+    _router = inject(Router);
+    _routerSub;
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    brandText = input('Brand', ...(ngDevMode ? [{ debugName: "brandText" }] : []));
+    brandIcon = input('pi pi-box', ...(ngDevMode ? [{ debugName: "brandIcon" }] : []));
+    fixed = input(true, ...(ngDevMode ? [{ debugName: "fixed" }] : []));
+    logout = output();
+    _mobileOpen = signal(false, ...(ngDevMode ? [{ debugName: "_mobileOpen" }] : []));
+    _openDropdown = signal(null, ...(ngDevMode ? [{ debugName: "_openDropdown" }] : []));
+    _currentUrl = signal(this._router.url, ...(ngDevMode ? [{ debugName: "_currentUrl" }] : []));
+    constructor() {
+        this._routerSub = this._router.events
+            .pipe(filter(e => e instanceof NavigationEnd))
+            .subscribe(() => this._currentUrl.set(this._router.url));
+    }
+    _isActive(segment) {
+        return this._currentUrl().includes(segment);
+    }
+    _toggleMobile() {
+        this._mobileOpen.update(v => !v);
+        if (!this._mobileOpen())
+            this._openDropdown.set(null);
+    }
+    _toggleDropdown(name) {
+        this._openDropdown.update(v => v === name ? null : name);
+    }
+    _navigate(route) {
+        this._router.navigate([route]);
+        this._mobileOpen.set(false);
+        this._openDropdown.set(null);
+    }
+    _onDocClick() {
+        this._openDropdown.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: NavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: NavComponent, isStandalone: true, selector: "app-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, brandText: { classPropertyName: "brandText", publicName: "brandText", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { logout: "logout" }, host: { listeners: { "document:click": "_onDocClick()" } }, ngImport: i0, template: "<nav\n  class=\"rz-nav\"\n  [class.rz-nav-fixed]=\"fixed()\"\n>\n  <div class=\"rz-nav-brand\">\n    <i [class]=\"brandIcon()\" class=\"rz-nav-brand-icon\"></i>\n    <span class=\"rz-nav-brand-text\">{{ brandText() }}</span>\n  </div>\n\n  <button\n    type=\"button\"\n    (click)=\"_toggleMobile()\"\n    class=\"rz-nav-mobile-btn\"\n    [style.color]=\"'inherit'\"\n  >\n    <i class=\"pi rz-nav-mobile-icon\" [class.pi-bars]=\"!_mobileOpen()\" [class.pi-times]=\"_mobileOpen()\"></i>\n  </button>\n\n  <!-- Desktop -->\n  <div class=\"rz-nav-desktop\">\n    @for (item of items(); track item.id) {\n      <div class=\"rz-nav-desk-item-wrap\" (click)=\"$event.stopPropagation()\">\n        <button\n          type=\"button\"\n          (click)=\"item.children ? _toggleDropdown(item.id) : _navigate(item.route || '')\"\n          class=\"rz-nav-desk-item\"\n          [style.color]=\"'inherit'\"\n          [style.background-color]=\"_isActive(item.id) || _openDropdown() === item.id ? 'rgba(255,255,255,0.15)' : 'transparent'\"\n        >\n          @if (item.icon) { <i [class]=\"'pi ' + item.icon\" class=\"rz-nav-desk-item-icon\"></i> }\n          <span>{{ item.label }}</span>\n          @if (item.children) {\n            <i class=\"pi pi-chevron-down rz-nav-desk-item-chevron\"\n              [style.transform]=\"_openDropdown() === item.id ? 'rotate(180deg)' : ''\"\n            ></i>\n          }\n        </button>\n\n        @if (item.children && _openDropdown() === item.id) {\n          <div\n            class=\"rz-nav-desk-dropdown\"\n            animate.enter=\"nav-dd-in\"\n            animate.leave=\"nav-dd-out\"\n          >\n            @for (child of item.children; track child.id) {\n              <button\n                type=\"button\"\n                (click)=\"_navigate(child.route || '')\"\n                class=\"rz-nav-desk-dd-item\"\n                [style.color]=\"_isActive(child.id) ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text,oklch(0.14 0.01 260))'\"\n                [style.background-color]=\"_isActive(child.id) ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n              >\n                @if (child.icon) { <i [class]=\"'pi ' + child.icon\" class=\"rz-nav-desk-dd-item-icon\"></i> }\n                <span>{{ child.label }}</span>\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Mobile -->\n  <div\n    class=\"rz-nav-mob-panel\"\n    [style.max-height]=\"_mobileOpen() ? 'calc(100vh - 64px)' : '0'\"\n    [style.overflow]=\"_mobileOpen() ? 'auto' : 'hidden'\"\n    [style.opacity]=\"_mobileOpen() ? '1' : '0'\"\n    style=\"transition: max-height 0.3s ease, opacity 0.2s ease\"\n  >\n    @for (item of items(); track item.id) {\n      <button\n        type=\"button\"\n        (click)=\"item.children ? _toggleDropdown(item.id) : _navigate(item.route || '')\"\n        class=\"rz-nav-mob-item\"\n        [style.color]=\"'inherit'\"\n        [style.background-color]=\"_isActive(item.id) ? 'rgba(255,255,255,0.15)' : 'transparent'\"\n      >\n        @if (item.icon) { <i [class]=\"'pi ' + item.icon\" class=\"rz-nav-mob-item-icon\"></i> }\n        <span class=\"rz-nav-mob-item-label\">{{ item.label }}</span>\n        @if (item.children) {\n          <i class=\"pi pi-chevron-down rz-nav-mob-item-chevron\"\n            [style.transform]=\"_openDropdown() === item.id ? 'rotate(180deg)' : ''\"\n          ></i>\n        }\n      </button>\n\n      @if (item.children && _openDropdown() === item.id) {\n        <div class=\"rz-nav-mob-children\"\n          animate.enter=\"nav-mob-in\"\n          animate.leave=\"nav-mob-out\"\n        >\n          @for (child of item.children; track child.id) {\n            <button\n              type=\"button\"\n              (click)=\"_navigate(child.route || '')\"\n              class=\"rz-nav-mob-child\"\n              [style.color]=\"'rgba(255,255,255,0.85)'\"\n              [style.background-color]=\"_isActive(child.id) ? 'rgba(255,255,255,0.15)' : 'transparent'\"\n            >\n              @if (child.icon) { <i [class]=\"'pi ' + child.icon\" class=\"rz-nav-mob-child-icon\"></i> }\n              <span>{{ child.label }}</span>\n            </button>\n          }\n        </div>\n      }\n    }\n  </div>\n\n  <button\n    type=\"button\"\n    (click)=\"logout.emit()\"\n    class=\"rz-nav-logout\"\n    [style.color]=\"'inherit'\"\n    [style.border-color]=\"'rgba(255,255,255,0.3)'\"\n  >\n    <i class=\"pi pi-sign-out rz-nav-logout-icon\"></i>\n    <span class=\"rz-nav-logout-text\">Logout</span>\n  </button>\n</nav>\n", styles: [":host{display:contents}.rz-nav{height:4rem;z-index:50;display:flex;align-items:center;padding:0 1.25rem;gap:.75rem;background-color:var(--color-primary, oklch(.32 .09 258));color:var(--color-primary-inverse, oklch(.99 0 0))}.rz-nav-fixed{position:fixed;top:0;left:0;right:0}.rz-nav:not(.rz-nav-fixed){position:relative;border-radius:.5rem}.rz-nav-brand{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.rz-nav-brand-icon{font-size:1.25rem}.rz-nav-brand-text{font-size:.875rem;font-weight:700;display:none}@media(min-width:640px){.rz-nav-brand-text{display:inline}}.rz-nav-mobile-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:transparent;cursor:pointer;border-radius:.25rem}@media(min-width:1024px){.rz-nav-mobile-btn{display:none}}.rz-nav-mobile-icon{font-size:1.125rem}.rz-nav-desktop{flex:1;display:none;align-items:center;justify-content:center;gap:.25rem}@media(min-width:1024px){.rz-nav-desktop{display:flex}}.rz-nav-desk-item-wrap{position:relative}.rz-nav-desk-item{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .75rem;border-radius:.5rem;font-size:.875rem;font-weight:500;border:none;cursor:pointer;white-space:nowrap}.rz-nav-desk-item-icon{font-size:.875rem}.rz-nav-desk-item-chevron{font-size:.625rem;transition:transform .2s}.rz-nav-desk-dropdown{position:absolute;top:100%;right:0;margin-top:.25rem;min-width:180px;display:flex;flex-direction:column;gap:.125rem;padding:.5rem;border-radius:.75rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;z-index:50;background-color:var(--color-surface, oklch(.99 0 0));border:1px solid var(--color-border-light, oklch(.91 .01 260))}.rz-nav-desk-dd-item{width:100%;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:.5rem;font-size:.875rem;font-weight:500;border:none;cursor:pointer;white-space:nowrap;transition:background-color .15s}.rz-nav-desk-dd-item-icon{font-size:.75rem}.rz-nav-mob-panel{position:fixed;left:0;right:0;top:4rem;display:flex;flex-direction:column;gap:.25rem;padding:1rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;z-index:50;background-color:var(--color-primary, oklch(.32 .09 258))}@media(min-width:1024px){.rz-nav-mob-panel{display:none}}.rz-nav-mob-item{width:100%;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:.5rem;font-size:.875rem;font-weight:500;border:none;cursor:pointer;transition:background-color .15s}.rz-nav-mob-item-icon{font-size:.875rem}.rz-nav-mob-item-label{flex:1}.rz-nav-mob-item-chevron{font-size:.75rem;transition:transform .2s}.rz-nav-mob-children{display:flex;flex-direction:column;gap:.125rem;margin-top:.25rem;margin-right:1rem}.rz-nav-mob-child{width:100%;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:.5rem;font-size:.875rem;border:none;cursor:pointer;transition:background-color .15s}.rz-nav-mob-child-icon{font-size:.75rem}.rz-nav-logout{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .75rem;border-radius:.5rem;font-size:.875rem;font-weight:500;border:1px solid;white-space:nowrap;cursor:pointer;transition:background-color .15s;flex-shrink:0}.rz-nav-logout-icon{font-size:.875rem}.rz-nav-logout-text{display:none}@media(min-width:640px){.rz-nav-logout-text{display:inline}}.nav-dd-in{animation:rz-nav-dd-in .2s ease-out}.nav-dd-out{animation:rz-nav-dd-out .15s ease-in forwards}.nav-mob-in{animation:rz-nav-mob-in .2s ease-out}.nav-mob-out{animation:rz-nav-mob-out .12s ease-in forwards}@keyframes rz-nav-dd-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0}}@keyframes rz-nav-dd-out{0%{opacity:1;translate:0}to{opacity:0;translate:0 -6px}}@keyframes rz-nav-mob-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes rz-nav-mob-out{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: NavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-nav', imports: [], host: {
+                        '(document:click)': '_onDocClick()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n  class=\"rz-nav\"\n  [class.rz-nav-fixed]=\"fixed()\"\n>\n  <div class=\"rz-nav-brand\">\n    <i [class]=\"brandIcon()\" class=\"rz-nav-brand-icon\"></i>\n    <span class=\"rz-nav-brand-text\">{{ brandText() }}</span>\n  </div>\n\n  <button\n    type=\"button\"\n    (click)=\"_toggleMobile()\"\n    class=\"rz-nav-mobile-btn\"\n    [style.color]=\"'inherit'\"\n  >\n    <i class=\"pi rz-nav-mobile-icon\" [class.pi-bars]=\"!_mobileOpen()\" [class.pi-times]=\"_mobileOpen()\"></i>\n  </button>\n\n  <!-- Desktop -->\n  <div class=\"rz-nav-desktop\">\n    @for (item of items(); track item.id) {\n      <div class=\"rz-nav-desk-item-wrap\" (click)=\"$event.stopPropagation()\">\n        <button\n          type=\"button\"\n          (click)=\"item.children ? _toggleDropdown(item.id) : _navigate(item.route || '')\"\n          class=\"rz-nav-desk-item\"\n          [style.color]=\"'inherit'\"\n          [style.background-color]=\"_isActive(item.id) || _openDropdown() === item.id ? 'rgba(255,255,255,0.15)' : 'transparent'\"\n        >\n          @if (item.icon) { <i [class]=\"'pi ' + item.icon\" class=\"rz-nav-desk-item-icon\"></i> }\n          <span>{{ item.label }}</span>\n          @if (item.children) {\n            <i class=\"pi pi-chevron-down rz-nav-desk-item-chevron\"\n              [style.transform]=\"_openDropdown() === item.id ? 'rotate(180deg)' : ''\"\n            ></i>\n          }\n        </button>\n\n        @if (item.children && _openDropdown() === item.id) {\n          <div\n            class=\"rz-nav-desk-dropdown\"\n            animate.enter=\"nav-dd-in\"\n            animate.leave=\"nav-dd-out\"\n          >\n            @for (child of item.children; track child.id) {\n              <button\n                type=\"button\"\n                (click)=\"_navigate(child.route || '')\"\n                class=\"rz-nav-desk-dd-item\"\n                [style.color]=\"_isActive(child.id) ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text,oklch(0.14 0.01 260))'\"\n                [style.background-color]=\"_isActive(child.id) ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n              >\n                @if (child.icon) { <i [class]=\"'pi ' + child.icon\" class=\"rz-nav-desk-dd-item-icon\"></i> }\n                <span>{{ child.label }}</span>\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Mobile -->\n  <div\n    class=\"rz-nav-mob-panel\"\n    [style.max-height]=\"_mobileOpen() ? 'calc(100vh - 64px)' : '0'\"\n    [style.overflow]=\"_mobileOpen() ? 'auto' : 'hidden'\"\n    [style.opacity]=\"_mobileOpen() ? '1' : '0'\"\n    style=\"transition: max-height 0.3s ease, opacity 0.2s ease\"\n  >\n    @for (item of items(); track item.id) {\n      <button\n        type=\"button\"\n        (click)=\"item.children ? _toggleDropdown(item.id) : _navigate(item.route || '')\"\n        class=\"rz-nav-mob-item\"\n        [style.color]=\"'inherit'\"\n        [style.background-color]=\"_isActive(item.id) ? 'rgba(255,255,255,0.15)' : 'transparent'\"\n      >\n        @if (item.icon) { <i [class]=\"'pi ' + item.icon\" class=\"rz-nav-mob-item-icon\"></i> }\n        <span class=\"rz-nav-mob-item-label\">{{ item.label }}</span>\n        @if (item.children) {\n          <i class=\"pi pi-chevron-down rz-nav-mob-item-chevron\"\n            [style.transform]=\"_openDropdown() === item.id ? 'rotate(180deg)' : ''\"\n          ></i>\n        }\n      </button>\n\n      @if (item.children && _openDropdown() === item.id) {\n        <div class=\"rz-nav-mob-children\"\n          animate.enter=\"nav-mob-in\"\n          animate.leave=\"nav-mob-out\"\n        >\n          @for (child of item.children; track child.id) {\n            <button\n              type=\"button\"\n              (click)=\"_navigate(child.route || '')\"\n              class=\"rz-nav-mob-child\"\n              [style.color]=\"'rgba(255,255,255,0.85)'\"\n              [style.background-color]=\"_isActive(child.id) ? 'rgba(255,255,255,0.15)' : 'transparent'\"\n            >\n              @if (child.icon) { <i [class]=\"'pi ' + child.icon\" class=\"rz-nav-mob-child-icon\"></i> }\n              <span>{{ child.label }}</span>\n            </button>\n          }\n        </div>\n      }\n    }\n  </div>\n\n  <button\n    type=\"button\"\n    (click)=\"logout.emit()\"\n    class=\"rz-nav-logout\"\n    [style.color]=\"'inherit'\"\n    [style.border-color]=\"'rgba(255,255,255,0.3)'\"\n  >\n    <i class=\"pi pi-sign-out rz-nav-logout-icon\"></i>\n    <span class=\"rz-nav-logout-text\">Logout</span>\n  </button>\n</nav>\n", styles: [":host{display:contents}.rz-nav{height:4rem;z-index:50;display:flex;align-items:center;padding:0 1.25rem;gap:.75rem;background-color:var(--color-primary, oklch(.32 .09 258));color:var(--color-primary-inverse, oklch(.99 0 0))}.rz-nav-fixed{position:fixed;top:0;left:0;right:0}.rz-nav:not(.rz-nav-fixed){position:relative;border-radius:.5rem}.rz-nav-brand{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.rz-nav-brand-icon{font-size:1.25rem}.rz-nav-brand-text{font-size:.875rem;font-weight:700;display:none}@media(min-width:640px){.rz-nav-brand-text{display:inline}}.rz-nav-mobile-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:transparent;cursor:pointer;border-radius:.25rem}@media(min-width:1024px){.rz-nav-mobile-btn{display:none}}.rz-nav-mobile-icon{font-size:1.125rem}.rz-nav-desktop{flex:1;display:none;align-items:center;justify-content:center;gap:.25rem}@media(min-width:1024px){.rz-nav-desktop{display:flex}}.rz-nav-desk-item-wrap{position:relative}.rz-nav-desk-item{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .75rem;border-radius:.5rem;font-size:.875rem;font-weight:500;border:none;cursor:pointer;white-space:nowrap}.rz-nav-desk-item-icon{font-size:.875rem}.rz-nav-desk-item-chevron{font-size:.625rem;transition:transform .2s}.rz-nav-desk-dropdown{position:absolute;top:100%;right:0;margin-top:.25rem;min-width:180px;display:flex;flex-direction:column;gap:.125rem;padding:.5rem;border-radius:.75rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;z-index:50;background-color:var(--color-surface, oklch(.99 0 0));border:1px solid var(--color-border-light, oklch(.91 .01 260))}.rz-nav-desk-dd-item{width:100%;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:.5rem;font-size:.875rem;font-weight:500;border:none;cursor:pointer;white-space:nowrap;transition:background-color .15s}.rz-nav-desk-dd-item-icon{font-size:.75rem}.rz-nav-mob-panel{position:fixed;left:0;right:0;top:4rem;display:flex;flex-direction:column;gap:.25rem;padding:1rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;z-index:50;background-color:var(--color-primary, oklch(.32 .09 258))}@media(min-width:1024px){.rz-nav-mob-panel{display:none}}.rz-nav-mob-item{width:100%;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:.5rem;font-size:.875rem;font-weight:500;border:none;cursor:pointer;transition:background-color .15s}.rz-nav-mob-item-icon{font-size:.875rem}.rz-nav-mob-item-label{flex:1}.rz-nav-mob-item-chevron{font-size:.75rem;transition:transform .2s}.rz-nav-mob-children{display:flex;flex-direction:column;gap:.125rem;margin-top:.25rem;margin-right:1rem}.rz-nav-mob-child{width:100%;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:.5rem;font-size:.875rem;border:none;cursor:pointer;transition:background-color .15s}.rz-nav-mob-child-icon{font-size:.75rem}.rz-nav-logout{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .75rem;border-radius:.5rem;font-size:.875rem;font-weight:500;border:1px solid;white-space:nowrap;cursor:pointer;transition:background-color .15s;flex-shrink:0}.rz-nav-logout-icon{font-size:.875rem}.rz-nav-logout-text{display:none}@media(min-width:640px){.rz-nav-logout-text{display:inline}}.nav-dd-in{animation:rz-nav-dd-in .2s ease-out}.nav-dd-out{animation:rz-nav-dd-out .15s ease-in forwards}.nav-mob-in{animation:rz-nav-mob-in .2s ease-out}.nav-mob-out{animation:rz-nav-mob-out .12s ease-in forwards}@keyframes rz-nav-dd-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0}}@keyframes rz-nav-dd-out{0%{opacity:1;translate:0}to{opacity:0;translate:0 -6px}}@keyframes rz-nav-mob-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes rz-nav-mob-out{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], brandText: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandText", required: false }] }], brandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandIcon", required: false }] }], fixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixed", required: false }] }], logout: [{ type: i0.Output, args: ["logout"] }] } });
+
+class SidebarComponent {
+    _router = inject(Router);
+    _destroyRef = inject(DestroyRef);
+    isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    isCollapsed = input(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    title = input('Menu', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    width = input('280px', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    activeId = input(null, ...(ngDevMode ? [{ debugName: "activeId" }] : []));
+    toggleOpen = output();
+    toggleCollapse = output();
+    itemClick = output();
+    logout = output();
+    _expanded = signal(new Set(), ...(ngDevMode ? [{ debugName: "_expanded" }] : []));
+    _currentUrl = signal(this._router.url, ...(ngDevMode ? [{ debugName: "_currentUrl" }] : []));
+    _activeId = computed(() => {
+        if (this.activeId() !== null)
+            return this.activeId();
+        const url = this._currentUrl();
+        for (const item of this.items()) {
+            if (item.route && this._router.isActive(item.route, false))
+                return item.id;
+            if (item.children) {
+                for (const child of item.children) {
+                    if (child.route && this._router.isActive(child.route, false))
+                        return child.id;
+                }
+            }
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "_activeId" }] : []));
+    _asideStyle = computed(() => ({
+        width: this.isCollapsed() ? '64px' : this.width(),
+        'background-color': 'var(--color-surface,oklch(0.99 0 0))',
+    }), ...(ngDevMode ? [{ debugName: "_asideStyle" }] : []));
+    constructor() {
+        this._router.events
+            .pipe(filter(e => e instanceof NavigationEnd), takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => this._currentUrl.set(this._router.url));
+    }
+    _isActive(id) { return this._activeId() === id; }
+    _isExpanded(id) { return this._expanded().has(id); }
+    _onItemClick(item) {
+        if (item.children?.length) {
+            this._expanded.update(s => {
+                const n = new Set(s);
+                if (n.has(item.id))
+                    n.delete(item.id);
+                else
+                    n.add(item.id);
+                return n;
+            });
+        }
+        else {
+            this.itemClick.emit(item);
+        }
+    }
+    _onBackdrop() { this.toggleOpen.emit(); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SidebarComponent, isStandalone: true, selector: "app-sidebar", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleOpen: "toggleOpen", toggleCollapse: "toggleCollapse", itemClick: "itemClick", logout: "logout" }, host: { properties: { "style.display": "'contents'" } }, ngImport: i0, template: "@if (isOpen()) {\n  <div\n    class=\"sd-backdrop\"\n    animate.enter=\"sd-backdrop-in\"\n    animate.leave=\"sd-backdrop-out\"\n    (click)=\"_onBackdrop()\"\n  ></div>\n}\n\n<aside\n  class=\"sd-aside\"\n  [class.sd-open]=\"isOpen()\"\n  [class.sd-collapsed]=\"isCollapsed()\"\n  [style]=\"_asideStyle()\"\n>\n  <div class=\"rz-sd-header\"\n    [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n  >\n    <button\n      type=\"button\"\n      (click)=\"toggleCollapse.emit()\"\n      class=\"rz-sd-collapse-btn\"\n      [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n    >\n      <i class=\"pi rz-sd-collapse-icon\"\n        [class.pi-th-large]=\"!isCollapsed()\"\n        [class.pi-chevron-right]=\"isCollapsed()\"\n      ></i>\n    </button>\n\n    @if (!isCollapsed()) {\n      <span class=\"rz-sd-title\">{{ title() }}</span>\n    }\n  </div>\n\n  <nav class=\"rz-sd-nav\">\n    <ul class=\"rz-sd-menu\" [style.list-style]=\"'none'\" [style.padding]=\"'0'\">\n      @for (item of items(); track item.id) {\n        <li>\n          <button\n            type=\"button\"\n            (click)=\"_onItemClick(item)\"\n            class=\"rz-sd-item\"\n            [style.background-color]=\"_isActive(item.id) ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n            [style.color]=\"_isActive(item.id) ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text,oklch(0.14 0.01 260))'\"\n          >\n            @if (item.icon) {\n              <i [class]=\"'pi ' + item.icon\" class=\"rz-sd-item-icon\"></i>\n            }\n            @if (!isCollapsed()) {\n              <span class=\"rz-sd-item-label\">{{ item.label }}</span>\n              @if (item.children?.length) {\n                <i class=\"pi pi-chevron-down rz-sd-item-chevron\"\n                  [style.transform]=\"_isExpanded(item.id) ? 'rotate(180deg)' : ''\"\n                ></i>\n              }\n            }\n          </button>\n\n          @if (!isCollapsed() && item.children?.length && _isExpanded(item.id)) {\n            <ul class=\"rz-sd-submenu\"\n              [style.list-style]=\"'none'\" [style.padding]=\"'0'\"\n              animate.enter=\"sd-slide-in\"\n              animate.leave=\"sd-slide-out\"\n            >\n              @for (child of item.children; track child.id) {\n                <li>\n                  <button\n                    type=\"button\"\n                    (click)=\"_onItemClick(child)\"\n                    class=\"rz-sd-child\"\n                    [style.background-color]=\"_isActive(child.id) ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n                    [style.color]=\"_isActive(child.id) ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n                  >\n                    <span class=\"rz-sd-child-dot\"\n                      [style.background-color]=\"_isActive(child.id) ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n                    ></span>\n                    <span>{{ child.label }}</span>\n                  </button>\n                </li>\n              }\n            </ul>\n          }\n        </li>\n      }\n    </ul>\n  </nav>\n\n  <div class=\"rz-sd-footer\"\n    [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n  >\n    <button\n      type=\"button\"\n      (click)=\"logout.emit()\"\n      class=\"rz-sd-logout\"\n      [class.rz-sd-logout-center]=\"isCollapsed()\"\n    >\n      <i class=\"pi pi-sign-out rz-sd-item-icon\"></i>\n      @if (!isCollapsed()) {\n        <span>Logout</span>\n      }\n    </button>\n  </div>\n</aside>\n", styles: [":host{display:contents}.sd-aside{display:flex;flex-direction:column;height:100%;position:relative;transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);border:1px solid var(--color-border-light, oklch(.91 .01 260));border-radius:var(--radius-md, .5rem);overflow:hidden}@media(max-width:1023px){.sd-aside{position:fixed;top:0;right:0;z-index:50;height:100vh;box-shadow:0 8px 32px #0000001f;transform:translate(100%)}.sd-aside.sd-open{transform:translate(0)}.sd-backdrop{position:fixed;inset:0;z-index:40;background:#00000073;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}.sd-backdrop-in{animation:sdFadeIn .2s ease-out}.sd-backdrop-out{animation:sdFadeOut .15s ease-in forwards}.sd-aside.sd-collapsed{width:64px!important}.sd-slide-in{animation:sdSlideDown .2s ease-out}.sd-slide-out{animation:sdSlideUp .15s ease-in forwards}.rz-sd-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:0 1rem;height:3.5rem;border-bottom:1px solid}.rz-sd-collapse-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:transparent;cursor:pointer;border-radius:.25rem;transition:all .2s}.rz-sd-collapse-btn:hover,.rz-sd-collapse-btn:active{background:var(--color-accent, oklch(.64 .2 50))}.rz-sd-collapse-icon{font-size:.875rem}.rz-sd-collapse-icon:active{scale:.9}.rz-sd-title{font-size:.875rem;font-weight:600;color:var(--color-text, oklch(.14 .01 260))}.sd-close-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:transparent;cursor:pointer;border-radius:.25rem;transition:background-color .2s}.sd-close-btn:hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.sd-close-btn i{font-size:.875rem}.rz-sd-nav{flex:1;overflow-y:auto;padding:.75rem}.rz-sd-menu{display:flex;flex-direction:column;gap:.25rem}.rz-sd-item{width:100%;display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;border-radius:.5rem;transition:all .15s;font-size:.875rem;font-weight:500;border:none;cursor:pointer}.rz-sd-item-icon{font-size:1rem;flex-shrink:0}.rz-sd-item-label{flex:1;text-align:right}.rz-sd-item-chevron{font-size:.75rem;transition:transform .2s}.rz-sd-submenu{margin-top:.25rem;margin-right:1.5rem;display:flex;flex-direction:column;gap:.125rem}.rz-sd-child{width:100%;display:flex;align-items:center;gap:.625rem;padding:.5rem .75rem;border-radius:.5rem;transition:all .15s;font-size:.875rem;border:none;cursor:pointer}.rz-sd-child-dot{width:.375rem;height:.375rem;border-radius:9999px;flex-shrink:0}.rz-sd-footer{flex-shrink:0;padding:.75rem;border-top:1px solid;display:flex;flex-direction:column;gap:.5rem}.rz-sd-logout{width:100%;display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;border-radius:.5rem;font-size:.875rem;font-weight:500;border:none;cursor:pointer;background-color:var(--color-danger, oklch(.57 .21 25));color:#fff;transition:opacity .2s}.rz-sd-logout:hover{opacity:.85}.rz-sd-logout-center{justify-content:center}@keyframes sdFadeIn{0%{opacity:0}to{opacity:1}}@keyframes sdFadeOut{0%{opacity:1}to{opacity:0}}@keyframes sdSlideDown{0%{opacity:0;translate:0 -8px}to{opacity:1;translate:0}}@keyframes sdSlideUp{0%{opacity:1;translate:0}to{opacity:0;translate:0 -8px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-sidebar', imports: [], host: {
+                        '[style.display]': "'contents'",
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen()) {\n  <div\n    class=\"sd-backdrop\"\n    animate.enter=\"sd-backdrop-in\"\n    animate.leave=\"sd-backdrop-out\"\n    (click)=\"_onBackdrop()\"\n  ></div>\n}\n\n<aside\n  class=\"sd-aside\"\n  [class.sd-open]=\"isOpen()\"\n  [class.sd-collapsed]=\"isCollapsed()\"\n  [style]=\"_asideStyle()\"\n>\n  <div class=\"rz-sd-header\"\n    [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n  >\n    <button\n      type=\"button\"\n      (click)=\"toggleCollapse.emit()\"\n      class=\"rz-sd-collapse-btn\"\n      [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n    >\n      <i class=\"pi rz-sd-collapse-icon\"\n        [class.pi-th-large]=\"!isCollapsed()\"\n        [class.pi-chevron-right]=\"isCollapsed()\"\n      ></i>\n    </button>\n\n    @if (!isCollapsed()) {\n      <span class=\"rz-sd-title\">{{ title() }}</span>\n    }\n  </div>\n\n  <nav class=\"rz-sd-nav\">\n    <ul class=\"rz-sd-menu\" [style.list-style]=\"'none'\" [style.padding]=\"'0'\">\n      @for (item of items(); track item.id) {\n        <li>\n          <button\n            type=\"button\"\n            (click)=\"_onItemClick(item)\"\n            class=\"rz-sd-item\"\n            [style.background-color]=\"_isActive(item.id) ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n            [style.color]=\"_isActive(item.id) ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text,oklch(0.14 0.01 260))'\"\n          >\n            @if (item.icon) {\n              <i [class]=\"'pi ' + item.icon\" class=\"rz-sd-item-icon\"></i>\n            }\n            @if (!isCollapsed()) {\n              <span class=\"rz-sd-item-label\">{{ item.label }}</span>\n              @if (item.children?.length) {\n                <i class=\"pi pi-chevron-down rz-sd-item-chevron\"\n                  [style.transform]=\"_isExpanded(item.id) ? 'rotate(180deg)' : ''\"\n                ></i>\n              }\n            }\n          </button>\n\n          @if (!isCollapsed() && item.children?.length && _isExpanded(item.id)) {\n            <ul class=\"rz-sd-submenu\"\n              [style.list-style]=\"'none'\" [style.padding]=\"'0'\"\n              animate.enter=\"sd-slide-in\"\n              animate.leave=\"sd-slide-out\"\n            >\n              @for (child of item.children; track child.id) {\n                <li>\n                  <button\n                    type=\"button\"\n                    (click)=\"_onItemClick(child)\"\n                    class=\"rz-sd-child\"\n                    [style.background-color]=\"_isActive(child.id) ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n                    [style.color]=\"_isActive(child.id) ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n                  >\n                    <span class=\"rz-sd-child-dot\"\n                      [style.background-color]=\"_isActive(child.id) ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n                    ></span>\n                    <span>{{ child.label }}</span>\n                  </button>\n                </li>\n              }\n            </ul>\n          }\n        </li>\n      }\n    </ul>\n  </nav>\n\n  <div class=\"rz-sd-footer\"\n    [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n  >\n    <button\n      type=\"button\"\n      (click)=\"logout.emit()\"\n      class=\"rz-sd-logout\"\n      [class.rz-sd-logout-center]=\"isCollapsed()\"\n    >\n      <i class=\"pi pi-sign-out rz-sd-item-icon\"></i>\n      @if (!isCollapsed()) {\n        <span>Logout</span>\n      }\n    </button>\n  </div>\n</aside>\n", styles: [":host{display:contents}.sd-aside{display:flex;flex-direction:column;height:100%;position:relative;transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);border:1px solid var(--color-border-light, oklch(.91 .01 260));border-radius:var(--radius-md, .5rem);overflow:hidden}@media(max-width:1023px){.sd-aside{position:fixed;top:0;right:0;z-index:50;height:100vh;box-shadow:0 8px 32px #0000001f;transform:translate(100%)}.sd-aside.sd-open{transform:translate(0)}.sd-backdrop{position:fixed;inset:0;z-index:40;background:#00000073;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}.sd-backdrop-in{animation:sdFadeIn .2s ease-out}.sd-backdrop-out{animation:sdFadeOut .15s ease-in forwards}.sd-aside.sd-collapsed{width:64px!important}.sd-slide-in{animation:sdSlideDown .2s ease-out}.sd-slide-out{animation:sdSlideUp .15s ease-in forwards}.rz-sd-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:0 1rem;height:3.5rem;border-bottom:1px solid}.rz-sd-collapse-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:transparent;cursor:pointer;border-radius:.25rem;transition:all .2s}.rz-sd-collapse-btn:hover,.rz-sd-collapse-btn:active{background:var(--color-accent, oklch(.64 .2 50))}.rz-sd-collapse-icon{font-size:.875rem}.rz-sd-collapse-icon:active{scale:.9}.rz-sd-title{font-size:.875rem;font-weight:600;color:var(--color-text, oklch(.14 .01 260))}.sd-close-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:transparent;cursor:pointer;border-radius:.25rem;transition:background-color .2s}.sd-close-btn:hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.sd-close-btn i{font-size:.875rem}.rz-sd-nav{flex:1;overflow-y:auto;padding:.75rem}.rz-sd-menu{display:flex;flex-direction:column;gap:.25rem}.rz-sd-item{width:100%;display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;border-radius:.5rem;transition:all .15s;font-size:.875rem;font-weight:500;border:none;cursor:pointer}.rz-sd-item-icon{font-size:1rem;flex-shrink:0}.rz-sd-item-label{flex:1;text-align:right}.rz-sd-item-chevron{font-size:.75rem;transition:transform .2s}.rz-sd-submenu{margin-top:.25rem;margin-right:1.5rem;display:flex;flex-direction:column;gap:.125rem}.rz-sd-child{width:100%;display:flex;align-items:center;gap:.625rem;padding:.5rem .75rem;border-radius:.5rem;transition:all .15s;font-size:.875rem;border:none;cursor:pointer}.rz-sd-child-dot{width:.375rem;height:.375rem;border-radius:9999px;flex-shrink:0}.rz-sd-footer{flex-shrink:0;padding:.75rem;border-top:1px solid;display:flex;flex-direction:column;gap:.5rem}.rz-sd-logout{width:100%;display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;border-radius:.5rem;font-size:.875rem;font-weight:500;border:none;cursor:pointer;background-color:var(--color-danger, oklch(.57 .21 25));color:#fff;transition:opacity .2s}.rz-sd-logout:hover{opacity:.85}.rz-sd-logout-center{justify-content:center}@keyframes sdFadeIn{0%{opacity:0}to{opacity:1}}@keyframes sdFadeOut{0%{opacity:1}to{opacity:0}}@keyframes sdSlideDown{0%{opacity:0;translate:0 -8px}to{opacity:1;translate:0}}@keyframes sdSlideUp{0%{opacity:1;translate:0}to{opacity:0;translate:0 -8px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], activeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeId", required: false }] }], toggleOpen: [{ type: i0.Output, args: ["toggleOpen"] }], toggleCollapse: [{ type: i0.Output, args: ["toggleCollapse"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], logout: [{ type: i0.Output, args: ["logout"] }] } });
+
+class ConfirmDialogComponent {
+    _closeTimer = null;
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    message = input('', ...(ngDevMode ? [{ debugName: "message" }] : []));
+    config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
+    confirm = output();
+    cancel = output();
+    _title = computed(() => this.config().title ?? 'Confirm', ...(ngDevMode ? [{ debugName: "_title" }] : []));
+    _confirmText = computed(() => this.config().confirmText ?? 'Confirm', ...(ngDevMode ? [{ debugName: "_confirmText" }] : []));
+    _cancelText = computed(() => this.config().cancelText ?? 'Cancel', ...(ngDevMode ? [{ debugName: "_cancelText" }] : []));
+    _icon = computed(() => this.config().icon ?? 'pi pi-question-circle', ...(ngDevMode ? [{ debugName: "_icon" }] : []));
+    _confirmAccent = computed(() => {
+        const a = this.config().confirmAccent;
+        if (a && isThemeColor(a))
+            return a;
+        return 'primary';
+    }, ...(ngDevMode ? [{ debugName: "_confirmAccent" }] : []));
+    _closeOnBackdrop = computed(() => this.config().closeOnBackdrop ?? false, ...(ngDevMode ? [{ debugName: "_closeOnBackdrop" }] : []));
+    _closeOnEscape = computed(() => this.config().closeOnEscape ?? true, ...(ngDevMode ? [{ debugName: "_closeOnEscape" }] : []));
+    _confirmBg = computed(() => {
+        const fallbacks = { primary: 'oklch(0.32 0.09 258)', danger: 'oklch(0.55 0.22 25)', accent: 'oklch(0.64 0.2 50)', success: 'oklch(0.55 0.18 145)' };
+        const key = this._confirmAccent();
+        return `var(--color-${key}, ${fallbacks[key] ?? fallbacks['primary']})`;
+    }, ...(ngDevMode ? [{ debugName: "_confirmBg" }] : []));
+    _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : []));
+    _isClosing = signal(false, ...(ngDevMode ? [{ debugName: "_isClosing" }] : []));
+    _visible = computed(() => this._isOpen() || this._isClosing(), ...(ngDevMode ? [{ debugName: "_visible" }] : []));
+    constructor() {
+        effect(() => {
+            if (this.open() && !this._isOpen()) {
+                this._isOpen.set(true);
+                this._isClosing.set(false);
+            }
+            else if (!this.open() && this._isOpen()) {
+                this._startClose();
+            }
+        });
+    }
+    _startClose() {
+        if (this._closeTimer)
+            clearTimeout(this._closeTimer);
+        this._isClosing.set(true);
+        this._closeTimer = setTimeout(() => {
+            this._isOpen.set(false);
+            this._isClosing.set(false);
+            this._closeTimer = null;
+        }, 200);
+    }
+    ngOnDestroy() {
+        if (this._closeTimer)
+            clearTimeout(this._closeTimer);
+    }
+    _onConfirm() {
+        this.open.set(false);
+        this.confirm.emit();
+    }
+    _onCancel() {
+        this.open.set(false);
+        this.cancel.emit();
+    }
+    _onBackdropClick() {
+        if (this._closeOnBackdrop()) {
+            this._onCancel();
+        }
+    }
+    _onEscape(event) {
+        if (this._closeOnEscape() && this._visible()) {
+            event.preventDefault();
+            this._onCancel();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ConfirmDialogComponent, isStandalone: true, selector: "app-confirm-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", confirm: "confirm", cancel: "cancel" }, host: { listeners: { "document:keydown.escape": "_onEscape($event)" } }, ngImport: i0, template: "@if (_visible()) {\n  <div\n    class=\"rz-cfm-backdrop\"\n    [class.rz-cfm-backdrop-enter]=\"_isOpen() && !_isClosing()\"\n    [class.rz-cfm-backdrop-leave]=\"_isClosing()\"\n    (click)=\"_onBackdropClick()\"\n  >\n    <div\n      class=\"rz-cfm-content\"\n      [class.rz-cfm-panel-enter]=\"_isOpen() && !_isClosing()\"\n      [class.rz-cfm-panel-leave]=\"_isClosing()\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      @if (_title()) {\n        <div class=\"rz-cfm-header\">\n          <h3 class=\"rz-cfm-title\">{{ _title() }}</h3>\n        </div>\n      }\n\n      <div class=\"rz-cfm-body\">\n        @if (_icon()) {\n          <i class=\"{{ _icon() }} rz-cfm-icon\"></i>\n        }\n        <p class=\"rz-cfm-msg\">{{ message() }}</p>\n      </div>\n\n      <div class=\"rz-cfm-footer\">\n        <button\n          type=\"button\"\n          class=\"rz-cfm-btn rz-cfm-btn-cancel\"\n          (click)=\"_onCancel()\"\n        >{{ _cancelText() }}</button>\n\n        <button\n          type=\"button\"\n          class=\"rz-cfm-btn rz-cfm-btn-confirm\"\n          [style.background-color]=\"_confirmBg()\"\n          (click)=\"_onConfirm()\"\n        >{{ _confirmText() }}</button>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.rz-cfm-backdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:var(--color-backdrop, oklch(0 0 0 / .45))}.rz-cfm-backdrop-enter{animation:rz-cfm-backdrop-in .2s ease-out}.rz-cfm-backdrop-leave{animation:rz-cfm-backdrop-out .2s ease-in forwards}.rz-cfm-content{background:var(--color-surface, oklch(.99 0 0));border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:var(--radius-lg, .75rem);box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;width:100%;max-width:24rem;margin-left:1rem;margin-right:1rem;overflow:hidden;color:var(--color-text, oklch(.14 .01 260))}.rz-cfm-panel-enter{animation:rz-cfm-panel-in .2s ease-out}.rz-cfm-panel-leave{animation:rz-cfm-panel-out .18s ease-in forwards}.rz-cfm-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--color-border-light, oklch(.91 .01 260))}.rz-cfm-title{font-size:.875rem;font-weight:600}.rz-cfm-body{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1.5rem;text-align:center}.rz-cfm-icon{font-size:1.5rem;color:var(--color-primary, oklch(.32 .09 258))}.rz-cfm-msg{font-size:.875rem;color:var(--color-text, oklch(.14 .01 260))}.rz-cfm-footer{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--color-border-light, oklch(.91 .01 260))}.rz-cfm-btn{padding:.375rem .75rem;font-size:.875rem;border-radius:var(--radius-md, .5rem);cursor:pointer;transition:opacity .15s}.rz-cfm-btn-cancel{border:1px solid var(--color-border, oklch(.83 .015 260));background:transparent;color:var(--color-text, oklch(.14 .01 260))}.rz-cfm-btn-cancel:hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-cfm-btn-confirm{border:none;color:#fff}.rz-cfm-btn-confirm:hover{opacity:.9}@keyframes rz-cfm-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes rz-cfm-backdrop-out{0%{opacity:1}to{opacity:0}}@keyframes rz-cfm-panel-in{0%{opacity:0;scale:.95;translate:0 8px}to{opacity:1;scale:1;translate:0}}@keyframes rz-cfm-panel-out{0%{opacity:1;scale:1;translate:0}to{opacity:0;scale:.95;translate:0 8px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-confirm-dialog', imports: [], host: {
+                        '(document:keydown.escape)': '_onEscape($event)',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (_visible()) {\n  <div\n    class=\"rz-cfm-backdrop\"\n    [class.rz-cfm-backdrop-enter]=\"_isOpen() && !_isClosing()\"\n    [class.rz-cfm-backdrop-leave]=\"_isClosing()\"\n    (click)=\"_onBackdropClick()\"\n  >\n    <div\n      class=\"rz-cfm-content\"\n      [class.rz-cfm-panel-enter]=\"_isOpen() && !_isClosing()\"\n      [class.rz-cfm-panel-leave]=\"_isClosing()\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      @if (_title()) {\n        <div class=\"rz-cfm-header\">\n          <h3 class=\"rz-cfm-title\">{{ _title() }}</h3>\n        </div>\n      }\n\n      <div class=\"rz-cfm-body\">\n        @if (_icon()) {\n          <i class=\"{{ _icon() }} rz-cfm-icon\"></i>\n        }\n        <p class=\"rz-cfm-msg\">{{ message() }}</p>\n      </div>\n\n      <div class=\"rz-cfm-footer\">\n        <button\n          type=\"button\"\n          class=\"rz-cfm-btn rz-cfm-btn-cancel\"\n          (click)=\"_onCancel()\"\n        >{{ _cancelText() }}</button>\n\n        <button\n          type=\"button\"\n          class=\"rz-cfm-btn rz-cfm-btn-confirm\"\n          [style.background-color]=\"_confirmBg()\"\n          (click)=\"_onConfirm()\"\n        >{{ _confirmText() }}</button>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.rz-cfm-backdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:var(--color-backdrop, oklch(0 0 0 / .45))}.rz-cfm-backdrop-enter{animation:rz-cfm-backdrop-in .2s ease-out}.rz-cfm-backdrop-leave{animation:rz-cfm-backdrop-out .2s ease-in forwards}.rz-cfm-content{background:var(--color-surface, oklch(.99 0 0));border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:var(--radius-lg, .75rem);box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;width:100%;max-width:24rem;margin-left:1rem;margin-right:1rem;overflow:hidden;color:var(--color-text, oklch(.14 .01 260))}.rz-cfm-panel-enter{animation:rz-cfm-panel-in .2s ease-out}.rz-cfm-panel-leave{animation:rz-cfm-panel-out .18s ease-in forwards}.rz-cfm-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--color-border-light, oklch(.91 .01 260))}.rz-cfm-title{font-size:.875rem;font-weight:600}.rz-cfm-body{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1.5rem;text-align:center}.rz-cfm-icon{font-size:1.5rem;color:var(--color-primary, oklch(.32 .09 258))}.rz-cfm-msg{font-size:.875rem;color:var(--color-text, oklch(.14 .01 260))}.rz-cfm-footer{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--color-border-light, oklch(.91 .01 260))}.rz-cfm-btn{padding:.375rem .75rem;font-size:.875rem;border-radius:var(--radius-md, .5rem);cursor:pointer;transition:opacity .15s}.rz-cfm-btn-cancel{border:1px solid var(--color-border, oklch(.83 .015 260));background:transparent;color:var(--color-text, oklch(.14 .01 260))}.rz-cfm-btn-cancel:hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-cfm-btn-confirm{border:none;color:#fff}.rz-cfm-btn-confirm:hover{opacity:.9}@keyframes rz-cfm-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes rz-cfm-backdrop-out{0%{opacity:1}to{opacity:0}}@keyframes rz-cfm-panel-in{0%{opacity:0;scale:.95;translate:0 8px}to{opacity:1;scale:1;translate:0}}@keyframes rz-cfm-panel-out{0%{opacity:1;scale:1;translate:0}to{opacity:0;scale:.95;translate:0 8px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], confirm: [{ type: i0.Output, args: ["confirm"] }], cancel: [{ type: i0.Output, args: ["cancel"] }] } });
+
+class ModalComponent {
+    _closeTimer = null;
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    width = input('', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
+    closed = output();
+    _closeOnBackdrop = computed(() => this.config().closeOnBackdrop ?? true, ...(ngDevMode ? [{ debugName: "_closeOnBackdrop" }] : []));
+    _closeOnEscape = computed(() => this.config().closeOnEscape ?? true, ...(ngDevMode ? [{ debugName: "_closeOnEscape" }] : []));
+    _showClose = computed(() => this.config().showCloseButton ?? true, ...(ngDevMode ? [{ debugName: "_showClose" }] : []));
+    _maxWidth = computed(() => this.config().maxWidth ?? '500px', ...(ngDevMode ? [{ debugName: "_maxWidth" }] : []));
+    _width = computed(() => this.width() || this._maxWidth(), ...(ngDevMode ? [{ debugName: "_width" }] : []));
+    _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : []));
+    _isClosing = signal(false, ...(ngDevMode ? [{ debugName: "_isClosing" }] : []));
+    _visible = computed(() => this._isOpen() || this._isClosing(), ...(ngDevMode ? [{ debugName: "_visible" }] : []));
+    constructor() {
+        effect(() => {
+            if (this.open() && !this._isOpen()) {
+                this._isOpen.set(true);
+                this._isClosing.set(false);
+            }
+            else if (!this.open() && this._isOpen()) {
+                this._startClose();
+            }
+        });
+    }
+    _startClose() {
+        if (this._closeTimer)
+            clearTimeout(this._closeTimer);
+        this._isClosing.set(true);
+        this._closeTimer = setTimeout(() => {
+            this._isOpen.set(false);
+            this._isClosing.set(false);
+            this.closed.emit();
+            this._closeTimer = null;
+        }, 200);
+    }
+    close() {
+        if (this._isOpen()) {
+            this._startClose();
+        }
+        this.open.set(false);
+    }
+    ngOnDestroy() {
+        if (this._closeTimer)
+            clearTimeout(this._closeTimer);
+    }
+    _onBackdropClick(_event) {
+        if (this._closeOnBackdrop()) {
+            this.close();
+        }
+    }
+    _onEscape(event) {
+        if (this._closeOnEscape() && this._visible()) {
+            event.preventDefault();
+            this.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ModalComponent, isStandalone: true, selector: "app-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", 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 } }, outputs: { open: "openChange", closed: "closed" }, host: { listeners: { "document:keydown.escape": "_onEscape($event)" } }, ngImport: i0, template: "@if (_visible()) {\n  <div\n    class=\"rz-modal-backdrop\"\n    [class.rz-modal-backdrop-enter]=\"_isOpen() && !_isClosing()\"\n    [class.rz-modal-backdrop-leave]=\"_isClosing()\"\n    (click)=\"_onBackdropClick($event)\"\n  >\n    <div\n      class=\"rz-modal-content\"\n      [style.max-width]=\"_width()\"\n      [class.rz-modal-panel-enter]=\"_isOpen() && !_isClosing()\"\n      [class.rz-modal-panel-leave]=\"_isClosing()\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      @if (title() || _showClose()) {\n        <div class=\"rz-modal-header\" [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\">\n          <h3 class=\"rz-modal-title\">{{ title() }}</h3>\n          @if (_showClose()) {\n            <button\n              type=\"button\"\n              class=\"rz-modal-close\"\n              (click)=\"close()\"\n              aria-label=\"Close\"\n            >\n              <i class=\"pi pi-times\"></i>\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"rz-modal-body\">\n        <ng-content />\n      </div>\n\n      <div class=\"rz-modal-footer\">\n        <ng-content select=\"[modal-footer]\" />\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.rz-modal-backdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:var(--color-backdrop, oklch(0 0 0 / .45))}.rz-modal-backdrop-enter{animation:rz-modal-backdrop-in .2s ease-out}.rz-modal-backdrop-leave{animation:rz-modal-backdrop-out .2s ease-in forwards}.rz-modal-content{background:var(--color-surface, oklch(.99 0 0));border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:var(--radius-lg, .75rem);box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;width:100%;margin-left:1rem;margin-right:1rem;overflow:hidden;color:var(--color-text, oklch(.14 .01 260))}.rz-modal-panel-enter{animation:rz-modal-panel-in .2s ease-out}.rz-modal-panel-leave{animation:rz-modal-panel-out .18s ease-in forwards}.rz-modal-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem}.rz-modal-title{font-size:.875rem;font-weight:600;color:var(--color-primary-inverse, oklch(.99 0 0))}.rz-modal-close{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:9999px;background:transparent;color:#fffc;cursor:pointer;transition:background-color .2s}.rz-modal-close:hover{background:#fff3}.rz-modal-close i{font-size:.75rem}.rz-modal-body{padding:1rem}.rz-modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--color-border-light, oklch(.91 .01 260))}.rz-modal-footer:empty{display:none}@keyframes rz-modal-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes rz-modal-backdrop-out{0%{opacity:1}to{opacity:0}}@keyframes rz-modal-panel-in{0%{opacity:0;scale:.95;translate:0 8px}to{opacity:1;scale:1;translate:0}}@keyframes rz-modal-panel-out{0%{opacity:1;scale:1;translate:0}to{opacity:0;scale:.95;translate:0 8px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-modal', imports: [], host: {
+                        '(document:keydown.escape)': '_onEscape($event)',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (_visible()) {\n  <div\n    class=\"rz-modal-backdrop\"\n    [class.rz-modal-backdrop-enter]=\"_isOpen() && !_isClosing()\"\n    [class.rz-modal-backdrop-leave]=\"_isClosing()\"\n    (click)=\"_onBackdropClick($event)\"\n  >\n    <div\n      class=\"rz-modal-content\"\n      [style.max-width]=\"_width()\"\n      [class.rz-modal-panel-enter]=\"_isOpen() && !_isClosing()\"\n      [class.rz-modal-panel-leave]=\"_isClosing()\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      @if (title() || _showClose()) {\n        <div class=\"rz-modal-header\" [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\">\n          <h3 class=\"rz-modal-title\">{{ title() }}</h3>\n          @if (_showClose()) {\n            <button\n              type=\"button\"\n              class=\"rz-modal-close\"\n              (click)=\"close()\"\n              aria-label=\"Close\"\n            >\n              <i class=\"pi pi-times\"></i>\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"rz-modal-body\">\n        <ng-content />\n      </div>\n\n      <div class=\"rz-modal-footer\">\n        <ng-content select=\"[modal-footer]\" />\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.rz-modal-backdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:var(--color-backdrop, oklch(0 0 0 / .45))}.rz-modal-backdrop-enter{animation:rz-modal-backdrop-in .2s ease-out}.rz-modal-backdrop-leave{animation:rz-modal-backdrop-out .2s ease-in forwards}.rz-modal-content{background:var(--color-surface, oklch(.99 0 0));border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:var(--radius-lg, .75rem);box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;width:100%;margin-left:1rem;margin-right:1rem;overflow:hidden;color:var(--color-text, oklch(.14 .01 260))}.rz-modal-panel-enter{animation:rz-modal-panel-in .2s ease-out}.rz-modal-panel-leave{animation:rz-modal-panel-out .18s ease-in forwards}.rz-modal-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem}.rz-modal-title{font-size:.875rem;font-weight:600;color:var(--color-primary-inverse, oklch(.99 0 0))}.rz-modal-close{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:9999px;background:transparent;color:#fffc;cursor:pointer;transition:background-color .2s}.rz-modal-close:hover{background:#fff3}.rz-modal-close i{font-size:.75rem}.rz-modal-body{padding:1rem}.rz-modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--color-border-light, oklch(.91 .01 260))}.rz-modal-footer:empty{display:none}@keyframes rz-modal-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes rz-modal-backdrop-out{0%{opacity:1}to{opacity:0}}@keyframes rz-modal-panel-in{0%{opacity:0;scale:.95;translate:0 8px}to{opacity:1;scale:1;translate:0}}@keyframes rz-modal-panel-out{0%{opacity:1;scale:1;translate:0}to{opacity:0;scale:.95;translate:0 8px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+// Form
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AccordionComponent, AccordionPanelComponent, AlertComponent, BadgeComponent, BannerSliderComponent, CarouselComponent, CheckboxComponent, ConfirmDialogComponent, DatePickerComponent, DropDownComponent, EmptyStateComponent, FileUploadComponent, ImageUploadComponent, ModalComponent, MultiSelectComponent, NavComponent, PasswordInputComponent, SearchInputComponent, SidebarComponent, SkeletonComponent, SpinnerComponent, THEME_COLORS, TableComponent, TableSkeletonComponent, TextInputComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, isThemeColor };
+//# sourceMappingURL=ryzen-ui.mjs.map