@ardium-ui/ui 5.0.0-alpha.58 → 5.0.0-alpha.59

package/fesm2022/ardium-ui-ui.mjs

@@ -11,7 +11,7 @@ import { resolvePath } from 'resolve-object-path';
 import { TakeChance } from 'take-chance';
 import { isEqual } from 'lodash';
 import * as i1 from '@angular/common';
-import { CommonModule, DatePipe, UpperCasePipe, TitleCasePipe, DOCUMENT, DecimalPipe, AsyncPipe } from '@angular/common';
+import { CommonModule, DatePipe, UpperCasePipe, TitleCasePipe, DATE_PIPE_DEFAULT_OPTIONS, DOCUMENT, DecimalPipe, AsyncPipe } from '@angular/common';
 import { AutofillMonitor, CdkAutofill } from '@angular/cdk/text-field';
 import { Subject, isObservable, firstValueFrom, merge, takeUntil, startWith, filter, map, BehaviorSubject } from 'rxjs';
 import { roundToMultiple, roundFromZero, roundToPrecision } from 'more-rounding';
@@ -6177,7 +6177,9 @@ class _AbstractDateInput extends _FormFieldComponentBase {
         this.UTC = input(this._DEFAULTS.UTC, { transform: v => coerceBooleanProperty(v) });
         this._UTCAfterInit = signal(this._DEFAULTS.UTC);
         this.filter = input(this._DEFAULTS.filter);
-        this.hideFloatingMonth = input(this._DEFAULTS.hideFloatingMonth, { transform: v => coerceBooleanProperty(v) });
+        this.hideFloatingMonth = input(this._DEFAULTS.hideFloatingMonth, {
+            transform: v => coerceBooleanProperty(v),
+        });
         //! calendar outputs
         this.yearSelect = output();
         this.monthSelect = output();
@@ -6391,6 +6393,12 @@ class DateRange {
         this.to = to;
     }
 }
+function isDateRange(v) {
+    return !!v && typeof v === 'object' && 'from' in v && isDate(v.from) && 'to' in v && (isNull(v.to) || isDate(v.to));
+}
+function isYearRange(v) {
+    return !!v && typeof v === 'object' && 'from' in v && isNumber(v.from) && 'to' in v && isNumber(v.to);
+}
 
 class ArdCalendarDaysViewHeaderTemplateDirective {
     constructor(template) {
@@ -6679,10 +6687,32 @@ class _AbstractCalendar extends _FormFieldComponentBase {
                 return value;
             },
         });
+        this.multipleYearOffset = input(this._DEFAULTS.multipleYearOffset, {
+            transform: v => {
+                const value = coerceNumberProperty(v, this._DEFAULTS.multipleYearOffset);
+                if (!Number.isInteger(value) || value < 0) {
+                    console.error(new Error(`ARD-NF${this.componentId}3: [multipleYearOffset] must be a non-negative integer, got "${value}". Using default value instead.`));
+                    return this._DEFAULTS.multipleYearOffset;
+                }
+                return value;
+            },
+        });
+        this.multipleYearPageSize = input(this._DEFAULTS.multipleYearPageSize, {
+            transform: v => {
+                const value = coerceNumberProperty(v, this._DEFAULTS.multipleYearPageSize);
+                if (!Number.isInteger(value) || value < 1) {
+                    console.error(new Error(`ARD-NF${this.componentId}5: [multipleYearPageSize] must be a positive integer, got "${value}". Using default value instead.`));
+                    return this._DEFAULTS.multipleYearPageSize;
+                }
+                return value;
+            },
+        });
         this.multiCalendarLocation = input(this._DEFAULTS.multiCalendarLocation);
         this.autoFocus = input(this._DEFAULTS.autoFocus, { transform: v => coerceBooleanProperty(v) });
-        this.staticHeight = input(false, { transform: v => coerceBooleanProperty(v) });
-        this.hideFloatingMonth = input(false, { transform: v => coerceBooleanProperty(v) });
+        this.staticHeight = input(this._DEFAULTS.staticHeight, { transform: v => coerceBooleanProperty(v) });
+        this.hideFloatingMonth = input(this._DEFAULTS.hideFloatingMonth, {
+            transform: v => coerceBooleanProperty(v),
+        });
         //! value
         this.selectionStart = signal(null);
         this.selectionEnd = signal(null);
