ryzen-ui 0.2.5 → 0.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/ryzen-ui.mjs +30 -19
  2. package/fesm2022/ryzen-ui.mjs.map +1 -1
  3. package/index.d.ts +4 -0
  4. package/package.json +1 -1
package/fesm2022/ryzen-ui.mjs CHANGED
@@ -122,7 +122,7 @@ class DatePickerComponent {
122
122
  _monthName = computed(() => this._monthNames[this._viewDate().getMonth()], ...(ngDevMode ? [{ debugName: "_monthName" }] : []));
123
123
  _year = computed(() => this._viewDate().getFullYear(), ...(ngDevMode ? [{ debugName: "_year" }] : []));
124
124
  _decadeLabel = computed(() => `${this._decade()} - ${this._decade() + 9}`, ...(ngDevMode ? [{ debugName: "_decadeLabel" }] : []));
125
- _appendToParent = computed(() => this.config().appendToParent ?? false, ...(ngDevMode ? [{ debugName: "_appendToParent" }] : []));
125
+ _appendToParent = computed(() => this.config().appendToBody ?? this.config().appendToParent ?? true, ...(ngDevMode ? [{ debugName: "_appendToParent" }] : []));
126
126
  _panelFixed = computed(() => this._isOpen() && this._appendToParent() ? 'fixed' : null, ...(ngDevMode ? [{ debugName: "_panelFixed" }] : []));
127
127
  _showTodayBtn = computed(() => this.config().showTodayButton !== false, ...(ngDevMode ? [{ debugName: "_showTodayBtn" }] : []));
128
128
  _showYearNav = computed(() => this.config().showYearNavigation !== false, ...(ngDevMode ? [{ debugName: "_showYearNav" }] : []));
@@ -228,6 +228,7 @@ class DatePickerComponent {
228
228
  const panel = this._elementRef.nativeElement.querySelector('[data-dp-panel]');
229
229
  if (panel) {
230
230
  document.body.appendChild(panel);
231
+ panel.style.setProperty('--rz-accent', this._accentColorValue());
231
232
  this._panelEl = panel;
232
233
  }
233
234
  }
@@ -338,7 +339,7 @@ class DatePickerComponent {
338
339
  this._close();
339
340
  }
340
341
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
341
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DatePickerComponent, isStandalone: true, selector: "app-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--rz-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<div class=\"rz-dp-wrapper\">\n <label class=\"rz-dp-trigger\" (click)=\"_onTriggerClick($event)\">\n <input\n class=\"rz-dp-input\"\n type=\"text\"\n readonly\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"_displayValue()\"\n />\n\n @if (_displayValue() && !disabled()) {\n <button class=\"rz-dp-clear\" type=\"button\" (click)=\"_clear($event)\" aria-label=\"Clear date\">\n <i class=\"pi pi-times\"></i>\n </button>\n }\n\n <i class=\"rz-dp-icon pi pi-calendar\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-dp-panel\n class=\"rz-dp-panel\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.rz-dp-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.rz-dp-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n\n <div class=\"rz-dp-header\" [style.background-color]=\"_accentColorValue()\">\n <div class=\"rz-dp-nav\">\n @if (_viewMode() === 'days' && _showYearNav()) {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_prevYear()\" aria-label=\"Previous year\">\n <i class=\"pi pi-angle-double-left\"></i>\n </button>\n }\n @if (_viewMode() !== 'years') {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_prevPeriod()\" aria-label=\"Previous\">\n <i class=\"pi pi-angle-left\"></i>\n </button>\n }\n\n <div class=\"rz-dp-nav-title\">\n @if (_viewMode() === 'days') {\n <button type=\"button\" class=\"rz-dp-nav-link\" (click)=\"_showMonths()\">{{ _monthName() }}</button>\n <button type=\"button\" class=\"rz-dp-nav-link\" (click)=\"_showYears()\">{{ _year() }}</button>\n }\n @if (_viewMode() === 'months') {\n <button type=\"button\" class=\"rz-dp-nav-link\" (click)=\"_showYears()\">{{ _year() }}</button>\n }\n @if (_viewMode() === 'years') {\n <span class=\"rz-dp-decade-label\">{{ _decadeLabel() }}</span>\n }\n </div>\n\n @if (_viewMode() !== 'years') {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_nextPeriod()\" aria-label=\"Next\">\n <i class=\"pi pi-angle-right\"></i>\n </button>\n }\n @if (_viewMode() === 'days' && _showYearNav()) {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_nextYear()\" aria-label=\"Next year\">\n <i class=\"pi pi-angle-double-right\"></i>\n </button>\n }\n </div>\n\n @if (_showTodayBtn() && _viewMode() === 'days') {\n <button type=\"button\" class=\"rz-dp-today-btn\" (click)=\"_goToToday()\">\n <i class=\"pi pi-calendar-plus\"></i>\n Today\n </button>\n }\n </div>\n\n @if (_viewMode() === 'days') {\n <div class=\"rz-dp-days-view\">\n <div class=\"rz-dp-weekdays\">\n @for (day of _weekDaysOrdered(); track $index) {\n <div class=\"rz-dp-weekday-cell\">{{ day }}</div>\n }\n </div>\n <div class=\"rz-dp-days-grid\">\n @for (day of _calendarDays(); track day.date.getTime()) {\n @if (day.date.getMonth() === _viewDate().getMonth() || day.date.getMonth() === _viewDate().getMonth() - 1 || day.date.getMonth() === _viewDate().getMonth() + 1) {\n <button\n type=\"button\"\n class=\"rz-dp-day\"\n [class.other-month]=\"!day.isCurrentMonth && !day.isSelected\"\n [class.today]=\"day.isToday && !day.isSelected\"\n [class.selected]=\"day.isSelected\"\n [class.highlighted]=\"day.isHighlighted && !day.isSelected\"\n [class.disabled]=\"day.isDisabled\"\n [disabled]=\"day.isDisabled\"\n (click)=\"_selectDate(day.date)\"\n [attr.aria-label]=\"day.date.toLocaleDateString()\"\n >{{ day.day }}</button>\n }\n }\n </div>\n </div>\n }\n\n @if (_viewMode() === 'months') {\n <div class=\"rz-dp-months-grid\">\n @for (month of _monthNames; track $index) {\n <button\n type=\"button\"\n class=\"rz-dp-month-btn\"\n [class.current]=\"_isCurrentMonth($index)\"\n (click)=\"_selectMonth($index)\"\n >{{ _monthsShort[$index] }}</button>\n }\n </div>\n }\n\n @if (_viewMode() === 'years') {\n <div class=\"rz-dp-years-view\">\n <div class=\"rz-dp-years-nav\">\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_prevDecade()\">\n <i class=\"pi pi-chevron-left\"></i>\n </button>\n <span class=\"rz-dp-decade-label\">{{ _decadeLabel() }}</span>\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_nextDecade()\">\n <i class=\"pi pi-chevron-right\"></i>\n </button>\n </div>\n <div class=\"rz-dp-years-grid\">\n @for (year of _yearsList(); track $index) {\n <button\n type=\"button\"\n class=\"rz-dp-year-btn\"\n [class.current]=\"_isCurrentYear(year)\"\n (click)=\"_selectYear(year)\"\n >{{ year }}</button>\n }\n </div>\n </div>\n }\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"rz-dp-msg rz-dp-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-dp-msg rz-dp-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}", styles: [":host{--rz-accent: var(--color-primary, oklch(.32 .09 258));--rz-bg: var(--color-surface, oklch(.99 0 0));--rz-border: var(--color-border, oklch(.83 .015 260));--rz-text: var(--color-text, oklch(.14 .01 260));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--rz-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--rz-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error .rz-dp-input{border-color:var(--color-danger)!important}:host.has-error .rz-dp-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.rz-dp-wrapper{position:relative;overflow:visible}.rz-dp-trigger{display:flex;align-items:center;width:100%}.rz-dp-input{width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem 2.75rem .5rem .75rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease;cursor:pointer;box-sizing:border-box}.rz-dp-input::placeholder{color:var(--rz-muted)}.rz-dp-input:disabled{opacity:.5;cursor:not-allowed}.rz-dp-input:focus{border-color:var(--rz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--rz-accent) 20%,transparent)}:host([data-size=\"sm\"]) .rz-dp-input{padding:.25rem 2.25rem .25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dp-input{padding:.75rem 3rem .75rem 1rem;font-size:1rem}.rz-dp-clear{position:absolute;top:50%;translate:0 -50%;inset-inline-end:2rem;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;color:var(--rz-muted);font-size:.75rem;transition:color .15s}.rz-dp-clear:hover{color:var(--rz-text)}.rz-dp-icon{position:absolute;top:50%;translate:0 -50%;inset-inline-end:.625rem;pointer-events:none;color:var(--rz-accent);font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center}:host([data-size=\"sm\"]) .rz-dp-icon{inset-inline-end:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dp-icon{inset-inline-end:.75rem;font-size:1.125rem}.rz-dp-panel{left:0;z-index:50;width:100%;min-width:17.5rem;background:var(--color-surface, oklch(.99 0 0));border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:var(--radius-md, .5rem);box-shadow:0 10px 15px -3px color-mix(in srgb,var(--color-text) 10%,transparent),0 4px 6px -4px color-mix(in srgb,var(--color-text) 10%,transparent);overflow:hidden;color:var(--color-text, oklch(.14 .01 260));box-sizing:border-box}.rz-dp-panel.absolute{position:absolute}.rz-dp-header{padding:.75rem;color:#fff}.rz-dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.375rem}.rz-dp-nav-btn{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:50%;background:transparent;color:color-mix(in srgb,white 80%,transparent);cursor:pointer;transition:background .15s;font-size:.75rem;flex-shrink:0}.rz-dp-nav-btn:hover{background:color-mix(in srgb,white 20%,transparent)}.rz-dp-nav-title{display:flex;align-items:center;gap:.25rem;font-size:.875rem;font-weight:600}.rz-dp-nav-link{padding:.125rem .375rem;border:none;border-radius:.25rem;background:transparent;color:#fff;cursor:pointer;transition:background .15s}.rz-dp-nav-link:hover{background:color-mix(in srgb,white 20%,transparent)}.rz-dp-decade-label{padding:0 .375rem}.rz-dp-today-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.375rem;padding:.25rem .5rem;border:none;border-radius:.25rem;background:color-mix(in srgb,white 20%,transparent);color:#fff;font-size:.75rem;cursor:pointer;transition:background .15s}.rz-dp-today-btn:hover{background:color-mix(in srgb,white 30%,transparent)}.rz-dp-days-view{padding:.625rem;box-sizing:border-box}.rz-dp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:.125rem;width:100%}.rz-dp-weekday-cell{display:flex;align-items:center;justify-content:center;height:1.75rem;font-size:.75rem;font-weight:500;color:var(--color-text-muted);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);min-width:0}.rz-dp-days-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.125rem;width:100%}.rz-dp-day{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;max-width:2.5rem;margin:0 auto;padding:0;border:none;border-radius:50%;cursor:pointer;font-size:.875rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);transition:all .15s;color:var(--rz-text);min-width:0;box-sizing:border-box}.rz-dp-day.other-month{color:var(--rz-muted)}.rz-dp-day.today{font-weight:600;box-shadow:0 0 0 2px var(--rz-accent)}.rz-dp-day.selected{background:var(--rz-accent);color:#fff;font-weight:600}.rz-dp-day.highlighted{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-day.disabled{opacity:.3;cursor:not-allowed}.rz-dp-day:not(.selected):not(.disabled):hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-months-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:.75rem}.rz-dp-month-btn{padding:.5rem;border-radius:.5rem;border:none;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);transition:background .15s,color .15s;cursor:pointer;color:var(--rz-text);background:transparent}.rz-dp-month-btn.current{background:var(--rz-accent);color:#fff}.rz-dp-month-btn:not(.current):hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-years-view{padding:.625rem}.rz-dp-years-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;padding:0 .25rem}.rz-dp-years-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.rz-dp-year-btn{padding:.5rem;border-radius:.5rem;border:none;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);transition:background .15s,color .15s;cursor:pointer;color:var(--rz-text);background:transparent}.rz-dp-year-btn.current{background:var(--rz-accent);color:#fff}.rz-dp-year-btn:not(.current):hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-dp-hint{color:var(--color-text-muted)}.rz-dp-error{color:var(--color-danger)}.rz-dp-fade-in{animation:rz-dp-in .2s ease}.rz-dp-fade-out{animation:rz-dp-out .15s ease forwards}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-dp-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes rz-dp-out{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
342
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DatePickerComponent, isStandalone: true, selector: "app-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--rz-accent": "_accentColorValue", "style.width": "_width" } }, ngImport: i0, template: "<div class=\"rz-dp-wrapper\">\n <label class=\"rz-dp-trigger\" (click)=\"_onTriggerClick($event)\">\n <input\n class=\"rz-dp-input\"\n type=\"text\"\n readonly\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"_displayValue()\"\n />\n\n @if (_displayValue() && !disabled()) {\n <button class=\"rz-dp-clear\" type=\"button\" (click)=\"_clear($event)\" aria-label=\"Clear date\">\n <i class=\"pi pi-times\"></i>\n </button>\n }\n\n <i class=\"rz-dp-icon pi pi-calendar\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-dp-panel\n class=\"rz-dp-panel\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.rz-dp-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.rz-dp-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n\n <div class=\"rz-dp-header\" [style.background-color]=\"_accentColorValue()\">\n <div class=\"rz-dp-nav\">\n @if (_viewMode() === 'days' && _showYearNav()) {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_prevYear()\" aria-label=\"Previous year\">\n <i class=\"pi pi-angle-double-left\"></i>\n </button>\n }\n @if (_viewMode() !== 'years') {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_prevPeriod()\" aria-label=\"Previous\">\n <i class=\"pi pi-angle-left\"></i>\n </button>\n }\n\n <div class=\"rz-dp-nav-title\">\n @if (_viewMode() === 'days') {\n <button type=\"button\" class=\"rz-dp-nav-link\" (click)=\"_showMonths()\">{{ _monthName() }}</button>\n <button type=\"button\" class=\"rz-dp-nav-link\" (click)=\"_showYears()\">{{ _year() }}</button>\n }\n @if (_viewMode() === 'months') {\n <button type=\"button\" class=\"rz-dp-nav-link\" (click)=\"_showYears()\">{{ _year() }}</button>\n }\n @if (_viewMode() === 'years') {\n <span class=\"rz-dp-decade-label\">{{ _decadeLabel() }}</span>\n }\n </div>\n\n @if (_viewMode() !== 'years') {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_nextPeriod()\" aria-label=\"Next\">\n <i class=\"pi pi-angle-right\"></i>\n </button>\n }\n @if (_viewMode() === 'days' && _showYearNav()) {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_nextYear()\" aria-label=\"Next year\">\n <i class=\"pi pi-angle-double-right\"></i>\n </button>\n }\n </div>\n\n @if (_showTodayBtn() && _viewMode() === 'days') {\n <button type=\"button\" class=\"rz-dp-today-btn\" (click)=\"_goToToday()\">\n <i class=\"pi pi-calendar-plus\"></i>\n Today\n </button>\n }\n </div>\n\n @if (_viewMode() === 'days') {\n <div class=\"rz-dp-days-view\">\n <div class=\"rz-dp-weekdays\">\n @for (day of _weekDaysOrdered(); track $index) {\n <div class=\"rz-dp-weekday-cell\">{{ day }}</div>\n }\n </div>\n <div class=\"rz-dp-days-grid\">\n @for (day of _calendarDays(); track day.date.getTime()) {\n @if (day.date.getMonth() === _viewDate().getMonth() || day.date.getMonth() === _viewDate().getMonth() - 1 || day.date.getMonth() === _viewDate().getMonth() + 1) {\n <button\n type=\"button\"\n class=\"rz-dp-day\"\n [class.other-month]=\"!day.isCurrentMonth && !day.isSelected\"\n [class.today]=\"day.isToday && !day.isSelected\"\n [class.selected]=\"day.isSelected\"\n [class.highlighted]=\"day.isHighlighted && !day.isSelected\"\n [class.disabled]=\"day.isDisabled\"\n [disabled]=\"day.isDisabled\"\n (click)=\"_selectDate(day.date)\"\n [attr.aria-label]=\"day.date.toLocaleDateString()\"\n >{{ day.day }}</button>\n }\n }\n </div>\n </div>\n }\n\n @if (_viewMode() === 'months') {\n <div class=\"rz-dp-months-grid\">\n @for (month of _monthNames; track $index) {\n <button\n type=\"button\"\n class=\"rz-dp-month-btn\"\n [class.current]=\"_isCurrentMonth($index)\"\n (click)=\"_selectMonth($index)\"\n >{{ _monthsShort[$index] }}</button>\n }\n </div>\n }\n\n @if (_viewMode() === 'years') {\n <div class=\"rz-dp-years-view\">\n <div class=\"rz-dp-years-nav\">\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_prevDecade()\">\n <i class=\"pi pi-chevron-left\"></i>\n </button>\n <span class=\"rz-dp-decade-label\">{{ _decadeLabel() }}</span>\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_nextDecade()\">\n <i class=\"pi pi-chevron-right\"></i>\n </button>\n </div>\n <div class=\"rz-dp-years-grid\">\n @for (year of _yearsList(); track $index) {\n <button\n type=\"button\"\n class=\"rz-dp-year-btn\"\n [class.current]=\"_isCurrentYear(year)\"\n (click)=\"_selectYear(year)\"\n >{{ year }}</button>\n }\n </div>\n </div>\n }\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"rz-dp-msg rz-dp-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-dp-msg rz-dp-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}", styles: [":host{--rz-accent: var(--color-primary, oklch(.32 .09 258));--rz-bg: var(--color-surface, oklch(.99 0 0));--rz-border: var(--color-border, oklch(.83 .015 260));--rz-text: var(--color-text, oklch(.14 .01 260));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--rz-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--rz-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error .rz-dp-input{border-color:var(--color-danger)!important}:host.has-error .rz-dp-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.rz-dp-wrapper{position:relative;overflow:visible}.rz-dp-trigger{display:flex;align-items:center;width:100%}.rz-dp-input{width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem 2.75rem .5rem .75rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease;cursor:pointer;box-sizing:border-box}.rz-dp-input::placeholder{color:var(--rz-muted)}.rz-dp-input:disabled{opacity:.5;cursor:not-allowed}:host([data-accent]) .rz-dp-input{border-color:color-mix(in srgb,var(--rz-accent) 40%,var(--rz-border))}.rz-dp-input:focus{border-color:var(--rz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--rz-accent) 20%,transparent)}:host([data-size=\"sm\"]) .rz-dp-input{padding:.25rem 2.25rem .25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dp-input{padding:.75rem 3rem .75rem 1rem;font-size:1rem}.rz-dp-clear{position:absolute;top:50%;translate:0 -50%;inset-inline-end:2rem;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;color:var(--rz-muted);font-size:.75rem;transition:color .15s}.rz-dp-clear:hover{color:var(--rz-text)}.rz-dp-icon{position:absolute;top:50%;translate:0 -50%;inset-inline-end:.625rem;pointer-events:none;color:var(--rz-accent);font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center}:host([data-size=\"sm\"]) .rz-dp-icon{inset-inline-end:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dp-icon{inset-inline-end:.75rem;font-size:1.125rem}.rz-dp-panel{--rz-text: var(--color-text, oklch(.14 .01 260));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));left:0;z-index:50;width:100%;min-width:17.5rem;background:var(--color-surface, oklch(.99 0 0));border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:var(--radius-md, .5rem);box-shadow:0 10px 15px -3px color-mix(in srgb,var(--color-text) 10%,transparent),0 4px 6px -4px color-mix(in srgb,var(--color-text) 10%,transparent);overflow:hidden;color:var(--color-text, oklch(.14 .01 260));box-sizing:border-box}.rz-dp-panel.absolute{position:absolute}.rz-dp-header{padding:.75rem;color:#fff}.rz-dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.375rem}.rz-dp-nav-btn{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:50%;background:transparent;color:color-mix(in srgb,white 80%,transparent);cursor:pointer;transition:background .15s;font-size:.75rem;flex-shrink:0}.rz-dp-nav-btn:hover{background:color-mix(in srgb,white 20%,transparent)}.rz-dp-nav-title{display:flex;align-items:center;gap:.25rem;font-size:.875rem;font-weight:600}.rz-dp-nav-link{padding:.125rem .375rem;border:none;border-radius:.25rem;background:transparent;color:#fff;cursor:pointer;transition:background .15s}.rz-dp-nav-link:hover{background:color-mix(in srgb,white 20%,transparent)}.rz-dp-decade-label{padding:0 .375rem}.rz-dp-today-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.375rem;padding:.25rem .5rem;border:none;border-radius:.25rem;background:color-mix(in srgb,white 20%,transparent);color:#fff;font-size:.75rem;cursor:pointer;transition:background .15s}.rz-dp-today-btn:hover{background:color-mix(in srgb,white 30%,transparent)}.rz-dp-days-view{padding:.625rem;box-sizing:border-box}.rz-dp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:.125rem;width:100%}.rz-dp-weekday-cell{display:flex;align-items:center;justify-content:center;height:1.75rem;font-size:.75rem;font-weight:500;color:var(--color-text-muted);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);min-width:0}.rz-dp-days-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.125rem;width:100%}.rz-dp-day{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;max-width:2.5rem;margin:0 auto;padding:0;border:none;border-radius:50%;cursor:pointer;font-size:.875rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);transition:all .15s;color:var(--rz-text);min-width:0;box-sizing:border-box}.rz-dp-day.other-month{color:var(--rz-muted)}.rz-dp-day.today{font-weight:600;box-shadow:0 0 0 2px var(--rz-accent)}.rz-dp-day.selected{background:var(--rz-accent);color:#fff;font-weight:600}.rz-dp-day.highlighted{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-day.disabled{opacity:.3;cursor:not-allowed}.rz-dp-day:not(.selected):not(.disabled):hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-months-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:.75rem}.rz-dp-month-btn{padding:.5rem;border-radius:.5rem;border:none;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);transition:background .15s,color .15s;cursor:pointer;color:var(--rz-text);background:transparent}.rz-dp-month-btn.current{background:var(--rz-accent);color:#fff}.rz-dp-month-btn:not(.current):hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-years-view{padding:.625rem}.rz-dp-years-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;padding:0 .25rem}.rz-dp-years-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.rz-dp-year-btn{padding:.5rem;border-radius:.5rem;border:none;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);transition:background .15s,color .15s;cursor:pointer;color:var(--rz-text);background:transparent}.rz-dp-year-btn.current{background:var(--rz-accent);color:#fff}.rz-dp-year-btn:not(.current):hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-dp-hint{color:var(--color-text-muted)}.rz-dp-error{color:var(--color-danger)}.rz-dp-fade-in{animation:rz-dp-in .2s ease}.rz-dp-fade-out{animation:rz-dp-out .15s ease forwards}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-dp-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes rz-dp-out{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
342
343
  }
343
344
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DatePickerComponent, decorators: [{
344
345
  type: Component,
@@ -346,9 +347,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
346
347
  '[attr.data-size]': '_size',
347
348
  '[attr.data-accent]': '_accentKey',
348
349
  '[class.has-error]': 'error()',
349
- '[style.--rz-accent]': '_rawAccent',
350
+ '[style.--rz-accent]': '_accentColorValue',
350
351
  '[style.width]': '_width',
351
- }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rz-dp-wrapper\">\n <label class=\"rz-dp-trigger\" (click)=\"_onTriggerClick($event)\">\n <input\n class=\"rz-dp-input\"\n type=\"text\"\n readonly\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"_displayValue()\"\n />\n\n @if (_displayValue() && !disabled()) {\n <button class=\"rz-dp-clear\" type=\"button\" (click)=\"_clear($event)\" aria-label=\"Clear date\">\n <i class=\"pi pi-times\"></i>\n </button>\n }\n\n <i class=\"rz-dp-icon pi pi-calendar\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-dp-panel\n class=\"rz-dp-panel\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.rz-dp-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.rz-dp-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n\n <div class=\"rz-dp-header\" [style.background-color]=\"_accentColorValue()\">\n <div class=\"rz-dp-nav\">\n @if (_viewMode() === 'days' && _showYearNav()) {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_prevYear()\" aria-label=\"Previous year\">\n <i class=\"pi pi-angle-double-left\"></i>\n </button>\n }\n @if (_viewMode() !== 'years') {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_prevPeriod()\" aria-label=\"Previous\">\n <i class=\"pi pi-angle-left\"></i>\n </button>\n }\n\n <div class=\"rz-dp-nav-title\">\n @if (_viewMode() === 'days') {\n <button type=\"button\" class=\"rz-dp-nav-link\" (click)=\"_showMonths()\">{{ _monthName() }}</button>\n <button type=\"button\" class=\"rz-dp-nav-link\" (click)=\"_showYears()\">{{ _year() }}</button>\n }\n @if (_viewMode() === 'months') {\n <button type=\"button\" class=\"rz-dp-nav-link\" (click)=\"_showYears()\">{{ _year() }}</button>\n }\n @if (_viewMode() === 'years') {\n <span class=\"rz-dp-decade-label\">{{ _decadeLabel() }}</span>\n }\n </div>\n\n @if (_viewMode() !== 'years') {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_nextPeriod()\" aria-label=\"Next\">\n <i class=\"pi pi-angle-right\"></i>\n </button>\n }\n @if (_viewMode() === 'days' && _showYearNav()) {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_nextYear()\" aria-label=\"Next year\">\n <i class=\"pi pi-angle-double-right\"></i>\n </button>\n }\n </div>\n\n @if (_showTodayBtn() && _viewMode() === 'days') {\n <button type=\"button\" class=\"rz-dp-today-btn\" (click)=\"_goToToday()\">\n <i class=\"pi pi-calendar-plus\"></i>\n Today\n </button>\n }\n </div>\n\n @if (_viewMode() === 'days') {\n <div class=\"rz-dp-days-view\">\n <div class=\"rz-dp-weekdays\">\n @for (day of _weekDaysOrdered(); track $index) {\n <div class=\"rz-dp-weekday-cell\">{{ day }}</div>\n }\n </div>\n <div class=\"rz-dp-days-grid\">\n @for (day of _calendarDays(); track day.date.getTime()) {\n @if (day.date.getMonth() === _viewDate().getMonth() || day.date.getMonth() === _viewDate().getMonth() - 1 || day.date.getMonth() === _viewDate().getMonth() + 1) {\n <button\n type=\"button\"\n class=\"rz-dp-day\"\n [class.other-month]=\"!day.isCurrentMonth && !day.isSelected\"\n [class.today]=\"day.isToday && !day.isSelected\"\n [class.selected]=\"day.isSelected\"\n [class.highlighted]=\"day.isHighlighted && !day.isSelected\"\n [class.disabled]=\"day.isDisabled\"\n [disabled]=\"day.isDisabled\"\n (click)=\"_selectDate(day.date)\"\n [attr.aria-label]=\"day.date.toLocaleDateString()\"\n >{{ day.day }}</button>\n }\n }\n </div>\n </div>\n }\n\n @if (_viewMode() === 'months') {\n <div class=\"rz-dp-months-grid\">\n @for (month of _monthNames; track $index) {\n <button\n type=\"button\"\n class=\"rz-dp-month-btn\"\n [class.current]=\"_isCurrentMonth($index)\"\n (click)=\"_selectMonth($index)\"\n >{{ _monthsShort[$index] }}</button>\n }\n </div>\n }\n\n @if (_viewMode() === 'years') {\n <div class=\"rz-dp-years-view\">\n <div class=\"rz-dp-years-nav\">\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_prevDecade()\">\n <i class=\"pi pi-chevron-left\"></i>\n </button>\n <span class=\"rz-dp-decade-label\">{{ _decadeLabel() }}</span>\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_nextDecade()\">\n <i class=\"pi pi-chevron-right\"></i>\n </button>\n </div>\n <div class=\"rz-dp-years-grid\">\n @for (year of _yearsList(); track $index) {\n <button\n type=\"button\"\n class=\"rz-dp-year-btn\"\n [class.current]=\"_isCurrentYear(year)\"\n (click)=\"_selectYear(year)\"\n >{{ year }}</button>\n }\n </div>\n </div>\n }\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"rz-dp-msg rz-dp-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-dp-msg rz-dp-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}", styles: [":host{--rz-accent: var(--color-primary, oklch(.32 .09 258));--rz-bg: var(--color-surface, oklch(.99 0 0));--rz-border: var(--color-border, oklch(.83 .015 260));--rz-text: var(--color-text, oklch(.14 .01 260));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--rz-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--rz-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error .rz-dp-input{border-color:var(--color-danger)!important}:host.has-error .rz-dp-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.rz-dp-wrapper{position:relative;overflow:visible}.rz-dp-trigger{display:flex;align-items:center;width:100%}.rz-dp-input{width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem 2.75rem .5rem .75rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease;cursor:pointer;box-sizing:border-box}.rz-dp-input::placeholder{color:var(--rz-muted)}.rz-dp-input:disabled{opacity:.5;cursor:not-allowed}.rz-dp-input:focus{border-color:var(--rz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--rz-accent) 20%,transparent)}:host([data-size=\"sm\"]) .rz-dp-input{padding:.25rem 2.25rem .25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dp-input{padding:.75rem 3rem .75rem 1rem;font-size:1rem}.rz-dp-clear{position:absolute;top:50%;translate:0 -50%;inset-inline-end:2rem;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;color:var(--rz-muted);font-size:.75rem;transition:color .15s}.rz-dp-clear:hover{color:var(--rz-text)}.rz-dp-icon{position:absolute;top:50%;translate:0 -50%;inset-inline-end:.625rem;pointer-events:none;color:var(--rz-accent);font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center}:host([data-size=\"sm\"]) .rz-dp-icon{inset-inline-end:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dp-icon{inset-inline-end:.75rem;font-size:1.125rem}.rz-dp-panel{left:0;z-index:50;width:100%;min-width:17.5rem;background:var(--color-surface, oklch(.99 0 0));border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:var(--radius-md, .5rem);box-shadow:0 10px 15px -3px color-mix(in srgb,var(--color-text) 10%,transparent),0 4px 6px -4px color-mix(in srgb,var(--color-text) 10%,transparent);overflow:hidden;color:var(--color-text, oklch(.14 .01 260));box-sizing:border-box}.rz-dp-panel.absolute{position:absolute}.rz-dp-header{padding:.75rem;color:#fff}.rz-dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.375rem}.rz-dp-nav-btn{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:50%;background:transparent;color:color-mix(in srgb,white 80%,transparent);cursor:pointer;transition:background .15s;font-size:.75rem;flex-shrink:0}.rz-dp-nav-btn:hover{background:color-mix(in srgb,white 20%,transparent)}.rz-dp-nav-title{display:flex;align-items:center;gap:.25rem;font-size:.875rem;font-weight:600}.rz-dp-nav-link{padding:.125rem .375rem;border:none;border-radius:.25rem;background:transparent;color:#fff;cursor:pointer;transition:background .15s}.rz-dp-nav-link:hover{background:color-mix(in srgb,white 20%,transparent)}.rz-dp-decade-label{padding:0 .375rem}.rz-dp-today-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.375rem;padding:.25rem .5rem;border:none;border-radius:.25rem;background:color-mix(in srgb,white 20%,transparent);color:#fff;font-size:.75rem;cursor:pointer;transition:background .15s}.rz-dp-today-btn:hover{background:color-mix(in srgb,white 30%,transparent)}.rz-dp-days-view{padding:.625rem;box-sizing:border-box}.rz-dp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:.125rem;width:100%}.rz-dp-weekday-cell{display:flex;align-items:center;justify-content:center;height:1.75rem;font-size:.75rem;font-weight:500;color:var(--color-text-muted);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);min-width:0}.rz-dp-days-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.125rem;width:100%}.rz-dp-day{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;max-width:2.5rem;margin:0 auto;padding:0;border:none;border-radius:50%;cursor:pointer;font-size:.875rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);transition:all .15s;color:var(--rz-text);min-width:0;box-sizing:border-box}.rz-dp-day.other-month{color:var(--rz-muted)}.rz-dp-day.today{font-weight:600;box-shadow:0 0 0 2px var(--rz-accent)}.rz-dp-day.selected{background:var(--rz-accent);color:#fff;font-weight:600}.rz-dp-day.highlighted{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-day.disabled{opacity:.3;cursor:not-allowed}.rz-dp-day:not(.selected):not(.disabled):hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-months-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:.75rem}.rz-dp-month-btn{padding:.5rem;border-radius:.5rem;border:none;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);transition:background .15s,color .15s;cursor:pointer;color:var(--rz-text);background:transparent}.rz-dp-month-btn.current{background:var(--rz-accent);color:#fff}.rz-dp-month-btn:not(.current):hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-years-view{padding:.625rem}.rz-dp-years-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;padding:0 .25rem}.rz-dp-years-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.rz-dp-year-btn{padding:.5rem;border-radius:.5rem;border:none;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);transition:background .15s,color .15s;cursor:pointer;color:var(--rz-text);background:transparent}.rz-dp-year-btn.current{background:var(--rz-accent);color:#fff}.rz-dp-year-btn:not(.current):hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-dp-hint{color:var(--color-text-muted)}.rz-dp-error{color:var(--color-danger)}.rz-dp-fade-in{animation:rz-dp-in .2s ease}.rz-dp-fade-out{animation:rz-dp-out .15s ease forwards}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-dp-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes rz-dp-out{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
352
+ }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rz-dp-wrapper\">\n <label class=\"rz-dp-trigger\" (click)=\"_onTriggerClick($event)\">\n <input\n class=\"rz-dp-input\"\n type=\"text\"\n readonly\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"_displayValue()\"\n />\n\n @if (_displayValue() && !disabled()) {\n <button class=\"rz-dp-clear\" type=\"button\" (click)=\"_clear($event)\" aria-label=\"Clear date\">\n <i class=\"pi pi-times\"></i>\n </button>\n }\n\n <i class=\"rz-dp-icon pi pi-calendar\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-dp-panel\n class=\"rz-dp-panel\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.rz-dp-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.rz-dp-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n\n <div class=\"rz-dp-header\" [style.background-color]=\"_accentColorValue()\">\n <div class=\"rz-dp-nav\">\n @if (_viewMode() === 'days' && _showYearNav()) {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_prevYear()\" aria-label=\"Previous year\">\n <i class=\"pi pi-angle-double-left\"></i>\n </button>\n }\n @if (_viewMode() !== 'years') {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_prevPeriod()\" aria-label=\"Previous\">\n <i class=\"pi pi-angle-left\"></i>\n </button>\n }\n\n <div class=\"rz-dp-nav-title\">\n @if (_viewMode() === 'days') {\n <button type=\"button\" class=\"rz-dp-nav-link\" (click)=\"_showMonths()\">{{ _monthName() }}</button>\n <button type=\"button\" class=\"rz-dp-nav-link\" (click)=\"_showYears()\">{{ _year() }}</button>\n }\n @if (_viewMode() === 'months') {\n <button type=\"button\" class=\"rz-dp-nav-link\" (click)=\"_showYears()\">{{ _year() }}</button>\n }\n @if (_viewMode() === 'years') {\n <span class=\"rz-dp-decade-label\">{{ _decadeLabel() }}</span>\n }\n </div>\n\n @if (_viewMode() !== 'years') {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_nextPeriod()\" aria-label=\"Next\">\n <i class=\"pi pi-angle-right\"></i>\n </button>\n }\n @if (_viewMode() === 'days' && _showYearNav()) {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_nextYear()\" aria-label=\"Next year\">\n <i class=\"pi pi-angle-double-right\"></i>\n </button>\n }\n </div>\n\n @if (_showTodayBtn() && _viewMode() === 'days') {\n <button type=\"button\" class=\"rz-dp-today-btn\" (click)=\"_goToToday()\">\n <i class=\"pi pi-calendar-plus\"></i>\n Today\n </button>\n }\n </div>\n\n @if (_viewMode() === 'days') {\n <div class=\"rz-dp-days-view\">\n <div class=\"rz-dp-weekdays\">\n @for (day of _weekDaysOrdered(); track $index) {\n <div class=\"rz-dp-weekday-cell\">{{ day }}</div>\n }\n </div>\n <div class=\"rz-dp-days-grid\">\n @for (day of _calendarDays(); track day.date.getTime()) {\n @if (day.date.getMonth() === _viewDate().getMonth() || day.date.getMonth() === _viewDate().getMonth() - 1 || day.date.getMonth() === _viewDate().getMonth() + 1) {\n <button\n type=\"button\"\n class=\"rz-dp-day\"\n [class.other-month]=\"!day.isCurrentMonth && !day.isSelected\"\n [class.today]=\"day.isToday && !day.isSelected\"\n [class.selected]=\"day.isSelected\"\n [class.highlighted]=\"day.isHighlighted && !day.isSelected\"\n [class.disabled]=\"day.isDisabled\"\n [disabled]=\"day.isDisabled\"\n (click)=\"_selectDate(day.date)\"\n [attr.aria-label]=\"day.date.toLocaleDateString()\"\n >{{ day.day }}</button>\n }\n }\n </div>\n </div>\n }\n\n @if (_viewMode() === 'months') {\n <div class=\"rz-dp-months-grid\">\n @for (month of _monthNames; track $index) {\n <button\n type=\"button\"\n class=\"rz-dp-month-btn\"\n [class.current]=\"_isCurrentMonth($index)\"\n (click)=\"_selectMonth($index)\"\n >{{ _monthsShort[$index] }}</button>\n }\n </div>\n }\n\n @if (_viewMode() === 'years') {\n <div class=\"rz-dp-years-view\">\n <div class=\"rz-dp-years-nav\">\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_prevDecade()\">\n <i class=\"pi pi-chevron-left\"></i>\n </button>\n <span class=\"rz-dp-decade-label\">{{ _decadeLabel() }}</span>\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_nextDecade()\">\n <i class=\"pi pi-chevron-right\"></i>\n </button>\n </div>\n <div class=\"rz-dp-years-grid\">\n @for (year of _yearsList(); track $index) {\n <button\n type=\"button\"\n class=\"rz-dp-year-btn\"\n [class.current]=\"_isCurrentYear(year)\"\n (click)=\"_selectYear(year)\"\n >{{ year }}</button>\n }\n </div>\n </div>\n }\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"rz-dp-msg rz-dp-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-dp-msg rz-dp-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}", styles: [":host{--rz-accent: var(--color-primary, oklch(.32 .09 258));--rz-bg: var(--color-surface, oklch(.99 0 0));--rz-border: var(--color-border, oklch(.83 .015 260));--rz-text: var(--color-text, oklch(.14 .01 260));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--rz-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--rz-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error .rz-dp-input{border-color:var(--color-danger)!important}:host.has-error .rz-dp-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.rz-dp-wrapper{position:relative;overflow:visible}.rz-dp-trigger{display:flex;align-items:center;width:100%}.rz-dp-input{width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem 2.75rem .5rem .75rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease;cursor:pointer;box-sizing:border-box}.rz-dp-input::placeholder{color:var(--rz-muted)}.rz-dp-input:disabled{opacity:.5;cursor:not-allowed}:host([data-accent]) .rz-dp-input{border-color:color-mix(in srgb,var(--rz-accent) 40%,var(--rz-border))}.rz-dp-input:focus{border-color:var(--rz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--rz-accent) 20%,transparent)}:host([data-size=\"sm\"]) .rz-dp-input{padding:.25rem 2.25rem .25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dp-input{padding:.75rem 3rem .75rem 1rem;font-size:1rem}.rz-dp-clear{position:absolute;top:50%;translate:0 -50%;inset-inline-end:2rem;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;color:var(--rz-muted);font-size:.75rem;transition:color .15s}.rz-dp-clear:hover{color:var(--rz-text)}.rz-dp-icon{position:absolute;top:50%;translate:0 -50%;inset-inline-end:.625rem;pointer-events:none;color:var(--rz-accent);font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center}:host([data-size=\"sm\"]) .rz-dp-icon{inset-inline-end:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dp-icon{inset-inline-end:.75rem;font-size:1.125rem}.rz-dp-panel{--rz-text: var(--color-text, oklch(.14 .01 260));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));left:0;z-index:50;width:100%;min-width:17.5rem;background:var(--color-surface, oklch(.99 0 0));border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:var(--radius-md, .5rem);box-shadow:0 10px 15px -3px color-mix(in srgb,var(--color-text) 10%,transparent),0 4px 6px -4px color-mix(in srgb,var(--color-text) 10%,transparent);overflow:hidden;color:var(--color-text, oklch(.14 .01 260));box-sizing:border-box}.rz-dp-panel.absolute{position:absolute}.rz-dp-header{padding:.75rem;color:#fff}.rz-dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.375rem}.rz-dp-nav-btn{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:50%;background:transparent;color:color-mix(in srgb,white 80%,transparent);cursor:pointer;transition:background .15s;font-size:.75rem;flex-shrink:0}.rz-dp-nav-btn:hover{background:color-mix(in srgb,white 20%,transparent)}.rz-dp-nav-title{display:flex;align-items:center;gap:.25rem;font-size:.875rem;font-weight:600}.rz-dp-nav-link{padding:.125rem .375rem;border:none;border-radius:.25rem;background:transparent;color:#fff;cursor:pointer;transition:background .15s}.rz-dp-nav-link:hover{background:color-mix(in srgb,white 20%,transparent)}.rz-dp-decade-label{padding:0 .375rem}.rz-dp-today-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.375rem;padding:.25rem .5rem;border:none;border-radius:.25rem;background:color-mix(in srgb,white 20%,transparent);color:#fff;font-size:.75rem;cursor:pointer;transition:background .15s}.rz-dp-today-btn:hover{background:color-mix(in srgb,white 30%,transparent)}.rz-dp-days-view{padding:.625rem;box-sizing:border-box}.rz-dp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:.125rem;width:100%}.rz-dp-weekday-cell{display:flex;align-items:center;justify-content:center;height:1.75rem;font-size:.75rem;font-weight:500;color:var(--color-text-muted);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);min-width:0}.rz-dp-days-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.125rem;width:100%}.rz-dp-day{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;max-width:2.5rem;margin:0 auto;padding:0;border:none;border-radius:50%;cursor:pointer;font-size:.875rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);transition:all .15s;color:var(--rz-text);min-width:0;box-sizing:border-box}.rz-dp-day.other-month{color:var(--rz-muted)}.rz-dp-day.today{font-weight:600;box-shadow:0 0 0 2px var(--rz-accent)}.rz-dp-day.selected{background:var(--rz-accent);color:#fff;font-weight:600}.rz-dp-day.highlighted{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-day.disabled{opacity:.3;cursor:not-allowed}.rz-dp-day:not(.selected):not(.disabled):hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-months-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:.75rem}.rz-dp-month-btn{padding:.5rem;border-radius:.5rem;border:none;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);transition:background .15s,color .15s;cursor:pointer;color:var(--rz-text);background:transparent}.rz-dp-month-btn.current{background:var(--rz-accent);color:#fff}.rz-dp-month-btn:not(.current):hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-years-view{padding:.625rem}.rz-dp-years-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;padding:0 .25rem}.rz-dp-years-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.rz-dp-year-btn{padding:.5rem;border-radius:.5rem;border:none;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);transition:background .15s,color .15s;cursor:pointer;color:var(--rz-text);background:transparent}.rz-dp-year-btn.current{background:var(--rz-accent);color:#fff}.rz-dp-year-btn:not(.current):hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-dp-hint{color:var(--color-text-muted)}.rz-dp-error{color:var(--color-danger)}.rz-dp-fade-in{animation:rz-dp-in .2s ease}.rz-dp-fade-out{animation:rz-dp-out .15s ease forwards}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-dp-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes rz-dp-out{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
352
353
  }], 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 }] }] } });
