ryzen-ui 0.2.8 → 0.2.10

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 +14 -11
  2. package/fesm2022/ryzen-ui.mjs.map +1 -1
  3. package/index.d.ts +6 -3
  4. package/package.json +1 -1
package/fesm2022/ryzen-ui.mjs CHANGED
@@ -74,6 +74,7 @@ class DatePickerComponent {
74
74
  format = input('dd/MM/yyyy', ...(ngDevMode ? [{ debugName: "format" }] : []));
75
75
  width = input('', ...(ngDevMode ? [{ debugName: "width" }] : []));
76
76
  config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
77
+ appendToBody = input(undefined, ...(ngDevMode ? [{ debugName: "appendToBody" }] : []));
77
78
  _size = computed(() => this.size(), ...(ngDevMode ? [{ debugName: "_size" }] : []));
78
79
  _accentKey = computed(() => {
79
80
  const c = this.accentColor();
@@ -122,7 +123,7 @@ class DatePickerComponent {
122
123
  _monthName = computed(() => this._monthNames[this._viewDate().getMonth()], ...(ngDevMode ? [{ debugName: "_monthName" }] : []));
123
124
  _year = computed(() => this._viewDate().getFullYear(), ...(ngDevMode ? [{ debugName: "_year" }] : []));
124
125
  _decadeLabel = computed(() => `${this._decade()} - ${this._decade() + 9}`, ...(ngDevMode ? [{ debugName: "_decadeLabel" }] : []));
125
- _appendToParent = computed(() => this.config().appendToBody ?? this.config().appendToParent ?? true, ...(ngDevMode ? [{ debugName: "_appendToParent" }] : []));
126
+ _appendToParent = computed(() => this.appendToBody() ?? this.config().appendToBody ?? this.config().appendToParent ?? true, ...(ngDevMode ? [{ debugName: "_appendToParent" }] : []));
126
127
  _panelFixed = computed(() => this._isOpen() && this._appendToParent() ? 'fixed' : null, ...(ngDevMode ? [{ debugName: "_panelFixed" }] : []));
127
128
  _showTodayBtn = computed(() => this.config().showTodayButton !== false, ...(ngDevMode ? [{ debugName: "_showTodayBtn" }] : []));
128
129
  _showYearNav = computed(() => this.config().showYearNavigation !== false, ...(ngDevMode ? [{ debugName: "_showYearNav" }] : []));
@@ -339,7 +340,7 @@ class DatePickerComponent {
339
340
  this._close();
340
341
  }
341
342
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
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 });
343
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DatePickerComponent, isStandalone: true, selector: "app-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--rz-accent": "_accentColorValue", "style.width": "_width" } }, ngImport: i0, template: "<div class=\"rz-dp-wrapper\">\n <label class=\"rz-dp-trigger\" (click)=\"_onTriggerClick($event)\">\n <input\n class=\"rz-dp-input\"\n type=\"text\"\n readonly\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"_displayValue()\"\n />\n\n @if (_displayValue() && !disabled()) {\n <button class=\"rz-dp-clear\" type=\"button\" (click)=\"_clear($event)\" aria-label=\"Clear date\">\n <i class=\"pi pi-times\"></i>\n </button>\n }\n\n <i class=\"rz-dp-icon pi pi-calendar\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-dp-panel\n class=\"rz-dp-panel\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.rz-dp-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.rz-dp-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n\n <div class=\"rz-dp-header\" [style.background-color]=\"_accentColorValue()\">\n <div class=\"rz-dp-nav\">\n @if (_viewMode() === 'days' && _showYearNav()) {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_prevYear()\" aria-label=\"Previous year\">\n <i class=\"pi pi-angle-double-left\"></i>\n </button>\n }\n @if (_viewMode() !== 'years') {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_prevPeriod()\" aria-label=\"Previous\">\n <i class=\"pi pi-angle-left\"></i>\n </button>\n }\n\n <div class=\"rz-dp-nav-title\">\n @if (_viewMode() === 'days') {\n <button type=\"button\" class=\"rz-dp-nav-link\" (click)=\"_showMonths()\">{{ _monthName() }}</button>\n <button type=\"button\" class=\"rz-dp-nav-link\" (click)=\"_showYears()\">{{ _year() }}</button>\n }\n @if (_viewMode() === 'months') {\n <button type=\"button\" class=\"rz-dp-nav-link\" (click)=\"_showYears()\">{{ _year() }}</button>\n }\n @if (_viewMode() === 'years') {\n <span class=\"rz-dp-decade-label\">{{ _decadeLabel() }}</span>\n }\n </div>\n\n @if (_viewMode() !== 'years') {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_nextPeriod()\" aria-label=\"Next\">\n <i class=\"pi pi-angle-right\"></i>\n </button>\n }\n @if (_viewMode() === 'days' && _showYearNav()) {\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_nextYear()\" aria-label=\"Next year\">\n <i class=\"pi pi-angle-double-right\"></i>\n </button>\n }\n </div>\n\n @if (_showTodayBtn() && _viewMode() === 'days') {\n <button type=\"button\" class=\"rz-dp-today-btn\" (click)=\"_goToToday()\">\n <i class=\"pi pi-calendar-plus\"></i>\n Today\n </button>\n }\n </div>\n\n @if (_viewMode() === 'days') {\n <div class=\"rz-dp-days-view\">\n <div class=\"rz-dp-weekdays\">\n @for (day of _weekDaysOrdered(); track $index) {\n <div class=\"rz-dp-weekday-cell\">{{ day }}</div>\n }\n </div>\n <div class=\"rz-dp-days-grid\">\n @for (day of _calendarDays(); track day.date.getTime()) {\n @if (day.date.getMonth() === _viewDate().getMonth() || day.date.getMonth() === _viewDate().getMonth() - 1 || day.date.getMonth() === _viewDate().getMonth() + 1) {\n <button\n type=\"button\"\n class=\"rz-dp-day\"\n [class.other-month]=\"!day.isCurrentMonth && !day.isSelected\"\n [class.today]=\"day.isToday && !day.isSelected\"\n [class.selected]=\"day.isSelected\"\n [class.highlighted]=\"day.isHighlighted && !day.isSelected\"\n [class.disabled]=\"day.isDisabled\"\n [disabled]=\"day.isDisabled\"\n (click)=\"_selectDate(day.date)\"\n [attr.aria-label]=\"day.date.toLocaleDateString()\"\n >{{ day.day }}</button>\n }\n }\n </div>\n </div>\n }\n\n @if (_viewMode() === 'months') {\n <div class=\"rz-dp-months-grid\">\n @for (month of _monthNames; track $index) {\n <button\n type=\"button\"\n class=\"rz-dp-month-btn\"\n [class.current]=\"_isCurrentMonth($index)\"\n (click)=\"_selectMonth($index)\"\n >{{ _monthsShort[$index] }}</button>\n }\n </div>\n }\n\n @if (_viewMode() === 'years') {\n <div class=\"rz-dp-years-view\">\n <div class=\"rz-dp-years-nav\">\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_prevDecade()\">\n <i class=\"pi pi-chevron-left\"></i>\n </button>\n <span class=\"rz-dp-decade-label\">{{ _decadeLabel() }}</span>\n <button type=\"button\" class=\"rz-dp-nav-btn\" (click)=\"_nextDecade()\">\n <i class=\"pi pi-chevron-right\"></i>\n </button>\n </div>\n <div class=\"rz-dp-years-grid\">\n @for (year of _yearsList(); track $index) {\n <button\n type=\"button\"\n class=\"rz-dp-year-btn\"\n [class.current]=\"_isCurrentYear(year)\"\n (click)=\"_selectYear(year)\"\n >{{ year }}</button>\n }\n </div>\n </div>\n }\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"rz-dp-msg rz-dp-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-dp-msg rz-dp-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}", styles: [":host{--rz-accent: var(--color-primary, oklch(.32 .09 258));--rz-bg: var(--color-surface, oklch(.99 0 0));--rz-border: var(--color-border, oklch(.83 .015 260));--rz-text: var(--color-text, oklch(.14 .01 260));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--rz-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--rz-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error .rz-dp-input{border-color:var(--color-danger)!important}:host.has-error .rz-dp-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.rz-dp-wrapper{position:relative;overflow:visible}.rz-dp-trigger{display:flex;align-items:center;width:100%}.rz-dp-input{width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem 2.75rem .5rem .75rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease;cursor:pointer;box-sizing:border-box}.rz-dp-input::placeholder{color:var(--rz-muted)}.rz-dp-input:disabled{opacity:.5;cursor:not-allowed}:host([data-accent]) .rz-dp-input{border-color:color-mix(in srgb,var(--rz-accent) 40%,var(--rz-border))}.rz-dp-input:focus{border-color:var(--rz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--rz-accent) 20%,transparent)}:host([data-size=\"sm\"]) .rz-dp-input{padding:.25rem 2.25rem .25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dp-input{padding:.75rem 3rem .75rem 1rem;font-size:1rem}.rz-dp-clear{position:absolute;top:50%;translate:0 -50%;inset-inline-end:2rem;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;color:var(--rz-muted);font-size:.75rem;transition:color .15s}.rz-dp-clear:hover{color:var(--rz-text)}.rz-dp-icon{position:absolute;top:50%;translate:0 -50%;inset-inline-end:.625rem;pointer-events:none;color:var(--rz-accent);font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center}:host([data-size=\"sm\"]) .rz-dp-icon{inset-inline-end:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dp-icon{inset-inline-end:.75rem;font-size:1.125rem}.rz-dp-panel{--rz-text: var(--color-text, oklch(.14 .01 260));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));left:0;z-index:50;width:100%;min-width:17.5rem;background:var(--color-surface, oklch(.99 0 0));border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:var(--radius-md, .5rem);box-shadow:0 10px 15px -3px color-mix(in srgb,var(--color-text) 10%,transparent),0 4px 6px -4px color-mix(in srgb,var(--color-text) 10%,transparent);overflow:hidden;color:var(--color-text, oklch(.14 .01 260));box-sizing:border-box}.rz-dp-panel.absolute{position:absolute}.rz-dp-header{padding:.75rem;color:#fff}.rz-dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.375rem}.rz-dp-nav-btn{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:50%;background:transparent;color:color-mix(in srgb,white 80%,transparent);cursor:pointer;transition:background .15s;font-size:.75rem;flex-shrink:0}.rz-dp-nav-btn:hover{background:color-mix(in srgb,white 20%,transparent)}.rz-dp-nav-title{display:flex;align-items:center;gap:.25rem;font-size:.875rem;font-weight:600}.rz-dp-nav-link{padding:.125rem .375rem;border:none;border-radius:.25rem;background:transparent;color:#fff;cursor:pointer;transition:background .15s}.rz-dp-nav-link:hover{background:color-mix(in srgb,white 20%,transparent)}.rz-dp-decade-label{padding:0 .375rem}.rz-dp-today-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.375rem;padding:.25rem .5rem;border:none;border-radius:.25rem;background:color-mix(in srgb,white 20%,transparent);color:#fff;font-size:.75rem;cursor:pointer;transition:background .15s}.rz-dp-today-btn:hover{background:color-mix(in srgb,white 30%,transparent)}.rz-dp-days-view{padding:.625rem;box-sizing:border-box}.rz-dp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:.125rem;width:100%}.rz-dp-weekday-cell{display:flex;align-items:center;justify-content:center;height:1.75rem;font-size:.75rem;font-weight:500;color:var(--color-text-muted);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);min-width:0}.rz-dp-days-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.125rem;width:100%}.rz-dp-day{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;max-width:2.5rem;margin:0 auto;padding:0;border:none;border-radius:50%;cursor:pointer;font-size:.875rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);transition:all .15s;color:var(--rz-text);min-width:0;box-sizing:border-box}.rz-dp-day.other-month{color:var(--rz-muted)}.rz-dp-day.today{font-weight:600;box-shadow:0 0 0 2px var(--rz-accent)}.rz-dp-day.selected{background:var(--rz-accent);color:#fff;font-weight:600}.rz-dp-day.highlighted{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-day.disabled{opacity:.3;cursor:not-allowed}.rz-dp-day:not(.selected):not(.disabled):hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-months-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:.75rem}.rz-dp-month-btn{padding:.5rem;border-radius:.5rem;border:none;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);transition:background .15s,color .15s;cursor:pointer;color:var(--rz-text);background:transparent}.rz-dp-month-btn.current{background:var(--rz-accent);color:#fff}.rz-dp-month-btn:not(.current):hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-years-view{padding:.625rem}.rz-dp-years-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;padding:0 .25rem}.rz-dp-years-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.rz-dp-year-btn{padding:.5rem;border-radius:.5rem;border:none;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);transition:background .15s,color .15s;cursor:pointer;color:var(--rz-text);background:transparent}.rz-dp-year-btn.current{background:var(--rz-accent);color:#fff}.rz-dp-year-btn:not(.current):hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.rz-dp-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-dp-hint{color:var(--color-text-muted)}.rz-dp-error{color:var(--color-danger)}.rz-dp-fade-in{animation:rz-dp-in .2s ease}.rz-dp-fade-out{animation:rz-dp-out .15s ease forwards}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-dp-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes rz-dp-out{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
343
344
  }
344
345
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DatePickerComponent, decorators: [{
345
346
  type: Component,
@@ -350,7 +351,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
350
351
  '[style.--rz-accent]': '_accentColorValue',
351
352
  '[style.width]': '_width',
352
353
  }, 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"] }]
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 }] }] } });
354
+ }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], accentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentColor", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }] } });
354
355
 