@@ -6712,9 +6742,10 @@ class _AbstractCalendar extends _FormFieldComponentBase {
         this.__highlightedYear = signal(null);
         this.highlightedYear = this.__highlightedYear.asReadonly();
         this.currentYearRangeStart = linkedSignal(() => {
-            const rangeStartForCurrentYear = this.TODAY().getFullYear() - (this.TODAY().getFullYear() % 4) - 8; // current year always in 3rd row
+            // align to a multiple of 4 and subtract offset
+            const rangeStartForCurrentYear = this.TODAY().getFullYear() - (this.TODAY().getFullYear() % 4) - this.multipleYearOffset() * 4;
             const activeYear = this.activeYear();
-            const offset = roundToMultiple(activeYear - rangeStartForCurrentYear + 1, 24, 'up') - 24; // check how many 24-year pages need to be turned
+            const offset = roundToMultiple(activeYear - rangeStartForCurrentYear + 1, this.multipleYearPageSize(), 'up') - this.multipleYearPageSize(); // check how many n-year pages need to be turned
             return rangeStartForCurrentYear + offset;
         });
         //! internals
@@ -6740,15 +6771,6 @@ class _AbstractCalendar extends _FormFieldComponentBase {
         this.yearDateFormat = input(this._DEFAULTS.yearDateFormat); // 'YYYY'
         this.monthDateFormat = input(this._DEFAULTS.monthDateFormat); // 'MMM'
         this.dayDateFormat = input(this._DEFAULTS.dayDateFormat); // 'D'
-        effect(() => {
-            const value = this.selectionStart();
-            if (isDefined(value)) {
-                if (this._isHoursSetInDate(value)) {
-                    console.warn(`ARD-W${this.componentId}5: <ard-${this.componentName}> value contains time information (HH:MM:SS.ms). This will be ignored and only the date part will be used.`);
-                    this.selectionStart.set(createDate(value.getFullYear(), value.getMonth(), value.getDate(), this.UTC()));
-                }
-            }
-        });
     }
     onTriggerOpenDaysView() {
         this.activeView.set(ArdCalendarView.Days);
@@ -6762,14 +6784,6 @@ class _AbstractCalendar extends _FormFieldComponentBase {
     _emitChange() {
         this._onChangeRegistered?.(this.value());
     }
-    _isHoursSetInDate(date) {
-        if (!isDefined(date))
-            return false;
-        if (this.UTC()) {
-            return (date.getUTCHours() !== 0 || date.getUTCMinutes() !== 0 || date.getUTCSeconds() !== 0 || date.getUTCMilliseconds() !== 0);
-        }
-        return date.getHours() !== 0 || date.getMinutes() !== 0 || date.getSeconds() !== 0 || date.getMilliseconds() !== 0;
-    }
     ngOnChanges(changes) {
         if (changes['UTC']) {
             if (changes['UTC'].firstChange) {
@@ -7078,15 +7092,15 @@ class _AbstractCalendar extends _FormFieldComponentBase {
         }
         const newYear = date.getFullYear();
         this.__highlightedYear.update(() => newYear);
-        if (newYear < this.currentYearRangeStart() || newYear >= this.currentYearRangeStart() + 24) {
+        if (newYear < this.currentYearRangeStart() || newYear >= this.currentYearRangeStart() + this.multipleYearPageSize()) {
             // round the offset away from zero: 0.1 -> 1, -0.1 -> -1
-            // this is to ensure the range start is always shifted by 24 years
-            const offset = roundFromZero((newYear - this.currentYearRangeStart()) / 24);
-            this.currentYearRangeStart.update(v => v + offset * 24);
+            // this is to ensure the range start is always shifted by n years
+            const offset = roundFromZero((newYear - this.currentYearRangeStart()) / this.multipleYearPageSize());
+            this.currentYearRangeStart.update(v => v + offset * this.multipleYearPageSize());
         }
     }
     changeYearsViewPage(offset) {
-        const newYearRangeStart = this.currentYearRangeStart() + offset * 24;
+        const newYearRangeStart = this.currentYearRangeStart() + offset * this.multipleYearPageSize();
         this.currentYearRangeStart.set(newYearRangeStart);
     }
     _highlightMinYear() {
@@ -7113,15 +7127,15 @@ class _AbstractCalendar extends _FormFieldComponentBase {
         this.setHighlightedYear(this.currentYearRangeStart());
     }
     highlightLastYear() {
-        this.setHighlightedYear(this.currentYearRangeStart() + 23); // 24 years per page
+        this.setHighlightedYear(this.currentYearRangeStart() + this.multipleYearPageSize() - 1);
     }
     highlightSameYearNextPage(multiple) {
         const year = this.highlightedYear() ?? this.currentYearRangeStart();
-        this.setHighlightedYear(year + (multiple ? 60 : 24));
+        this.setHighlightedYear(year + (multiple ? this.multipleYearPageChangeModifier() : 1) * this.multipleYearPageSize());
     }
     highlightSameYearPreviousPage(multiple) {
         const year = this.highlightedYear() ?? this.currentYearRangeStart();
-        this.setHighlightedYear(year - (multiple ? 60 : 24));
+        this.setHighlightedYear(year - (multiple ? this.multipleYearPageChangeModifier() : 1) * this.multipleYearPageSize());
     }
     onDocumentMousemove() {
         this._isUsingKeyboard.set(false);
@@ -7130,7 +7144,7 @@ class _AbstractCalendar extends _FormFieldComponentBase {
         this._isUsingKeyboard.set(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _AbstractCalendar, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.15", type: _AbstractCalendar, isStandalone: true, inputs: { color: { classPropertyName: "color", publicName: "color", 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 }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, staticHeight: { classPropertyName: "staticHeight", publicName: "staticHeight", isSignal: true, isRequired: false, transformFunction: null }, hideFloatingMonth: { classPropertyName: "hideFloatingMonth", publicName: "hideFloatingMonth", 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 }, highlightedDay: { classPropertyName: "highlightedDay", publicName: "highlightedDay", isSignal: true, isRequired: false, transformFunction: null }, daysViewHeaderDateFormat: { classPropertyName: "daysViewHeaderDateFormat", publicName: "daysViewHeaderDateFormat", isSignal: true, isRequired: false, transformFunction: null }, yearsViewHeaderDateFormat: { classPropertyName: "yearsViewHeaderDateFormat", publicName: "yearsViewHeaderDateFormat", isSignal: true, isRequired: false, transformFunction: null }, monthsViewHeaderDateFormat: { classPropertyName: "monthsViewHeaderDateFormat", publicName: "monthsViewHeaderDateFormat", isSignal: true, isRequired: false, transformFunction: null }, weekdayDateFormat: { classPropertyName: "weekdayDateFormat", publicName: "weekdayDateFormat", isSignal: true, isRequired: false, transformFunction: null }, weekdayTitleDateFormat: { classPropertyName: "weekdayTitleDateFormat", publicName: "weekdayTitleDateFormat", isSignal: true, isRequired: false, transformFunction: null }, floatingMonthDateFormat: { classPropertyName: "floatingMonthDateFormat", publicName: "floatingMonthDateFormat", isSignal: true, isRequired: false, transformFunction: null }, floatingMonthTitleDateFormat: { classPropertyName: "floatingMonthTitleDateFormat", publicName: "floatingMonthTitleDateFormat", isSignal: true, isRequired: false, transformFunction: null }, yearDateFormat: { classPropertyName: "yearDateFormat", publicName: "yearDateFormat", isSignal: true, isRequired: false, transformFunction: null }, monthDateFormat: { classPropertyName: "monthDateFormat", publicName: "monthDateFormat", isSignal: true, isRequired: false, transformFunction: null }, dayDateFormat: { classPropertyName: "dayDateFormat", publicName: "dayDateFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeView: "activeViewChange", activeYear: "activeYearChange", activeMonth: "activeMonthChange", activePageChange: "activePageChange", yearSelect: "yearSelect", monthSelect: "monthSelect", highlightedDay: "highlightedDayChange", highlightDayEvent: "highlightDay" }, host: { listeners: { "document:mousemove": "onDocumentMousemove()", "document:keydown": "onDocumentKeydown()" } }, 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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.15", type: _AbstractCalendar, isStandalone: true, inputs: { color: { classPropertyName: "color", publicName: "color", 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 }, multipleYearOffset: { classPropertyName: "multipleYearOffset", publicName: "multipleYearOffset", isSignal: true, isRequired: false, transformFunction: null }, multipleYearPageSize: { classPropertyName: "multipleYearPageSize", publicName: "multipleYearPageSize", isSignal: true, isRequired: false, transformFunction: null }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, staticHeight: { classPropertyName: "staticHeight", publicName: "staticHeight", isSignal: true, isRequired: false, transformFunction: null }, hideFloatingMonth: { classPropertyName: "hideFloatingMonth", publicName: "hideFloatingMonth", 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 }, highlightedDay: { classPropertyName: "highlightedDay", publicName: "highlightedDay", isSignal: true, isRequired: false, transformFunction: null }, daysViewHeaderDateFormat: { classPropertyName: "daysViewHeaderDateFormat", publicName: "daysViewHeaderDateFormat", isSignal: true, isRequired: false, transformFunction: null }, yearsViewHeaderDateFormat: { classPropertyName: "yearsViewHeaderDateFormat", publicName: "yearsViewHeaderDateFormat", isSignal: true, isRequired: false, transformFunction: null }, monthsViewHeaderDateFormat: { classPropertyName: "monthsViewHeaderDateFormat", publicName: "monthsViewHeaderDateFormat", isSignal: true, isRequired: false, transformFunction: null }, weekdayDateFormat: { classPropertyName: "weekdayDateFormat", publicName: "weekdayDateFormat", isSignal: true, isRequired: false, transformFunction: null }, weekdayTitleDateFormat: { classPropertyName: "weekdayTitleDateFormat", publicName: "weekdayTitleDateFormat", isSignal: true, isRequired: false, transformFunction: null }, floatingMonthDateFormat: { classPropertyName: "floatingMonthDateFormat", publicName: "floatingMonthDateFormat", isSignal: true, isRequired: false, transformFunction: null }, floatingMonthTitleDateFormat: { classPropertyName: "floatingMonthTitleDateFormat", publicName: "floatingMonthTitleDateFormat", isSignal: true, isRequired: false, transformFunction: null }, yearDateFormat: { classPropertyName: "yearDateFormat", publicName: "yearDateFormat", isSignal: true, isRequired: false, transformFunction: null }, monthDateFormat: { classPropertyName: "monthDateFormat", publicName: "monthDateFormat", isSignal: true, isRequired: false, transformFunction: null }, dayDateFormat: { classPropertyName: "dayDateFormat", publicName: "dayDateFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeView: "activeViewChange", activeYear: "activeYearChange", activeMonth: "activeMonthChange", activePageChange: "activePageChange", yearSelect: "yearSelect", monthSelect: "monthSelect", highlightedDay: "highlightedDayChange", highlightDayEvent: "highlightDay" }, host: { listeners: { "document:mousemove": "onDocumentMousemove()", "document:keydown": "onDocumentKeydown()" } }, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _AbstractCalendar, decorators: [{
             type: Directive,
@@ -7151,6 +7165,10 @@ const _calendarDefaults = {
     activeMonth: new Date().getMonth(),
     firstWeekday: 1,
     multipleYearPageChangeModifier: 5,
+    multipleYearOffset: 2,
+    multipleYearPageSize: 24,
+    staticHeight: false,
+    hideFloatingMonth: false,
     autoFocus: false,
     multiCalendarLocation: ArdMultiCalendarLocation.Only,
     min: null,
@@ -7322,12 +7340,12 @@ class DaysViewComponent {
                 this.multiCalendarLocation() === ArdMultiCalendarLocation.Inner,
             year: this.activeYear(),
             month: this.activeMonth(),
-            $implicit: new Date(this.activeYear(), this.activeMonth(), 2, 0, 0, 0, 0), // second day of month to prevent timezone issues
+            $implicit: getUTCDate(this.activeYear(), this.activeMonth(), 2), // second day of month to prevent timezone issues
         }));
         this.weekdayContext = computed(() => (dayIndex) => {
             // create a date object for the given day index (0 = Sunday, 1 = Monday, etc.)
             // add 4 because January 4, 1970 is a Sunday
-            const date = new Date(1970, 0, 4 + dayIndex);
+            const date = getUTCDate(1970, 0, 4 + dayIndex);
             return {
                 dayIndex,
                 date,
@@ -7335,7 +7353,7 @@ class DaysViewComponent {
             };
         });
         this.floatingMonthContext = computed(() => {
-            const date = new Date(this.activeYear(), this.activeMonth(), 2, 0, 0, 0, 0); // second day of month to prevent timezone issues
+            const date = getUTCDate(this.activeYear(), this.activeMonth(), 2); // second day of month to prevent timezone issues
             return {
                 month: this.activeMonth(),
                 date,
@@ -7343,7 +7361,7 @@ class DaysViewComponent {
             };
         });
         this.dayContext = computed(() => (day) => {
-            const date = new Date(this.activeYear(), this.activeMonth(), day);
+            const date = getUTCDate(this.activeYear(), this.activeMonth(), day);
             return {
                 value: day,
                 date,
@@ -7640,11 +7658,11 @@ class MonthsViewComponent {
             hidePreviousPageButton: this.multiCalendarLocation() === ArdMultiCalendarLocation.Right ||
                 this.multiCalendarLocation() === ArdMultiCalendarLocation.Inner,
             year: this.activeYear(),
-            date: new Date(this.activeYear(), 0, 1),
+            date: getUTCDate(this.activeYear(), 0, 2), // second day of month to prevent timezone issues
             $implicit: this.activeYear(),
         }));
         this.monthContext = computed(() => (month) => {
-            const date = new Date(this.activeYear(), month, 2); // second day of month to prevent timezone issues
+            const date = getUTCDate(this.activeYear(), month, 2); // second day of month to prevent timezone issues
             return {
                 month,
                 date,
@@ -7875,7 +7893,8 @@ class YearsViewComponent {
         this.max = input.required();
         this.multiCalendarLocation = input.required();
         this.currentYearRangeStart = input.required();
-        this.yearsArray = computed(() => getCalendarYearsArray(this.currentYearRangeStart(), 24, this.min(), this.max()));
+        this.multipleYearPageSize = input.required();
+        this.yearsArray = computed(() => getCalendarYearsArray(this.currentYearRangeStart(), this.multipleYearPageSize(), this.min(), this.max()));
         this.currentAriaLabel = computed(() => {
             return this.highlightedYear()?.toString() ?? '';
         });
@@ -7913,8 +7932,8 @@ class YearsViewComponent {
         this.yearsViewHeaderContext = computed(() => {
             const yearRangeStart = this.currentYearRangeStart();
             const yearRangeEnd = yearRangeStart + 23;
-            const dateRange = new DateRange(new Date(yearRangeStart, 0, 2), // second day of month to prevent timezone issues
-            new Date(yearRangeEnd, 0, 2));
+            const dateRange = new DateRange(getUTCDate(yearRangeStart, 0, 2), // second day of month to prevent timezone issues
+            getUTCDate(yearRangeEnd, 0, 2));
             const yearRange = {
                 from: yearRangeStart,
                 to: yearRangeEnd,
@@ -7945,7 +7964,7 @@ class YearsViewComponent {
         });
         this.yearContext = computed(() => {
             return (year) => {
-                const date = new Date(year, 1, 2); // second day of month to prevent timezone issues
+                const date = getUTCDate(year, 1, 2); // second day of month to prevent timezone issues
                 return {
                     value: year,
                     date,
@@ -8147,7 +8166,7 @@ class YearsViewComponent {
         this.triggerHighlightSameYearNextPage.emit(event.altKey);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YearsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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 }, selectedDateEnd: { classPropertyName: "selectedDateEnd", publicName: "selectedDateEnd", isSignal: true, isRequired: true, transformFunction: null }, rangeSelectionMode: { classPropertyName: "rangeSelectionMode", publicName: "rangeSelectionMode", isSignal: true, isRequired: true, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", 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 }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", 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 }, yearsViewHeaderDateFormat: { classPropertyName: "yearsViewHeaderDateFormat", publicName: "yearsViewHeaderDateFormat", isSignal: true, isRequired: true, transformFunction: null }, yearDateFormat: { classPropertyName: "yearDateFormat", publicName: "yearDateFormat", 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-hideNextPageButton=\"hideNextPageButton\"\r\n      let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n      let-openDaysView=\"openDaysView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <div>\r\n          @if (!hidePreviousPageButton) {\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          }\r\n        </div>\r\n        <ard-button\r\n          class=\"ard-calendar__header-button\"\r\n          appearance=\"transparent\"\r\n          color=\"none\"\r\n          variant=\"pill\"\r\n          [tabIndex]=\"tabIndex()\"\r\n          (click)=\"openDaysView()\"\r\n        >\r\n          {{ dateRange.from | date : yearsViewHeaderDateFormat() }}\r\n          &mdash;\r\n          {{ dateRange.to | date : yearsViewHeaderDateFormat() }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div>\r\n          @if (!hideNextPageButton) {\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          }\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-highlighted-in-range]=\"isYearBetweenSelectedHighlighted(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__entry-selected-start]=\"isYearSelectedStart(year.value)\"\r\n      [class.ard-calendar__entry-selected-end]=\"isYearSelectedEnd(year.value)\"\r\n      [class.ard-calendar__entry-selected-in-range]=\"isYearBetweenSelectedRange(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-range-overlay\"></div>\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 : yearDateFormat() }}\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", "ariaLabel", "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: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 }, selectedDateEnd: { classPropertyName: "selectedDateEnd", publicName: "selectedDateEnd", isSignal: true, isRequired: true, transformFunction: null }, rangeSelectionMode: { classPropertyName: "rangeSelectionMode", publicName: "rangeSelectionMode", isSignal: true, isRequired: true, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", 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 }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", isSignal: true, isRequired: true, transformFunction: null }, currentYearRangeStart: { classPropertyName: "currentYearRangeStart", publicName: "currentYearRangeStart", isSignal: true, isRequired: true, transformFunction: null }, multipleYearPageSize: { classPropertyName: "multipleYearPageSize", publicName: "multipleYearPageSize", 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 }, yearsViewHeaderDateFormat: { classPropertyName: "yearsViewHeaderDateFormat", publicName: "yearsViewHeaderDateFormat", isSignal: true, isRequired: true, transformFunction: null }, yearDateFormat: { classPropertyName: "yearDateFormat", publicName: "yearDateFormat", 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-hideNextPageButton=\"hideNextPageButton\"\r\n      let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n      let-openDaysView=\"openDaysView\"\r\n    >\r\n      <div class=\"ard-calendar__calendar-header\">\r\n        <div>\r\n          @if (!hidePreviousPageButton) {\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          }\r\n        </div>\r\n        <ard-button\r\n          class=\"ard-calendar__header-button\"\r\n          appearance=\"transparent\"\r\n          color=\"none\"\r\n          variant=\"pill\"\r\n          [tabIndex]=\"tabIndex()\"\r\n          (click)=\"openDaysView()\"\r\n        >\r\n          {{ dateRange.from | date : yearsViewHeaderDateFormat() }}\r\n          &mdash;\r\n          {{ dateRange.to | date : yearsViewHeaderDateFormat() }}\r\n          <div class=\"ard-dropdown-arrow\"></div>\r\n        </ard-button>\r\n        <div>\r\n          @if (!hideNextPageButton) {\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          }\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-highlighted-in-range]=\"isYearBetweenSelectedHighlighted(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__entry-selected-start]=\"isYearSelectedStart(year.value)\"\r\n      [class.ard-calendar__entry-selected-end]=\"isYearSelectedEnd(year.value)\"\r\n      [class.ard-calendar__entry-selected-in-range]=\"isYearBetweenSelectedRange(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-range-overlay\"></div>\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 : yearDateFormat() }}\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", "ariaLabel", "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: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YearsViewComponent, decorators: [{
             type: Component,
@@ -8196,7 +8215,7 @@ class ArdiumCalendarComponent extends _AbstractCalendar {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumCalendarComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-calendar\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @switch (activeView()) { @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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [firstWeekday]=\"firstWeekday()\"\r\n    [staticHeight]=\"staticHeight()\"\r\n    [highlightedDay]=\"highlightedDay()\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [hideFloatingMonth]=\"hideFloatingMonth()\"\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    [daysViewHeaderDateFormat]=\"daysViewHeaderDateFormat()\"\r\n    [weekdayDateFormat]=\"weekdayDateFormat()\"\r\n    [weekdayTitleDateFormat]=\"weekdayTitleDateFormat()\"\r\n    [floatingMonthDateFormat]=\"floatingMonthDateFormat()\"\r\n    [floatingMonthTitleDateFormat]=\"floatingMonthTitleDateFormat()\"\r\n    [dayDateFormat]=\"dayDateFormat()\"\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  } @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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [highlightedMonth]=\"highlightedMonth()\"\r\n    [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n    [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n    [monthsViewHeaderDateFormat]=\"monthsViewHeaderDateFormat()\"\r\n    [monthDateFormat]=\"monthDateFormat()\"\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  } @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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n    [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n    [yearsViewHeaderDateFormat]=\"yearsViewHeaderDateFormat()\"\r\n    [yearDateFormat]=\"yearDateFormat()\"\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</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", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "isDayFilteredOut", "highlightedDay", "firstWeekday", "staticHeight", "hideFloatingMonth", "daysViewHeaderTemplate", "floatingMonthTemplate", "weekdayTemplate", "dayTemplate", "daysViewHeaderDateFormat", "weekdayDateFormat", "weekdayTitleDateFormat", "floatingMonthDateFormat", "floatingMonthTitleDateFormat", "dayDateFormat"], 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", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "highlightedMonth", "monthsViewHeaderTemplate", "monthTemplate", "monthsViewHeaderDateFormat", "monthDateFormat"], 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", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "currentYearRangeStart", "highlightedYear", "yearsViewHeaderTemplate", "yearTemplate", "yearsViewHeaderDateFormat", "yearDateFormat"], outputs: ["triggerOpenMonthsView", "triggerOpenDaysView", "focus", "blur", "triggerSelectYear", "triggerChangeYearsViewPage", "triggerHighlightYear", "triggerHighlightNextYear", "triggerHighlightPreviousYear", "triggerHighlightFirstYear", "triggerHighlightLastYear", "triggerHighlightSameYearPreviousPage", "triggerHighlightSameYearNextPage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-calendar\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @switch (activeView()) { @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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [firstWeekday]=\"firstWeekday()\"\r\n    [staticHeight]=\"staticHeight()\"\r\n    [highlightedDay]=\"highlightedDay()\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [hideFloatingMonth]=\"hideFloatingMonth()\"\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    [daysViewHeaderDateFormat]=\"daysViewHeaderDateFormat()\"\r\n    [weekdayDateFormat]=\"weekdayDateFormat()\"\r\n    [weekdayTitleDateFormat]=\"weekdayTitleDateFormat()\"\r\n    [floatingMonthDateFormat]=\"floatingMonthDateFormat()\"\r\n    [floatingMonthTitleDateFormat]=\"floatingMonthTitleDateFormat()\"\r\n    [dayDateFormat]=\"dayDateFormat()\"\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  } @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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [highlightedMonth]=\"highlightedMonth()\"\r\n    [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n    [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n    [monthsViewHeaderDateFormat]=\"monthsViewHeaderDateFormat()\"\r\n    [monthDateFormat]=\"monthDateFormat()\"\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  } @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    [multipleYearPageSize]=\"multipleYearPageSize()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n    [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n    [yearsViewHeaderDateFormat]=\"yearsViewHeaderDateFormat()\"\r\n    [yearDateFormat]=\"yearDateFormat()\"\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</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", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "isDayFilteredOut", "highlightedDay", "firstWeekday", "staticHeight", "hideFloatingMonth", "daysViewHeaderTemplate", "floatingMonthTemplate", "weekdayTemplate", "dayTemplate", "daysViewHeaderDateFormat", "weekdayDateFormat", "weekdayTitleDateFormat", "floatingMonthDateFormat", "floatingMonthTitleDateFormat", "dayDateFormat"], 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", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "highlightedMonth", "monthsViewHeaderTemplate", "monthTemplate", "monthsViewHeaderDateFormat", "monthDateFormat"], 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", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "currentYearRangeStart", "multipleYearPageSize", "highlightedYear", "yearsViewHeaderTemplate", "yearTemplate", "yearsViewHeaderDateFormat", "yearDateFormat"], outputs: ["triggerOpenMonthsView", "triggerOpenDaysView", "focus", "blur", "triggerSelectYear", "triggerChangeYearsViewPage", "triggerHighlightYear", "triggerHighlightNextYear", "triggerHighlightPreviousYear", "triggerHighlightFirstYear", "triggerHighlightLastYear", "triggerHighlightSameYearPreviousPage", "triggerHighlightSameYearNextPage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumCalendarComponent, decorators: [{
             type: Component,
@@ -8210,7 +8229,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumCalendarComponent,
                         },
-                    ], template: "<div\r\n  class=\"ard-calendar\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @switch (activeView()) { @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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [firstWeekday]=\"firstWeekday()\"\r\n    [staticHeight]=\"staticHeight()\"\r\n    [highlightedDay]=\"highlightedDay()\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [hideFloatingMonth]=\"hideFloatingMonth()\"\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    [daysViewHeaderDateFormat]=\"daysViewHeaderDateFormat()\"\r\n    [weekdayDateFormat]=\"weekdayDateFormat()\"\r\n    [weekdayTitleDateFormat]=\"weekdayTitleDateFormat()\"\r\n    [floatingMonthDateFormat]=\"floatingMonthDateFormat()\"\r\n    [floatingMonthTitleDateFormat]=\"floatingMonthTitleDateFormat()\"\r\n    [dayDateFormat]=\"dayDateFormat()\"\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  } @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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [highlightedMonth]=\"highlightedMonth()\"\r\n    [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n    [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n    [monthsViewHeaderDateFormat]=\"monthsViewHeaderDateFormat()\"\r\n    [monthDateFormat]=\"monthDateFormat()\"\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  } @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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n    [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n    [yearsViewHeaderDateFormat]=\"yearsViewHeaderDateFormat()\"\r\n    [yearDateFormat]=\"yearDateFormat()\"\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</div>\r\n" }]
+                    ], template: "<div\r\n  class=\"ard-calendar\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @switch (activeView()) { @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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [firstWeekday]=\"firstWeekday()\"\r\n    [staticHeight]=\"staticHeight()\"\r\n    [highlightedDay]=\"highlightedDay()\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [hideFloatingMonth]=\"hideFloatingMonth()\"\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    [daysViewHeaderDateFormat]=\"daysViewHeaderDateFormat()\"\r\n    [weekdayDateFormat]=\"weekdayDateFormat()\"\r\n    [weekdayTitleDateFormat]=\"weekdayTitleDateFormat()\"\r\n    [floatingMonthDateFormat]=\"floatingMonthDateFormat()\"\r\n    [floatingMonthTitleDateFormat]=\"floatingMonthTitleDateFormat()\"\r\n    [dayDateFormat]=\"dayDateFormat()\"\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  } @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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [highlightedMonth]=\"highlightedMonth()\"\r\n    [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n    [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n    [monthsViewHeaderDateFormat]=\"monthsViewHeaderDateFormat()\"\r\n    [monthDateFormat]=\"monthDateFormat()\"\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  } @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    [multipleYearPageSize]=\"multipleYearPageSize()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n    [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n    [yearsViewHeaderDateFormat]=\"yearsViewHeaderDateFormat()\"\r\n    [yearDateFormat]=\"yearDateFormat()\"\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</div>\r\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_CALENDAR_DEFAULTS]
@@ -8265,7 +8284,9 @@ class ArdiumCalendarModule {
             ArdCalendarYearTemplateDirective,
             ArdCalendarMonthTemplateDirective,
             ArdCalendarDayTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumCalendarModule, imports: [CommonModule, _CalendarViewsModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumCalendarModule, providers: [
+            { provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: { timezone: '+0000' } },
+        ], imports: [CommonModule, _CalendarViewsModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumCalendarModule, decorators: [{
             type: NgModule,
@@ -8295,6 +8316,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         ArdCalendarMonthTemplateDirective,
                         ArdCalendarDayTemplateDirective,
                     ],
+                    providers: [
+                        { provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: { timezone: '+0000' } },
+                    ],
                 }]
         }] });
 
@@ -8350,7 +8374,7 @@ class ArdiumRangeCalendarComponent extends _AbstractCalendar {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumRangeCalendarComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-calendar\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @switch (activeView()) { @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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [firstWeekday]=\"firstWeekday()\"\r\n    [staticHeight]=\"staticHeight()\"\r\n    [highlightedDay]=\"highlightedDay()\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [hideFloatingMonth]=\"hideFloatingMonth()\"\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    [daysViewHeaderDateFormat]=\"daysViewHeaderDateFormat()\"\r\n    [weekdayDateFormat]=\"weekdayDateFormat()\"\r\n    [weekdayTitleDateFormat]=\"weekdayTitleDateFormat()\"\r\n    [floatingMonthDateFormat]=\"floatingMonthDateFormat()\"\r\n    [floatingMonthTitleDateFormat]=\"floatingMonthTitleDateFormat()\"\r\n    [dayDateFormat]=\"dayDateFormat()\"\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  } @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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [highlightedMonth]=\"highlightedMonth()\"\r\n    [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n    [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n    [monthsViewHeaderDateFormat]=\"monthsViewHeaderDateFormat()\"\r\n    [monthDateFormat]=\"monthDateFormat()\"\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  } @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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n    [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n    [yearsViewHeaderDateFormat]=\"yearsViewHeaderDateFormat()\"\r\n    [yearDateFormat]=\"yearDateFormat()\"\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</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", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "isDayFilteredOut", "highlightedDay", "firstWeekday", "staticHeight", "hideFloatingMonth", "daysViewHeaderTemplate", "floatingMonthTemplate", "weekdayTemplate", "dayTemplate", "daysViewHeaderDateFormat", "weekdayDateFormat", "weekdayTitleDateFormat", "floatingMonthDateFormat", "floatingMonthTitleDateFormat", "dayDateFormat"], 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", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "highlightedMonth", "monthsViewHeaderTemplate", "monthTemplate", "monthsViewHeaderDateFormat", "monthDateFormat"], 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", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "currentYearRangeStart", "highlightedYear", "yearsViewHeaderTemplate", "yearTemplate", "yearsViewHeaderDateFormat", "yearDateFormat"], outputs: ["triggerOpenMonthsView", "triggerOpenDaysView", "focus", "blur", "triggerSelectYear", "triggerChangeYearsViewPage", "triggerHighlightYear", "triggerHighlightNextYear", "triggerHighlightPreviousYear", "triggerHighlightFirstYear", "triggerHighlightLastYear", "triggerHighlightSameYearPreviousPage", "triggerHighlightSameYearNextPage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-calendar\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @switch (activeView()) { @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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [firstWeekday]=\"firstWeekday()\"\r\n    [staticHeight]=\"staticHeight()\"\r\n    [highlightedDay]=\"highlightedDay()\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [hideFloatingMonth]=\"hideFloatingMonth()\"\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    [daysViewHeaderDateFormat]=\"daysViewHeaderDateFormat()\"\r\n    [weekdayDateFormat]=\"weekdayDateFormat()\"\r\n    [weekdayTitleDateFormat]=\"weekdayTitleDateFormat()\"\r\n    [floatingMonthDateFormat]=\"floatingMonthDateFormat()\"\r\n    [floatingMonthTitleDateFormat]=\"floatingMonthTitleDateFormat()\"\r\n    [dayDateFormat]=\"dayDateFormat()\"\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  } @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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [highlightedMonth]=\"highlightedMonth()\"\r\n    [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n    [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n    [monthsViewHeaderDateFormat]=\"monthsViewHeaderDateFormat()\"\r\n    [monthDateFormat]=\"monthDateFormat()\"\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  } @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    [multipleYearPageSize]=\"multipleYearPageSize()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n    [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n    [yearsViewHeaderDateFormat]=\"yearsViewHeaderDateFormat()\"\r\n    [yearDateFormat]=\"yearDateFormat()\"\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</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", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "isDayFilteredOut", "highlightedDay", "firstWeekday", "staticHeight", "hideFloatingMonth", "daysViewHeaderTemplate", "floatingMonthTemplate", "weekdayTemplate", "dayTemplate", "daysViewHeaderDateFormat", "weekdayDateFormat", "weekdayTitleDateFormat", "floatingMonthDateFormat", "floatingMonthTitleDateFormat", "dayDateFormat"], 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", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "highlightedMonth", "monthsViewHeaderTemplate", "monthTemplate", "monthsViewHeaderDateFormat", "monthDateFormat"], 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", "selectedDateEnd", "rangeSelectionMode", "UTC", "min", "max", "multiCalendarLocation", "currentYearRangeStart", "multipleYearPageSize", "highlightedYear", "yearsViewHeaderTemplate", "yearTemplate", "yearsViewHeaderDateFormat", "yearDateFormat"], outputs: ["triggerOpenMonthsView", "triggerOpenDaysView", "focus", "blur", "triggerSelectYear", "triggerChangeYearsViewPage", "triggerHighlightYear", "triggerHighlightNextYear", "triggerHighlightPreviousYear", "triggerHighlightFirstYear", "triggerHighlightLastYear", "triggerHighlightSameYearPreviousPage", "triggerHighlightSameYearNextPage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumRangeCalendarComponent, decorators: [{
             type: Component,
@@ -8364,7 +8388,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumRangeCalendarComponent,
                         },
-                    ], template: "<div\r\n  class=\"ard-calendar\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @switch (activeView()) { @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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [firstWeekday]=\"firstWeekday()\"\r\n    [staticHeight]=\"staticHeight()\"\r\n    [highlightedDay]=\"highlightedDay()\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [hideFloatingMonth]=\"hideFloatingMonth()\"\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    [daysViewHeaderDateFormat]=\"daysViewHeaderDateFormat()\"\r\n    [weekdayDateFormat]=\"weekdayDateFormat()\"\r\n    [weekdayTitleDateFormat]=\"weekdayTitleDateFormat()\"\r\n    [floatingMonthDateFormat]=\"floatingMonthDateFormat()\"\r\n    [floatingMonthTitleDateFormat]=\"floatingMonthTitleDateFormat()\"\r\n    [dayDateFormat]=\"dayDateFormat()\"\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  } @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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [highlightedMonth]=\"highlightedMonth()\"\r\n    [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n    [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n    [monthsViewHeaderDateFormat]=\"monthsViewHeaderDateFormat()\"\r\n    [monthDateFormat]=\"monthDateFormat()\"\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  } @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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n    [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n    [yearsViewHeaderDateFormat]=\"yearsViewHeaderDateFormat()\"\r\n    [yearDateFormat]=\"yearDateFormat()\"\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</div>\r\n" }]
+                    ], template: "<div\r\n  class=\"ard-calendar\"\r\n  [ngClass]=\"ngClasses()\"\r\n>\r\n  @switch (activeView()) { @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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [firstWeekday]=\"firstWeekday()\"\r\n    [staticHeight]=\"staticHeight()\"\r\n    [highlightedDay]=\"highlightedDay()\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [hideFloatingMonth]=\"hideFloatingMonth()\"\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    [daysViewHeaderDateFormat]=\"daysViewHeaderDateFormat()\"\r\n    [weekdayDateFormat]=\"weekdayDateFormat()\"\r\n    [weekdayTitleDateFormat]=\"weekdayTitleDateFormat()\"\r\n    [floatingMonthDateFormat]=\"floatingMonthDateFormat()\"\r\n    [floatingMonthTitleDateFormat]=\"floatingMonthTitleDateFormat()\"\r\n    [dayDateFormat]=\"dayDateFormat()\"\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  } @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]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [highlightedMonth]=\"highlightedMonth()\"\r\n    [monthsViewHeaderTemplate]=\"monthsViewHeaderTemplate()?.template ?? templateRepository()?.monthsViewHeaderTmp()?.template\"\r\n    [monthTemplate]=\"monthTemplate()?.template ?? templateRepository()?.monthTmp()?.template\"\r\n    [monthsViewHeaderDateFormat]=\"monthsViewHeaderDateFormat()\"\r\n    [monthDateFormat]=\"monthDateFormat()\"\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  } @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    [multipleYearPageSize]=\"multipleYearPageSize()\"\r\n    [selectedDate]=\"selectionStart()\"\r\n    [selectedDateEnd]=\"endDate()\"\r\n    [rangeSelectionMode]=\"isRangeSelector\"\r\n    [UTC]=\"UTC()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [multiCalendarLocation]=\"multiCalendarLocation()\"\r\n    [yearsViewHeaderTemplate]=\"yearsViewHeaderTemplate()?.template ?? templateRepository()?.yearsViewHeaderTmp()?.template\"\r\n    [yearTemplate]=\"yearTemplate()?.template ?? templateRepository()?.yearTmp()?.template\"\r\n    [yearsViewHeaderDateFormat]=\"yearsViewHeaderDateFormat()\"\r\n    [yearDateFormat]=\"yearDateFormat()\"\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</div>\r\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_CALENDAR_DEFAULTS]
@@ -8504,7 +8528,9 @@ class ArdiumRangeCalendarModule {
             ArdRangeCalendarYearTemplateDirective,
             ArdRangeCalendarMonthTemplateDirective,
             ArdRangeCalendarDayTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumRangeCalendarModule, imports: [CommonModule, _CalendarViewsModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumRangeCalendarModule, providers: [
+            { provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: { timezone: '+0000' } },
+        ], imports: [CommonModule, _CalendarViewsModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumRangeCalendarModule, decorators: [{
             type: NgModule,
@@ -8534,6 +8560,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         ArdRangeCalendarMonthTemplateDirective,
                         ArdRangeCalendarDayTemplateDirective,
                     ],
+                    providers: [
+                        { provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: { timezone: '+0000' } },
+                    ],
                 }]
         }] });
 
@@ -8546,7 +8575,7 @@ const DEFAULT_DATE_INPUT_SERIALIZE_FN = (value) => {
     return '';
 };
 const DEFAULT_DATE_RANGE_INPUT_SERIALIZE_FN = (value) => {
-    if (value instanceof DateRange) {
+    if (isDateRange(value)) {
         const from = `${value.from.getDate().toString().padStart(2, '0')}/${(value.from.getMonth() + 1)
             .toString()
             .padStart(2, '0')}/${value.from.getFullYear()}`;
@@ -8851,7 +8880,9 @@ class ArdiumDateInputModule {
             ArdDateInputWeekdayTemplateDirective,
             ArdDateInputYearsViewHeaderTemplateDirective,
             ArdDateInputYearTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDateInputModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDateInputModule, providers: [
+            { provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: { timezone: '+0000' } },
+        ], imports: [CommonModule,
             ArdiumFormFieldFrameModule,
             ArdiumDropdownPanelModule,
             ArdiumClickOutsideModule,
@@ -8908,6 +8939,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         ArdDateInputYearsViewHeaderTemplateDirective,
                         ArdDateInputYearTemplateDirective,
                     ],
+                    providers: [
+                        { provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: { timezone: '+0000' } },
+                    ],
                 }]
         }] });
 
@@ -9091,7 +9125,7 @@ class ArdiumDateRangeInputComponent extends _AbstractDateInput {
             return isNull(this.value());
         });
         this.shouldDisplayValue = computed(() => {
-            return this.value() instanceof DateRange;
+            return isDateRange(this.value());
         });
         this.shouldDisplayDateInput = computed(() => false);
         this.calendarDaysViewHeaderTemplate = contentChild(ArdDateRangeInputDaysViewHeaderTemplateDirective);
@@ -9187,7 +9221,9 @@ class ArdiumDateRangeInputModule {
             ArdDateRangeInputWeekdayTemplateDirective,
             ArdDateRangeInputYearsViewHeaderTemplateDirective,
             ArdDateRangeInputYearTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDateRangeInputModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDateRangeInputModule, providers: [
+            { provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: { timezone: '+0000' } },
+        ], imports: [CommonModule,
             ArdiumFormFieldFrameModule,
             ArdiumDropdownPanelModule,
             ArdiumClickOutsideModule,
@@ -9244,6 +9280,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         ArdDateRangeInputYearsViewHeaderTemplateDirective,
                         ArdDateRangeInputYearTemplateDirective,
                     ],
+                    providers: [
+                        { provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: { timezone: '+0000' } },
+                    ],
                 }]
         }] });
 
@@ -9468,7 +9507,7 @@ class ArdiumMultipageDateRangeInputComponent extends _AbstractDateInput {
             return isNull(this.value());
         });
         this.shouldDisplayValue = computed(() => {
-            return this.value() instanceof DateRange;
+            return isDateRange(this.value());
         });
         this.shouldDisplayDateInput = computed(() => false);
         this.calendarDaysViewHeaderTemplate = contentChild(ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective);