353
354
 
354
355
  class DropDownComponent {
@@ -395,7 +396,7 @@ class DropDownComponent {
395
396
  _panelWidth = signal(0, ...(ngDevMode ? [{ debugName: "_panelWidth" }] : []));
396
397
  _panelEl = null;
397
398
  _searchQuery = signal('', ...(ngDevMode ? [{ debugName: "_searchQuery" }] : []));
398
- _appendToParent = computed(() => this.config().appendToParent ?? false, ...(ngDevMode ? [{ debugName: "_appendToParent" }] : []));
399
+ _appendToParent = computed(() => this.config().appendToBody ?? this.config().appendToParent ?? true, ...(ngDevMode ? [{ debugName: "_appendToParent" }] : []));
399
400
  _panelFixed = computed(() => this._isOpen() && this._appendToParent() ? 'fixed' : null, ...(ngDevMode ? [{ debugName: "_panelFixed" }] : []));
400
401
  _maxHeight = computed(() => this.config().maxHeight ?? '256px', ...(ngDevMode ? [{ debugName: "_maxHeight" }] : []));
401
402
  _selectedLabel = computed(() => {
@@ -472,6 +473,7 @@ class DropDownComponent {
472
473
  const panel = this._elementRef.nativeElement.querySelector('[data-dd-panel]');
473
474
  if (panel) {
474
475
  document.body.appendChild(panel);
476
+ panel.style.setProperty('--rz-accent', this._accentColorValue());
475
477
  this._panelEl = panel;
476
478
  }
477
479
  }
@@ -517,7 +519,7 @@ class DropDownComponent {
517
519
  }
518
520
  }
519
521
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropDownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
520
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DropDownComponent, isStandalone: true, selector: "app-drop-down", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "window:scroll": "_onWindowScroll()" }, properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--rz-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<div class=\"rz-dd-wrapper\">\n <label class=\"rz-dd-trigger\" (click)=\"_onTriggerClick($event)\">\n <input\n class=\"rz-dd-input\"\n type=\"text\"\n readonly\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"_selectedLabel()\"\n />\n\n @if (_selectedLabel() && !disabled()) {\n <button class=\"rz-dd-clear\" type=\"button\" (click)=\"_clear($event)\" aria-label=\"Clear\">\n <i class=\"pi pi-times\"></i>\n </button>\n }\n\n <i class=\"rz-dd-icon pi pi-chevron-down\" [class.is-open]=\"_isOpen()\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-dd-panel\n class=\"rz-dd-panel\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.rz-dd-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.rz-dd-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n\n @if (searchable()) {\n <div class=\"rz-dd-search-wrap\">\n <input\n data-dd-search\n type=\"text\"\n class=\"rz-dd-search-input\"\n placeholder=\"Search...\"\n [value]=\"_searchQuery()\"\n (input)=\"_searchQuery.set($any($event.target).value)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n }\n\n <div\n class=\"rz-dd-options\"\n [style.max-height]=\"_maxHeight()\"\n (scroll)=\"$event.stopPropagation()\">\n @for (option of _filteredOptions(); track option.value) {\n <button\n type=\"button\"\n class=\"rz-dd-option\"\n [class.selected]=\"option.value === value()\"\n (click)=\"_selectOption(option)\"\n >{{ option.label }}</button>\n }\n\n @if (_filteredOptions().length === 0) {\n <div class=\"rz-dd-empty\">No results found</div>\n }\n </div>\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"rz-dd-msg rz-dd-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-dd-msg rz-dd-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}", styles: [":host{--rz-accent: var(--color-accent, oklch(.64 .2 50));--rz-bg: var(--color-surface, oklch(.99 0 0));--rz-border: var(--color-border, oklch(.83 .015 260));--rz-text: var(--color-text, oklch(.14 .01 260));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));--rz-surface: var(--color-surface-alt, oklch(.975 .005 260));--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--rz-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--rz-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error .rz-dd-input{border-color:var(--color-danger, oklch(.55 .25 25))!important}:host.has-error .rz-dd-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger, oklch(.55 .25 25)) 20%,transparent)!important}.rz-dd-wrapper{position:relative;overflow:visible}.rz-dd-trigger{display:flex;align-items:center;width:100%}.rz-dd-input{width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem 2.75rem .5rem .75rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease;cursor:pointer;box-sizing:border-box}.rz-dd-input::placeholder{color:var(--rz-muted)}.rz-dd-input:disabled{opacity:.5;cursor:not-allowed}.rz-dd-input:focus{border-color:var(--rz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--rz-accent) 20%,transparent)}:host([data-size=\"sm\"]) .rz-dd-input{padding:.25rem 2.25rem .25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dd-input{padding:.75rem 3rem .75rem 1rem;font-size:1rem}.rz-dd-clear{position:absolute;top:50%;translate:0 -50%;inset-inline-end:2rem;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;color:var(--rz-muted);font-size:.75rem;transition:color .15s}.rz-dd-clear:hover{color:var(--rz-text)}.rz-dd-icon{position:absolute;top:50%;translate:0 -50%;inset-inline-end:.625rem;pointer-events:none;color:var(--rz-muted);font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:transform .2s}.rz-dd-icon.is-open{transform:rotate(180deg)}:host([data-size=\"sm\"]) .rz-dd-icon{inset-inline-end:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dd-icon{inset-inline-end:.75rem;font-size:1.125rem}.rz-dd-panel{left:0;z-index:50;width:100%;min-width:15rem;background:var(--color-surface, oklch(.99 0 0));border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:var(--radius-md, .5rem);box-shadow:0 10px 15px -3px color-mix(in srgb,var(--color-text) 10%,transparent),0 4px 6px -4px color-mix(in srgb,var(--color-text) 10%,transparent);overflow:hidden;color:var(--color-text, oklch(.14 .01 260));box-sizing:border-box}.rz-dd-panel.absolute{position:absolute}.rz-dd-search-wrap{padding:.5rem .5rem 0}.rz-dd-search-input{width:100%;padding:.375rem .5rem;font-size:.875rem;border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:.25rem;outline:none;background:var(--color-surface, oklch(.99 0 0));color:var(--color-text, oklch(.14 .01 260));font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);box-sizing:border-box}.rz-dd-search-input::placeholder{color:var(--color-text-muted)}.rz-dd-search-input:focus{border-color:var(--color-accent)}.rz-dd-options{overflow-y:auto}.rz-dd-option{width:100%;text-align:left;border:none;cursor:pointer;transition:background .1s,color .1s;background:transparent;color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem .75rem;font-size:.875rem;box-sizing:border-box}.rz-dd-option:hover{background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface))}.rz-dd-option.selected{background:var(--rz-accent);color:var(--color-primary-inverse, oklch(.99 0 0));font-weight:600}:host([data-size=\"sm\"]) .rz-dd-option{padding:.375rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dd-option{padding:.75rem 1rem;font-size:1rem}.rz-dd-empty{padding:1rem .75rem;text-align:center;font-size:.875rem;color:var(--rz-muted)}.rz-dd-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-dd-hint{color:var(--color-text-muted)}.rz-dd-error{color:var(--color-danger)}.rz-dd-fade-in{animation:rz-dd-in .2s ease}.rz-dd-fade-out{animation:rz-dd-out .15s ease forwards}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-dd-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes rz-dd-out{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
522
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DropDownComponent, isStandalone: true, selector: "app-drop-down", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "window:scroll": "_onWindowScroll()" }, properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--rz-accent": "_accentColorValue", "style.width": "_width" } }, ngImport: i0, template: "<div class=\"rz-dd-wrapper\">\n <label class=\"rz-dd-trigger\" (click)=\"_onTriggerClick($event)\">\n <input\n class=\"rz-dd-input\"\n type=\"text\"\n readonly\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"_selectedLabel()\"\n />\n\n @if (_selectedLabel() && !disabled()) {\n <button class=\"rz-dd-clear\" type=\"button\" (click)=\"_clear($event)\" aria-label=\"Clear\">\n <i class=\"pi pi-times\"></i>\n </button>\n }\n\n <i class=\"rz-dd-icon pi pi-chevron-down\" [class.is-open]=\"_isOpen()\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-dd-panel\n class=\"rz-dd-panel\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.rz-dd-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.rz-dd-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n\n @if (searchable()) {\n <div class=\"rz-dd-search-wrap\">\n <input\n data-dd-search\n type=\"text\"\n class=\"rz-dd-search-input\"\n placeholder=\"Search...\"\n [value]=\"_searchQuery()\"\n (input)=\"_searchQuery.set($any($event.target).value)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n }\n\n <div\n class=\"rz-dd-options\"\n [style.max-height]=\"_maxHeight()\"\n (scroll)=\"$event.stopPropagation()\">\n @for (option of _filteredOptions(); track option.value) {\n <button\n type=\"button\"\n class=\"rz-dd-option\"\n [class.selected]=\"option.value === value()\"\n (click)=\"_selectOption(option)\"\n >{{ option.label }}</button>\n }\n\n @if (_filteredOptions().length === 0) {\n <div class=\"rz-dd-empty\">No results found</div>\n }\n </div>\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"rz-dd-msg rz-dd-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-dd-msg rz-dd-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}", styles: [":host{--rz-accent: var(--color-accent, oklch(.64 .2 50));--rz-bg: var(--color-surface, oklch(.99 0 0));--rz-border: var(--color-border, oklch(.83 .015 260));--rz-text: var(--color-text, oklch(.14 .01 260));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));--rz-surface: var(--color-surface-alt, oklch(.975 .005 260));--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--rz-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--rz-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error .rz-dd-input{border-color:var(--color-danger, oklch(.55 .25 25))!important}:host.has-error .rz-dd-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger, oklch(.55 .25 25)) 20%,transparent)!important}.rz-dd-wrapper{position:relative;overflow:visible}.rz-dd-trigger{display:flex;align-items:center;width:100%}.rz-dd-input{width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem 2.75rem .5rem .75rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease;cursor:pointer;box-sizing:border-box}.rz-dd-input::placeholder{color:var(--rz-muted)}.rz-dd-input:disabled{opacity:.5;cursor:not-allowed}:host([data-accent]) .rz-dd-input{border-color:color-mix(in srgb,var(--rz-accent) 40%,var(--rz-border))}.rz-dd-input:focus{border-color:var(--rz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--rz-accent) 20%,transparent)}:host([data-size=\"sm\"]) .rz-dd-input{padding:.25rem 2.25rem .25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dd-input{padding:.75rem 3rem .75rem 1rem;font-size:1rem}.rz-dd-clear{position:absolute;top:50%;translate:0 -50%;inset-inline-end:2rem;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;color:var(--rz-muted);font-size:.75rem;transition:color .15s}.rz-dd-clear:hover{color:var(--rz-text)}.rz-dd-icon{position:absolute;top:50%;translate:0 -50%;inset-inline-end:.625rem;pointer-events:none;color:var(--rz-muted);font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:transform .2s}.rz-dd-icon.is-open{transform:rotate(180deg)}:host([data-size=\"sm\"]) .rz-dd-icon{inset-inline-end:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dd-icon{inset-inline-end:.75rem;font-size:1.125rem}.rz-dd-panel{left:0;z-index:50;width:100%;min-width:15rem;background:var(--color-surface, oklch(.99 0 0));border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:var(--radius-md, .5rem);box-shadow:0 10px 15px -3px color-mix(in srgb,var(--color-text) 10%,transparent),0 4px 6px -4px color-mix(in srgb,var(--color-text) 10%,transparent);overflow:hidden;color:var(--color-text, oklch(.14 .01 260));box-sizing:border-box}.rz-dd-panel.absolute{position:absolute}.rz-dd-search-wrap{padding:.5rem .5rem 0}.rz-dd-search-input{width:100%;padding:.375rem .5rem;font-size:.875rem;border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:.25rem;outline:none;background:var(--color-surface, oklch(.99 0 0));color:var(--color-text, oklch(.14 .01 260));font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);box-sizing:border-box}.rz-dd-search-input::placeholder{color:var(--color-text-muted)}.rz-dd-search-input:focus{border-color:var(--color-accent)}.rz-dd-options{overflow-y:auto}.rz-dd-option{width:100%;text-align:left;border:none;cursor:pointer;transition:background .1s,color .1s;background:transparent;color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem .75rem;font-size:.875rem;box-sizing:border-box}.rz-dd-option:hover{background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface))}.rz-dd-option.selected{background:var(--rz-accent);color:var(--color-primary-inverse, oklch(.99 0 0));font-weight:600}:host([data-size=\"sm\"]) .rz-dd-option{padding:.375rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dd-option{padding:.75rem 1rem;font-size:1rem}.rz-dd-empty{padding:1rem .75rem;text-align:center;font-size:.875rem;color:var(--rz-muted)}.rz-dd-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-dd-hint{color:var(--color-text-muted)}.rz-dd-error{color:var(--color-danger)}.rz-dd-fade-in{animation:rz-dd-in .2s ease}.rz-dd-fade-out{animation:rz-dd-out .15s ease forwards}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-dd-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes rz-dd-out{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
521
523
  }
522
524
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropDownComponent, decorators: [{
523
525
  type: Component,
@@ -525,10 +527,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
525
527
  '[attr.data-size]': '_size',
526
528
  '[attr.data-accent]': '_accentKey',
527
529
  '[class.has-error]': 'error()',
528
- '[style.--rz-accent]': '_rawAccent',
530
+ '[style.--rz-accent]': '_accentColorValue',
529
531
  '[style.width]': '_width',
530
532
  '(window:scroll)': '_onWindowScroll()',
531
- }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rz-dd-wrapper\">\n <label class=\"rz-dd-trigger\" (click)=\"_onTriggerClick($event)\">\n <input\n class=\"rz-dd-input\"\n type=\"text\"\n readonly\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"_selectedLabel()\"\n />\n\n @if (_selectedLabel() && !disabled()) {\n <button class=\"rz-dd-clear\" type=\"button\" (click)=\"_clear($event)\" aria-label=\"Clear\">\n <i class=\"pi pi-times\"></i>\n </button>\n }\n\n <i class=\"rz-dd-icon pi pi-chevron-down\" [class.is-open]=\"_isOpen()\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-dd-panel\n class=\"rz-dd-panel\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.rz-dd-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.rz-dd-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n\n @if (searchable()) {\n <div class=\"rz-dd-search-wrap\">\n <input\n data-dd-search\n type=\"text\"\n class=\"rz-dd-search-input\"\n placeholder=\"Search...\"\n [value]=\"_searchQuery()\"\n (input)=\"_searchQuery.set($any($event.target).value)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n }\n\n <div\n class=\"rz-dd-options\"\n [style.max-height]=\"_maxHeight()\"\n (scroll)=\"$event.stopPropagation()\">\n @for (option of _filteredOptions(); track option.value) {\n <button\n type=\"button\"\n class=\"rz-dd-option\"\n [class.selected]=\"option.value === value()\"\n (click)=\"_selectOption(option)\"\n >{{ option.label }}</button>\n }\n\n @if (_filteredOptions().length === 0) {\n <div class=\"rz-dd-empty\">No results found</div>\n }\n </div>\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"rz-dd-msg rz-dd-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-dd-msg rz-dd-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}", styles: [":host{--rz-accent: var(--color-accent, oklch(.64 .2 50));--rz-bg: var(--color-surface, oklch(.99 0 0));--rz-border: var(--color-border, oklch(.83 .015 260));--rz-text: var(--color-text, oklch(.14 .01 260));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));--rz-surface: var(--color-surface-alt, oklch(.975 .005 260));--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--rz-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--rz-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error .rz-dd-input{border-color:var(--color-danger, oklch(.55 .25 25))!important}:host.has-error .rz-dd-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger, oklch(.55 .25 25)) 20%,transparent)!important}.rz-dd-wrapper{position:relative;overflow:visible}.rz-dd-trigger{display:flex;align-items:center;width:100%}.rz-dd-input{width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem 2.75rem .5rem .75rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease;cursor:pointer;box-sizing:border-box}.rz-dd-input::placeholder{color:var(--rz-muted)}.rz-dd-input:disabled{opacity:.5;cursor:not-allowed}.rz-dd-input:focus{border-color:var(--rz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--rz-accent) 20%,transparent)}:host([data-size=\"sm\"]) .rz-dd-input{padding:.25rem 2.25rem .25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dd-input{padding:.75rem 3rem .75rem 1rem;font-size:1rem}.rz-dd-clear{position:absolute;top:50%;translate:0 -50%;inset-inline-end:2rem;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;color:var(--rz-muted);font-size:.75rem;transition:color .15s}.rz-dd-clear:hover{color:var(--rz-text)}.rz-dd-icon{position:absolute;top:50%;translate:0 -50%;inset-inline-end:.625rem;pointer-events:none;color:var(--rz-muted);font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:transform .2s}.rz-dd-icon.is-open{transform:rotate(180deg)}:host([data-size=\"sm\"]) .rz-dd-icon{inset-inline-end:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dd-icon{inset-inline-end:.75rem;font-size:1.125rem}.rz-dd-panel{left:0;z-index:50;width:100%;min-width:15rem;background:var(--color-surface, oklch(.99 0 0));border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:var(--radius-md, .5rem);box-shadow:0 10px 15px -3px color-mix(in srgb,var(--color-text) 10%,transparent),0 4px 6px -4px color-mix(in srgb,var(--color-text) 10%,transparent);overflow:hidden;color:var(--color-text, oklch(.14 .01 260));box-sizing:border-box}.rz-dd-panel.absolute{position:absolute}.rz-dd-search-wrap{padding:.5rem .5rem 0}.rz-dd-search-input{width:100%;padding:.375rem .5rem;font-size:.875rem;border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:.25rem;outline:none;background:var(--color-surface, oklch(.99 0 0));color:var(--color-text, oklch(.14 .01 260));font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);box-sizing:border-box}.rz-dd-search-input::placeholder{color:var(--color-text-muted)}.rz-dd-search-input:focus{border-color:var(--color-accent)}.rz-dd-options{overflow-y:auto}.rz-dd-option{width:100%;text-align:left;border:none;cursor:pointer;transition:background .1s,color .1s;background:transparent;color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem .75rem;font-size:.875rem;box-sizing:border-box}.rz-dd-option:hover{background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface))}.rz-dd-option.selected{background:var(--rz-accent);color:var(--color-primary-inverse, oklch(.99 0 0));font-weight:600}:host([data-size=\"sm\"]) .rz-dd-option{padding:.375rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dd-option{padding:.75rem 1rem;font-size:1rem}.rz-dd-empty{padding:1rem .75rem;text-align:center;font-size:.875rem;color:var(--rz-muted)}.rz-dd-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-dd-hint{color:var(--color-text-muted)}.rz-dd-error{color:var(--color-danger)}.rz-dd-fade-in{animation:rz-dd-in .2s ease}.rz-dd-fade-out{animation:rz-dd-out .15s ease forwards}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-dd-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes rz-dd-out{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
533
+ }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rz-dd-wrapper\">\n <label class=\"rz-dd-trigger\" (click)=\"_onTriggerClick($event)\">\n <input\n class=\"rz-dd-input\"\n type=\"text\"\n readonly\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"_selectedLabel()\"\n />\n\n @if (_selectedLabel() && !disabled()) {\n <button class=\"rz-dd-clear\" type=\"button\" (click)=\"_clear($event)\" aria-label=\"Clear\">\n <i class=\"pi pi-times\"></i>\n </button>\n }\n\n <i class=\"rz-dd-icon pi pi-chevron-down\" [class.is-open]=\"_isOpen()\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-dd-panel\n class=\"rz-dd-panel\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.rz-dd-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.rz-dd-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n\n @if (searchable()) {\n <div class=\"rz-dd-search-wrap\">\n <input\n data-dd-search\n type=\"text\"\n class=\"rz-dd-search-input\"\n placeholder=\"Search...\"\n [value]=\"_searchQuery()\"\n (input)=\"_searchQuery.set($any($event.target).value)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n }\n\n <div\n class=\"rz-dd-options\"\n [style.max-height]=\"_maxHeight()\"\n (scroll)=\"$event.stopPropagation()\">\n @for (option of _filteredOptions(); track option.value) {\n <button\n type=\"button\"\n class=\"rz-dd-option\"\n [class.selected]=\"option.value === value()\"\n (click)=\"_selectOption(option)\"\n >{{ option.label }}</button>\n }\n\n @if (_filteredOptions().length === 0) {\n <div class=\"rz-dd-empty\">No results found</div>\n }\n </div>\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"rz-dd-msg rz-dd-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-dd-msg rz-dd-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}", styles: [":host{--rz-accent: var(--color-accent, oklch(.64 .2 50));--rz-bg: var(--color-surface, oklch(.99 0 0));--rz-border: var(--color-border, oklch(.83 .015 260));--rz-text: var(--color-text, oklch(.14 .01 260));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));--rz-surface: var(--color-surface-alt, oklch(.975 .005 260));--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--rz-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--rz-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error .rz-dd-input{border-color:var(--color-danger, oklch(.55 .25 25))!important}:host.has-error .rz-dd-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger, oklch(.55 .25 25)) 20%,transparent)!important}.rz-dd-wrapper{position:relative;overflow:visible}.rz-dd-trigger{display:flex;align-items:center;width:100%}.rz-dd-input{width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem 2.75rem .5rem .75rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease;cursor:pointer;box-sizing:border-box}.rz-dd-input::placeholder{color:var(--rz-muted)}.rz-dd-input:disabled{opacity:.5;cursor:not-allowed}:host([data-accent]) .rz-dd-input{border-color:color-mix(in srgb,var(--rz-accent) 40%,var(--rz-border))}.rz-dd-input:focus{border-color:var(--rz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--rz-accent) 20%,transparent)}:host([data-size=\"sm\"]) .rz-dd-input{padding:.25rem 2.25rem .25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dd-input{padding:.75rem 3rem .75rem 1rem;font-size:1rem}.rz-dd-clear{position:absolute;top:50%;translate:0 -50%;inset-inline-end:2rem;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;color:var(--rz-muted);font-size:.75rem;transition:color .15s}.rz-dd-clear:hover{color:var(--rz-text)}.rz-dd-icon{position:absolute;top:50%;translate:0 -50%;inset-inline-end:.625rem;pointer-events:none;color:var(--rz-muted);font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:transform .2s}.rz-dd-icon.is-open{transform:rotate(180deg)}:host([data-size=\"sm\"]) .rz-dd-icon{inset-inline-end:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dd-icon{inset-inline-end:.75rem;font-size:1.125rem}.rz-dd-panel{left:0;z-index:50;width:100%;min-width:15rem;background:var(--color-surface, oklch(.99 0 0));border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:var(--radius-md, .5rem);box-shadow:0 10px 15px -3px color-mix(in srgb,var(--color-text) 10%,transparent),0 4px 6px -4px color-mix(in srgb,var(--color-text) 10%,transparent);overflow:hidden;color:var(--color-text, oklch(.14 .01 260));box-sizing:border-box}.rz-dd-panel.absolute{position:absolute}.rz-dd-search-wrap{padding:.5rem .5rem 0}.rz-dd-search-input{width:100%;padding:.375rem .5rem;font-size:.875rem;border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:.25rem;outline:none;background:var(--color-surface, oklch(.99 0 0));color:var(--color-text, oklch(.14 .01 260));font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);box-sizing:border-box}.rz-dd-search-input::placeholder{color:var(--color-text-muted)}.rz-dd-search-input:focus{border-color:var(--color-accent)}.rz-dd-options{overflow-y:auto}.rz-dd-option{width:100%;text-align:left;border:none;cursor:pointer;transition:background .1s,color .1s;background:transparent;color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem .75rem;font-size:.875rem;box-sizing:border-box}.rz-dd-option:hover{background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface))}.rz-dd-option.selected{background:var(--rz-accent);color:var(--color-primary-inverse, oklch(.99 0 0));font-weight:600}:host([data-size=\"sm\"]) .rz-dd-option{padding:.375rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dd-option{padding:.75rem 1rem;font-size:1rem}.rz-dd-empty{padding:1rem .75rem;text-align:center;font-size:.875rem;color:var(--rz-muted)}.rz-dd-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-dd-hint{color:var(--color-text-muted)}.rz-dd-error{color:var(--color-danger)}.rz-dd-fade-in{animation:rz-dd-in .2s ease}.rz-dd-fade-out{animation:rz-dd-out .15s ease forwards}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-dd-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes rz-dd-out{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
532
534
  }], 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 }] }] } });
