@abdelfattahqandil21/ryzen-ui 0.0.1

package/fesm2022/abdelfattahqandil21-ryzen-ui.mjs

@@ -0,0 +1,2389 @@
+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.--cb-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<label class=\"cb-field\" [class.is-disabled]=\"disabled()\">\n  <span\n    class=\"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=\"w-2 h-0.5 rounded-full\" style=\"background:white\"></span>\n    }\n  </span>\n\n  @if (label()) {\n    <span class=\"cb-label\">{{ label() }}</span>\n  }\n</label>\n\n@if (hint() && !error()) {\n  <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [":host{--cb-accent: var(--color-primary, oklch(.32 .09 258));--cb-bg: var(--color-surface, oklch(.99 0 0));--cb-border: var(--color-border, oklch(.83 .015 260));--cb-text: var(--color-text, oklch(.14 .01 260));--cb-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\"]){--cb-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--cb-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--cb-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--cb-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--cb-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--cb-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--cb-accent: var(--color-info, oklch(.55 .15 235))}.cb-field{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.cb-field.is-disabled{opacity:.5;cursor:not-allowed}.cb-box{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--cb-border);border-radius:4px;background:var(--cb-bg);transition:all .15s ease;flex-shrink:0}.cb-box.is-checked,.cb-box.is-indeterminate{background:var(--cb-accent);border-color:var(--cb-accent)}.cb-box:focus-visible{outline:2px solid var(--cb-accent);outline-offset:2px}.cb-label{font-family:var(--font-sans);-webkit-user-select:none;user-select:none;color:var(--cb-text)}:host([data-size=\"sm\"]) .cb-box{width:1rem;height:1rem;font-size:.625rem}:host([data-size=\"sm\"]) .cb-label{font-size:.75rem}:host([data-size=\"md\"]) .cb-box{width:1.25rem;height:1.25rem;font-size:.75rem}:host([data-size=\"md\"]) .cb-label{font-size:.875rem}:host([data-size=\"lg\"]) .cb-box{width:1.5rem;height:1.5rem;font-size:.875rem}:host([data-size=\"lg\"]) .cb-label{font-size:1rem}:host(.has-error) .cb-box{border-color:var(--color-danger, oklch(.55 .25 25))}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes 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.--cb-accent]': '_rawAccent',
+                        '[style.width]': '_width',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"cb-field\" [class.is-disabled]=\"disabled()\">\n  <span\n    class=\"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=\"w-2 h-0.5 rounded-full\" style=\"background:white\"></span>\n    }\n  </span>\n\n  @if (label()) {\n    <span class=\"cb-label\">{{ label() }}</span>\n  }\n</label>\n\n@if (hint() && !error()) {\n  <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [":host{--cb-accent: var(--color-primary, oklch(.32 .09 258));--cb-bg: var(--color-surface, oklch(.99 0 0));--cb-border: var(--color-border, oklch(.83 .015 260));--cb-text: var(--color-text, oklch(.14 .01 260));--cb-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\"]){--cb-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--cb-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--cb-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--cb-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--cb-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--cb-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--cb-accent: var(--color-info, oklch(.55 .15 235))}.cb-field{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.cb-field.is-disabled{opacity:.5;cursor:not-allowed}.cb-box{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--cb-border);border-radius:4px;background:var(--cb-bg);transition:all .15s ease;flex-shrink:0}.cb-box.is-checked,.cb-box.is-indeterminate{background:var(--cb-accent);border-color:var(--cb-accent)}.cb-box:focus-visible{outline:2px solid var(--cb-accent);outline-offset:2px}.cb-label{font-family:var(--font-sans);-webkit-user-select:none;user-select:none;color:var(--cb-text)}:host([data-size=\"sm\"]) .cb-box{width:1rem;height:1rem;font-size:.625rem}:host([data-size=\"sm\"]) .cb-label{font-size:.75rem}:host([data-size=\"md\"]) .cb-box{width:1.25rem;height:1.25rem;font-size:.75rem}:host([data-size=\"md\"]) .cb-label{font-size:.875rem}:host([data-size=\"lg\"]) .cb-box{width:1.5rem;height:1.5rem;font-size:.875rem}:host([data-size=\"lg\"]) .cb-label{font-size:1rem}:host(.has-error) .cb-box{border-color:var(--color-danger, oklch(.55 .25 25))}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes 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();
+    }
+    /* ── input computed classes ── */
+    _inputSizeCls = computed(() => {
+        const s = this.size();
+        return s === 'sm' ? 'py-1 pl-2 pr-8 text-xs' : s === 'lg' ? 'py-3 pl-4 pr-10 text-base' : 'py-2 pl-3 pr-10 text-sm';
+    }, ...(ngDevMode ? [{ debugName: "_inputSizeCls" }] : []));
+    _iconCls = computed(() => {
+        const s = this.size();
+        const r = s === 'sm' ? 'right-2' : s === 'lg' ? 'right-3' : 'right-2.5';
+        const f = s === 'sm' ? 'text-xs' : s === 'lg' ? 'text-lg' : 'text-sm';
+        return `absolute top-1/2 -translate-y-1/2 ${r} ${f} text-[var(--date-accent)] pointer-events-none`;
+    }, ...(ngDevMode ? [{ debugName: "_iconCls" }] : []));
+    /* ── 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.--date-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<div class=\"relative dp-wrapper\">\n  <label class=\"flex items-center w-full\" (click)=\"_onTriggerClick($event)\">\n    <input\n      class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--date-bg)] border border-[var(--date-border)] rounded-[var(--date-radius)] text-[var(--date-text)] font-[var(--font-sans)] placeholder:text-[var(--date-muted)] disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer focus:border-[var(--date-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--date-accent)_20%,transparent)]\"\n      [class]=\"_inputSizeCls()\"\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=\"absolute top-1/2 -translate-y-1/2 right-8 flex items-center justify-center p-0 border-none bg-transparent cursor-pointer text-[var(--date-muted)] hover:text-[var(--date-text)] transition-colors duration-150\" type=\"button\" (click)=\"_clear($event)\" aria-label=\"Clear date\">\n        <i class=\"pi pi-times text-xs sm:text-sm lg:text-base\"></i>\n      </button>\n    }\n\n    <i [class]=\"_iconCls() + ' pi pi-calendar'\"></i>\n  </label>\n\n  @if (_isOpen() || _isClosing()) {\n    <div\n      data-dp-panel\n      class=\"left-0 z-50 w-full min-w-60 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--radius-md)] shadow-lg overflow-hidden text-[var(--color-text)]\"\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.dp-fade-in]=\"_isOpen() && !_isClosing()\"\n      [class.dp-fade-out]=\"_isClosing()\"\n      (click)=\"_onPanelClick($event)\">\n    <div [style.background-color]=\"_accentColorValue()\" class=\"text-white px-3 py-2.5\">\n      <!-- top row: nav arrows + month/year title -->\n      <div class=\"flex items-center justify-between mb-1.5\">\n        @if (_viewMode() === 'days' && _showYearNav()) {\n          <button type=\"button\" (click)=\"_prevYear()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\" aria-label=\"Previous year\">\n            <i class=\"pi pi-angle-double-left text-xs\"></i>\n          </button>\n        }\n        @if (_viewMode() !== 'years') {\n          <button type=\"button\" (click)=\"_prevPeriod()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\" aria-label=\"Previous\">\n            <i class=\"pi pi-angle-left text-sm\"></i>\n          </button>\n        }\n\n        <div class=\"flex items-center gap-1 text-sm font-semibold\">\n          @if (_viewMode() === 'days') {\n            <button type=\"button\" (click)=\"_showMonths()\" class=\"px-1.5 py-0.5 border-none rounded bg-transparent text-white hover:bg-white/20 cursor-pointer transition-colors\">{{ _monthName() }}</button>\n            <button type=\"button\" (click)=\"_showYears()\" class=\"px-1.5 py-0.5 border-none rounded bg-transparent text-white hover:bg-white/20 cursor-pointer transition-colors\">{{ _year() }}</button>\n          }\n          @if (_viewMode() === 'months') {\n            <button type=\"button\" (click)=\"_showYears()\" class=\"px-1.5 py-0.5 border-none rounded bg-transparent text-white hover:bg-white/20 cursor-pointer transition-colors\">{{ _year() }}</button>\n          }\n          @if (_viewMode() === 'years') {\n            <span class=\"px-1.5\">{{ _decadeLabel() }}</span>\n          }\n        </div>\n\n        @if (_viewMode() !== 'years') {\n          <button type=\"button\" (click)=\"_nextPeriod()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\" aria-label=\"Next\">\n            <i class=\"pi pi-angle-right text-sm\"></i>\n          </button>\n        }\n        @if (_viewMode() === 'days' && _showYearNav()) {\n          <button type=\"button\" (click)=\"_nextYear()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\" aria-label=\"Next year\">\n            <i class=\"pi pi-angle-double-right text-xs\"></i>\n          </button>\n        }\n      </div>\n\n      <!-- today button -->\n      @if (_showTodayBtn() && _viewMode() === 'days') {\n        <button type=\"button\" (click)=\"_goToToday()\" class=\"w-full flex items-center justify-center gap-1.5 py-1 px-2 border-none rounded bg-white/20 hover:bg-white/30 text-white text-xs cursor-pointer transition-colors\">\n          <i class=\"pi pi-calendar-plus text-xs\"></i>\n          Today\n        </button>\n      }\n    </div>\n\n    <!-- ===== DAYS VIEW ===== -->\n    @if (_viewMode() === 'days') {\n      <div class=\"p-2.5\">\n        <div class=\"grid grid-cols-7 mb-0.5\">\n          @for (day of _weekDaysOrdered(); track $index) {\n            <div class=\"flex items-center justify-center h-7 text-xs font-medium text-[var(--color-text-muted)] font-[var(--font-sans)]\">{{ day }}</div>\n          }\n        </div>\n        <div class=\"grid grid-cols-7 gap-0.5\">\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=\"flex items-center justify-center w-9 h-9 p-0 border-none rounded-full cursor-pointer text-sm font-[var(--font-sans)] transition-all duration-150\"\n                [class.text-[var(--color-text-muted)]]=\"!day.isCurrentMonth && !day.isSelected\"\n                [class.text-[var(--color-text)]]=\"day.isCurrentMonth && !day.isSelected && !day.isToday\"\n                [class.font-semibold]=\"day.isToday || day.isSelected\"\n                [class.bg-[var(--date-accent)]]=\"day.isSelected\"\n                [class.text-white]=\"day.isSelected\"\n                [class.ring-2]=\"day.isToday && !day.isSelected\"\n                [class.ring-[var(--date-accent)]]=\"day.isToday && !day.isSelected\"\n                [class.bg-[var(--color-surface-alt)]]=\"day.isHighlighted && !day.isSelected\"\n                [class.hover:bg-[var(--color-surface-alt)]]=\"!day.isSelected && !day.isDisabled\"\n                [class.opacity-30]=\"day.isDisabled\"\n                [class.cursor-not-allowed]=\"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    <!-- ===== MONTHS VIEW ===== -->\n    @if (_viewMode() === 'months') {\n      <div class=\"grid grid-cols-3 gap-2 p-3\">\n        @for (month of _monthNames; track $index) {\n          <button\n            type=\"button\"\n            class=\"p-2 rounded-lg text-xs font-[var(--font-sans)] transition-colors cursor-pointer\"\n            [class.bg-[var(--date-accent)]]=\"_isCurrentMonth($index)\"\n            [class.text-white]=\"_isCurrentMonth($index)\"\n            [class.text-[var(--color-text)]]=\"!_isCurrentMonth($index)\"\n            [class.hover:bg-[var(--color-surface-alt)]]=\"!_isCurrentMonth($index)\"\n            (click)=\"_selectMonth($index)\"\n          >{{ _monthsShort[$index] }}</button>\n        }\n      </div>\n    }\n\n    <!-- ===== YEARS VIEW ===== -->\n    @if (_viewMode() === 'years') {\n      <div class=\"p-2.5\">\n        <div class=\"flex items-center justify-between mb-2 px-1\">\n          <button type=\"button\" (click)=\"_prevDecade()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-[var(--date-accent)] hover:bg-[var(--color-surface-alt)] cursor-pointer transition-colors\">\n            <i class=\"pi pi-chevron-left text-xs\"></i>\n          </button>\n          <span class=\"text-sm font-semibold text-[var(--color-text)] font-[var(--font-sans)]\">{{ _decadeLabel() }}</span>\n          <button type=\"button\" (click)=\"_nextDecade()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-[var(--date-accent)] hover:bg-[var(--color-surface-alt)] cursor-pointer transition-colors\">\n            <i class=\"pi pi-chevron-right text-xs\"></i>\n          </button>\n        </div>\n        <div class=\"grid grid-cols-4 gap-2\">\n          @for (year of _yearsList(); track $index) {\n            <button\n              type=\"button\"\n              class=\"p-2 rounded-lg text-xs font-[var(--font-sans)] transition-colors cursor-pointer\"\n              [class.bg-[var(--date-accent)]]=\"_isCurrentYear(year)\"\n              [class.text-white]=\"_isCurrentYear(year)\"\n              [class.text-[var(--color-text)]]=\"!_isCurrentYear(year)\"\n              [class.hover:bg-[var(--color-surface-alt)]]=\"!_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=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--date-accent: var(--color-primary, oklch(.32 .09 258));--date-bg: var(--color-surface, oklch(.99 0 0));--date-border: var(--color-border, oklch(.83 .015 260));--date-text: var(--color-text, oklch(.14 .01 260));--date-muted: var(--color-text-muted, oklch(.48 .01 260));--date-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\"]){--date-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--date-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--date-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--date-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--date-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--date-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--date-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error input{border-color:var(--color-danger)!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.dp-fade-in{animation:dpIn .2s ease}.dp-fade-out{animation:dpOut .15s ease forwards}@keyframes dpIn{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes dpOut{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes 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.--date-accent]': '_rawAccent',
+                        '[style.width]': '_width',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative dp-wrapper\">\n  <label class=\"flex items-center w-full\" (click)=\"_onTriggerClick($event)\">\n    <input\n      class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--date-bg)] border border-[var(--date-border)] rounded-[var(--date-radius)] text-[var(--date-text)] font-[var(--font-sans)] placeholder:text-[var(--date-muted)] disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer focus:border-[var(--date-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--date-accent)_20%,transparent)]\"\n      [class]=\"_inputSizeCls()\"\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=\"absolute top-1/2 -translate-y-1/2 right-8 flex items-center justify-center p-0 border-none bg-transparent cursor-pointer text-[var(--date-muted)] hover:text-[var(--date-text)] transition-colors duration-150\" type=\"button\" (click)=\"_clear($event)\" aria-label=\"Clear date\">\n        <i class=\"pi pi-times text-xs sm:text-sm lg:text-base\"></i>\n      </button>\n    }\n\n    <i [class]=\"_iconCls() + ' pi pi-calendar'\"></i>\n  </label>\n\n  @if (_isOpen() || _isClosing()) {\n    <div\n      data-dp-panel\n      class=\"left-0 z-50 w-full min-w-60 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--radius-md)] shadow-lg overflow-hidden text-[var(--color-text)]\"\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.dp-fade-in]=\"_isOpen() && !_isClosing()\"\n      [class.dp-fade-out]=\"_isClosing()\"\n      (click)=\"_onPanelClick($event)\">\n    <div [style.background-color]=\"_accentColorValue()\" class=\"text-white px-3 py-2.5\">\n      <!-- top row: nav arrows + month/year title -->\n      <div class=\"flex items-center justify-between mb-1.5\">\n        @if (_viewMode() === 'days' && _showYearNav()) {\n          <button type=\"button\" (click)=\"_prevYear()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\" aria-label=\"Previous year\">\n            <i class=\"pi pi-angle-double-left text-xs\"></i>\n          </button>\n        }\n        @if (_viewMode() !== 'years') {\n          <button type=\"button\" (click)=\"_prevPeriod()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\" aria-label=\"Previous\">\n            <i class=\"pi pi-angle-left text-sm\"></i>\n          </button>\n        }\n\n        <div class=\"flex items-center gap-1 text-sm font-semibold\">\n          @if (_viewMode() === 'days') {\n            <button type=\"button\" (click)=\"_showMonths()\" class=\"px-1.5 py-0.5 border-none rounded bg-transparent text-white hover:bg-white/20 cursor-pointer transition-colors\">{{ _monthName() }}</button>\n            <button type=\"button\" (click)=\"_showYears()\" class=\"px-1.5 py-0.5 border-none rounded bg-transparent text-white hover:bg-white/20 cursor-pointer transition-colors\">{{ _year() }}</button>\n          }\n          @if (_viewMode() === 'months') {\n            <button type=\"button\" (click)=\"_showYears()\" class=\"px-1.5 py-0.5 border-none rounded bg-transparent text-white hover:bg-white/20 cursor-pointer transition-colors\">{{ _year() }}</button>\n          }\n          @if (_viewMode() === 'years') {\n            <span class=\"px-1.5\">{{ _decadeLabel() }}</span>\n          }\n        </div>\n\n        @if (_viewMode() !== 'years') {\n          <button type=\"button\" (click)=\"_nextPeriod()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\" aria-label=\"Next\">\n            <i class=\"pi pi-angle-right text-sm\"></i>\n          </button>\n        }\n        @if (_viewMode() === 'days' && _showYearNav()) {\n          <button type=\"button\" (click)=\"_nextYear()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\" aria-label=\"Next year\">\n            <i class=\"pi pi-angle-double-right text-xs\"></i>\n          </button>\n        }\n      </div>\n\n      <!-- today button -->\n      @if (_showTodayBtn() && _viewMode() === 'days') {\n        <button type=\"button\" (click)=\"_goToToday()\" class=\"w-full flex items-center justify-center gap-1.5 py-1 px-2 border-none rounded bg-white/20 hover:bg-white/30 text-white text-xs cursor-pointer transition-colors\">\n          <i class=\"pi pi-calendar-plus text-xs\"></i>\n          Today\n        </button>\n      }\n    </div>\n\n    <!-- ===== DAYS VIEW ===== -->\n    @if (_viewMode() === 'days') {\n      <div class=\"p-2.5\">\n        <div class=\"grid grid-cols-7 mb-0.5\">\n          @for (day of _weekDaysOrdered(); track $index) {\n            <div class=\"flex items-center justify-center h-7 text-xs font-medium text-[var(--color-text-muted)] font-[var(--font-sans)]\">{{ day }}</div>\n          }\n        </div>\n        <div class=\"grid grid-cols-7 gap-0.5\">\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=\"flex items-center justify-center w-9 h-9 p-0 border-none rounded-full cursor-pointer text-sm font-[var(--font-sans)] transition-all duration-150\"\n                [class.text-[var(--color-text-muted)]]=\"!day.isCurrentMonth && !day.isSelected\"\n                [class.text-[var(--color-text)]]=\"day.isCurrentMonth && !day.isSelected && !day.isToday\"\n                [class.font-semibold]=\"day.isToday || day.isSelected\"\n                [class.bg-[var(--date-accent)]]=\"day.isSelected\"\n                [class.text-white]=\"day.isSelected\"\n                [class.ring-2]=\"day.isToday && !day.isSelected\"\n                [class.ring-[var(--date-accent)]]=\"day.isToday && !day.isSelected\"\n                [class.bg-[var(--color-surface-alt)]]=\"day.isHighlighted && !day.isSelected\"\n                [class.hover:bg-[var(--color-surface-alt)]]=\"!day.isSelected && !day.isDisabled\"\n                [class.opacity-30]=\"day.isDisabled\"\n                [class.cursor-not-allowed]=\"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    <!-- ===== MONTHS VIEW ===== -->\n    @if (_viewMode() === 'months') {\n      <div class=\"grid grid-cols-3 gap-2 p-3\">\n        @for (month of _monthNames; track $index) {\n          <button\n            type=\"button\"\n            class=\"p-2 rounded-lg text-xs font-[var(--font-sans)] transition-colors cursor-pointer\"\n            [class.bg-[var(--date-accent)]]=\"_isCurrentMonth($index)\"\n            [class.text-white]=\"_isCurrentMonth($index)\"\n            [class.text-[var(--color-text)]]=\"!_isCurrentMonth($index)\"\n            [class.hover:bg-[var(--color-surface-alt)]]=\"!_isCurrentMonth($index)\"\n            (click)=\"_selectMonth($index)\"\n          >{{ _monthsShort[$index] }}</button>\n        }\n      </div>\n    }\n\n    <!-- ===== YEARS VIEW ===== -->\n    @if (_viewMode() === 'years') {\n      <div class=\"p-2.5\">\n        <div class=\"flex items-center justify-between mb-2 px-1\">\n          <button type=\"button\" (click)=\"_prevDecade()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-[var(--date-accent)] hover:bg-[var(--color-surface-alt)] cursor-pointer transition-colors\">\n            <i class=\"pi pi-chevron-left text-xs\"></i>\n          </button>\n          <span class=\"text-sm font-semibold text-[var(--color-text)] font-[var(--font-sans)]\">{{ _decadeLabel() }}</span>\n          <button type=\"button\" (click)=\"_nextDecade()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-[var(--date-accent)] hover:bg-[var(--color-surface-alt)] cursor-pointer transition-colors\">\n            <i class=\"pi pi-chevron-right text-xs\"></i>\n          </button>\n        </div>\n        <div class=\"grid grid-cols-4 gap-2\">\n          @for (year of _yearsList(); track $index) {\n            <button\n              type=\"button\"\n              class=\"p-2 rounded-lg text-xs font-[var(--font-sans)] transition-colors cursor-pointer\"\n              [class.bg-[var(--date-accent)]]=\"_isCurrentYear(year)\"\n              [class.text-white]=\"_isCurrentYear(year)\"\n              [class.text-[var(--color-text)]]=\"!_isCurrentYear(year)\"\n              [class.hover:bg-[var(--color-surface-alt)]]=\"!_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=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--date-accent: var(--color-primary, oklch(.32 .09 258));--date-bg: var(--color-surface, oklch(.99 0 0));--date-border: var(--color-border, oklch(.83 .015 260));--date-text: var(--color-text, oklch(.14 .01 260));--date-muted: var(--color-text-muted, oklch(.48 .01 260));--date-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\"]){--date-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--date-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--date-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--date-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--date-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--date-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--date-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error input{border-color:var(--color-danger)!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.dp-fade-in{animation:dpIn .2s ease}.dp-fade-out{animation:dpOut .15s ease forwards}@keyframes dpIn{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes dpOut{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes 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 ?? '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" }] : []));
+    _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" }] : []));
+    _inputSizeCls = computed(() => {
+        const s = this.size();
+        return s === 'sm' ? 'py-1 pl-2 pr-8 text-xs' : s === 'lg' ? 'py-3 pl-4 pr-10 text-base' : 'py-2 pl-3 pr-10 text-sm';
+    }, ...(ngDevMode ? [{ debugName: "_inputSizeCls" }] : []));
+    _iconCls = computed(() => {
+        const s = this.size();
+        const r = s === 'sm' ? 'right-2' : s === 'lg' ? 'right-3' : 'right-2.5';
+        const f = s === 'sm' ? 'text-xs' : s === 'lg' ? 'text-lg' : 'text-sm';
+        return `absolute top-1/2 -translate-y-1/2 ${r} ${f} text-[var(--drop-muted)] pointer-events-none transition-transform duration-200 ${this._isOpen() ? 'rotate-180' : ''}`;
+    }, ...(ngDevMode ? [{ debugName: "_iconCls" }] : []));
+    _optionCls = computed(() => {
+        const s = this.size();
+        return `w-full text-left border-none cursor-pointer transition-colors duration-100 hover:bg-[color-mix(in_srgb,var(--color-accent)_12%,var(--color-surface))] ${s === 'sm' ? 'px-2 py-1.5 text-xs' : s === 'lg' ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'}`;
+    }, ...(ngDevMode ? [{ debugName: "_optionCls" }] : []));
+    _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.--drop-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<div class=\"relative dd-wrapper\">\n  <label class=\"flex items-center w-full\" (click)=\"_onTriggerClick($event)\">\n    <input\n      class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--drop-bg)] border border-[var(--drop-border)] rounded-[var(--drop-radius)] text-[var(--drop-text)] font-[var(--font-sans)] placeholder:text-[var(--drop-muted)] disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer focus:border-[var(--drop-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--drop-accent)_20%,transparent)]\"\n      [class]=\"_inputSizeCls()\"\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=\"absolute top-1/2 -translate-y-1/2 right-8 flex items-center justify-center p-0 border-none bg-transparent cursor-pointer text-[var(--drop-muted)] hover:text-[var(--drop-text)] transition-colors duration-150\" type=\"button\" (click)=\"_clear($event)\" aria-label=\"Clear\">\n        <i class=\"pi pi-times text-xs sm:text-sm lg:text-base\"></i>\n      </button>\n    }\n\n    <i [class]=\"_iconCls() + ' pi pi-chevron-down'\"></i>\n  </label>\n\n  @if (_isOpen() || _isClosing()) {\n    <div\n      data-dd-panel\n      class=\"left-0 z-50 w-full min-w-60 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--radius-md)] shadow-lg overflow-hidden text-[var(--color-text)]\"\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.dd-fade-in]=\"_isOpen() && !_isClosing()\"\n      [class.dd-fade-out]=\"_isClosing()\"\n      (click)=\"_onPanelClick($event)\">\n\n      @if (searchable()) {\n        <div class=\"px-2 pt-2\">\n          <input\n            data-dd-search\n            type=\"text\"\n            class=\"w-full px-2 py-1.5 text-sm border border-[var(--color-border)] rounded outline-none bg-[var(--color-surface)] text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] focus:border-[var(--color-accent)]\"\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=\"overflow-y-auto\"\n        [style.max-height]=\"_maxHeight()\"\n        (scroll)=\"$event.stopPropagation()\">\n        @for (option of _filteredOptions(); track option.value) {\n          <button\n            type=\"button\"\n            [class]=\"_optionCls()\"\n            [class.font-semibold]=\"option.value === value()\"\n            [style.background-color]=\"option.value === value() ? 'var(--color-accent)' : null\"\n            [style.color]=\"option.value === value() ? 'var(--color-primary-inverse)' : null\"\n            (click)=\"_selectOption(option)\"\n          >{{ option.label }}</button>\n        }\n\n        @if (_filteredOptions().length === 0) {\n          <div class=\"px-3 py-4 text-center text-sm text-[var(--drop-muted)]\">No results found</div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (hint() && !error()) {\n  <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--drop-accent: var(--color-accent, oklch(.64 .2 50));--drop-bg: var(--color-surface, oklch(.99 0 0));--drop-border: var(--color-border, oklch(.83 .015 260));--drop-text: var(--color-text, oklch(.14 .01 260));--drop-muted: var(--color-text-muted, oklch(.48 .01 260));--drop-surface: var(--color-surface-alt, oklch(.975 .005 260));--drop-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\"]){--drop-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--drop-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--drop-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--drop-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--drop-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--drop-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--drop-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error input{border-color:var(--color-danger, oklch(.55 .25 25))!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger, oklch(.55 .25 25)) 20%,transparent)!important}.dd-fade-in{animation:ddIn .2s ease}.dd-fade-out{animation:ddOut .15s ease forwards}@keyframes ddIn{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes ddOut{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes 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.--drop-accent]': '_rawAccent',
+                        '[style.width]': '_width',
+                        '(window:scroll)': '_onWindowScroll()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative dd-wrapper\">\n  <label class=\"flex items-center w-full\" (click)=\"_onTriggerClick($event)\">\n    <input\n      class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--drop-bg)] border border-[var(--drop-border)] rounded-[var(--drop-radius)] text-[var(--drop-text)] font-[var(--font-sans)] placeholder:text-[var(--drop-muted)] disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer focus:border-[var(--drop-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--drop-accent)_20%,transparent)]\"\n      [class]=\"_inputSizeCls()\"\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=\"absolute top-1/2 -translate-y-1/2 right-8 flex items-center justify-center p-0 border-none bg-transparent cursor-pointer text-[var(--drop-muted)] hover:text-[var(--drop-text)] transition-colors duration-150\" type=\"button\" (click)=\"_clear($event)\" aria-label=\"Clear\">\n        <i class=\"pi pi-times text-xs sm:text-sm lg:text-base\"></i>\n      </button>\n    }\n\n    <i [class]=\"_iconCls() + ' pi pi-chevron-down'\"></i>\n  </label>\n\n  @if (_isOpen() || _isClosing()) {\n    <div\n      data-dd-panel\n      class=\"left-0 z-50 w-full min-w-60 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--radius-md)] shadow-lg overflow-hidden text-[var(--color-text)]\"\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.dd-fade-in]=\"_isOpen() && !_isClosing()\"\n      [class.dd-fade-out]=\"_isClosing()\"\n      (click)=\"_onPanelClick($event)\">\n\n      @if (searchable()) {\n        <div class=\"px-2 pt-2\">\n          <input\n            data-dd-search\n            type=\"text\"\n            class=\"w-full px-2 py-1.5 text-sm border border-[var(--color-border)] rounded outline-none bg-[var(--color-surface)] text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] focus:border-[var(--color-accent)]\"\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=\"overflow-y-auto\"\n        [style.max-height]=\"_maxHeight()\"\n        (scroll)=\"$event.stopPropagation()\">\n        @for (option of _filteredOptions(); track option.value) {\n          <button\n            type=\"button\"\n            [class]=\"_optionCls()\"\n            [class.font-semibold]=\"option.value === value()\"\n            [style.background-color]=\"option.value === value() ? 'var(--color-accent)' : null\"\n            [style.color]=\"option.value === value() ? 'var(--color-primary-inverse)' : null\"\n            (click)=\"_selectOption(option)\"\n          >{{ option.label }}</button>\n        }\n\n        @if (_filteredOptions().length === 0) {\n          <div class=\"px-3 py-4 text-center text-sm text-[var(--drop-muted)]\">No results found</div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (hint() && !error()) {\n  <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--drop-accent: var(--color-accent, oklch(.64 .2 50));--drop-bg: var(--color-surface, oklch(.99 0 0));--drop-border: var(--color-border, oklch(.83 .015 260));--drop-text: var(--color-text, oklch(.14 .01 260));--drop-muted: var(--color-text-muted, oklch(.48 .01 260));--drop-surface: var(--color-surface-alt, oklch(.975 .005 260));--drop-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\"]){--drop-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--drop-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--drop-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--drop-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--drop-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--drop-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--drop-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error input{border-color:var(--color-danger, oklch(.55 .25 25))!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger, oklch(.55 .25 25)) 20%,transparent)!important}.dd-fade-in{animation:ddIn .2s ease}.dd-fade-out{animation:ddOut .15s ease forwards}@keyframes ddIn{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes ddOut{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes 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=\"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=\"pi pi-cloud-upload\" [class.text-2xl]=\"size() !== 'sm'\" [class.text-xl]=\"size() === 'sm'\"></i>\n\n  @if (files().length) {\n    <span class=\"text-xs font-medium\">{{ files().length }} file{{ files().length !== 1 ? 's' : '' }} selected</span>\n  } @else {\n    <span class=\"text-xs\">{{ placeholder() }}</span>\n  }\n\n  @if (maxSize()) {\n    <span class=\"text-[10px] opacity-60\">Max {{ _formatSize(maxSize()) }} per file</span>\n  }\n</div>\n\n@if (files().length) {\n  <div class=\"file-list\">\n    @for (file of files(); track file.name + file.size + file.lastModified; let i = $index) {\n      <div class=\"file-item\">\n        <i class=\"pi pi-file file-item-icon\"></i>\n        <span class=\"file-item-name\" [title]=\"file.name\">{{ file.name }}</span>\n        <span class=\"file-item-size\">{{ _formatSize(file.size) }}</span>\n        <button type=\"button\" class=\"file-item-remove\" (click)=\"_removeFile(i)\" aria-label=\"Remove file\">&times;</button>\n      </div>\n    }\n  </div>\n}\n\n@if (hint() && !error()) {\n  <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [":host{--fu-accent: var(--color-accent, oklch(.64 .2 50));--fu-bg: var(--color-surface, oklch(.99 0 0));--fu-border: var(--color-border, oklch(.83 .015 260));--fu-text: var(--color-text, oklch(.14 .01 260));--fu-muted: var(--color-text-muted, oklch(.48 .01 260));--fu-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}.drop-zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;padding:2rem 1rem;border:2px dashed var(--fu-border);border-radius:var(--fu-radius);background:var(--fu-bg);cursor:pointer;transition:all .2s ease;color:var(--fu-muted);text-align:center}.drop-zone:hover,.drop-zone.is-dragover{border-color:var(--fu-accent);background:color-mix(in srgb,var(--fu-accent) 6%,var(--fu-bg));color:var(--fu-text)}.drop-zone.is-disabled{opacity:.5;cursor:not-allowed}.file-list{display:flex;flex-direction:column;gap:.25rem;margin-top:.5rem}.file-item{display:flex;align-items:center;gap:.5rem;padding:.375rem .5rem;border-radius:calc(var(--fu-radius) - 2px);background:color-mix(in srgb,var(--fu-accent) 6%,var(--fu-bg));font-size:.8125rem;color:var(--fu-text)}.file-item-icon{flex-shrink:0;font-size:.75rem;color:var(--fu-accent)}.file-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-item-size{flex-shrink:0;font-size:.6875rem;color:var(--fu-muted)}.file-item-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(--fu-muted);font-size:.6875rem;transition:all .15s}.file-item-remove:hover{background:color-mix(in srgb,var(--color-danger) 15%,transparent);color:var(--color-danger)}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes 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=\"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=\"pi pi-cloud-upload\" [class.text-2xl]=\"size() !== 'sm'\" [class.text-xl]=\"size() === 'sm'\"></i>\n\n  @if (files().length) {\n    <span class=\"text-xs font-medium\">{{ files().length }} file{{ files().length !== 1 ? 's' : '' }} selected</span>\n  } @else {\n    <span class=\"text-xs\">{{ placeholder() }}</span>\n  }\n\n  @if (maxSize()) {\n    <span class=\"text-[10px] opacity-60\">Max {{ _formatSize(maxSize()) }} per file</span>\n  }\n</div>\n\n@if (files().length) {\n  <div class=\"file-list\">\n    @for (file of files(); track file.name + file.size + file.lastModified; let i = $index) {\n      <div class=\"file-item\">\n        <i class=\"pi pi-file file-item-icon\"></i>\n        <span class=\"file-item-name\" [title]=\"file.name\">{{ file.name }}</span>\n        <span class=\"file-item-size\">{{ _formatSize(file.size) }}</span>\n        <button type=\"button\" class=\"file-item-remove\" (click)=\"_removeFile(i)\" aria-label=\"Remove file\">&times;</button>\n      </div>\n    }\n  </div>\n}\n\n@if (hint() && !error()) {\n  <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [":host{--fu-accent: var(--color-accent, oklch(.64 .2 50));--fu-bg: var(--color-surface, oklch(.99 0 0));--fu-border: var(--color-border, oklch(.83 .015 260));--fu-text: var(--color-text, oklch(.14 .01 260));--fu-muted: var(--color-text-muted, oklch(.48 .01 260));--fu-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}.drop-zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;padding:2rem 1rem;border:2px dashed var(--fu-border);border-radius:var(--fu-radius);background:var(--fu-bg);cursor:pointer;transition:all .2s ease;color:var(--fu-muted);text-align:center}.drop-zone:hover,.drop-zone.is-dragover{border-color:var(--fu-accent);background:color-mix(in srgb,var(--fu-accent) 6%,var(--fu-bg));color:var(--fu-text)}.drop-zone.is-disabled{opacity:.5;cursor:not-allowed}.file-list{display:flex;flex-direction:column;gap:.25rem;margin-top:.5rem}.file-item{display:flex;align-items:center;gap:.5rem;padding:.375rem .5rem;border-radius:calc(var(--fu-radius) - 2px);background:color-mix(in srgb,var(--fu-accent) 6%,var(--fu-bg));font-size:.8125rem;color:var(--fu-text)}.file-item-icon{flex-shrink:0;font-size:.75rem;color:var(--fu-accent)}.file-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-item-size{flex-shrink:0;font-size:.6875rem;color:var(--fu-muted)}.file-item-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(--fu-muted);font-size:.6875rem;transition:all .15s}.file-item-remove:hover{background:color-mix(in srgb,var(--color-danger) 15%,transparent);color:var(--color-danger)}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes 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" }] : []));
+    _inputSizeCls = computed(() => {
+        const s = this.size();
+        return s === 'sm' ? 'py-1 pl-2 pr-8 text-xs' : s === 'lg' ? 'py-3 pl-4 pr-10 text-base' : 'py-2 pl-3 pr-10 text-sm';
+    }, ...(ngDevMode ? [{ debugName: "_inputSizeCls" }] : []));
+    _iconCls = computed(() => {
+        const s = this.size();
+        const r = s === 'sm' ? 'right-2' : s === 'lg' ? 'right-3' : 'right-2.5';
+        const f = s === 'sm' ? 'text-xs' : s === 'lg' ? 'text-lg' : 'text-sm';
+        return `absolute top-1/2 -translate-y-1/2 ${r} ${f} text-[var(--drop-muted)] pointer-events-none transition-transform duration-200 ${this._isOpen() ? 'rotate-180' : ''}`;
+    }, ...(ngDevMode ? [{ debugName: "_iconCls" }] : []));
+    _optionCls = computed(() => {
+        const s = this.size();
+        return `w-full flex items-center gap-2 text-left border-none cursor-pointer transition-colors duration-100 hover:bg-[color-mix(in_srgb,var(--color-accent)_12%,var(--color-surface))] ${s === 'sm' ? 'px-2 py-1.5 text-xs' : s === 'lg' ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'}`;
+    }, ...(ngDevMode ? [{ debugName: "_optionCls" }] : []));
+    _chipCls = computed(() => {
+        return `ms-chip`;
+    }, ...(ngDevMode ? [{ debugName: "_chipCls" }] : []));
+    _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.--drop-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<div class=\"relative ms-wrapper\">\n  <label class=\"flex items-center w-full cursor-text\" (click)=\"_onTriggerClick($event)\">\n    @let chips = _selectedLabels();\n\n    <div class=\"!flex flex-wrap items-center gap-1 min-h-0 h-auto cursor-pointer py-1.5 w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--drop-bg)] border border-[var(--drop-border)] rounded-[var(--drop-radius)] text-[var(--drop-text)] font-[var(--font-sans)] disabled:opacity-50 disabled:cursor-not-allowed\"\n      [class]=\"_inputSizeCls()\"\n    >\n      @for (label of chips; track label) {\n        <span class=\"ms-chip\">\n          {{ label }}\n          <button type=\"button\" class=\"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=\"flex-1 min-w-[50px] outline-none border-none bg-transparent text-[var(--drop-text)] placeholder:text-[var(--drop-muted)]\"\n        [class.text-xs]=\"size() === 'sm'\"\n        [class.text-sm]=\"size() !== 'sm'\"\n        [style.height]=\"size() === 'sm' ? '1.25rem' : '1.5rem'\"\n        [attr.placeholder]=\"chips.length ? '' : placeholder()\"\n        [attr.disabled]=\"disabled() ? true : null\"\n        [value]=\"chips.length ? '' : ''\"\n        (input)=\"_onInput($event)\"\n        (click)=\"$event.stopPropagation()\"\n      />\n    </div>\n\n    <i [class]=\"_iconCls() + ' pi pi-chevron-down'\"></i>\n  </label>\n\n  @if (_isOpen() || _isClosing()) {\n    <div\n      data-ms-panel\n      class=\"left-0 z-50 w-full min-w-60 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--radius-md)] shadow-lg overflow-hidden text-[var(--color-text)]\"\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.ms-fade-in]=\"_isOpen() && !_isClosing()\"\n      [class.ms-fade-out]=\"_isClosing()\"\n      (click)=\"_onPanelClick($event)\">\n\n      @if (searchable()) {\n        <div class=\"px-2 pt-2\">\n          <input\n            data-ms-search\n            type=\"text\"\n            class=\"w-full px-2 py-1.5 text-sm border border-[var(--color-border)] rounded outline-none bg-[var(--color-surface)] text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] focus:border-[var(--color-accent)]\"\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=\"overflow-y-auto\"\n        [style.max-height]=\"_maxHeight()\"\n        (scroll)=\"$event.stopPropagation()\">\n\n        @if (selectAll() && _filteredOptions().length > 0) {\n          <button\n            type=\"button\"\n            [class]=\"_optionCls()\"\n            (click)=\"_toggleSelectAll()\"\n          >\n            <span\n              class=\"inline-flex items-center justify-center w-4 h-4 rounded border text-[10px] shrink-0 transition-colors\"\n              [style.border-color]=\"'var(--drop-border)'\"\n              [style.background-color]=\"_allFilteredSelected() ? 'var(--drop-accent)' : 'transparent'\"\n              [style.color]=\"_allFilteredSelected() ? 'white' : 'transparent'\"\n            >\n              @if (_allFilteredSelected()) { &#10003; }\n            </span>\n            <span class=\"font-medium\">{{ selectAllLabel() }}</span>\n          </button>\n          <div class=\"h-px mx-2\" [style.background-color]=\"'var(--drop-border)'\"></div>\n        }\n\n        @for (option of _filteredOptions(); track option.value) {\n          <button\n            type=\"button\"\n            [class]=\"_optionCls()\"\n            [class.selected]=\"_isSelected(_optVal(option))\"\n            (click)=\"_toggleOption(option)\"\n          >\n            <span\n              class=\"inline-flex items-center justify-center w-4 h-4 rounded border text-[10px] shrink-0 transition-colors\"\n              [style.border-color]=\"_isSelected(_optVal(option)) ? 'var(--color-accent)' : 'var(--drop-border)'\"\n              [style.background-color]=\"_isSelected(_optVal(option)) ? 'var(--color-accent)' : 'transparent'\"\n              [style.color]=\"_isSelected(_optVal(option)) ? 'white' : 'transparent'\"\n            >\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=\"px-3 py-4 text-center text-sm text-[var(--drop-muted)]\">No results found</div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (hint() && !error()) {\n  <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--drop-accent: var(--color-accent, oklch(.64 .2 50));--drop-bg: var(--color-surface, oklch(.99 0 0));--drop-border: var(--color-border, oklch(.83 .015 260));--drop-text: var(--color-text, oklch(.14 .01 260));--drop-muted: var(--color-text-muted, oklch(.48 .01 260));--drop-surface: var(--color-surface-alt, oklch(.975 .005 260));--drop-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\"]){--drop-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--drop-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--drop-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--drop-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--drop-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--drop-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--drop-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error input{border-color:var(--color-danger, oklch(.55 .25 25))!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger, oklch(.55 .25 25)) 20%,transparent)!important}.ms-fade-in{animation:msIn .2s ease}.ms-fade-out{animation:msOut .15s ease forwards}@keyframes msIn{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes msOut{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}.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(--drop-accent) 15%,transparent);color:var(--drop-accent);line-height:1.5}.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}.ms-chip-remove:hover{background:color-mix(in srgb,var(--drop-accent) 20%,transparent)}.ms-option.selected{background-color:var(--color-accent)!important;color:var(--color-primary-inverse, oklch(.99 0 0))!important}\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.--drop-accent]': '_rawAccent',
+                        '[style.width]': '_width',
+                        '(window:scroll)': '_onWindowScroll()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative ms-wrapper\">\n  <label class=\"flex items-center w-full cursor-text\" (click)=\"_onTriggerClick($event)\">\n    @let chips = _selectedLabels();\n\n    <div class=\"!flex flex-wrap items-center gap-1 min-h-0 h-auto cursor-pointer py-1.5 w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--drop-bg)] border border-[var(--drop-border)] rounded-[var(--drop-radius)] text-[var(--drop-text)] font-[var(--font-sans)] disabled:opacity-50 disabled:cursor-not-allowed\"\n      [class]=\"_inputSizeCls()\"\n    >\n      @for (label of chips; track label) {\n        <span class=\"ms-chip\">\n          {{ label }}\n          <button type=\"button\" class=\"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=\"flex-1 min-w-[50px] outline-none border-none bg-transparent text-[var(--drop-text)] placeholder:text-[var(--drop-muted)]\"\n        [class.text-xs]=\"size() === 'sm'\"\n        [class.text-sm]=\"size() !== 'sm'\"\n        [style.height]=\"size() === 'sm' ? '1.25rem' : '1.5rem'\"\n        [attr.placeholder]=\"chips.length ? '' : placeholder()\"\n        [attr.disabled]=\"disabled() ? true : null\"\n        [value]=\"chips.length ? '' : ''\"\n        (input)=\"_onInput($event)\"\n        (click)=\"$event.stopPropagation()\"\n      />\n    </div>\n\n    <i [class]=\"_iconCls() + ' pi pi-chevron-down'\"></i>\n  </label>\n\n  @if (_isOpen() || _isClosing()) {\n    <div\n      data-ms-panel\n      class=\"left-0 z-50 w-full min-w-60 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--radius-md)] shadow-lg overflow-hidden text-[var(--color-text)]\"\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.ms-fade-in]=\"_isOpen() && !_isClosing()\"\n      [class.ms-fade-out]=\"_isClosing()\"\n      (click)=\"_onPanelClick($event)\">\n\n      @if (searchable()) {\n        <div class=\"px-2 pt-2\">\n          <input\n            data-ms-search\n            type=\"text\"\n            class=\"w-full px-2 py-1.5 text-sm border border-[var(--color-border)] rounded outline-none bg-[var(--color-surface)] text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] focus:border-[var(--color-accent)]\"\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=\"overflow-y-auto\"\n        [style.max-height]=\"_maxHeight()\"\n        (scroll)=\"$event.stopPropagation()\">\n\n        @if (selectAll() && _filteredOptions().length > 0) {\n          <button\n            type=\"button\"\n            [class]=\"_optionCls()\"\n            (click)=\"_toggleSelectAll()\"\n          >\n            <span\n              class=\"inline-flex items-center justify-center w-4 h-4 rounded border text-[10px] shrink-0 transition-colors\"\n              [style.border-color]=\"'var(--drop-border)'\"\n              [style.background-color]=\"_allFilteredSelected() ? 'var(--drop-accent)' : 'transparent'\"\n              [style.color]=\"_allFilteredSelected() ? 'white' : 'transparent'\"\n            >\n              @if (_allFilteredSelected()) { &#10003; }\n            </span>\n            <span class=\"font-medium\">{{ selectAllLabel() }}</span>\n          </button>\n          <div class=\"h-px mx-2\" [style.background-color]=\"'var(--drop-border)'\"></div>\n        }\n\n        @for (option of _filteredOptions(); track option.value) {\n          <button\n            type=\"button\"\n            [class]=\"_optionCls()\"\n            [class.selected]=\"_isSelected(_optVal(option))\"\n            (click)=\"_toggleOption(option)\"\n          >\n            <span\n              class=\"inline-flex items-center justify-center w-4 h-4 rounded border text-[10px] shrink-0 transition-colors\"\n              [style.border-color]=\"_isSelected(_optVal(option)) ? 'var(--color-accent)' : 'var(--drop-border)'\"\n              [style.background-color]=\"_isSelected(_optVal(option)) ? 'var(--color-accent)' : 'transparent'\"\n              [style.color]=\"_isSelected(_optVal(option)) ? 'white' : 'transparent'\"\n            >\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=\"px-3 py-4 text-center text-sm text-[var(--drop-muted)]\">No results found</div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (hint() && !error()) {\n  <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--drop-accent: var(--color-accent, oklch(.64 .2 50));--drop-bg: var(--color-surface, oklch(.99 0 0));--drop-border: var(--color-border, oklch(.83 .015 260));--drop-text: var(--color-text, oklch(.14 .01 260));--drop-muted: var(--color-text-muted, oklch(.48 .01 260));--drop-surface: var(--color-surface-alt, oklch(.975 .005 260));--drop-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\"]){--drop-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--drop-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--drop-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--drop-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--drop-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--drop-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--drop-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error input{border-color:var(--color-danger, oklch(.55 .25 25))!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger, oklch(.55 .25 25)) 20%,transparent)!important}.ms-fade-in{animation:msIn .2s ease}.ms-fade-out{animation:msOut .15s ease forwards}@keyframes msIn{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes msOut{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}.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(--drop-accent) 15%,transparent);color:var(--drop-accent);line-height:1.5}.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}.ms-chip-remove:hover{background:color-mix(in srgb,var(--drop-accent) 20%,transparent)}.ms-option.selected{background-color:var(--color-accent)!important;color:var(--color-primary-inverse, oklch(.99 0 0))!important}\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" }] : []));
+    _inputSizeCls = computed(() => {
+        return this.size() === 'sm' ? 'py-1 pr-8 pl-2 text-xs' : this.size() === 'lg' ? 'py-3 pr-11 pl-4 text-base' : 'py-2 pr-10 pl-3 text-sm';
+    }, ...(ngDevMode ? [{ debugName: "_inputSizeCls" }] : []));
+    _toggleCls = computed(() => {
+        const base = 'absolute flex items-center justify-center p-0 border-none rounded-full bg-transparent cursor-pointer text-[var(--password-muted)] transition-[color,background] duration-150 hover:text-[var(--password-text)] hover:bg-[var(--color-surface-alt)]';
+        const s = this.size();
+        const pos = s === 'sm' ? 'right-1 w-5 h-5' : s === 'lg' ? 'right-2 w-6 h-6' : 'right-1.5 w-6 h-6';
+        const icon = s === 'sm' ? 'text-xs' : s === 'lg' ? 'text-lg' : 'text-sm';
+        return `${base} ${pos} ${icon}`;
+    }, ...(ngDevMode ? [{ debugName: "_toggleCls" }] : []));
+    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.--password-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<label class=\"relative flex items-center w-full\">\n  <input\n    class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--password-bg)] border border-[var(--password-border)] rounded-[var(--password-radius)] text-[var(--password-text)] font-[var(--font-sans)] placeholder:text-[var(--password-muted)] disabled:opacity-50 disabled:cursor-not-allowed focus:border-[var(--password-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--password-accent)_20%,transparent)]\"\n    [class]=\"_inputSizeCls()\"\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]=\"_toggleCls()\"\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=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--password-accent: var(--color-primary);--password-bg: var(--color-surface);--password-border: var(--color-border);--password-text: var(--color-text);--password-muted: var(--color-text-muted);--password-radius: var(--radius-md);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\"]){--password-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--password-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--password-accent: var(--color-accent)}:host([data-accent=\"success\"]){--password-accent: var(--color-success)}:host([data-accent=\"warning\"]){--password-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--password-accent: var(--color-danger)}:host([data-accent=\"info\"]){--password-accent: var(--color-info)}:host.has-error input{border-color:var(--color-danger)!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes 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.--password-accent]': '_rawAccent',
+                        '[style.width]': '_width',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"relative flex items-center w-full\">\n  <input\n    class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--password-bg)] border border-[var(--password-border)] rounded-[var(--password-radius)] text-[var(--password-text)] font-[var(--font-sans)] placeholder:text-[var(--password-muted)] disabled:opacity-50 disabled:cursor-not-allowed focus:border-[var(--password-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--password-accent)_20%,transparent)]\"\n    [class]=\"_inputSizeCls()\"\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]=\"_toggleCls()\"\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=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--password-accent: var(--color-primary);--password-bg: var(--color-surface);--password-border: var(--color-border);--password-text: var(--color-text);--password-muted: var(--color-text-muted);--password-radius: var(--radius-md);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\"]){--password-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--password-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--password-accent: var(--color-accent)}:host([data-accent=\"success\"]){--password-accent: var(--color-success)}:host([data-accent=\"warning\"]){--password-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--password-accent: var(--color-danger)}:host([data-accent=\"info\"]){--password-accent: var(--color-info)}:host.has-error input{border-color:var(--color-danger)!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes 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" }] : []));
+    _iconCls = computed(() => {
+        const l = this.size() === 'sm' ? 'left-2' : this.size() === 'lg' ? 'left-3.5' : 'left-3';
+        const f = this.size() === 'sm' ? 'text-xs' : this.size() === 'lg' ? 'text-lg' : 'text-sm';
+        return `absolute ${l} flex pointer-events-none transition-colors duration-200 text-[var(--search-muted)] ${f}`;
+    }, ...(ngDevMode ? [{ debugName: "_iconCls" }] : []));
+    _inputSizeCls = computed(() => {
+        const s = this.size();
+        return s === 'sm' ? 'py-1 px-8 text-xs' : s === 'lg' ? 'py-3 px-11 text-base' : 'py-2 pl-10 pr-10 text-sm';
+    }, ...(ngDevMode ? [{ debugName: "_inputSizeCls" }] : []));
+    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.--search-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<label class=\"relative flex items-center w-full\">\n  <span [class]=\"_iconCls()\" aria-hidden=\"true\">\n    <i class=\"pi pi-search\"></i>\n  </span>\n\n  <input\n    class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--search-bg)] border border-[var(--search-border)] rounded-[var(--search-radius)] text-[var(--search-text)] font-[var(--font-sans)] placeholder:text-[var(--search-muted)] disabled:opacity-50 disabled:cursor-not-allowed focus:border-[var(--search-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--search-accent)_20%,transparent)]\"\n    [class]=\"_inputSizeCls()\"\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=\"absolute right-2 flex items-center justify-center w-6 h-6 p-0 border-none rounded-full bg-transparent cursor-pointer text-[var(--search-muted)] transition-[color,background] duration-150 hover:text-[var(--search-text)] hover:bg-[var(--color-surface-alt)]\" type=\"button\" (click)=\"value.set('')\" aria-label=\"Clear search\">\n      <i class=\"pi pi-times\"></i>\n    </button>\n  }\n</label>\n\n@if (hint() && !error()) {\n  <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--search-accent: var(--color-primary);--search-bg: var(--color-surface);--search-border: var(--color-border);--search-text: var(--color-text);--search-muted: var(--color-text-muted);--search-radius: var(--radius-md);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\"]){--search-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--search-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--search-accent: var(--color-accent)}:host([data-accent=\"success\"]){--search-accent: var(--color-success)}:host([data-accent=\"warning\"]){--search-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--search-accent: var(--color-danger)}:host([data-accent=\"info\"]){--search-accent: var(--color-info)}.search-input::-webkit-search-decoration,.search-input::-webkit-search-cancel-button,.search-input::-webkit-search-results-button,.search-input::-webkit-search-results-decoration{display:none}:host.has-error input{border-color:var(--color-danger)!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes 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.--search-accent]': '_rawAccent',
+                        '[style.width]': '_width',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"relative flex items-center w-full\">\n  <span [class]=\"_iconCls()\" aria-hidden=\"true\">\n    <i class=\"pi pi-search\"></i>\n  </span>\n\n  <input\n    class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--search-bg)] border border-[var(--search-border)] rounded-[var(--search-radius)] text-[var(--search-text)] font-[var(--font-sans)] placeholder:text-[var(--search-muted)] disabled:opacity-50 disabled:cursor-not-allowed focus:border-[var(--search-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--search-accent)_20%,transparent)]\"\n    [class]=\"_inputSizeCls()\"\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=\"absolute right-2 flex items-center justify-center w-6 h-6 p-0 border-none rounded-full bg-transparent cursor-pointer text-[var(--search-muted)] transition-[color,background] duration-150 hover:text-[var(--search-text)] hover:bg-[var(--color-surface-alt)]\" type=\"button\" (click)=\"value.set('')\" aria-label=\"Clear search\">\n      <i class=\"pi pi-times\"></i>\n    </button>\n  }\n</label>\n\n@if (hint() && !error()) {\n  <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--search-accent: var(--color-primary);--search-bg: var(--color-surface);--search-border: var(--color-border);--search-text: var(--color-text);--search-muted: var(--color-text-muted);--search-radius: var(--radius-md);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\"]){--search-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--search-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--search-accent: var(--color-accent)}:host([data-accent=\"success\"]){--search-accent: var(--color-success)}:host([data-accent=\"warning\"]){--search-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--search-accent: var(--color-danger)}:host([data-accent=\"info\"]){--search-accent: var(--color-info)}.search-input::-webkit-search-decoration,.search-input::-webkit-search-cancel-button,.search-input::-webkit-search-results-button,.search-input::-webkit-search-results-decoration{display:none}:host.has-error input{border-color:var(--color-danger)!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes 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" }] : []));
+    _inputSizeCls = computed(() => {
+        return this.size() === 'sm' ? 'py-1 px-2 text-xs' : this.size() === 'lg' ? 'py-3 px-4 text-base' : 'py-2 px-3 text-sm';
+    }, ...(ngDevMode ? [{ debugName: "_inputSizeCls" }] : []));
+    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.--text-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<input\n  class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--text-bg)] border border-[var(--text-border)] rounded-[var(--text-radius)] text-[var(--text-text)] font-[var(--font-sans)] placeholder:text-[var(--text-muted)] disabled:opacity-50 disabled:cursor-not-allowed focus:border-[var(--text-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--text-accent)_20%,transparent)]\"\n  [class]=\"_inputSizeCls()\"\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=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--text-accent: var(--color-primary);--text-bg: var(--color-surface);--text-border: var(--color-border);--text-text: var(--color-text);--text-muted: var(--color-text-muted);--text-radius: var(--radius-md);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\"]){--text-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--text-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--text-accent: var(--color-accent)}:host([data-accent=\"success\"]){--text-accent: var(--color-success)}:host([data-accent=\"warning\"]){--text-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--text-accent: var(--color-danger)}:host([data-accent=\"info\"]){--text-accent: var(--color-info)}:host.has-error input{border-color:var(--color-danger)!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes 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.--text-accent]': '_rawAccent',
+                        '[style.width]': '_width',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n  class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--text-bg)] border border-[var(--text-border)] rounded-[var(--text-radius)] text-[var(--text-text)] font-[var(--font-sans)] placeholder:text-[var(--text-muted)] disabled:opacity-50 disabled:cursor-not-allowed focus:border-[var(--text-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--text-accent)_20%,transparent)]\"\n  [class]=\"_inputSizeCls()\"\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=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--text-accent: var(--color-primary);--text-bg: var(--color-surface);--text-border: var(--color-border);--text-text: var(--color-text);--text-muted: var(--color-text-muted);--text-radius: var(--radius-md);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\"]){--text-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--text-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--text-accent: var(--color-accent)}:host([data-accent=\"success\"]){--text-accent: var(--color-success)}:host([data-accent=\"warning\"]){--text-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--text-accent: var(--color-danger)}:host([data-accent=\"info\"]){--text-accent: var(--color-info)}:host.has-error input{border-color:var(--color-danger)!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes 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.--toggle-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<label class=\"toggle-field\">\n  @if (label()) {\n    <span class=\"toggle-label\">{{ label() }}</span>\n  }\n\n  <button\n    class=\"toggle-track\"\n    type=\"button\"\n    role=\"switch\"\n    [attr.aria-checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"toggle-knob\"></span>\n  </button>\n</label>\n\n@if (hint() && !error()) {\n  <span class=\"field-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"field-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [":host{--toggle-accent: var(--color-primary);--toggle-bg: var(--color-text-muted);--toggle-knob: var(--color-surface);--toggle-knob-border: var(--color-border-light);--toggle-muted: var(--color-text-muted);--toggle-text: var(--color-text);--toggle-radius: var(--radius-full);position:relative;display:inline-flex;flex-direction:column;padding-bottom:1.375rem}.toggle-field{display:inline-flex;align-items:center;gap:.625rem;cursor:default}.toggle-label{font-family:var(--font-sans);font-size:.875rem;color:var(--toggle-text);-webkit-user-select:none;user-select:none}.toggle-track{position:relative;display:inline-flex;align-items:center;padding:3px;border:none;border-radius:var(--toggle-radius);background:var(--toggle-bg);cursor:pointer;transition:background .2s ease}.toggle-track:focus-visible{outline:2px solid var(--toggle-accent);outline-offset:2px}.toggle-track:disabled{opacity:.5;cursor:not-allowed}.toggle-knob{position:absolute;top:3px;left:3px;background:var(--toggle-knob);border:1px solid var(--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(.is-checked) .toggle-track{background:var(--toggle-accent)}:host(.is-checked) .toggle-knob{left:calc(100% - var(--toggle-knob-size) - 3px)}.field-hint,.field-error{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}.field-hint{color:var(--color-text-muted)}.field-error{color:var(--color-danger)}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-size=\"sm\"]){--toggle-knob-size: .875rem}:host([data-size=\"sm\"]) .toggle-track{width:2.125rem;height:1.25rem}:host([data-size=\"sm\"]) .toggle-knob{width:.875rem;height:.875rem}:host([data-size=\"sm\"]) .toggle-label{font-size:.75rem}:host([data-size=\"md\"]){--toggle-knob-size: 1.125rem}:host([data-size=\"md\"]) .toggle-track{width:2.75rem;height:1.5rem}:host([data-size=\"md\"]) .toggle-knob{width:1.125rem;height:1.125rem}:host([data-size=\"md\"]) .toggle-label{font-size:.875rem}:host([data-size=\"lg\"]){--toggle-knob-size: 1.375rem}:host([data-size=\"lg\"]) .toggle-track{width:3.25rem;height:1.75rem}:host([data-size=\"lg\"]) .toggle-knob{width:1.375rem;height:1.375rem}:host([data-size=\"lg\"]) .toggle-label{font-size:1rem}:host([data-accent=\"primary\"]){--toggle-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--toggle-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--toggle-accent: var(--color-accent)}:host([data-accent=\"success\"]){--toggle-accent: var(--color-success)}:host([data-accent=\"warning\"]){--toggle-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--toggle-accent: var(--color-danger)}:host([data-accent=\"info\"]){--toggle-accent: var(--color-info)}:host(.has-error) .toggle-track{outline:2px solid var(--color-danger)}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes 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.--toggle-accent]': '_rawAccent',
+                        '[style.width]': '_width',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"toggle-field\">\n  @if (label()) {\n    <span class=\"toggle-label\">{{ label() }}</span>\n  }\n\n  <button\n    class=\"toggle-track\"\n    type=\"button\"\n    role=\"switch\"\n    [attr.aria-checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"toggle-knob\"></span>\n  </button>\n</label>\n\n@if (hint() && !error()) {\n  <span class=\"field-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n  <span class=\"field-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [":host{--toggle-accent: var(--color-primary);--toggle-bg: var(--color-text-muted);--toggle-knob: var(--color-surface);--toggle-knob-border: var(--color-border-light);--toggle-muted: var(--color-text-muted);--toggle-text: var(--color-text);--toggle-radius: var(--radius-full);position:relative;display:inline-flex;flex-direction:column;padding-bottom:1.375rem}.toggle-field{display:inline-flex;align-items:center;gap:.625rem;cursor:default}.toggle-label{font-family:var(--font-sans);font-size:.875rem;color:var(--toggle-text);-webkit-user-select:none;user-select:none}.toggle-track{position:relative;display:inline-flex;align-items:center;padding:3px;border:none;border-radius:var(--toggle-radius);background:var(--toggle-bg);cursor:pointer;transition:background .2s ease}.toggle-track:focus-visible{outline:2px solid var(--toggle-accent);outline-offset:2px}.toggle-track:disabled{opacity:.5;cursor:not-allowed}.toggle-knob{position:absolute;top:3px;left:3px;background:var(--toggle-knob);border:1px solid var(--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(.is-checked) .toggle-track{background:var(--toggle-accent)}:host(.is-checked) .toggle-knob{left:calc(100% - var(--toggle-knob-size) - 3px)}.field-hint,.field-error{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}.field-hint{color:var(--color-text-muted)}.field-error{color:var(--color-danger)}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-size=\"sm\"]){--toggle-knob-size: .875rem}:host([data-size=\"sm\"]) .toggle-track{width:2.125rem;height:1.25rem}:host([data-size=\"sm\"]) .toggle-knob{width:.875rem;height:.875rem}:host([data-size=\"sm\"]) .toggle-label{font-size:.75rem}:host([data-size=\"md\"]){--toggle-knob-size: 1.125rem}:host([data-size=\"md\"]) .toggle-track{width:2.75rem;height:1.5rem}:host([data-size=\"md\"]) .toggle-knob{width:1.125rem;height:1.125rem}:host([data-size=\"md\"]) .toggle-label{font-size:.875rem}:host([data-size=\"lg\"]){--toggle-knob-size: 1.375rem}:host([data-size=\"lg\"]) .toggle-track{width:3.25rem;height:1.75rem}:host([data-size=\"lg\"]) .toggle-knob{width:1.375rem;height:1.375rem}:host([data-size=\"lg\"]) .toggle-label{font-size:1rem}:host([data-accent=\"primary\"]){--toggle-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--toggle-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--toggle-accent: var(--color-accent)}:host([data-accent=\"success\"]){--toggle-accent: var(--color-success)}:host([data-accent=\"warning\"]){--toggle-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--toggle-accent: var(--color-danger)}:host([data-accent=\"info\"]){--toggle-accent: var(--color-info)}:host(.has-error) .toggle-track{outline:2px solid var(--color-danger)}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes 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(() => {
+        const sizes = {
+            sm: 'px-1.5 py-0.5 text-[10px]',
+            md: 'px-2 py-0.5 text-xs',
+            lg: 'px-2.5 py-1 text-sm',
+        };
+        return sizes[this.size()] ?? sizes.sm;
+    }, ...(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 } }, ngImport: i0, template: "<span class=\"inline-flex items-center gap-1 font-medium rounded-[var(--radius-sm,0.25rem)] whitespace-nowrap\" [style]=\"_style()\" [class]=\"_sizeCls()\">\n  @if (dot()) {\n    <span class=\"rounded-full shrink-0\" style=\"width:6px;height:6px;background-color:currentColor\"></span>\n  }\n  <ng-content />\n</span>\n", styles: [":host{display:inline-flex}\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: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"inline-flex items-center gap-1 font-medium rounded-[var(--radius-sm,0.25rem)] whitespace-nowrap\" [style]=\"_style()\" [class]=\"_sizeCls()\">\n  @if (dot()) {\n    <span class=\"rounded-full shrink-0\" style=\"width:6px;height:6px;background-color:currentColor\"></span>\n  }\n  <ng-content />\n</span>\n", styles: [":host{display:inline-flex}\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;transition:background .15s;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;transition:background .15s;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=\"flex flex-col items-center justify-center gap-3 px-4 py-12 text-center\" [style.width]=\"width() || '100%'\">\n  @if (icon()) {\n    <div class=\"flex items-center justify-center w-14 h-14 rounded-full bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\">\n      <i [class]=\"icon()\" class=\"text-lg text-[var(--color-text-muted,oklch(0.48 0.01 260))]\"></i>\n    </div>\n  }\n  @if (title()) {\n    <h3 class=\"text-base font-semibold text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ title() }}</h3>\n  }\n  @if (message()) {\n    <p class=\"text-sm text-[var(--color-text-muted,oklch(0.48 0.01 260))] max-w-xs\">{{ message() }}</p>\n  }\n  <ng-content />\n</div>\n", styles: [":host{display:contents}\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=\"flex flex-col items-center justify-center gap-3 px-4 py-12 text-center\" [style.width]=\"width() || '100%'\">\n  @if (icon()) {\n    <div class=\"flex items-center justify-center w-14 h-14 rounded-full bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\">\n      <i [class]=\"icon()\" class=\"text-lg text-[var(--color-text-muted,oklch(0.48 0.01 260))]\"></i>\n    </div>\n  }\n  @if (title()) {\n    <h3 class=\"text-base font-semibold text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ title() }}</h3>\n  }\n  @if (message()) {\n    <p class=\"text-sm text-[var(--color-text-muted,oklch(0.48 0.01 260))] max-w-xs\">{{ message() }}</p>\n  }\n  <ng-content />\n</div>\n", styles: [":host{display:contents}\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=\"preview-grid\">\n    @for (img of images(); track img.url; let i = $index) {\n      <div class=\"preview-item\">\n        <img [src]=\"img.url\" [alt]=\"img.file.name\" />\n        <div class=\"preview-item-overlay\">\n          <button type=\"button\" class=\"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=\"add-btn\" (click)=\"_input.click()\" title=\"Add image\">\n        <i class=\"pi pi-plus text-lg\"></i>\n        <span>Add</span>\n      </button>\n    }\n  </div>\n} @else {\n  <div\n    class=\"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 text-2xl\"></i>\n    <span class=\"text-xs\">{{ placeholder() }}</span>\n    @if (maxSize()) {\n      <span class=\"text-[10px] opacity-60\">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=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)]\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [":host{--iu-accent: var(--color-accent, oklch(.64 .2 50));--iu-bg: var(--color-surface, oklch(.99 0 0));--iu-border: var(--color-border, oklch(.83 .015 260));--iu-text: var(--color-text, oklch(.14 .01 260));--iu-muted: var(--color-text-muted, oklch(.48 .01 260));--iu-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}.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(--iu-border);border-radius:var(--iu-radius);background:var(--iu-bg);cursor:pointer;transition:all .2s ease;color:var(--iu-muted);text-align:center}.drop-zone:hover,.drop-zone.is-dragover{border-color:var(--iu-accent);background:color-mix(in srgb,var(--iu-accent) 6%,var(--iu-bg));color:var(--iu-text)}.drop-zone.has-preview{border-style:solid;border-color:transparent;background:transparent;min-height:auto;padding:0;cursor:default}.drop-zone.has-preview:hover{border-color:transparent;background:transparent}.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.5rem}.preview-item{position:relative;aspect-ratio:1;border-radius:calc(var(--iu-radius) - 2px);overflow:hidden;border:1px solid var(--iu-border);background:color-mix(in srgb,var(--iu-accent) 4%,var(--iu-bg))}.preview-item img{width:100%;height:100%;object-fit:cover;display:block}.preview-item-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%)}.preview-item:hover .preview-item-overlay{opacity:1}.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}.remove-btn:hover{background:var(--color-danger, oklch(.55 .22 25))}.add-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;border:2px dashed var(--iu-border);border-radius:calc(var(--iu-radius) - 2px);background:transparent;cursor:pointer;color:var(--iu-muted);font-size:.75rem;gap:.25rem;transition:all .2s}.add-btn:hover{border-color:var(--iu-accent);color:var(--iu-accent);background:color-mix(in srgb,var(--iu-accent) 6%,var(--iu-bg))}.error-enter{animation:error-in .25s ease-out}.error-leave{animation:error-out .2s ease-in forwards}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes 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=\"preview-grid\">\n    @for (img of images(); track img.url; let i = $index) {\n      <div class=\"preview-item\">\n        <img [src]=\"img.url\" [alt]=\"img.file.name\" />\n        <div class=\"preview-item-overlay\">\n          <button type=\"button\" class=\"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=\"add-btn\" (click)=\"_input.click()\" title=\"Add image\">\n        <i class=\"pi pi-plus text-lg\"></i>\n        <span>Add</span>\n      </button>\n    }\n  </div>\n} @else {\n  <div\n    class=\"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 text-2xl\"></i>\n    <span class=\"text-xs\">{{ placeholder() }}</span>\n    @if (maxSize()) {\n      <span class=\"text-[10px] opacity-60\">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=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)]\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [":host{--iu-accent: var(--color-accent, oklch(.64 .2 50));--iu-bg: var(--color-surface, oklch(.99 0 0));--iu-border: var(--color-border, oklch(.83 .015 260));--iu-text: var(--color-text, oklch(.14 .01 260));--iu-muted: var(--color-text-muted, oklch(.48 .01 260));--iu-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}.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(--iu-border);border-radius:var(--iu-radius);background:var(--iu-bg);cursor:pointer;transition:all .2s ease;color:var(--iu-muted);text-align:center}.drop-zone:hover,.drop-zone.is-dragover{border-color:var(--iu-accent);background:color-mix(in srgb,var(--iu-accent) 6%,var(--iu-bg));color:var(--iu-text)}.drop-zone.has-preview{border-style:solid;border-color:transparent;background:transparent;min-height:auto;padding:0;cursor:default}.drop-zone.has-preview:hover{border-color:transparent;background:transparent}.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.5rem}.preview-item{position:relative;aspect-ratio:1;border-radius:calc(var(--iu-radius) - 2px);overflow:hidden;border:1px solid var(--iu-border);background:color-mix(in srgb,var(--iu-accent) 4%,var(--iu-bg))}.preview-item img{width:100%;height:100%;object-fit:cover;display:block}.preview-item-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%)}.preview-item:hover .preview-item-overlay{opacity:1}.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}.remove-btn:hover{background:var(--color-danger, oklch(.55 .22 25))}.add-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;border:2px dashed var(--iu-border);border-radius:calc(var(--iu-radius) - 2px);background:transparent;cursor:pointer;color:var(--iu-muted);font-size:.75rem;gap:.25rem;transition:all .2s}.add-btn:hover{border-color:var(--iu-accent);color:var(--iu-accent);background:color-mix(in srgb,var(--iu-accent) 6%,var(--iu-bg))}.error-enter{animation:error-in .25s ease-out}.error-leave{animation:error-out .2s ease-in forwards}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes 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=\"flex flex-col gap-2\" [style.width]=\"_baseWidth()\">\n  @for (item of _items(); track $index) {\n    <div\n      class=\"skeleton-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}.skeleton-pulse{animation:skeletonPulse 1.5s ease-in-out infinite}@keyframes skeletonPulse{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=\"flex flex-col gap-2\" [style.width]=\"_baseWidth()\">\n  @for (item of _items(); track $index) {\n    <div\n      class=\"skeleton-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}.skeleton-pulse{animation:skeletonPulse 1.5s ease-in-out infinite}@keyframes skeletonPulse{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 'rounded-full';
+            case 'action': return 'rounded-md';
+            default: return 'rounded-[var(--radius-sm,0.25rem)]';
+        }
+    }
+    _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=\"overflow-hidden rounded-[var(--radius-lg,0.75rem)] border border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n  <table class=\"w-full border-collapse\">\n    <thead>\n      <tr>\n        @for (col of _cols(); track $index) {\n          <th\n            class=\"px-3 py-2.5\"\n            [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n            [style.width]=\"_colWidth()[$index]\"\n          >\n            <div class=\"skeleton-shimmer rounded-[var(--radius-sm,0.25rem)]\" 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=\"border-b border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n          @for (col of _cols(); track $index) {\n            <td class=\"px-3 py-2.5\">\n              <div\n                class=\"skeleton-shimmer\"\n                [class]=\"_shapeClass(col.shape)\"\n                [style]=\"_shapeSize(col.shape)\"\n                [class.mx-auto]=\"col.shape === 'circle'\"\n              ></div>\n            </td>\n          }\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n", styles: [":host{display:block}.skeleton-shimmer{background:var(--color-surface-alt, oklch(.975 .005 260));animation:skeletonPulse 1.5s ease-in-out infinite}thead .skeleton-shimmer{background:#fff3}@keyframes skeletonPulse{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=\"overflow-hidden rounded-[var(--radius-lg,0.75rem)] border border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n  <table class=\"w-full border-collapse\">\n    <thead>\n      <tr>\n        @for (col of _cols(); track $index) {\n          <th\n            class=\"px-3 py-2.5\"\n            [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n            [style.width]=\"_colWidth()[$index]\"\n          >\n            <div class=\"skeleton-shimmer rounded-[var(--radius-sm,0.25rem)]\" 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=\"border-b border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n          @for (col of _cols(); track $index) {\n            <td class=\"px-3 py-2.5\">\n              <div\n                class=\"skeleton-shimmer\"\n                [class]=\"_shapeClass(col.shape)\"\n                [style]=\"_shapeSize(col.shape)\"\n                [class.mx-auto]=\"col.shape === 'circle'\"\n              ></div>\n            </td>\n          }\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n", styles: [":host{display:block}.skeleton-shimmer{background:var(--color-surface-alt, oklch(.975 .005 260));animation:skeletonPulse 1.5s ease-in-out infinite}thead .skeleton-shimmer{background:#fff3}@keyframes skeletonPulse{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" }] : []));
+    _onMouseEnter() {
+        if (this.disabled())
+            return;
+        const content = this._el.nativeElement.querySelector('[data-tip-content]');
+        if (content && !this.alwaysShow()) {
+            if (content.scrollWidth <= content.clientWidth)
+                return;
+        }
+        this._visible.set(true);
+    }
+    _onMouseLeave() {
+        this._visible.set(false);
+    }
+    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()", "mouseleave": "_onMouseLeave()" } }, ngImport: i0, template: "<div data-tip-content\n  class=\"truncate\"\n>\n  <ng-content />\n</div>\n@if (_visible()) {\n  <div class=\"tooltip-panel tooltip-{{ position() }}\"\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%}.tooltip-panel{position:absolute;z-index:999;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))}.tooltip-top{bottom:100%;left:50%;translate:-50% 0;margin-bottom:4px}.tooltip-bottom{top:100%;left:50%;translate:-50% 0;margin-top:4px}.tooltip-left{right:100%;top:50%;translate:0 -50%;margin-right:4px}.tooltip-right{left:100%;top:50%;translate:0 -50%;margin-left:4px}.tip-enter{animation:tipIn .12s ease-out}.tip-leave{animation:tipOut .08s ease-in forwards}@keyframes tipIn{0%{opacity:0}to{opacity:1}}@keyframes tipOut{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()',
+                        '(mouseleave)': '_onMouseLeave()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div data-tip-content\n  class=\"truncate\"\n>\n  <ng-content />\n</div>\n@if (_visible()) {\n  <div class=\"tooltip-panel tooltip-{{ position() }}\"\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%}.tooltip-panel{position:absolute;z-index:999;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))}.tooltip-top{bottom:100%;left:50%;translate:-50% 0;margin-bottom:4px}.tooltip-bottom{top:100%;left:50%;translate:-50% 0;margin-top:4px}.tooltip-left{right:100%;top:50%;translate:0 -50%;margin-right:4px}.tooltip-right{left:100%;top:50%;translate:0 -50%;margin-left:4px}.tip-enter{animation:tipIn .12s ease-out}.tip-leave{animation:tipOut .08s ease-in forwards}@keyframes tipIn{0%{opacity:0}to{opacity:1}}@keyframes tipOut{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=\"overflow-x-auto relative rounded-md\"\n    [style.width]=\"width() || '100%'\"\n    [style.border]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n  >\n    <table class=\"w-full border-collapse\" 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=\"relative px-3 py-2.5 text-xs whitespace-nowrap text-center\"\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              style=\"width:40px\"\n            >\n              <input type=\"checkbox\"\n                [checked]=\"_isAllSelected()\"\n                (change)=\"_toggleSelectAll()\"\n                class=\"cursor-pointer\"\n              />\n            </th>\n          }\n          @if (expandable()) {\n            <th class=\"relative px-3 py-2.5 text-xs whitespace-nowrap text-center\"\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              style=\"width:40px\"\n            ></th>\n          }\n          @for (col of _displayColumns(); track col.key) {\n            <th\n              class=\"group relative px-3 py-2.5 text-xs font-semibold uppercase tracking-wider whitespace-nowrap\"\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.cursor-pointer]=\"col.sortable && sortable()\"\n              [class.select-none]=\"col.sortable && sortable()\"\n              (click)=\"sortable() && col.sortable && _toggleSort(col.key)\"\n            >\n              {{ col.header }}\n              @if (col.sortable && sortable()) {\n                <i class=\"pi ml-1.5 text-[10px] align-middle\" [class]=\"_sortIcon(col.key)\"></i>\n              }\n              @if (resizable()) {\n                <div\n                  class=\"absolute right-0 top-0 bottom-0 w-2 cursor-col-resize z-10 transition-opacity duration-150 opacity-30 hover:opacity-100 group-hover:opacity-80\"\n                  [style.background]=\"'linear-gradient(90deg,transparent 33%,var(--color-accent,oklch(0.64 0.2 50)) 33%,var(--color-accent,oklch(0.64 0.2 50)) 66%,transparent 66%)'\"\n                  [style.background-size]=\"'100% 40%'\"\n                  [style.background-repeat]=\"'no-repeat'\"\n                  [style.background-position]=\"'center'\"\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=\"flex items-center flex-wrap gap-1.5\">\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=\"relative ml-auto\">\n                  <button\n                    type=\"button\"\n                    (click)=\"_columnToggleOpen.set(!_columnToggleOpen())\"\n                    class=\"inline-flex items-center gap-1 px-2 py-1 text-xs rounded-md border cursor-pointer transition-colors hover:opacity-80\"\n                    [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n                    [style.background-color]=\"'transparent'\"\n                    [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n                  ><i class=\"pi pi-list text-[10px]\"></i> Columns</button>\n                  @if (_columnToggleOpen()) {\n                    <div\n                      class=\"absolute top-full right-0 mt-1 min-w-[140px] p-1.5 rounded-md shadow-lg z-50 border\"\n                      [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n                      [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n                    >\n                      @for (col of columns(); track col.key) {\n                        <label\n                          class=\"flex items-center gap-2 px-2 py-1.5 text-xs rounded cursor-pointer whitespace-nowrap transition-colors\"\n                          [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n                        >\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=\"relative\">\n                    <button\n                      type=\"button\"\n                      (click)=\"_exportOpen.set(!_exportOpen())\"\n                      class=\"inline-flex items-center gap-1 px-2 py-1 text-xs rounded-md border cursor-pointer transition-colors hover:opacity-80\"\n                      [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n                      [style.background-color]=\"'transparent'\"\n                      [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n                    ><i class=\"pi pi-download text-[10px]\"></i> Export</button>\n                    @if (_exportOpen()) {\n                      <div\n                        class=\"absolute top-full left-0 mt-1 min-w-[100px] p-1 rounded-md shadow-lg z-50 border\"\n                        [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n                        [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\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=\"export-opt block w-full text-left px-2 py-1.5 text-xs rounded cursor-pointer border-none transition-colors\"\n                            [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n                            [style.background-color]=\"'transparent'\"\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()\"\n              class=\"px-3 py-8 text-center text-sm text-[var(--color-text-muted,oklch(0.48 0.01 260))]\"\n            >{{ emptyMessage() }}</td>\n          </tr>\n        } @else {\n          @for (row of _displayRows(); track _trackByIndex($index); let rowIndex = $index) {\n            <tr\n              class=\"border-b border-[var(--color-border-light,oklch(0.91 0.01 260))] transition-colors\"\n              [class.hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]]=\"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=\"px-3 py-2.5 text-center\">\n                  <input type=\"checkbox\"\n                    [checked]=\"_isSelected(row)\"\n                    (change)=\"_toggleSelect(row)\"\n                    class=\"cursor-pointer\"\n                  />\n                </td>\n              }\n              @if (expandable()) {\n                <td class=\"px-3 py-2.5 text-center\">\n                  <button\n                    type=\"button\"\n                    (click)=\"_toggleExpand(rowIndex)\"\n                    class=\"inline-flex items-center justify-center w-6 h-6 border-none bg-transparent cursor-pointer rounded transition-colors hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\"\n                    [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n                  >\n                    <i class=\"pi text-[10px]\" [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=\"px-3 py-2.5 text-sm text-[var(--color-text,oklch(0.14 0.01 260))]\"\n                    >\n                      @if (col.actions) {\n                        <div class=\"flex items-center gap-1\">\n                          @for (action of col.actions; track $index) {\n                            @if (!action.visible || action.visible(row)) {\n                              <button\n                                type=\"button\"\n                                class=\"inline-flex items-center justify-center gap-1 px-2 py-1 text-xs rounded-md border-none cursor-pointer transition-opacity disabled:cursor-not-allowed\"\n                                [style.background-color]=\"'transparent'\"\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=\"text-xs\"></i> }\n                                @if (action.label) { <span>{{ action.label }}</span> }\n                              </button>\n                            }\n                          }\n                        </div>\n                      } @else {\n                        @if (col.truncate) {\n                          <app-tooltip position=\"top\" [text]=\"_cellText(row, col)\">\n                            {{ _cellLabel(row, col) }}\n                          </app-tooltip>\n                        } @else {\n                          {{ _cellLabel(row, col) }}\n                        }\n                      }\n                  </td>\n                }\n              }\n            </tr>\n            @if (expandable() && _isExpanded(rowIndex)) {\n              <tr class=\"border-b border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n                <td [attr.colspan]=\"_colCount()\" class=\"p-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=\"p-3 text-sm text-[var(--color-text-muted,oklch(0.48 0.01 260))]\">No detail template</div>\n                    }\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n          @if (_footerCols().length) {\n            <tr class=\"border-t-2 font-medium\"\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=\"px-3 py-2.5 text-sm\"\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=\"flex items-center justify-between px-3 py-2 border-t border-[var(--color-border-light,oklch(0.91 0.01 260))]\"\n        [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n      >\n        <div class=\"flex items-center gap-2 text-xs text-[var(--color-text-muted,oklch(0.48 0.01 260))]\">\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=\"flex items-center gap-0.5\">\n          <button type=\"button\" (click)=\"_goToPage(1)\" [disabled]=\"_page() === 1\"\n            class=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed transition-colors\"\n            [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\" [style.background-color]=\"'transparent'\"\n          ><i class=\"pi pi-angle-double-left text-[10px]\"></i></button>\n          <button type=\"button\" (click)=\"_goToPage(_page() - 1)\" [disabled]=\"_page() === 1\"\n            class=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed transition-colors\"\n            [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\" [style.background-color]=\"'transparent'\"\n          ><i class=\"pi pi-angle-left text-[10px]\"></i></button>\n          @for (p of _visiblePages(); track p) {\n            <button type=\"button\" (click)=\"_goToPage(p)\"\n              class=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer transition-colors font-medium\"\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=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed transition-colors\"\n            [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\" [style.background-color]=\"'transparent'\"\n          ><i class=\"pi pi-angle-right text-[10px]\"></i></button>\n          <button type=\"button\" (click)=\"_goToPage(_totalPages())\" [disabled]=\"_page() === _totalPages()\"\n            class=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed transition-colors\"\n            [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\" [style.background-color]=\"'transparent'\"\n          ><i class=\"pi pi-angle-double-right text-[10px]\"></i></button>\n        </div>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:contents}[data-col-toggle] label:hover,[data-export-toggle] .export-opt:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}\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=\"overflow-x-auto relative rounded-md\"\n    [style.width]=\"width() || '100%'\"\n    [style.border]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n  >\n    <table class=\"w-full border-collapse\" 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=\"relative px-3 py-2.5 text-xs whitespace-nowrap text-center\"\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              style=\"width:40px\"\n            >\n              <input type=\"checkbox\"\n                [checked]=\"_isAllSelected()\"\n                (change)=\"_toggleSelectAll()\"\n                class=\"cursor-pointer\"\n              />\n            </th>\n          }\n          @if (expandable()) {\n            <th class=\"relative px-3 py-2.5 text-xs whitespace-nowrap text-center\"\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              style=\"width:40px\"\n            ></th>\n          }\n          @for (col of _displayColumns(); track col.key) {\n            <th\n              class=\"group relative px-3 py-2.5 text-xs font-semibold uppercase tracking-wider whitespace-nowrap\"\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.cursor-pointer]=\"col.sortable && sortable()\"\n              [class.select-none]=\"col.sortable && sortable()\"\n              (click)=\"sortable() && col.sortable && _toggleSort(col.key)\"\n            >\n              {{ col.header }}\n              @if (col.sortable && sortable()) {\n                <i class=\"pi ml-1.5 text-[10px] align-middle\" [class]=\"_sortIcon(col.key)\"></i>\n              }\n              @if (resizable()) {\n                <div\n                  class=\"absolute right-0 top-0 bottom-0 w-2 cursor-col-resize z-10 transition-opacity duration-150 opacity-30 hover:opacity-100 group-hover:opacity-80\"\n                  [style.background]=\"'linear-gradient(90deg,transparent 33%,var(--color-accent,oklch(0.64 0.2 50)) 33%,var(--color-accent,oklch(0.64 0.2 50)) 66%,transparent 66%)'\"\n                  [style.background-size]=\"'100% 40%'\"\n                  [style.background-repeat]=\"'no-repeat'\"\n                  [style.background-position]=\"'center'\"\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=\"flex items-center flex-wrap gap-1.5\">\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=\"relative ml-auto\">\n                  <button\n                    type=\"button\"\n                    (click)=\"_columnToggleOpen.set(!_columnToggleOpen())\"\n                    class=\"inline-flex items-center gap-1 px-2 py-1 text-xs rounded-md border cursor-pointer transition-colors hover:opacity-80\"\n                    [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n                    [style.background-color]=\"'transparent'\"\n                    [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n                  ><i class=\"pi pi-list text-[10px]\"></i> Columns</button>\n                  @if (_columnToggleOpen()) {\n                    <div\n                      class=\"absolute top-full right-0 mt-1 min-w-[140px] p-1.5 rounded-md shadow-lg z-50 border\"\n                      [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n                      [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n                    >\n                      @for (col of columns(); track col.key) {\n                        <label\n                          class=\"flex items-center gap-2 px-2 py-1.5 text-xs rounded cursor-pointer whitespace-nowrap transition-colors\"\n                          [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n                        >\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=\"relative\">\n                    <button\n                      type=\"button\"\n                      (click)=\"_exportOpen.set(!_exportOpen())\"\n                      class=\"inline-flex items-center gap-1 px-2 py-1 text-xs rounded-md border cursor-pointer transition-colors hover:opacity-80\"\n                      [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n                      [style.background-color]=\"'transparent'\"\n                      [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n                    ><i class=\"pi pi-download text-[10px]\"></i> Export</button>\n                    @if (_exportOpen()) {\n                      <div\n                        class=\"absolute top-full left-0 mt-1 min-w-[100px] p-1 rounded-md shadow-lg z-50 border\"\n                        [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n                        [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\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=\"export-opt block w-full text-left px-2 py-1.5 text-xs rounded cursor-pointer border-none transition-colors\"\n                            [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n                            [style.background-color]=\"'transparent'\"\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()\"\n              class=\"px-3 py-8 text-center text-sm text-[var(--color-text-muted,oklch(0.48 0.01 260))]\"\n            >{{ emptyMessage() }}</td>\n          </tr>\n        } @else {\n          @for (row of _displayRows(); track _trackByIndex($index); let rowIndex = $index) {\n            <tr\n              class=\"border-b border-[var(--color-border-light,oklch(0.91 0.01 260))] transition-colors\"\n              [class.hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]]=\"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=\"px-3 py-2.5 text-center\">\n                  <input type=\"checkbox\"\n                    [checked]=\"_isSelected(row)\"\n                    (change)=\"_toggleSelect(row)\"\n                    class=\"cursor-pointer\"\n                  />\n                </td>\n              }\n              @if (expandable()) {\n                <td class=\"px-3 py-2.5 text-center\">\n                  <button\n                    type=\"button\"\n                    (click)=\"_toggleExpand(rowIndex)\"\n                    class=\"inline-flex items-center justify-center w-6 h-6 border-none bg-transparent cursor-pointer rounded transition-colors hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\"\n                    [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n                  >\n                    <i class=\"pi text-[10px]\" [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=\"px-3 py-2.5 text-sm text-[var(--color-text,oklch(0.14 0.01 260))]\"\n                    >\n                      @if (col.actions) {\n                        <div class=\"flex items-center gap-1\">\n                          @for (action of col.actions; track $index) {\n                            @if (!action.visible || action.visible(row)) {\n                              <button\n                                type=\"button\"\n                                class=\"inline-flex items-center justify-center gap-1 px-2 py-1 text-xs rounded-md border-none cursor-pointer transition-opacity disabled:cursor-not-allowed\"\n                                [style.background-color]=\"'transparent'\"\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=\"text-xs\"></i> }\n                                @if (action.label) { <span>{{ action.label }}</span> }\n                              </button>\n                            }\n                          }\n                        </div>\n                      } @else {\n                        @if (col.truncate) {\n                          <app-tooltip position=\"top\" [text]=\"_cellText(row, col)\">\n                            {{ _cellLabel(row, col) }}\n                          </app-tooltip>\n                        } @else {\n                          {{ _cellLabel(row, col) }}\n                        }\n                      }\n                  </td>\n                }\n              }\n            </tr>\n            @if (expandable() && _isExpanded(rowIndex)) {\n              <tr class=\"border-b border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n                <td [attr.colspan]=\"_colCount()\" class=\"p-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=\"p-3 text-sm text-[var(--color-text-muted,oklch(0.48 0.01 260))]\">No detail template</div>\n                    }\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n          @if (_footerCols().length) {\n            <tr class=\"border-t-2 font-medium\"\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=\"px-3 py-2.5 text-sm\"\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=\"flex items-center justify-between px-3 py-2 border-t border-[var(--color-border-light,oklch(0.91 0.01 260))]\"\n        [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n      >\n        <div class=\"flex items-center gap-2 text-xs text-[var(--color-text-muted,oklch(0.48 0.01 260))]\">\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=\"flex items-center gap-0.5\">\n          <button type=\"button\" (click)=\"_goToPage(1)\" [disabled]=\"_page() === 1\"\n            class=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed transition-colors\"\n            [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\" [style.background-color]=\"'transparent'\"\n          ><i class=\"pi pi-angle-double-left text-[10px]\"></i></button>\n          <button type=\"button\" (click)=\"_goToPage(_page() - 1)\" [disabled]=\"_page() === 1\"\n            class=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed transition-colors\"\n            [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\" [style.background-color]=\"'transparent'\"\n          ><i class=\"pi pi-angle-left text-[10px]\"></i></button>\n          @for (p of _visiblePages(); track p) {\n            <button type=\"button\" (click)=\"_goToPage(p)\"\n              class=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer transition-colors font-medium\"\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=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed transition-colors\"\n            [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\" [style.background-color]=\"'transparent'\"\n          ><i class=\"pi pi-angle-right text-[10px]\"></i></button>\n          <button type=\"button\" (click)=\"_goToPage(_totalPages())\" [disabled]=\"_page() === _totalPages()\"\n            class=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed transition-colors\"\n            [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\" [style.background-color]=\"'transparent'\"\n          ><i class=\"pi pi-angle-double-right text-[10px]\"></i></button>\n        </div>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:contents}[data-col-toggle] label:hover,[data-export-toggle] .export-opt:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}\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=\"flex items-start gap-3 p-3 rounded-[var(--radius-md,0.5rem)] border\"\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    [class.opacity-0]=\"_isLeaving()\"\n    [class.mb-[-3rem]]=\"_isLeaving()\"\n    [style.width]=\"width() || 'auto'\"\n    role=\"alert\"\n  >\n    @if (showIcon()) {\n      <i class=\"mt-0.5 text-sm\" [class]=\"_icon()\" [style.color]=\"_border()\"></i>\n    }\n    <div class=\"flex-1 min-w-0\">\n      @if (title()) {\n        <p class=\"text-sm font-semibold text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ title() }}</p>\n      }\n      <div class=\"text-sm text-[var(--color-text,oklch(0.14 0.01 260))]\"><ng-content /></div>\n    </div>\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        class=\"flex items-center justify-center w-6 h-6 p-0 border-none bg-transparent cursor-pointer rounded-full hover:opacity-70 text-[var(--color-text-muted,oklch(0.48 0.01 260))] shrink-0\"\n        (click)=\"_dismiss()\"\n        aria-label=\"Close\"\n      >\n        <i class=\"pi pi-times text-xs\"></i>\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:contents}\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=\"flex items-start gap-3 p-3 rounded-[var(--radius-md,0.5rem)] border\"\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    [class.opacity-0]=\"_isLeaving()\"\n    [class.mb-[-3rem]]=\"_isLeaving()\"\n    [style.width]=\"width() || 'auto'\"\n    role=\"alert\"\n  >\n    @if (showIcon()) {\n      <i class=\"mt-0.5 text-sm\" [class]=\"_icon()\" [style.color]=\"_border()\"></i>\n    }\n    <div class=\"flex-1 min-w-0\">\n      @if (title()) {\n        <p class=\"text-sm font-semibold text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ title() }}</p>\n      }\n      <div class=\"text-sm text-[var(--color-text,oklch(0.14 0.01 260))]\"><ng-content /></div>\n    </div>\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        class=\"flex items-center justify-center w-6 h-6 p-0 border-none bg-transparent cursor-pointer rounded-full hover:opacity-70 text-[var(--color-text-muted,oklch(0.48 0.01 260))] shrink-0\"\n        (click)=\"_dismiss()\"\n        aria-label=\"Close\"\n      >\n        <i class=\"pi pi-times text-xs\"></i>\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:contents}\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  [style.display]=\"overlay() ? 'flex' : 'inline-flex'\"\n  class=\"flex-col items-center justify-center\"\n  [class.fixed]=\"overlay()\"\n  [class.inset-0]=\"overlay()\"\n  [class.z-50]=\"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=\"rounded-full animate-spin\" [style]=\"_circleStyle()\"></div>\n    }\n    @case ('dual-ring') {\n      <div class=\"relative flex items-center justify-center\">\n        <div class=\"rounded-full animate-spin\" [style]=\"_dualOuterStyle()\"></div>\n        <div\n          class=\"absolute rounded-full animate-spin\"\n          [style]=\"_dualInnerStyle()\"\n          style=\"animation-direction: reverse; animation-duration: 1.5s\"\n        ></div>\n        @if (imageUrl()) {\n          <div class=\"absolute flex items-center justify-center\">\n            <img [src]=\"imageUrl()\" [style]=\"_imageStyle()\" class=\"opacity-80\" alt=\"\" />\n          </div>\n        }\n      </div>\n    }\n    @case ('dots') {\n      <div class=\"flex items-center gap-1.5\">\n        @for (dot of [0,1,2]; track dot) {\n          <div\n            class=\"rounded-full dot-loader\"\n            [style]=\"_dotStyle()\"\n            [style.animationDelay]=\"dot * 0.15 + 's'\"\n          ></div>\n        }\n      </div>\n    }\n    @case ('pulse') {\n      <div class=\"rounded-full pulse-loader\" [style]=\"_pulseStyle()\"></div>\n    }\n    @case ('bars') {\n      <div class=\"flex items-end gap-[3px]\">\n        @for (bar of [0,1,2,3,4]; track bar) {\n          <div\n            class=\"rounded-t-sm bar-loader\"\n            [style]=\"_barStyle()\"\n            [style.animationDelay]=\"bar * 0.1 + 's'\"\n          ></div>\n        }\n      </div>\n    }\n  }\n\n  @if (text()) {\n    <p\n      class=\"mt-2 text-xs\"\n      [class.text-white]=\"overlay()\"\n      [class.animate-pulse]=\"overlay()\"\n      [class.text-[var(--color-text-muted,oklch(0.48 0.01 260))]]=\"!overlay()\"\n    >{{ text() }}</p>\n  }\n</div>\n", styles: [":host{display:contents}.dot-loader{animation:dotBounce .6s ease-in-out infinite alternate}.pulse-loader{animation:pulseRing 1.5s ease-in-out infinite}.bar-loader{animation:barWave .8s ease-in-out infinite}@keyframes dotBounce{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes pulseRing{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:1}}@keyframes barWave{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  [style.display]=\"overlay() ? 'flex' : 'inline-flex'\"\n  class=\"flex-col items-center justify-center\"\n  [class.fixed]=\"overlay()\"\n  [class.inset-0]=\"overlay()\"\n  [class.z-50]=\"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=\"rounded-full animate-spin\" [style]=\"_circleStyle()\"></div>\n    }\n    @case ('dual-ring') {\n      <div class=\"relative flex items-center justify-center\">\n        <div class=\"rounded-full animate-spin\" [style]=\"_dualOuterStyle()\"></div>\n        <div\n          class=\"absolute rounded-full animate-spin\"\n          [style]=\"_dualInnerStyle()\"\n          style=\"animation-direction: reverse; animation-duration: 1.5s\"\n        ></div>\n        @if (imageUrl()) {\n          <div class=\"absolute flex items-center justify-center\">\n            <img [src]=\"imageUrl()\" [style]=\"_imageStyle()\" class=\"opacity-80\" alt=\"\" />\n          </div>\n        }\n      </div>\n    }\n    @case ('dots') {\n      <div class=\"flex items-center gap-1.5\">\n        @for (dot of [0,1,2]; track dot) {\n          <div\n            class=\"rounded-full dot-loader\"\n            [style]=\"_dotStyle()\"\n            [style.animationDelay]=\"dot * 0.15 + 's'\"\n          ></div>\n        }\n      </div>\n    }\n    @case ('pulse') {\n      <div class=\"rounded-full pulse-loader\" [style]=\"_pulseStyle()\"></div>\n    }\n    @case ('bars') {\n      <div class=\"flex items-end gap-[3px]\">\n        @for (bar of [0,1,2,3,4]; track bar) {\n          <div\n            class=\"rounded-t-sm bar-loader\"\n            [style]=\"_barStyle()\"\n            [style.animationDelay]=\"bar * 0.1 + 's'\"\n          ></div>\n        }\n      </div>\n    }\n  }\n\n  @if (text()) {\n    <p\n      class=\"mt-2 text-xs\"\n      [class.text-white]=\"overlay()\"\n      [class.animate-pulse]=\"overlay()\"\n      [class.text-[var(--color-text-muted,oklch(0.48 0.01 260))]]=\"!overlay()\"\n    >{{ text() }}</p>\n  }\n</div>\n", styles: [":host{display:contents}.dot-loader{animation:dotBounce .6s ease-in-out infinite alternate}.pulse-loader{animation:pulseRing 1.5s ease-in-out infinite}.bar-loader{animation:barWave .8s ease-in-out infinite}@keyframes dotBounce{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes pulseRing{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:1}}@keyframes barWave{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" }] : []));
+    _positionCls = computed(() => {
+        const positions = {
+            'top-right': 'top-4 right-4',
+            'top-left': 'top-4 left-4',
+            'bottom-right': 'bottom-4 right-4',
+            'bottom-left': 'bottom-4 left-4',
+        };
+        return positions[this.position()] ?? 'top-4 right-4';
+    }, ...(ngDevMode ? [{ debugName: "_positionCls" }] : []));
+    _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=\"fixed z-[9999] flex flex-col gap-2 w-72 max-w-[calc(100vw-2rem)] pointer-events-none\"\n  [class]=\"_positionCls()\"\n>\n  @for (toast of _toasts(); track toast.id) {\n    <div\n      class=\"flex items-start gap-3 p-3 rounded-[var(--radius-md,0.5rem)] shadow-lg border pointer-events-auto toast-enter\"\n      [style.background-color]=\"_getBg(toast.type)\"\n      [style.border-color]=\"_getBorder(toast.type)\"\n    >\n      <i class=\"mt-0.5 text-sm shrink-0\" [class]=\"_getIcon(toast.type)\" [style.color]=\"_getBorder(toast.type)\"></i>\n      <div class=\"flex-1 min-w-0\">\n        @if (toast.title) {\n          <p class=\"text-xs font-semibold text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ toast.title }}</p>\n        }\n        <p class=\"text-sm text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ toast.message }}</p>\n      </div>\n      <button\n        type=\"button\"\n        class=\"flex items-center justify-center w-5 h-5 p-0 border-none bg-transparent cursor-pointer rounded-full hover:opacity-70 shrink-0 text-[var(--color-text-muted,oklch(0.48 0.01 260))]\"\n        (click)=\"_remove(toast.id)\"\n        aria-label=\"Close\"\n      >\n        <i class=\"pi pi-times text-xs\"></i>\n      </button>\n    </div>\n  }\n</div>\n", styles: [":host{display:contents}.toast-enter{animation:toastSlideIn .3s ease-out}@keyframes toastSlideIn{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=\"fixed z-[9999] flex flex-col gap-2 w-72 max-w-[calc(100vw-2rem)] pointer-events-none\"\n  [class]=\"_positionCls()\"\n>\n  @for (toast of _toasts(); track toast.id) {\n    <div\n      class=\"flex items-start gap-3 p-3 rounded-[var(--radius-md,0.5rem)] shadow-lg border pointer-events-auto toast-enter\"\n      [style.background-color]=\"_getBg(toast.type)\"\n      [style.border-color]=\"_getBorder(toast.type)\"\n    >\n      <i class=\"mt-0.5 text-sm shrink-0\" [class]=\"_getIcon(toast.type)\" [style.color]=\"_getBorder(toast.type)\"></i>\n      <div class=\"flex-1 min-w-0\">\n        @if (toast.title) {\n          <p class=\"text-xs font-semibold text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ toast.title }}</p>\n        }\n        <p class=\"text-sm text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ toast.message }}</p>\n      </div>\n      <button\n        type=\"button\"\n        class=\"flex items-center justify-center w-5 h-5 p-0 border-none bg-transparent cursor-pointer rounded-full hover:opacity-70 shrink-0 text-[var(--color-text-muted,oklch(0.48 0.01 260))]\"\n        (click)=\"_remove(toast.id)\"\n        aria-label=\"Close\"\n      >\n        <i class=\"pi pi-times text-xs\"></i>\n      </button>\n    </div>\n  }\n</div>\n", styles: [":host{display:contents}.toast-enter{animation:toastSlideIn .3s ease-out}@keyframes toastSlideIn{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": "'border border-[var(--color-border,oklch(0.83 0.015 260))] rounded-[var(--radius-md,0.5rem)] overflow-hidden'" } }, ngImport: i0, template: "<button\n  type=\"button\"\n  (click)=\"_toggle()\"\n  [disabled]=\"disabled()\"\n  class=\"inline-flex items-center justify-between w-full px-3 py-2.5 text-sm font-medium border-none bg-transparent cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text,oklch(0.14 0.01 260))] transition-colors hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\"\n>\n  <span>{{ title() }}</span>\n  <i class=\"pi pi-chevron-down text-xs transition-transform duration-200\"\n    [style.transform]=\"_isOpen() ? 'rotate(180deg)' : 'rotate(0deg)'\"\n  ></i>\n</button>\n@if (_visible()) {\n  <div\n    class=\"origin-top border-t border-[var(--color-border-light,oklch(0.91 0.01 260))]\"\n    [class.acc-enter]=\"_isOpen() && !_isClosing()\"\n    [class.acc-leave]=\"_isClosing()\"\n  >\n    <div class=\"px-3 py-2.5 text-sm text-[var(--color-text-muted,oklch(0.48 0.01 260))]\">\n      <ng-content />\n    </div>\n  </div>\n}\n", styles: [":host{display:block}.acc-enter{animation:accSlideIn .2s ease-out}.acc-leave{animation:accSlideOut .15s ease-in forwards}@keyframes accSlideIn{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}@keyframes accSlideOut{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]': "'border border-[var(--color-border,oklch(0.83 0.015 260))] rounded-[var(--radius-md,0.5rem)] overflow-hidden'",
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  type=\"button\"\n  (click)=\"_toggle()\"\n  [disabled]=\"disabled()\"\n  class=\"inline-flex items-center justify-between w-full px-3 py-2.5 text-sm font-medium border-none bg-transparent cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text,oklch(0.14 0.01 260))] transition-colors hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\"\n>\n  <span>{{ title() }}</span>\n  <i class=\"pi pi-chevron-down text-xs transition-transform duration-200\"\n    [style.transform]=\"_isOpen() ? 'rotate(180deg)' : 'rotate(0deg)'\"\n  ></i>\n</button>\n@if (_visible()) {\n  <div\n    class=\"origin-top border-t border-[var(--color-border-light,oklch(0.91 0.01 260))]\"\n    [class.acc-enter]=\"_isOpen() && !_isClosing()\"\n    [class.acc-leave]=\"_isClosing()\"\n  >\n    <div class=\"px-3 py-2.5 text-sm text-[var(--color-text-muted,oklch(0.48 0.01 260))]\">\n      <ng-content />\n    </div>\n  </div>\n}\n", styles: [":host{display:block}.acc-enter{animation:accSlideIn .2s ease-out}.acc-leave{animation:accSlideOut .15s ease-in forwards}@keyframes accSlideIn{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}@keyframes accSlideOut{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=\"h-16 z-50 flex items-center px-5 gap-3\"\n  [class.fixed]=\"fixed()\"\n  [class.top-0]=\"fixed()\"\n  [class.left-0]=\"fixed()\"\n  [class.right-0]=\"fixed()\"\n  [class.relative]=\"!fixed()\"\n  [class.rounded-md]=\"!fixed()\"\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  <div class=\"flex items-center gap-2 shrink-0\">\n    <i [class]=\"brandIcon()\" class=\"text-xl\"></i>\n    <span class=\"text-sm font-bold hidden sm:inline\">{{ brandText() }}</span>\n  </div>\n\n  <button\n    type=\"button\"\n    (click)=\"_toggleMobile()\"\n    class=\"inline-flex items-center justify-center w-8 h-8 border-none bg-transparent cursor-pointer rounded lg:hidden\"\n    [style.color]=\"'inherit'\"\n  >\n    <i class=\"pi text-lg\" [class.pi-bars]=\"!_mobileOpen()\" [class.pi-times]=\"_mobileOpen()\"></i>\n  </button>\n\n  <!-- Desktop -->\n  <div class=\"flex-1 hidden lg:flex items-center justify-center gap-1\">\n    @for (item of items(); track item.id) {\n      <div class=\"relative\" (click)=\"$event.stopPropagation()\">\n        <button\n          type=\"button\"\n          (click)=\"item.children ? _toggleDropdown(item.id) : _navigate(item.route || '')\"\n          class=\"inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium border-none cursor-pointer whitespace-nowrap\"\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=\"text-sm\"></i> }\n          <span>{{ item.label }}</span>\n          @if (item.children) {\n            <i class=\"pi pi-chevron-down text-[10px] transition-transform duration-200\"\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=\"absolute top-full right-0 mt-1 min-w-[180px] flex flex-col gap-0.5 p-2 rounded-xl shadow-lg z-50\"\n            [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n            [style.border]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\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=\"w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border-none cursor-pointer whitespace-nowrap transition-colors\"\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=\"text-xs\"></i> }\n                <span>{{ child.label }}</span>\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Mobile -->\n  <div\n    class=\"fixed left-0 right-0 top-16 flex flex-col gap-1 p-4 shadow-xl lg:hidden z-50\"\n    [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\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=\"w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border-none cursor-pointer transition-colors\"\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=\"text-sm\"></i> }\n        <span class=\"flex-1\">{{ item.label }}</span>\n        @if (item.children) {\n          <i class=\"pi pi-chevron-down text-xs transition-transform duration-200\"\n            [style.transform]=\"_openDropdown() === item.id ? 'rotate(180deg)' : ''\"\n          ></i>\n        }\n      </button>\n\n      @if (item.children && _openDropdown() === item.id) {\n        <div class=\"flex flex-col gap-0.5 mt-1 mr-4\"\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=\"w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm border-none cursor-pointer transition-colors\"\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=\"text-xs\"></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=\"inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium border whitespace-nowrap cursor-pointer transition-colors shrink-0\"\n    [style.color]=\"'inherit'\"\n    [style.border-color]=\"'rgba(255,255,255,0.3)'\"\n  >\n    <i class=\"pi pi-sign-out text-sm\"></i>\n    <span class=\"hidden sm:inline\">Logout</span>\n  </button>\n</nav>\n", styles: [":host{display:contents}.nav-dd-in{animation:navDdIn .2s ease-out}.nav-dd-out{animation:navDdOut .15s ease-in forwards}.nav-mob-in{animation:navMobIn .2s ease-out}.nav-mob-out{animation:navMobOut .12s ease-in forwards}@keyframes navDdIn{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0}}@keyframes navDdOut{0%{opacity:1;translate:0}to{opacity:0;translate:0 -6px}}@keyframes navMobIn{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes navMobOut{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=\"h-16 z-50 flex items-center px-5 gap-3\"\n  [class.fixed]=\"fixed()\"\n  [class.top-0]=\"fixed()\"\n  [class.left-0]=\"fixed()\"\n  [class.right-0]=\"fixed()\"\n  [class.relative]=\"!fixed()\"\n  [class.rounded-md]=\"!fixed()\"\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  <div class=\"flex items-center gap-2 shrink-0\">\n    <i [class]=\"brandIcon()\" class=\"text-xl\"></i>\n    <span class=\"text-sm font-bold hidden sm:inline\">{{ brandText() }}</span>\n  </div>\n\n  <button\n    type=\"button\"\n    (click)=\"_toggleMobile()\"\n    class=\"inline-flex items-center justify-center w-8 h-8 border-none bg-transparent cursor-pointer rounded lg:hidden\"\n    [style.color]=\"'inherit'\"\n  >\n    <i class=\"pi text-lg\" [class.pi-bars]=\"!_mobileOpen()\" [class.pi-times]=\"_mobileOpen()\"></i>\n  </button>\n\n  <!-- Desktop -->\n  <div class=\"flex-1 hidden lg:flex items-center justify-center gap-1\">\n    @for (item of items(); track item.id) {\n      <div class=\"relative\" (click)=\"$event.stopPropagation()\">\n        <button\n          type=\"button\"\n          (click)=\"item.children ? _toggleDropdown(item.id) : _navigate(item.route || '')\"\n          class=\"inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium border-none cursor-pointer whitespace-nowrap\"\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=\"text-sm\"></i> }\n          <span>{{ item.label }}</span>\n          @if (item.children) {\n            <i class=\"pi pi-chevron-down text-[10px] transition-transform duration-200\"\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=\"absolute top-full right-0 mt-1 min-w-[180px] flex flex-col gap-0.5 p-2 rounded-xl shadow-lg z-50\"\n            [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n            [style.border]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\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=\"w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border-none cursor-pointer whitespace-nowrap transition-colors\"\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=\"text-xs\"></i> }\n                <span>{{ child.label }}</span>\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Mobile -->\n  <div\n    class=\"fixed left-0 right-0 top-16 flex flex-col gap-1 p-4 shadow-xl lg:hidden z-50\"\n    [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\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=\"w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border-none cursor-pointer transition-colors\"\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=\"text-sm\"></i> }\n        <span class=\"flex-1\">{{ item.label }}</span>\n        @if (item.children) {\n          <i class=\"pi pi-chevron-down text-xs transition-transform duration-200\"\n            [style.transform]=\"_openDropdown() === item.id ? 'rotate(180deg)' : ''\"\n          ></i>\n        }\n      </button>\n\n      @if (item.children && _openDropdown() === item.id) {\n        <div class=\"flex flex-col gap-0.5 mt-1 mr-4\"\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=\"w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm border-none cursor-pointer transition-colors\"\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=\"text-xs\"></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=\"inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium border whitespace-nowrap cursor-pointer transition-colors shrink-0\"\n    [style.color]=\"'inherit'\"\n    [style.border-color]=\"'rgba(255,255,255,0.3)'\"\n  >\n    <i class=\"pi pi-sign-out text-sm\"></i>\n    <span class=\"hidden sm:inline\">Logout</span>\n  </button>\n</nav>\n", styles: [":host{display:contents}.nav-dd-in{animation:navDdIn .2s ease-out}.nav-dd-out{animation:navDdOut .15s ease-in forwards}.nav-mob-in{animation:navMobIn .2s ease-out}.nav-mob-out{animation:navMobOut .12s ease-in forwards}@keyframes navDdIn{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0}}@keyframes navDdOut{0%{opacity:1;translate:0}to{opacity:0;translate:0 -6px}}@keyframes navMobIn{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes navMobOut{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=\"flex items-center justify-between shrink-0 px-4 h-14 border-b\"\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=\"group inline-flex items-center justify-center w-8 h-8 border-none bg-transparent cursor-pointer rounded transition-all duration-200 hover:bg-[var(--color-accent,oklch(0.64 0.2 50))] active:bg-[var(--color-accent,oklch(0.64 0.2 50))]\"\n      [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n    >\n      <i class=\"pi pi-th-large text-sm transition-transform duration-500 ease-in-out active:scale-90\"\n        [style.transform]=\"isCollapsed() ? 'rotate(180deg)' : 'rotate(0deg)'\"\n      ></i>\n    </button>\n\n    @if (!isCollapsed()) {\n      <span class=\"text-sm font-semibold text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ title() }}</span>\n    }\n\n    <button\n      type=\"button\"\n      (click)=\"_onBackdrop()\"\n      class=\"sd-close-btn inline-flex items-center justify-center w-8 h-8 border-none bg-transparent cursor-pointer rounded transition-colors hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\"\n      [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n    >\n      <i class=\"pi pi-times text-sm\"></i>\n    </button>\n  </div>\n\n  <nav class=\"flex-1 overflow-y-auto p-3\">\n    <ul class=\"flex flex-col gap-1\" [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=\"w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-150 text-sm font-medium border-none cursor-pointer\"\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=\"text-base shrink-0\"></i>\n            }\n            @if (!isCollapsed()) {\n              <span class=\"flex-1 text-right\">{{ item.label }}</span>\n              @if (item.children?.length) {\n                <i class=\"pi pi-chevron-down text-xs transition-transform duration-200\"\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=\"mt-1 mr-6 flex flex-col gap-0.5\"\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=\"w-full flex items-center gap-2.5 px-3 py-2 rounded-lg transition-all duration-150 text-sm border-none cursor-pointer\"\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=\"w-1.5 h-1.5 rounded-full shrink-0\"\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=\"shrink-0 p-3 border-t flex flex-col gap-2\"\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=\"w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium border-none cursor-pointer transition-colors\"\n      [style.background-color]=\"'var(--color-danger,oklch(0.57 0.21 25))'\"\n      [style.color]=\"'white'\"\n      [class.justify-center]=\"isCollapsed()\"\n    >\n      <i class=\"pi pi-sign-out text-base shrink-0\"></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-close-btn{display:none}@media(max-width:1023px){.sd-close-btn{display:inline-flex}}.sd-aside.sd-collapsed{width:64px!important}.sd-slide-in{animation:sdSlideDown .2s ease-out}.sd-slide-out{animation:sdSlideUp .15s ease-in forwards}@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=\"flex items-center justify-between shrink-0 px-4 h-14 border-b\"\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=\"group inline-flex items-center justify-center w-8 h-8 border-none bg-transparent cursor-pointer rounded transition-all duration-200 hover:bg-[var(--color-accent,oklch(0.64 0.2 50))] active:bg-[var(--color-accent,oklch(0.64 0.2 50))]\"\n      [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n    >\n      <i class=\"pi pi-th-large text-sm transition-transform duration-500 ease-in-out active:scale-90\"\n        [style.transform]=\"isCollapsed() ? 'rotate(180deg)' : 'rotate(0deg)'\"\n      ></i>\n    </button>\n\n    @if (!isCollapsed()) {\n      <span class=\"text-sm font-semibold text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ title() }}</span>\n    }\n\n    <button\n      type=\"button\"\n      (click)=\"_onBackdrop()\"\n      class=\"sd-close-btn inline-flex items-center justify-center w-8 h-8 border-none bg-transparent cursor-pointer rounded transition-colors hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\"\n      [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n    >\n      <i class=\"pi pi-times text-sm\"></i>\n    </button>\n  </div>\n\n  <nav class=\"flex-1 overflow-y-auto p-3\">\n    <ul class=\"flex flex-col gap-1\" [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=\"w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-150 text-sm font-medium border-none cursor-pointer\"\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=\"text-base shrink-0\"></i>\n            }\n            @if (!isCollapsed()) {\n              <span class=\"flex-1 text-right\">{{ item.label }}</span>\n              @if (item.children?.length) {\n                <i class=\"pi pi-chevron-down text-xs transition-transform duration-200\"\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=\"mt-1 mr-6 flex flex-col gap-0.5\"\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=\"w-full flex items-center gap-2.5 px-3 py-2 rounded-lg transition-all duration-150 text-sm border-none cursor-pointer\"\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=\"w-1.5 h-1.5 rounded-full shrink-0\"\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=\"shrink-0 p-3 border-t flex flex-col gap-2\"\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=\"w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium border-none cursor-pointer transition-colors\"\n      [style.background-color]=\"'var(--color-danger,oklch(0.57 0.21 25))'\"\n      [style.color]=\"'white'\"\n      [class.justify-center]=\"isCollapsed()\"\n    >\n      <i class=\"pi pi-sign-out text-base shrink-0\"></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-close-btn{display:none}@media(max-width:1023px){.sd-close-btn{display:inline-flex}}.sd-aside.sd-collapsed{width:64px!important}.sd-slide-in{animation:sdSlideDown .2s ease-out}.sd-slide-out{animation:sdSlideUp .15s ease-in forwards}@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=\"fixed inset-0 z-50 flex items-center justify-center bg-[var(--modal-backdrop,oklch(0 0 0/0.45))]\"\n    [class.backdrop-enter]=\"_isOpen() && !_isClosing()\"\n    [class.backdrop-leave]=\"_isClosing()\"\n    (click)=\"_onBackdropClick()\"\n  >\n    <div\n      class=\"bg-[var(--color-surface,oklch(0.99 0 0))] border border-[var(--color-border,oklch(0.83 0.015 260))] rounded-[var(--radius-lg,0.75rem)] shadow-xl w-full max-w-sm mx-4 overflow-hidden text-[var(--color-text,oklch(0.14 0.01 260))]\"\n      [class.panel-enter]=\"_isOpen() && !_isClosing()\"\n      [class.panel-leave]=\"_isClosing()\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      @if (_title()) {\n        <div class=\"flex items-center justify-between px-4 py-3 border-b border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n          <h3 class=\"text-sm font-semibold\">{{ _title() }}</h3>\n        </div>\n      }\n\n      <div class=\"flex flex-col items-center gap-3 px-6 py-6 text-center\">\n        @if (_icon()) {\n          <i class=\"{{ _icon() }} text-2xl text-[var(--color-primary,oklch(0.32 0.09 258))]\"></i>\n        }\n        <p class=\"text-sm text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ message() }}</p>\n      </div>\n\n      <div class=\"flex items-center justify-end gap-2 px-4 py-3 border-t border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n        <button\n          type=\"button\"\n          class=\"px-3 py-1.5 text-sm rounded-[var(--radius-md,0.5rem)] border border-[var(--color-border,oklch(0.83 0.015 260))] bg-transparent text-[var(--color-text,oklch(0.14 0.01 260))] cursor-pointer transition-colors duration-150 hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\"\n          (click)=\"_onCancel()\"\n        >{{ _cancelText() }}</button>\n\n        <button\n          type=\"button\"\n          [style.background-color]=\"_confirmBg()\"\n          class=\"px-3 py-1.5 text-sm rounded-[var(--radius-md,0.5rem)] border-none text-white cursor-pointer transition-opacity duration-150 hover:opacity-90\"\n          (click)=\"_onConfirm()\"\n        >{{ _confirmText() }}</button>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.backdrop-enter{animation:backdropIn .2s ease-out}.backdrop-leave{animation:backdropOut .2s ease-in forwards}.panel-enter{animation:panelIn .2s ease-out}.panel-leave{animation:panelOut .18s ease-in forwards}@keyframes backdropIn{0%{opacity:0}to{opacity:1}}@keyframes backdropOut{0%{opacity:1}to{opacity:0}}@keyframes panelIn{0%{opacity:0;scale:.95;translate:0 8px}to{opacity:1;scale:1;translate:0}}@keyframes panelOut{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=\"fixed inset-0 z-50 flex items-center justify-center bg-[var(--modal-backdrop,oklch(0 0 0/0.45))]\"\n    [class.backdrop-enter]=\"_isOpen() && !_isClosing()\"\n    [class.backdrop-leave]=\"_isClosing()\"\n    (click)=\"_onBackdropClick()\"\n  >\n    <div\n      class=\"bg-[var(--color-surface,oklch(0.99 0 0))] border border-[var(--color-border,oklch(0.83 0.015 260))] rounded-[var(--radius-lg,0.75rem)] shadow-xl w-full max-w-sm mx-4 overflow-hidden text-[var(--color-text,oklch(0.14 0.01 260))]\"\n      [class.panel-enter]=\"_isOpen() && !_isClosing()\"\n      [class.panel-leave]=\"_isClosing()\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      @if (_title()) {\n        <div class=\"flex items-center justify-between px-4 py-3 border-b border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n          <h3 class=\"text-sm font-semibold\">{{ _title() }}</h3>\n        </div>\n      }\n\n      <div class=\"flex flex-col items-center gap-3 px-6 py-6 text-center\">\n        @if (_icon()) {\n          <i class=\"{{ _icon() }} text-2xl text-[var(--color-primary,oklch(0.32 0.09 258))]\"></i>\n        }\n        <p class=\"text-sm text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ message() }}</p>\n      </div>\n\n      <div class=\"flex items-center justify-end gap-2 px-4 py-3 border-t border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n        <button\n          type=\"button\"\n          class=\"px-3 py-1.5 text-sm rounded-[var(--radius-md,0.5rem)] border border-[var(--color-border,oklch(0.83 0.015 260))] bg-transparent text-[var(--color-text,oklch(0.14 0.01 260))] cursor-pointer transition-colors duration-150 hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\"\n          (click)=\"_onCancel()\"\n        >{{ _cancelText() }}</button>\n\n        <button\n          type=\"button\"\n          [style.background-color]=\"_confirmBg()\"\n          class=\"px-3 py-1.5 text-sm rounded-[var(--radius-md,0.5rem)] border-none text-white cursor-pointer transition-opacity duration-150 hover:opacity-90\"\n          (click)=\"_onConfirm()\"\n        >{{ _confirmText() }}</button>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.backdrop-enter{animation:backdropIn .2s ease-out}.backdrop-leave{animation:backdropOut .2s ease-in forwards}.panel-enter{animation:panelIn .2s ease-out}.panel-leave{animation:panelOut .18s ease-in forwards}@keyframes backdropIn{0%{opacity:0}to{opacity:1}}@keyframes backdropOut{0%{opacity:1}to{opacity:0}}@keyframes panelIn{0%{opacity:0;scale:.95;translate:0 8px}to{opacity:1;scale:1;translate:0}}@keyframes panelOut{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=\"modal-backdrop fixed inset-0 z-50 flex items-center justify-center bg-[var(--modal-backdrop,oklch(0 0 0/0.45))]\"\n    [class.backdrop-enter]=\"_isOpen() && !_isClosing()\"\n    [class.backdrop-leave]=\"_isClosing()\"\n    (click)=\"_onBackdropClick($event)\"\n  >\n    <div\n      class=\"bg-[var(--color-surface,oklch(0.99 0 0))] border border-[var(--color-border,oklch(0.83 0.015 260))] rounded-[var(--radius-lg,0.75rem)] shadow-xl w-full mx-4 overflow-hidden text-[var(--color-text,oklch(0.14 0.01 260))]\"\n      [style.max-width]=\"_width()\"\n      [class.panel-enter]=\"_isOpen() && !_isClosing()\"\n      [class.panel-leave]=\"_isClosing()\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      @if (title() || _showClose()) {\n        <div class=\"flex items-center justify-between px-4 py-3\" [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\">\n          <h3 class=\"text-sm font-semibold text-[var(--color-primary-inverse,oklch(0.99 0 0))]\">{{ title() }}</h3>\n          @if (_showClose()) {\n            <button\n              type=\"button\"\n              class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\"\n              (click)=\"close()\"\n              aria-label=\"Close\"\n            >\n              <i class=\"pi pi-times text-xs\"></i>\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"px-4 py-4\">\n        <ng-content />\n      </div>\n\n      <div class=\"modal-footer flex items-center justify-end gap-2 px-4 py-3 border-t border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n        <ng-content select=\"[modal-footer]\" />\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.modal-backdrop{--modal-backdrop: var(--color-backdrop, oklch(0 0 0 / .45))}.backdrop-enter{animation:backdropIn .2s ease-out}.backdrop-leave{animation:backdropOut .2s ease-in forwards}.panel-enter{animation:panelIn .2s ease-out}.panel-leave{animation:panelOut .18s ease-in forwards}@keyframes backdropIn{0%{opacity:0}to{opacity:1}}@keyframes backdropOut{0%{opacity:1}to{opacity:0}}.modal-footer:empty{display:none}@keyframes panelIn{0%{opacity:0;scale:.95;translate:0 8px}to{opacity:1;scale:1;translate:0}}@keyframes panelOut{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=\"modal-backdrop fixed inset-0 z-50 flex items-center justify-center bg-[var(--modal-backdrop,oklch(0 0 0/0.45))]\"\n    [class.backdrop-enter]=\"_isOpen() && !_isClosing()\"\n    [class.backdrop-leave]=\"_isClosing()\"\n    (click)=\"_onBackdropClick($event)\"\n  >\n    <div\n      class=\"bg-[var(--color-surface,oklch(0.99 0 0))] border border-[var(--color-border,oklch(0.83 0.015 260))] rounded-[var(--radius-lg,0.75rem)] shadow-xl w-full mx-4 overflow-hidden text-[var(--color-text,oklch(0.14 0.01 260))]\"\n      [style.max-width]=\"_width()\"\n      [class.panel-enter]=\"_isOpen() && !_isClosing()\"\n      [class.panel-leave]=\"_isClosing()\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      @if (title() || _showClose()) {\n        <div class=\"flex items-center justify-between px-4 py-3\" [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\">\n          <h3 class=\"text-sm font-semibold text-[var(--color-primary-inverse,oklch(0.99 0 0))]\">{{ title() }}</h3>\n          @if (_showClose()) {\n            <button\n              type=\"button\"\n              class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\"\n              (click)=\"close()\"\n              aria-label=\"Close\"\n            >\n              <i class=\"pi pi-times text-xs\"></i>\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"px-4 py-4\">\n        <ng-content />\n      </div>\n\n      <div class=\"modal-footer flex items-center justify-end gap-2 px-4 py-3 border-t border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n        <ng-content select=\"[modal-footer]\" />\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.modal-backdrop{--modal-backdrop: var(--color-backdrop, oklch(0 0 0 / .45))}.backdrop-enter{animation:backdropIn .2s ease-out}.backdrop-leave{animation:backdropOut .2s ease-in forwards}.panel-enter{animation:panelIn .2s ease-out}.panel-leave{animation:panelOut .18s ease-in forwards}@keyframes backdropIn{0%{opacity:0}to{opacity:1}}@keyframes backdropOut{0%{opacity:1}to{opacity:0}}.modal-footer:empty{display:none}@keyframes panelIn{0%{opacity:0;scale:.95;translate:0 8px}to{opacity:1;scale:1;translate:0}}@keyframes panelOut{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=abdelfattahqandil21-ryzen-ui.mjs.map