355
356
  class DropDownComponent {
356
357
  _elementRef = inject(ElementRef);
@@ -368,8 +369,9 @@ class DropDownComponent {
368
369
  error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
369
370
  width = input('', ...(ngDevMode ? [{ debugName: "width" }] : []));
370
371
  config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
372
+ appendToBody = input(undefined, ...(ngDevMode ? [{ debugName: "appendToBody" }] : []));
371
373
  _size = computed(() => this.size(), ...(ngDevMode ? [{ debugName: "_size" }] : []));
372
- _direction = computed(() => this.config().direction ?? 'up', ...(ngDevMode ? [{ debugName: "_direction" }] : []));
374
+ _direction = computed(() => this.config().direction ?? 'down', ...(ngDevMode ? [{ debugName: "_direction" }] : []));
373
375
  _accentKey = computed(() => {
374
376
  const c = this.accentColor();
375
377
  return c && isThemeColor(c) ? c : null;
@@ -396,7 +398,7 @@ class DropDownComponent {
396
398
  _panelWidth = signal(0, ...(ngDevMode ? [{ debugName: "_panelWidth" }] : []));
397
399
  _panelEl = null;
398
400
  _searchQuery = signal('', ...(ngDevMode ? [{ debugName: "_searchQuery" }] : []));
399
- _appendToParent = computed(() => this.config().appendToBody ?? this.config().appendToParent ?? true, ...(ngDevMode ? [{ debugName: "_appendToParent" }] : []));
401
+ _appendToParent = computed(() => this.appendToBody() ?? this.config().appendToBody ?? this.config().appendToParent ?? true, ...(ngDevMode ? [{ debugName: "_appendToParent" }] : []));
400
402
  _panelFixed = computed(() => this._isOpen() && this._appendToParent() ? 'fixed' : null, ...(ngDevMode ? [{ debugName: "_panelFixed" }] : []));
401
403
  _maxHeight = computed(() => this.config().maxHeight ?? '256px', ...(ngDevMode ? [{ debugName: "_maxHeight" }] : []));
402
404
  _selectedLabel = computed(() => {
@@ -519,7 +521,7 @@ class DropDownComponent {
519
521
  }
520
522
  }
521
523
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropDownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
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 });
524
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DropDownComponent, isStandalone: true, selector: "app-drop-down", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "window:scroll": "_onWindowScroll()" }, properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--rz-accent": "_accentColorValue", "style.width": "_width" } }, ngImport: i0, template: "<div class=\"rz-dd-wrapper\">\n <label class=\"rz-dd-trigger\" (click)=\"_onTriggerClick($event)\">\n <input\n class=\"rz-dd-input\"\n type=\"text\"\n readonly\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"_selectedLabel()\"\n />\n\n @if (_selectedLabel() && !disabled()) {\n <button class=\"rz-dd-clear\" type=\"button\" (click)=\"_clear($event)\" aria-label=\"Clear\">\n <i class=\"pi pi-times\"></i>\n </button>\n }\n\n <i class=\"rz-dd-icon pi pi-chevron-down\" [class.is-open]=\"_isOpen()\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-dd-panel\n class=\"rz-dd-panel\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.rz-dd-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.rz-dd-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n\n @if (searchable()) {\n <div class=\"rz-dd-search-wrap\">\n <input\n data-dd-search\n type=\"text\"\n class=\"rz-dd-search-input\"\n placeholder=\"Search...\"\n [value]=\"_searchQuery()\"\n (input)=\"_searchQuery.set($any($event.target).value)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n }\n\n <div\n class=\"rz-dd-options\"\n [style.max-height]=\"_maxHeight()\"\n (scroll)=\"$event.stopPropagation()\">\n @for (option of _filteredOptions(); track option.value) {\n <button\n type=\"button\"\n class=\"rz-dd-option\"\n [class.selected]=\"option.value === value()\"\n (click)=\"_selectOption(option)\"\n >{{ option.label }}</button>\n }\n\n @if (_filteredOptions().length === 0) {\n <div class=\"rz-dd-empty\">No results found</div>\n }\n </div>\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"rz-dd-msg rz-dd-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-dd-msg rz-dd-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}", styles: [":host{--rz-accent: var(--color-accent, oklch(.64 .2 50));--rz-bg: var(--color-surface, oklch(.99 0 0));--rz-border: var(--color-border, oklch(.83 .015 260));--rz-text: var(--color-text, oklch(.14 .01 260));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));--rz-surface: var(--color-surface-alt, oklch(.975 .005 260));--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--rz-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--rz-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error .rz-dd-input{border-color:var(--color-danger, oklch(.55 .25 25))!important}:host.has-error .rz-dd-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger, oklch(.55 .25 25)) 20%,transparent)!important}.rz-dd-wrapper{position:relative;overflow:visible}.rz-dd-trigger{display:flex;align-items:center;width:100%}.rz-dd-input{width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem 2.75rem .5rem .75rem;font-size:.875rem;transition:border-color .2s ease,box-shadow .2s ease;cursor:pointer;box-sizing:border-box}.rz-dd-input::placeholder{color:var(--rz-muted)}.rz-dd-input:disabled{opacity:.5;cursor:not-allowed}:host([data-accent]) .rz-dd-input{border-color:color-mix(in srgb,var(--rz-accent) 40%,var(--rz-border))}.rz-dd-input:focus{border-color:var(--rz-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--rz-accent) 20%,transparent)}:host([data-size=\"sm\"]) .rz-dd-input{padding:.25rem 2.25rem .25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dd-input{padding:.75rem 3rem .75rem 1rem;font-size:1rem}.rz-dd-clear{position:absolute;top:50%;translate:0 -50%;inset-inline-end:2rem;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;color:var(--rz-muted);font-size:.75rem;transition:color .15s}.rz-dd-clear:hover{color:var(--rz-text)}.rz-dd-icon{position:absolute;top:50%;translate:0 -50%;inset-inline-end:.625rem;pointer-events:none;color:var(--rz-muted);font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:transform .2s}.rz-dd-icon.is-open{transform:rotate(180deg)}:host([data-size=\"sm\"]) .rz-dd-icon{inset-inline-end:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dd-icon{inset-inline-end:.75rem;font-size:1.125rem}.rz-dd-panel{left:0;z-index:50;width:100%;min-width:15rem;background:var(--color-surface, oklch(.99 0 0));border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:var(--radius-md, .5rem);box-shadow:0 10px 15px -3px color-mix(in srgb,var(--color-text) 10%,transparent),0 4px 6px -4px color-mix(in srgb,var(--color-text) 10%,transparent);overflow:hidden;color:var(--color-text, oklch(.14 .01 260));box-sizing:border-box}.rz-dd-panel.absolute{position:absolute}.rz-dd-search-wrap{padding:.5rem .5rem 0}.rz-dd-search-input{width:100%;padding:.375rem .5rem;font-size:.875rem;border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:.25rem;outline:none;background:var(--color-surface, oklch(.99 0 0));color:var(--color-text, oklch(.14 .01 260));font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);box-sizing:border-box}.rz-dd-search-input::placeholder{color:var(--color-text-muted)}.rz-dd-search-input:focus{border-color:var(--color-accent)}.rz-dd-options{overflow-y:auto}.rz-dd-option{width:100%;text-align:left;border:none;cursor:pointer;transition:background .1s,color .1s;background:transparent;color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem .75rem;font-size:.875rem;box-sizing:border-box}.rz-dd-option:hover{background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface))}.rz-dd-option.selected{background:var(--rz-accent);color:var(--color-primary-inverse, oklch(.99 0 0));font-weight:600}:host([data-size=\"sm\"]) .rz-dd-option{padding:.375rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-dd-option{padding:.75rem 1rem;font-size:1rem}.rz-dd-empty{padding:1rem .75rem;text-align:center;font-size:.875rem;color:var(--rz-muted)}.rz-dd-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-dd-hint{color:var(--color-text-muted)}.rz-dd-error{color:var(--color-danger)}.rz-dd-fade-in{animation:rz-dd-in .2s ease}.rz-dd-fade-out{animation:rz-dd-out .15s ease forwards}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-dd-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes rz-dd-out{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
523
525
  }
524
526
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropDownComponent, decorators: [{
525
527
  type: Component,
@@ -531,7 +533,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
531
533
  '[style.width]': '_width',
532
534
  '(window:scroll)': '_onWindowScroll()',
533
535
  }, 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"] }]
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 }] }] } });
536
+ }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], accentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentColor", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }] } });
535
537
 
