ryzen-ui 0.2.12 → 0.2.13

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 +8 -3
  2. package/fesm2022/ryzen-ui.mjs.map +1 -1
  3. package/index.d.ts +3 -1
  4. package/package.json +1 -1
package/fesm2022/ryzen-ui.mjs CHANGED
@@ -82,6 +82,7 @@ class DatePickerComponent {
82
82
  format = input('dd/MM/yyyy', ...(ngDevMode ? [{ debugName: "format" }] : []));
83
83
  width = input('', ...(ngDevMode ? [{ debugName: "width" }] : []));
84
84
  headerBg = input('', ...(ngDevMode ? [{ debugName: "headerBg" }] : []));
85
+ headerTextColor = input('', ...(ngDevMode ? [{ debugName: "headerTextColor" }] : []));
85
86
  bodyBg = input('', ...(ngDevMode ? [{ debugName: "bodyBg" }] : []));
86
87
  dayTextColor = input('', ...(ngDevMode ? [{ debugName: "dayTextColor" }] : []));
87
88
  config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
@@ -105,6 +106,7 @@ class DatePickerComponent {
105
106
  }, ...(ngDevMode ? [{ debugName: "_accentColorValue" }] : []));
106
107
  _width = computed(() => this.width() || null, ...(ngDevMode ? [{ debugName: "_width" }] : []));
107
108
  _headerBg = computed(() => this.headerBg() || null, ...(ngDevMode ? [{ debugName: "_headerBg" }] : []));
109
+ _headerText = computed(() => this.headerTextColor() || null, ...(ngDevMode ? [{ debugName: "_headerText" }] : []));
108
110
  _bodyBg = computed(() => this.bodyBg() || null, ...(ngDevMode ? [{ debugName: "_bodyBg" }] : []));
109
111
  _dayTxt = computed(() => this.dayTextColor() || null, ...(ngDevMode ? [{ debugName: "_dayTxt" }] : []));
110
112
  _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : []));
@@ -257,6 +259,8 @@ class DatePickerComponent {
257
259
  panel.style.setProperty('--rz-accent', this._accentColorValue());
258
260
  if (this._headerBg())
259
261
  panel.style.setProperty('--rz-dp-header-bg', this._headerBg());
262
+ if (this._headerText())
263
+ panel.style.setProperty('--rz-dp-header-text', this._headerText());
260
264
  if (this._bodyBg())
261
265
  panel.style.setProperty('--rz-dp-body-bg', this._bodyBg());
262
266
  if (this._dayTxt())
@@ -371,7 +375,7 @@ class DatePickerComponent {
371
375
  this._close();
372
376
  }
373
377
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
374
- 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 }, headerBg: { classPropertyName: "headerBg", publicName: "headerBg", isSignal: true, isRequired: false, transformFunction: null }, bodyBg: { classPropertyName: "bodyBg", publicName: "bodyBg", isSignal: true, isRequired: false, transformFunction: null }, dayTextColor: { classPropertyName: "dayTextColor", publicName: "dayTextColor", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--rz-accent": "_accentColorValue", "style.--rz-dp-header-bg": "_headerBg", "style.--rz-dp-body-bg": "_bodyBg", "style.--rz-dp-text": "_dayTxt", "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(--rz-dp-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(--rz-dp-body-bg, 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;background:var(--rz-dp-header-bg, var(--color-primary, oklch(.32 .09 258)));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 });
378
+ 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 }, headerBg: { classPropertyName: "headerBg", publicName: "headerBg", isSignal: true, isRequired: false, transformFunction: null }, headerTextColor: { classPropertyName: "headerTextColor", publicName: "headerTextColor", isSignal: true, isRequired: false, transformFunction: null }, bodyBg: { classPropertyName: "bodyBg", publicName: "bodyBg", isSignal: true, isRequired: false, transformFunction: null }, dayTextColor: { classPropertyName: "dayTextColor", publicName: "dayTextColor", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--rz-accent": "_accentColorValue", "style.--rz-dp-header-bg": "_headerBg", "style.--rz-dp-header-text": "_headerText", "style.--rz-dp-body-bg": "_bodyBg", "style.--rz-dp-text": "_dayTxt", "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(--rz-dp-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(--rz-dp-body-bg, 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;background:var(--rz-dp-header-bg, var(--color-primary, oklch(.32 .09 258)));color:var(--rz-dp-header-text, white)}.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);background:var(--rz-dp-day-bg, var(--color-surface-alt, oklch(.975 .005 260)));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 });
375
379
  }
376
380
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DatePickerComponent, decorators: [{
377
381
  type: Component,
@@ -381,11 +385,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
381
385
  '[class.has-error]': 'error()',
382
386
  '[style.--rz-accent]': '_accentColorValue',
383
387
  '[style.--rz-dp-header-bg]': '_headerBg',
388
+ '[style.--rz-dp-header-text]': '_headerText',
384
389
  '[style.--rz-dp-body-bg]': '_bodyBg',
385
390
  '[style.--rz-dp-text]': '_dayTxt',
386
391
  '[style.width]': '_width',
387
- }, 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(--rz-dp-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(--rz-dp-body-bg, 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;background:var(--rz-dp-header-bg, var(--color-primary, oklch(.32 .09 258)));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"] }]
388
- }], 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 }] }], headerBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerBg", required: false }] }], bodyBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyBg", required: false }] }], dayTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayTextColor", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }] } });
392
+ }, 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(--rz-dp-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(--rz-dp-body-bg, 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;background:var(--rz-dp-header-bg, var(--color-primary, oklch(.32 .09 258)));color:var(--rz-dp-header-text, white)}.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);background:var(--rz-dp-day-bg, var(--color-surface-alt, oklch(.975 .005 260)));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"] }]
393
+ }], 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 }] }], headerBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerBg", required: false }] }], headerTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTextColor", required: false }] }], bodyBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyBg", required: false }] }], dayTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayTextColor", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }] } });
389
394
 
390
395
  class DropDownComponent {
391
396
  _elementRef = inject(ElementRef);