@@ -9514,7 +9553,7 @@ class ArdiumMultipageDateRangeInputComponent extends _AbstractDateInput {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumMultipageDateRangeInputComponent,
             },
-        ], queries: [{ propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdMultipageDateRangeInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdMultipageDateRangeInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdMultipageDateRangeInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdMultipageDateRangeInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdMultipageDateRangeInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdMultipageDateRangeInputDayTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\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 ard-multipage-date-range-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          {{ 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\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    <div class=\"ard-date-input__multipage-wrapper\">\r\n      @for (calendarData of calendarDataArray(); track $index) {\r\n\r\n      <ard-range-calendar\r\n        class=\"ard-date-input__calendar\"\r\n        [activeMonth]=\"calendarData.activeDate.getMonth()\"\r\n        [activeYear]=\"calendarData.activeDate.getFullYear()\"\r\n        (activePageChange)=\"onActivePageChange($event, $index)\"\r\n        (highlightDay)=\"onHighlightDate($event)\"\r\n        [highlightedDay]=\"calendarData.highlightedDay\"\r\n        [(activeView)]=\"activeView\"\r\n        [firstWeekday]=\"firstWeekday()\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [UTC]=\"_UTCAfterInit()\"\r\n        [autoFocus]=\"$index === 0\"\r\n        hideFloatingMonth\r\n        staticHeight\r\n        [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n        [color]=\"color()\"\r\n        [disabled]=\"disabled() || calendarDisabled()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [value]=\"value()\"\r\n        [multiCalendarLocation]=\"calendarData.location\"\r\n        [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n        [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n        [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n        [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n        [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n        [yearDateFormat]=\"calendarYearDateFormat()\"\r\n        [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n        [dayDateFormat]=\"calendarDayDateFormat()\"\r\n        (valueChange)=\"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() ?? { template: defaultDaysViewHeaderTemplate }\"\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-range-calendar>\r\n      }\r\n    </div>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\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\r\n<ng-template\r\n  #defaultDaysViewHeaderTemplate\r\n  let-currDate\r\n  let-nextMonth=\"nextMonth\"\r\n  let-prevMonth=\"prevMonth\"\r\n  let-canGoToNextMonth=\"canGoToNextPage\"\r\n  let-canGoToPreviousMonth=\"canGoToPreviousPage\"\r\n  let-hideNextPageButton=\"hideNextPageButton\"\r\n  let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n>\r\n  <div class=\"ard-calendar__calendar-header\">\r\n    <div>\r\n      @if (!hidePreviousPageButton) {\r\n      <ard-icon-button\r\n        size=\"small\"\r\n        appearance=\"transparent\"\r\n        color=\"none\"\r\n        (click)=\"prevMonth()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [disabled]=\"!canGoToPreviousMonth\"\r\n      >\r\n        <ard-icon>chevron_left</ard-icon>\r\n      </ard-icon-button>\r\n      }\r\n    </div>\r\n    <span class=\"ard-calendar__header-button\">\r\n      {{ currDate | date : calendarDaysViewHeaderDateFormat() | uppercase }}\r\n    </span>\r\n    <div>\r\n      @if (!hideNextPageButton) {\r\n      <ard-icon-button\r\n        size=\"small\"\r\n        appearance=\"transparent\"\r\n        color=\"none\"\r\n        (click)=\"nextMonth()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [disabled]=\"!canGoToNextMonth\"\r\n      >\r\n        <ard-icon>chevron_right</ard-icon>\r\n      </ard-icon-button>\r\n      }\r\n    </div>\r\n  </div>\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: i4.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumRangeCalendarComponent, selector: "ard-range-calendar", inputs: ["value"], outputs: ["valueChange", "startSelection"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { 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"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "calendarDaysViewHeaderTemplate", first: true, predicate: ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearsViewHeaderTemplate", first: true, predicate: ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthsViewHeaderTemplate", first: true, predicate: ArdMultipageDateRangeInputMonthsViewHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarWeekdayTemplate", first: true, predicate: ArdMultipageDateRangeInputWeekdayTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarFloatingMonthTemplate", first: true, predicate: ArdMultipageDateRangeInputFloatingMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarYearTemplate", first: true, predicate: ArdMultipageDateRangeInputYearTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarMonthTemplate", first: true, predicate: ArdMultipageDateRangeInputMonthTemplateDirective, descendants: true, isSignal: true }, { propertyName: "calendarDayTemplate", first: true, predicate: ArdMultipageDateRangeInputDayTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\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 ard-multipage-date-range-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          {{ 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\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    <div class=\"ard-date-input__multipage-wrapper\">\r\n      @for (calendarData of calendarDataArray(); track $index) {\r\n      <ard-range-calendar\r\n        class=\"ard-date-input__calendar\"\r\n        [activeMonth]=\"calendarData.activeDate.getMonth()\"\r\n        [activeYear]=\"calendarData.activeDate.getFullYear()\"\r\n        (activePageChange)=\"onActivePageChange($event, $index)\"\r\n        (highlightDay)=\"onHighlightDate($event)\"\r\n        [highlightedDay]=\"calendarData.highlightedDay\"\r\n        [(activeView)]=\"activeView\"\r\n        [firstWeekday]=\"firstWeekday()\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [UTC]=\"_UTCAfterInit()\"\r\n        [autoFocus]=\"$index === 0\"\r\n        hideFloatingMonth\r\n        staticHeight\r\n        [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n        [color]=\"color()\"\r\n        [disabled]=\"disabled() || calendarDisabled()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [value]=\"value()\"\r\n        [multiCalendarLocation]=\"calendarData.location\"\r\n        [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n        [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n        [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n        [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n        [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n        [yearDateFormat]=\"calendarYearDateFormat()\"\r\n        [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n        [dayDateFormat]=\"calendarDayDateFormat()\"\r\n        (valueChange)=\"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() ?? { template: defaultDaysViewHeaderTemplate }\"\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-range-calendar>\r\n      }\r\n    </div>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\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\r\n<ng-template\r\n  #defaultDaysViewHeaderTemplate\r\n  let-currDate\r\n  let-nextMonth=\"nextMonth\"\r\n  let-prevMonth=\"prevMonth\"\r\n  let-canGoToNextMonth=\"canGoToNextPage\"\r\n  let-canGoToPreviousMonth=\"canGoToPreviousPage\"\r\n  let-hideNextPageButton=\"hideNextPageButton\"\r\n  let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n>\r\n  <div class=\"ard-calendar__calendar-header\">\r\n    <div>\r\n      @if (!hidePreviousPageButton) {\r\n      <ard-icon-button\r\n        size=\"small\"\r\n        appearance=\"transparent\"\r\n        color=\"none\"\r\n        (click)=\"prevMonth()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [disabled]=\"!canGoToPreviousMonth\"\r\n      >\r\n        <ard-icon>chevron_left</ard-icon>\r\n      </ard-icon-button>\r\n      }\r\n    </div>\r\n    <span class=\"ard-calendar__header-button\">\r\n      {{ currDate | date : calendarDaysViewHeaderDateFormat() | uppercase }}\r\n    </span>\r\n    <div>\r\n      @if (!hideNextPageButton) {\r\n      <ard-icon-button\r\n        size=\"small\"\r\n        appearance=\"transparent\"\r\n        color=\"none\"\r\n        (click)=\"nextMonth()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [disabled]=\"!canGoToNextMonth\"\r\n      >\r\n        <ard-icon>chevron_right</ard-icon>\r\n      </ard-icon-button>\r\n      }\r\n    </div>\r\n  </div>\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: i4.ArdiumClickOutsideDirective, selector: "[ardClickOutside]", outputs: ["ardClickOutside"] }, { kind: "component", type: ArdiumRangeCalendarComponent, selector: "ard-range-calendar", inputs: ["value"], outputs: ["valueChange", "startSelection"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { 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"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumMultipageDateRangeInputComponent, decorators: [{
             type: Component,
@@ -9528,7 +9567,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumMultipageDateRangeInputComponent,
                         },
-                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\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 ard-multipage-date-range-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          {{ 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\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    <div class=\"ard-date-input__multipage-wrapper\">\r\n      @for (calendarData of calendarDataArray(); track $index) {\r\n\r\n      <ard-range-calendar\r\n        class=\"ard-date-input__calendar\"\r\n        [activeMonth]=\"calendarData.activeDate.getMonth()\"\r\n        [activeYear]=\"calendarData.activeDate.getFullYear()\"\r\n        (activePageChange)=\"onActivePageChange($event, $index)\"\r\n        (highlightDay)=\"onHighlightDate($event)\"\r\n        [highlightedDay]=\"calendarData.highlightedDay\"\r\n        [(activeView)]=\"activeView\"\r\n        [firstWeekday]=\"firstWeekday()\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [UTC]=\"_UTCAfterInit()\"\r\n        [autoFocus]=\"$index === 0\"\r\n        hideFloatingMonth\r\n        staticHeight\r\n        [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n        [color]=\"color()\"\r\n        [disabled]=\"disabled() || calendarDisabled()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [value]=\"value()\"\r\n        [multiCalendarLocation]=\"calendarData.location\"\r\n        [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n        [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n        [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n        [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n        [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n        [yearDateFormat]=\"calendarYearDateFormat()\"\r\n        [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n        [dayDateFormat]=\"calendarDayDateFormat()\"\r\n        (valueChange)=\"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() ?? { template: defaultDaysViewHeaderTemplate }\"\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-range-calendar>\r\n      }\r\n    </div>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\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\r\n<ng-template\r\n  #defaultDaysViewHeaderTemplate\r\n  let-currDate\r\n  let-nextMonth=\"nextMonth\"\r\n  let-prevMonth=\"prevMonth\"\r\n  let-canGoToNextMonth=\"canGoToNextPage\"\r\n  let-canGoToPreviousMonth=\"canGoToPreviousPage\"\r\n  let-hideNextPageButton=\"hideNextPageButton\"\r\n  let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n>\r\n  <div class=\"ard-calendar__calendar-header\">\r\n    <div>\r\n      @if (!hidePreviousPageButton) {\r\n      <ard-icon-button\r\n        size=\"small\"\r\n        appearance=\"transparent\"\r\n        color=\"none\"\r\n        (click)=\"prevMonth()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [disabled]=\"!canGoToPreviousMonth\"\r\n      >\r\n        <ard-icon>chevron_left</ard-icon>\r\n      </ard-icon-button>\r\n      }\r\n    </div>\r\n    <span class=\"ard-calendar__header-button\">\r\n      {{ currDate | date : calendarDaysViewHeaderDateFormat() | uppercase }}\r\n    </span>\r\n    <div>\r\n      @if (!hideNextPageButton) {\r\n      <ard-icon-button\r\n        size=\"small\"\r\n        appearance=\"transparent\"\r\n        color=\"none\"\r\n        (click)=\"nextMonth()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [disabled]=\"!canGoToNextMonth\"\r\n      >\r\n        <ard-icon>chevron_right</ard-icon>\r\n      </ard-icon-button>\r\n      }\r\n    </div>\r\n  </div>\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"] }]
+                    ], template: "<ard-form-field-frame\r\n  [appearance]=\"appearance()\"\r\n  [variant]=\"variant()\"\r\n  [compact]=\"compact()\"\r\n  [readonly]=\"readonly()\"\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 ard-multipage-date-range-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          {{ 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\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    <div class=\"ard-date-input__multipage-wrapper\">\r\n      @for (calendarData of calendarDataArray(); track $index) {\r\n      <ard-range-calendar\r\n        class=\"ard-date-input__calendar\"\r\n        [activeMonth]=\"calendarData.activeDate.getMonth()\"\r\n        [activeYear]=\"calendarData.activeDate.getFullYear()\"\r\n        (activePageChange)=\"onActivePageChange($event, $index)\"\r\n        (highlightDay)=\"onHighlightDate($event)\"\r\n        [highlightedDay]=\"calendarData.highlightedDay\"\r\n        [(activeView)]=\"activeView\"\r\n        [firstWeekday]=\"firstWeekday()\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [UTC]=\"_UTCAfterInit()\"\r\n        [autoFocus]=\"$index === 0\"\r\n        hideFloatingMonth\r\n        staticHeight\r\n        [multipleYearPageChangeModifier]=\"multipleYearPageChangeModifier()\"\r\n        [color]=\"color()\"\r\n        [disabled]=\"disabled() || calendarDisabled()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [value]=\"value()\"\r\n        [multiCalendarLocation]=\"calendarData.location\"\r\n        [daysViewHeaderDateFormat]=\"calendarDaysViewHeaderDateFormat()\"\r\n        [yearsViewHeaderDateFormat]=\"calendarYearsViewHeaderDateFormat()\"\r\n        [monthsViewHeaderDateFormat]=\"calendarMonthsViewHeaderDateFormat()\"\r\n        [weekdayDateFormat]=\"calendarWeekdayDateFormat()\"\r\n        [weekdayTitleDateFormat]=\"calendarWeekdayTitleDateFormat()\"\r\n        [yearDateFormat]=\"calendarYearDateFormat()\"\r\n        [monthDateFormat]=\"calendarMonthDateFormat()\"\r\n        [dayDateFormat]=\"calendarDayDateFormat()\"\r\n        (valueChange)=\"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() ?? { template: defaultDaysViewHeaderTemplate }\"\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-range-calendar>\r\n      }\r\n    </div>\r\n    @if (useAcceptButtonToSelect()) {\r\n    <div class=\"ard-date-input__accept-buttons-container\">\r\n      <ng-template\r\n        #defaultAcceptButtonsTemplate\r\n        let-accept=\"accept\"\r\n        let-cancel=\"cancel\"\r\n        let-disabled=\"disabled\"\r\n      >\r\n        <ard-button\r\n          appearance=\"outlined\"\r\n          color=\"none\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"cancel()\"\r\n        >\r\n          {{ cancelButtonText() }}\r\n        </ard-button>\r\n        <ard-button\r\n          appearance=\"raised\"\r\n          [color]=\"color()\"\r\n          [disabled]=\"disabled\"\r\n          (click)=\"accept()\"\r\n        >\r\n          {{ acceptButtonText() }}\r\n        </ard-button>\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\r\n<ng-template\r\n  #defaultDaysViewHeaderTemplate\r\n  let-currDate\r\n  let-nextMonth=\"nextMonth\"\r\n  let-prevMonth=\"prevMonth\"\r\n  let-canGoToNextMonth=\"canGoToNextPage\"\r\n  let-canGoToPreviousMonth=\"canGoToPreviousPage\"\r\n  let-hideNextPageButton=\"hideNextPageButton\"\r\n  let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n>\r\n  <div class=\"ard-calendar__calendar-header\">\r\n    <div>\r\n      @if (!hidePreviousPageButton) {\r\n      <ard-icon-button\r\n        size=\"small\"\r\n        appearance=\"transparent\"\r\n        color=\"none\"\r\n        (click)=\"prevMonth()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [disabled]=\"!canGoToPreviousMonth\"\r\n      >\r\n        <ard-icon>chevron_left</ard-icon>\r\n      </ard-icon-button>\r\n      }\r\n    </div>\r\n    <span class=\"ard-calendar__header-button\">\r\n      {{ currDate | date : calendarDaysViewHeaderDateFormat() | uppercase }}\r\n    </span>\r\n    <div>\r\n      @if (!hideNextPageButton) {\r\n      <ard-icon-button\r\n        size=\"small\"\r\n        appearance=\"transparent\"\r\n        color=\"none\"\r\n        (click)=\"nextMonth()\"\r\n        [tabIndex]=\"tabIndex()\"\r\n        [disabled]=\"!canGoToNextMonth\"\r\n      >\r\n        <ard-icon>chevron_right</ard-icon>\r\n      </ard-icon-button>\r\n      }\r\n    </div>\r\n  </div>\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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_DATE_INPUT_DEFAULTS]
@@ -9573,7 +9612,9 @@ class ArdiumMultipageDateRangeInputModule {
             ArdMultipageDateRangeInputWeekdayTemplateDirective,
             ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective,
             ArdMultipageDateRangeInputYearTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumMultipageDateRangeInputModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumMultipageDateRangeInputModule, providers: [
+            { provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: { timezone: '+0000' } },
+        ], imports: [CommonModule,
             ArdiumFormFieldFrameModule,
             ArdiumDropdownPanelModule,
             ArdiumClickOutsideModule,
@@ -9630,6 +9671,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective,
                         ArdMultipageDateRangeInputYearTemplateDirective,
                     ],
+                    providers: [
+                        { provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: { timezone: '+0000' } },
+                    ],
                 }]
         }] });
 