536
538
  class FileUploadComponent {
537
539
  files = model([], ...(ngDevMode ? [{ debugName: "files" }] : []));
@@ -635,6 +637,7 @@ class MultiSelectComponent {
635
637
  error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
636
638
  width = input('', ...(ngDevMode ? [{ debugName: "width" }] : []));
637
639
  config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
640
+ appendToBody = input(undefined, ...(ngDevMode ? [{ debugName: "appendToBody" }] : []));
638
641
  _size = computed(() => this.size(), ...(ngDevMode ? [{ debugName: "_size" }] : []));
639
642
  _direction = computed(() => this.config().direction ?? 'auto', ...(ngDevMode ? [{ debugName: "_direction" }] : []));
640
643
  _accentKey = computed(() => {
@@ -663,7 +666,7 @@ class MultiSelectComponent {
663
666
  _panelWidth = signal(0, ...(ngDevMode ? [{ debugName: "_panelWidth" }] : []));
664
667
  _panelEl = null;
665
668
  _searchQuery = signal('', ...(ngDevMode ? [{ debugName: "_searchQuery" }] : []));
666
- _appendToParent = computed(() => this.config().appendToBody ?? this.config().appendToParent ?? true, ...(ngDevMode ? [{ debugName: "_appendToParent" }] : []));
669
+ _appendToParent = computed(() => this.appendToBody() ?? this.config().appendToBody ?? this.config().appendToParent ?? true, ...(ngDevMode ? [{ debugName: "_appendToParent" }] : []));
667
670
  _panelFixed = computed(() => this._isOpen() && this._appendToParent() ? 'fixed' : null, ...(ngDevMode ? [{ debugName: "_panelFixed" }] : []));
668
671
  _maxHeight = computed(() => this.config().maxHeight ?? '256px', ...(ngDevMode ? [{ debugName: "_maxHeight" }] : []));
669
672
  _selectedLabels = computed(() => {
@@ -827,7 +830,7 @@ class MultiSelectComponent {
827
830
  }
828
831
  }
829
832
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
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 });
833
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: MultiSelectComponent, isStandalone: true, selector: "app-multi-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "window:scroll": "_onWindowScroll()" }, properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--rz-accent": "_accentColorValue", "style.width": "_width" } }, ngImport: i0, template: "<div class=\"rz-ms-wrapper\">\n <label class=\"rz-ms-trigger\" (click)=\"_onTriggerClick($event)\">\n @let chips = _selectedLabels();\n\n <div class=\"rz-ms-field\">\n @for (label of chips; track label) {\n <span class=\"rz-ms-chip\">\n {{ label }}\n <button type=\"button\" class=\"rz-ms-chip-remove\"\n (click)=\"_removeChip(value()[$index], $event)\"\n tabindex=\"-1\"\n aria-label=\"Remove {{ label }}\"\n >&times;</button>\n </span>\n }\n\n <input\n type=\"text\"\n class=\"rz-ms-search-input\"\n [attr.placeholder]=\"chips.length ? '' : placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n (input)=\"_onInput($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n\n <i class=\"rz-ms-icon pi pi-chevron-down\" [class.is-open]=\"_isOpen()\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-ms-panel\n class=\"rz-ms-panel\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.rz-ms-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.rz-ms-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n\n @if (searchable()) {\n <div class=\"rz-ms-search-wrap\">\n <input\n data-ms-search\n type=\"text\"\n class=\"rz-ms-search-field-input\"\n placeholder=\"Search...\"\n [value]=\"_searchQuery()\"\n (input)=\"_searchQuery.set($any($event.target).value)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n }\n\n <div\n class=\"rz-ms-options\"\n [style.max-height]=\"_maxHeight()\"\n (scroll)=\"$event.stopPropagation()\">\n\n @if (selectAll() && _filteredOptions().length > 0) {\n <button\n type=\"button\"\n class=\"rz-ms-option\"\n (click)=\"_toggleSelectAll()\"\n >\n <span class=\"rz-ms-checkbox\" [class.checked]=\"_allFilteredSelected()\">\n @if (_allFilteredSelected()) { &#10003; }\n </span>\n <span class=\"rz-ms-option-label\">{{ selectAllLabel() }}</span>\n </button>\n <div class=\"rz-ms-divider\"></div>\n }\n\n @for (option of _filteredOptions(); track option.value) {\n <button\n type=\"button\"\n class=\"rz-ms-option\"\n [class.selected]=\"_isSelected(_optVal(option))\"\n (click)=\"_toggleOption(option)\"\n >\n <span class=\"rz-ms-checkbox\" [class.checked]=\"_isSelected(_optVal(option))\">\n @if (_isSelected(_optVal(option))) { &#10003; }\n </span>\n <span>{{ option.label }}</span>\n </button>\n }\n\n @if (_filteredOptions().length === 0) {\n <div class=\"rz-ms-empty\">No results found</div>\n }\n </div>\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"rz-ms-msg rz-ms-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"rz-ms-msg rz-ms-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--rz-accent: var(--color-accent, oklch(.64 .2 50));--rz-bg: var(--color-surface, oklch(.99 0 0));--rz-border: var(--color-border, oklch(.83 .015 260));--rz-text: var(--color-text, oklch(.14 .01 260));--rz-muted: var(--color-text-muted, oklch(.48 .01 260));--rz-surface: var(--color-surface-alt, oklch(.975 .005 260));--rz-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--rz-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--rz-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--rz-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--rz-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--rz-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--rz-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--rz-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error .rz-ms-field{border-color:var(--color-danger, oklch(.55 .25 25))!important}:host.has-error .rz-ms-field:focus-within{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger, oklch(.55 .25 25)) 20%,transparent)!important}.rz-ms-wrapper{position:relative}.rz-ms-trigger{display:flex;align-items:center;width:100%;cursor:text}.rz-ms-field{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;min-height:0;height:auto;cursor:pointer;width:100%;outline:none;background:var(--rz-bg);border:1px solid var(--rz-border);border-radius:var(--rz-radius);color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);transition:border-color .2s ease,box-shadow .2s ease;padding:.375rem 2.5rem .375rem .75rem;font-size:.875rem}.rz-ms-field:disabled{opacity:.5;cursor:not-allowed}:host([data-size=\"sm\"]) .rz-ms-field{padding:.25rem 2rem .25rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-ms-field{padding:.75rem 2.75rem .75rem 1rem;font-size:1rem}.rz-ms-chip{display:inline-flex;align-items:center;gap:2px;padding:1px 6px 1px 8px;font-size:.75rem;border-radius:9999px;white-space:nowrap;background:color-mix(in srgb,var(--rz-accent) 15%,transparent);color:var(--rz-accent);line-height:1.5}.rz-ms-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:inherit;font-size:10px;transition:background .15s}.rz-ms-chip-remove:hover{background:color-mix(in srgb,var(--rz-accent) 20%,transparent)}.rz-ms-search-input{flex:1;min-width:50px;outline:none;border:none;background:transparent;color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:0;margin:0}.rz-ms-search-input::placeholder{color:var(--rz-muted)}:host([data-size=\"sm\"]) .rz-ms-search-input{font-size:.75rem;height:1.25rem}:host([data-size=\"md\"]) .rz-ms-search-input{font-size:.875rem;height:1.5rem}:host([data-size=\"lg\"]) .rz-ms-search-input{font-size:1rem;height:1.5rem}.rz-ms-icon{position:absolute;top:50%;translate:0 -50%;right:.625rem;pointer-events:none;color:var(--rz-muted);font-size:.875rem;transition:transform .2s}.rz-ms-icon.is-open{transform:rotate(180deg)}:host([data-size=\"sm\"]) .rz-ms-icon{right:.5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-ms-icon{right:.75rem;font-size:1.125rem}.rz-ms-panel{left:0;z-index:50;width:100%;min-width:15rem;background:var(--color-surface, oklch(.99 0 0));border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:var(--radius-md, .5rem);box-shadow:0 10px 15px -3px color-mix(in srgb,var(--color-text) 10%,transparent),0 4px 6px -4px color-mix(in srgb,var(--color-text) 10%,transparent);overflow:hidden;color:var(--color-text, oklch(.14 .01 260))}.rz-ms-panel.absolute{position:absolute}.rz-ms-search-wrap{padding:.5rem .5rem 0}.rz-ms-search-field-input{width:100%;padding:.375rem .5rem;font-size:.875rem;border:1px solid var(--color-border, oklch(.83 .015 260));border-radius:.25rem;outline:none;background:var(--color-surface, oklch(.99 0 0));color:var(--color-text, oklch(.14 .01 260));font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif)}.rz-ms-search-field-input::placeholder{color:var(--color-text-muted)}.rz-ms-search-field-input:focus{border-color:var(--color-accent)}.rz-ms-options{overflow-y:auto}.rz-ms-option{width:100%;display:flex;align-items:center;gap:.5rem;text-align:left;border:none;cursor:pointer;transition:background .1s,color .1s;background:transparent;color:var(--rz-text);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);padding:.5rem .75rem;font-size:.875rem}.rz-ms-option:hover{background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface))}.rz-ms-option.selected{background:var(--rz-accent)!important;color:var(--color-primary-inverse, oklch(.99 0 0))!important}:host([data-size=\"sm\"]) .rz-ms-option{padding:.375rem .5rem;font-size:.75rem}:host([data-size=\"lg\"]) .rz-ms-option{padding:.75rem 1rem;font-size:1rem}.rz-ms-checkbox{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;border-radius:.25rem;border:1px solid var(--rz-border);font-size:.625rem;flex-shrink:0;transition:all .15s;color:transparent}.rz-ms-checkbox.checked{background:var(--rz-accent);border-color:var(--rz-accent);color:#fff}.rz-ms-option-label{font-weight:500}.rz-ms-divider{height:1px;margin:0 .5rem;background:var(--rz-border)}.rz-ms-empty{padding:1rem .75rem;text-align:center;font-size:.875rem;color:var(--rz-muted)}.rz-ms-msg{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-ms-hint{color:var(--color-text-muted)}.rz-ms-error{color:var(--color-danger)}.rz-ms-fade-in{animation:rz-ms-in .2s ease}.rz-ms-fade-out{animation:rz-ms-out .15s ease forwards}.hint-enter{animation:rz-hint-in .2s ease-out}.error-enter{animation:rz-error-in .25s ease-out}.hint-leave{animation:rz-hint-out .15s ease-in forwards}.error-leave{animation:rz-error-out .2s ease-in forwards}@keyframes rz-ms-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes rz-ms-out{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}@keyframes rz-hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes rz-hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes rz-error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes rz-error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
831
834
  }
832
835
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: MultiSelectComponent, decorators: [{
833
836
  type: Component,
@@ -839,7 +842,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
839
842
  '[style.width]': '_width',
840
843
  '(window:scroll)': '_onWindowScroll()',
841
844
  }, 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"] }]
842
- }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], accentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentColor", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
845
+ }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], accentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentColor", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }] } });
843
846
 