533
535
 
534
536
  class FileUploadComponent {
@@ -643,6 +645,14 @@ class MultiSelectComponent {
643
645
  const c = this.accentColor();
644
646
  return c && !isThemeColor(c) ? c : null;
645
647
  }, ...(ngDevMode ? [{ debugName: "_rawAccent" }] : []));
648
+ _accentColorValue = computed(() => {
649
+ const c = this.accentColor();
650
+ if (c && !isThemeColor(c))
651
+ return c;
652
+ const key = c && isThemeColor(c) ? c : 'primary';
653
+ 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)' };
654
+ return `var(--color-${key}, ${fallbacks[key]})`;
655
+ }, ...(ngDevMode ? [{ debugName: "_accentColorValue" }] : []));
646
656
  _width = computed(() => this.width() || null, ...(ngDevMode ? [{ debugName: "_width" }] : []));
647
657
  _normalizedOptions = computed(() => this.options().map(o => typeof o === 'string' ? { label: o, value: o } : o), ...(ngDevMode ? [{ debugName: "_normalizedOptions" }] : []));
648
658
  _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : []));
@@ -653,7 +663,7 @@ class MultiSelectComponent {
653
663
  _panelWidth = signal(0, ...(ngDevMode ? [{ debugName: "_panelWidth" }] : []));
654
664
  _panelEl = null;
655
665
  _searchQuery = signal('', ...(ngDevMode ? [{ debugName: "_searchQuery" }] : []));
656
- _appendToParent = computed(() => this.config().appendToParent ?? false, ...(ngDevMode ? [{ debugName: "_appendToParent" }] : []));
666
+ _appendToParent = computed(() => this.config().appendToBody ?? this.config().appendToParent ?? true, ...(ngDevMode ? [{ debugName: "_appendToParent" }] : []));
657
667
  _panelFixed = computed(() => this._isOpen() && this._appendToParent() ? 'fixed' : null, ...(ngDevMode ? [{ debugName: "_panelFixed" }] : []));
658
668
  _maxHeight = computed(() => this.config().maxHeight ?? '256px', ...(ngDevMode ? [{ debugName: "_maxHeight" }] : []));
659
669
  _selectedLabels = computed(() => {
@@ -750,6 +760,7 @@ class MultiSelectComponent {
750
760
  const panel = this._elementRef.nativeElement.querySelector('[data-ms-panel]');
751
761
  if (panel) {
752
762
  document.body.appendChild(panel);
763
+ panel.style.setProperty('--rz-accent', this._accentColorValue());
753
764
  this._panelEl = panel;
754
765
  }
755
766
  }
@@ -816,7 +827,7 @@ class MultiSelectComponent {
816
827
  }
817
828
  }
818
829
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
819
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: MultiSelectComponent, isStandalone: true, selector: "app-multi-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "window:scroll": "_onWindowScroll()" }, properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--rz-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<div class=\"rz-ms-wrapper\">\n <label class=\"rz-ms-trigger\" (click)=\"_onTriggerClick($event)\">\n @let chips = _selectedLabels();\n\n <div class=\"rz-ms-field\">\n @for (label of chips; track label) {\n <span class=\"rz-ms-chip\">\n {{ label }}\n <button type=\"button\" class=\"rz-ms-chip-remove\"\n (click)=\"_removeChip(value()[$index], $event)\"\n tabindex=\"-1\"\n aria-label=\"Remove {{ label }}\"\n >&times;</button>\n </span>\n }\n\n <input\n type=\"text\"\n class=\"rz-ms-search-input\"\n [attr.placeholder]=\"chips.length ? '' : placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n (input)=\"_onInput($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n\n <i class=\"rz-ms-icon pi pi-chevron-down\" [class.is-open]=\"_isOpen()\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-ms-panel\n class=\"rz-ms-panel\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.rz-ms-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.rz-ms-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n\n @if (searchable()) {\n <div class=\"rz-ms-search-wrap\">\n <input\n data-ms-search\n type=\"text\"\n class=\"rz-ms-search-field-input\"\n placeholder=\"Search...\"\n [value]=\"_searchQuery()\"\n (input)=\"_searchQuery.set($any($event.target).value)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n }\n\n <div\n class=\"rz-ms-options\"\n [style.max-height]=\"_maxHeight()\"\n (scroll)=\"$event.stopPropagation()\">\n\n @if (selectAll() && _filteredOptions().length > 0) {\n <button\n type=\"button\"\n class=\"rz-ms-option\"\n (click)=\"_toggleSelectAll()\"\n >\n <span class=\"rz-ms-checkbox\" [class.checked]=\"_allFilteredSelected()\">\n @if (_allFilteredSelected()) { &#10003; }\n </span>\n <span class=\"rz-ms-option-label\">{{ selectAllLabel() }}</span>\n </button>\n <div class=\"rz-ms-divider\"></div>\n }\n\n @for (option of _filteredOptions(); track option.value) {\n <button\n type=\"button\"\n class=\"rz-ms-option\"\n [class.selected]=\"_isSelected(_optVal(option))\"\n (click)=\"_toggleOption(option)\"\n >\n <span class=\"rz-ms-checkbox\" [class.checked]=\"_isSelected(_optVal(option))\">\n @if (_isSelected(_optVal(option))) { &#10003; }\n </span>\n <span>{{ option.label }}</span>\n </button>\n }\n\n @if (_filteredOptions().length === 0) {\n <div class=\"rz-ms-empty\">No results found</div>\n }\n </div>\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"rz-ms-msg rz-ms-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-ms-msg rz-ms-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-accent, oklch(.64 .2 50));--rz-bg: var(--color-surface, oklch(.99 0 0));--rz-border: var(--color-border, oklch(.83 .015 260));--rz-text: var(--color-text, oklch(.14 .01 260));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));--rz-surface: var(--color-surface-alt, oklch(.975 .005 260));--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--rz-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--rz-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error .rz-ms-field{border-color:var(--color-danger, oklch(.55 .25 25))!important}:host.has-error .rz-ms-field:focus-within{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger, oklch(.55 .25 25)) 20%,transparent)!important}.rz-ms-wrapper{position:relative}.rz-ms-trigger{display:flex;align-items:center;width:100%;cursor:text}.rz-ms-field{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;min-height:0;height:auto;cursor:pointer;width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);transition:border-color .2s ease,box-shadow .2s ease;padding:.375rem 2.5rem .375rem .75rem;font-size:.875rem}.rz-ms-field:disabled{opacity:.5;cursor:not-allowed}:host([data-size=\"sm\"]) .rz-ms-field{padding:.25rem 2rem .25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-ms-field{padding:.75rem 2.75rem .75rem 1rem;font-size:1rem}.rz-ms-chip{display:inline-flex;align-items:center;gap:2px;padding:1px 6px 1px 8px;font-size:.75rem;border-radius:9999px;white-space:nowrap;background:color-mix(in srgb,var(--rz-accent) 15%,transparent);color:var(--rz-accent);line-height:1.5}.rz-ms-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:inherit;font-size:10px;transition:background .15s}.rz-ms-chip-remove:hover{background:color-mix(in srgb,var(--rz-accent) 20%,transparent)}.rz-ms-search-input{flex:1;min-width:50px;outline:none;border:none;background:transparent;color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:0;margin:0}.rz-ms-search-input::placeholder{color:var(--rz-muted)}:host([data-size=\"sm\"]) .rz-ms-search-input{font-size:.75rem;height:1.25rem}:host([data-size=\"md\"]) .rz-ms-search-input{font-size:.875rem;height:1.5rem}:host([data-size=\"lg\"]) .rz-ms-search-input{font-size:1rem;height:1.5rem}.rz-ms-icon{position:absolute;top:50%;translate:0 -50%;right:.625rem;pointer-events:none;color:var(--rz-muted);font-size:.875rem;transition:transform .2s}.rz-ms-icon.is-open{transform:rotate(180deg)}:host([data-size=\"sm\"]) .rz-ms-icon{right:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-ms-icon{right:.75rem;font-size:1.125rem}.rz-ms-panel{left:0;z-index:50;width:100%;min-width:15rem;background:var(--color-surface, oklch(.99 0 0));border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:var(--radius-md, .5rem);box-shadow:0 10px 15px -3px color-mix(in srgb,var(--color-text) 10%,transparent),0 4px 6px -4px color-mix(in srgb,var(--color-text) 10%,transparent);overflow:hidden;color:var(--color-text, oklch(.14 .01 260))}.rz-ms-panel.absolute{position:absolute}.rz-ms-search-wrap{padding:.5rem .5rem 0}.rz-ms-search-field-input{width:100%;padding:.375rem .5rem;font-size:.875rem;border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:.25rem;outline:none;background:var(--color-surface, oklch(.99 0 0));color:var(--color-text, oklch(.14 .01 260));font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif)}.rz-ms-search-field-input::placeholder{color:var(--color-text-muted)}.rz-ms-search-field-input:focus{border-color:var(--color-accent)}.rz-ms-options{overflow-y:auto}.rz-ms-option{width:100%;display:flex;align-items:center;gap:.5rem;text-align:left;border:none;cursor:pointer;transition:background .1s,color .1s;background:transparent;color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem .75rem;font-size:.875rem}.rz-ms-option:hover{background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface))}.rz-ms-option.selected{background:var(--rz-accent)!important;color:var(--color-primary-inverse, oklch(.99 0 0))!important}:host([data-size=\"sm\"]) .rz-ms-option{padding:.375rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-ms-option{padding:.75rem 1rem;font-size:1rem}.rz-ms-checkbox{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;border-radius:.25rem;border:1px solid var(--rz-border);font-size:.625rem;flex-shrink:0;transition:all .15s;color:transparent}.rz-ms-checkbox.checked{background:var(--rz-accent);border-color:var(--rz-accent);color:#fff}.rz-ms-option-label{font-weight:500}.rz-ms-divider{height:1px;margin:0 .5rem;background:var(--rz-border)}.rz-ms-empty{padding:1rem .75rem;text-align:center;font-size:.875rem;color:var(--rz-muted)}.rz-ms-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-ms-hint{color:var(--color-text-muted)}.rz-ms-error{color:var(--color-danger)}.rz-ms-fade-in{animation:rz-ms-in .2s ease}.rz-ms-fade-out{animation:rz-ms-out .15s ease forwards}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-ms-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes rz-ms-out{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
830
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: MultiSelectComponent, isStandalone: true, selector: "app-multi-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "window:scroll": "_onWindowScroll()" }, properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--rz-accent": "_accentColorValue", "style.width": "_width" } }, ngImport: i0, template: "<div class=\"rz-ms-wrapper\">\n <label class=\"rz-ms-trigger\" (click)=\"_onTriggerClick($event)\">\n @let chips = _selectedLabels();\n\n <div class=\"rz-ms-field\">\n @for (label of chips; track label) {\n <span class=\"rz-ms-chip\">\n {{ label }}\n <button type=\"button\" class=\"rz-ms-chip-remove\"\n (click)=\"_removeChip(value()[$index], $event)\"\n tabindex=\"-1\"\n aria-label=\"Remove {{ label }}\"\n >&times;</button>\n </span>\n }\n\n <input\n type=\"text\"\n class=\"rz-ms-search-input\"\n [attr.placeholder]=\"chips.length ? '' : placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n (input)=\"_onInput($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n\n <i class=\"rz-ms-icon pi pi-chevron-down\" [class.is-open]=\"_isOpen()\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-ms-panel\n class=\"rz-ms-panel\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.rz-ms-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.rz-ms-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n\n @if (searchable()) {\n <div class=\"rz-ms-search-wrap\">\n <input\n data-ms-search\n type=\"text\"\n class=\"rz-ms-search-field-input\"\n placeholder=\"Search...\"\n [value]=\"_searchQuery()\"\n (input)=\"_searchQuery.set($any($event.target).value)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n }\n\n <div\n class=\"rz-ms-options\"\n [style.max-height]=\"_maxHeight()\"\n (scroll)=\"$event.stopPropagation()\">\n\n @if (selectAll() && _filteredOptions().length > 0) {\n <button\n type=\"button\"\n class=\"rz-ms-option\"\n (click)=\"_toggleSelectAll()\"\n >\n <span class=\"rz-ms-checkbox\" [class.checked]=\"_allFilteredSelected()\">\n @if (_allFilteredSelected()) { &#10003; }\n </span>\n <span class=\"rz-ms-option-label\">{{ selectAllLabel() }}</span>\n </button>\n <div class=\"rz-ms-divider\"></div>\n }\n\n @for (option of _filteredOptions(); track option.value) {\n <button\n type=\"button\"\n class=\"rz-ms-option\"\n [class.selected]=\"_isSelected(_optVal(option))\"\n (click)=\"_toggleOption(option)\"\n >\n <span class=\"rz-ms-checkbox\" [class.checked]=\"_isSelected(_optVal(option))\">\n @if (_isSelected(_optVal(option))) { &#10003; }\n </span>\n <span>{{ option.label }}</span>\n </button>\n }\n\n @if (_filteredOptions().length === 0) {\n <div class=\"rz-ms-empty\">No results found</div>\n }\n </div>\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"rz-ms-msg rz-ms-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-ms-msg rz-ms-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-accent, oklch(.64 .2 50));--rz-bg: var(--color-surface, oklch(.99 0 0));--rz-border: var(--color-border, oklch(.83 .015 260));--rz-text: var(--color-text, oklch(.14 .01 260));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));--rz-surface: var(--color-surface-alt, oklch(.975 .005 260));--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--rz-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--rz-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error .rz-ms-field{border-color:var(--color-danger, oklch(.55 .25 25))!important}:host.has-error .rz-ms-field:focus-within{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger, oklch(.55 .25 25)) 20%,transparent)!important}.rz-ms-wrapper{position:relative}.rz-ms-trigger{display:flex;align-items:center;width:100%;cursor:text}.rz-ms-field{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;min-height:0;height:auto;cursor:pointer;width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);transition:border-color .2s ease,box-shadow .2s ease;padding:.375rem 2.5rem .375rem .75rem;font-size:.875rem}.rz-ms-field:disabled{opacity:.5;cursor:not-allowed}:host([data-size=\"sm\"]) .rz-ms-field{padding:.25rem 2rem .25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-ms-field{padding:.75rem 2.75rem .75rem 1rem;font-size:1rem}.rz-ms-chip{display:inline-flex;align-items:center;gap:2px;padding:1px 6px 1px 8px;font-size:.75rem;border-radius:9999px;white-space:nowrap;background:color-mix(in srgb,var(--rz-accent) 15%,transparent);color:var(--rz-accent);line-height:1.5}.rz-ms-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:inherit;font-size:10px;transition:background .15s}.rz-ms-chip-remove:hover{background:color-mix(in srgb,var(--rz-accent) 20%,transparent)}.rz-ms-search-input{flex:1;min-width:50px;outline:none;border:none;background:transparent;color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:0;margin:0}.rz-ms-search-input::placeholder{color:var(--rz-muted)}:host([data-size=\"sm\"]) .rz-ms-search-input{font-size:.75rem;height:1.25rem}:host([data-size=\"md\"]) .rz-ms-search-input{font-size:.875rem;height:1.5rem}:host([data-size=\"lg\"]) .rz-ms-search-input{font-size:1rem;height:1.5rem}.rz-ms-icon{position:absolute;top:50%;translate:0 -50%;right:.625rem;pointer-events:none;color:var(--rz-muted);font-size:.875rem;transition:transform .2s}.rz-ms-icon.is-open{transform:rotate(180deg)}:host([data-size=\"sm\"]) .rz-ms-icon{right:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-ms-icon{right:.75rem;font-size:1.125rem}.rz-ms-panel{left:0;z-index:50;width:100%;min-width:15rem;background:var(--color-surface, oklch(.99 0 0));border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:var(--radius-md, .5rem);box-shadow:0 10px 15px -3px color-mix(in srgb,var(--color-text) 10%,transparent),0 4px 6px -4px color-mix(in srgb,var(--color-text) 10%,transparent);overflow:hidden;color:var(--color-text, oklch(.14 .01 260))}.rz-ms-panel.absolute{position:absolute}.rz-ms-search-wrap{padding:.5rem .5rem 0}.rz-ms-search-field-input{width:100%;padding:.375rem .5rem;font-size:.875rem;border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:.25rem;outline:none;background:var(--color-surface, oklch(.99 0 0));color:var(--color-text, oklch(.14 .01 260));font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif)}.rz-ms-search-field-input::placeholder{color:var(--color-text-muted)}.rz-ms-search-field-input:focus{border-color:var(--color-accent)}.rz-ms-options{overflow-y:auto}.rz-ms-option{width:100%;display:flex;align-items:center;gap:.5rem;text-align:left;border:none;cursor:pointer;transition:background .1s,color .1s;background:transparent;color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem .75rem;font-size:.875rem}.rz-ms-option:hover{background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface))}.rz-ms-option.selected{background:var(--rz-accent)!important;color:var(--color-primary-inverse, oklch(.99 0 0))!important}:host([data-size=\"sm\"]) .rz-ms-option{padding:.375rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-ms-option{padding:.75rem 1rem;font-size:1rem}.rz-ms-checkbox{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;border-radius:.25rem;border:1px solid var(--rz-border);font-size:.625rem;flex-shrink:0;transition:all .15s;color:transparent}.rz-ms-checkbox.checked{background:var(--rz-accent);border-color:var(--rz-accent);color:#fff}.rz-ms-option-label{font-weight:500}.rz-ms-divider{height:1px;margin:0 .5rem;background:var(--rz-border)}.rz-ms-empty{padding:1rem .75rem;text-align:center;font-size:.875rem;color:var(--rz-muted)}.rz-ms-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-ms-hint{color:var(--color-text-muted)}.rz-ms-error{color:var(--color-danger)}.rz-ms-fade-in{animation:rz-ms-in .2s ease}.rz-ms-fade-out{animation:rz-ms-out .15s ease forwards}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-ms-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes rz-ms-out{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
820
831
  }
821
832
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: MultiSelectComponent, decorators: [{
822
833
  type: Component,
@@ -824,7 +835,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
824
835
  '[attr.data-size]': '_size',
825
836
  '[attr.data-accent]': '_accentKey',
826
837
  '[class.has-error]': 'error()',
827
- '[style.--rz-accent]': '_rawAccent',
838
+ '[style.--rz-accent]': '_accentColorValue',
828
839
  '[style.width]': '_width',
829
840
  '(window:scroll)': '_onWindowScroll()',
830
841
  }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rz-ms-wrapper\">\n <label class=\"rz-ms-trigger\" (click)=\"_onTriggerClick($event)\">\n @let chips = _selectedLabels();\n\n <div class=\"rz-ms-field\">\n @for (label of chips; track label) {\n <span class=\"rz-ms-chip\">\n {{ label }}\n <button type=\"button\" class=\"rz-ms-chip-remove\"\n (click)=\"_removeChip(value()[$index], $event)\"\n tabindex=\"-1\"\n aria-label=\"Remove {{ label }}\"\n >&times;</button>\n </span>\n }\n\n <input\n type=\"text\"\n class=\"rz-ms-search-input\"\n [attr.placeholder]=\"chips.length ? '' : placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n (input)=\"_onInput($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n\n <i class=\"rz-ms-icon pi pi-chevron-down\" [class.is-open]=\"_isOpen()\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-ms-panel\n class=\"rz-ms-panel\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.rz-ms-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.rz-ms-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n\n @if (searchable()) {\n <div class=\"rz-ms-search-wrap\">\n <input\n data-ms-search\n type=\"text\"\n class=\"rz-ms-search-field-input\"\n placeholder=\"Search...\"\n [value]=\"_searchQuery()\"\n (input)=\"_searchQuery.set($any($event.target).value)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n }\n\n <div\n class=\"rz-ms-options\"\n [style.max-height]=\"_maxHeight()\"\n (scroll)=\"$event.stopPropagation()\">\n\n @if (selectAll() && _filteredOptions().length > 0) {\n <button\n type=\"button\"\n class=\"rz-ms-option\"\n (click)=\"_toggleSelectAll()\"\n >\n <span class=\"rz-ms-checkbox\" [class.checked]=\"_allFilteredSelected()\">\n @if (_allFilteredSelected()) { &#10003; }\n </span>\n <span class=\"rz-ms-option-label\">{{ selectAllLabel() }}</span>\n </button>\n <div class=\"rz-ms-divider\"></div>\n }\n\n @for (option of _filteredOptions(); track option.value) {\n <button\n type=\"button\"\n class=\"rz-ms-option\"\n [class.selected]=\"_isSelected(_optVal(option))\"\n (click)=\"_toggleOption(option)\"\n >\n <span class=\"rz-ms-checkbox\" [class.checked]=\"_isSelected(_optVal(option))\">\n @if (_isSelected(_optVal(option))) { &#10003; }\n </span>\n <span>{{ option.label }}</span>\n </button>\n }\n\n @if (_filteredOptions().length === 0) {\n <div class=\"rz-ms-empty\">No results found</div>\n }\n </div>\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"rz-ms-msg rz-ms-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-ms-msg rz-ms-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-accent, oklch(.64 .2 50));--rz-bg: var(--color-surface, oklch(.99 0 0));--rz-border: var(--color-border, oklch(.83 .015 260));--rz-text: var(--color-text, oklch(.14 .01 260));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));--rz-surface: var(--color-surface-alt, oklch(.975 .005 260));--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--rz-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--rz-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error .rz-ms-field{border-color:var(--color-danger, oklch(.55 .25 25))!important}:host.has-error .rz-ms-field:focus-within{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger, oklch(.55 .25 25)) 20%,transparent)!important}.rz-ms-wrapper{position:relative}.rz-ms-trigger{display:flex;align-items:center;width:100%;cursor:text}.rz-ms-field{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;min-height:0;height:auto;cursor:pointer;width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);transition:border-color .2s ease,box-shadow .2s ease;padding:.375rem 2.5rem .375rem .75rem;font-size:.875rem}.rz-ms-field:disabled{opacity:.5;cursor:not-allowed}:host([data-size=\"sm\"]) .rz-ms-field{padding:.25rem 2rem .25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-ms-field{padding:.75rem 2.75rem .75rem 1rem;font-size:1rem}.rz-ms-chip{display:inline-flex;align-items:center;gap:2px;padding:1px 6px 1px 8px;font-size:.75rem;border-radius:9999px;white-space:nowrap;background:color-mix(in srgb,var(--rz-accent) 15%,transparent);color:var(--rz-accent);line-height:1.5}.rz-ms-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:inherit;font-size:10px;transition:background .15s}.rz-ms-chip-remove:hover{background:color-mix(in srgb,var(--rz-accent) 20%,transparent)}.rz-ms-search-input{flex:1;min-width:50px;outline:none;border:none;background:transparent;color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:0;margin:0}.rz-ms-search-input::placeholder{color:var(--rz-muted)}:host([data-size=\"sm\"]) .rz-ms-search-input{font-size:.75rem;height:1.25rem}:host([data-size=\"md\"]) .rz-ms-search-input{font-size:.875rem;height:1.5rem}:host([data-size=\"lg\"]) .rz-ms-search-input{font-size:1rem;height:1.5rem}.rz-ms-icon{position:absolute;top:50%;translate:0 -50%;right:.625rem;pointer-events:none;color:var(--rz-muted);font-size:.875rem;transition:transform .2s}.rz-ms-icon.is-open{transform:rotate(180deg)}:host([data-size=\"sm\"]) .rz-ms-icon{right:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-ms-icon{right:.75rem;font-size:1.125rem}.rz-ms-panel{left:0;z-index:50;width:100%;min-width:15rem;background:var(--color-surface, oklch(.99 0 0));border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:var(--radius-md, .5rem);box-shadow:0 10px 15px -3px color-mix(in srgb,var(--color-text) 10%,transparent),0 4px 6px -4px color-mix(in srgb,var(--color-text) 10%,transparent);overflow:hidden;color:var(--color-text, oklch(.14 .01 260))}.rz-ms-panel.absolute{position:absolute}.rz-ms-search-wrap{padding:.5rem .5rem 0}.rz-ms-search-field-input{width:100%;padding:.375rem .5rem;font-size:.875rem;border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:.25rem;outline:none;background:var(--color-surface, oklch(.99 0 0));color:var(--color-text, oklch(.14 .01 260));font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif)}.rz-ms-search-field-input::placeholder{color:var(--color-text-muted)}.rz-ms-search-field-input:focus{border-color:var(--color-accent)}.rz-ms-options{overflow-y:auto}.rz-ms-option{width:100%;display:flex;align-items:center;gap:.5rem;text-align:left;border:none;cursor:pointer;transition:background .1s,color .1s;background:transparent;color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem .75rem;font-size:.875rem}.rz-ms-option:hover{background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface))}.rz-ms-option.selected{background:var(--rz-accent)!important;color:var(--color-primary-inverse, oklch(.99 0 0))!important}:host([data-size=\"sm\"]) .rz-ms-option{padding:.375rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-ms-option{padding:.75rem 1rem;font-size:1rem}.rz-ms-checkbox{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;border-radius:.25rem;border:1px solid var(--rz-border);font-size:.625rem;flex-shrink:0;transition:all .15s;color:transparent}.rz-ms-checkbox.checked{background:var(--rz-accent);border-color:var(--rz-accent);color:#fff}.rz-ms-option-label{font-weight:500}.rz-ms-divider{height:1px;margin:0 .5rem;background:var(--rz-border)}.rz-ms-empty{padding:1rem .75rem;text-align:center;font-size:.875rem;color:var(--rz-muted)}.rz-ms-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-ms-hint{color:var(--color-text-muted)}.rz-ms-error{color:var(--color-danger)}.rz-ms-fade-in{animation:rz-ms-in .2s ease}.rz-ms-fade-out{animation:rz-ms-out .15s ease forwards}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-ms-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes rz-ms-out{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
@@ -864,7 +875,7 @@ class PasswordInputComponent {
864
875
  this._touched.set(true);
865
876
  }
866
877
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
867
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PasswordInputComponent, isStandalone: true, selector: "app-password-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hideToggle: { classPropertyName: "hideToggle", publicName: "hideToggle", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--rz-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<label class=\"rz-pw-field\">\n <input\n class=\"rz-pw-input\"\n [attr.type]=\"_type()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n\n @if (!hideToggle()) {\n <button\n class=\"rz-pw-toggle\"\n type=\"button\"\n (click)=\"toggleVisibility()\"\n [attr.aria-label]=\"visible() ? 'Hide password' : 'Show password'\"\n >\n <i [class]=\"visible() ? 'pi pi-eye-slash' : 'pi pi-eye'\"></i>\n </button>\n }\n</label>\n\n@if (hint() && !error()) {\n <span class=\"rz-pw-msg rz-pw-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-pw-msg rz-pw-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary);--rz-bg: var(--color-surface);--rz-border: var(--color-border);--rz-text: var(--color-text);--rz-muted: var(--color-text-muted);--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent)}:host([data-accent=\"success\"]){--rz-accent: var(--color-success)}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger)}:host([data-accent=\"info\"]){--rz-accent: var(--color-info)}:host.has-error .rz-pw-input{border-color:var(--color-danger)!important}:host.has-error .rz-pw-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.rz-pw-field{position:relative;display:flex;align-items:center;width:100%}.rz-pw-input{width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem 2.5rem .5rem .75rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease}.rz-pw-input::placeholder{color:var(--rz-muted)}.rz-pw-input:disabled{opacity:.5;cursor:not-allowed}.rz-pw-input:focus{border-color:var(--rz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--rz-accent) 20%,transparent)}:host([data-size=\"sm\"]) .rz-pw-input{padding:.25rem 2rem .25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-pw-input{padding:.75rem 2.75rem .75rem 1rem;font-size:1rem}.rz-pw-toggle{position:absolute;display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:var(--rz-muted);transition:color .15s,background .15s;inset-inline-end:.375rem;width:1.5rem;height:1.5rem;font-size:.875rem;top:50%;translate:0 -50%}.rz-pw-toggle:hover{color:var(--rz-text);background:var(--color-surface-alt)}:host([data-size=\"sm\"]) .rz-pw-toggle{inset-inline-end:.25rem;width:1.25rem;height:1.25rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-pw-toggle{inset-inline-end:.5rem;width:1.5rem;height:1.5rem;font-size:1.125rem}.rz-pw-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-pw-hint{color:var(--color-text-muted)}.rz-pw-error{color:var(--color-danger)}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
878
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PasswordInputComponent, isStandalone: true, selector: "app-password-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hideToggle: { classPropertyName: "hideToggle", publicName: "hideToggle", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--rz-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<label class=\"rz-pw-field\">\n <input\n class=\"rz-pw-input\"\n [attr.type]=\"_type()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n\n @if (!hideToggle()) {\n <button\n class=\"rz-pw-toggle\"\n type=\"button\"\n (click)=\"toggleVisibility()\"\n [attr.aria-label]=\"visible() ? 'Hide password' : 'Show password'\"\n >\n <i [class]=\"visible() ? 'pi pi-eye-slash' : 'pi pi-eye'\"></i>\n </button>\n }\n</label>\n\n@if (hint() && !error()) {\n <span class=\"rz-pw-msg rz-pw-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-pw-msg rz-pw-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary);--rz-bg: var(--color-surface);--rz-border: var(--color-border);--rz-text: var(--color-text);--rz-muted: var(--color-text-muted);--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1rem}:host([data-size=\"lg\"]){padding-bottom:1.75rem}:host([data-size=\"lg\"]) .rz-pw-input{padding:.85rem 2.75rem .85rem 1.15rem;font-size:1.05rem}:host([data-size=\"sm\"]) .rz-pw-input{padding:.25rem 2rem .25rem .5rem;font-size:.75rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent)}:host([data-accent=\"success\"]){--rz-accent: var(--color-success)}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger)}:host([data-accent=\"info\"]){--rz-accent: var(--color-info)}:host.has-error .rz-pw-input{border-color:var(--color-danger)!important}:host.has-error .rz-pw-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.rz-pw-field{position:relative;display:flex;align-items:center;width:100%}.rz-pw-input{width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem 2.5rem .5rem .75rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease}.rz-pw-input::placeholder{color:var(--rz-muted)}.rz-pw-input:disabled{opacity:.5;cursor:not-allowed}:host([data-accent]) .rz-pw-input{border-color:color-mix(in srgb,var(--rz-accent) 40%,var(--rz-border))}.rz-pw-input:focus{border-color:var(--rz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--rz-accent) 20%,transparent)}.rz-pw-toggle{position:absolute;display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:var(--rz-muted);transition:color .15s,background .15s;inset-inline-end:.375rem;width:1.5rem;height:1.5rem;font-size:.875rem;top:50%;translate:0 -50%}.rz-pw-toggle:hover{color:var(--rz-text);background:var(--color-surface-alt)}:host([data-size=\"sm\"]) .rz-pw-toggle{inset-inline-end:.25rem;width:1.25rem;height:1.25rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-pw-toggle{inset-inline-end:.5rem;width:1.5rem;height:1.5rem;font-size:1.125rem}.rz-pw-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-pw-hint{color:var(--color-text-muted)}.rz-pw-error{color:var(--color-danger)}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
868
879
  }
869
880
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PasswordInputComponent, decorators: [{
870
881
  type: Component,
@@ -874,7 +885,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
874
885
  '[class.has-error]': 'error()',
875
886
  '[style.--rz-accent]': '_rawAccent',
876
887
  '[style.width]': '_width',
877
- }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"rz-pw-field\">\n <input\n class=\"rz-pw-input\"\n [attr.type]=\"_type()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n\n @if (!hideToggle()) {\n <button\n class=\"rz-pw-toggle\"\n type=\"button\"\n (click)=\"toggleVisibility()\"\n [attr.aria-label]=\"visible() ? 'Hide password' : 'Show password'\"\n >\n <i [class]=\"visible() ? 'pi pi-eye-slash' : 'pi pi-eye'\"></i>\n </button>\n }\n</label>\n\n@if (hint() && !error()) {\n <span class=\"rz-pw-msg rz-pw-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-pw-msg rz-pw-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary);--rz-bg: var(--color-surface);--rz-border: var(--color-border);--rz-text: var(--color-text);--rz-muted: var(--color-text-muted);--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent)}:host([data-accent=\"success\"]){--rz-accent: var(--color-success)}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger)}:host([data-accent=\"info\"]){--rz-accent: var(--color-info)}:host.has-error .rz-pw-input{border-color:var(--color-danger)!important}:host.has-error .rz-pw-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.rz-pw-field{position:relative;display:flex;align-items:center;width:100%}.rz-pw-input{width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem 2.5rem .5rem .75rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease}.rz-pw-input::placeholder{color:var(--rz-muted)}.rz-pw-input:disabled{opacity:.5;cursor:not-allowed}.rz-pw-input:focus{border-color:var(--rz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--rz-accent) 20%,transparent)}:host([data-size=\"sm\"]) .rz-pw-input{padding:.25rem 2rem .25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-pw-input{padding:.75rem 2.75rem .75rem 1rem;font-size:1rem}.rz-pw-toggle{position:absolute;display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:var(--rz-muted);transition:color .15s,background .15s;inset-inline-end:.375rem;width:1.5rem;height:1.5rem;font-size:.875rem;top:50%;translate:0 -50%}.rz-pw-toggle:hover{color:var(--rz-text);background:var(--color-surface-alt)}:host([data-size=\"sm\"]) .rz-pw-toggle{inset-inline-end:.25rem;width:1.25rem;height:1.25rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-pw-toggle{inset-inline-end:.5rem;width:1.5rem;height:1.5rem;font-size:1.125rem}.rz-pw-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-pw-hint{color:var(--color-text-muted)}.rz-pw-error{color:var(--color-danger)}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
888
+ }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"rz-pw-field\">\n <input\n class=\"rz-pw-input\"\n [attr.type]=\"_type()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n\n @if (!hideToggle()) {\n <button\n class=\"rz-pw-toggle\"\n type=\"button\"\n (click)=\"toggleVisibility()\"\n [attr.aria-label]=\"visible() ? 'Hide password' : 'Show password'\"\n >\n <i [class]=\"visible() ? 'pi pi-eye-slash' : 'pi pi-eye'\"></i>\n </button>\n }\n</label>\n\n@if (hint() && !error()) {\n <span class=\"rz-pw-msg rz-pw-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-pw-msg rz-pw-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary);--rz-bg: var(--color-surface);--rz-border: var(--color-border);--rz-text: var(--color-text);--rz-muted: var(--color-text-muted);--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1rem}:host([data-size=\"lg\"]){padding-bottom:1.75rem}:host([data-size=\"lg\"]) .rz-pw-input{padding:.85rem 2.75rem .85rem 1.15rem;font-size:1.05rem}:host([data-size=\"sm\"]) .rz-pw-input{padding:.25rem 2rem .25rem .5rem;font-size:.75rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent)}:host([data-accent=\"success\"]){--rz-accent: var(--color-success)}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger)}:host([data-accent=\"info\"]){--rz-accent: var(--color-info)}:host.has-error .rz-pw-input{border-color:var(--color-danger)!important}:host.has-error .rz-pw-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.rz-pw-field{position:relative;display:flex;align-items:center;width:100%}.rz-pw-input{width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem 2.5rem .5rem .75rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease}.rz-pw-input::placeholder{color:var(--rz-muted)}.rz-pw-input:disabled{opacity:.5;cursor:not-allowed}:host([data-accent]) .rz-pw-input{border-color:color-mix(in srgb,var(--rz-accent) 40%,var(--rz-border))}.rz-pw-input:focus{border-color:var(--rz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--rz-accent) 20%,transparent)}.rz-pw-toggle{position:absolute;display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:var(--rz-muted);transition:color .15s,background .15s;inset-inline-end:.375rem;width:1.5rem;height:1.5rem;font-size:.875rem;top:50%;translate:0 -50%}.rz-pw-toggle:hover{color:var(--rz-text);background:var(--color-surface-alt)}:host([data-size=\"sm\"]) .rz-pw-toggle{inset-inline-end:.25rem;width:1.25rem;height:1.25rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-pw-toggle{inset-inline-end:.5rem;width:1.5rem;height:1.5rem;font-size:1.125rem}.rz-pw-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-pw-hint{color:var(--color-text-muted)}.rz-pw-error{color:var(--color-danger)}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
878
889
  }], 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 }] }] } });
