igniteui-angular 21.0.3 → 21.1.0-alpha.0

package/fesm2022/igniteui-angular-calendar.mjs

@@ -1,10 +1,11 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, EventEmitter, HostListener, Output, Input, Directive, HostBinding, TemplateRef, NgZone, booleanAttribute, ViewChildren, Component, ChangeDetectionStrategy, Injectable, LOCALE_ID, ChangeDetectorRef, DestroyRef, Pipe, forwardRef, ContentChild, ViewChild, NgModule } from '@angular/core';
-import { TitleCasePipe, getLocaleFirstDayOfWeek, NgTemplateOutlet, DatePipe } from '@angular/common';
+import { InjectionToken, inject, ElementRef, EventEmitter, HostListener, Output, Input, Directive, HostBinding, TemplateRef, NgZone, DestroyRef, booleanAttribute, ViewChildren, Component, ChangeDetectionStrategy, Injectable, LOCALE_ID, ChangeDetectorRef, Pipe, forwardRef, ContentChild, ViewChild, NgModule } from '@angular/core';
+import { TitleCasePipe, NgTemplateOutlet } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subject, fromEvent, interval, noop } from 'rxjs';
 import { debounce, takeUntil, tap, switchMap, skipLast } from 'rxjs/operators';
-import { CalendarDay, PlatformUtil, isDate, getNextActiveDate, isDateInRanges, DateRangeType, calendarRange, areSameMonth, isPreviousMonth, isNextMonth, getYearRange, DateTimeUtil, getCurrentResourceStrings, CalendarResourceStringsEN, isEqual, THEME_TOKEN, getComponentTheme, getClosestActiveDate, getPreviousActiveDate, generateMonth, intoChunks, formatToParts } from 'igniteui-angular/core';
+import { CalendarDay, PlatformUtil, isDate, getNextActiveDate, isDateInRanges, DateRangeType, onResourceChangeHandle, calendarRange, areSameMonth, isPreviousMonth, isNextMonth, getCurrentResourceStrings, CalendarResourceStringsEN, getYearRange, DateTimeUtil, I18N_FORMATTER, isEqual, DEFAULT_LOCALE, THEME_TOKEN, getClosestActiveDate, getPreviousActiveDate, generateMonth, intoChunks, formatToParts, IgxDateFormatterPipe } from 'igniteui-angular/core';
+import { getDateFormatter, getCurrentI18n } from 'igniteui-i18n-core';
 import { EventManager } from '@angular/platform-browser';
 import { IgxIconComponent } from 'igniteui-angular/icon';
 
@@ -354,6 +355,12 @@ class IgxCalendarViewDirective {
             return;
         return this.date.getTime();
     }