844
847
  class PasswordInputComponent {
845
848
  value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
@@ -1790,7 +1793,7 @@ class TableComponent {
1790
1793
  }
1791
1794
  _trackByIndex(index) { return index; }
1792
1795
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1793
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TableComponent, isStandalone: true, selector: "app-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, skeletonRows: { classPropertyName: "skeletonRows", publicName: "skeletonRows", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, pageable: { classPropertyName: "pageable", publicName: "pageable", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionKey: { classPropertyName: "selectionKey", publicName: "selectionKey", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, exportable: { classPropertyName: "exportable", publicName: "exportable", isSignal: true, isRequired: false, transformFunction: null }, columnToggle: { classPropertyName: "columnToggle", publicName: "columnToggle", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", pageChange: "pageChange", selectedRows: "selectedRows" }, host: { listeners: { "document:mousemove": "_onDocMouseMove($event)", "document:mouseup": "_onDocMouseUp()", "document:click": "_onDocClick($event)" } }, queries: [{ propertyName: "rowDetail", first: true, predicate: ["rowDetail"], descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (loading()) {\n <app-table-skeleton [rows]=\"skeletonRows()\" [columns]=\"_skeletonCols()\" />\n} @else {\n <div class=\"rz-tbl-wrapper\"\n [style.width]=\"width() || '100%'\"\n [style.border]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <table class=\"rz-tbl\" style=\"table-layout:fixed\">\n <thead\n [style.position]=\"stickyHeader() ? 'sticky' : undefined\"\n [style.top]=\"stickyHeader() ? '0' : undefined\"\n [style.z-index]=\"stickyHeader() ? '2' : undefined\"\n >\n <tr>\n @if (selectable()) {\n <th class=\"rz-tbl-header-checkbox\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n >\n <input type=\"checkbox\" class=\"rz-tbl-checkbox\"\n [checked]=\"_isAllSelected()\"\n (change)=\"_toggleSelectAll()\"\n />\n </th>\n }\n @if (expandable()) {\n <th class=\"rz-tbl-header-checkbox\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n ></th>\n }\n @for (col of _displayColumns(); track col.key) {\n <th\n class=\"rz-tbl-header\"\n [style.text-align]=\"col.align || 'left'\"\n [style.width]=\"_colWidth(col)\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n [class.rz-tbl-sortable]=\"col.sortable && sortable()\"\n (click)=\"sortable() && col.sortable && _toggleSort(col.key)\"\n >\n {{ col.header }}\n @if (col.sortable && sortable()) {\n <i class=\"pi rz-tbl-sort-icon\" [class]=\"_sortIcon(col.key)\"></i>\n }\n @if (resizable()) {\n <div class=\"rz-tbl-resize-handle\"\n (mousedown)=\"_onResizeStart($event,col.key)\"\n ></div>\n }\n </th>\n }\n </tr>\n @if (searchable() || _filterCols().length || exportable()) {\n <tr>\n <td [attr.colspan]=\"_colCount()\"\n [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\"\n [style.border-bottom]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n [style.padding]=\"'8px 12px'\"\n [style.vertical-align]=\"'middle'\"\n >\n <div class=\"rz-tbl-toolbar\">\n @if (searchable()) {\n <app-search-input\n (valueChange)=\"_onSearch($event)\"\n placeholder=\"Search table...\"\n size=\"sm\"\n style=\"padding-bottom:0\"\n />\n }\n @for (col of _filterCols(); track col.key) {\n <app-drop-down\n [options]=\"col.filterOptions ?? []\"\n [placeholder]=\"'Filter ' + col.header\"\n size=\"sm\"\n [searchable]=\"true\"\n [config]=\"{ appendToParent: true }\"\n style=\"padding-bottom:0\"\n (valueChange)=\"_setFilter(col.key, $event)\"\n />\n }\n @if (columnToggle()) {\n <div data-col-toggle class=\"rz-tbl-col-toggle\">\n <button\n type=\"button\"\n (click)=\"_columnToggleOpen.set(!_columnToggleOpen())\"\n class=\"rz-tbl-toolbar-btn\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n ><i class=\"pi pi-list rz-tbl-icon\"></i> Columns</button>\n @if (_columnToggleOpen()) {\n <div class=\"rz-tbl-dropdown\"\n [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n >\n @for (col of columns(); track col.key) {\n <label class=\"rz-tbl-dropdown-label\">\n <input type=\"checkbox\"\n [checked]=\"_isColumnVisible(col.key)\"\n (change)=\"_toggleColumn(col.key)\"\n />\n {{ col.header }}\n </label>\n }\n </div>\n }\n </div>\n }\n @if (exportable()) {\n <div data-export-toggle class=\"rz-tbl-export-wrap\">\n <button\n type=\"button\"\n (click)=\"_exportOpen.set(!_exportOpen())\"\n class=\"rz-tbl-toolbar-btn\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n ><i class=\"pi pi-download rz-tbl-icon\"></i> Export</button>\n @if (_exportOpen()) {\n <div class=\"rz-tbl-export-dropdown\"\n [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n >\n @for (fmt of ['Excel', 'PDF']; track fmt) {\n <button\n type=\"button\"\n (click)=\"fmt === 'Excel' ? _exportExcel() : _exportPdf(); _exportOpen.set(false)\"\n class=\"rz-tbl-export-opt\"\n >{{ fmt }}</button>\n }\n </div>\n }\n </div>\n }\n </div>\n </td>\n </tr>\n }\n </thead>\n <tbody>\n @if (_displayRows().length === 0) {\n <tr>\n <td [attr.colspan]=\"_colCount()\" class=\"rz-tbl-empty\">{{ emptyMessage() }}</td>\n </tr>\n } @else {\n @for (row of _displayRows(); track _trackByIndex($index); let rowIndex = $index) {\n <tr\n class=\"rz-tbl-row\"\n [class.rz-tbl-row-hoverable]=\"hoverable()\"\n [style.background-color]=\"selectable() && _isSelected(row) ? 'color-mix(in srgb,var(--color-primary,oklch(0.32 0.09 258)) 8%,transparent)' : striped() && rowIndex % 2 === 1 ? 'var(--color-surface-alt,oklch(0.975 0.005 260))' : 'transparent'\"\n >\n @if (selectable()) {\n <td class=\"rz-tbl-cell-center\">\n <input type=\"checkbox\" class=\"rz-tbl-checkbox\"\n [checked]=\"_isSelected(row)\"\n (change)=\"_toggleSelect(row)\"\n />\n </td>\n }\n @if (expandable()) {\n <td class=\"rz-tbl-cell-center\">\n <button\n type=\"button\"\n (click)=\"_toggleExpand(rowIndex)\"\n class=\"rz-tbl-expand-btn\"\n >\n <i class=\"pi rz-tbl-icon\" [class.pi-chevron-down]=\"_isExpanded(rowIndex)\" [class.pi-chevron-right]=\"!_isExpanded(rowIndex)\"></i>\n </button>\n </td>\n }\n @for (col of _displayColumns(); track col.key; let colIndex = $index) {\n @let meta = _rowMeta()[rowIndex][colIndex];\n @if (meta.visible) {\n <td\n [attr.rowspan]=\"meta.rowspan > 1 ? meta.rowspan : null\"\n [style.text-align]=\"col.align || 'left'\"\n class=\"rz-tbl-cell\"\n >\n @if (col.actions) {\n <div class=\"rz-tbl-actions\">\n @for (action of col.actions; track $index) {\n @if (!action.visible || action.visible(row)) {\n <button\n type=\"button\"\n class=\"rz-tbl-action-btn\"\n [style.color]=\"action.accentColor ? 'var(--color-' + action.accentColor + ',oklch(0.32 0.09 258))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n [style.opacity]=\"action.disabled?.(row) ? '0.5' : '1'\"\n [disabled]=\"action.disabled?.(row) ?? false\"\n (click)=\"action.click(row)\"\n [title]=\"action.label || ''\"\n >\n @if (action.icon) { <i [class]=\"action.icon\" class=\"rz-tbl-icon\"></i> }\n @if (action.label) { <span>{{ action.label }}</span> }\n </button>\n }\n }\n </div>\n } @else {\n <app-tooltip position=\"top\" [text]=\"_cellText(row, col)\">\n {{ _cellLabel(row, col) }}\n </app-tooltip>\n }\n </td>\n }\n }\n </tr>\n @if (expandable() && _isExpanded(rowIndex)) {\n <tr class=\"rz-tbl-row\">\n <td [attr.colspan]=\"_colCount()\" [style.padding]=\"'0'\">\n <div [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\">\n @if (rowDetail) {\n <ng-container *ngTemplateOutlet=\"rowDetail; context: { $implicit: row }\" />\n } @else {\n <div class=\"rz-tbl-detail\">No detail template</div>\n }\n </div>\n </td>\n </tr>\n }\n }\n @if (_footerCols().length) {\n <tr class=\"rz-tbl-footer-row\"\n [style.border-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\"\n >\n <td [attr.colspan]=\"_colCount()\" class=\"rz-tbl-cell\"\n [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n >{{ _footerText() }}</td>\n </tr>\n }\n }\n </tbody>\n </table>\n @if (pageable() && _totalPages() > 1) {\n <div class=\"rz-tbl-paginator\">\n <div class=\"rz-tbl-page-info\">\n <span>{{ _pageInfo().from }}\u2013{{ _pageInfo().to }} of {{ _pageInfo().total }}</span>\n <app-drop-down\n [options]=\"_pageSizeOptions()\"\n [value]=\"'' + _pageSize()\"\n size=\"sm\"\n [config]=\"{ direction: 'up' }\"\n style=\"padding-bottom:0\"\n (valueChange)=\"_onPageSizeChange($event)\"\n />\n </div>\n <div class=\"rz-tbl-page-btns\">\n <button type=\"button\" (click)=\"_goToPage(1)\" [disabled]=\"_page() === 1\"\n class=\"rz-tbl-page-btn\"\n ><i class=\"pi pi-angle-double-left rz-tbl-page-icon\"></i></button>\n <button type=\"button\" (click)=\"_goToPage(_page() - 1)\" [disabled]=\"_page() === 1\"\n class=\"rz-tbl-page-btn\"\n ><i class=\"pi pi-angle-left rz-tbl-page-icon\"></i></button>\n @for (p of _visiblePages(); track p) {\n <button type=\"button\" (click)=\"_goToPage(p)\"\n class=\"rz-tbl-page-btn\"\n [style.background-color]=\"p === _page() ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n [style.color]=\"p === _page() ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >{{ p }}</button>\n }\n <button type=\"button\" (click)=\"_goToPage(_page() + 1)\" [disabled]=\"_page() === _totalPages()\"\n class=\"rz-tbl-page-btn\"\n ><i class=\"pi pi-angle-right rz-tbl-page-icon\"></i></button>\n <button type=\"button\" (click)=\"_goToPage(_totalPages())\" [disabled]=\"_page() === _totalPages()\"\n class=\"rz-tbl-page-btn\"\n ><i class=\"pi pi-angle-double-right rz-tbl-page-icon\"></i></button>\n </div>\n </div>\n }\n </div>\n}\n", styles: [":host{display:contents}.rz-tbl-wrapper{overflow-x:auto;position:relative;border-radius:var(--radius-md, .5rem)}.rz-tbl{width:100%;border-collapse:collapse}.rz-tbl-header{position:relative;padding:.625rem .75rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.rz-tbl-header-checkbox{padding:.625rem .75rem;font-size:.75rem;white-space:nowrap;text-align:center;width:40px}.rz-tbl-sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.rz-tbl-checkbox{cursor:pointer}.rz-tbl-sort-icon{margin-left:.375rem;font-size:.625rem;vertical-align:middle}.rz-tbl-resize-handle{position:absolute;inset-inline-end:2px;top:0;bottom:0;width:6px;cursor:col-resize;z-index:10;border-inline-end:2px solid var(--color-accent, oklch(.64 .2 50));opacity:.5;transition:opacity .15s}.rz-tbl-header:hover .rz-tbl-resize-handle{opacity:1}.rz-tbl-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:.375rem}.rz-tbl-toolbar-btn{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;font-size:.75rem;border-radius:var(--radius-md, .5rem);border:1px solid var(--color-border-light, oklch(.91 .01 260));cursor:pointer;color:var(--color-text, oklch(.14 .01 260));background:transparent;transition:opacity .2s}.rz-tbl-toolbar-btn:hover{opacity:.8}.rz-tbl-icon{font-size:.625rem}.rz-tbl-col-toggle{position:relative;margin-left:auto}.rz-tbl-export-wrap{position:relative}.rz-tbl-dropdown{position:absolute;top:100%;right:0;margin-top:.25rem;min-width:140px;padding:.375rem;border-radius:var(--radius-md, .5rem);box-shadow:0 4px 12px #0000001a;z-index:50;border:1px solid var(--color-border-light, oklch(.91 .01 260));background:var(--color-surface, oklch(.99 0 0))}.rz-tbl-dropdown-label{display:flex;align-items:center;gap:.5rem;padding:.375rem .5rem;font-size:.75rem;border-radius:var(--radius-sm, .25rem);cursor:pointer;white-space:nowrap;color:var(--color-text, oklch(.14 .01 260));transition:background-color .2s}.rz-tbl-dropdown-label:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-export-dropdown{position:absolute;top:100%;left:0;margin-top:.25rem;min-width:100px;padding:.25rem;border-radius:var(--radius-md, .5rem);box-shadow:0 4px 12px #0000001a;z-index:50;border:1px solid var(--color-border-light, oklch(.91 .01 260));background:var(--color-surface, oklch(.99 0 0))}.rz-tbl-export-opt{display:block;width:100%;text-align:left;padding:.375rem .5rem;font-size:.75rem;border-radius:var(--radius-sm, .25rem);cursor:pointer;border:none;background:transparent;color:var(--color-text, oklch(.14 .01 260));transition:background-color .2s}.rz-tbl-export-opt:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-empty{padding:2rem .75rem;text-align:center;font-size:.875rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-tbl-row{border-bottom:1px solid var(--color-border-light, oklch(.91 .01 260));transition:background-color .15s}.rz-tbl-row-hoverable:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-cell{padding:.625rem .75rem;font-size:.875rem;color:var(--color-text, oklch(.14 .01 260));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rz-tbl-cell-center{padding:.625rem .75rem;text-align:center}.rz-tbl-actions{display:flex;align-items:center;gap:.25rem}.rz-tbl-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:.25rem;padding:.25rem .5rem;font-size:.75rem;border-radius:var(--radius-md, .5rem);border:none;cursor:pointer;background:transparent;transition:opacity .15s}.rz-tbl-action-btn:disabled{cursor:not-allowed}.rz-tbl-expand-btn{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border:none;background:transparent;cursor:pointer;border-radius:var(--radius-sm, .25rem);color:var(--color-text-muted, oklch(.48 .01 260));transition:background-color .15s}.rz-tbl-expand-btn:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-detail{padding:.75rem;font-size:.875rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-tbl-footer-row{border-top:2px solid var(--color-primary, oklch(.32 .09 258));font-weight:500}.rz-tbl-paginator{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-top:1px solid var(--color-border-light, oklch(.91 .01 260));background:var(--color-surface, oklch(.99 0 0))}.rz-tbl-page-info{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-tbl-page-btns{display:flex;align-items:center;gap:.125rem}.rz-tbl-page-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;font-size:.75rem;border-radius:var(--radius-sm, .25rem);border:none;cursor:pointer;background:transparent;color:var(--color-text-muted, oklch(.48 .01 260));transition:background-color .15s,color .15s;font-weight:500}.rz-tbl-page-btn:disabled{opacity:.3;cursor:not-allowed}.rz-tbl-page-icon{font-size:.625rem}\n"], dependencies: [{ kind: "component", type: SearchInputComponent, selector: "app-search-input", inputs: ["value", "placeholder", "size", "disabled", "accentColor", "hint", "errorMessage", "error", "width"], outputs: ["valueChange"] }, { kind: "component", type: DropDownComponent, selector: "app-drop-down", inputs: ["value", "options", "placeholder", "size", "disabled", "accentColor", "searchable", "hint", "errorMessage", "error", "width", "config"], outputs: ["valueChange"] }, { kind: "component", type: TableSkeletonComponent, selector: "app-table-skeleton", inputs: ["rows", "columns"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TooltipComponent, selector: "app-tooltip", inputs: ["text", "position", "disabled", "alwaysShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1796
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TableComponent, isStandalone: true, selector: "app-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, skeletonRows: { classPropertyName: "skeletonRows", publicName: "skeletonRows", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, pageable: { classPropertyName: "pageable", publicName: "pageable", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionKey: { classPropertyName: "selectionKey", publicName: "selectionKey", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, exportable: { classPropertyName: "exportable", publicName: "exportable", isSignal: true, isRequired: false, transformFunction: null }, columnToggle: { classPropertyName: "columnToggle", publicName: "columnToggle", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", pageChange: "pageChange", selectedRows: "selectedRows" }, host: { listeners: { "document:mousemove": "_onDocMouseMove($event)", "document:mouseup": "_onDocMouseUp()", "document:click": "_onDocClick($event)" } }, queries: [{ propertyName: "rowDetail", first: true, predicate: ["rowDetail"], descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (loading()) {\n <app-table-skeleton [rows]=\"skeletonRows()\" [columns]=\"_skeletonCols()\" />\n} @else {\n <div class=\"rz-tbl-wrapper\"\n [style.width]=\"width() || '100%'\"\n [style.border]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <table class=\"rz-tbl\" style=\"table-layout:fixed\">\n <thead\n [style.position]=\"stickyHeader() ? 'sticky' : undefined\"\n [style.top]=\"stickyHeader() ? '0' : undefined\"\n [style.z-index]=\"stickyHeader() ? '2' : undefined\"\n >\n <tr>\n @if (selectable()) {\n <th class=\"rz-tbl-header-checkbox\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n >\n <input type=\"checkbox\" class=\"rz-tbl-checkbox\"\n [checked]=\"_isAllSelected()\"\n (change)=\"_toggleSelectAll()\"\n />\n </th>\n }\n @if (expandable()) {\n <th class=\"rz-tbl-header-checkbox\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n ></th>\n }\n @for (col of _displayColumns(); track col.key) {\n <th\n class=\"rz-tbl-header\"\n [style.text-align]=\"col.align || 'left'\"\n [style.width]=\"_colWidth(col)\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n [class.rz-tbl-sortable]=\"col.sortable && sortable()\"\n (click)=\"sortable() && col.sortable && _toggleSort(col.key)\"\n >\n {{ col.header }}\n @if (col.sortable && sortable()) {\n <i class=\"pi rz-tbl-sort-icon\" [class]=\"_sortIcon(col.key)\"></i>\n }\n @if (resizable()) {\n <div class=\"rz-tbl-resize-handle\"\n (mousedown)=\"_onResizeStart($event,col.key)\"\n ></div>\n }\n </th>\n }\n </tr>\n @if (searchable() || _filterCols().length || exportable()) {\n <tr>\n <td [attr.colspan]=\"_colCount()\"\n [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\"\n [style.border-bottom]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n [style.padding]=\"'8px 12px'\"\n [style.vertical-align]=\"'middle'\"\n >\n <div class=\"rz-tbl-toolbar\">\n @if (searchable()) {\n <app-search-input\n (valueChange)=\"_onSearch($event)\"\n placeholder=\"Search table...\"\n size=\"sm\"\n style=\"padding-bottom:0\"\n />\n }\n @for (col of _filterCols(); track col.key) {\n <app-drop-down\n [options]=\"col.filterOptions ?? []\"\n [placeholder]=\"'Filter ' + col.header\"\n size=\"sm\"\n [searchable]=\"true\"\n [config]=\"{ appendToParent: true }\"\n style=\"padding-bottom:0\"\n (valueChange)=\"_setFilter(col.key, $event)\"\n />\n }\n @if (columnToggle()) {\n <div data-col-toggle class=\"rz-tbl-col-toggle\">\n <button\n type=\"button\"\n (click)=\"_columnToggleOpen.set(!_columnToggleOpen())\"\n class=\"rz-tbl-toolbar-btn\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n ><i class=\"pi pi-list rz-tbl-icon\"></i> Columns</button>\n @if (_columnToggleOpen()) {\n <div class=\"rz-tbl-dropdown\"\n [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n >\n @for (col of columns(); track col.key) {\n <label class=\"rz-tbl-dropdown-label\">\n <input type=\"checkbox\"\n [checked]=\"_isColumnVisible(col.key)\"\n (change)=\"_toggleColumn(col.key)\"\n />\n {{ col.header }}\n </label>\n }\n </div>\n }\n </div>\n }\n @if (exportable()) {\n <div data-export-toggle class=\"rz-tbl-export-wrap\">\n <button\n type=\"button\"\n (click)=\"_exportOpen.set(!_exportOpen())\"\n class=\"rz-tbl-toolbar-btn\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n ><i class=\"pi pi-download rz-tbl-icon\"></i> Export</button>\n @if (_exportOpen()) {\n <div class=\"rz-tbl-export-dropdown\"\n [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n >\n @for (fmt of ['Excel', 'PDF']; track fmt) {\n <button\n type=\"button\"\n (click)=\"fmt === 'Excel' ? _exportExcel() : _exportPdf(); _exportOpen.set(false)\"\n class=\"rz-tbl-export-opt\"\n >{{ fmt }}</button>\n }\n </div>\n }\n </div>\n }\n </div>\n </td>\n </tr>\n }\n </thead>\n <tbody>\n @if (_displayRows().length === 0) {\n <tr>\n <td [attr.colspan]=\"_colCount()\" class=\"rz-tbl-empty\">{{ emptyMessage() }}</td>\n </tr>\n } @else {\n @for (row of _displayRows(); track _trackByIndex($index); let rowIndex = $index) {\n <tr\n class=\"rz-tbl-row\"\n [class.rz-tbl-row-hoverable]=\"hoverable()\"\n [style.background-color]=\"selectable() && _isSelected(row) ? 'color-mix(in srgb,var(--color-primary,oklch(0.32 0.09 258)) 8%,transparent)' : striped() && rowIndex % 2 === 1 ? 'var(--color-surface-alt,oklch(0.975 0.005 260))' : 'transparent'\"\n >\n @if (selectable()) {\n <td class=\"rz-tbl-cell-center\">\n <input type=\"checkbox\" class=\"rz-tbl-checkbox\"\n [checked]=\"_isSelected(row)\"\n (change)=\"_toggleSelect(row)\"\n />\n </td>\n }\n @if (expandable()) {\n <td class=\"rz-tbl-cell-center\">\n <button\n type=\"button\"\n (click)=\"_toggleExpand(rowIndex)\"\n class=\"rz-tbl-expand-btn\"\n >\n <i class=\"pi rz-tbl-icon\" [class.pi-chevron-down]=\"_isExpanded(rowIndex)\" [class.pi-chevron-right]=\"!_isExpanded(rowIndex)\"></i>\n </button>\n </td>\n }\n @for (col of _displayColumns(); track col.key; let colIndex = $index) {\n @let meta = _rowMeta()[rowIndex][colIndex];\n @if (meta.visible) {\n <td\n [attr.rowspan]=\"meta.rowspan > 1 ? meta.rowspan : null\"\n [style.text-align]=\"col.align || 'left'\"\n class=\"rz-tbl-cell\"\n >\n @if (col.actions) {\n <div class=\"rz-tbl-actions\">\n @for (action of col.actions; track $index) {\n @if (!action.visible || action.visible(row)) {\n <button\n type=\"button\"\n class=\"rz-tbl-action-btn\"\n [style.color]=\"action.accentColor ? 'var(--color-' + action.accentColor + ',oklch(0.32 0.09 258))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n [style.opacity]=\"action.disabled?.(row) ? '0.5' : '1'\"\n [disabled]=\"action.disabled?.(row) ?? false\"\n (click)=\"action.click(row)\"\n [title]=\"action.label || ''\"\n >\n @if (action.icon) { <i [class]=\"action.icon\" class=\"rz-tbl-icon\"></i> }\n @if (action.label) { <span>{{ action.label }}</span> }\n </button>\n }\n }\n </div>\n } @else {\n <app-tooltip position=\"top\" [text]=\"_cellText(row, col)\">\n {{ _cellLabel(row, col) }}\n </app-tooltip>\n }\n </td>\n }\n }\n </tr>\n @if (expandable() && _isExpanded(rowIndex)) {\n <tr class=\"rz-tbl-row\">\n <td [attr.colspan]=\"_colCount()\" [style.padding]=\"'0'\">\n <div [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\">\n @if (rowDetail) {\n <ng-container *ngTemplateOutlet=\"rowDetail; context: { $implicit: row }\" />\n } @else {\n <div class=\"rz-tbl-detail\">No detail template</div>\n }\n </div>\n </td>\n </tr>\n }\n }\n @if (_footerCols().length) {\n <tr class=\"rz-tbl-footer-row\"\n [style.border-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\"\n >\n <td [attr.colspan]=\"_colCount()\" class=\"rz-tbl-cell\"\n [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n >{{ _footerText() }}</td>\n </tr>\n }\n }\n </tbody>\n </table>\n @if (pageable() && _totalPages() > 1) {\n <div class=\"rz-tbl-paginator\">\n <div class=\"rz-tbl-page-info\">\n <span>{{ _pageInfo().from }}\u2013{{ _pageInfo().to }} of {{ _pageInfo().total }}</span>\n <app-drop-down\n [options]=\"_pageSizeOptions()\"\n [value]=\"'' + _pageSize()\"\n size=\"sm\"\n [config]=\"{ direction: 'up' }\"\n style=\"padding-bottom:0\"\n (valueChange)=\"_onPageSizeChange($event)\"\n />\n </div>\n <div class=\"rz-tbl-page-btns\">\n <button type=\"button\" (click)=\"_goToPage(1)\" [disabled]=\"_page() === 1\"\n class=\"rz-tbl-page-btn\"\n ><i class=\"pi pi-angle-double-left rz-tbl-page-icon\"></i></button>\n <button type=\"button\" (click)=\"_goToPage(_page() - 1)\" [disabled]=\"_page() === 1\"\n class=\"rz-tbl-page-btn\"\n ><i class=\"pi pi-angle-left rz-tbl-page-icon\"></i></button>\n @for (p of _visiblePages(); track p) {\n <button type=\"button\" (click)=\"_goToPage(p)\"\n class=\"rz-tbl-page-btn\"\n [style.background-color]=\"p === _page() ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n [style.color]=\"p === _page() ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >{{ p }}</button>\n }\n <button type=\"button\" (click)=\"_goToPage(_page() + 1)\" [disabled]=\"_page() === _totalPages()\"\n class=\"rz-tbl-page-btn\"\n ><i class=\"pi pi-angle-right rz-tbl-page-icon\"></i></button>\n <button type=\"button\" (click)=\"_goToPage(_totalPages())\" [disabled]=\"_page() === _totalPages()\"\n class=\"rz-tbl-page-btn\"\n ><i class=\"pi pi-angle-double-right rz-tbl-page-icon\"></i></button>\n </div>\n </div>\n }\n </div>\n}\n", styles: [":host{display:contents}.rz-tbl-wrapper{overflow-x:auto;position:relative;border-radius:var(--radius-md, .5rem)}.rz-tbl{width:100%;border-collapse:collapse}.rz-tbl-header{position:relative;padding:.625rem .75rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.rz-tbl-header-checkbox{padding:.625rem .75rem;font-size:.75rem;white-space:nowrap;text-align:center;width:40px}.rz-tbl-sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.rz-tbl-checkbox{cursor:pointer}.rz-tbl-sort-icon{margin-left:.375rem;font-size:.625rem;vertical-align:middle}.rz-tbl-resize-handle{position:absolute;inset-inline-end:2px;top:0;bottom:0;width:6px;cursor:col-resize;z-index:10;border-inline-end:2px solid var(--color-accent, oklch(.64 .2 50));opacity:.5;transition:opacity .15s}.rz-tbl-header:hover .rz-tbl-resize-handle{opacity:1}.rz-tbl-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:.375rem}.rz-tbl-toolbar-btn{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;font-size:.75rem;border-radius:var(--radius-md, .5rem);border:1px solid var(--color-border-light, oklch(.91 .01 260));cursor:pointer;color:var(--color-text, oklch(.14 .01 260));background:transparent;transition:opacity .2s}.rz-tbl-toolbar-btn:hover{opacity:.8}.rz-tbl-icon{font-size:.625rem}.rz-tbl-col-toggle{position:relative;margin-left:auto}.rz-tbl-export-wrap{position:relative}.rz-tbl-dropdown{position:absolute;top:100%;right:0;margin-top:.25rem;min-width:140px;padding:.375rem;border-radius:var(--radius-md, .5rem);box-shadow:0 4px 12px #0000001a;z-index:50;border:1px solid var(--color-border-light, oklch(.91 .01 260));background:var(--color-surface, oklch(.99 0 0))}.rz-tbl-dropdown-label{display:flex;align-items:center;gap:.5rem;padding:.375rem .5rem;font-size:.75rem;border-radius:var(--radius-sm, .25rem);cursor:pointer;white-space:nowrap;color:var(--color-text, oklch(.14 .01 260));transition:background-color .2s}.rz-tbl-dropdown-label:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-export-dropdown{position:absolute;top:100%;left:0;margin-top:.25rem;min-width:100px;padding:.25rem;border-radius:var(--radius-md, .5rem);box-shadow:0 4px 12px #0000001a;z-index:50;border:1px solid var(--color-border-light, oklch(.91 .01 260));background:var(--color-surface, oklch(.99 0 0))}.rz-tbl-export-opt{display:block;width:100%;text-align:left;padding:.375rem .5rem;font-size:.75rem;border-radius:var(--radius-sm, .25rem);cursor:pointer;border:none;background:transparent;color:var(--color-text, oklch(.14 .01 260));transition:background-color .2s}.rz-tbl-export-opt:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-empty{padding:2rem .75rem;text-align:center;font-size:.875rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-tbl-row{border-bottom:1px solid var(--color-border-light, oklch(.91 .01 260));transition:background-color .15s}.rz-tbl-row-hoverable:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-cell{padding:.625rem .75rem;font-size:.875rem;color:var(--color-text, oklch(.14 .01 260));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rz-tbl-cell-center{padding:.625rem .75rem;text-align:center}.rz-tbl-actions{display:flex;align-items:center;gap:.25rem}.rz-tbl-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:.25rem;padding:.25rem .5rem;font-size:.75rem;border-radius:var(--radius-md, .5rem);border:none;cursor:pointer;background:transparent;transition:opacity .15s}.rz-tbl-action-btn:disabled{cursor:not-allowed}.rz-tbl-expand-btn{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border:none;background:transparent;cursor:pointer;border-radius:var(--radius-sm, .25rem);color:var(--color-text-muted, oklch(.48 .01 260));transition:background-color .15s}.rz-tbl-expand-btn:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}.rz-tbl-detail{padding:.75rem;font-size:.875rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-tbl-footer-row{border-top:2px solid var(--color-primary, oklch(.32 .09 258));font-weight:500}.rz-tbl-paginator{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-top:1px solid var(--color-border-light, oklch(.91 .01 260));background:var(--color-surface, oklch(.99 0 0))}.rz-tbl-page-info{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--color-text-muted, oklch(.48 .01 260))}.rz-tbl-page-btns{display:flex;align-items:center;gap:.125rem}.rz-tbl-page-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;font-size:.75rem;border-radius:var(--radius-sm, .25rem);border:none;cursor:pointer;background:transparent;color:var(--color-text-muted, oklch(.48 .01 260));transition:background-color .15s,color .15s;font-weight:500}.rz-tbl-page-btn:disabled{opacity:.3;cursor:not-allowed}.rz-tbl-page-icon{font-size:.625rem}\n"], dependencies: [{ kind: "component", type: SearchInputComponent, selector: "app-search-input", inputs: ["value", "placeholder", "size", "disabled", "accentColor", "hint", "errorMessage", "error", "width"], outputs: ["valueChange"] }, { kind: "component", type: DropDownComponent, selector: "app-drop-down", inputs: ["value", "options", "placeholder", "size", "disabled", "accentColor", "searchable", "hint", "errorMessage", "error", "width", "config", "appendToBody"], outputs: ["valueChange"] }, { kind: "component", type: TableSkeletonComponent, selector: "app-table-skeleton", inputs: ["rows", "columns"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TooltipComponent, selector: "app-tooltip", inputs: ["text", "position", "disabled", "alwaysShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1794
1797
  }
1795
1798
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableComponent, decorators: [{
1796
1799
  type: Component,