879
890
 
880
891
  class SearchInputComponent {
@@ -905,7 +916,7 @@ class SearchInputComponent {
905
916
  this._touched.set(true);
906
917
  }
907
918
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
908
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SearchInputComponent, isStandalone: true, selector: "app-search-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--rz-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<div class=\"rz-search-field\">\n <span class=\"rz-search-icon\" aria-hidden=\"true\">\n <i class=\"pi pi-search\"></i>\n </span>\n\n <input\n class=\"rz-search-input\"\n type=\"search\"\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n\n @if (value() && !disabled()) {\n <button class=\"rz-search-clear\" type=\"button\" (click)=\"value.set('')\" aria-label=\"Clear search\">\n <i class=\"pi pi-times\"></i>\n </button>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"rz-search-msg rz-search-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-search-msg rz-search-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary);--rz-bg: var(--color-surface);--rz-border: var(--color-border);--rz-text: var(--color-text);--rz-muted: var(--color-text-muted);--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent)}:host([data-accent=\"success\"]){--rz-accent: var(--color-success)}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger)}:host([data-accent=\"info\"]){--rz-accent: var(--color-info)}.rz-search-field{position:relative;display:flex;align-items:center;width:100%}.rz-search-icon{position:absolute;left:.75rem;display:flex;align-items:center;pointer-events:none;z-index:1;color:var(--rz-muted);font-size:.875rem;transition:color .2s}:host([data-size=\"sm\"]) .rz-search-icon{left:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-search-icon{left:.875rem;font-size:1.125rem}.rz-search-input{width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem 2.5rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease}.rz-search-input::placeholder{color:var(--rz-muted)}.rz-search-input:disabled{opacity:.5;cursor:not-allowed}.rz-search-input:focus{border-color:var(--rz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--rz-accent) 20%,transparent)}:host([data-size=\"sm\"]) .rz-search-input{padding:.25rem 2rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-search-input{padding:.75rem 2.75rem;font-size:1rem}.rz-search-input::-webkit-search-decoration,.rz-search-input::-webkit-search-cancel-button,.rz-search-input::-webkit-search-results-button,.rz-search-input::-webkit-search-results-decoration{display:none}.rz-search-clear{position:absolute;right:.5rem;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:var(--rz-muted);font-size:.75rem;transition:color .15s,background .15s}.rz-search-clear:hover{color:var(--rz-text);background:var(--color-surface-alt)}.rz-search-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-search-hint{color:var(--color-text-muted)}.rz-search-error{color:var(--color-danger)}:host.has-error .rz-search-input{border-color:var(--color-danger)!important}:host.has-error .rz-search-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
919
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SearchInputComponent, isStandalone: true, selector: "app-search-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--rz-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<div class=\"rz-search-field\">\n <span class=\"rz-search-icon\" aria-hidden=\"true\">\n <i class=\"pi pi-search\"></i>\n </span>\n\n <input\n class=\"rz-search-input\"\n type=\"search\"\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n\n @if (value() && !disabled()) {\n <button class=\"rz-search-clear\" type=\"button\" (click)=\"value.set('')\" aria-label=\"Clear search\">\n <i class=\"pi pi-times\"></i>\n </button>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"rz-search-msg rz-search-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-search-msg rz-search-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary);--rz-bg: var(--color-surface);--rz-border: var(--color-border);--rz-text: var(--color-text);--rz-muted: var(--color-text-muted);--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1rem}:host([data-size=\"lg\"]){padding-bottom:1.75rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent)}:host([data-accent=\"success\"]){--rz-accent: var(--color-success)}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger)}:host([data-accent=\"info\"]){--rz-accent: var(--color-info)}.rz-search-field{position:relative;display:flex;align-items:center;width:100%}.rz-search-icon{position:absolute;left:.75rem;display:flex;align-items:center;pointer-events:none;z-index:1;color:var(--rz-muted);font-size:.875rem;transition:color .2s}:host([data-size=\"sm\"]) .rz-search-icon{left:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-search-icon{left:.875rem;font-size:1.125rem}.rz-search-input{width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem 2.25rem .5rem 2.5rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease}.rz-search-input::placeholder{color:var(--rz-muted)}.rz-search-input:disabled{opacity:.5;cursor:not-allowed}:host([data-accent]) .rz-search-input{border-color:color-mix(in srgb,var(--rz-accent) 40%,var(--rz-border))}.rz-search-input:focus{border-color:var(--rz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--rz-accent) 20%,transparent)}:host([data-size=\"sm\"]) .rz-search-input{padding:.25rem 1.75rem .25rem 2rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-search-input{padding:.85rem 2.5rem .85rem 2.75rem;font-size:1.05rem}.rz-search-input::-webkit-search-decoration,.rz-search-input::-webkit-search-cancel-button,.rz-search-input::-webkit-search-results-button,.rz-search-input::-webkit-search-results-decoration{display:none}.rz-search-clear{position:absolute;right:.5rem;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:var(--rz-muted);font-size:.75rem;transition:color .15s,background .15s}.rz-search-clear:hover{color:var(--rz-text);background:var(--color-surface-alt)}.rz-search-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-search-hint{color:var(--color-text-muted)}.rz-search-error{color:var(--color-danger)}:host.has-error .rz-search-input{border-color:var(--color-danger)!important}:host.has-error .rz-search-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
909
920
  }
910
921
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchInputComponent, decorators: [{
911
922
  type: Component,
@@ -915,7 +926,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
915
926
  '[class.has-error]': 'error()',
916
927
  '[style.--rz-accent]': '_rawAccent',
917
928
  '[style.width]': '_width',
918
- }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rz-search-field\">\n <span class=\"rz-search-icon\" aria-hidden=\"true\">\n <i class=\"pi pi-search\"></i>\n </span>\n\n <input\n class=\"rz-search-input\"\n type=\"search\"\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n\n @if (value() && !disabled()) {\n <button class=\"rz-search-clear\" type=\"button\" (click)=\"value.set('')\" aria-label=\"Clear search\">\n <i class=\"pi pi-times\"></i>\n </button>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"rz-search-msg rz-search-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-search-msg rz-search-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary);--rz-bg: var(--color-surface);--rz-border: var(--color-border);--rz-text: var(--color-text);--rz-muted: var(--color-text-muted);--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent)}:host([data-accent=\"success\"]){--rz-accent: var(--color-success)}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger)}:host([data-accent=\"info\"]){--rz-accent: var(--color-info)}.rz-search-field{position:relative;display:flex;align-items:center;width:100%}.rz-search-icon{position:absolute;left:.75rem;display:flex;align-items:center;pointer-events:none;z-index:1;color:var(--rz-muted);font-size:.875rem;transition:color .2s}:host([data-size=\"sm\"]) .rz-search-icon{left:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-search-icon{left:.875rem;font-size:1.125rem}.rz-search-input{width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem 2.5rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease}.rz-search-input::placeholder{color:var(--rz-muted)}.rz-search-input:disabled{opacity:.5;cursor:not-allowed}.rz-search-input:focus{border-color:var(--rz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--rz-accent) 20%,transparent)}:host([data-size=\"sm\"]) .rz-search-input{padding:.25rem 2rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-search-input{padding:.75rem 2.75rem;font-size:1rem}.rz-search-input::-webkit-search-decoration,.rz-search-input::-webkit-search-cancel-button,.rz-search-input::-webkit-search-results-button,.rz-search-input::-webkit-search-results-decoration{display:none}.rz-search-clear{position:absolute;right:.5rem;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:var(--rz-muted);font-size:.75rem;transition:color .15s,background .15s}.rz-search-clear:hover{color:var(--rz-text);background:var(--color-surface-alt)}.rz-search-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-search-hint{color:var(--color-text-muted)}.rz-search-error{color:var(--color-danger)}:host.has-error .rz-search-input{border-color:var(--color-danger)!important}:host.has-error .rz-search-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
929
+ }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rz-search-field\">\n <span class=\"rz-search-icon\" aria-hidden=\"true\">\n <i class=\"pi pi-search\"></i>\n </span>\n\n <input\n class=\"rz-search-input\"\n type=\"search\"\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n\n @if (value() && !disabled()) {\n <button class=\"rz-search-clear\" type=\"button\" (click)=\"value.set('')\" aria-label=\"Clear search\">\n <i class=\"pi pi-times\"></i>\n </button>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"rz-search-msg rz-search-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-search-msg rz-search-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary);--rz-bg: var(--color-surface);--rz-border: var(--color-border);--rz-text: var(--color-text);--rz-muted: var(--color-text-muted);--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1rem}:host([data-size=\"lg\"]){padding-bottom:1.75rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent)}:host([data-accent=\"success\"]){--rz-accent: var(--color-success)}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger)}:host([data-accent=\"info\"]){--rz-accent: var(--color-info)}.rz-search-field{position:relative;display:flex;align-items:center;width:100%}.rz-search-icon{position:absolute;left:.75rem;display:flex;align-items:center;pointer-events:none;z-index:1;color:var(--rz-muted);font-size:.875rem;transition:color .2s}:host([data-size=\"sm\"]) .rz-search-icon{left:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-search-icon{left:.875rem;font-size:1.125rem}.rz-search-input{width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem 2.25rem .5rem 2.5rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease}.rz-search-input::placeholder{color:var(--rz-muted)}.rz-search-input:disabled{opacity:.5;cursor:not-allowed}:host([data-accent]) .rz-search-input{border-color:color-mix(in srgb,var(--rz-accent) 40%,var(--rz-border))}.rz-search-input:focus{border-color:var(--rz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--rz-accent) 20%,transparent)}:host([data-size=\"sm\"]) .rz-search-input{padding:.25rem 1.75rem .25rem 2rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-search-input{padding:.85rem 2.5rem .85rem 2.75rem;font-size:1.05rem}.rz-search-input::-webkit-search-decoration,.rz-search-input::-webkit-search-cancel-button,.rz-search-input::-webkit-search-results-button,.rz-search-input::-webkit-search-results-decoration{display:none}.rz-search-clear{position:absolute;right:.5rem;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:var(--rz-muted);font-size:.75rem;transition:color .15s,background .15s}.rz-search-clear:hover{color:var(--rz-text);background:var(--color-surface-alt)}.rz-search-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-search-hint{color:var(--color-text-muted)}.rz-search-error{color:var(--color-danger)}:host.has-error .rz-search-input{border-color:var(--color-danger)!important}:host.has-error .rz-search-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
919
930
  }], 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 }] }] } });