+    /**
+     * @hidden
+     */
+    get formatter() {
+        return getDateFormatter().getIntlFormatter(this.locale);
+    }
     /**
      * Gets/sets the selected date of the view.
      * By default it's the current date.
@@ -381,7 +388,7 @@ class IgxCalendarViewDirective {
      * @memberof IgxCalendarViewDirective
      */
     get locale() {
-        return this._locale;
+        return this._locale || this._defaultLocale;
     }
     /**
      * Sets the `locale` of the view.
@@ -392,7 +399,6 @@ class IgxCalendarViewDirective {
      */
     set locale(value) {
         this._locale = value;
-        this.initFormatter();
     }
     constructor() {
         this.dayInterval = inject(DAY_INTERVAL_TOKEN);
@@ -421,15 +427,8 @@ class IgxCalendarViewDirective {
          * @hidden @internal
          */
         this.activeDateChanged = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this._locale = "en";
-        /**
-         * @hidden
-         * @internal
-         */
         this._date = new Date();
+        this._destroyRef = inject(DestroyRef);
         /**
          * @hidden
          */
@@ -438,7 +437,7 @@ class IgxCalendarViewDirective {
          * @hidden
          */
         this._onChangeCallback = noop;
-        this.initFormatter();
+        this.initLocale();
     }
     /**
      * @hidden
@@ -549,6 +548,12 @@ class IgxCalendarViewDirective {
         this.date = date.native;
         this.activeDateChanged.emit(this.date);
     }
+    initLocale() {
+        this._defaultLocale = getCurrentI18n();
+        onResourceChangeHandle(this._destroyRef, (args) => {
+            this._defaultLocale = args.detail.newLocale;
+        }, this);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCalendarViewDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.2", type: IgxCalendarViewDirective, isStandalone: true, inputs: { role: "role", tabIndex: "tabIndex", formatView: ["formatView", "formatView", booleanAttribute], showActive: ["showActive", "showActive", booleanAttribute], date: "date", locale: "locale" }, outputs: { selected: "selected", pageChanged: "pageChanged", activeDateChanged: "activeDateChanged" }, host: { listeners: { "keydown.arrowdown": "onKeydownArrowDown($event)", "keydown.arrowup": "onKeydownArrowUp($event)", "keydown.arrowright": "onKeydownArrowRight($event)", "keydown.arrowleft": "onKeydownArrowLeft($event)", "keydown.home": "onKeydownHome($event)", "keydown.end": "onKeydownEnd($event)", "keydown.enter": "onKeydownEnter($event)", "focus": "handleFocus()", "blur": "handleBlur()" }, properties: { "attr.role": "this.role", "attr.tabIndex": "this.tabIndex", "attr.aria-activeDescendant": "this.activeDescendant" } }, providers: [
             {
@@ -696,7 +701,6 @@ class IgxMonthsViewComponent extends IgxCalendarViewDirective {
      */
     set monthFormat(value) {
         this._monthFormat = value;
-        this.initFormatter();
     }
     /**
      * Returns an array of date objects which are then used to
@@ -711,6 +715,12 @@ class IgxMonthsViewComponent extends IgxCalendarViewDirective {
         const end = start.add(this.dayInterval, 12);
         return Array.from(calendarRange({ start, end, unit: this.dayInterval })).map((m) => m.native);
     }
+    /**
+     * @hidden
+     */
+    get formatter() {
+        return getDateFormatter().getIntlFormatter(this.locale, { month: this.monthFormat });
+    }
     /**
      * @hidden
      */
@@ -725,14 +735,14 @@ class IgxMonthsViewComponent extends IgxCalendarViewDirective {
      * @hidden
      */
     formattedMonth(value) {
-        const rawFormatter = new Intl.DateTimeFormat(this.locale, {
+        const rawFormatter = getDateFormatter().getIntlFormatter(this.locale, {
             month: "long",
             year: "numeric",
         });
         if (this.formatView) {
             return {
                 long: rawFormatter.format(value),
-                formatted: this._formatter.format(value),
+                formatted: this.formatter.format(value),
             };
         }
         return {
@@ -746,14 +756,6 @@ class IgxMonthsViewComponent extends IgxCalendarViewDirective {
     monthTracker(_, item) {
         return `${item.getMonth()}}`;
     }
-    /**
-     * @hidden
-     */
-    initFormatter() {
-        this._formatter = new Intl.DateTimeFormat(this._locale, {
-            month: this.monthFormat,
-        });
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxMonthsViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxMonthsViewComponent, isStandalone: true, selector: "igx-months-view", inputs: { id: "id", standalone: "standalone", monthFormat: "monthFormat", formatView: ["formatView", "formatView", booleanAttribute] }, host: { properties: { "attr.id": "this.id", "class.igx-calendar-view": "this.viewClass", "class.igx-calendar-view--standalone": "this.standalone" } }, providers: [
             {
@@ -831,6 +833,12 @@ class IgxYearsViewComponent extends IgxCalendarViewDirective {
     set standalone(value) {
         this.#standalone = value;
     }
+    /**
+     * @hidden
+     */
+    get formatter() {
+        return getDateFormatter().getIntlFormatter(this.locale, { year: this.yearFormat });
+    }
     /**
      * Gets the year format option of the years view.
      * ```typescript
@@ -850,7 +858,6 @@ class IgxYearsViewComponent extends IgxCalendarViewDirective {
      */
     set yearFormat(value) {
         this._yearFormat = value;
-        this.initFormatter();
     }
     /**
      * Returns an array of date objects which are then used to properly
@@ -875,11 +882,11 @@ class IgxYearsViewComponent extends IgxCalendarViewDirective {
      * @hidden
      */
     formattedYear(value) {
-        const rawFormatter = new Intl.DateTimeFormat(this.locale, { year: 'numeric' });
+        const rawFormatter = getDateFormatter().getIntlFormatter(this.locale, { year: 'numeric' });
         if (this.formatView) {
             return {
                 long: rawFormatter.format(value),
-                formatted: this._formatter.format(value)
+                formatted: this.formatter.format(value)
             };
         }
         return {
@@ -893,14 +900,6 @@ class IgxYearsViewComponent extends IgxCalendarViewDirective {
     yearTracker(_, item) {
         return `${item.getFullYear()}}`;
     }
-    /**
-     * @hidden
-     */
-    initFormatter() {
-        this._formatter = new Intl.DateTimeFormat(this._locale, {
-            year: this.yearFormat,
-        });
-    }
     /**
      * @hidden
      */
@@ -1190,6 +1189,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
 
 /** @hidden @internal */
 class IgxCalendarBaseDirective {
+    /**
+     * @hidden
+     */
+    get formatterWeekday() {
+        return getDateFormatter().getIntlFormatter(this.locale, { weekday: this._formatOptions.weekday });
+    }
+    /**
+     * @hidden
+     */
+    get formatterDay() {
+        return getDateFormatter().getIntlFormatter(this.locale, { day: this._formatOptions.day });
+    }
+    /**
+     * @hidden
+     */
+    get formatterMonth() {
+        return getDateFormatter().getIntlFormatter(this.locale, { month: this._formatOptions.month });
+    }
+    /**
+     * @hidden
+     */
+    get formatterYear() {
+        return getDateFormatter().getIntlFormatter(this.locale, { year: this._formatOptions.year });
+    }
+    /**
+     * @hidden
+     */
+    get formatterMonthDay() {
+        return getDateFormatter().getIntlFormatter(this.locale, { month: this._formatOptions.month, day: this._formatOptions.day });
+    }
+    /**
+     * @hidden
+     */
+    get formatterRangeDay() {
+        return getDateFormatter().getIntlFormatter(this.locale, { day: this._formatOptions.day, month: 'short' });
+    }
     /**
      * An accessor that sets the resource strings.
      * By default it uses EN resources.
@@ -1201,7 +1236,7 @@ class IgxCalendarBaseDirective {
      * An accessor that returns the resource strings.
      */
     get resourceStrings() {
-        return this._resourceStrings;
+        return this._resourceStrings || this._defaultResourceStrings;
     }
     /**
      * Gets the start day of the week.
@@ -1209,7 +1244,7 @@ class IgxCalendarBaseDirective {
      * If not set, defaults to the first day of the week for the application locale.
      */
     get weekStart() {
-        return this._weekStart;
+        return this._weekStart || this._localeWeekStart;
     }
     /**
      * Sets the start day of the week.
@@ -1223,26 +1258,17 @@ class IgxCalendarBaseDirective {
      * If not set, defaults to application's locale.
      */
     get locale() {
-        return this._locale;
+        return this._locale || this._defaultLocale;
     }
     /**
      * Sets the `locale` of the calendar.
      * Expects a valid BCP 47 language tag.
      */
     set locale(value) {
-        this._locale = value;
-        // if value is not a valid BCP 47 tag, set it back to _localeId
-        try {
-            getLocaleFirstDayOfWeek(this._locale);
-        }
-        catch (e) {
-            this._locale = this._localeId;
-        }
-        // changing locale runtime needs to update the `weekStart` too, if `weekStart` is not explicitly set
-        if (!this.weekStart) {
-            this.weekStart = getLocaleFirstDayOfWeek(this._locale);
-        }
-        this.initFormatters();
+        this._locale = this.i18nFormatter.verifyLocale(value);
+        // changing locale runtime needs to update the `weekStart` too
+        this._localeWeekStart = this.i18nFormatter.getLocaleFirstDayOfWeek(this._locale);
+        this._defaultResourceStrings = getCurrentResourceStrings(CalendarResourceStringsEN, false, this._locale);
     }
     /**
      * Gets the date format options of the views.
@@ -1256,7 +1282,6 @@ class IgxCalendarBaseDirective {
      */
     set formatOptions(formatOptions) {
         this._formatOptions = { ...this._formatOptions, ...formatOptions };
-        this.initFormatters();
     }
     /**
      * Gets whether the `day`, `month` and `year` should be rendered
@@ -1531,10 +1556,12 @@ class IgxCalendarBaseDirective {
      * @hidden
      */
     constructor() {
+        this._destroyRef = inject(DestroyRef);
         this.platform = inject(PlatformUtil);
         this._localeId = inject(LOCALE_ID);
         this.keyboardNavigation = inject(KeyboardNavigationService);
         this.cdr = inject(ChangeDetectorRef);
+        this.i18nFormatter = inject(I18N_FORMATTER);
         /**
          * Holds month view index we are operating on.
          */
@@ -1635,8 +1662,8 @@ class IgxCalendarBaseDirective {
          * @hidden
          */
         this._selection = CalendarSelection.SINGLE;
-        /** @hidden @internal */
-        this._resourceStrings = getCurrentResourceStrings(CalendarResourceStringsEN);
+        this._resourceStrings = null;
+        this._defaultResourceStrings = getCurrentResourceStrings(CalendarResourceStringsEN);
         /**
          * @hidden
          */
@@ -1654,10 +1681,8 @@ class IgxCalendarBaseDirective {
             month: true,
             year: false
         };
-        const _localeId = this._localeId;
-        this.locale = _localeId;
+        this.initLocale();
         this.viewDate = this.viewDate ? this.viewDate : new Date();
-        this.initFormatters();
     }
     /**
      * Multi/Range selection with shift key
@@ -1922,17 +1947,6 @@ class IgxCalendarBaseDirective {
             this._onChangeCallback(this.selectedDates);
         }
     }
-    /**
-     * @hidden
-     */
-    initFormatters() {
-        this.formatterDay = new Intl.DateTimeFormat(this._locale, { day: this._formatOptions.day });
-        this.formatterWeekday = new Intl.DateTimeFormat(this._locale, { weekday: this._formatOptions.weekday });
-        this.formatterMonth = new Intl.DateTimeFormat(this._locale, { month: this._formatOptions.month });
-        this.formatterYear = new Intl.DateTimeFormat(this._locale, { year: this._formatOptions.year });
-        this.formatterMonthday = new Intl.DateTimeFormat(this._locale, { month: this._formatOptions.month, day: this._formatOptions.day });
-        this.formatterRangeday = new Intl.DateTimeFormat(this._locale, { day: this._formatOptions.day, month: 'short' });
-    }
     /**
      * @hidden
      */
@@ -1962,6 +1976,19 @@ class IgxCalendarBaseDirective {
     validateDate(value) {
         return DateTimeUtil.isValidDate(value) ? value : new Date();
     }
+    initLocale() {
+        this._defaultLocale = getCurrentI18n();
+        this._locale = this._localeId !== DEFAULT_LOCALE ? this._localeId : this._locale;
+        this._localeWeekStart = this.i18nFormatter.getLocaleFirstDayOfWeek(this.locale);
+        onResourceChangeHandle(this._destroyRef, this.onResourceChange, this);
+    }
+    onResourceChange(args) {
+        this._defaultLocale = args.detail.newLocale;
+        if (!this._locale) {
+            this._defaultResourceStrings = getCurrentResourceStrings(CalendarResourceStringsEN, false);
+        }
+        this._localeWeekStart = this.i18nFormatter.getLocaleFirstDayOfWeek(this.locale);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCalendarBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.2", type: IgxCalendarBaseDirective, isStandalone: true, selector: "[igxCalendarBase]", inputs: { hideOutsideDays: ["hideOutsideDays", "hideOutsideDays", booleanAttribute], resourceStrings: "resourceStrings", weekStart: "weekStart", locale: "locale", formatOptions: "formatOptions", formatViews: "formatViews", activeView: "activeView", selection: "selection", viewDate: "viewDate", disabledDates: "disabledDates", specialDates: "specialDates", value: "value" }, outputs: { selected: "selected", viewDateChanged: "viewDateChanged", activeViewChanged: "activeViewChanged" }, host: { listeners: { "pointerdown": "onPointerdown($event)" } }, providers: [KeyboardNavigationService], viewQueries: [{ propertyName: "yearsBtns", predicate: ["yearsBtn"], descendants: true }], ngImport: i0 }); }
 }
@@ -2011,8 +2038,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
                 args: ['pointerdown', ['$event']]
             }] } });
 
+class DayDigitPipe {
+    transform(value, formatViews) {
+        if (!value) {
+            return '';
+        }
+        // strip non-numeric characters that might have been added by the locale formatter (e.g., "25日" -> "25").
+        if (formatViews.day) {
+            // Use regex to extract the numeric day value.
+            // This handles locales that include non-numeric characters (e.g. '25日' in zh-CN).
+            // match(/\d+/) is preferred over parseInt() as it robustly finds the digits regardless
+            // of their position (prefix/suffix) in the localized string.
+            const match = value.match(/\d+/);
+            return match ? match[0] : value;
+        }
+        return value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DayDigitPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: DayDigitPipe, isStandalone: true, name: "dayDigit" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DayDigitPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'dayDigit',
+                    standalone: true
+                }]
+        }] });
+
 let NEXT_ID$2 = 0;
 class IgxDaysViewComponent extends IgxCalendarBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.el = inject(ElementRef);
+        this.cdr = inject(ChangeDetectorRef);
+        this.themeToken = inject(THEME_TOKEN);
+        this.#standalone = true;
+        /**
+         * Sets/gets the `id` of the days view.
+         * If not set, the `id` will have value `"igx-days-view-0"`.
+         * ```html
+         * <igx-days-view id="my-days-view"></igx-days-view>
+         * ```
+         * ```typescript
+         * let daysViewId = this.daysView.id;
+         * ```
+         */
+        this.id = `igx-days-view-${NEXT_ID$2++}`;
+        this.tabIndex = 0;
+        this.role = 'grid';
+        this.viewClass = true;
+        /**
+         * @hidden
+         */
+        this.dateSelected = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.pageChanged = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.activeDateChange = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.previewRangeDateChange = new EventEmitter();
+        this.defaultClass = true;
+    }
     #standalone;
     get standalone() {
         return this.#standalone;
@@ -2081,69 +2173,6 @@ class IgxDaysViewComponent extends IgxCalendarBaseDirective {
     get isIndigo() {
         return this._theme === 'indigo';
     }
-    /**
-     * @hidden
-     */
-    constructor() {
-        super();
-        this.el = inject(ElementRef);
-        this.cdr = inject(ChangeDetectorRef);
-        this.themeToken = inject(THEME_TOKEN);
-        this.#standalone = true;
-        /**
-         * Sets/gets the `id` of the days view.
-         * If not set, the `id` will have value `"igx-days-view-0"`.
-         * ```html
-         * <igx-days-view id="my-days-view"></igx-days-view>
-         * ```
-         * ```typescript
-         * let daysViewId = this.daysView.id;
-         * ```
-         */
-        this.id = `igx-days-view-${NEXT_ID$2++}`;
-        this.tabIndex = 0;
-        this.role = 'grid';
-        this.viewClass = true;
-        /**
-         * @hidden
-         */
-        this.dateSelected = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.pageChanged = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.activeDateChange = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.previewRangeDateChange = new EventEmitter();
-        this._destroyRef = inject(DestroyRef);
-        this.defaultClass = true;
-        this._theme = this.themeToken.theme;
-        const themeChange = this.themeToken.onChange((theme) => {
-            if (this._theme !== theme) {
-                this._theme = theme;
-                this.cdr.detectChanges();
-            }
-        });
-        this._destroyRef.onDestroy(() => themeChange.unsubscribe());
-    }
-    setComponentTheme() {
-        // allow DOM theme override (same pattern as input-group)
-        if (!this.themeToken.preferToken) {
-            const theme = getComponentTheme(this.el.nativeElement);
-            if (theme && theme !== this._theme) {
-                this._theme = theme;
-                this.cdr.markForCheck();
-            }
-        }
-    }
-    ngAfterContentChecked() {
-        this.setComponentTheme();
-    }
     /**
      * @hidden
      */
@@ -2288,7 +2317,7 @@ class IgxDaysViewComponent extends IgxCalendarBaseDirective {
      */
     get weekHeaderLabels() {
         const weekdays = [];
-        const rawFormatter = new Intl.DateTimeFormat(this.locale, { weekday: 'long' });
+        const rawFormatter = getDateFormatter().getIntlFormatter(this.locale, { weekday: 'long' });
         for (const day of this.monthWeeks.at(0)) {
             weekdays.push({
                 long: rawFormatter.format(day.native),
@@ -2448,7 +2477,7 @@ class IgxDaysViewComponent extends IgxCalendarBaseDirective {
     setPreviewRangeDate(value) {
         this.previewRangeDate = value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxDaysViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxDaysViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxDaysViewComponent, isStandalone: true, selector: "igx-days-view", inputs: { id: "id", tabIndex: "tabIndex", role: "role", standalone: "standalone", showWeekNumbers: ["showWeekNumbers", "showWeekNumbers", booleanAttribute], activeDate: "activeDate", previewRangeDate: "previewRangeDate", hideLeadingDays: ["hideLeadingDays", "hideLeadingDays", booleanAttribute], hideTrailingDays: ["hideTrailingDays", "hideTrailingDays", booleanAttribute], showActiveDay: ["showActiveDay", "showActiveDay", booleanAttribute] }, outputs: { dateSelected: "dateSelected", pageChanged: "pageChanged", activeDateChange: "activeDateChange", previewRangeDateChange: "previewRangeDateChange" }, host: { listeners: { "keydown.arrowright": "onArrowRight($event)", "keydown.arrowleft": "onArrowLeft($event)", "keydown.arrowup": "onArrowUp($event)", "keydown.arrowdown": "onArrowDown($event)", "keydown.space": "onKeydownEnter($event)", "keydown.enter": "onKeydownEnter($event)", "keydown.home": "onKeydownHome($event)", "keydown.end": "onKeydownEnd($event)", "focus": "handleFocus()", "blur": "handleBlur()" }, properties: { "attr.id": "this.id", "attr.tabIndex": "this.tabIndex", "attr.role": "this.role", "class.igx-days-view": "this.defaultClass", "class.igx-days-view--standalone": "this.standalone", "attr.aria-activeDescendant": "this.activeDescendant", "class.igx-days-view--material": "this.isMaterial", "class.igx-days-view--fluent": "this.isFluent", "class.igx-days-view--bootstrap": "this.isBootstrap", "class.igx-days-view--indigo": "this.isIndigo" } }, providers: [
             {
                 multi: true,
@@ -2456,7 +2485,7 @@ class IgxDaysViewComponent extends IgxCalendarBaseDirective {
                 useExisting: IgxDaysViewComponent
             },
             KeyboardNavigationService
-        ], viewQueries: [{ propertyName: "dates", predicate: IgxDayItemComponent, descendants: true, read: IgxDayItemComponent }], usesInheritance: true, ngImport: i0, template: "<div\n    role=\"row\"\n    class=\"igx-days-view__row\"\n    [title]=\"weekNumberHeader.long | titlecase\"\n>\n    @if (showWeekNumbers) {\n        <div\n            role=\"columnheader\"\n            class=\"igx-days-view__label igx-days-view__label--week-number\"\n        >\n            <span>\n                <i>{{ weekNumberHeader.short | titlecase }}</i>\n            </span>\n        </div>\n    }\n    @for (dayName of weekHeaderLabels; track dayName.long) {\n        <span\n            role=\"columnheader\"\n            [attr.aria-label]=\"dayName.long\"\n            class=\"igx-days-view__label\"\n        >\n            <span class=\"igx-days-view__label-inner\">\n                {{ dayName.formatted | titlecase }}\n            </span>\n        </span>\n    }\n</div>\n\n@for (\n    week of monthWeeks; track rowTracker(i, week);\n    let isLast = $last; let i = $index\n) {\n    <div\n        class=\"igx-days-view__row\"\n        role=\"row\"\n    >\n        @if (showWeekNumbers) {\n            <div class=\"igx-days-view__date igx-days-view__date--week-number\">\n                <span\n                    role=\"rowheader\"\n                    class=\"igx-days-view__date-inner igx-days-view__date-inner--week-number\"\n                >\n                    {{ getWeekNumber(week[0]) }}\n                </span>\n            </div>\n        }\n        @for (day of week; track dateTracker($index, day)) {\n            <igx-day-item\n                #item\n                class=\"igx-days-view__date\"\n                role=\"gridcell\"\n                [attr.id]=\"item.isCurrentMonth && day.timestamp\"\n                [attr.aria-selected]=\"isSelected(day)\"\n                [attr.aria-disabled]=\"isDateDisabled(day.native)\"\n                [attr.aria-label]=\"\n                    isFirstInRange(day)\n                        ? day.native.toDateString() +\n                          ', ' +\n                          resourceStrings.igx_calendar_range_start\n                        : isLastInRange(day)\n                          ? day.native.toDateString() +\n                            ', ' +\n                            resourceStrings.igx_calendar_range_end\n                          : day.native.toDateString()\n                \"\n                [date]=\"day\"\n                [viewDate]=\"viewDate\"\n                [selection]=\"selection\"\n                [selected]=\"isSelected(day)\"\n                [isActive]=\"isActiveDate(day)\"\n                [isLastInRange]=\"isLastInRange(day)\"\n                [isFirstInRange]=\"isFirstInRange(day)\"\n                [isWithinRange]=\"isWithinRange(day.native, true)\"\n                [isWithinPreviewRange]=\"isWithinPreviewRange(day.native)\"\n                [disabledDates]=\"disabledDates\"\n                [specialDates]=\"specialDates\"\n                [hideLeadingDays]=\"hideLeadingDays\"\n                [hideTrailingDays]=\"hideTrailingDays\"\n                [attr.tabindex]=\"-1\"\n                (click)=\"handleDateClick(item)\"\n                (mouseEnter)=\"changePreviewRange(day.native)\"\n                (mouseLeave)=\"clearPreviewRange()\"\n            >\n                {{ formattedDate(day.native) }}\n            </igx-day-item>\n        }\n    </div>\n}\n", dependencies: [{ kind: "component", type: IgxDayItemComponent, selector: "igx-day-item", inputs: ["date", "viewDate", "selection", "selected", "disabledDates", "specialDates", "hideOutsideDays", "isLastInRange", "isFirstInRange", "isWithinRange", "isWithinPreviewRange", "hideLeadingDays", "hideTrailingDays", "isActive"], outputs: ["dateSelection", "mouseEnter", "mouseLeave", "mouseDown"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "dates", predicate: IgxDayItemComponent, descendants: true, read: IgxDayItemComponent }], usesInheritance: true, ngImport: i0, template: "<div\n    role=\"row\"\n    class=\"igx-days-view__row\"\n    [title]=\"weekNumberHeader.long | titlecase\"\n>\n    @if (showWeekNumbers) {\n        <div\n            role=\"columnheader\"\n            class=\"igx-days-view__label igx-days-view__label--week-number\"\n        >\n            <span>\n                <i>{{ weekNumberHeader.short | titlecase }}</i>\n            </span>\n        </div>\n    }\n    @for (dayName of weekHeaderLabels; track dayName.long) {\n        <span\n            role=\"columnheader\"\n            [attr.aria-label]=\"dayName.long\"\n            class=\"igx-days-view__label\"\n        >\n            <span class=\"igx-days-view__label-inner\">\n                {{ dayName.formatted | titlecase }}\n            </span>\n        </span>\n    }\n</div>\n\n@for (\n    week of monthWeeks; track rowTracker(i, week);\n    let isLast = $last; let i = $index\n) {\n    <div\n        class=\"igx-days-view__row\"\n        role=\"row\"\n    >\n        @if (showWeekNumbers) {\n            <div class=\"igx-days-view__date igx-days-view__date--week-number\">\n                <span\n                    role=\"rowheader\"\n                    class=\"igx-days-view__date-inner igx-days-view__date-inner--week-number\"\n                >\n                    {{ getWeekNumber(week[0]) }}\n                </span>\n            </div>\n        }\n        @for (day of week; track dateTracker($index, day)) {\n            <igx-day-item\n                #item\n                class=\"igx-days-view__date\"\n                role=\"gridcell\"\n                [attr.id]=\"item.isCurrentMonth && day.timestamp\"\n                [attr.aria-selected]=\"isSelected(day)\"\n                [attr.aria-disabled]=\"isDateDisabled(day.native)\"\n                [attr.aria-label]=\"\n                    isFirstInRange(day)\n                        ? day.native.toDateString() +\n                          ', ' +\n                          resourceStrings.igx_calendar_range_start\n                        : isLastInRange(day)\n                          ? day.native.toDateString() +\n                            ', ' +\n                            resourceStrings.igx_calendar_range_end\n                          : day.native.toDateString()\n                \"\n                [date]=\"day\"\n                [viewDate]=\"viewDate\"\n                [selection]=\"selection\"\n                [selected]=\"isSelected(day)\"\n                [isActive]=\"isActiveDate(day)\"\n                [isLastInRange]=\"isLastInRange(day)\"\n                [isFirstInRange]=\"isFirstInRange(day)\"\n                [isWithinRange]=\"isWithinRange(day.native, true)\"\n                [isWithinPreviewRange]=\"isWithinPreviewRange(day.native)\"\n                [disabledDates]=\"disabledDates\"\n                [specialDates]=\"specialDates\"\n                [hideLeadingDays]=\"hideLeadingDays\"\n                [hideTrailingDays]=\"hideTrailingDays\"\n                [attr.tabindex]=\"-1\"\n                (click)=\"handleDateClick(item)\"\n                (mouseEnter)=\"changePreviewRange(day.native)\"\n                (mouseLeave)=\"clearPreviewRange()\"\n            >\n                {{ formattedDate(day.native) | dayDigit:formatViews }}\n            </igx-day-item>\n        }\n    </div>\n}\n", dependencies: [{ kind: "component", type: IgxDayItemComponent, selector: "igx-day-item", inputs: ["date", "viewDate", "selection", "selected", "disabledDates", "specialDates", "hideOutsideDays", "isLastInRange", "isFirstInRange", "isWithinRange", "isWithinPreviewRange", "hideLeadingDays", "hideTrailingDays", "isActive"], outputs: ["dateSelection", "mouseEnter", "mouseLeave", "mouseDown"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: DayDigitPipe, name: "dayDigit" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxDaysViewComponent, decorators: [{
             type: Component,
@@ -2467,8 +2496,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
                             useExisting: IgxDaysViewComponent
                         },
                         KeyboardNavigationService
-                    ], selector: 'igx-days-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IgxDayItemComponent, TitleCasePipe], template: "<div\n    role=\"row\"\n    class=\"igx-days-view__row\"\n    [title]=\"weekNumberHeader.long | titlecase\"\n>\n    @if (showWeekNumbers) {\n        <div\n            role=\"columnheader\"\n            class=\"igx-days-view__label igx-days-view__label--week-number\"\n        >\n            <span>\n                <i>{{ weekNumberHeader.short | titlecase }}</i>\n            </span>\n        </div>\n    }\n    @for (dayName of weekHeaderLabels; track dayName.long) {\n        <span\n            role=\"columnheader\"\n            [attr.aria-label]=\"dayName.long\"\n            class=\"igx-days-view__label\"\n        >\n            <span class=\"igx-days-view__label-inner\">\n                {{ dayName.formatted | titlecase }}\n            </span>\n        </span>\n    }\n</div>\n\n@for (\n    week of monthWeeks; track rowTracker(i, week);\n    let isLast = $last; let i = $index\n) {\n    <div\n        class=\"igx-days-view__row\"\n        role=\"row\"\n    >\n        @if (showWeekNumbers) {\n            <div class=\"igx-days-view__date igx-days-view__date--week-number\">\n                <span\n                    role=\"rowheader\"\n                    class=\"igx-days-view__date-inner igx-days-view__date-inner--week-number\"\n                >\n                    {{ getWeekNumber(week[0]) }}\n                </span>\n            </div>\n        }\n        @for (day of week; track dateTracker($index, day)) {\n            <igx-day-item\n                #item\n                class=\"igx-days-view__date\"\n                role=\"gridcell\"\n                [attr.id]=\"item.isCurrentMonth && day.timestamp\"\n                [attr.aria-selected]=\"isSelected(day)\"\n                [attr.aria-disabled]=\"isDateDisabled(day.native)\"\n                [attr.aria-label]=\"\n                    isFirstInRange(day)\n                        ? day.native.toDateString() +\n                          ', ' +\n                          resourceStrings.igx_calendar_range_start\n                        : isLastInRange(day)\n                          ? day.native.toDateString() +\n                            ', ' +\n                            resourceStrings.igx_calendar_range_end\n                          : day.native.toDateString()\n                \"\n                [date]=\"day\"\n                [viewDate]=\"viewDate\"\n                [selection]=\"selection\"\n                [selected]=\"isSelected(day)\"\n                [isActive]=\"isActiveDate(day)\"\n                [isLastInRange]=\"isLastInRange(day)\"\n                [isFirstInRange]=\"isFirstInRange(day)\"\n                [isWithinRange]=\"isWithinRange(day.native, true)\"\n                [isWithinPreviewRange]=\"isWithinPreviewRange(day.native)\"\n                [disabledDates]=\"disabledDates\"\n                [specialDates]=\"specialDates\"\n                [hideLeadingDays]=\"hideLeadingDays\"\n                [hideTrailingDays]=\"hideTrailingDays\"\n                [attr.tabindex]=\"-1\"\n                (click)=\"handleDateClick(item)\"\n                (mouseEnter)=\"changePreviewRange(day.native)\"\n                (mouseLeave)=\"clearPreviewRange()\"\n            >\n                {{ formattedDate(day.native) }}\n            </igx-day-item>\n        }\n    </div>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { id: [{
+                    ], selector: 'igx-days-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IgxDayItemComponent, TitleCasePipe, DayDigitPipe], template: "<div\n    role=\"row\"\n    class=\"igx-days-view__row\"\n    [title]=\"weekNumberHeader.long | titlecase\"\n>\n    @if (showWeekNumbers) {\n        <div\n            role=\"columnheader\"\n            class=\"igx-days-view__label igx-days-view__label--week-number\"\n        >\n            <span>\n                <i>{{ weekNumberHeader.short | titlecase }}</i>\n            </span>\n        </div>\n    }\n    @for (dayName of weekHeaderLabels; track dayName.long) {\n        <span\n            role=\"columnheader\"\n            [attr.aria-label]=\"dayName.long\"\n            class=\"igx-days-view__label\"\n        >\n            <span class=\"igx-days-view__label-inner\">\n                {{ dayName.formatted | titlecase }}\n            </span>\n        </span>\n    }\n</div>\n\n@for (\n    week of monthWeeks; track rowTracker(i, week);\n    let isLast = $last; let i = $index\n) {\n    <div\n        class=\"igx-days-view__row\"\n        role=\"row\"\n    >\n        @if (showWeekNumbers) {\n            <div class=\"igx-days-view__date igx-days-view__date--week-number\">\n                <span\n                    role=\"rowheader\"\n                    class=\"igx-days-view__date-inner igx-days-view__date-inner--week-number\"\n                >\n                    {{ getWeekNumber(week[0]) }}\n                </span>\n            </div>\n        }\n        @for (day of week; track dateTracker($index, day)) {\n            <igx-day-item\n                #item\n                class=\"igx-days-view__date\"\n                role=\"gridcell\"\n                [attr.id]=\"item.isCurrentMonth && day.timestamp\"\n                [attr.aria-selected]=\"isSelected(day)\"\n                [attr.aria-disabled]=\"isDateDisabled(day.native)\"\n                [attr.aria-label]=\"\n                    isFirstInRange(day)\n                        ? day.native.toDateString() +\n                          ', ' +\n                          resourceStrings.igx_calendar_range_start\n                        : isLastInRange(day)\n                          ? day.native.toDateString() +\n                            ', ' +\n                            resourceStrings.igx_calendar_range_end\n                          : day.native.toDateString()\n                \"\n                [date]=\"day\"\n                [viewDate]=\"viewDate\"\n                [selection]=\"selection\"\n                [selected]=\"isSelected(day)\"\n                [isActive]=\"isActiveDate(day)\"\n                [isLastInRange]=\"isLastInRange(day)\"\n                [isFirstInRange]=\"isFirstInRange(day)\"\n                [isWithinRange]=\"isWithinRange(day.native, true)\"\n                [isWithinPreviewRange]=\"isWithinPreviewRange(day.native)\"\n                [disabledDates]=\"disabledDates\"\n                [specialDates]=\"specialDates\"\n                [hideLeadingDays]=\"hideLeadingDays\"\n                [hideTrailingDays]=\"hideTrailingDays\"\n                [attr.tabindex]=\"-1\"\n                (click)=\"handleDateClick(item)\"\n                (mouseEnter)=\"changePreviewRange(day.native)\"\n                (mouseLeave)=\"clearPreviewRange()\"\n            >\n                {{ formattedDate(day.native) | dayDigit:formatViews }}\n            </igx-day-item>\n        }\n    </div>\n}\n" }]
+        }], propDecorators: { id: [{
                 type: HostBinding,
                 args: ['attr.id']
             }, {
@@ -2945,6 +2974,9 @@ class IgxCalendarComponent extends IgxCalendarBaseDirective {
                 currentValue: this.viewDate
             });
         });
+        this._destroyRef.onDestroy(() => {
+            this.keyboardNavigation.detachKeyboardHandlers();
+        });
     }
     onWrapperFocus(_event) {
         this.showActiveDay = true;
@@ -3207,11 +3239,11 @@ class IgxCalendarComponent extends IgxCalendarBaseDirective {
      */
     getFormattedDate() {
         const date = this.headerDate;
-        const monthFormatter = new Intl.DateTimeFormat(this.locale, { month: 'short', day: 'numeric' });
-        const dayFormatter = new Intl.DateTimeFormat(this.locale, { weekday: 'short' });
+        const monthFormatted = getDateFormatter().formatDateTime(date, this.locale, { month: 'short', day: 'numeric' });
+        const dayFormatted = getDateFormatter().formatDateTime(date, this.locale, { weekday: 'short' });
         return {
-            monthday: monthFormatter.format(date),
-            weekday: dayFormatter.format(date),
+            monthday: monthFormatted,
+            weekday: dayFormatted,
         };
     }
     /**
@@ -3221,8 +3253,8 @@ class IgxCalendarComponent extends IgxCalendarBaseDirective {
     getFormattedRange() {
         const dates = this.selectedDates;
         return {
-            start: this.formatterRangeday.format(dates.at(0)),
-            end: this.formatterRangeday.format(dates.at(-1))
+            start: this.formatterRangeDay.format(dates.at(0)),
+            end: this.formatterRangeDay.format(dates.at(-1))
         };
     }
     /**
@@ -3358,13 +3390,6 @@ class IgxCalendarComponent extends IgxCalendarBaseDirective {
             isDateInRanges(target, this.disabledDates);
         this.activeDate = outOfRange ? date : target.native;
     }
-    /**
-     * @hidden
-     * @internal
-     */
-    ngOnDestroy() {
-        this.keyboardNavigation.detachKeyboardHandlers();
-    }
     /**
      * @hidden
      * @internal
@@ -3413,7 +3438,7 @@ class IgxCalendarComponent extends IgxCalendarBaseDirective {
                 multi: false,
                 provide: KeyboardNavigationService,
             },
-        ], queries: [{ propertyName: "headerTemplateDirective", first: true, predicate: i0.forwardRef(() => IgxCalendarHeaderTemplateDirective), descendants: true, read: IgxCalendarHeaderTemplateDirective, static: true }, { propertyName: "headerTitleTemplateDirective", first: true, predicate: i0.forwardRef(() => IgxCalendarHeaderTitleTemplateDirective), descendants: true, read: IgxCalendarHeaderTitleTemplateDirective, static: true }, { propertyName: "subheaderTemplateDirective", first: true, predicate: i0.forwardRef(() => IgxCalendarSubheaderTemplateDirective), descendants: true, read: IgxCalendarSubheaderTemplateDirective, static: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "dacadeView", first: true, predicate: ["decade"], descendants: true, read: IgxYearsViewComponent }, { propertyName: "monthsView", first: true, predicate: ["months"], descendants: true, read: IgxMonthsViewComponent }, { propertyName: "daysView", first: true, predicate: ["days"], descendants: true, read: IgxDaysViewComponent }, { propertyName: "prevPageBtn", first: true, predicate: ["prevPageBtn"], descendants: true }, { propertyName: "nextPageBtn", first: true, predicate: ["nextPageBtn"], descendants: true }, { propertyName: "monthsBtns", predicate: ["monthsBtn"], descendants: true }, { propertyName: "monthViews", predicate: ["days"], descendants: true, read: IgxDaysViewComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template let-result #defaultHeaderTitle>\n    @if (selection === 'single') {\n        <span>{{ resourceStrings.igx_calendar_select_date }}</span>\n    }\n    @if (selection === 'range') {\n        <span>{{ resourceStrings.igx_calendar_range_placeholder }}</span>\n    }\n</ng-template>\n\n<ng-template let-result #defaultHeaderDate>\n    @if (selection === 'single') {\n        <span>{{ getFormattedDate().weekday }},&nbsp;</span>\n        <span>{{ getFormattedDate().monthday }}</span>\n    }\n    @if (selection === 'range') {\n        <span>{{ selectedDates.length === 0 ? 'Start' : getFormattedRange().start}}</span>\n        <span>&nbsp;-&nbsp;</span>\n        <span>{{ selectedDates.length <= 1 ? 'End' : getFormattedRange().end}}</span>\n    }\n</ng-template>\n\n<!-- Month -->\n<ng-template #defaultMonth let-obj>\n    <span\n        #monthsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'LLLL') + ', ' + resourceStrings.igx_calendar_select_month\"\n        (keydown)=\"onActiveViewYearKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewYear($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedMonth(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n    @if (activeView === 'year') {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n    }\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n        (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedYear(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Month Year -->\n<ng-template #defaultMonthYear let-obj let-result>\n    @if (monthsViewNumber < 2 || obj.index < 1) {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">\n            {{ monthsViewNumber > 1 ?\n            (resourceStrings.igx_calendar_first_picker_of.replace('{0}', monthsViewNumber.toString()) + ' ' +\n            (obj.date | date: 'LLLL yyyy')) :\n            resourceStrings.igx_calendar_selected_month_is + (obj.date | date: 'LLLL yyyy')}}\n        </span>\n    }\n    <ng-container *ngTemplateOutlet=\"defaultMonth; context: {$implicit: obj}\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"defaultYear; context: {$implicit: obj}\"></ng-container>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n    <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_prev\"></igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_next\"></igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n    <div\n        #prevPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__prev\"\n        role=\"button\"\n        [attr.aria-label]=\"prevNavLabel((getPrevMonth(viewDate) | date: 'LLLL'))\"\n        data-action=\"prev\"\n        igxCalendarScrollPage\n        [startScroll]=\"startPrevPageScroll\"\n        [stopScroll]=\"stopPageScroll\"\n        (keydown)=\"$event.stopPropagation()\"\n    >\n        <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n    <div\n        #nextPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__next\"\n        role=\"button\"\n        [attr.aria-label]=\"nextNavLabel((getNextMonth(viewDate, monthsViewNumber) | date: 'LLLL'))\"\n        data-action=\"next\"\n        igxCalendarScrollPage\n        [startScroll]=\"startNextPageScroll\"\n        [stopScroll]=\"stopPageScroll\"\n        (keydown)=\"$event.stopPropagation()\"\n    >\n        <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- PICKER IN DAYS -->\n<ng-template #calendarDaysPicker let-i>\n    <section class=\"igx-calendar-picker\" [style.--calendar-row-start]=\"1 + (2 * i)\">\n        <div class=\"igx-calendar-picker__dates\" [attr.data-month]=\"i | IgxGetViewDate:viewDate:false\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultMonthYear; context: getContext(i)\">\n            </ng-container>\n        </div>\n        @if (this.orientation === 'horizontal' ? i === monthsViewNumber - 1 : i === 0) {\n            <div class=\"igx-calendar-picker__nav\">\n                <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n            </div>\n        }\n    </section>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultYear; context: getContext(0)\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultDecade;\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n\n@if (selection === 'single' && hasHeader || selection === 'range' && hasHeader) {\n    <header\n        aria-labelledby=\"igx-aria-calendar-title-month igx-aria-calendar-title-year\"\n        class=\"igx-calendar__header\"\n    >\n        <h5 id=\"igx-aria-calendar-title-year\" class=\"igx-calendar__header-year\">\n            <ng-container *ngTemplateOutlet=\"headerTitleTemplate ?? defaultHeaderTitle; context: headerContext\"></ng-container>\n        </h5>\n        <h2 id=\"igx-aria-calendar-title-month\" class=\"igx-calendar__header-date\">\n            <ng-container *ngTemplateOutlet=\"headerTemplate ? headerTemplate : defaultHeaderDate; context: headerContext\">\n            </ng-container>\n        </h2>\n    </header>\n}\n\n\n<div\n    #wrapper\n    [style.--calendar-months]=\"monthsViewNumber\"\n    [tabIndex]=\"0\"\n    class=\"igx-calendar__wrapper\"\n    [class.igx-calendar__wrapper--vertical]=\"orientation === 'vertical'\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.aria-multiselectable]=\"selection !== 'single'\"\n    aria-labelledby=\"calendar-desc\"\n    role=\"grid\"\n    (focus)=\"this.onWrapperFocus($event)\"\n    (blur)=\"this.onWrapperBlur($event)\"\n    >\n    <div id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n        @switch (selection) {\n            @case ('multi') {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_multi_selection.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_multi_selection}}\n            }\n            @case ('range') {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_range_selection.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_range_selection}}\n            }\n            @default {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_single_selection.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_single_selection}}\n            }\n        }\n    </div>\n    <section\n        class=\"igx-calendar__pickers\"\n        [class.igx-calendar__pickers--days]=\"isDefaultView\"\n        [class.igx-calendar__pickers--vertical]=\"orientation === 'vertical'\"\n    >\n        @if (isDefaultView) {\n            @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) {\n                <ng-container *ngTemplateOutlet=\"calendarDaysPicker; context: {$implicit: i}\"></ng-container>\n            }\n        }\n\n        @if (isYearView) {\n            <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n        }\n\n        @if (isDecadeView) {\n            <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n        }\n    </section>\n\n    <section class=\"igx-calendar__body\" [class.igx-calendar__body--vertical]=\"orientation === 'vertical'\" role=\"presentation\">\n        @if (isDefaultView) {\n            @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) {\n                <igx-days-view\n                    #days\n                    role=\"rowgroup\"\n                    [tabIndex]=\"-1\"\n                    [selection]=\"selection\"\n                    [locale]=\"locale\"\n                    [value]=\"value\"\n                    [(activeDate)]=\"activeDate\"\n                    [(previewRangeDate)]=\"previewRangeDate\"\n                    [viewDate]=\"i | IgxGetViewDate: viewDate\"\n                    [weekStart]=\"weekStart\"\n                    [formatOptions]=\"formatOptions\"\n                    [formatViews]=\"formatViews\"\n                    [disabledDates]=\"disabledDates\"\n                    [specialDates]=\"specialDates\"\n                    [style.--calendar-row-start]=\"(i + 1) * 2\"\n                    [hideLeadingDays]=\"hideOutsideDays || i !== 0\"\n                    [hideTrailingDays]=\"hideOutsideDays || i !== monthsViewNumber - 1\"\n                    [showWeekNumbers]=\"showWeekNumbers\"\n                    [showActiveDay]=\"showActiveDay\"\n                    [standalone]=\"false\"\n                    (swiperight)=\"previousPage()\"\n                    (swipeleft)=\"nextPage()\"\n                    (dateSelected)=\"handleDateSelection($event)\"\n                    (mousedown)=\"$event.preventDefault()\">\n                </igx-days-view>\n            }\n        }\n\n        @if (isYearView) {\n            <igx-months-view\n                #months\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.month\"\n                [monthFormat]=\"formatOptions.month\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (pageChanged)=\"updateYear($event)\"\n                (activeDateChanged)=\"updateActiveDescendant($event)\"\n                (selected)=\"changeMonth($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            </igx-months-view>\n        }\n\n        @if (isDecadeView) {\n            <igx-years-view\n                #decade\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.year\"\n                [yearFormat]=\"formatOptions.year\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (pageChanged)=\"updateYear($event)\"\n                (activeDateChanged)=\"updateActiveDescendant($event)\"\n                (selected)=\"changeYear($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            </igx-years-view>\n        }\n    </section>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxCalendarScrollPageDirective, selector: "[igxCalendarScrollPage]", inputs: ["startScroll", "stopScroll"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxDaysViewComponent, selector: "igx-days-view", inputs: ["id", "tabIndex", "role", "standalone", "showWeekNumbers", "activeDate", "previewRangeDate", "hideLeadingDays", "hideTrailingDays", "showActiveDay"], outputs: ["dateSelected", "pageChanged", "activeDateChange", "previewRangeDateChange"] }, { kind: "component", type: IgxMonthsViewComponent, selector: "igx-months-view", inputs: ["id", "standalone", "monthFormat", "formatView"] }, { kind: "component", type: IgxYearsViewComponent, selector: "igx-years-view", inputs: ["standalone", "yearFormat"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: IgxMonthViewSlotsCalendar, name: "IgxMonthViewSlots" }, { kind: "pipe", type: IgxGetViewDateCalendar, name: "IgxGetViewDate" }] }); }
+        ], queries: [{ propertyName: "headerTemplateDirective", first: true, predicate: i0.forwardRef(() => IgxCalendarHeaderTemplateDirective), descendants: true, read: IgxCalendarHeaderTemplateDirective, static: true }, { propertyName: "headerTitleTemplateDirective", first: true, predicate: i0.forwardRef(() => IgxCalendarHeaderTitleTemplateDirective), descendants: true, read: IgxCalendarHeaderTitleTemplateDirective, static: true }, { propertyName: "subheaderTemplateDirective", first: true, predicate: i0.forwardRef(() => IgxCalendarSubheaderTemplateDirective), descendants: true, read: IgxCalendarSubheaderTemplateDirective, static: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "dacadeView", first: true, predicate: ["decade"], descendants: true, read: IgxYearsViewComponent }, { propertyName: "monthsView", first: true, predicate: ["months"], descendants: true, read: IgxMonthsViewComponent }, { propertyName: "daysView", first: true, predicate: ["days"], descendants: true, read: IgxDaysViewComponent }, { propertyName: "prevPageBtn", first: true, predicate: ["prevPageBtn"], descendants: true }, { propertyName: "nextPageBtn", first: true, predicate: ["nextPageBtn"], descendants: true }, { propertyName: "monthsBtns", predicate: ["monthsBtn"], descendants: true }, { propertyName: "monthViews", predicate: ["days"], descendants: true, read: IgxDaysViewComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template let-result #defaultHeaderTitle>\n    @if (selection === 'single') {\n        <span>{{ resourceStrings.igx_calendar_select_date }}</span>\n    }\n    @if (selection === 'range') {\n        <span>{{ resourceStrings.igx_calendar_range_placeholder }}</span>\n    }\n</ng-template>\n\n<ng-template let-result #defaultHeaderDate>\n    @if (selection === 'single') {\n        <span>{{ getFormattedDate().weekday }},&nbsp;</span>\n        <span>{{ getFormattedDate().monthday }}</span>\n    }\n    @if (selection === 'range') {\n        <span>{{ selectedDates.length === 0 ? 'Start' : getFormattedRange().start}}</span>\n        <span>&nbsp;-&nbsp;</span>\n        <span>{{ selectedDates.length <= 1 ? 'End' : getFormattedRange().end}}</span>\n    }\n</ng-template>\n\n<!-- Month -->\n<ng-template #defaultMonth let-obj>\n    <span\n        #monthsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'LLLL') + ', ' + resourceStrings.igx_calendar_select_month\"\n        (keydown)=\"onActiveViewYearKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewYear($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedMonth(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n    @if (activeView === 'year') {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n    }\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n        (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedYear(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Month Year -->\n<ng-template #defaultMonthYear let-obj let-result>\n    @if (monthsViewNumber < 2 || obj.index < 1) {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">\n            {{ monthsViewNumber > 1 ?\n            (resourceStrings.igx_calendar_first_picker_of.replace('{0}', monthsViewNumber.toString()) + ' ' +\n            (obj.date | date: 'LLLL yyyy')) :\n            resourceStrings.igx_calendar_selected_month_is + (obj.date | date: 'LLLL yyyy')}}\n        </span>\n    }\n    <ng-container *ngTemplateOutlet=\"defaultMonth; context: {$implicit: obj}\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"defaultYear; context: {$implicit: obj}\"></ng-container>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n    <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_prev\"></igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_next\"></igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n    <div\n        #prevPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__prev\"\n        role=\"button\"\n        [attr.aria-label]=\"prevNavLabel((getPrevMonth(viewDate) | date: 'LLLL'))\"\n        data-action=\"prev\"\n        igxCalendarScrollPage\n        [startScroll]=\"startPrevPageScroll\"\n        [stopScroll]=\"stopPageScroll\"\n        (keydown)=\"$event.stopPropagation()\"\n    >\n        <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n    <div\n        #nextPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__next\"\n        role=\"button\"\n        [attr.aria-label]=\"nextNavLabel((getNextMonth(viewDate, monthsViewNumber) | date: 'LLLL'))\"\n        data-action=\"next\"\n        igxCalendarScrollPage\n        [startScroll]=\"startNextPageScroll\"\n        [stopScroll]=\"stopPageScroll\"\n        (keydown)=\"$event.stopPropagation()\"\n    >\n        <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- PICKER IN DAYS -->\n<ng-template #calendarDaysPicker let-i>\n    <section class=\"igx-calendar-picker\" [style.--calendar-row-start]=\"1 + (2 * i)\">\n        <div class=\"igx-calendar-picker__dates\" [attr.data-month]=\"i | IgxGetViewDate:viewDate:false\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultMonthYear; context: getContext(i)\">\n            </ng-container>\n        </div>\n        @if (this.orientation === 'horizontal' ? i === monthsViewNumber - 1 : i === 0) {\n            <div class=\"igx-calendar-picker__nav\">\n                <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n            </div>\n        }\n    </section>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultYear; context: getContext(0)\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultDecade;\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n\n@if (selection === 'single' && hasHeader || selection === 'range' && hasHeader) {\n    <header\n        aria-labelledby=\"igx-aria-calendar-title-month igx-aria-calendar-title-year\"\n        class=\"igx-calendar__header\"\n    >\n        <h5 id=\"igx-aria-calendar-title-year\" class=\"igx-calendar__header-year\">\n            <ng-container *ngTemplateOutlet=\"headerTitleTemplate ?? defaultHeaderTitle; context: headerContext\"></ng-container>\n        </h5>\n        <h2 id=\"igx-aria-calendar-title-month\" class=\"igx-calendar__header-date\">\n            <ng-container *ngTemplateOutlet=\"headerTemplate ? headerTemplate : defaultHeaderDate; context: headerContext\">\n            </ng-container>\n        </h2>\n    </header>\n}\n\n\n<div\n    #wrapper\n    [style.--calendar-months]=\"monthsViewNumber\"\n    [tabIndex]=\"0\"\n    class=\"igx-calendar__wrapper\"\n    [class.igx-calendar__wrapper--vertical]=\"orientation === 'vertical'\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.aria-multiselectable]=\"selection !== 'single'\"\n    aria-labelledby=\"calendar-desc\"\n    role=\"grid\"\n    (focus)=\"this.onWrapperFocus($event)\"\n    (blur)=\"this.onWrapperBlur($event)\"\n    >\n    <div id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n        @switch (selection) {\n            @case ('multi') {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_multi_selection.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_multi_selection}}\n            }\n            @case ('range') {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_range_selection.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_range_selection}}\n            }\n            @default {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_single_selection.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_single_selection}}\n            }\n        }\n    </div>\n    <section\n        class=\"igx-calendar__pickers\"\n        [class.igx-calendar__pickers--days]=\"isDefaultView\"\n        [class.igx-calendar__pickers--vertical]=\"orientation === 'vertical'\"\n    >\n        @if (isDefaultView) {\n            @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) {\n                <ng-container *ngTemplateOutlet=\"calendarDaysPicker; context: {$implicit: i}\"></ng-container>\n            }\n        }\n\n        @if (isYearView) {\n            <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n        }\n\n        @if (isDecadeView) {\n            <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n        }\n    </section>\n\n    <section class=\"igx-calendar__body\" [class.igx-calendar__body--vertical]=\"orientation === 'vertical'\" role=\"presentation\">\n        @if (isDefaultView) {\n            @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) {\n                <igx-days-view\n                    #days\n                    role=\"rowgroup\"\n                    [tabIndex]=\"-1\"\n                    [selection]=\"selection\"\n                    [locale]=\"locale\"\n                    [value]=\"value\"\n                    [(activeDate)]=\"activeDate\"\n                    [(previewRangeDate)]=\"previewRangeDate\"\n                    [viewDate]=\"i | IgxGetViewDate: viewDate\"\n                    [weekStart]=\"weekStart\"\n                    [formatOptions]=\"formatOptions\"\n                    [formatViews]=\"formatViews\"\n                    [disabledDates]=\"disabledDates\"\n                    [specialDates]=\"specialDates\"\n                    [style.--calendar-row-start]=\"(i + 1) * 2\"\n                    [hideLeadingDays]=\"hideOutsideDays || i !== 0\"\n                    [hideTrailingDays]=\"hideOutsideDays || i !== monthsViewNumber - 1\"\n                    [showWeekNumbers]=\"showWeekNumbers\"\n                    [showActiveDay]=\"showActiveDay\"\n                    [standalone]=\"false\"\n                    (swiperight)=\"previousPage()\"\n                    (swipeleft)=\"nextPage()\"\n                    (dateSelected)=\"handleDateSelection($event)\"\n                    (mousedown)=\"$event.preventDefault()\">\n                </igx-days-view>\n            }\n        }\n\n        @if (isYearView) {\n            <igx-months-view\n                #months\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.month\"\n                [monthFormat]=\"formatOptions.month\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (pageChanged)=\"updateYear($event)\"\n                (activeDateChanged)=\"updateActiveDescendant($event)\"\n                (selected)=\"changeMonth($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            </igx-months-view>\n        }\n\n        @if (isDecadeView) {\n            <igx-years-view\n                #decade\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.year\"\n                [yearFormat]=\"formatOptions.year\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (pageChanged)=\"updateYear($event)\"\n                (activeDateChanged)=\"updateActiveDescendant($event)\"\n                (selected)=\"changeYear($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            </igx-years-view>\n        }\n    </section>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxCalendarScrollPageDirective, selector: "[igxCalendarScrollPage]", inputs: ["startScroll", "stopScroll"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxDaysViewComponent, selector: "igx-days-view", inputs: ["id", "tabIndex", "role", "standalone", "showWeekNumbers", "activeDate", "previewRangeDate", "hideLeadingDays", "hideTrailingDays", "showActiveDay"], outputs: ["dateSelected", "pageChanged", "activeDateChange", "previewRangeDateChange"] }, { kind: "component", type: IgxMonthsViewComponent, selector: "igx-months-view", inputs: ["id", "standalone", "monthFormat", "formatView"] }, { kind: "component", type: IgxYearsViewComponent, selector: "igx-years-view", inputs: ["standalone", "yearFormat"] }, { kind: "pipe", type: IgxDateFormatterPipe, name: "date" }, { kind: "pipe", type: IgxMonthViewSlotsCalendar, name: "IgxMonthViewSlots" }, { kind: "pipe", type: IgxGetViewDateCalendar, name: "IgxGetViewDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCalendarComponent, decorators: [{
             type: Component,
@@ -3427,7 +3452,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
                             multi: false,
                             provide: KeyboardNavigationService,
                         },
-                    ], selector: 'igx-calendar', imports: [NgTemplateOutlet, IgxCalendarScrollPageDirective, IgxIconComponent, IgxDaysViewComponent, IgxMonthsViewComponent, IgxYearsViewComponent, DatePipe, IgxMonthViewSlotsCalendar, IgxGetViewDateCalendar], template: "<ng-template let-result #defaultHeaderTitle>\n    @if (selection === 'single') {\n        <span>{{ resourceStrings.igx_calendar_select_date }}</span>\n    }\n    @if (selection === 'range') {\n        <span>{{ resourceStrings.igx_calendar_range_placeholder }}</span>\n    }\n</ng-template>\n\n<ng-template let-result #defaultHeaderDate>\n    @if (selection === 'single') {\n        <span>{{ getFormattedDate().weekday }},&nbsp;</span>\n        <span>{{ getFormattedDate().monthday }}</span>\n    }\n    @if (selection === 'range') {\n        <span>{{ selectedDates.length === 0 ? 'Start' : getFormattedRange().start}}</span>\n        <span>&nbsp;-&nbsp;</span>\n        <span>{{ selectedDates.length <= 1 ? 'End' : getFormattedRange().end}}</span>\n    }\n</ng-template>\n\n<!-- Month -->\n<ng-template #defaultMonth let-obj>\n    <span\n        #monthsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'LLLL') + ', ' + resourceStrings.igx_calendar_select_month\"\n        (keydown)=\"onActiveViewYearKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewYear($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedMonth(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n    @if (activeView === 'year') {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n    }\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n        (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedYear(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Month Year -->\n<ng-template #defaultMonthYear let-obj let-result>\n    @if (monthsViewNumber < 2 || obj.index < 1) {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">\n            {{ monthsViewNumber > 1 ?\n            (resourceStrings.igx_calendar_first_picker_of.replace('{0}', monthsViewNumber.toString()) + ' ' +\n            (obj.date | date: 'LLLL yyyy')) :\n            resourceStrings.igx_calendar_selected_month_is + (obj.date | date: 'LLLL yyyy')}}\n        </span>\n    }\n    <ng-container *ngTemplateOutlet=\"defaultMonth; context: {$implicit: obj}\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"defaultYear; context: {$implicit: obj}\"></ng-container>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n    <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_prev\"></igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_next\"></igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n    <div\n        #prevPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__prev\"\n        role=\"button\"\n        [attr.aria-label]=\"prevNavLabel((getPrevMonth(viewDate) | date: 'LLLL'))\"\n        data-action=\"prev\"\n        igxCalendarScrollPage\n        [startScroll]=\"startPrevPageScroll\"\n        [stopScroll]=\"stopPageScroll\"\n        (keydown)=\"$event.stopPropagation()\"\n    >\n        <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n    <div\n        #nextPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__next\"\n        role=\"button\"\n        [attr.aria-label]=\"nextNavLabel((getNextMonth(viewDate, monthsViewNumber) | date: 'LLLL'))\"\n        data-action=\"next\"\n        igxCalendarScrollPage\n        [startScroll]=\"startNextPageScroll\"\n        [stopScroll]=\"stopPageScroll\"\n        (keydown)=\"$event.stopPropagation()\"\n    >\n        <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- PICKER IN DAYS -->\n<ng-template #calendarDaysPicker let-i>\n    <section class=\"igx-calendar-picker\" [style.--calendar-row-start]=\"1 + (2 * i)\">\n        <div class=\"igx-calendar-picker__dates\" [attr.data-month]=\"i | IgxGetViewDate:viewDate:false\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultMonthYear; context: getContext(i)\">\n            </ng-container>\n        </div>\n        @if (this.orientation === 'horizontal' ? i === monthsViewNumber - 1 : i === 0) {\n            <div class=\"igx-calendar-picker__nav\">\n                <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n            </div>\n        }\n    </section>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultYear; context: getContext(0)\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultDecade;\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n\n@if (selection === 'single' && hasHeader || selection === 'range' && hasHeader) {\n    <header\n        aria-labelledby=\"igx-aria-calendar-title-month igx-aria-calendar-title-year\"\n        class=\"igx-calendar__header\"\n    >\n        <h5 id=\"igx-aria-calendar-title-year\" class=\"igx-calendar__header-year\">\n            <ng-container *ngTemplateOutlet=\"headerTitleTemplate ?? defaultHeaderTitle; context: headerContext\"></ng-container>\n        </h5>\n        <h2 id=\"igx-aria-calendar-title-month\" class=\"igx-calendar__header-date\">\n            <ng-container *ngTemplateOutlet=\"headerTemplate ? headerTemplate : defaultHeaderDate; context: headerContext\">\n            </ng-container>\n        </h2>\n    </header>\n}\n\n\n<div\n    #wrapper\n    [style.--calendar-months]=\"monthsViewNumber\"\n    [tabIndex]=\"0\"\n    class=\"igx-calendar__wrapper\"\n    [class.igx-calendar__wrapper--vertical]=\"orientation === 'vertical'\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.aria-multiselectable]=\"selection !== 'single'\"\n    aria-labelledby=\"calendar-desc\"\n    role=\"grid\"\n    (focus)=\"this.onWrapperFocus($event)\"\n    (blur)=\"this.onWrapperBlur($event)\"\n    >\n    <div id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n        @switch (selection) {\n            @case ('multi') {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_multi_selection.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_multi_selection}}\n            }\n            @case ('range') {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_range_selection.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_range_selection}}\n            }\n            @default {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_single_selection.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_single_selection}}\n            }\n        }\n    </div>\n    <section\n        class=\"igx-calendar__pickers\"\n        [class.igx-calendar__pickers--days]=\"isDefaultView\"\n        [class.igx-calendar__pickers--vertical]=\"orientation === 'vertical'\"\n    >\n        @if (isDefaultView) {\n            @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) {\n                <ng-container *ngTemplateOutlet=\"calendarDaysPicker; context: {$implicit: i}\"></ng-container>\n            }\n        }\n\n        @if (isYearView) {\n            <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n        }\n\n        @if (isDecadeView) {\n            <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n        }\n    </section>\n\n    <section class=\"igx-calendar__body\" [class.igx-calendar__body--vertical]=\"orientation === 'vertical'\" role=\"presentation\">\n        @if (isDefaultView) {\n            @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) {\n                <igx-days-view\n                    #days\n                    role=\"rowgroup\"\n                    [tabIndex]=\"-1\"\n                    [selection]=\"selection\"\n                    [locale]=\"locale\"\n                    [value]=\"value\"\n                    [(activeDate)]=\"activeDate\"\n                    [(previewRangeDate)]=\"previewRangeDate\"\n                    [viewDate]=\"i | IgxGetViewDate: viewDate\"\n                    [weekStart]=\"weekStart\"\n                    [formatOptions]=\"formatOptions\"\n                    [formatViews]=\"formatViews\"\n                    [disabledDates]=\"disabledDates\"\n                    [specialDates]=\"specialDates\"\n                    [style.--calendar-row-start]=\"(i + 1) * 2\"\n                    [hideLeadingDays]=\"hideOutsideDays || i !== 0\"\n                    [hideTrailingDays]=\"hideOutsideDays || i !== monthsViewNumber - 1\"\n                    [showWeekNumbers]=\"showWeekNumbers\"\n                    [showActiveDay]=\"showActiveDay\"\n                    [standalone]=\"false\"\n                    (swiperight)=\"previousPage()\"\n                    (swipeleft)=\"nextPage()\"\n                    (dateSelected)=\"handleDateSelection($event)\"\n                    (mousedown)=\"$event.preventDefault()\">\n                </igx-days-view>\n            }\n        }\n\n        @if (isYearView) {\n            <igx-months-view\n                #months\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.month\"\n                [monthFormat]=\"formatOptions.month\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (pageChanged)=\"updateYear($event)\"\n                (activeDateChanged)=\"updateActiveDescendant($event)\"\n                (selected)=\"changeMonth($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            </igx-months-view>\n        }\n\n        @if (isDecadeView) {\n            <igx-years-view\n                #decade\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.year\"\n                [yearFormat]=\"formatOptions.year\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (pageChanged)=\"updateYear($event)\"\n                (activeDateChanged)=\"updateActiveDescendant($event)\"\n                (selected)=\"changeYear($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            </igx-years-view>\n        }\n    </section>\n</div>\n" }]
+                    ], selector: 'igx-calendar', imports: [NgTemplateOutlet, IgxCalendarScrollPageDirective, IgxIconComponent, IgxDaysViewComponent, IgxMonthsViewComponent, IgxYearsViewComponent, IgxDateFormatterPipe, IgxMonthViewSlotsCalendar, IgxGetViewDateCalendar], template: "<ng-template let-result #defaultHeaderTitle>\n    @if (selection === 'single') {\n        <span>{{ resourceStrings.igx_calendar_select_date }}</span>\n    }\n    @if (selection === 'range') {\n        <span>{{ resourceStrings.igx_calendar_range_placeholder }}</span>\n    }\n</ng-template>\n\n<ng-template let-result #defaultHeaderDate>\n    @if (selection === 'single') {\n        <span>{{ getFormattedDate().weekday }},&nbsp;</span>\n        <span>{{ getFormattedDate().monthday }}</span>\n    }\n    @if (selection === 'range') {\n        <span>{{ selectedDates.length === 0 ? 'Start' : getFormattedRange().start}}</span>\n        <span>&nbsp;-&nbsp;</span>\n        <span>{{ selectedDates.length <= 1 ? 'End' : getFormattedRange().end}}</span>\n    }\n</ng-template>\n\n<!-- Month -->\n<ng-template #defaultMonth let-obj>\n    <span\n        #monthsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'LLLL') + ', ' + resourceStrings.igx_calendar_select_month\"\n        (keydown)=\"onActiveViewYearKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewYear($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedMonth(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n    @if (activeView === 'year') {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n    }\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n        (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedYear(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Month Year -->\n<ng-template #defaultMonthYear let-obj let-result>\n    @if (monthsViewNumber < 2 || obj.index < 1) {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">\n            {{ monthsViewNumber > 1 ?\n            (resourceStrings.igx_calendar_first_picker_of.replace('{0}', monthsViewNumber.toString()) + ' ' +\n            (obj.date | date: 'LLLL yyyy')) :\n            resourceStrings.igx_calendar_selected_month_is + (obj.date | date: 'LLLL yyyy')}}\n        </span>\n    }\n    <ng-container *ngTemplateOutlet=\"defaultMonth; context: {$implicit: obj}\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"defaultYear; context: {$implicit: obj}\"></ng-container>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n    <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_prev\"></igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_next\"></igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n    <div\n        #prevPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__prev\"\n        role=\"button\"\n        [attr.aria-label]=\"prevNavLabel((getPrevMonth(viewDate) | date: 'LLLL'))\"\n        data-action=\"prev\"\n        igxCalendarScrollPage\n        [startScroll]=\"startPrevPageScroll\"\n        [stopScroll]=\"stopPageScroll\"\n        (keydown)=\"$event.stopPropagation()\"\n    >\n        <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n    <div\n        #nextPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__next\"\n        role=\"button\"\n        [attr.aria-label]=\"nextNavLabel((getNextMonth(viewDate, monthsViewNumber) | date: 'LLLL'))\"\n        data-action=\"next\"\n        igxCalendarScrollPage\n        [startScroll]=\"startNextPageScroll\"\n        [stopScroll]=\"stopPageScroll\"\n        (keydown)=\"$event.stopPropagation()\"\n    >\n        <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- PICKER IN DAYS -->\n<ng-template #calendarDaysPicker let-i>\n    <section class=\"igx-calendar-picker\" [style.--calendar-row-start]=\"1 + (2 * i)\">\n        <div class=\"igx-calendar-picker__dates\" [attr.data-month]=\"i | IgxGetViewDate:viewDate:false\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultMonthYear; context: getContext(i)\">\n            </ng-container>\n        </div>\n        @if (this.orientation === 'horizontal' ? i === monthsViewNumber - 1 : i === 0) {\n            <div class=\"igx-calendar-picker__nav\">\n                <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n            </div>\n        }\n    </section>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultYear; context: getContext(0)\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultDecade;\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n\n@if (selection === 'single' && hasHeader || selection === 'range' && hasHeader) {\n    <header\n        aria-labelledby=\"igx-aria-calendar-title-month igx-aria-calendar-title-year\"\n        class=\"igx-calendar__header\"\n    >\n        <h5 id=\"igx-aria-calendar-title-year\" class=\"igx-calendar__header-year\">\n            <ng-container *ngTemplateOutlet=\"headerTitleTemplate ?? defaultHeaderTitle; context: headerContext\"></ng-container>\n        </h5>\n        <h2 id=\"igx-aria-calendar-title-month\" class=\"igx-calendar__header-date\">\n            <ng-container *ngTemplateOutlet=\"headerTemplate ? headerTemplate : defaultHeaderDate; context: headerContext\">\n            </ng-container>\n        </h2>\n    </header>\n}\n\n\n<div\n    #wrapper\n    [style.--calendar-months]=\"monthsViewNumber\"\n    [tabIndex]=\"0\"\n    class=\"igx-calendar__wrapper\"\n    [class.igx-calendar__wrapper--vertical]=\"orientation === 'vertical'\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.aria-multiselectable]=\"selection !== 'single'\"\n    aria-labelledby=\"calendar-desc\"\n    role=\"grid\"\n    (focus)=\"this.onWrapperFocus($event)\"\n    (blur)=\"this.onWrapperBlur($event)\"\n    >\n    <div id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n        @switch (selection) {\n            @case ('multi') {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_multi_selection.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_multi_selection}}\n            }\n            @case ('range') {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_range_selection.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_range_selection}}\n            }\n            @default {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_single_selection.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_single_selection}}\n            }\n        }\n    </div>\n    <section\n        class=\"igx-calendar__pickers\"\n        [class.igx-calendar__pickers--days]=\"isDefaultView\"\n        [class.igx-calendar__pickers--vertical]=\"orientation === 'vertical'\"\n    >\n        @if (isDefaultView) {\n            @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) {\n                <ng-container *ngTemplateOutlet=\"calendarDaysPicker; context: {$implicit: i}\"></ng-container>\n            }\n        }\n\n        @if (isYearView) {\n            <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n        }\n\n        @if (isDecadeView) {\n            <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n        }\n    </section>\n\n    <section class=\"igx-calendar__body\" [class.igx-calendar__body--vertical]=\"orientation === 'vertical'\" role=\"presentation\">\n        @if (isDefaultView) {\n            @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) {\n                <igx-days-view\n                    #days\n                    role=\"rowgroup\"\n                    [tabIndex]=\"-1\"\n                    [selection]=\"selection\"\n                    [locale]=\"locale\"\n                    [value]=\"value\"\n                    [(activeDate)]=\"activeDate\"\n                    [(previewRangeDate)]=\"previewRangeDate\"\n                    [viewDate]=\"i | IgxGetViewDate: viewDate\"\n                    [weekStart]=\"weekStart\"\n                    [formatOptions]=\"formatOptions\"\n                    [formatViews]=\"formatViews\"\n                    [disabledDates]=\"disabledDates\"\n                    [specialDates]=\"specialDates\"\n                    [style.--calendar-row-start]=\"(i + 1) * 2\"\n                    [hideLeadingDays]=\"hideOutsideDays || i !== 0\"\n                    [hideTrailingDays]=\"hideOutsideDays || i !== monthsViewNumber - 1\"\n                    [showWeekNumbers]=\"showWeekNumbers\"\n                    [showActiveDay]=\"showActiveDay\"\n                    [standalone]=\"false\"\n                    (swiperight)=\"previousPage()\"\n                    (swipeleft)=\"nextPage()\"\n                    (dateSelected)=\"handleDateSelection($event)\"\n                    (mousedown)=\"$event.preventDefault()\">\n                </igx-days-view>\n            }\n        }\n\n        @if (isYearView) {\n            <igx-months-view\n                #months\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.month\"\n                [monthFormat]=\"formatOptions.month\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (pageChanged)=\"updateYear($event)\"\n                (activeDateChanged)=\"updateActiveDescendant($event)\"\n                (selected)=\"changeMonth($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            </igx-months-view>\n        }\n\n        @if (isDecadeView) {\n            <igx-years-view\n                #decade\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.year\"\n                [yearFormat]=\"formatOptions.year\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (pageChanged)=\"updateYear($event)\"\n                (activeDateChanged)=\"updateActiveDescendant($event)\"\n                (selected)=\"changeYear($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            </igx-years-view>\n        }\n    </section>\n</div>\n" }]
         }], propDecorators: { wrapper: [{
                 type: ViewChild,
                 args: ["wrapper"]
@@ -3711,6 +3736,9 @@ class IgxMonthPickerComponent extends IgxCalendarBaseDirective {
                 currentValue: this.viewDate
             });
         });
+        this._destroyRef.onDestroy(() => {
+            this.keyboardNavigation.detachKeyboardHandlers();
+        });
     }
     onWrapperFocus(event) {
         event.stopPropagation();
@@ -3797,13 +3825,6 @@ class IgxMonthPickerComponent extends IgxCalendarBaseDirective {
             this.dacadeView.onKeydownEnd(event);
         }
     }
-    /**
-     * @hidden
-     * @internal
-     */
-    ngOnDestroy() {
-        this.keyboardNavigation.detachKeyboardHandlers();
-    }
     /**
      * @hidden
      * @internal
@@ -3862,7 +3883,7 @@ class IgxMonthPickerComponent extends IgxCalendarBaseDirective {
                 multi: false,
                 provide: KeyboardNavigationService
             },
-        ], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "monthsView", first: true, predicate: ["months"], descendants: true, read: IgxMonthsViewComponent }, { propertyName: "dacadeView", first: true, predicate: ["decade"], descendants: true, read: IgxYearsViewComponent }, { propertyName: "daysView", first: true, predicate: ["days"], descendants: true, read: IgxDaysViewComponent }, { propertyName: "yearsBtn", first: true, predicate: ["yearsBtn"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_prev\"></igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_next\"></igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n    <div\n        #prevPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__prev\"\n        role=\"button\"\n        [attr.aria-label]=\"prevNavLabel((getPrevYearDate(viewDate) | date: 'yyyy'))\"\n        data-action=\"prev\"\n        igxCalendarScrollPage\n        (mousedown)=\"previousPage()\"\n        (keydown)=\"changePageKB($event, false)\"\n    >\n        <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n    <div\n        #nextPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__next\"\n        role=\"button\"\n        [attr.aria-label]=\"nextNavLabel((getNextYearDate(viewDate) | date: 'yyyy'))\"\n        data-action=\"next\"\n        igxCalendarScrollPage\n        (mousedown)=\"nextPage()\"\n        (keydown)=\"changePageKB($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n    @if (activeView === 'year') {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n    }\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n        (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedYear(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n    <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\">\n            <ng-container\n                *ngTemplateOutlet=\"defaultYear; context: getContext(0)\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n            <ng-container\n                    *ngTemplateOutlet=\"defaultDecade;\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<div\n    #wrapper\n    [tabIndex]=\"0\"\n    class=\"igx-calendar__wrapper\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.aria-multiselectable]=\"selection !== 'single'\"\n    aria-labelledby=\"calendar-desc\"\n    role=\"grid\"\n    (focus)=\"this.onWrapperFocus($event)\"\n    (blur)=\"this.onWrapperBlur($event)\"\n    >\n    <caption id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n        {{ resourceStrings.igx_calendar_singular_single_selection}}\n    </caption>\n\n    <section class=\"igx-calendar__pickers\">\n        @if (isDefaultView) {\n            <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n        }\n\n        @if (isDecadeView) {\n            <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n        }\n    </section>\n\n    <section class=\"igx-calendar__body\">\n        @if (isDefaultView) {\n            <igx-months-view\n                #months\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.month\"\n                [monthFormat]=\"formatOptions.month\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (selected)=\"selectMonth($event)\"\n                (pageChanged)=\"updateDate($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            >\n            </igx-months-view>\n        }\n\n        @if (isDecadeView) {\n            <igx-years-view\n                #decade\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.year\"\n                [yearFormat]=\"formatOptions.year\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (selected)=\"selectYear($event)\"\n                (pageChanged)=\"updateDate($event)\"\n                (mousedown)=\"$event.preventDefault()\"\n            >\n            </igx-years-view>\n        }\n    </section>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxMonthsViewComponent, selector: "igx-months-view", inputs: ["id", "standalone", "monthFormat", "formatView"] }, { kind: "component", type: IgxYearsViewComponent, selector: "igx-years-view", inputs: ["standalone", "yearFormat"] }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
+        ], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "monthsView", first: true, predicate: ["months"], descendants: true, read: IgxMonthsViewComponent }, { propertyName: "dacadeView", first: true, predicate: ["decade"], descendants: true, read: IgxYearsViewComponent }, { propertyName: "daysView", first: true, predicate: ["days"], descendants: true, read: IgxDaysViewComponent }, { propertyName: "yearsBtn", first: true, predicate: ["yearsBtn"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_prev\"></igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_next\"></igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n    <div\n        #prevPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__prev\"\n        role=\"button\"\n        [attr.aria-label]=\"prevNavLabel((getPrevYearDate(viewDate) | date: 'yyyy'))\"\n        data-action=\"prev\"\n        igxCalendarScrollPage\n        (mousedown)=\"previousPage()\"\n        (keydown)=\"changePageKB($event, false)\"\n    >\n        <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n    <div\n        #nextPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__next\"\n        role=\"button\"\n        [attr.aria-label]=\"nextNavLabel((getNextYearDate(viewDate) | date: 'yyyy'))\"\n        data-action=\"next\"\n        igxCalendarScrollPage\n        (mousedown)=\"nextPage()\"\n        (keydown)=\"changePageKB($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n    @if (activeView === 'year') {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n    }\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n        (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedYear(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n    <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\">\n            <ng-container\n                *ngTemplateOutlet=\"defaultYear; context: getContext(0)\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n            <ng-container\n                    *ngTemplateOutlet=\"defaultDecade;\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<div\n    #wrapper\n    [tabIndex]=\"0\"\n    class=\"igx-calendar__wrapper\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.aria-multiselectable]=\"selection !== 'single'\"\n    aria-labelledby=\"calendar-desc\"\n    role=\"grid\"\n    (focus)=\"this.onWrapperFocus($event)\"\n    (blur)=\"this.onWrapperBlur($event)\"\n    >\n    <caption id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n        {{ resourceStrings.igx_calendar_singular_single_selection}}\n    </caption>\n\n    <section class=\"igx-calendar__pickers\">\n        @if (isDefaultView) {\n            <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n        }\n\n        @if (isDecadeView) {\n            <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n        }\n    </section>\n\n    <section class=\"igx-calendar__body\">\n        @if (isDefaultView) {\n            <igx-months-view\n                #months\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.month\"\n                [monthFormat]=\"formatOptions.month\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (selected)=\"selectMonth($event)\"\n                (pageChanged)=\"updateDate($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            >\n            </igx-months-view>\n        }\n\n        @if (isDecadeView) {\n            <igx-years-view\n                #decade\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.year\"\n                [yearFormat]=\"formatOptions.year\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (selected)=\"selectYear($event)\"\n                (pageChanged)=\"updateDate($event)\"\n                (mousedown)=\"$event.preventDefault()\"\n            >\n            </igx-years-view>\n        }\n    </section>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxMonthsViewComponent, selector: "igx-months-view", inputs: ["id", "standalone", "monthFormat", "formatView"] }, { kind: "component", type: IgxYearsViewComponent, selector: "igx-years-view", inputs: ["standalone", "yearFormat"] }, { kind: "pipe", type: IgxDateFormatterPipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxMonthPickerComponent, decorators: [{
             type: Component,
@@ -3878,7 +3899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
                         },
                     ], selector: "igx-month-picker", imports: [
                         NgTemplateOutlet,
-                        DatePipe,
+                        IgxDateFormatterPipe,
                         IgxIconComponent,
                         IgxMonthsViewComponent,
                         IgxYearsViewComponent,