@@ -17348,5 +17392,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ARD_BADGE_DEFAULTS, ARD_BREAKPOINTS, ARD_BUTTON_DEFAULTS, ARD_CALENDAR_DEFAULTS, ARD_CARD_DEFAULTS, ARD_CHECKBOX_DEFAULTS, ARD_CHECKBOX_LIST_DEFAULTS, ARD_CHIP_DEFAULTS, ARD_DATE_INPUT_DEFAULTS, ARD_DELETABLE_CHIP_DEFAULTS, ARD_DIALOG_DEFAULTS, ARD_DIGIT_INPUT_DEFAULTS, ARD_DIVIDER_DEFAULTS, ARD_DROPDOWN_PANEL_DEFAULTS, ARD_ERROR_MAP, ARD_FAB_DEFAULTS, ARD_FILE_DROP_AREA_DEFAULTS, ARD_FILE_INPUT_DEFAULTS, ARD_FORM_FIELD_CONTROL, ARD_FORM_FIELD_DEFAULTS, ARD_FORM_FIELD_FRAME_DEFAULTS, ARD_GRID_DEFAULTS, ARD_HEX_INPUT_DEFAULTS, ARD_ICON_BUTTON_DEFAULTS, ARD_ICON_DEFAULTS, ARD_KBD_DEFAULTS, ARD_KBD_SHORTCUT_DEFAULTS, ARD_MODAL_DEFAULTS, ARD_NUMBER_INPUT_DEFAULTS, ARD_PASSWORD_INPUT_DEFAULTS, ARD_PROGRESS_BAR_DEFAULTS, ARD_PROGRESS_CIRCLE_DEFAULTS, ARD_RADIO_DEFAULTS, ARD_RATING_DISPLAY_DEFAULTS, ARD_RATING_INPUT_DEFAULTS, ARD_SEGMENT_DEFAULTS, ARD_SELECTABLE_CHIP_DEFAULTS, ARD_SELECT_DEFAULTS, ARD_SIMPLE_INPUT_DEFAULTS, ARD_SLIDER_DEFAULTS, ARD_SLIDE_TOGGLE_DEFAULTS, ARD_SNACKBAR_ANIMATION_LENGTH, ARD_SNACKBAR_DATA, ARD_SNACKBAR_DEFAULTS, ARD_SPINNER_DEFAULTS, ARD_STAR_BUTTON_DEFAULTS, ARD_STAR_DEFAULTS, ARD_STATEBOX_DEFAULTS, ARD_TABBER_DEFAULTS, ARD_TABLE_DEFAULTS, ARD_TABLE_FROM_CSV_DEFAULTS, ARD_TABLE_PAGINATION_DEFAULTS, ArdAddCustomTemplateDirective, ArdAutocompleteInputLoadingTemplateDirective, ArdAutocompleteInputPlaceholderTemplateDirective, ArdAutocompleteInputPrefixTemplateDirective, ArdAutocompleteInputSuffixTemplateDirective, ArdAutocompleteInputSuggestionTemplateDirective, ArdCalendarDayTemplateDirective, ArdCalendarDaysViewHeaderTemplateDirective, ArdCalendarFloatingMonthTemplateDirective, ArdCalendarMonthTemplateDirective, ArdCalendarMonthsViewHeaderTemplateDirective, ArdCalendarView, ArdCalendarWeekdayTemplateDirective, ArdCalendarYearTemplateDirective, ArdCalendarYearsViewHeaderTemplateDirective, ArdCheckboxListCheckboxTemplateDirective, ArdCheckboxListLabelTemplateDirective, ArdCheckboxTemplateDirective, ArdDateInputAcceptButtonsTemplateDirective, ArdDateInputCalendarIconTemplateDirective, ArdDateInputDayTemplateDirective, ArdDateInputDaysViewHeaderTemplateDirective, ArdDateInputFloatingMonthTemplateDirective, ArdDateInputMinMaxStrategy, ArdDateInputMonthTemplateDirective, ArdDateInputMonthsViewHeaderTemplateDirective, ArdDateInputPrefixTemplateDirective, ArdDateInputSuffixTemplateDirective, ArdDateInputValueTemplateDirective, ArdDateInputWeekdayTemplateDirective, ArdDateInputYearTemplateDirective, ArdDateInputYearsViewHeaderTemplateDirective, ArdDateRangeInputAcceptButtonsTemplateDirective, ArdDateRangeInputCalendarIconTemplateDirective, ArdDateRangeInputDayTemplateDirective, ArdDateRangeInputDaysViewHeaderTemplateDirective, ArdDateRangeInputFloatingMonthTemplateDirective, ArdDateRangeInputMonthTemplateDirective, ArdDateRangeInputMonthsViewHeaderTemplateDirective, ArdDateRangeInputPrefixTemplateDirective, ArdDateRangeInputSuffixTemplateDirective, ArdDateRangeInputValueTemplateDirective, ArdDateRangeInputWeekdayTemplateDirective, ArdDateRangeInputYearTemplateDirective, ArdDateRangeInputYearsViewHeaderTemplateDirective, ArdDialogActionType, ArdDialogButtonsTemplateDirective, ArdDialogCloseIconTemplateDirective, ArdDialogResult, ArdDropdownFooterTemplateDirective, ArdDropdownHeaderTemplateDirective, ArdFileInputPlaceholderTemplateDirective, ArdFileInputPrefixTemplateDirective, ArdFileInputSuffixTemplateDirective, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective, ArdGridAlign, ArdGridDirection, ArdGridJustify, ArdGridSize, ArdGridWrap, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective, ArdInputPlaceholderTemplateDirective, ArdInputPrefixTemplateDirective, ArdInputSuffixTemplateDirective, ArdItemDisplayLimitTemplateDirective, ArdItemLimitReachedTemplateDirective, ArdLoadingPlaceholderTemplateDirective, ArdLoadingSpinnerTemplateDirective, ArdModalCloseIconTemplateDirective, ArdMultiCalendarLocation, ArdMultipageDateRangeInputAcceptButtonsTemplateDirective, ArdMultipageDateRangeInputCalendarIconTemplateDirective, ArdMultipageDateRangeInputDayTemplateDirective, ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective, ArdMultipageDateRangeInputFloatingMonthTemplateDirective, ArdMultipageDateRangeInputMonthTemplateDirective, ArdMultipageDateRangeInputMonthsViewHeaderTemplateDirective, ArdMultipageDateRangeInputPrefixTemplateDirective, ArdMultipageDateRangeInputSuffixTemplateDirective, ArdMultipageDateRangeInputValueTemplateDirective, ArdMultipageDateRangeInputWeekdayTemplateDirective, ArdMultipageDateRangeInputYearTemplateDirective, ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective, ArdNoItemsFoundTemplateDirective, ArdNumberInputPlaceholderTemplateDirective, ArdNumberInputPrefixTemplateDirective, ArdNumberInputSuffixTemplateDirective, ArdOptgroupTemplateDirective, ArdOptionTemplateDirective, ArdPanelPosition, ArdPasswordInputPlaceholderTemplateDirective, ArdPasswordInputPrefixTemplateDirective, ArdPasswordInputRevealButtonTemplateDirective, ArdPasswordInputSuffixTemplateDirective, ArdProgressBarValueTemplateDirective, ArdProgressCircleValueTemplateDirective, ArdRangeCalendarDayTemplateDirective, ArdRangeCalendarDaysViewHeaderTemplateDirective, ArdRangeCalendarFloatingMonthTemplateDirective, ArdRangeCalendarMonthTemplateDirective, ArdRangeCalendarMonthsViewHeaderTemplateDirective, ArdRangeCalendarWeekdayTemplateDirective, ArdRangeCalendarYearTemplateDirective, ArdRangeCalendarYearsViewHeaderTemplateDirective, ArdRangeSelectionBehavior, ArdRatingDisplayStarTemplateDirective, ArdRatingInputStarButtonTemplateDirective, searchFunctions as ArdSearchFunction, ArdSegmentOptionTemplateDirective, ArdSelectDropdownArrowTemplateDirective, ArdSelectPlaceholderTemplateDirective, ArdSelectPrefixTemplateDirective, ArdSelectSuffixTemplateDirective, ArdSlideToggleAppearance, ArdSliderTooltipDirective, ArdSnackbarAlignment, ArdSnackbarOriginRelation, ArdSnackbarQueueHandling, ArdSnackbarRef, ArdSnackbarType, ArdStarButtonStarTemplateDirective, ArdStarIconTemplateDirective, ArdTabberLabelTemplateDirective, ArdValueChipTemplateDirective, ArdValueTemplateDirective, ArdiumAutoErrorComponent, ArdiumAutocompleteInputComponent, ArdiumAutocompleteInputModule, ArdiumBadgeDirective, ArdiumBadgeModule, ArdiumBreakpointService, ArdiumButtonComponent, ArdiumButtonDirective, ArdiumButtonModule, ArdiumCalendarComponent, ArdiumCalendarModule, ArdiumCardActionButtonsDirective, ArdiumCardAvatarDirective, ArdiumCardComponent, ArdiumCardContentDirective, ArdiumCardDirective, ArdiumCardFooterDirective, ArdiumCardHeaderComponent, ArdiumCardImageDirective, ArdiumCardModule, ArdiumCardSubtitleDirective, ArdiumCardTitleDirective, ArdiumCheckboxComponent, ArdiumCheckboxListComponent, ArdiumCheckboxListModule, ArdiumCheckboxModule, ArdiumChipComponent, ArdiumChipModule, ArdiumDateInputComponent, ArdiumDateInputModule, ArdiumDateRangeInputComponent, ArdiumDateRangeInputModule, ArdiumDeletableChipComponent, ArdiumDialogComponent, ArdiumDialogModule, ArdiumDigitInputComponent, ArdiumDigitInputModule, ArdiumDividerComponent, ArdiumDividerModule, ArdiumDropdownPanelComponent, ArdiumDropdownPanelModule, ArdiumErrorComponent, ArdiumErrorDirective, ArdiumFabComponent, ArdiumFabModule, ArdiumFileDropAreaComponent, ArdiumFileDropAreaDragoverContentTemplateDirective, ArdiumFileDropAreaIdleContentTemplateDirective, ArdiumFileDropAreaModule, ArdiumFileDropAreaUploadedContentTemplateDirective, ArdiumFileInputComponent, ArdiumFileInputDragoverContentTemplateDirective, ArdiumFileInputFolderIconTemplateDirective, ArdiumFileInputIdleContentTemplateDirective, ArdiumFileInputModule, ArdiumFileInputUploadedContentTemplateDirective, ArdiumFormFieldComponent, ArdiumFormFieldFrameComponent, ArdiumFormFieldFrameModule, ArdiumFormFieldModule, ArdiumFormFieldNativeInputAdapterDirective, ArdiumGridComponent, ArdiumGridModule, ArdiumHexInputComponent, ArdiumHexInputModule, ArdiumHintComponent, ArdiumHintDirective, ArdiumHintErrorComponent, ArdiumHintErrorDirective, ArdiumHorizontalFormFieldComponent, ArdiumIconButtonComponent, ArdiumIconButtonModule, ArdiumIconComponent, ArdiumIconModule, ArdiumIconPipe, ArdiumInputComponent, ArdiumInputModule, ArdiumKbdComponent, ArdiumKbdDirective, ArdiumKbdModule, ArdiumKbdPipe, ArdiumKbdShortcutComponent, ArdiumKbdShortcutModule, ArdiumLabelComponent, ArdiumModalComponent, ArdiumModalModule, ArdiumMultipageDateRangeInputComponent, ArdiumMultipageDateRangeInputModule, ArdiumNumberInputComponent, ArdiumNumberInputModule, ArdiumOptionComponent, ArdiumOptionModule, ArdiumPasswordInputComponent, ArdiumPasswordInputModule, ArdiumProgressBarComponent, ArdiumProgressBarModule, ArdiumProgressCircleComponent, ArdiumProgressCircleModule, ArdiumRadioComponent, ArdiumRadioGroupComponent, ArdiumRadioModule, ArdiumRangeCalendarComponent, ArdiumRangeCalendarModule, ArdiumRangeSliderComponent, ArdiumRangeSliderModule, ArdiumRatingDisplayComponent, ArdiumRatingDisplayModule, ArdiumRatingInputComponent, ArdiumRatingInputModule, ArdiumSegmentComponent, ArdiumSegmentModule, ArdiumSelectComponent, ArdiumSelectModule, ArdiumSelectableChipComponent, ArdiumSlideToggleComponent, ArdiumSlideToggleModule, ArdiumSliderComponent, ArdiumSliderModule, ArdiumSnackbarService, ArdiumSpinnerComponent, ArdiumSpinnerModule, ArdiumStarButtonComponent, ArdiumStarButtonModule, ArdiumStarComponent, ArdiumStarModule, ArdiumStateboxComponent, ArdiumStateboxModule, ArdiumTabComponent, ArdiumTabberComponent, ArdiumTabberModule, ArdiumTableCaptionTemplateDirective, ArdiumTableCheckboxTemplateDirective, ArdiumTableComponent, ArdiumTableFromCsvComponent, ArdiumTableFromCsvModule, ArdiumTableHeaderCheckboxTemplateDirective, ArdiumTableModule, ArdiumTablePaginationComponent, ArdiumTablePaginationModule, ArdiumTablePaginationTemplateDirective, ArdiumTableTemplateDirective, ArdiumTextListComponent, ArdiumTextListModule, ArdiumTextListPipe, BadgePosition, BadgeSize, ButtonAppearance, ButtonVariant, CardAppearance, CardVariant, CheckboxListAlignType, CheckboxState, ClickStrategy, ComponentColor, DateRange, DecorationElementAppearance, DigitInputPrimitiveOption, DigitInputShape, DropdownPanelAppearance, DropdownPanelVariant, FabSize, FormElementAppearance, FormElementVariant, OneAxisAlignment, OutlinedAppearance, PaginationAlign, PanelAppearance, PanelVariant, ProgressBarAppearance, ProgressBarMode, ProgressBarSize, ProgressBarVariant, ProgressCircleAppearance, ProgressCircleVariant, SegmentAppearance, SegmentVariant, SimpleComponentColor, SimpleOneAxisAlignment, SliderDecorationPosition, SliderTooltipBehavior, SortType, StarColor, StarFillMode, TableAlignType, TableAppearance, TablePaginationStrategy, TableVariant, TransformType, _chipDefaults, _modalDefaults, isArdGridAlign, isArdGridDirection, isArdGridJustify, isArdGridSize, isArdGridWrap, provideBadgeDefaults, provideBreakpoints, provideButtonDefaults, provideCalendarDefaults, provideCardDefaults, provideCheckboxDefaults, provideCheckboxListDefaults, provideChipDefaults, provideDateInputDefaults, provideDeletableChipDefaults, provideDialogDefaults, provideDigitInputDefaults, provideDividerDefaults, provideDropdownPanelDefaults, provideErrorMap, provideFabDefaults, provideFileDropAreaDefaults, provideFileInputDefaults, provideFormFieldDefaults, provideFormFieldFrameDefaults, provideGridDefaults, provideHexInputDefaults, provideIconButtonDefaults, provideIconDefaults, provideInputDefaults, provideKbdDefaults, provideKbdShortcutDefaults, provideModalDefaults, provideNumberInputDefaults, providePasswordInputDefaults, provideProgressBarDefaults, provideProgressCircleDefaults, provideRadioDefaults, provideRatingDisplayDefaults, provideRatingInputDefaults, provideSegmentDefaults, provideSelectDefaults, provideSelectableChipDefaults, provideSlideToggleDefaults, provideSliderDefaults, provideSnackbarDefaults, provideSpinnerDefaults, provideStarButtonDefaults, provideStarDefaults, provideStateboxDefaults, provideTabberDefaults, provideTableDefaults, provideTableFromCsvDefaults, provideTablePaginationDefaults, searchInString, trackFormControl };
+export { ARD_BADGE_DEFAULTS, ARD_BREAKPOINTS, ARD_BUTTON_DEFAULTS, ARD_CALENDAR_DEFAULTS, ARD_CARD_DEFAULTS, ARD_CHECKBOX_DEFAULTS, ARD_CHECKBOX_LIST_DEFAULTS, ARD_CHIP_DEFAULTS, ARD_DATE_INPUT_DEFAULTS, ARD_DELETABLE_CHIP_DEFAULTS, ARD_DIALOG_DEFAULTS, ARD_DIGIT_INPUT_DEFAULTS, ARD_DIVIDER_DEFAULTS, ARD_DROPDOWN_PANEL_DEFAULTS, ARD_ERROR_MAP, ARD_FAB_DEFAULTS, ARD_FILE_DROP_AREA_DEFAULTS, ARD_FILE_INPUT_DEFAULTS, ARD_FORM_FIELD_CONTROL, ARD_FORM_FIELD_DEFAULTS, ARD_FORM_FIELD_FRAME_DEFAULTS, ARD_GRID_DEFAULTS, ARD_HEX_INPUT_DEFAULTS, ARD_ICON_BUTTON_DEFAULTS, ARD_ICON_DEFAULTS, ARD_KBD_DEFAULTS, ARD_KBD_SHORTCUT_DEFAULTS, ARD_MODAL_DEFAULTS, ARD_NUMBER_INPUT_DEFAULTS, ARD_PASSWORD_INPUT_DEFAULTS, ARD_PROGRESS_BAR_DEFAULTS, ARD_PROGRESS_CIRCLE_DEFAULTS, ARD_RADIO_DEFAULTS, ARD_RATING_DISPLAY_DEFAULTS, ARD_RATING_INPUT_DEFAULTS, ARD_SEGMENT_DEFAULTS, ARD_SELECTABLE_CHIP_DEFAULTS, ARD_SELECT_DEFAULTS, ARD_SIMPLE_INPUT_DEFAULTS, ARD_SLIDER_DEFAULTS, ARD_SLIDE_TOGGLE_DEFAULTS, ARD_SNACKBAR_ANIMATION_LENGTH, ARD_SNACKBAR_DATA, ARD_SNACKBAR_DEFAULTS, ARD_SPINNER_DEFAULTS, ARD_STAR_BUTTON_DEFAULTS, ARD_STAR_DEFAULTS, ARD_STATEBOX_DEFAULTS, ARD_TABBER_DEFAULTS, ARD_TABLE_DEFAULTS, ARD_TABLE_FROM_CSV_DEFAULTS, ARD_TABLE_PAGINATION_DEFAULTS, ArdAddCustomTemplateDirective, ArdAutocompleteInputLoadingTemplateDirective, ArdAutocompleteInputPlaceholderTemplateDirective, ArdAutocompleteInputPrefixTemplateDirective, ArdAutocompleteInputSuffixTemplateDirective, ArdAutocompleteInputSuggestionTemplateDirective, ArdCalendarDayTemplateDirective, ArdCalendarDaysViewHeaderTemplateDirective, ArdCalendarFloatingMonthTemplateDirective, ArdCalendarMonthTemplateDirective, ArdCalendarMonthsViewHeaderTemplateDirective, ArdCalendarView, ArdCalendarWeekdayTemplateDirective, ArdCalendarYearTemplateDirective, ArdCalendarYearsViewHeaderTemplateDirective, ArdCheckboxListCheckboxTemplateDirective, ArdCheckboxListLabelTemplateDirective, ArdCheckboxTemplateDirective, ArdDateInputAcceptButtonsTemplateDirective, ArdDateInputCalendarIconTemplateDirective, ArdDateInputDayTemplateDirective, ArdDateInputDaysViewHeaderTemplateDirective, ArdDateInputFloatingMonthTemplateDirective, ArdDateInputMinMaxStrategy, ArdDateInputMonthTemplateDirective, ArdDateInputMonthsViewHeaderTemplateDirective, ArdDateInputPrefixTemplateDirective, ArdDateInputSuffixTemplateDirective, ArdDateInputValueTemplateDirective, ArdDateInputWeekdayTemplateDirective, ArdDateInputYearTemplateDirective, ArdDateInputYearsViewHeaderTemplateDirective, ArdDateRangeInputAcceptButtonsTemplateDirective, ArdDateRangeInputCalendarIconTemplateDirective, ArdDateRangeInputDayTemplateDirective, ArdDateRangeInputDaysViewHeaderTemplateDirective, ArdDateRangeInputFloatingMonthTemplateDirective, ArdDateRangeInputMonthTemplateDirective, ArdDateRangeInputMonthsViewHeaderTemplateDirective, ArdDateRangeInputPrefixTemplateDirective, ArdDateRangeInputSuffixTemplateDirective, ArdDateRangeInputValueTemplateDirective, ArdDateRangeInputWeekdayTemplateDirective, ArdDateRangeInputYearTemplateDirective, ArdDateRangeInputYearsViewHeaderTemplateDirective, ArdDialogActionType, ArdDialogButtonsTemplateDirective, ArdDialogCloseIconTemplateDirective, ArdDialogResult, ArdDropdownFooterTemplateDirective, ArdDropdownHeaderTemplateDirective, ArdFileInputPlaceholderTemplateDirective, ArdFileInputPrefixTemplateDirective, ArdFileInputSuffixTemplateDirective, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective, ArdGridAlign, ArdGridDirection, ArdGridJustify, ArdGridSize, ArdGridWrap, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective, ArdInputPlaceholderTemplateDirective, ArdInputPrefixTemplateDirective, ArdInputSuffixTemplateDirective, ArdItemDisplayLimitTemplateDirective, ArdItemLimitReachedTemplateDirective, ArdLoadingPlaceholderTemplateDirective, ArdLoadingSpinnerTemplateDirective, ArdModalCloseIconTemplateDirective, ArdMultiCalendarLocation, ArdMultipageDateRangeInputAcceptButtonsTemplateDirective, ArdMultipageDateRangeInputCalendarIconTemplateDirective, ArdMultipageDateRangeInputDayTemplateDirective, ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective, ArdMultipageDateRangeInputFloatingMonthTemplateDirective, ArdMultipageDateRangeInputMonthTemplateDirective, ArdMultipageDateRangeInputMonthsViewHeaderTemplateDirective, ArdMultipageDateRangeInputPrefixTemplateDirective, ArdMultipageDateRangeInputSuffixTemplateDirective, ArdMultipageDateRangeInputValueTemplateDirective, ArdMultipageDateRangeInputWeekdayTemplateDirective, ArdMultipageDateRangeInputYearTemplateDirective, ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective, ArdNoItemsFoundTemplateDirective, ArdNumberInputPlaceholderTemplateDirective, ArdNumberInputPrefixTemplateDirective, ArdNumberInputSuffixTemplateDirective, ArdOptgroupTemplateDirective, ArdOptionTemplateDirective, ArdPanelPosition, ArdPasswordInputPlaceholderTemplateDirective, ArdPasswordInputPrefixTemplateDirective, ArdPasswordInputRevealButtonTemplateDirective, ArdPasswordInputSuffixTemplateDirective, ArdProgressBarValueTemplateDirective, ArdProgressCircleValueTemplateDirective, ArdRangeCalendarDayTemplateDirective, ArdRangeCalendarDaysViewHeaderTemplateDirective, ArdRangeCalendarFloatingMonthTemplateDirective, ArdRangeCalendarMonthTemplateDirective, ArdRangeCalendarMonthsViewHeaderTemplateDirective, ArdRangeCalendarWeekdayTemplateDirective, ArdRangeCalendarYearTemplateDirective, ArdRangeCalendarYearsViewHeaderTemplateDirective, ArdRangeSelectionBehavior, ArdRatingDisplayStarTemplateDirective, ArdRatingInputStarButtonTemplateDirective, searchFunctions as ArdSearchFunction, ArdSegmentOptionTemplateDirective, ArdSelectDropdownArrowTemplateDirective, ArdSelectPlaceholderTemplateDirective, ArdSelectPrefixTemplateDirective, ArdSelectSuffixTemplateDirective, ArdSlideToggleAppearance, ArdSliderTooltipDirective, ArdSnackbarAlignment, ArdSnackbarOriginRelation, ArdSnackbarQueueHandling, ArdSnackbarRef, ArdSnackbarType, ArdStarButtonStarTemplateDirective, ArdStarIconTemplateDirective, ArdTabberLabelTemplateDirective, ArdValueChipTemplateDirective, ArdValueTemplateDirective, ArdiumAutoErrorComponent, ArdiumAutocompleteInputComponent, ArdiumAutocompleteInputModule, ArdiumBadgeDirective, ArdiumBadgeModule, ArdiumBreakpointService, ArdiumButtonComponent, ArdiumButtonDirective, ArdiumButtonModule, ArdiumCalendarComponent, ArdiumCalendarModule, ArdiumCardActionButtonsDirective, ArdiumCardAvatarDirective, ArdiumCardComponent, ArdiumCardContentDirective, ArdiumCardDirective, ArdiumCardFooterDirective, ArdiumCardHeaderComponent, ArdiumCardImageDirective, ArdiumCardModule, ArdiumCardSubtitleDirective, ArdiumCardTitleDirective, ArdiumCheckboxComponent, ArdiumCheckboxListComponent, ArdiumCheckboxListModule, ArdiumCheckboxModule, ArdiumChipComponent, ArdiumChipModule, ArdiumDateInputComponent, ArdiumDateInputModule, ArdiumDateRangeInputComponent, ArdiumDateRangeInputModule, ArdiumDeletableChipComponent, ArdiumDialogComponent, ArdiumDialogModule, ArdiumDigitInputComponent, ArdiumDigitInputModule, ArdiumDividerComponent, ArdiumDividerModule, ArdiumDropdownPanelComponent, ArdiumDropdownPanelModule, ArdiumErrorComponent, ArdiumErrorDirective, ArdiumFabComponent, ArdiumFabModule, ArdiumFileDropAreaComponent, ArdiumFileDropAreaDragoverContentTemplateDirective, ArdiumFileDropAreaIdleContentTemplateDirective, ArdiumFileDropAreaModule, ArdiumFileDropAreaUploadedContentTemplateDirective, ArdiumFileInputComponent, ArdiumFileInputDragoverContentTemplateDirective, ArdiumFileInputFolderIconTemplateDirective, ArdiumFileInputIdleContentTemplateDirective, ArdiumFileInputModule, ArdiumFileInputUploadedContentTemplateDirective, ArdiumFormFieldComponent, ArdiumFormFieldFrameComponent, ArdiumFormFieldFrameModule, ArdiumFormFieldModule, ArdiumFormFieldNativeInputAdapterDirective, ArdiumGridComponent, ArdiumGridModule, ArdiumHexInputComponent, ArdiumHexInputModule, ArdiumHintComponent, ArdiumHintDirective, ArdiumHintErrorComponent, ArdiumHintErrorDirective, ArdiumHorizontalFormFieldComponent, ArdiumIconButtonComponent, ArdiumIconButtonModule, ArdiumIconComponent, ArdiumIconModule, ArdiumIconPipe, ArdiumInputComponent, ArdiumInputModule, ArdiumKbdComponent, ArdiumKbdDirective, ArdiumKbdModule, ArdiumKbdPipe, ArdiumKbdShortcutComponent, ArdiumKbdShortcutModule, ArdiumLabelComponent, ArdiumModalComponent, ArdiumModalModule, ArdiumMultipageDateRangeInputComponent, ArdiumMultipageDateRangeInputModule, ArdiumNumberInputComponent, ArdiumNumberInputModule, ArdiumOptionComponent, ArdiumOptionModule, ArdiumPasswordInputComponent, ArdiumPasswordInputModule, ArdiumProgressBarComponent, ArdiumProgressBarModule, ArdiumProgressCircleComponent, ArdiumProgressCircleModule, ArdiumRadioComponent, ArdiumRadioGroupComponent, ArdiumRadioModule, ArdiumRangeCalendarComponent, ArdiumRangeCalendarModule, ArdiumRangeSliderComponent, ArdiumRangeSliderModule, ArdiumRatingDisplayComponent, ArdiumRatingDisplayModule, ArdiumRatingInputComponent, ArdiumRatingInputModule, ArdiumSegmentComponent, ArdiumSegmentModule, ArdiumSelectComponent, ArdiumSelectModule, ArdiumSelectableChipComponent, ArdiumSlideToggleComponent, ArdiumSlideToggleModule, ArdiumSliderComponent, ArdiumSliderModule, ArdiumSnackbarService, ArdiumSpinnerComponent, ArdiumSpinnerModule, ArdiumStarButtonComponent, ArdiumStarButtonModule, ArdiumStarComponent, ArdiumStarModule, ArdiumStateboxComponent, ArdiumStateboxModule, ArdiumTabComponent, ArdiumTabberComponent, ArdiumTabberModule, ArdiumTableCaptionTemplateDirective, ArdiumTableCheckboxTemplateDirective, ArdiumTableComponent, ArdiumTableFromCsvComponent, ArdiumTableFromCsvModule, ArdiumTableHeaderCheckboxTemplateDirective, ArdiumTableModule, ArdiumTablePaginationComponent, ArdiumTablePaginationModule, ArdiumTablePaginationTemplateDirective, ArdiumTableTemplateDirective, ArdiumTextListComponent, ArdiumTextListModule, ArdiumTextListPipe, BadgePosition, BadgeSize, ButtonAppearance, ButtonVariant, CardAppearance, CardVariant, CheckboxListAlignType, CheckboxState, ClickStrategy, ComponentColor, DateRange, DecorationElementAppearance, DigitInputPrimitiveOption, DigitInputShape, DropdownPanelAppearance, DropdownPanelVariant, FabSize, FormElementAppearance, FormElementVariant, OneAxisAlignment, OutlinedAppearance, PaginationAlign, PanelAppearance, PanelVariant, ProgressBarAppearance, ProgressBarMode, ProgressBarSize, ProgressBarVariant, ProgressCircleAppearance, ProgressCircleVariant, SegmentAppearance, SegmentVariant, SimpleComponentColor, SimpleOneAxisAlignment, SliderDecorationPosition, SliderTooltipBehavior, SortType, StarColor, StarFillMode, TableAlignType, TableAppearance, TablePaginationStrategy, TableVariant, TransformType, _chipDefaults, _modalDefaults, isArdGridAlign, isArdGridDirection, isArdGridJustify, isArdGridSize, isArdGridWrap, isDateRange, isYearRange, provideBadgeDefaults, provideBreakpoints, provideButtonDefaults, provideCalendarDefaults, provideCardDefaults, provideCheckboxDefaults, provideCheckboxListDefaults, provideChipDefaults, provideDateInputDefaults, provideDeletableChipDefaults, provideDialogDefaults, provideDigitInputDefaults, provideDividerDefaults, provideDropdownPanelDefaults, provideErrorMap, provideFabDefaults, provideFileDropAreaDefaults, provideFileInputDefaults, provideFormFieldDefaults, provideFormFieldFrameDefaults, provideGridDefaults, provideHexInputDefaults, provideIconButtonDefaults, provideIconDefaults, provideInputDefaults, provideKbdDefaults, provideKbdShortcutDefaults, provideModalDefaults, provideNumberInputDefaults, providePasswordInputDefaults, provideProgressBarDefaults, provideProgressCircleDefaults, provideRadioDefaults, provideRatingDisplayDefaults, provideRatingInputDefaults, provideSegmentDefaults, provideSelectDefaults, provideSelectableChipDefaults, provideSlideToggleDefaults, provideSliderDefaults, provideSnackbarDefaults, provideSpinnerDefaults, provideStarButtonDefaults, provideStarDefaults, provideStateboxDefaults, provideTabberDefaults, provideTableDefaults, provideTableFromCsvDefaults, provideTablePaginationDefaults, searchInString, trackFormControl };
 //# sourceMappingURL=ardium-ui-ui.mjs.map