920
931
 
921
932
  class TextInputComponent {
@@ -946,7 +957,7 @@ class TextInputComponent {
946
957
  this._touched.set(true);
947
958
  }
948
959
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
949
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TextInputComponent, isStandalone: true, selector: "app-text-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--rz-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<input\n class=\"rz-text-input\"\n type=\"text\"\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n/>\n\n@if (hint() && !error()) {\n <span class=\"rz-text-msg rz-text-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-text-msg rz-text-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary);--rz-bg: var(--color-surface);--rz-border: var(--color-border);--rz-text: var(--color-text);--rz-muted: var(--color-text-muted);--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent)}:host([data-accent=\"success\"]){--rz-accent: var(--color-success)}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger)}:host([data-accent=\"info\"]){--rz-accent: var(--color-info)}.rz-text-input{width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem .75rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease}.rz-text-input::placeholder{color:var(--rz-muted)}.rz-text-input:disabled{opacity:.5;cursor:not-allowed}.rz-text-input:focus{border-color:var(--rz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--rz-accent) 20%,transparent)}:host([data-size=\"sm\"]) .rz-text-input{padding:.25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-text-input{padding:.75rem 1rem;font-size:1rem}.rz-text-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-text-hint{color:var(--color-text-muted)}.rz-text-error{color:var(--color-danger)}:host.has-error .rz-text-input{border-color:var(--color-danger)!important}:host.has-error .rz-text-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
960
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TextInputComponent, isStandalone: true, selector: "app-text-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--rz-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<input\n class=\"rz-text-input\"\n type=\"text\"\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n/>\n\n@if (hint() && !error()) {\n <span class=\"rz-text-msg rz-text-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-text-msg rz-text-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary);--rz-bg: var(--color-surface);--rz-border: var(--color-border);--rz-text: var(--color-text);--rz-muted: var(--color-text-muted);--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1rem}:host([data-size=\"lg\"]){padding-bottom:1.75rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent)}:host([data-accent=\"success\"]){--rz-accent: var(--color-success)}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger)}:host([data-accent=\"info\"]){--rz-accent: var(--color-info)}.rz-text-input{width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem .75rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease}.rz-text-input::placeholder{color:var(--rz-muted)}.rz-text-input:disabled{opacity:.5;cursor:not-allowed}:host([data-accent]) .rz-text-input{border-color:color-mix(in srgb,var(--rz-accent) 40%,var(--rz-border))}.rz-text-input:focus{border-color:var(--rz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--rz-accent) 20%,transparent)}:host([data-size=\"sm\"]) .rz-text-input{padding:.25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-text-input{padding:.85rem 1.15rem;font-size:1.05rem}.rz-text-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-text-hint{color:var(--color-text-muted)}.rz-text-error{color:var(--color-danger)}:host.has-error .rz-text-input{border-color:var(--color-danger)!important}:host.has-error .rz-text-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
950
961
  }
