@ardium-ui/ui 5.0.0-alpha.2 → 5.0.0-alpha.4

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.
@@ -14,7 +14,7 @@ import { TakeChance } from 'take-chance';
14
14
  import * as i1 from '@angular/common';
15
15
  import { CommonModule, DatePipe, UpperCasePipe, DOCUMENT, DecimalPipe, AsyncPipe } from '@angular/common';
16
16
  import { AutofillMonitor, CdkAutofill } from '@angular/cdk/text-field';
17
- import { roundFromZero, roundToPrecision, roundToMultiple } from 'more-rounding';
17
+ import { roundToMultiple, roundFromZero, roundToPrecision } from 'more-rounding';
18
18
  import { keyToString } from 'key-display-names';
19
19
  import * as i4 from '@angular/cdk/a11y';
20
20
  import { A11yModule } from '@angular/cdk/a11y';
@@ -5641,6 +5641,7 @@ const _dateInputDefaults = {
5641
5641
  dropdownAppearance: DropdownPanelAppearance.Outlined,
5642
5642
  dropdownVariant: DropdownPanelVariant.Rounded,
5643
5643
  minMaxStrategy: ArdDateInputMinMaxStrategy.Adjust,
5644
+ startView: undefined,
5644
5645
  // calendar defaults
5645
5646
  activeView: ArdCalendarView.Days,
5646
5647
  activeYear: new Date().getFullYear(),
@@ -6639,7 +6640,6 @@ class YearsViewComponent {
6639
6640
  this.disabled = input.required();
6640
6641
  this.autoFocus = input.required();
6641
6642
  this._isUsingKeyboard = input.required();
6642
- this.activeYear = input.required();
6643
6643
  this.selectedDate = input.required();
6644
6644
  this.min = input.required();
6645
6645
  this.max = input.required();
@@ -6674,8 +6674,8 @@ class YearsViewComponent {
6674
6674
  const yearRangeStart = this.currentYearRangeStart();
6675
6675
  const yearRangeEnd = yearRangeStart + 23;
6676
6676
  const dateRange = {
6677
- low: new Date(yearRangeStart, 0, 1),
6678
- high: new Date(yearRangeEnd, 0, 1),
6677
+ low: new Date(yearRangeStart, 0, 2), // second day of month to prevent timezone issues
6678
+ high: new Date(yearRangeEnd, 0, 2),
6679
6679
  };
6680
6680
  const yearRange = {
6681
6681
  low: yearRangeStart,
@@ -6703,7 +6703,7 @@ class YearsViewComponent {
6703
6703
  });
6704
6704
  this.yearContext = computed(() => {
6705
6705
  return (year) => {
6706
- const date = new Date(year, 1, 1);
6706
+ const date = new Date(year, 1, 2); // second day of month to prevent timezone issues
6707
6707
  return {
6708
6708
  value: year,
6709
6709
  date,
@@ -6857,7 +6857,7 @@ class YearsViewComponent {
6857
6857
  this.triggerHighlightSameYearNextPage.emit(event.altKey);
6858
6858
  }
6859
6859
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YearsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6860
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: YearsViewComponent, isStandalone: false, selector: "ard-years-view", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: true, transformFunction: null }, _isUsingKeyboard: { classPropertyName: "_isUsingKeyboard", publicName: "_isUsingKeyboard", isSignal: true, isRequired: true, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, currentYearRangeStart: { classPropertyName: "currentYearRangeStart", publicName: "currentYearRangeStart", isSignal: true, isRequired: true, transformFunction: null }, highlightedYear: { classPropertyName: "highlightedYear", publicName: "highlightedYear", isSignal: true, isRequired: true, transformFunction: null }, yearsViewHeaderTemplate: { classPropertyName: "yearsViewHeaderTemplate", publicName: "yearsViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, yearTemplate: { classPropertyName: "yearTemplate", publicName: "yearTemplate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenMonthsView: "triggerOpenMonthsView", triggerOpenDaysView: "triggerOpenDaysView", focusEvent: "focus", blurEvent: "blur", triggerSelectYear: "triggerSelectYear", triggerChangeYearsViewPage: "triggerChangeYearsViewPage", triggerHighlightYear: "triggerHighlightYear", triggerHighlightNextYear: "triggerHighlightNextYear", triggerHighlightPreviousYear: "triggerHighlightPreviousYear", triggerHighlightFirstYear: "triggerHighlightFirstYear", triggerHighlightLastYear: "triggerHighlightLastYear", triggerHighlightSameYearPreviousPage: "triggerHighlightSameYearPreviousPage", triggerHighlightSameYearNextPage: "triggerHighlightSameYearNextPage" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-years-view\">\r\n @if (!readOnly()) {\r\n <div class=\"ard-calendar__top-toolbar\">\r\n <ng-template\r\n #defaultYearsViewHeaderTemplate\r\n let-dateRange=\"dateRange\"\r\n let-nextPage=\"nextPage\"\r\n let-prevPage=\"prevPage\"\r\n let-canGoToNextPage=\"canGoToNextPage\"\r\n let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n let-openDaysView=\"openDaysView\"\r\n >\r\n <div class=\"ard-calendar__calendar-header\">\r\n <ard-button\r\n class=\"ard-calendar__header-button\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n [tabIndex]=\"tabIndex()\"\r\n (click)=\"openDaysView()\"\r\n variant=\"pill\"\r\n >\r\n {{ dateRange.low | date: 'YYYY' }}\r\n &mdash;\r\n {{ dateRange.high | date: 'YYYY' }}\r\n <div class=\"ard-dropdown-arrow\"></div>\r\n </ard-button>\r\n <div class=\"ard-calendar-arrows\">\r\n <ard-icon-button\r\n size=\"small\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n (click)=\"prevPage()\"\r\n [tabIndex]=\"tabIndex()\"\r\n [disabled]=\"!canGoToPreviousPage\"\r\n >\r\n <ard-icon>chevron_left</ard-icon>\r\n </ard-icon-button>\r\n <ard-icon-button\r\n size=\"small\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n (click)=\"nextPage()\"\r\n [tabIndex]=\"tabIndex()\"\r\n [disabled]=\"!canGoToNextPage\"\r\n >\r\n <ard-icon>chevron_right</ard-icon>\r\n </ard-icon-button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"yearsViewHeaderTemplate() || defaultYearsViewHeaderTemplate\"\r\n [ngTemplateOutletContext]=\"yearsViewHeaderContext()\"\r\n />\r\n </div>\r\n }\r\n <div\r\n #focusableElement\r\n class=\"ard-calendar__simple-grid\"\r\n [tabindex]=\"tabIndex()\"\r\n [ariaLabel]=\"currentAriaLabel()\"\r\n (focus)=\"focusEvent.emit($event)\"\r\n (focus)=\"onYearGridFocus()\"\r\n (blur)=\"blurEvent.emit($event)\"\r\n (blur)=\"onYearGridBlur()\"\r\n (click)=\"onYearGridClick()\"\r\n (keydown)=\"onMainGridKeydown($event)\"\r\n role=\"grid\"\r\n >\r\n @for (year of yearsArray(); track year) {\r\n <div\r\n class=\"ard-calendar__entry\"\r\n [class.ard-calendar__entry-highlighted]=\"highlightedYear() === year.value\"\r\n [class.ard-calendar__entry-disabled]=\"year.disabled\"\r\n [class.ard-calendar__entry-selected]=\"isYearSelected(year.value)\"\r\n [class.ard-calendar-today]=\"isYearToday(year.value)\"\r\n (click)=\"onCalendarYearClick(year.value)\"\r\n (mousemove)=\"$event.stopPropagation()\"\r\n (mouseover)=\"onCalendarYearMouseover(year.value)\"\r\n role=\"gridcell\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"ard-calendar__entry-button\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-button-content\">\r\n <ng-template\r\n #defaultYearTemplate\r\n let-year\r\n >\r\n {{ year | date: 'YYYY' }}\r\n </ng-template>\r\n <ng-template\r\n [ngTemplateOutlet]=\"yearTemplate() || defaultYearTemplate\"\r\n [ngTemplateOutletContext]=\"yearContext()(year.value)\"\r\n />\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
6860
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: YearsViewComponent, isStandalone: false, selector: "ard-years-view", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: true, transformFunction: null }, _isUsingKeyboard: { classPropertyName: "_isUsingKeyboard", publicName: "_isUsingKeyboard", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, currentYearRangeStart: { classPropertyName: "currentYearRangeStart", publicName: "currentYearRangeStart", isSignal: true, isRequired: true, transformFunction: null }, highlightedYear: { classPropertyName: "highlightedYear", publicName: "highlightedYear", isSignal: true, isRequired: true, transformFunction: null }, yearsViewHeaderTemplate: { classPropertyName: "yearsViewHeaderTemplate", publicName: "yearsViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, yearTemplate: { classPropertyName: "yearTemplate", publicName: "yearTemplate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenMonthsView: "triggerOpenMonthsView", triggerOpenDaysView: "triggerOpenDaysView", focusEvent: "focus", blurEvent: "blur", triggerSelectYear: "triggerSelectYear", triggerChangeYearsViewPage: "triggerChangeYearsViewPage", triggerHighlightYear: "triggerHighlightYear", triggerHighlightNextYear: "triggerHighlightNextYear", triggerHighlightPreviousYear: "triggerHighlightPreviousYear", triggerHighlightFirstYear: "triggerHighlightFirstYear", triggerHighlightLastYear: "triggerHighlightLastYear", triggerHighlightSameYearPreviousPage: "triggerHighlightSameYearPreviousPage", triggerHighlightSameYearNextPage: "triggerHighlightSameYearNextPage" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-years-view\">\r\n @if (!readOnly()) {\r\n <div class=\"ard-calendar__top-toolbar\">\r\n <ng-template\r\n #defaultYearsViewHeaderTemplate\r\n let-dateRange=\"dateRange\"\r\n let-nextPage=\"nextPage\"\r\n let-prevPage=\"prevPage\"\r\n let-canGoToNextPage=\"canGoToNextPage\"\r\n let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n let-openDaysView=\"openDaysView\"\r\n >\r\n <div class=\"ard-calendar__calendar-header\">\r\n <ard-button\r\n class=\"ard-calendar__header-button\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n [tabIndex]=\"tabIndex()\"\r\n (click)=\"openDaysView()\"\r\n variant=\"pill\"\r\n >\r\n {{ dateRange.low | date: 'YYYY' }}\r\n &mdash;\r\n {{ dateRange.high | date: 'YYYY' }}\r\n <div class=\"ard-dropdown-arrow\"></div>\r\n </ard-button>\r\n <div class=\"ard-calendar-arrows\">\r\n <ard-icon-button\r\n size=\"small\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n (click)=\"prevPage()\"\r\n [tabIndex]=\"tabIndex()\"\r\n [disabled]=\"!canGoToPreviousPage\"\r\n >\r\n <ard-icon>chevron_left</ard-icon>\r\n </ard-icon-button>\r\n <ard-icon-button\r\n size=\"small\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n (click)=\"nextPage()\"\r\n [tabIndex]=\"tabIndex()\"\r\n [disabled]=\"!canGoToNextPage\"\r\n >\r\n <ard-icon>chevron_right</ard-icon>\r\n </ard-icon-button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"yearsViewHeaderTemplate() || defaultYearsViewHeaderTemplate\"\r\n [ngTemplateOutletContext]=\"yearsViewHeaderContext()\"\r\n />\r\n </div>\r\n }\r\n <div\r\n #focusableElement\r\n class=\"ard-calendar__simple-grid\"\r\n [tabindex]=\"tabIndex()\"\r\n [ariaLabel]=\"currentAriaLabel()\"\r\n (focus)=\"focusEvent.emit($event)\"\r\n (focus)=\"onYearGridFocus()\"\r\n (blur)=\"blurEvent.emit($event)\"\r\n (blur)=\"onYearGridBlur()\"\r\n (click)=\"onYearGridClick()\"\r\n (keydown)=\"onMainGridKeydown($event)\"\r\n role=\"grid\"\r\n >\r\n @for (year of yearsArray(); track year) {\r\n <div\r\n class=\"ard-calendar__entry\"\r\n [class.ard-calendar__entry-highlighted]=\"highlightedYear() === year.value\"\r\n [class.ard-calendar__entry-disabled]=\"year.disabled\"\r\n [class.ard-calendar__entry-selected]=\"isYearSelected(year.value)\"\r\n [class.ard-calendar-today]=\"isYearToday(year.value)\"\r\n (click)=\"onCalendarYearClick(year.value)\"\r\n (mousemove)=\"$event.stopPropagation()\"\r\n (mouseover)=\"onCalendarYearMouseover(year.value)\"\r\n role=\"gridcell\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"ard-calendar__entry-button\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\"\r\n >\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-button-content\">\r\n <ng-template\r\n #defaultYearTemplate\r\n let-year\r\n >\r\n {{ year | date: 'YYYY' }}\r\n </ng-template>\r\n <ng-template\r\n [ngTemplateOutlet]=\"yearTemplate() || defaultYearTemplate\"\r\n [ngTemplateOutletContext]=\"yearContext()(year.value)\"\r\n />\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
6861
6861
  }
6862
6862
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YearsViewComponent, decorators: [{
6863
6863
  type: Component,
@@ -6929,7 +6929,12 @@ class ArdiumCalendarComponent extends _FormFieldComponentBase {
6929
6929
  //! highlighting years
6930
6930
  this.__highlightedYear = signal(null);
6931
6931
  this.highlightedYear = this.__highlightedYear.asReadonly();
6932
- this.currentYearRangeStart = linkedSignal(() => this.TODAY().getFullYear() - (this.TODAY().getFullYear() % 4) - 8); // current year always in 3rd row
6932
+ this.currentYearRangeStart = linkedSignal(() => {
6933
+ const rangeStartForCurrentYear = this.TODAY().getFullYear() - (this.TODAY().getFullYear() % 4) - 8; // current year always in 3rd row
6934
+ const activeYear = this.activeYear();
6935
+ const offset = roundToMultiple(activeYear - rangeStartForCurrentYear + 1, 24, 'up') - 24; // check how many 24-year pages need to be turned
6936
+ return rangeStartForCurrentYear + offset;
6937
+ });
6933
6938
  //! internals
6934
6939
  this._isUsingKeyboard = signal(false);
6935
6940
  //! templates
@@ -7305,7 +7310,7 @@ class ArdiumCalendarComponent extends _FormFieldComponentBase {
7305
7310
  provide: ARD_FORM_FIELD_CONTROL,
7306
7311
  useExisting: ArdiumCalendarComponent,
7307
7312
  },
7308
- ], queries: [{ propertyName: "templateRepository", first: true, predicate: _CalendarTemplateRepositoryDirective, descendants: true, isSignal: true }, { propertyName: "yearsViewHeaderTemplate", first: true, predicate: ArdCalendarYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthsViewHeaderTemplate", first: true, predicate: ArdCalendarMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "daysViewHeaderTemplate", first: true, predicate: ArdCalendarDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "floatingMonthTemplate", first: true, predicate: ArdCalendarFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "yearTemplate", first: true, predicate: ArdCalendarYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthTemplate", first: true, predicate: ArdCalendarMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dayTemplate", first: true, predicate: ArdCalendarDayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "weekdayTemplate", first: true, predicate: ArdCalendarWeekdayTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"ard-calendar\"\r\n [ngClass]=\"ngClasses()\"\r\n>\r\n @switch (activeView()) {\r\n @case ('days') {\r\n <ard-days-view\r\n [tabIndex]=\"tabIndex()\"\r\n [readOnly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [autoFocus]=\"autoFocus()\"\r\n [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n [activeMonth]=\"activeMonth()\"\r\n [activeYear]=\"activeYear()\"\r\n [selectedDate]=\"selectedDate()\"\r\n [firstWeekday]=\"firstWeekday()\"\r\n [highlightedDay]=\"highlightedDay()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()?.template ?? templateRepository()?.daysViewHeaderTmp()?.template\"\r\n [floatingMonthTemplate]=\"floatingMonthTemplate()?.template ?? templateRepository()?.floatingMonthTmp()?.template\"\r\n [weekdayTemplate]=\"weekdayTemplate()?.template ?? templateRepository()?.weekdayTmp()?.template\"\r\n [dayTemplate]=\"dayTemplate()?.template ?? templateRepository()?.dayTmp()?.template\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n (triggerChangeMonth)=\"changeMonth($event)\"\r\n (triggerChangeYear)=\"changeYear($event)\"\r\n (triggerHighlightDay)=\"setHighlightedDay($event)\"\r\n (triggerHighlightFirstDay)=\"highlightFirstDay()\"\r\n (triggerHighlightLastDay)=\"highlightLastDay()\"\r\n (triggerHighlightNextDay)=\"highlightNextDay($event)\"\r\n (triggerHighlightPreviousDay)=\"highlightPreviousDay($event)\"\r\n (triggerHighlightSameDayNextPage)=\"$event ? highlightSameDayNextYear() : highlightSameDayNextMonth()\"\r\n (triggerHighlightSameDayPreviousPage)=\"$event ? highlightSameDayPreviousYear() : highlightSameDayPreviousMonth()\"\r\n (triggerSelectDay)=\"selectDay($event)\"\r\n />\r\n }\r\n @case ('months') {\r\n <ard-months-view\r\n [tabIndex]=\"tabIndex()\"\r\n [readOnly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [autoFocus]=\"autoFocus()\"\r\n [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n [color]=\"color()\"\r\n [activeMonth]=\"activeMonth()\"\r\n [activeYear]=\"activeYear()\"\r\n [selectedDate]=\"selectedDate()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [highlightedMonth]=\"highlightedMonth()\"\r\n [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n (triggeChangeYear)=\"changeYear($event)\"\r\n (triggerSelectMonth)=\"selectMonth($event)\"\r\n (triggerHighlightMonth)=\"setHighlightedMonth($event)\"\r\n (triggerHighlightFirstMonth)=\"highlightFirstMonth()\"\r\n (triggerHighlightLastMonth)=\"highlightLastMonth()\"\r\n (triggerHighlightNextMonth)=\"highlightNextMonth($event)\"\r\n (triggerHighlightPreviousMonth)=\"highlightPreviousMonth($event)\"\r\n (triggerHighlightSameMonthNextPage)=\"highlightSameMonthNextYear($event)\"\r\n (triggerHighlightSameMonthPreviousPage)=\"highlightSameMonthPreviousYear($event)\"\r\n />\r\n }\r\n @case ('years') {\r\n <ard-years-view\r\n [tabIndex]=\"tabIndex()\"\r\n [readOnly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [autoFocus]=\"autoFocus()\"\r\n [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n [highlightedYear]=\"highlightedYear()\"\r\n [currentYearRangeStart]=\"currentYearRangeStart()\"\r\n [activeYear]=\"activeYear()\"\r\n [selectedDate]=\"selectedDate()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n (triggerSelectYear)=\"selectYear($event)\"\r\n (triggerChangeYearsViewPage)=\"changeYearsViewPage($event)\"\r\n (triggerHighlightYear)=\"setHighlightedYear($event)\"\r\n (triggerHighlightFirstYear)=\"highlightFirstYear()\"\r\n (triggerHighlightLastYear)=\"highlightLastYear()\"\r\n (triggerHighlightNextYear)=\"highlightNextYear($event)\"\r\n (triggerHighlightPreviousYear)=\"highlightPreviousYear($event)\"\r\n (triggerHighlightSameYearNextPage)=\"highlightSameYearNextPage($event)\"\r\n (triggerHighlightSameYearPreviousPage)=\"highlightSameYearPreviousPage($event)\"\r\n />\r\n }\r\n }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DaysViewComponent, selector: "ard-days-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "activeYear", "activeMonth", "selectedDate", "min", "max", "isDayFilteredOut", "highlightedDay", "firstWeekday", "daysViewHeaderTemplate", "floatingMonthTemplate", "weekdayTemplate", "dayTemplate"], outputs: ["triggerOpenYearsView", "triggerOpenMonthsView", "triggerSelectDay", "triggerChangeMonth", "triggerChangeYear", "triggerHighlightDay", "triggerHighlightNextDay", "triggerHighlightPreviousDay", "triggerHighlightFirstDay", "triggerHighlightLastDay", "triggerHighlightSameDayPreviousPage", "triggerHighlightSameDayNextPage", "focus", "blur"] }, { kind: "component", type: MonthsViewComponent, selector: "ard-months-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "color", "activeYear", "activeMonth", "selectedDate", "min", "max", "highlightedMonth", "monthsViewHeaderTemplate", "monthTemplate"], outputs: ["triggerOpenYearsView", "triggerOpenDaysView", "focus", "blur", "triggerSelectMonth", "triggeChangeYear", "triggerHighlightMonth", "triggerHighlightNextMonth", "triggerHighlightPreviousMonth", "triggerHighlightFirstMonth", "triggerHighlightLastMonth", "triggerHighlightSameMonthPreviousPage", "triggerHighlightSameMonthNextPage"] }, { kind: "component", type: YearsViewComponent, selector: "ard-years-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "activeYear", "selectedDate", "min", "max", "currentYearRangeStart", "highlightedYear", "yearsViewHeaderTemplate", "yearTemplate"], outputs: ["triggerOpenMonthsView", "triggerOpenDaysView", "focus", "blur", "triggerSelectYear", "triggerChangeYearsViewPage", "triggerHighlightYear", "triggerHighlightNextYear", "triggerHighlightPreviousYear", "triggerHighlightFirstYear", "triggerHighlightLastYear", "triggerHighlightSameYearPreviousPage", "triggerHighlightSameYearNextPage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
7313
+ ], queries: [{ propertyName: "templateRepository", first: true, predicate: _CalendarTemplateRepositoryDirective, descendants: true, isSignal: true }, { propertyName: "yearsViewHeaderTemplate", first: true, predicate: ArdCalendarYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthsViewHeaderTemplate", first: true, predicate: ArdCalendarMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "daysViewHeaderTemplate", first: true, predicate: ArdCalendarDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "floatingMonthTemplate", first: true, predicate: ArdCalendarFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "yearTemplate", first: true, predicate: ArdCalendarYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthTemplate", first: true, predicate: ArdCalendarMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "dayTemplate", first: true, predicate: ArdCalendarDayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "weekdayTemplate", first: true, predicate: ArdCalendarWeekdayTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"ard-calendar\"\r\n [ngClass]=\"ngClasses()\"\r\n>\r\n @switch (activeView()) {\r\n @case ('days') {\r\n <ard-days-view\r\n [tabIndex]=\"tabIndex()\"\r\n [readOnly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [autoFocus]=\"autoFocus()\"\r\n [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n [activeMonth]=\"activeMonth()\"\r\n [activeYear]=\"activeYear()\"\r\n [selectedDate]=\"selectedDate()\"\r\n [firstWeekday]=\"firstWeekday()\"\r\n [highlightedDay]=\"highlightedDay()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()?.template ?? templateRepository()?.daysViewHeaderTmp()?.template\"\r\n [floatingMonthTemplate]=\"floatingMonthTemplate()?.template ?? templateRepository()?.floatingMonthTmp()?.template\"\r\n [weekdayTemplate]=\"weekdayTemplate()?.template ?? templateRepository()?.weekdayTmp()?.template\"\r\n [dayTemplate]=\"dayTemplate()?.template ?? templateRepository()?.dayTmp()?.template\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n (triggerChangeMonth)=\"changeMonth($event)\"\r\n (triggerChangeYear)=\"changeYear($event)\"\r\n (triggerHighlightDay)=\"setHighlightedDay($event)\"\r\n (triggerHighlightFirstDay)=\"highlightFirstDay()\"\r\n (triggerHighlightLastDay)=\"highlightLastDay()\"\r\n (triggerHighlightNextDay)=\"highlightNextDay($event)\"\r\n (triggerHighlightPreviousDay)=\"highlightPreviousDay($event)\"\r\n (triggerHighlightSameDayNextPage)=\"$event ? highlightSameDayNextYear() : highlightSameDayNextMonth()\"\r\n (triggerHighlightSameDayPreviousPage)=\"$event ? highlightSameDayPreviousYear() : highlightSameDayPreviousMonth()\"\r\n (triggerSelectDay)=\"selectDay($event)\"\r\n />\r\n }\r\n @case ('months') {\r\n <ard-months-view\r\n [tabIndex]=\"tabIndex()\"\r\n [readOnly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [autoFocus]=\"autoFocus()\"\r\n [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n [color]=\"color()\"\r\n [activeMonth]=\"activeMonth()\"\r\n [activeYear]=\"activeYear()\"\r\n [selectedDate]=\"selectedDate()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [highlightedMonth]=\"highlightedMonth()\"\r\n [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n (triggeChangeYear)=\"changeYear($event)\"\r\n (triggerSelectMonth)=\"selectMonth($event)\"\r\n (triggerHighlightMonth)=\"setHighlightedMonth($event)\"\r\n (triggerHighlightFirstMonth)=\"highlightFirstMonth()\"\r\n (triggerHighlightLastMonth)=\"highlightLastMonth()\"\r\n (triggerHighlightNextMonth)=\"highlightNextMonth($event)\"\r\n (triggerHighlightPreviousMonth)=\"highlightPreviousMonth($event)\"\r\n (triggerHighlightSameMonthNextPage)=\"highlightSameMonthNextYear($event)\"\r\n (triggerHighlightSameMonthPreviousPage)=\"highlightSameMonthPreviousYear($event)\"\r\n />\r\n }\r\n @case ('years') {\r\n <ard-years-view\r\n [tabIndex]=\"tabIndex()\"\r\n [readOnly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [autoFocus]=\"autoFocus()\"\r\n [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n [highlightedYear]=\"highlightedYear()\"\r\n [currentYearRangeStart]=\"currentYearRangeStart()\"\r\n [selectedDate]=\"selectedDate()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n (triggerSelectYear)=\"selectYear($event)\"\r\n (triggerChangeYearsViewPage)=\"changeYearsViewPage($event)\"\r\n (triggerHighlightYear)=\"setHighlightedYear($event)\"\r\n (triggerHighlightFirstYear)=\"highlightFirstYear()\"\r\n (triggerHighlightLastYear)=\"highlightLastYear()\"\r\n (triggerHighlightNextYear)=\"highlightNextYear($event)\"\r\n (triggerHighlightPreviousYear)=\"highlightPreviousYear($event)\"\r\n (triggerHighlightSameYearNextPage)=\"highlightSameYearNextPage($event)\"\r\n (triggerHighlightSameYearPreviousPage)=\"highlightSameYearPreviousPage($event)\"\r\n />\r\n }\r\n }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DaysViewComponent, selector: "ard-days-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "activeYear", "activeMonth", "selectedDate", "min", "max", "isDayFilteredOut", "highlightedDay", "firstWeekday", "daysViewHeaderTemplate", "floatingMonthTemplate", "weekdayTemplate", "dayTemplate"], outputs: ["triggerOpenYearsView", "triggerOpenMonthsView", "triggerSelectDay", "triggerChangeMonth", "triggerChangeYear", "triggerHighlightDay", "triggerHighlightNextDay", "triggerHighlightPreviousDay", "triggerHighlightFirstDay", "triggerHighlightLastDay", "triggerHighlightSameDayPreviousPage", "triggerHighlightSameDayNextPage", "focus", "blur"] }, { kind: "component", type: MonthsViewComponent, selector: "ard-months-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "color", "activeYear", "activeMonth", "selectedDate", "min", "max", "highlightedMonth", "monthsViewHeaderTemplate", "monthTemplate"], outputs: ["triggerOpenYearsView", "triggerOpenDaysView", "focus", "blur", "triggerSelectMonth", "triggeChangeYear", "triggerHighlightMonth", "triggerHighlightNextMonth", "triggerHighlightPreviousMonth", "triggerHighlightFirstMonth", "triggerHighlightLastMonth", "triggerHighlightSameMonthPreviousPage", "triggerHighlightSameMonthNextPage"] }, { kind: "component", type: YearsViewComponent, selector: "ard-years-view", inputs: ["tabIndex", "readOnly", "disabled", "autoFocus", "_isUsingKeyboard", "selectedDate", "min", "max", "currentYearRangeStart", "highlightedYear", "yearsViewHeaderTemplate", "yearTemplate"], outputs: ["triggerOpenMonthsView", "triggerOpenDaysView", "focus", "blur", "triggerSelectYear", "triggerChangeYearsViewPage", "triggerHighlightYear", "triggerHighlightNextYear", "triggerHighlightPreviousYear", "triggerHighlightFirstYear", "triggerHighlightLastYear", "triggerHighlightSameYearPreviousPage", "triggerHighlightSameYearNextPage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
7309
7314
  }
7310
7315
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumCalendarComponent, decorators: [{
7311
7316
  type: Component,
@@ -7319,7 +7324,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
7319
7324
  provide: ARD_FORM_FIELD_CONTROL,
7320
7325
  useExisting: ArdiumCalendarComponent,
7321
7326
  },
7322
- ], template: "<div\r\n class=\"ard-calendar\"\r\n [ngClass]=\"ngClasses()\"\r\n>\r\n @switch (activeView()) {\r\n @case ('days') {\r\n <ard-days-view\r\n [tabIndex]=\"tabIndex()\"\r\n [readOnly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [autoFocus]=\"autoFocus()\"\r\n [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n [activeMonth]=\"activeMonth()\"\r\n [activeYear]=\"activeYear()\"\r\n [selectedDate]=\"selectedDate()\"\r\n [firstWeekday]=\"firstWeekday()\"\r\n [highlightedDay]=\"highlightedDay()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()?.template ?? templateRepository()?.daysViewHeaderTmp()?.template\"\r\n [floatingMonthTemplate]=\"floatingMonthTemplate()?.template ?? templateRepository()?.floatingMonthTmp()?.template\"\r\n [weekdayTemplate]=\"weekdayTemplate()?.template ?? templateRepository()?.weekdayTmp()?.template\"\r\n [dayTemplate]=\"dayTemplate()?.template ?? templateRepository()?.dayTmp()?.template\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n (triggerChangeMonth)=\"changeMonth($event)\"\r\n (triggerChangeYear)=\"changeYear($event)\"\r\n (triggerHighlightDay)=\"setHighlightedDay($event)\"\r\n (triggerHighlightFirstDay)=\"highlightFirstDay()\"\r\n (triggerHighlightLastDay)=\"highlightLastDay()\"\r\n (triggerHighlightNextDay)=\"highlightNextDay($event)\"\r\n (triggerHighlightPreviousDay)=\"highlightPreviousDay($event)\"\r\n (triggerHighlightSameDayNextPage)=\"$event ? highlightSameDayNextYear() : highlightSameDayNextMonth()\"\r\n (triggerHighlightSameDayPreviousPage)=\"$event ? highlightSameDayPreviousYear() : highlightSameDayPreviousMonth()\"\r\n (triggerSelectDay)=\"selectDay($event)\"\r\n />\r\n }\r\n @case ('months') {\r\n <ard-months-view\r\n [tabIndex]=\"tabIndex()\"\r\n [readOnly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [autoFocus]=\"autoFocus()\"\r\n [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n [color]=\"color()\"\r\n [activeMonth]=\"activeMonth()\"\r\n [activeYear]=\"activeYear()\"\r\n [selectedDate]=\"selectedDate()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [highlightedMonth]=\"highlightedMonth()\"\r\n [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n (triggeChangeYear)=\"changeYear($event)\"\r\n (triggerSelectMonth)=\"selectMonth($event)\"\r\n (triggerHighlightMonth)=\"setHighlightedMonth($event)\"\r\n (triggerHighlightFirstMonth)=\"highlightFirstMonth()\"\r\n (triggerHighlightLastMonth)=\"highlightLastMonth()\"\r\n (triggerHighlightNextMonth)=\"highlightNextMonth($event)\"\r\n (triggerHighlightPreviousMonth)=\"highlightPreviousMonth($event)\"\r\n (triggerHighlightSameMonthNextPage)=\"highlightSameMonthNextYear($event)\"\r\n (triggerHighlightSameMonthPreviousPage)=\"highlightSameMonthPreviousYear($event)\"\r\n />\r\n }\r\n @case ('years') {\r\n <ard-years-view\r\n [tabIndex]=\"tabIndex()\"\r\n [readOnly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [autoFocus]=\"autoFocus()\"\r\n [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n [highlightedYear]=\"highlightedYear()\"\r\n [currentYearRangeStart]=\"currentYearRangeStart()\"\r\n [activeYear]=\"activeYear()\"\r\n [selectedDate]=\"selectedDate()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n (triggerSelectYear)=\"selectYear($event)\"\r\n (triggerChangeYearsViewPage)=\"changeYearsViewPage($event)\"\r\n (triggerHighlightYear)=\"setHighlightedYear($event)\"\r\n (triggerHighlightFirstYear)=\"highlightFirstYear()\"\r\n (triggerHighlightLastYear)=\"highlightLastYear()\"\r\n (triggerHighlightNextYear)=\"highlightNextYear($event)\"\r\n (triggerHighlightPreviousYear)=\"highlightPreviousYear($event)\"\r\n (triggerHighlightSameYearNextPage)=\"highlightSameYearNextPage($event)\"\r\n (triggerHighlightSameYearPreviousPage)=\"highlightSameYearPreviousPage($event)\"\r\n />\r\n }\r\n }\r\n</div>\r\n" }]
7327
+ ], template: "<div\r\n class=\"ard-calendar\"\r\n [ngClass]=\"ngClasses()\"\r\n>\r\n @switch (activeView()) {\r\n @case ('days') {\r\n <ard-days-view\r\n [tabIndex]=\"tabIndex()\"\r\n [readOnly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [autoFocus]=\"autoFocus()\"\r\n [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n [activeMonth]=\"activeMonth()\"\r\n [activeYear]=\"activeYear()\"\r\n [selectedDate]=\"selectedDate()\"\r\n [firstWeekday]=\"firstWeekday()\"\r\n [highlightedDay]=\"highlightedDay()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [isDayFilteredOut]=\"isDayFilteredOut()\"\r\n [daysViewHeaderTemplate]=\"daysViewHeaderTemplate()?.template ?? templateRepository()?.daysViewHeaderTmp()?.template\"\r\n [floatingMonthTemplate]=\"floatingMonthTemplate()?.template ?? templateRepository()?.floatingMonthTmp()?.template\"\r\n [weekdayTemplate]=\"weekdayTemplate()?.template ?? templateRepository()?.weekdayTmp()?.template\"\r\n [dayTemplate]=\"dayTemplate()?.template ?? templateRepository()?.dayTmp()?.template\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n (triggerChangeMonth)=\"changeMonth($event)\"\r\n (triggerChangeYear)=\"changeYear($event)\"\r\n (triggerHighlightDay)=\"setHighlightedDay($event)\"\r\n (triggerHighlightFirstDay)=\"highlightFirstDay()\"\r\n (triggerHighlightLastDay)=\"highlightLastDay()\"\r\n (triggerHighlightNextDay)=\"highlightNextDay($event)\"\r\n (triggerHighlightPreviousDay)=\"highlightPreviousDay($event)\"\r\n (triggerHighlightSameDayNextPage)=\"$event ? highlightSameDayNextYear() : highlightSameDayNextMonth()\"\r\n (triggerHighlightSameDayPreviousPage)=\"$event ? highlightSameDayPreviousYear() : highlightSameDayPreviousMonth()\"\r\n (triggerSelectDay)=\"selectDay($event)\"\r\n />\r\n }\r\n @case ('months') {\r\n <ard-months-view\r\n [tabIndex]=\"tabIndex()\"\r\n [readOnly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [autoFocus]=\"autoFocus()\"\r\n [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n [color]=\"color()\"\r\n [activeMonth]=\"activeMonth()\"\r\n [activeYear]=\"activeYear()\"\r\n [selectedDate]=\"selectedDate()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [highlightedMonth]=\"highlightedMonth()\"\r\n [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n (triggerOpenYearsView)=\"onTriggerOpenYearsView()\"\r\n (triggeChangeYear)=\"changeYear($event)\"\r\n (triggerSelectMonth)=\"selectMonth($event)\"\r\n (triggerHighlightMonth)=\"setHighlightedMonth($event)\"\r\n (triggerHighlightFirstMonth)=\"highlightFirstMonth()\"\r\n (triggerHighlightLastMonth)=\"highlightLastMonth()\"\r\n (triggerHighlightNextMonth)=\"highlightNextMonth($event)\"\r\n (triggerHighlightPreviousMonth)=\"highlightPreviousMonth($event)\"\r\n (triggerHighlightSameMonthNextPage)=\"highlightSameMonthNextYear($event)\"\r\n (triggerHighlightSameMonthPreviousPage)=\"highlightSameMonthPreviousYear($event)\"\r\n />\r\n }\r\n @case ('years') {\r\n <ard-years-view\r\n [tabIndex]=\"tabIndex()\"\r\n [readOnly]=\"readonly()\"\r\n [disabled]=\"disabled()\"\r\n [autoFocus]=\"autoFocus()\"\r\n [_isUsingKeyboard]=\"_isUsingKeyboard()\"\r\n [highlightedYear]=\"highlightedYear()\"\r\n [currentYearRangeStart]=\"currentYearRangeStart()\"\r\n [selectedDate]=\"selectedDate()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n (triggerOpenDaysView)=\"onTriggerOpenDaysView()\"\r\n (triggerOpenMonthsView)=\"onTriggerOpenMonthsView()\"\r\n (triggerSelectYear)=\"selectYear($event)\"\r\n (triggerChangeYearsViewPage)=\"changeYearsViewPage($event)\"\r\n (triggerHighlightYear)=\"setHighlightedYear($event)\"\r\n (triggerHighlightFirstYear)=\"highlightFirstYear()\"\r\n (triggerHighlightLastYear)=\"highlightLastYear()\"\r\n (triggerHighlightNextYear)=\"highlightNextYear($event)\"\r\n (triggerHighlightPreviousYear)=\"highlightPreviousYear($event)\"\r\n (triggerHighlightSameYearNextPage)=\"highlightSameYearNextPage($event)\"\r\n (triggerHighlightSameYearPreviousPage)=\"highlightSameYearPreviousPage($event)\"\r\n />\r\n }\r\n }\r\n</div>\r\n" }]
7323
7328
  }], ctorParameters: () => [{ type: undefined, decorators: [{
7324
7329
  type: Inject,
7325
7330
  args: [ARD_CALENDAR_DEFAULTS]
@@ -7403,6 +7408,7 @@ class ArdiumDateInputComponent extends _FormFieldComponentBase {
7403
7408
  });
7404
7409
  //! calendar attributes
7405
7410
  this.activeView = model(this._DEFAULTS.activeView);
7411
+ this.startView = input(this._DEFAULTS.startView);
7406
7412
  this.activeYear = model(this._DEFAULTS.activeYear);
7407
7413
  this.activeMonth = model(this._DEFAULTS.activeMonth);
7408
7414
  this.firstWeekday = input(this._DEFAULTS.firstWeekday, {
@@ -7467,11 +7473,19 @@ class ArdiumDateInputComponent extends _FormFieldComponentBase {
7467
7473
  cancel: () => this.onCancelButtonClick(),
7468
7474
  disabled: this.disabled() || this.calendarDisabled(),
7469
7475
  }));
7476
+ // emit value whenever it changes
7470
7477
  effect(() => {
7471
7478
  this.value();
7472
7479
  this._emitChange();
7473
7480
  this._serializeValueIntoDateInput();
7474
- }, { allowSignalWrites: true });
7481
+ });
7482
+ // set active view when start view is defined
7483
+ effect(() => {
7484
+ const startView = this.startView();
7485
+ if (startView && this.isOpen()) {
7486
+ this.activeView.set(startView);
7487
+ }
7488
+ });
7475
7489
  }
7476
7490
  writeValue(v) {
7477
7491
  if (v instanceof Date) {
@@ -7669,7 +7683,7 @@ class ArdiumDateInputComponent extends _FormFieldComponentBase {
7669
7683
  this.closeEvent.emit();
7670
7684
  }
7671
7685
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDateInputComponent, deps: [{ token: ARD_DATE_INPUT_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
7672
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumDateInputComponent, isStandalone: false, selector: "ard-date-input", inputs: { inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputReadOnly: { classPropertyName: "inputReadOnly", publicName: "inputReadOnly", isSignal: true, isRequired: false, transformFunction: null }, calendarDisabled: { classPropertyName: "calendarDisabled", publicName: "calendarDisabled", isSignal: true, isRequired: false, transformFunction: null }, calendarHidden: { classPropertyName: "calendarHidden", publicName: "calendarHidden", isSignal: true, isRequired: false, transformFunction: null }, serializeFn: { classPropertyName: "serializeFn", publicName: "serializeFn", isSignal: true, isRequired: false, transformFunction: null }, deserializeFn: { classPropertyName: "deserializeFn", publicName: "deserializeFn", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, dateInputValue: { classPropertyName: "dateInputValue", publicName: "dateInputValue", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, minMaxStrategy: { classPropertyName: "minMaxStrategy", publicName: "minMaxStrategy", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, dropdownAppearance: { classPropertyName: "dropdownAppearance", publicName: "dropdownAppearance", isSignal: true, isRequired: false, transformFunction: null }, dropdownVariant: { classPropertyName: "dropdownVariant", publicName: "dropdownVariant", isSignal: true, isRequired: false, transformFunction: null }, activeView: { classPropertyName: "activeView", publicName: "activeView", isSignal: true, isRequired: false, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: false, transformFunction: null }, activeMonth: { classPropertyName: "activeMonth", publicName: "activeMonth", isSignal: true, isRequired: false, transformFunction: null }, firstWeekday: { classPropertyName: "firstWeekday", publicName: "firstWeekday", isSignal: true, isRequired: false, transformFunction: null }, multipleYearPageChangeModifier: { classPropertyName: "multipleYearPageChangeModifier", publicName: "multipleYearPageChangeModifier", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, useAcceptButtonToSelect: { classPropertyName: "useAcceptButtonToSelect", publicName: "useAcceptButtonToSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", dateInputValue: "dateInputValueChange", isOpen: "isOpenChange", openEvent: "open", closeEvent: "close", activeView: "activeViewChange", activeYear: "activeYearChange", activeMonth: "activeMonthChange", yearSelect: "yearSelect", monthSelect: "monthSelect" }, providers: [
7686
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumDateInputComponent, isStandalone: false, selector: "ard-date-input", inputs: { inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputReadOnly: { classPropertyName: "inputReadOnly", publicName: "inputReadOnly", isSignal: true, isRequired: false, transformFunction: null }, calendarDisabled: { classPropertyName: "calendarDisabled", publicName: "calendarDisabled", isSignal: true, isRequired: false, transformFunction: null }, calendarHidden: { classPropertyName: "calendarHidden", publicName: "calendarHidden", isSignal: true, isRequired: false, transformFunction: null }, serializeFn: { classPropertyName: "serializeFn", publicName: "serializeFn", isSignal: true, isRequired: false, transformFunction: null }, deserializeFn: { classPropertyName: "deserializeFn", publicName: "deserializeFn", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, dateInputValue: { classPropertyName: "dateInputValue", publicName: "dateInputValue", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, minMaxStrategy: { classPropertyName: "minMaxStrategy", publicName: "minMaxStrategy", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, dropdownAppearance: { classPropertyName: "dropdownAppearance", publicName: "dropdownAppearance", isSignal: true, isRequired: false, transformFunction: null }, dropdownVariant: { classPropertyName: "dropdownVariant", publicName: "dropdownVariant", isSignal: true, isRequired: false, transformFunction: null }, activeView: { classPropertyName: "activeView", publicName: "activeView", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: false, transformFunction: null }, activeMonth: { classPropertyName: "activeMonth", publicName: "activeMonth", isSignal: true, isRequired: false, transformFunction: null }, firstWeekday: { classPropertyName: "firstWeekday", publicName: "firstWeekday", isSignal: true, isRequired: false, transformFunction: null }, multipleYearPageChangeModifier: { classPropertyName: "multipleYearPageChangeModifier", publicName: "multipleYearPageChangeModifier", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, useAcceptButtonToSelect: { classPropertyName: "useAcceptButtonToSelect", publicName: "useAcceptButtonToSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", dateInputValue: "dateInputValueChange", isOpen: "isOpenChange", openEvent: "open", closeEvent: "close", activeView: "activeViewChange", activeYear: "activeYearChange", activeMonth: "activeMonthChange", yearSelect: "yearSelect", monthSelect: "monthSelect" }, providers: [
7673
7687
  {
7674
7688
  provide: NG_VALUE_ACCESSOR,
7675
7689
  useExisting: forwardRef(() => ArdiumDateInputComponent),
@@ -7679,7 +7693,7 @@ class ArdiumDateInputComponent extends _FormFieldComponentBase {
7679
7693
  provide: ARD_FORM_FIELD_CONTROL,
7680
7694
  useExisting: ArdiumDateInputComponent,
7681
7695
  },
7682
- ], queries: [{ propertyName: "valueTemplate", first: true, predicate: ArdDateInputValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarIconTemplate", first: true, predicate: ArdDateInputCalendarIconTemplateDirective, descendants: true, isSignal: true }, { propertyName: "acceptButtonsTemplate", first: true, predicate: ArdDateInputAcceptButtonsTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdDateInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdDateInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdDateInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdDateInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdDateInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdDateInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdDateInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdDateInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdDateInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdDateInputDayTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "dropdownHost", first: true, predicate: ["dropdownHost"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ArdiumDropdownPanelComponent, descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-date-input\"\r\n #dropdownHost\r\n (click)=\"onGeneralClick($event)\"\r\n [class.ard-has-value]=\"!!value()\"\r\n [ngClass]=\"ngClasses()\"\r\n >\r\n <div class=\"ard-date-input__value-container ard-input-container\">\r\n <div\r\n class=\"ard-date-input__placeholder ard-placeholder\"\r\n [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n >\r\n {{ placeholder() }}\r\n </div>\r\n <div\r\n class=\"ard-date-input__value\"\r\n [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n >\r\n <ng-template\r\n #defaultValueTemplate\r\n let-date\r\n >\r\n {{ serializeFn()(date) }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n [ngTemplateOutletContext]=\"valueContext()\"\r\n />\r\n </div>\r\n <div\r\n class=\"ard-date-input__input-container\"\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n [class.ard-date-input__input-container-hidden]=\"!shouldDisplayDateInput()\"\r\n >\r\n <input\r\n #dateInput\r\n #focusableElement\r\n type=\"text\"\r\n class=\"ard-date-input__input\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [value]=\"dateInputValue()\"\r\n [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n (input)=\"onDateInputInput($event)\"\r\n (change)=\"$event.stopPropagation()\"\r\n (focus)=\"onDateInputFocus($event)\"\r\n (blur)=\"onDateInputBlur($event)\"\r\n (keydown)=\"onDateInputEnter($event)\"\r\n />\r\n </div>\r\n </div>\r\n\r\n @if (!calendarHidden()) {\r\n <ard-icon-button\r\n color=\"none\"\r\n [disabled]=\"calendarDisabled()\"\r\n (click)=\"onCalendarButtonClick($event)\"\r\n >\r\n <ng-template\r\n #defaultCalendarIconTemplate\r\n let-date\r\n >\r\n <ard-icon filled>today</ard-icon>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n </ard-icon-button>\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n <ard-dropdown-panel\r\n class=\"ard-dropdown-panel ard-date-input__dropdown-panel\"\r\n [appearance]=\"dropdownAppearanceOrDefault()\"\r\n [variant]=\"dropdownVariantOrDefault()\"\r\n [isOpen]=\"true\"\r\n [panelId]=\"htmlId()\"\r\n [compact]=\"compact()\"\r\n (ardClickOutside)=\"onOutsideClick($event)\"\r\n >\r\n <ard-calendar\r\n class=\"ard-date-input__calendar\"\r\n [(activeMonth)]=\"activeMonth\"\r\n [(activeYear)]=\"activeYear\"\r\n [(activeView)]=\"activeView\"\r\n [firstWeekday]=\"firstWeekday()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [UTC]=\"_UTCAfterInit()\"\r\n autoFocus\r\n [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n [color]=\"color()\"\r\n [disabled]=\"disabled() || calendarDisabled()\"\r\n [tabIndex]=\"tabIndex()\"\r\n (selectedChange)=\"onCalendarSelectedChange($event)\"\r\n (yearSelect)=\"yearSelect.emit($event)\"\r\n (monthSelect)=\"monthSelect.emit($event)\"\r\n >\r\n <ng-template\r\n _ard-tmp-repository\r\n [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n [yearTmp]=\"calendarYearTemplate()\"\r\n [monthTmp]=\"calendarMonthTemplate()\"\r\n [dayTmp]=\"calendarDayTemplate()\"\r\n />\r\n </ard-calendar>\r\n @if (useAcceptButtonToSelect()) {\r\n <div class=\"ard-date-input__accept-buttons-container\">\r\n <ng-template\r\n #defaultAcceptButtonsTemplate\r\n let-date\r\n >\r\n {{ serializeFn()(date) }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"acceptButtonsTemplate()?.template || defaultAcceptButtonsTemplate\"\r\n [ngTemplateOutletContext]=\"acceptButtonsContext()\"\r\n />\r\n </div>\r\n }\r\n </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-date-input .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-date-input__value.ard-date-input__value-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "directive", type: i5.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumCalendarComponent, selector: "ard-calendar", inputs: ["color", "activeView", "activeYear", "activeMonth", "firstWeekday", "multipleYearPageChangeModifier", "autoFocus", "selected", "min", "max", "UTC", "filter"], outputs: ["activeViewChange", "activeYearChange", "activeMonthChange", "selectedChange", "yearSelect", "monthSelect"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: _CalendarTemplateRepositoryDirective, selector: "ard-calendar > ng-template[_ard-tmp-repository]", inputs: ["daysViewHeaderTmp", "yearsViewHeaderTmp", "monthsViewHeaderTmp", "weekdayTmp", "floatingMonthTmp", "yearTmp", "monthTmp", "dayTmp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
7696
+ ], queries: [{ propertyName: "valueTemplate", first: true, predicate: ArdDateInputValueTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarIconTemplate", first: true, predicate: ArdDateInputCalendarIconTemplateDirective, descendants: true, isSignal: true }, { propertyName: "acceptButtonsTemplate", first: true, predicate: ArdDateInputAcceptButtonsTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdDateInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdDateInputSuffixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdDateInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdDateInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdDateInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdDateInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdDateInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdDateInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdDateInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdDateInputDayTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "dropdownHost", first: true, predicate: ["dropdownHost"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ArdiumDropdownPanelComponent, descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-date-input\"\r\n #dropdownHost\r\n (click)=\"onGeneralClick($event)\"\r\n [class.ard-has-value]=\"!!value()\"\r\n [ngClass]=\"ngClasses()\"\r\n >\r\n <div class=\"ard-date-input__value-container ard-input-container\">\r\n <div\r\n class=\"ard-date-input__placeholder ard-placeholder\"\r\n [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n >\r\n {{ placeholder() }}\r\n </div>\r\n <div\r\n class=\"ard-date-input__value\"\r\n [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n >\r\n <ng-template\r\n #defaultValueTemplate\r\n let-date\r\n >\r\n {{ serializeFn()(date) }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n [ngTemplateOutletContext]=\"valueContext()\"\r\n />\r\n </div>\r\n <div\r\n class=\"ard-date-input__input-container\"\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n [class.ard-date-input__input-container-hidden]=\"!shouldDisplayDateInput()\"\r\n >\r\n <input\r\n #dateInput\r\n #focusableElement\r\n type=\"text\"\r\n class=\"ard-date-input__input\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [value]=\"dateInputValue()\"\r\n [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n (input)=\"onDateInputInput($event)\"\r\n (change)=\"$event.stopPropagation()\"\r\n (focus)=\"onDateInputFocus($event)\"\r\n (blur)=\"onDateInputBlur($event)\"\r\n (keydown)=\"onDateInputEnter($event)\"\r\n />\r\n </div>\r\n </div>\r\n\r\n @if (!calendarHidden()) {\r\n <ard-icon-button\r\n color=\"none\"\r\n [disabled]=\"calendarDisabled()\"\r\n (click)=\"onCalendarButtonClick($event)\"\r\n >\r\n <ng-template\r\n #defaultCalendarIconTemplate\r\n let-date\r\n >\r\n <ard-icon filled>today</ard-icon>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n </ard-icon-button>\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n <ard-dropdown-panel\r\n class=\"ard-dropdown-panel ard-date-input__dropdown-panel\"\r\n [appearance]=\"dropdownAppearanceOrDefault()\"\r\n [variant]=\"dropdownVariantOrDefault()\"\r\n [isOpen]=\"true\"\r\n [panelId]=\"htmlId()\"\r\n [compact]=\"compact()\"\r\n (ardClickOutside)=\"onOutsideClick($event)\"\r\n >\r\n <ard-calendar\r\n class=\"ard-date-input__calendar\"\r\n [(activeMonth)]=\"activeMonth\"\r\n [(activeYear)]=\"activeYear\"\r\n [(activeView)]=\"activeView\"\r\n [firstWeekday]=\"firstWeekday()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [UTC]=\"_UTCAfterInit()\"\r\n autoFocus\r\n [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n [color]=\"color()\"\r\n [disabled]=\"disabled() || calendarDisabled()\"\r\n [tabIndex]=\"tabIndex()\"\r\n [selected]=\"value()\"\r\n (selectedChange)=\"onCalendarSelectedChange($event)\"\r\n (yearSelect)=\"yearSelect.emit($event)\"\r\n (monthSelect)=\"monthSelect.emit($event)\"\r\n >\r\n <ng-template\r\n _ard-tmp-repository\r\n [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n [yearTmp]=\"calendarYearTemplate()\"\r\n [monthTmp]=\"calendarMonthTemplate()\"\r\n [dayTmp]=\"calendarDayTemplate()\"\r\n />\r\n </ard-calendar>\r\n @if (useAcceptButtonToSelect()) {\r\n <div class=\"ard-date-input__accept-buttons-container\">\r\n <ng-template\r\n #defaultAcceptButtonsTemplate\r\n let-date\r\n >\r\n {{ serializeFn()(date) }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"acceptButtonsTemplate()?.template || defaultAcceptButtonsTemplate\"\r\n [ngTemplateOutletContext]=\"acceptButtonsContext()\"\r\n />\r\n </div>\r\n }\r\n </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-date-input .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-date-input__value.ard-date-input__value-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumFormFieldFrameComponent, selector: "ard-form-field-frame", inputs: ["hasError", "isSuccess", "isFocused", "appearance", "variant", "compact", "prefixTemplate", "suffixTemplate"] }, { kind: "component", type: ArdiumDropdownPanelComponent, selector: "ard-dropdown-panel", inputs: ["panelId", "headerTemplate", "footerTemplate", "filterValue", "appearance", "variant", "compact", "isOpen"], outputs: ["scroll", "scrollToEnd"] }, { kind: "directive", type: i5.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumCalendarComponent, selector: "ard-calendar", inputs: ["color", "activeView", "activeYear", "activeMonth", "firstWeekday", "multipleYearPageChangeModifier", "autoFocus", "selected", "min", "max", "UTC", "filter"], outputs: ["activeViewChange", "activeYearChange", "activeMonthChange", "selectedChange", "yearSelect", "monthSelect"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "directive", type: _CalendarTemplateRepositoryDirective, selector: "ard-calendar > ng-template[_ard-tmp-repository]", inputs: ["daysViewHeaderTmp", "yearsViewHeaderTmp", "monthsViewHeaderTmp", "weekdayTmp", "floatingMonthTmp", "yearTmp", "monthTmp", "dayTmp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
7683
7697
  }
7684
7698
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDateInputComponent, decorators: [{
7685
7699
  type: Component,
@@ -7693,7 +7707,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
7693
7707
  provide: ARD_FORM_FIELD_CONTROL,
7694
7708
  useExisting: ArdiumDateInputComponent,
7695
7709
  },
7696
- ], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-date-input\"\r\n #dropdownHost\r\n (click)=\"onGeneralClick($event)\"\r\n [class.ard-has-value]=\"!!value()\"\r\n [ngClass]=\"ngClasses()\"\r\n >\r\n <div class=\"ard-date-input__value-container ard-input-container\">\r\n <div\r\n class=\"ard-date-input__placeholder ard-placeholder\"\r\n [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n >\r\n {{ placeholder() }}\r\n </div>\r\n <div\r\n class=\"ard-date-input__value\"\r\n [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n >\r\n <ng-template\r\n #defaultValueTemplate\r\n let-date\r\n >\r\n {{ serializeFn()(date) }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n [ngTemplateOutletContext]=\"valueContext()\"\r\n />\r\n </div>\r\n <div\r\n class=\"ard-date-input__input-container\"\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n [class.ard-date-input__input-container-hidden]=\"!shouldDisplayDateInput()\"\r\n >\r\n <input\r\n #dateInput\r\n #focusableElement\r\n type=\"text\"\r\n class=\"ard-date-input__input\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [value]=\"dateInputValue()\"\r\n [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n (input)=\"onDateInputInput($event)\"\r\n (change)=\"$event.stopPropagation()\"\r\n (focus)=\"onDateInputFocus($event)\"\r\n (blur)=\"onDateInputBlur($event)\"\r\n (keydown)=\"onDateInputEnter($event)\"\r\n />\r\n </div>\r\n </div>\r\n\r\n @if (!calendarHidden()) {\r\n <ard-icon-button\r\n color=\"none\"\r\n [disabled]=\"calendarDisabled()\"\r\n (click)=\"onCalendarButtonClick($event)\"\r\n >\r\n <ng-template\r\n #defaultCalendarIconTemplate\r\n let-date\r\n >\r\n <ard-icon filled>today</ard-icon>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n </ard-icon-button>\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n <ard-dropdown-panel\r\n class=\"ard-dropdown-panel ard-date-input__dropdown-panel\"\r\n [appearance]=\"dropdownAppearanceOrDefault()\"\r\n [variant]=\"dropdownVariantOrDefault()\"\r\n [isOpen]=\"true\"\r\n [panelId]=\"htmlId()\"\r\n [compact]=\"compact()\"\r\n (ardClickOutside)=\"onOutsideClick($event)\"\r\n >\r\n <ard-calendar\r\n class=\"ard-date-input__calendar\"\r\n [(activeMonth)]=\"activeMonth\"\r\n [(activeYear)]=\"activeYear\"\r\n [(activeView)]=\"activeView\"\r\n [firstWeekday]=\"firstWeekday()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [UTC]=\"_UTCAfterInit()\"\r\n autoFocus\r\n [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n [color]=\"color()\"\r\n [disabled]=\"disabled() || calendarDisabled()\"\r\n [tabIndex]=\"tabIndex()\"\r\n (selectedChange)=\"onCalendarSelectedChange($event)\"\r\n (yearSelect)=\"yearSelect.emit($event)\"\r\n (monthSelect)=\"monthSelect.emit($event)\"\r\n >\r\n <ng-template\r\n _ard-tmp-repository\r\n [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n [yearTmp]=\"calendarYearTemplate()\"\r\n [monthTmp]=\"calendarMonthTemplate()\"\r\n [dayTmp]=\"calendarDayTemplate()\"\r\n />\r\n </ard-calendar>\r\n @if (useAcceptButtonToSelect()) {\r\n <div class=\"ard-date-input__accept-buttons-container\">\r\n <ng-template\r\n #defaultAcceptButtonsTemplate\r\n let-date\r\n >\r\n {{ serializeFn()(date) }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"acceptButtonsTemplate()?.template || defaultAcceptButtonsTemplate\"\r\n [ngTemplateOutletContext]=\"acceptButtonsContext()\"\r\n />\r\n </div>\r\n }\r\n </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-date-input .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-date-input__value.ard-date-input__value-hidden{display:none}\n"] }]
7710
+ ], template: "<ard-form-field-frame\r\n [appearance]=\"appearance()\"\r\n [variant]=\"variant()\"\r\n [compact]=\"compact()\"\r\n [isFocused]=\"isFocused()\"\r\n [hasError]=\"hasError()\"\r\n [isSuccess]=\"isSuccess()\"\r\n [prefixTemplate]=\"prefixTemplate()?.template\"\r\n [suffixTemplate]=\"suffixTemplate()?.template\"\r\n>\r\n <div\r\n class=\"ard-date-input\"\r\n #dropdownHost\r\n (click)=\"onGeneralClick($event)\"\r\n [class.ard-has-value]=\"!!value()\"\r\n [ngClass]=\"ngClasses()\"\r\n >\r\n <div class=\"ard-date-input__value-container ard-input-container\">\r\n <div\r\n class=\"ard-date-input__placeholder ard-placeholder\"\r\n [class.ard-date-input__placeholder-hidden]=\"!shouldDisplayPlaceholder()\"\r\n >\r\n {{ placeholder() }}\r\n </div>\r\n <div\r\n class=\"ard-date-input__value\"\r\n [class.ard-date-input__value-hidden]=\"!shouldDisplayValue()\"\r\n >\r\n <ng-template\r\n #defaultValueTemplate\r\n let-date\r\n >\r\n {{ serializeFn()(date) }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"valueTemplate()?.template || defaultValueTemplate\"\r\n [ngTemplateOutletContext]=\"valueContext()\"\r\n />\r\n </div>\r\n <div\r\n class=\"ard-date-input__input-container\"\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n [attr.aria-owns]=\"isOpen() ? htmlId() : null\"\r\n [class.ard-date-input__input-container-hidden]=\"!shouldDisplayDateInput()\"\r\n >\r\n <input\r\n #dateInput\r\n #focusableElement\r\n type=\"text\"\r\n class=\"ard-date-input__input\"\r\n [attr.tabindex]=\"tabIndex()\"\r\n [value]=\"dateInputValue()\"\r\n [attr.aria-controls]=\"isOpen() ? htmlId() : null\"\r\n (input)=\"onDateInputInput($event)\"\r\n (change)=\"$event.stopPropagation()\"\r\n (focus)=\"onDateInputFocus($event)\"\r\n (blur)=\"onDateInputBlur($event)\"\r\n (keydown)=\"onDateInputEnter($event)\"\r\n />\r\n </div>\r\n </div>\r\n\r\n @if (!calendarHidden()) {\r\n <ard-icon-button\r\n color=\"none\"\r\n [disabled]=\"calendarDisabled()\"\r\n (click)=\"onCalendarButtonClick($event)\"\r\n >\r\n <ng-template\r\n #defaultCalendarIconTemplate\r\n let-date\r\n >\r\n <ard-icon filled>today</ard-icon>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"calendarIconTemplate()?.template || defaultCalendarIconTemplate\" />\r\n </ard-icon-button>\r\n }\r\n </div>\r\n</ard-form-field-frame>\r\n\r\n<ng-template #dropdownTemplate>\r\n <ard-dropdown-panel\r\n class=\"ard-dropdown-panel ard-date-input__dropdown-panel\"\r\n [appearance]=\"dropdownAppearanceOrDefault()\"\r\n [variant]=\"dropdownVariantOrDefault()\"\r\n [isOpen]=\"true\"\r\n [panelId]=\"htmlId()\"\r\n [compact]=\"compact()\"\r\n (ardClickOutside)=\"onOutsideClick($event)\"\r\n >\r\n <ard-calendar\r\n class=\"ard-date-input__calendar\"\r\n [(activeMonth)]=\"activeMonth\"\r\n [(activeYear)]=\"activeYear\"\r\n [(activeView)]=\"activeView\"\r\n [firstWeekday]=\"firstWeekday()\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [UTC]=\"_UTCAfterInit()\"\r\n autoFocus\r\n [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n [color]=\"color()\"\r\n [disabled]=\"disabled() || calendarDisabled()\"\r\n [tabIndex]=\"tabIndex()\"\r\n [selected]=\"value()\"\r\n (selectedChange)=\"onCalendarSelectedChange($event)\"\r\n (yearSelect)=\"yearSelect.emit($event)\"\r\n (monthSelect)=\"monthSelect.emit($event)\"\r\n >\r\n <ng-template\r\n _ard-tmp-repository\r\n [daysViewHeaderTmp]=\"calendarDaysViewHeaderTemplate()\"\r\n [yearsViewHeaderTmp]=\"calendarYearsViewHeaderTemplate()\"\r\n [monthsViewHeaderTmp]=\"calendarMonthsViewHeaderTemplate()\"\r\n [weekdayTmp]=\"calendarWeekdayTemplate()\"\r\n [floatingMonthTmp]=\"calendarFloatingMonthTemplate()\"\r\n [yearTmp]=\"calendarYearTemplate()\"\r\n [monthTmp]=\"calendarMonthTemplate()\"\r\n [dayTmp]=\"calendarDayTemplate()\"\r\n />\r\n </ard-calendar>\r\n @if (useAcceptButtonToSelect()) {\r\n <div class=\"ard-date-input__accept-buttons-container\">\r\n <ng-template\r\n #defaultAcceptButtonsTemplate\r\n let-date\r\n >\r\n {{ serializeFn()(date) }}\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"acceptButtonsTemplate()?.template || defaultAcceptButtonsTemplate\"\r\n [ngTemplateOutletContext]=\"acceptButtonsContext()\"\r\n />\r\n </div>\r\n }\r\n </ard-dropdown-panel>\r\n</ng-template>\r\n", styles: [".ard-date-input .ard-date-input__placeholder.ard-date-input__placeholder-hidden,.ard-date-input .ard-date-input__value.ard-date-input__value-hidden{display:none}\n"] }]
7697
7711
  }], ctorParameters: () => [{ type: undefined, decorators: [{
7698
7712
  type: Inject,
7699
7713
  args: [ARD_DATE_INPUT_DEFAULTS]
@@ -11532,8 +11546,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
11532
11546
  }] });
11533
11547
 
11534
11548
  class ArdiumErrorDirective {
11549
+ constructor() {
11550
+ this.left = input(false, { transform: v => coerceBooleanProperty(v) });
11551
+ this.right = input(false, { transform: v => coerceBooleanProperty(v) });
11552
+ effect(() => {
11553
+ if (this.left() && this.right()) {
11554
+ console.error(`ARD-NF5130: Cannot align a form field error to both left and right.`);
11555
+ }
11556
+ });
11557
+ }
11535
11558
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
11536
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: ArdiumErrorDirective, isStandalone: true, selector: "[ard-error]", host: { properties: { "class.ard-error": "true" } }, ngImport: i0 }); }
11559
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumErrorDirective, isStandalone: true, selector: "[ard-error]", inputs: { left: { classPropertyName: "left", publicName: "left", isSignal: true, isRequired: false, transformFunction: null }, right: { classPropertyName: "right", publicName: "right", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ard-error": "true", "class.ard-error-default": "!left() && !right()", "class.ard-error-left": "left() && !right()", "class.ard-error-right": "!left() && right()" } }, ngImport: i0 }); }
11537
11560
  }
11538
11561
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumErrorDirective, decorators: [{
11539
11562
  type: Directive,
@@ -11542,9 +11565,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
11542
11565
  standalone: true,
11543
11566
  host: {
11544
11567
  '[class.ard-error]': 'true',
11568
+ '[class.ard-error-default]': '!left() && !right()',
11569
+ '[class.ard-error-left]': 'left() && !right()',
11570
+ '[class.ard-error-right]': '!left() && right()',
11545
11571
  },
11546
11572
  }]
11547
- }] });
11573
+ }], ctorParameters: () => [] });
11548
11574
 
11549
11575
  class ArdiumErrorComponent {
11550
11576
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -11701,7 +11727,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
11701
11727
  class _FormFieldBase {
11702
11728
  constructor() {
11703
11729
  this._DEFAULTS = inject(ARD_FORM_FIELD_DEFAULTS);
11704
- this.alignHintToLeftByDefault = this._DEFAULTS.defaultHintAlign === SimpleOneAxisAlignment.Left;
11730
+ this.defaultHintAlign = input(this._DEFAULTS.defaultHintAlign);
11731
+ this.alignHintToLeftByDefault = computed(() => this.defaultHintAlign() === SimpleOneAxisAlignment.Left);
11705
11732
  this.control = contentChild(ARD_FORM_FIELD_CONTROL);
11706
11733
  // get controlRequired() {
11707
11734
  // const fnOrValue = this.control()?.required;
@@ -11735,7 +11762,7 @@ class _FormFieldBase {
11735
11762
  }
11736
11763
  }
11737
11764
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _FormFieldBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
11738
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.15", type: _FormFieldBase, isStandalone: true, inputs: { reserveHintLine: { classPropertyName: "reserveHintLine", publicName: "reserveHintLine", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "control", first: true, predicate: ARD_FORM_FIELD_CONTROL, descendants: true, isSignal: true }, { propertyName: "label", first: true, predicate: ArdiumLabelComponent, descendants: true, isSignal: true }, { propertyName: "hints", predicate: ArdiumHintDirective, isSignal: true }, { propertyName: "errors", predicate: ArdiumErrorDirective, isSignal: true }], ngImport: i0 }); }
11765
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.15", type: _FormFieldBase, isStandalone: true, inputs: { defaultHintAlign: { classPropertyName: "defaultHintAlign", publicName: "defaultHintAlign", isSignal: true, isRequired: false, transformFunction: null }, reserveHintLine: { classPropertyName: "reserveHintLine", publicName: "reserveHintLine", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "control", first: true, predicate: ARD_FORM_FIELD_CONTROL, descendants: true, isSignal: true }, { propertyName: "label", first: true, predicate: ArdiumLabelComponent, descendants: true, isSignal: true }, { propertyName: "hints", predicate: ArdiumHintDirective, isSignal: true }, { propertyName: "errors", predicate: ArdiumErrorDirective, isSignal: true }], ngImport: i0 }); }
11739
11766
  }
11740
11767
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _FormFieldBase, decorators: [{
11741
11768
  type: Directive
@@ -11743,11 +11770,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
11743
11770
 
11744
11771
  class ArdiumFormFieldComponent extends _FormFieldBase {
11745
11772
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
11746
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumFormFieldComponent, isStandalone: false, selector: "ard-form-field", usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"ard-form-field\"\r\n [class.ard-form-field__with-error]=\"controlHasError\"\r\n [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n <label\r\n class=\"ard-form-field__label\"\r\n [attr.for]=\"controlHtmlId\"\r\n >\r\n <ng-content select=\"ard-label, [ard-label]\" />\r\n </label>\r\n <div class=\"ard-form-field__input\">\r\n <ng-content />\r\n </div>\r\n <div\r\n class=\"ard-form-field__hints\"\r\n [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n >\r\n @if (hasAnyError()) {\r\n <div class=\"ard-form-field__error\">\r\n <ng-content select=\"ard-error, [ard-error]\" />\r\n </div>\r\n } @else {\r\n <div class=\"ard-form-field__hints-left\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n </div>\r\n <div class=\"ard-form-field__hints-right\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
11773
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumFormFieldComponent, isStandalone: false, selector: "ard-form-field", usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"ard-form-field\"\r\n [class.ard-form-field__with-error]=\"controlHasError\"\r\n [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n <label\r\n class=\"ard-form-field__label\"\r\n [attr.for]=\"controlHtmlId\"\r\n >\r\n <ng-content select=\"ard-label, [ard-label]\" />\r\n </label>\r\n <div class=\"ard-form-field__input\">\r\n <ng-content />\r\n </div>\r\n <div\r\n class=\"ard-form-field__hints\"\r\n [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault()\"\r\n >\r\n @if (hasAnyError()) {\r\n <div class=\"ard-form-field__errors-left\">\r\n @if (alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-error\">\r\n <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-error[left], [ard-error][left]\" />\r\n </div>\r\n <div class=\"ard-form-field__errors-right\">\r\n @if (!alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-error\">\r\n <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-error[right], [ard-error][right]\" />\r\n </div>\r\n } @else {\r\n <div class=\"ard-form-field__hints-left\">\r\n @if (alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n </div>\r\n <div class=\"ard-form-field__hints-right\">\r\n @if (!alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n\r\n<ng-template #defaultHints>\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultErrors>\r\n <ng-content select=\"ard-error:not([left]):not([right]), [ard-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints,.ard-form-field__errors{display:flex;justify-content:space-between}.ard-form-field__hints>*,.ard-form-field__errors>*{display:flex;flex-direction:column}.ard-form-field__hints .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors .ard-form-field__errors-left .ard-form-field__default-error{display:none}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error{display:block}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
11747
11774
  }
11748
11775
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumFormFieldComponent, decorators: [{
11749
11776
  type: Component,
11750
- args: [{ standalone: false, selector: 'ard-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"ard-form-field\"\r\n [class.ard-form-field__with-error]=\"controlHasError\"\r\n [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n <label\r\n class=\"ard-form-field__label\"\r\n [attr.for]=\"controlHtmlId\"\r\n >\r\n <ng-content select=\"ard-label, [ard-label]\" />\r\n </label>\r\n <div class=\"ard-form-field__input\">\r\n <ng-content />\r\n </div>\r\n <div\r\n class=\"ard-form-field__hints\"\r\n [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n >\r\n @if (hasAnyError()) {\r\n <div class=\"ard-form-field__error\">\r\n <ng-content select=\"ard-error, [ard-error]\" />\r\n </div>\r\n } @else {\r\n <div class=\"ard-form-field__hints-left\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n </div>\r\n <div class=\"ard-form-field__hints-right\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"] }]
11777
+ args: [{ standalone: false, selector: 'ard-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"ard-form-field\"\r\n [class.ard-form-field__with-error]=\"controlHasError\"\r\n [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n <label\r\n class=\"ard-form-field__label\"\r\n [attr.for]=\"controlHtmlId\"\r\n >\r\n <ng-content select=\"ard-label, [ard-label]\" />\r\n </label>\r\n <div class=\"ard-form-field__input\">\r\n <ng-content />\r\n </div>\r\n <div\r\n class=\"ard-form-field__hints\"\r\n [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault()\"\r\n >\r\n @if (hasAnyError()) {\r\n <div class=\"ard-form-field__errors-left\">\r\n @if (alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-error\">\r\n <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-error[left], [ard-error][left]\" />\r\n </div>\r\n <div class=\"ard-form-field__errors-right\">\r\n @if (!alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-error\">\r\n <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-error[right], [ard-error][right]\" />\r\n </div>\r\n } @else {\r\n <div class=\"ard-form-field__hints-left\">\r\n @if (alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n </div>\r\n <div class=\"ard-form-field__hints-right\">\r\n @if (!alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n\r\n<ng-template #defaultHints>\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultErrors>\r\n <ng-content select=\"ard-error:not([left]):not([right]), [ard-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints,.ard-form-field__errors{display:flex;justify-content:space-between}.ard-form-field__hints>*,.ard-form-field__errors>*{display:flex;flex-direction:column}.ard-form-field__hints .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors .ard-form-field__errors-left .ard-form-field__default-error{display:none}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error{display:block}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error{display:none}\n"] }]
11751
11778
  }] });
11752
11779
 
11753
11780
  class ArdiumHintComponent {
@@ -11766,11 +11793,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
11766
11793
 
11767
11794
  class ArdiumHorizontalFormFieldComponent extends _FormFieldBase {
11768
11795
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumHorizontalFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
11769
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumHorizontalFormFieldComponent, isStandalone: false, selector: "ard-horizontal-form-field", usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"ard-horizontal-form-field\"\r\n [class.ard-form-field__with-error]=\"controlHasError\"\r\n [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n <div class=\"ard-form-field__label-container\">\r\n <label\r\n class=\"ard-form-field__label\"\r\n [attr.for]=\"controlHtmlId\"\r\n >\r\n <ng-content select=\"ard-label, [ard-label]\" />\r\n </label>\r\n </div>\r\n <div class=\"ard-form-field__non-label\">\r\n <div class=\"ard-form-field__input\">\r\n <ng-content />\r\n </div>\r\n <div\r\n class=\"ard-form-field__hints\"\r\n [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n >\r\n @if (hasAnyError()) {\r\n <div class=\"ard-form-field__error\">\r\n <ng-content select=\"ard-error, [ard-error]\" />\r\n </div>\r\n } @else {\r\n <div class=\"ard-form-field__hints-left\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n </div>\r\n <div class=\"ard-form-field__hints-right\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
11796
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumHorizontalFormFieldComponent, isStandalone: false, selector: "ard-horizontal-form-field", usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"ard-horizontal-form-field\"\r\n [class.ard-form-field__with-error]=\"controlHasError\"\r\n [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n <div class=\"ard-form-field__label-container\">\r\n <label\r\n class=\"ard-form-field__label\"\r\n [attr.for]=\"controlHtmlId\"\r\n >\r\n <ng-content select=\"ard-label, [ard-label]\" />\r\n </label>\r\n </div>\r\n <div class=\"ard-form-field__non-label\">\r\n <div class=\"ard-form-field__input\">\r\n <ng-content />\r\n </div>\r\n <div\r\n class=\"ard-form-field__hints\"\r\n [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault()\"\r\n >\r\n @if (hasAnyError()) {\r\n <div class=\"ard-form-field__errors-left\">\r\n @if (alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-error\">\r\n <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-error[left], [ard-error][left]\" />\r\n </div>\r\n <div class=\"ard-form-field__errors-right\">\r\n @if (!alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-error\">\r\n <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-error[right], [ard-error][right]\" />\r\n </div>\r\n } @else {\r\n <div class=\"ard-form-field__hints-left\">\r\n @if (alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n </div>\r\n <div class=\"ard-form-field__hints-right\">\r\n @if (!alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n\r\n<ng-template #defaultHints>\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultErrors>\r\n <ng-content select=\"ard-error:not([left]):not([right]), [ard-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints,.ard-form-field__errors{display:flex;justify-content:space-between}.ard-form-field__hints>*,.ard-form-field__errors>*{display:flex;flex-direction:column}.ard-form-field__hints .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors .ard-form-field__errors-left .ard-form-field__default-error{display:none}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error{display:block}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
11770
11797
  }
11771
11798
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumHorizontalFormFieldComponent, decorators: [{
11772
11799
  type: Component,
11773
- args: [{ standalone: false, selector: 'ard-horizontal-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"ard-horizontal-form-field\"\r\n [class.ard-form-field__with-error]=\"controlHasError\"\r\n [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n <div class=\"ard-form-field__label-container\">\r\n <label\r\n class=\"ard-form-field__label\"\r\n [attr.for]=\"controlHtmlId\"\r\n >\r\n <ng-content select=\"ard-label, [ard-label]\" />\r\n </label>\r\n </div>\r\n <div class=\"ard-form-field__non-label\">\r\n <div class=\"ard-form-field__input\">\r\n <ng-content />\r\n </div>\r\n <div\r\n class=\"ard-form-field__hints\"\r\n [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n >\r\n @if (hasAnyError()) {\r\n <div class=\"ard-form-field__error\">\r\n <ng-content select=\"ard-error, [ard-error]\" />\r\n </div>\r\n } @else {\r\n <div class=\"ard-form-field__hints-left\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n </div>\r\n <div class=\"ard-form-field__hints-right\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"] }]
11800
+ args: [{ standalone: false, selector: 'ard-horizontal-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"ard-horizontal-form-field\"\r\n [class.ard-form-field__with-error]=\"controlHasError\"\r\n [class.ard-form-field__is-success]=\"controlIsSuccess\"\r\n [class.ard-form-field__control-disabled]=\"controlDisabled\"\r\n>\r\n <div class=\"ard-form-field__label-container\">\r\n <label\r\n class=\"ard-form-field__label\"\r\n [attr.for]=\"controlHtmlId\"\r\n >\r\n <ng-content select=\"ard-label, [ard-label]\" />\r\n </label>\r\n </div>\r\n <div class=\"ard-form-field__non-label\">\r\n <div class=\"ard-form-field__input\">\r\n <ng-content />\r\n </div>\r\n <div\r\n class=\"ard-form-field__hints\"\r\n [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault()\"\r\n >\r\n @if (hasAnyError()) {\r\n <div class=\"ard-form-field__errors-left\">\r\n @if (alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-error\">\r\n <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-error[left], [ard-error][left]\" />\r\n </div>\r\n <div class=\"ard-form-field__errors-right\">\r\n @if (!alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-error\">\r\n <ng-template [ngTemplateOutlet]=\"defaultErrors\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-error[right], [ard-error][right]\" />\r\n </div>\r\n } @else {\r\n <div class=\"ard-form-field__hints-left\">\r\n @if (alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n </div>\r\n <div class=\"ard-form-field__hints-right\">\r\n @if (!alignHintToLeftByDefault()) {\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-template [ngTemplateOutlet]=\"defaultHints\" />\r\n </div>\r\n }\r\n <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n\r\n<ng-template #defaultHints>\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultErrors>\r\n <ng-content select=\"ard-error:not([left]):not([right]), [ard-error]:not([left]):not([right])\" />\r\n</ng-template>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints,.ard-form-field__errors{display:flex;justify-content:space-between}.ard-form-field__hints>*,.ard-form-field__errors>*{display:flex;flex-direction:column}.ard-form-field__hints .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors .ard-form-field__errors-left .ard-form-field__default-error{display:none}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-left .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-left .ard-form-field__default-error{display:block}.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__hints.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__hints-right .ard-form-field__default-hint,.ard-form-field__errors.ard-form-field__hints-default-left .ard-form-field__errors-right .ard-form-field__default-error{display:none}\n"] }]
11774
11801
  }] });
11775
11802
 
11776
11803
  class ArdiumFormFieldModule {