951
962
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextInputComponent, decorators: [{
952
963
  type: Component,
@@ -956,7 +967,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
956
967
  '[class.has-error]': 'error()',
957
968
  '[style.--rz-accent]': '_rawAccent',
958
969
  '[style.width]': '_width',
959
- }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n class=\"rz-text-input\"\n type=\"text\"\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n/>\n\n@if (hint() && !error()) {\n <span class=\"rz-text-msg rz-text-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-text-msg rz-text-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary);--rz-bg: var(--color-surface);--rz-border: var(--color-border);--rz-text: var(--color-text);--rz-muted: var(--color-text-muted);--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent)}:host([data-accent=\"success\"]){--rz-accent: var(--color-success)}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger)}:host([data-accent=\"info\"]){--rz-accent: var(--color-info)}.rz-text-input{width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem .75rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease}.rz-text-input::placeholder{color:var(--rz-muted)}.rz-text-input:disabled{opacity:.5;cursor:not-allowed}.rz-text-input:focus{border-color:var(--rz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--rz-accent) 20%,transparent)}:host([data-size=\"sm\"]) .rz-text-input{padding:.25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-text-input{padding:.75rem 1rem;font-size:1rem}.rz-text-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-text-hint{color:var(--color-text-muted)}.rz-text-error{color:var(--color-danger)}:host.has-error .rz-text-input{border-color:var(--color-danger)!important}:host.has-error .rz-text-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
970
+ }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n class=\"rz-text-input\"\n type=\"text\"\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n/>\n\n@if (hint() && !error()) {\n <span class=\"rz-text-msg rz-text-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-text-msg rz-text-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-primary);--rz-bg: var(--color-surface);--rz-border: var(--color-border);--rz-text: var(--color-text);--rz-muted: var(--color-text-muted);--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1rem}:host([data-size=\"lg\"]){padding-bottom:1.75rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent)}:host([data-accent=\"success\"]){--rz-accent: var(--color-success)}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger)}:host([data-accent=\"info\"]){--rz-accent: var(--color-info)}.rz-text-input{width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem .75rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease}.rz-text-input::placeholder{color:var(--rz-muted)}.rz-text-input:disabled{opacity:.5;cursor:not-allowed}:host([data-accent]) .rz-text-input{border-color:color-mix(in srgb,var(--rz-accent) 40%,var(--rz-border))}.rz-text-input:focus{border-color:var(--rz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--rz-accent) 20%,transparent)}:host([data-size=\"sm\"]) .rz-text-input{padding:.25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-text-input{padding:.85rem 1.15rem;font-size:1.05rem}.rz-text-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-text-hint{color:var(--color-text-muted)}.rz-text-error{color:var(--color-danger)}:host.has-error .rz-text-input{border-color:var(--color-danger)!important}:host.has-error .rz-text-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
960
971
  }], 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 }] }] } });
961
972
 
962
973
  class ToggleComponent {
@@ -2170,13 +2181,13 @@ class SidebarComponent {
2170
2181
  }
2171
2182
  _onBackdrop() { this.toggleOpen.emit(); }
2172
2183
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2173
- 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 }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleOpen: "toggleOpen", toggleCollapse: "toggleCollapse", itemClick: "itemClick", logout: "logout" }, host: { properties: { "style.display": "'contents'" } }, ngImport: i0, template: "@if (isOpen()) {\n <div\n class=\"sd-backdrop\"\n animate.enter=\"sd-backdrop-in\"\n animate.leave=\"sd-backdrop-out\"\n (click)=\"_onBackdrop()\"\n ></div>\n}\n\n<aside\n class=\"sd-aside\"\n [class.sd-open]=\"isOpen()\"\n [class.sd-collapsed]=\"isCollapsed()\"\n [style]=\"_asideStyle()\"\n>\n <div class=\"rz-sd-header\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <button\n type=\"button\"\n (click)=\"toggleCollapse.emit()\"\n class=\"rz-sd-collapse-btn\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >\n <i class=\"pi rz-sd-collapse-icon\"\n [class.pi-th-large]=\"!isCollapsed()\"\n [class.pi-chevron-right]=\"isCollapsed()\"\n ></i>\n </button>\n\n @if (!isCollapsed()) {\n <span class=\"rz-sd-title\">{{ title() }}</span>\n }\n </div>\n\n <nav class=\"rz-sd-nav\">\n <ul class=\"rz-sd-menu\" [style.list-style]=\"'none'\" [style.padding]=\"'0'\">\n @for (item of items(); track item.id) {\n <li>\n <button\n type=\"button\"\n (click)=\"_onItemClick(item)\"\n class=\"rz-sd-item\"\n [class.rz-sd-item--active]=\"_activeId() === item.id\"\n >\n @if (item.icon) {\n <i [class]=\"'pi ' + item.icon\" class=\"rz-sd-item-icon\"></i>\n }\n @if (!isCollapsed()) {\n <span class=\"rz-sd-item-label\">{{ item.label }}</span>\n @if (item.children?.length) {\n <i class=\"pi pi-chevron-down rz-sd-item-chevron\"\n [style.transform]=\"_isExpanded(item.id) ? 'rotate(180deg)' : ''\"\n ></i>\n }\n }\n </button>\n\n @if (!isCollapsed() && item.children?.length && _isExpanded(item.id)) {\n <ul class=\"rz-sd-submenu\"\n [style.list-style]=\"'none'\" [style.padding]=\"'0'\"\n animate.enter=\"sd-slide-in\"\n animate.leave=\"sd-slide-out\"\n >\n @for (child of item.children; track child.id) {\n <li>\n <button\n type=\"button\"\n (click)=\"_onItemClick(child)\"\n class=\"rz-sd-child\"\n [class.rz-sd-child--active]=\"_activeId() === child.id\"\n >\n <span class=\"rz-sd-child-dot\"></span>\n <span>{{ child.label }}</span>\n </button>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </nav>\n\n @if (showFooter()) {\n <div class=\"rz-sd-footer\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <button\n type=\"button\"\n (click)=\"logout.emit()\"\n class=\"rz-sd-logout\"\n [class.rz-sd-logout-center]=\"isCollapsed()\"\n >\n <i class=\"pi pi-sign-out rz-sd-item-icon\"></i>\n @if (!isCollapsed()) {\n <span>Logout</span>\n }\n </button>\n </div>\n }\n</aside>\n", styles: [":host{display:contents}.sd-aside{display:flex;flex-direction:column;height:100%;position:relative;transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);border:1px solid var(--color-border-light, oklch(.91 .01 260));border-radius:var(--radius-md, .5rem);overflow:hidden}@media(max-width:1023px){.sd-aside{position:fixed;top:0;right:0;z-index:50;height:100vh;box-shadow:0 8px 32px #0000001f;transform:translate(100%)}.sd-aside.sd-open{transform:translate(0)}.sd-backdrop{position:fixed;inset:0;z-index:40;background:#00000073;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}.sd-backdrop-in{animation:sdFadeIn .2s ease-out}.sd-backdrop-out{animation:sdFadeOut .15s ease-in forwards}.sd-aside.sd-collapsed{width:64px!important}.sd-slide-in{animation:sdSlideDown .2s ease-out}.sd-slide-out{animation:sdSlideUp .15s ease-in forwards}.rz-sd-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:0 1rem;height:3.75rem;border-bottom:1px solid}.rz-sd-collapse-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:none;background:transparent;cursor:pointer;border-radius:.25rem;transition:all .2s}.rz-sd-collapse-btn:hover,.rz-sd-collapse-btn:active{background:var(--color-accent, oklch(.64 .2 50))}.rz-sd-collapse-icon{font-size:.875rem}.rz-sd-collapse-icon:active{scale:.9}.rz-sd-title{font-size:.95rem;font-weight:700;color:var(--color-text, oklch(.14 .01 260))}.sd-close-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:transparent;cursor:pointer;border-radius:.25rem;transition:background-color .2s}.sd-close-btn:hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.sd-close-btn i{font-size:.875rem}.rz-sd-nav{flex:1;overflow-y:auto;padding:.75rem}.rz-sd-menu{display:flex;flex-direction:column;gap:.25rem}.rz-sd-item{position:relative;width:100%;display:flex;align-items:center;gap:.75rem;padding:.75rem .85rem;border-radius:.5rem;transition:all .15s;font-size:.95rem;font-weight:500;border:none;cursor:pointer;color:var(--color-text, oklch(.14 .01 260));background:transparent}.rz-sd-item:before{content:\"\";position:absolute;inset-inline-start:0;top:50%;translate:0 -50%;width:3px;height:60%;border-radius:0 999px 999px 0;background:linear-gradient(180deg,var(--color-accent, oklch(.72 .17 70)),var(--color-primary, oklch(.32 .09 258)));transform:scaleY(.4);transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s;opacity:0}.rz-sd-item:hover{background:var(--color-accent-soft, oklch(.72 .17 70 / .08))}.rz-sd-item--active{background:var(--color-accent-soft, oklch(.72 .17 70 / .12));color:var(--color-accent, oklch(.72 .17 70));font-weight:600}.rz-sd-item--active:before{transform:scaleY(1);opacity:1}.rz-sd-item-icon{font-size:1.15rem;flex-shrink:0}.rz-sd-item-label{flex:1;text-align:right}.rz-sd-item-chevron{font-size:.8rem;transition:transform .2s}.rz-sd-submenu{margin-top:.25rem;margin-right:1.5rem;display:flex;flex-direction:column;gap:.125rem}.rz-sd-child{position:relative;width:100%;display:flex;align-items:center;gap:.75rem;padding:.65rem .85rem;border-radius:.5rem;transition:all .15s;font-size:.9rem;border:none;cursor:pointer;color:var(--color-text-muted, oklch(.48 .01 260));background:transparent}.rz-sd-child:before{content:\"\";position:absolute;inset-inline-start:0;top:50%;translate:0 -50%;width:3px;height:50%;border-radius:0 999px 999px 0;background:linear-gradient(180deg,var(--color-accent, oklch(.72 .17 70)),var(--color-primary, oklch(.32 .09 258)));transform:scaleY(.4);transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s;opacity:0}.rz-sd-child:hover{background:var(--color-primary-soft, oklch(.32 .09 258 / .06));color:var(--color-text, oklch(.14 .01 260))}.rz-sd-child--active{background:var(--color-primary-soft, oklch(.32 .09 258 / .1));color:var(--color-primary, oklch(.32 .09 258));font-weight:600}.rz-sd-child--active:before{transform:scaleY(1);opacity:1}.rz-sd-child-dot{width:.375rem;height:.375rem;border-radius:9999px;flex-shrink:0}.rz-sd-child--active .rz-sd-child-dot{background:var(--color-primary, oklch(.32 .09 258))}.rz-sd-footer{flex-shrink:0;padding:.75rem;border-top:1px solid;display:flex;flex-direction:column;gap:.5rem}.rz-sd-logout{width:100%;display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;border-radius:.5rem;font-size:.875rem;font-weight:500;border:none;cursor:pointer;background-color:var(--color-danger, oklch(.57 .21 25));color:#fff;transition:opacity .2s}.rz-sd-logout:hover{opacity:.85}.rz-sd-logout-center{justify-content:center}@keyframes sdFadeIn{0%{opacity:0}to{opacity:1}}@keyframes sdFadeOut{0%{opacity:1}to{opacity:0}}@keyframes sdSlideDown{0%{opacity:0;translate:0 -8px}to{opacity:1;translate:0}}@keyframes sdSlideUp{0%{opacity:1;translate:0}to{opacity:0;translate:0 -8px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2184
+ 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 }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleOpen: "toggleOpen", toggleCollapse: "toggleCollapse", itemClick: "itemClick", logout: "logout" }, host: { properties: { "style.display": "'contents'" } }, ngImport: i0, template: "@if (isOpen()) {\n <div\n class=\"sd-backdrop\"\n animate.enter=\"sd-backdrop-in\"\n animate.leave=\"sd-backdrop-out\"\n (click)=\"_onBackdrop()\"\n ></div>\n}\n\n<aside\n class=\"sd-aside\"\n [class.sd-open]=\"isOpen()\"\n [class.sd-collapsed]=\"isCollapsed()\"\n [style]=\"_asideStyle()\"\n>\n <div class=\"rz-sd-header\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <button\n type=\"button\"\n (click)=\"toggleCollapse.emit()\"\n class=\"rz-sd-collapse-btn\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >\n <i class=\"pi rz-sd-collapse-icon\"\n [class.pi-th-large]=\"!isCollapsed()\"\n [class.pi-chevron-right]=\"isCollapsed()\"\n ></i>\n </button>\n\n @if (!isCollapsed()) {\n <span class=\"rz-sd-title\">{{ title() }}</span>\n }\n </div>\n\n <nav class=\"rz-sd-nav\">\n <ul class=\"rz-sd-menu\" [style.list-style]=\"'none'\" [style.padding]=\"'0'\">\n @for (item of items(); track item.id) {\n <li>\n <button\n type=\"button\"\n (click)=\"_onItemClick(item)\"\n class=\"rz-sd-item\"\n [class.rz-sd-item--active]=\"_activeId() === item.id\"\n >\n @if (item.icon) {\n <i [class]=\"'pi ' + item.icon\" class=\"rz-sd-item-icon\"></i>\n }\n @if (!isCollapsed()) {\n <span class=\"rz-sd-item-label\">{{ item.label }}</span>\n @if (item.children?.length) {\n <i class=\"pi pi-chevron-down rz-sd-item-chevron\"\n [style.transform]=\"_isExpanded(item.id) ? 'rotate(180deg)' : ''\"\n ></i>\n }\n }\n </button>\n\n @if (!isCollapsed() && item.children?.length && _isExpanded(item.id)) {\n <ul class=\"rz-sd-submenu\"\n [style.list-style]=\"'none'\" [style.padding]=\"'0'\"\n animate.enter=\"sd-slide-in\"\n animate.leave=\"sd-slide-out\"\n >\n @for (child of item.children; track child.id) {\n <li>\n <button\n type=\"button\"\n (click)=\"_onItemClick(child)\"\n class=\"rz-sd-child\"\n [class.rz-sd-child--active]=\"_activeId() === child.id\"\n >\n <span class=\"rz-sd-child-dot\"></span>\n <span>{{ child.label }}</span>\n </button>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </nav>\n\n @if (showFooter()) {\n <div class=\"rz-sd-footer\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <button\n type=\"button\"\n (click)=\"logout.emit()\"\n class=\"rz-sd-logout\"\n [class.rz-sd-logout-center]=\"isCollapsed()\"\n >\n <i class=\"pi pi-sign-out rz-sd-item-icon\"></i>\n @if (!isCollapsed()) {\n <span>Logout</span>\n }\n </button>\n </div>\n }\n</aside>\n", styles: [":host{display:contents}.sd-aside{display:flex;flex-direction:column;height:100%;position:relative;background:var(--color-surface);transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);border-inline-end:1px solid var(--color-border);overflow:hidden}@media(max-width:1023px){.sd-aside{position:fixed;top:0;right:0;z-index:50;height:100vh;box-shadow:0 8px 32px #0000001f;transform:translate(100%)}.sd-aside.sd-open{transform:translate(0)}.sd-backdrop{position:fixed;inset:0;z-index:40;background:#00000073;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}.sd-backdrop-in{animation:sdFadeIn .2s ease-out}.sd-backdrop-out{animation:sdFadeOut .15s ease-in forwards}.sd-aside.sd-collapsed{width:64px!important}.sd-slide-in{animation:sdSlideDown .2s ease-out}.sd-slide-out{animation:sdSlideUp .15s ease-in forwards}.rz-sd-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:0 1rem;height:3.75rem;border-bottom:1px solid var(--color-border)}.rz-sd-collapse-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:none;background:transparent;cursor:pointer;border-radius:.25rem;transition:all .2s}.rz-sd-collapse-btn:hover,.rz-sd-collapse-btn:active{background:var(--color-accent, oklch(.64 .2 50))}.rz-sd-collapse-icon{font-size:.875rem}.rz-sd-collapse-icon:active{scale:.9}.rz-sd-title{font-size:.95rem;font-weight:700;color:var(--color-text, oklch(.14 .01 260))}.sd-close-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:transparent;cursor:pointer;border-radius:.25rem;transition:background-color .2s}.sd-close-btn:hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.sd-close-btn i{font-size:.875rem}.rz-sd-nav{flex:1;overflow-y:auto;padding:.75rem}.rz-sd-menu{display:flex;flex-direction:column;gap:.25rem}.rz-sd-item{position:relative;width:100%;display:flex;align-items:center;gap:.75rem;padding:.75rem .85rem;border-radius:.5rem;transition:all .15s;font-size:.95rem;font-weight:500;border:none;cursor:pointer;color:var(--color-text, oklch(.14 .01 260));background:transparent}.rz-sd-item:before{content:\"\";position:absolute;inset-inline-start:0;top:50%;translate:0 -50%;width:3px;height:60%;border-radius:0 999px 999px 0;background:linear-gradient(180deg,var(--color-accent, oklch(.72 .17 70)),var(--color-primary, oklch(.32 .09 258)));transform:scaleY(.4);transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s;opacity:0}.rz-sd-item:hover{background:var(--color-accent-soft, oklch(.72 .17 70 / .08))}.rz-sd-item--active{background:var(--color-accent-soft, oklch(.72 .17 70 / .12));color:var(--color-accent, oklch(.72 .17 70));font-weight:600}.rz-sd-item--active:before{transform:scaleY(1);opacity:1}.rz-sd-item-icon{font-size:1.15rem;flex-shrink:0}.rz-sd-item-label{flex:1;text-align:right}.rz-sd-item-chevron{font-size:.8rem;transition:transform .2s}.rz-sd-submenu{margin-top:.25rem;margin-right:1.5rem;display:flex;flex-direction:column;gap:.125rem}.rz-sd-child{position:relative;width:100%;display:flex;align-items:center;gap:.75rem;padding:.65rem .85rem;border-radius:.5rem;transition:all .15s;font-size:.9rem;border:none;cursor:pointer;color:var(--color-text-muted, oklch(.48 .01 260));background:transparent}.rz-sd-child:before{content:\"\";position:absolute;inset-inline-start:0;top:50%;translate:0 -50%;width:3px;height:50%;border-radius:0 999px 999px 0;background:linear-gradient(180deg,var(--color-accent, oklch(.72 .17 70)),var(--color-primary, oklch(.32 .09 258)));transform:scaleY(.4);transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s;opacity:0}.rz-sd-child:hover{background:var(--color-primary-soft, oklch(.32 .09 258 / .06));color:var(--color-text, oklch(.14 .01 260))}.rz-sd-child--active{background:var(--color-primary-soft, oklch(.32 .09 258 / .1));color:var(--color-primary, oklch(.32 .09 258));font-weight:600}.rz-sd-child--active:before{transform:scaleY(1);opacity:1}.rz-sd-child-dot{width:.375rem;height:.375rem;border-radius:9999px;flex-shrink:0}.rz-sd-child--active .rz-sd-child-dot{background:var(--color-primary, oklch(.32 .09 258))}.rz-sd-footer{flex-shrink:0;padding:.75rem;border-top:1px solid var(--color-border);display:flex;flex-direction:column;gap:.5rem}.rz-sd-logout{width:100%;display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;border-radius:.5rem;font-size:.875rem;font-weight:500;border:none;cursor:pointer;background-color:var(--color-danger, oklch(.57 .21 25));color:#fff;transition:opacity .2s}.rz-sd-logout:hover{opacity:.85}.rz-sd-logout-center{justify-content:center}@keyframes sdFadeIn{0%{opacity:0}to{opacity:1}}@keyframes sdFadeOut{0%{opacity:1}to{opacity:0}}@keyframes sdSlideDown{0%{opacity:0;translate:0 -8px}to{opacity:1;translate:0}}@keyframes sdSlideUp{0%{opacity:1;translate:0}to{opacity:0;translate:0 -8px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2174
2185
  }
2175
2186
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SidebarComponent, decorators: [{
2176
2187
  type: Component,
2177
2188
  args: [{ selector: 'app-sidebar', imports: [], host: {
2178
2189
  '[style.display]': "'contents'",
2179
- }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen()) {\n <div\n class=\"sd-backdrop\"\n animate.enter=\"sd-backdrop-in\"\n animate.leave=\"sd-backdrop-out\"\n (click)=\"_onBackdrop()\"\n ></div>\n}\n\n<aside\n class=\"sd-aside\"\n [class.sd-open]=\"isOpen()\"\n [class.sd-collapsed]=\"isCollapsed()\"\n [style]=\"_asideStyle()\"\n>\n <div class=\"rz-sd-header\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <button\n type=\"button\"\n (click)=\"toggleCollapse.emit()\"\n class=\"rz-sd-collapse-btn\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >\n <i class=\"pi rz-sd-collapse-icon\"\n [class.pi-th-large]=\"!isCollapsed()\"\n [class.pi-chevron-right]=\"isCollapsed()\"\n ></i>\n </button>\n\n @if (!isCollapsed()) {\n <span class=\"rz-sd-title\">{{ title() }}</span>\n }\n </div>\n\n <nav class=\"rz-sd-nav\">\n <ul class=\"rz-sd-menu\" [style.list-style]=\"'none'\" [style.padding]=\"'0'\">\n @for (item of items(); track item.id) {\n <li>\n <button\n type=\"button\"\n (click)=\"_onItemClick(item)\"\n class=\"rz-sd-item\"\n [class.rz-sd-item--active]=\"_activeId() === item.id\"\n >\n @if (item.icon) {\n <i [class]=\"'pi ' + item.icon\" class=\"rz-sd-item-icon\"></i>\n }\n @if (!isCollapsed()) {\n <span class=\"rz-sd-item-label\">{{ item.label }}</span>\n @if (item.children?.length) {\n <i class=\"pi pi-chevron-down rz-sd-item-chevron\"\n [style.transform]=\"_isExpanded(item.id) ? 'rotate(180deg)' : ''\"\n ></i>\n }\n }\n </button>\n\n @if (!isCollapsed() && item.children?.length && _isExpanded(item.id)) {\n <ul class=\"rz-sd-submenu\"\n [style.list-style]=\"'none'\" [style.padding]=\"'0'\"\n animate.enter=\"sd-slide-in\"\n animate.leave=\"sd-slide-out\"\n >\n @for (child of item.children; track child.id) {\n <li>\n <button\n type=\"button\"\n (click)=\"_onItemClick(child)\"\n class=\"rz-sd-child\"\n [class.rz-sd-child--active]=\"_activeId() === child.id\"\n >\n <span class=\"rz-sd-child-dot\"></span>\n <span>{{ child.label }}</span>\n </button>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </nav>\n\n @if (showFooter()) {\n <div class=\"rz-sd-footer\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <button\n type=\"button\"\n (click)=\"logout.emit()\"\n class=\"rz-sd-logout\"\n [class.rz-sd-logout-center]=\"isCollapsed()\"\n >\n <i class=\"pi pi-sign-out rz-sd-item-icon\"></i>\n @if (!isCollapsed()) {\n <span>Logout</span>\n }\n </button>\n </div>\n }\n</aside>\n", styles: [":host{display:contents}.sd-aside{display:flex;flex-direction:column;height:100%;position:relative;transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);border:1px solid var(--color-border-light, oklch(.91 .01 260));border-radius:var(--radius-md, .5rem);overflow:hidden}@media(max-width:1023px){.sd-aside{position:fixed;top:0;right:0;z-index:50;height:100vh;box-shadow:0 8px 32px #0000001f;transform:translate(100%)}.sd-aside.sd-open{transform:translate(0)}.sd-backdrop{position:fixed;inset:0;z-index:40;background:#00000073;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}.sd-backdrop-in{animation:sdFadeIn .2s ease-out}.sd-backdrop-out{animation:sdFadeOut .15s ease-in forwards}.sd-aside.sd-collapsed{width:64px!important}.sd-slide-in{animation:sdSlideDown .2s ease-out}.sd-slide-out{animation:sdSlideUp .15s ease-in forwards}.rz-sd-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:0 1rem;height:3.75rem;border-bottom:1px solid}.rz-sd-collapse-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:none;background:transparent;cursor:pointer;border-radius:.25rem;transition:all .2s}.rz-sd-collapse-btn:hover,.rz-sd-collapse-btn:active{background:var(--color-accent, oklch(.64 .2 50))}.rz-sd-collapse-icon{font-size:.875rem}.rz-sd-collapse-icon:active{scale:.9}.rz-sd-title{font-size:.95rem;font-weight:700;color:var(--color-text, oklch(.14 .01 260))}.sd-close-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:transparent;cursor:pointer;border-radius:.25rem;transition:background-color .2s}.sd-close-btn:hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.sd-close-btn i{font-size:.875rem}.rz-sd-nav{flex:1;overflow-y:auto;padding:.75rem}.rz-sd-menu{display:flex;flex-direction:column;gap:.25rem}.rz-sd-item{position:relative;width:100%;display:flex;align-items:center;gap:.75rem;padding:.75rem .85rem;border-radius:.5rem;transition:all .15s;font-size:.95rem;font-weight:500;border:none;cursor:pointer;color:var(--color-text, oklch(.14 .01 260));background:transparent}.rz-sd-item:before{content:\"\";position:absolute;inset-inline-start:0;top:50%;translate:0 -50%;width:3px;height:60%;border-radius:0 999px 999px 0;background:linear-gradient(180deg,var(--color-accent, oklch(.72 .17 70)),var(--color-primary, oklch(.32 .09 258)));transform:scaleY(.4);transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s;opacity:0}.rz-sd-item:hover{background:var(--color-accent-soft, oklch(.72 .17 70 / .08))}.rz-sd-item--active{background:var(--color-accent-soft, oklch(.72 .17 70 / .12));color:var(--color-accent, oklch(.72 .17 70));font-weight:600}.rz-sd-item--active:before{transform:scaleY(1);opacity:1}.rz-sd-item-icon{font-size:1.15rem;flex-shrink:0}.rz-sd-item-label{flex:1;text-align:right}.rz-sd-item-chevron{font-size:.8rem;transition:transform .2s}.rz-sd-submenu{margin-top:.25rem;margin-right:1.5rem;display:flex;flex-direction:column;gap:.125rem}.rz-sd-child{position:relative;width:100%;display:flex;align-items:center;gap:.75rem;padding:.65rem .85rem;border-radius:.5rem;transition:all .15s;font-size:.9rem;border:none;cursor:pointer;color:var(--color-text-muted, oklch(.48 .01 260));background:transparent}.rz-sd-child:before{content:\"\";position:absolute;inset-inline-start:0;top:50%;translate:0 -50%;width:3px;height:50%;border-radius:0 999px 999px 0;background:linear-gradient(180deg,var(--color-accent, oklch(.72 .17 70)),var(--color-primary, oklch(.32 .09 258)));transform:scaleY(.4);transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s;opacity:0}.rz-sd-child:hover{background:var(--color-primary-soft, oklch(.32 .09 258 / .06));color:var(--color-text, oklch(.14 .01 260))}.rz-sd-child--active{background:var(--color-primary-soft, oklch(.32 .09 258 / .1));color:var(--color-primary, oklch(.32 .09 258));font-weight:600}.rz-sd-child--active:before{transform:scaleY(1);opacity:1}.rz-sd-child-dot{width:.375rem;height:.375rem;border-radius:9999px;flex-shrink:0}.rz-sd-child--active .rz-sd-child-dot{background:var(--color-primary, oklch(.32 .09 258))}.rz-sd-footer{flex-shrink:0;padding:.75rem;border-top:1px solid;display:flex;flex-direction:column;gap:.5rem}.rz-sd-logout{width:100%;display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;border-radius:.5rem;font-size:.875rem;font-weight:500;border:none;cursor:pointer;background-color:var(--color-danger, oklch(.57 .21 25));color:#fff;transition:opacity .2s}.rz-sd-logout:hover{opacity:.85}.rz-sd-logout-center{justify-content:center}@keyframes sdFadeIn{0%{opacity:0}to{opacity:1}}@keyframes sdFadeOut{0%{opacity:1}to{opacity:0}}@keyframes sdSlideDown{0%{opacity:0;translate:0 -8px}to{opacity:1;translate:0}}@keyframes sdSlideUp{0%{opacity:1;translate:0}to{opacity:0;translate:0 -8px}}\n"] }]
2190
+ }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen()) {\n <div\n class=\"sd-backdrop\"\n animate.enter=\"sd-backdrop-in\"\n animate.leave=\"sd-backdrop-out\"\n (click)=\"_onBackdrop()\"\n ></div>\n}\n\n<aside\n class=\"sd-aside\"\n [class.sd-open]=\"isOpen()\"\n [class.sd-collapsed]=\"isCollapsed()\"\n [style]=\"_asideStyle()\"\n>\n <div class=\"rz-sd-header\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <button\n type=\"button\"\n (click)=\"toggleCollapse.emit()\"\n class=\"rz-sd-collapse-btn\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >\n <i class=\"pi rz-sd-collapse-icon\"\n [class.pi-th-large]=\"!isCollapsed()\"\n [class.pi-chevron-right]=\"isCollapsed()\"\n ></i>\n </button>\n\n @if (!isCollapsed()) {\n <span class=\"rz-sd-title\">{{ title() }}</span>\n }\n </div>\n\n <nav class=\"rz-sd-nav\">\n <ul class=\"rz-sd-menu\" [style.list-style]=\"'none'\" [style.padding]=\"'0'\">\n @for (item of items(); track item.id) {\n <li>\n <button\n type=\"button\"\n (click)=\"_onItemClick(item)\"\n class=\"rz-sd-item\"\n [class.rz-sd-item--active]=\"_activeId() === item.id\"\n >\n @if (item.icon) {\n <i [class]=\"'pi ' + item.icon\" class=\"rz-sd-item-icon\"></i>\n }\n @if (!isCollapsed()) {\n <span class=\"rz-sd-item-label\">{{ item.label }}</span>\n @if (item.children?.length) {\n <i class=\"pi pi-chevron-down rz-sd-item-chevron\"\n [style.transform]=\"_isExpanded(item.id) ? 'rotate(180deg)' : ''\"\n ></i>\n }\n }\n </button>\n\n @if (!isCollapsed() && item.children?.length && _isExpanded(item.id)) {\n <ul class=\"rz-sd-submenu\"\n [style.list-style]=\"'none'\" [style.padding]=\"'0'\"\n animate.enter=\"sd-slide-in\"\n animate.leave=\"sd-slide-out\"\n >\n @for (child of item.children; track child.id) {\n <li>\n <button\n type=\"button\"\n (click)=\"_onItemClick(child)\"\n class=\"rz-sd-child\"\n [class.rz-sd-child--active]=\"_activeId() === child.id\"\n >\n <span class=\"rz-sd-child-dot\"></span>\n <span>{{ child.label }}</span>\n </button>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </nav>\n\n @if (showFooter()) {\n <div class=\"rz-sd-footer\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <button\n type=\"button\"\n (click)=\"logout.emit()\"\n class=\"rz-sd-logout\"\n [class.rz-sd-logout-center]=\"isCollapsed()\"\n >\n <i class=\"pi pi-sign-out rz-sd-item-icon\"></i>\n @if (!isCollapsed()) {\n <span>Logout</span>\n }\n </button>\n </div>\n }\n</aside>\n", styles: [":host{display:contents}.sd-aside{display:flex;flex-direction:column;height:100%;position:relative;background:var(--color-surface);transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);border-inline-end:1px solid var(--color-border);overflow:hidden}@media(max-width:1023px){.sd-aside{position:fixed;top:0;right:0;z-index:50;height:100vh;box-shadow:0 8px 32px #0000001f;transform:translate(100%)}.sd-aside.sd-open{transform:translate(0)}.sd-backdrop{position:fixed;inset:0;z-index:40;background:#00000073;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}.sd-backdrop-in{animation:sdFadeIn .2s ease-out}.sd-backdrop-out{animation:sdFadeOut .15s ease-in forwards}.sd-aside.sd-collapsed{width:64px!important}.sd-slide-in{animation:sdSlideDown .2s ease-out}.sd-slide-out{animation:sdSlideUp .15s ease-in forwards}.rz-sd-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:0 1rem;height:3.75rem;border-bottom:1px solid var(--color-border)}.rz-sd-collapse-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:none;background:transparent;cursor:pointer;border-radius:.25rem;transition:all .2s}.rz-sd-collapse-btn:hover,.rz-sd-collapse-btn:active{background:var(--color-accent, oklch(.64 .2 50))}.rz-sd-collapse-icon{font-size:.875rem}.rz-sd-collapse-icon:active{scale:.9}.rz-sd-title{font-size:.95rem;font-weight:700;color:var(--color-text, oklch(.14 .01 260))}.sd-close-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:transparent;cursor:pointer;border-radius:.25rem;transition:background-color .2s}.sd-close-btn:hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.sd-close-btn i{font-size:.875rem}.rz-sd-nav{flex:1;overflow-y:auto;padding:.75rem}.rz-sd-menu{display:flex;flex-direction:column;gap:.25rem}.rz-sd-item{position:relative;width:100%;display:flex;align-items:center;gap:.75rem;padding:.75rem .85rem;border-radius:.5rem;transition:all .15s;font-size:.95rem;font-weight:500;border:none;cursor:pointer;color:var(--color-text, oklch(.14 .01 260));background:transparent}.rz-sd-item:before{content:\"\";position:absolute;inset-inline-start:0;top:50%;translate:0 -50%;width:3px;height:60%;border-radius:0 999px 999px 0;background:linear-gradient(180deg,var(--color-accent, oklch(.72 .17 70)),var(--color-primary, oklch(.32 .09 258)));transform:scaleY(.4);transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s;opacity:0}.rz-sd-item:hover{background:var(--color-accent-soft, oklch(.72 .17 70 / .08))}.rz-sd-item--active{background:var(--color-accent-soft, oklch(.72 .17 70 / .12));color:var(--color-accent, oklch(.72 .17 70));font-weight:600}.rz-sd-item--active:before{transform:scaleY(1);opacity:1}.rz-sd-item-icon{font-size:1.15rem;flex-shrink:0}.rz-sd-item-label{flex:1;text-align:right}.rz-sd-item-chevron{font-size:.8rem;transition:transform .2s}.rz-sd-submenu{margin-top:.25rem;margin-right:1.5rem;display:flex;flex-direction:column;gap:.125rem}.rz-sd-child{position:relative;width:100%;display:flex;align-items:center;gap:.75rem;padding:.65rem .85rem;border-radius:.5rem;transition:all .15s;font-size:.9rem;border:none;cursor:pointer;color:var(--color-text-muted, oklch(.48 .01 260));background:transparent}.rz-sd-child:before{content:\"\";position:absolute;inset-inline-start:0;top:50%;translate:0 -50%;width:3px;height:50%;border-radius:0 999px 999px 0;background:linear-gradient(180deg,var(--color-accent, oklch(.72 .17 70)),var(--color-primary, oklch(.32 .09 258)));transform:scaleY(.4);transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s;opacity:0}.rz-sd-child:hover{background:var(--color-primary-soft, oklch(.32 .09 258 / .06));color:var(--color-text, oklch(.14 .01 260))}.rz-sd-child--active{background:var(--color-primary-soft, oklch(.32 .09 258 / .1));color:var(--color-primary, oklch(.32 .09 258));font-weight:600}.rz-sd-child--active:before{transform:scaleY(1);opacity:1}.rz-sd-child-dot{width:.375rem;height:.375rem;border-radius:9999px;flex-shrink:0}.rz-sd-child--active .rz-sd-child-dot{background:var(--color-primary, oklch(.32 .09 258))}.rz-sd-footer{flex-shrink:0;padding:.75rem;border-top:1px solid var(--color-border);display:flex;flex-direction:column;gap:.5rem}.rz-sd-logout{width:100%;display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;border-radius:.5rem;font-size:.875rem;font-weight:500;border:none;cursor:pointer;background-color:var(--color-danger, oklch(.57 .21 25));color:#fff;transition:opacity .2s}.rz-sd-logout:hover{opacity:.85}.rz-sd-logout-center{justify-content:center}@keyframes sdFadeIn{0%{opacity:0}to{opacity:1}}@keyframes sdFadeOut{0%{opacity:1}to{opacity:0}}@keyframes sdSlideDown{0%{opacity:0;translate:0 -8px}to{opacity:1;translate:0}}@keyframes sdSlideUp{0%{opacity:1;translate:0}to{opacity:0;translate:0 -8px}}\n"] }]
2180
2191
  }], 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 }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", 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"] }] } });
2181
2192
 
2182
2193
  class ConfirmDialogComponent {