igniteui-angular 22.2.0-rc.1 → 22.2.0

package/fesm2022/igniteui-angular-calendar.mjs

@@ -3,9 +3,9 @@ import { InjectionToken, inject, ElementRef, EventEmitter, HostListener, Output,
 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 { debounce, takeUntil, tap } from 'rxjs/operators';
 import { CalendarDay, PlatformUtil, isDate, getNextActiveDate, isDateInRanges, DateRangeType, onResourceChangeHandle, calendarRange, areSameMonth, isPreviousMonth, isNextMonth, getYearRange, DateTimeUtil, I18N_FORMATTER, getCurrentResourceStrings, CalendarResourceStringsEN, isEqual, DEFAULT_LOCALE, getClosestActiveDate, getPreviousActiveDate, generateMonth, intoChunks, formatToParts, IgxDateFormatterPipe } from 'igniteui-angular/core';
-import { getDateFormatter, getCurrentI18n } from 'igniteui-i18n-core';
+import { getCurrentI18n, getDateFormatter } from 'igniteui-i18n-core';
 import { EventManager } from '@angular/platform-browser';
 import { IgxIconComponent } from 'igniteui-angular/icon';
 
@@ -30,10 +30,10 @@ class IgxCalendarViewBaseDirective {
         event.preventDefault();
         this.itemSelection.emit(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCalendarViewBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxCalendarViewBaseDirective, isStandalone: true, inputs: { value: "value", date: "date", showActive: "showActive" }, outputs: { itemSelection: "itemSelection" }, host: { listeners: { "mousedown": "onMouseDown($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCalendarViewBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxCalendarViewBaseDirective, isStandalone: true, inputs: { value: "value", date: "date", showActive: "showActive" }, outputs: { itemSelection: "itemSelection" }, host: { listeners: { "mousedown": "onMouseDown($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCalendarViewBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCalendarViewBaseDirective, decorators: [{
             type: Directive
         }], propDecorators: { value: [{
                 type: Input
@@ -60,12 +60,12 @@ class IgxCalendarYearDirective extends IgxCalendarViewBaseDirective {
     get isActive() {
         return this.isSelected && this.showActive;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCalendarYearDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxCalendarYearDirective, isStandalone: true, selector: "[igxCalendarYear]", host: { properties: { "class.igx-calendar-view-item--current": "this.isCurrent", "class.igx-calendar-view-item--selected": "this.isSelected", "class.igx-calendar-view-item--active": "this.isActive" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCalendarYearDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxCalendarYearDirective, isStandalone: true, selector: "[igxCalendarYear]", host: { properties: { "class.igx-calendar-view-item--current": "this.isCurrent", "class.igx-calendar-view-item--selected": "this.isSelected", "class.igx-calendar-view-item--active": "this.isActive" } }, providers: [
             { provide: IGX_CALENDAR_VIEW_ITEM, useExisting: IgxCalendarYearDirective }
         ], exportAs: ["igxCalendarYear"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCalendarYearDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCalendarYearDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCalendarYear]',
@@ -98,12 +98,12 @@ class IgxCalendarMonthDirective extends IgxCalendarViewBaseDirective {
     get isActive() {
         return this.isSelected && this.showActive;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCalendarMonthDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxCalendarMonthDirective, isStandalone: true, selector: "[igxCalendarMonth]", host: { properties: { "class.igx-calendar-view-item--current": "this.isCurrent", "class.igx-calendar-view-item--selected": "this.isSelected", "class.igx-calendar-view-item--active": "this.isActive" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCalendarMonthDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxCalendarMonthDirective, isStandalone: true, selector: "[igxCalendarMonth]", host: { properties: { "class.igx-calendar-view-item--current": "this.isCurrent", "class.igx-calendar-view-item--selected": "this.isSelected", "class.igx-calendar-view-item--active": "this.isActive" } }, providers: [
             { provide: IGX_CALENDAR_VIEW_ITEM, useExisting: IgxCalendarMonthDirective }
         ], exportAs: ["igxCalendarMonth"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCalendarMonthDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCalendarMonthDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCalendarMonth]',
@@ -130,10 +130,10 @@ class IgxCalendarHeaderTitleTemplateDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCalendarHeaderTitleTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxCalendarHeaderTitleTemplateDirective, isStandalone: true, selector: "[igxCalendarHeaderTitle]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCalendarHeaderTitleTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxCalendarHeaderTitleTemplateDirective, isStandalone: true, selector: "[igxCalendarHeaderTitle]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCalendarHeaderTitleTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCalendarHeaderTitleTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCalendarHeaderTitle]',
@@ -147,10 +147,10 @@ class IgxCalendarHeaderTemplateDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCalendarHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxCalendarHeaderTemplateDirective, isStandalone: true, selector: "[igxCalendarHeader]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCalendarHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxCalendarHeaderTemplateDirective, isStandalone: true, selector: "[igxCalendarHeader]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCalendarHeaderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCalendarHeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCalendarHeader]',
@@ -164,10 +164,10 @@ class IgxCalendarSubheaderTemplateDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCalendarSubheaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxCalendarSubheaderTemplateDirective, isStandalone: true, selector: "[igxCalendarSubheader]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCalendarSubheaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxCalendarSubheaderTemplateDirective, isStandalone: true, selector: "[igxCalendarSubheader]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCalendarSubheaderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCalendarSubheaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCalendarSubheader]',
@@ -227,10 +227,10 @@ class IgxCalendarScrollPageDirective {
         this.destroy$.next(true);
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCalendarScrollPageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxCalendarScrollPageDirective, isStandalone: true, selector: "[igxCalendarScrollPage]", inputs: { startScroll: "startScroll", stopScroll: "stopScroll" }, host: { listeners: { "mousedown": "onMouseDown($event)", "mouseup": "onMouseUp($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCalendarScrollPageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxCalendarScrollPageDirective, isStandalone: true, selector: "[igxCalendarScrollPage]", inputs: { startScroll: "startScroll", stopScroll: "stopScroll" }, host: { listeners: { "mousedown": "onMouseDown($event)", "mouseup": "onMouseUp($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCalendarScrollPageDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCalendarScrollPageDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCalendarScrollPage]',
@@ -355,12 +355,6 @@ 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.
@@ -500,6 +494,7 @@ class IgxCalendarViewDirective {
      */
     handleBlur() {
         this.showActive = false;
+        this._onTouchedCallback();
     }
     /**
      * @hidden
@@ -554,8 +549,8 @@ class IgxCalendarViewDirective {
             this._defaultLocale = args.detail.newLocale;
         }, this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCalendarViewDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.7", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCalendarViewDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.2.0", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: IgxCalendarViewDirective,
@@ -563,7 +558,7 @@ class IgxCalendarViewDirective {
             },
         ], viewQueries: [{ propertyName: "viewItems", predicate: IGX_CALENDAR_VIEW_ITEM, descendants: true, read: IGX_CALENDAR_VIEW_ITEM }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCalendarViewDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCalendarViewDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -730,7 +725,8 @@ class IgxMonthsViewComponent extends IgxCalendarViewDirective {
         }
     }
     /**
-     * Returns the locale representation of the month in the months view.
+     * Returns the locale representation of the month in the months view,
+     * otherwise returns the default `Date.getMonth()` value.
      *
      * @hidden
      */
@@ -756,8 +752,8 @@ class IgxMonthsViewComponent extends IgxCalendarViewDirective {
     monthTracker(_, item) {
         return `${item.getMonth()}}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxMonthsViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxMonthsViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: IgxMonthsViewComponent,
@@ -769,7 +765,7 @@ class IgxMonthsViewComponent extends IgxCalendarViewDirective {
             },
         ], usesInheritance: true, ngImport: i0, template: "<div class=\"igx-calendar-view__items\" role=\"row\">\n    @for (month of range; track monthTracker($index, month)) {\n        <span\n            igxCalendarMonth\n            #item=\"igxCalendarMonth\"\n            class=\"igx-calendar-view-item\"\n            role=\"gridcell\"\n            [attr.id]=\"month.getTime()\"\n            [attr.aria-label]=\"formattedMonth(month).long\"\n            [attr.aria-selected]=\"item.isSelected\"\n            [value]=\"month\"\n            [date]=\"date\"\n            [showActive]=\"showActive\"\n            (itemSelection)=\"selectDate($event)\"\n            (mousedown)=\"onMouseDown()\"\n        >\n            <span class=\"igx-calendar-view-item__inner\" aria-hidden=\"true\">\n                {{ formattedMonth(month).formatted | titlecase }}\n            </span>\n        </span>\n    }\n</div>\n", styles: ["@layer ig.base{.igx-calendar-view{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--dropdown-size: var(--component-size);display:flex;justify-content:center;position:relative;z-index:1;grid-column:1/-1;padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));color:var(--content-foreground);background:var(--content-background);box-shadow:0 0 0 .0625rem var(--border-color);border-radius:var(--border-radius);padding-block:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-calendar-view:focus,.igx-calendar-view:focus-within,.igx-calendar-view:focus-visible{outline:none}.igx-calendar-view{font-family:var(--ig-body-1-font-family, var(--ig-font-family));font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom);font-size:max(var(--is-large, 1)*max(var(--ig-body-1-font-size),-1 * var(--ig-body-1-font-size)),var(--is-medium, 1)*max(var(--ig-body-2-font-size),-1 * var(--ig-body-2-font-size)),var(--is-small, 1)*max(var(--ig-body-2-font-size),-1 * var(--ig-body-2-font-size)));font-weight:max(var(--is-large, 1)*max(var(--ig-body-1-font-weight),-1 * var(--ig-body-1-font-weight)),var(--is-medium, 1)*max(var(--ig-body-2-font-weight),-1 * var(--ig-body-2-font-weight)),var(--is-small, 1)*max(var(--ig-body-2-font-weight),-1 * var(--ig-body-2-font-weight)));font-style:max(var(--is-large, 1)*max(var(--ig-body-1-font-style),-1 * var(--ig-body-1-font-style)),var(--is-medium, 1)*max(var(--ig-body-2-font-style),-1 * var(--ig-body-2-font-style)),var(--is-small, 1)*max(var(--ig-body-2-font-style),-1 * var(--ig-body-2-font-style)));line-height:max(var(--is-large, 1)*max(var(--ig-body-1-line-height),-1 * var(--ig-body-1-line-height)),var(--is-medium, 1)*max(var(--ig-body-2-line-height),-1 * var(--ig-body-2-line-height)),var(--is-small, 1)*max(var(--ig-body-2-line-height),-1 * var(--ig-body-2-line-height)));letter-spacing:max(var(--is-large, 1)*max(var(--ig-body-1-letter-spacing),-1 * var(--ig-body-1-letter-spacing)),var(--is-medium, 1)*max(var(--ig-body-2-letter-spacing),-1 * var(--ig-body-2-letter-spacing)),var(--is-small, 1)*max(var(--ig-body-2-letter-spacing),-1 * var(--ig-body-2-letter-spacing)));text-transform:max(var(--is-large, 1)*max(var(--ig-body-1-text-transform),-1 * var(--ig-body-1-text-transform)),var(--is-medium, 1)*max(var(--ig-body-2-text-transform),-1 * var(--ig-body-2-text-transform)),var(--is-small, 1)*max(var(--ig-body-2-text-transform),-1 * var(--ig-body-2-text-transform)));margin:0}.igx-calendar-view__items{display:grid;grid-template-columns:repeat(3,minmax(max-content,1fr));row-gap:.25rem;-moz-column-gap:.5rem;column-gap:.5rem;width:100%}.igx-calendar-view-item{display:flex;justify-content:center;align-items:center}.igx-calendar-view-item--current .igx-calendar-view-item__inner{color:var(--ym-current-foreground);background:var(--ym-current-background)}.igx-calendar-view-item--current .igx-calendar-view-item__inner:hover{color:var(--ym-current-hover-foreground);background:var(--ym-current-hover-background)}.igx-calendar-view-item--selected .igx-calendar-view-item__inner{color:var(--ym-selected-foreground);background:var(--ym-selected-background)}.igx-calendar-view-item--selected .igx-calendar-view-item__inner:hover,.igx-calendar-view-item--selected.igx-calendar-view-item--active .igx-calendar-view-item__inner{color:var(--ym-selected-hover-foreground);background:var(--ym-selected-hover-background)}.igx-calendar-view-item--selected.igx-calendar-view-item--current .igx-calendar-view-item__inner{color:var(--ym-selected-current-foreground);background:var(--ym-selected-current-background)}.igx-calendar-view-item--selected.igx-calendar-view-item--current .igx-calendar-view-item__inner:hover,.igx-calendar-view-item--selected.igx-calendar-view-item--current.igx-calendar-view-item--active .igx-calendar-view-item__inner{color:var(--ym-selected-current-hover-foreground);background:var(--ym-selected-current-hover-background)}.igx-calendar-view-item__inner{display:flex;justify-content:center;align-items:center;height:var(--size);width:100%;border-radius:var(--ym-border-radius);padding:0 .75rem;outline:none;cursor:pointer;position:relative;max-width:15rem}.igx-calendar-view-item__inner:hover{color:var(--ym-hover-foreground);background:var(--ym-hover-background)}}@layer ig.material{@container style(--ig-theme: material){.igx-calendar-view-item--current .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--ym-current-outline-color)}.igx-calendar-view-item--current .igx-calendar-view-item__inner:hover{box-shadow:inset 0 0 0 .0625rem var(--ym-current-outline-hover-color)}.igx-calendar-view-item--current.igx-calendar-view-item--active .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--content-background),0 0 0 .0625rem var(--ym-current-outline-focus-color)}.igx-calendar-view-item--selected .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-outline-color)}.igx-calendar-view-item--selected .igx-calendar-view-item__inner:hover{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-hover-outline-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--active .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-focus-outline-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--current .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-current-outline-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--current .igx-calendar-view-item__inner:hover{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-current-outline-hover-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--current.igx-calendar-view-item--active .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-current-outline-focus-color)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-calendar-view-item--current .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--ym-current-outline-color)}.igx-calendar-view-item--current .igx-calendar-view-item__inner:hover{box-shadow:inset 0 0 0 .0625rem var(--ym-current-outline-hover-color)}.igx-calendar-view-item--current.igx-calendar-view-item--active .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--ym-current-outline-focus-color)}.igx-calendar-view-item--selected .igx-calendar-view-item__inner:hover{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-hover-outline-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--active .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-focus-outline-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--current .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-current-outline-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--current .igx-calendar-view-item__inner:hover{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-current-outline-hover-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--current.igx-calendar-view-item--active .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-current-outline-focus-color)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-calendar-view-item--current .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--ym-current-outline-color)}.igx-calendar-view-item--current .igx-calendar-view-item__inner:hover{box-shadow:inset 0 0 0 .0625rem var(--ym-current-outline-hover-color)}.igx-calendar-view-item--current.igx-calendar-view-item--active .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--ym-current-outline-focus-color)}.igx-calendar-view-item--selected .igx-calendar-view-item__inner:hover{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-hover-outline-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--active .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-focus-outline-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--current .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-current-outline-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--current .igx-calendar-view-item__inner:hover{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-current-outline-hover-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--current.igx-calendar-view-item--active .igx-calendar-view__item-inner{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-current-outline-focus-color)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-calendar-view-item--current .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .125rem var(--ym-current-outline-color)}.igx-calendar-view-item--current .igx-calendar-view-item__inner:hover{box-shadow:inset 0 0 0 .125rem var(--ym-current-outline-hover-color)}.igx-calendar-view-item--current.igx-calendar-view-item--active .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .125rem var(--content-background),0 0 0 .0625rem var(--ym-current-outline-focus-color)}.igx-calendar-view-item--selected .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .125rem var(--ym-selected-outline-color)}.igx-calendar-view-item--selected .igx-calendar-view-item__inner:hover{box-shadow:inset 0 0 0 .125rem var(--ym-selected-hover-outline-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--active .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .125rem var(--ym-selected-focus-outline-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--current .igx-calendar-view-item__inner:after{border-color:var(--ym-selected-current-outline-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--current .igx-calendar-view-item__inner:hover:after{border-color:var(--ym-selected-current-outline-hover-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--current.igx-calendar-view-item--active .igx-calendar-view-item__inner:after{border-color:var(--ym-selected-current-outline-focus-color)}.igx-calendar-view-item__inner:after{content:\"\";position:absolute;width:100%;height:100%;inset-inline-start:0;inset-block-start:0;z-index:0;border-radius:inherit;border:.125rem solid rgba(0,0,0,0);pointer-events:none}}}\n"], dependencies: [{ kind: "directive", type: IgxCalendarMonthDirective, selector: "[igxCalendarMonth]", exportAs: ["igxCalendarMonth"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxMonthsViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxMonthsViewComponent, decorators: [{
             type: Component,
             args: [{ providers: [
                         {
@@ -908,8 +904,8 @@ class IgxYearsViewComponent extends IgxCalendarViewDirective {
             this.el.nativeElement.focus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxYearsViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxYearsViewComponent, isStandalone: true, selector: "igx-years-view", inputs: { standalone: "standalone", yearFormat: "yearFormat" }, host: { properties: { "class.igx-calendar-view": "this.viewClass", "class.igx-calendar-view--standalone": "this.standalone" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxYearsViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: IgxYearsViewComponent, isStandalone: true, selector: "igx-years-view", inputs: { standalone: "standalone", yearFormat: "yearFormat" }, host: { properties: { "class.igx-calendar-view": "this.viewClass", "class.igx-calendar-view--standalone": "this.standalone" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: IgxYearsViewComponent,
@@ -921,7 +917,7 @@ class IgxYearsViewComponent extends IgxCalendarViewDirective {
             },
         ], usesInheritance: true, ngImport: i0, template: "<div class=\"igx-calendar-view__items\" role=\"row\">\n    @for (year of range; track yearTracker($index, year)) {\n        <span\n            igxCalendarYear\n            #item=\"igxCalendarYear\"\n            class=\"igx-calendar-view-item\"\n            role=\"gridcell\"\n            [attr.id]=\"year.getTime()\"\n            [attr.aria-label]=\"formattedYear(year).long\"\n            [attr.aria-selected]=\"item.isSelected\"\n            [attr.aria-current]=\"item.isCurrent\"\n            [value]=\"year\"\n            [date]=\"date\"\n            [showActive]=\"showActive\"\n            (itemSelection)=\"selectDate($event)\"\n            (mousedown)=\"onMouseDown()\"\n        >\n            <span class=\"igx-calendar-view-item__inner\" aria-hidden=\"true\">\n                {{ formattedYear(year).formatted }}\n            </span>\n        </span>\n    }\n</div>\n", styles: ["@layer ig.base{.igx-calendar-view{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--dropdown-size: var(--component-size);display:flex;justify-content:center;position:relative;z-index:1;grid-column:1/-1;padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));color:var(--content-foreground);background:var(--content-background);box-shadow:0 0 0 .0625rem var(--border-color);border-radius:var(--border-radius);padding-block:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-calendar-view:focus,.igx-calendar-view:focus-within,.igx-calendar-view:focus-visible{outline:none}.igx-calendar-view{font-family:var(--ig-body-1-font-family, var(--ig-font-family));font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom);font-size:max(var(--is-large, 1)*max(var(--ig-body-1-font-size),-1 * var(--ig-body-1-font-size)),var(--is-medium, 1)*max(var(--ig-body-2-font-size),-1 * var(--ig-body-2-font-size)),var(--is-small, 1)*max(var(--ig-body-2-font-size),-1 * var(--ig-body-2-font-size)));font-weight:max(var(--is-large, 1)*max(var(--ig-body-1-font-weight),-1 * var(--ig-body-1-font-weight)),var(--is-medium, 1)*max(var(--ig-body-2-font-weight),-1 * var(--ig-body-2-font-weight)),var(--is-small, 1)*max(var(--ig-body-2-font-weight),-1 * var(--ig-body-2-font-weight)));font-style:max(var(--is-large, 1)*max(var(--ig-body-1-font-style),-1 * var(--ig-body-1-font-style)),var(--is-medium, 1)*max(var(--ig-body-2-font-style),-1 * var(--ig-body-2-font-style)),var(--is-small, 1)*max(var(--ig-body-2-font-style),-1 * var(--ig-body-2-font-style)));line-height:max(var(--is-large, 1)*max(var(--ig-body-1-line-height),-1 * var(--ig-body-1-line-height)),var(--is-medium, 1)*max(var(--ig-body-2-line-height),-1 * var(--ig-body-2-line-height)),var(--is-small, 1)*max(var(--ig-body-2-line-height),-1 * var(--ig-body-2-line-height)));letter-spacing:max(var(--is-large, 1)*max(var(--ig-body-1-letter-spacing),-1 * var(--ig-body-1-letter-spacing)),var(--is-medium, 1)*max(var(--ig-body-2-letter-spacing),-1 * var(--ig-body-2-letter-spacing)),var(--is-small, 1)*max(var(--ig-body-2-letter-spacing),-1 * var(--ig-body-2-letter-spacing)));text-transform:max(var(--is-large, 1)*max(var(--ig-body-1-text-transform),-1 * var(--ig-body-1-text-transform)),var(--is-medium, 1)*max(var(--ig-body-2-text-transform),-1 * var(--ig-body-2-text-transform)),var(--is-small, 1)*max(var(--ig-body-2-text-transform),-1 * var(--ig-body-2-text-transform)));margin:0}.igx-calendar-view__items{display:grid;grid-template-columns:repeat(3,minmax(max-content,1fr));row-gap:.25rem;-moz-column-gap:.5rem;column-gap:.5rem;width:100%}.igx-calendar-view-item{display:flex;justify-content:center;align-items:center}.igx-calendar-view-item--current .igx-calendar-view-item__inner{color:var(--ym-current-foreground);background:var(--ym-current-background)}.igx-calendar-view-item--current .igx-calendar-view-item__inner:hover{color:var(--ym-current-hover-foreground);background:var(--ym-current-hover-background)}.igx-calendar-view-item--selected .igx-calendar-view-item__inner{color:var(--ym-selected-foreground);background:var(--ym-selected-background)}.igx-calendar-view-item--selected .igx-calendar-view-item__inner:hover,.igx-calendar-view-item--selected.igx-calendar-view-item--active .igx-calendar-view-item__inner{color:var(--ym-selected-hover-foreground);background:var(--ym-selected-hover-background)}.igx-calendar-view-item--selected.igx-calendar-view-item--current .igx-calendar-view-item__inner{color:var(--ym-selected-current-foreground);background:var(--ym-selected-current-background)}.igx-calendar-view-item--selected.igx-calendar-view-item--current .igx-calendar-view-item__inner:hover,.igx-calendar-view-item--selected.igx-calendar-view-item--current.igx-calendar-view-item--active .igx-calendar-view-item__inner{color:var(--ym-selected-current-hover-foreground);background:var(--ym-selected-current-hover-background)}.igx-calendar-view-item__inner{display:flex;justify-content:center;align-items:center;height:var(--size);width:100%;border-radius:var(--ym-border-radius);padding:0 .75rem;outline:none;cursor:pointer;position:relative;max-width:15rem}.igx-calendar-view-item__inner:hover{color:var(--ym-hover-foreground);background:var(--ym-hover-background)}}@layer ig.material{@container style(--ig-theme: material){.igx-calendar-view-item--current .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--ym-current-outline-color)}.igx-calendar-view-item--current .igx-calendar-view-item__inner:hover{box-shadow:inset 0 0 0 .0625rem var(--ym-current-outline-hover-color)}.igx-calendar-view-item--current.igx-calendar-view-item--active .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--content-background),0 0 0 .0625rem var(--ym-current-outline-focus-color)}.igx-calendar-view-item--selected .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-outline-color)}.igx-calendar-view-item--selected .igx-calendar-view-item__inner:hover{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-hover-outline-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--active .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-focus-outline-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--current .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-current-outline-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--current .igx-calendar-view-item__inner:hover{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-current-outline-hover-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--current.igx-calendar-view-item--active .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-current-outline-focus-color)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-calendar-view-item--current .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--ym-current-outline-color)}.igx-calendar-view-item--current .igx-calendar-view-item__inner:hover{box-shadow:inset 0 0 0 .0625rem var(--ym-current-outline-hover-color)}.igx-calendar-view-item--current.igx-calendar-view-item--active .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--ym-current-outline-focus-color)}.igx-calendar-view-item--selected .igx-calendar-view-item__inner:hover{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-hover-outline-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--active .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-focus-outline-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--current .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-current-outline-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--current .igx-calendar-view-item__inner:hover{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-current-outline-hover-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--current.igx-calendar-view-item--active .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-current-outline-focus-color)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-calendar-view-item--current .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--ym-current-outline-color)}.igx-calendar-view-item--current .igx-calendar-view-item__inner:hover{box-shadow:inset 0 0 0 .0625rem var(--ym-current-outline-hover-color)}.igx-calendar-view-item--current.igx-calendar-view-item--active .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--ym-current-outline-focus-color)}.igx-calendar-view-item--selected .igx-calendar-view-item__inner:hover{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-hover-outline-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--active .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-focus-outline-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--current .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-current-outline-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--current .igx-calendar-view-item__inner:hover{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-current-outline-hover-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--current.igx-calendar-view-item--active .igx-calendar-view__item-inner{box-shadow:inset 0 0 0 .0625rem var(--ym-selected-current-outline-focus-color)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-calendar-view-item--current .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .125rem var(--ym-current-outline-color)}.igx-calendar-view-item--current .igx-calendar-view-item__inner:hover{box-shadow:inset 0 0 0 .125rem var(--ym-current-outline-hover-color)}.igx-calendar-view-item--current.igx-calendar-view-item--active .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .125rem var(--content-background),0 0 0 .0625rem var(--ym-current-outline-focus-color)}.igx-calendar-view-item--selected .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .125rem var(--ym-selected-outline-color)}.igx-calendar-view-item--selected .igx-calendar-view-item__inner:hover{box-shadow:inset 0 0 0 .125rem var(--ym-selected-hover-outline-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--active .igx-calendar-view-item__inner{box-shadow:inset 0 0 0 .125rem var(--ym-selected-focus-outline-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--current .igx-calendar-view-item__inner:after{border-color:var(--ym-selected-current-outline-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--current .igx-calendar-view-item__inner:hover:after{border-color:var(--ym-selected-current-outline-hover-color)}.igx-calendar-view-item--selected.igx-calendar-view-item--current.igx-calendar-view-item--active .igx-calendar-view-item__inner:after{border-color:var(--ym-selected-current-outline-focus-color)}.igx-calendar-view-item__inner:after{content:\"\";position:absolute;width:100%;height:100%;inset-inline-start:0;inset-block-start:0;z-index:0;border-radius:inherit;border:.125rem solid rgba(0,0,0,0);pointer-events:none}}}\n"], dependencies: [{ kind: "directive", type: IgxCalendarYearDirective, selector: "[igxCalendarYear]", exportAs: ["igxCalendarYear"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxYearsViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxYearsViewComponent, decorators: [{
             type: Component,
             args: [{ providers: [
                         {
@@ -1051,10 +1047,10 @@ class IgxDayItemComponent {
     get isSingleSelection() {
         return this.selection !== CalendarSelection.RANGE;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDayItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.1.7", type: IgxDayItemComponent, isStandalone: true, selector: "igx-day-item", inputs: { date: "date", viewDate: "viewDate", selection: "selection", selected: "selected", disabledDates: "disabledDates", specialDates: "specialDates", hideOutsideDays: ["hideOutsideDays", "hideOutsideDays", booleanAttribute], isLastInRange: ["isLastInRange", "isLastInRange", booleanAttribute], isFirstInRange: ["isFirstInRange", "isFirstInRange", booleanAttribute], isWithinRange: ["isWithinRange", "isWithinRange", booleanAttribute], isWithinPreviewRange: ["isWithinPreviewRange", "isWithinPreviewRange", booleanAttribute], hideLeadingDays: ["hideLeadingDays", "hideLeadingDays", booleanAttribute], hideTrailingDays: ["hideTrailingDays", "hideTrailingDays", booleanAttribute], isActive: ["isActive", "isActive", booleanAttribute] }, outputs: { dateSelection: "dateSelection", mouseEnter: "mouseEnter", mouseLeave: "mouseLeave", mouseDown: "mouseDown" }, host: { properties: { "class.igx-day-item--last": "this.isLastInRange", "class.igx-day-item--first": "this.isFirstInRange", "class.igx-day-item--active": "this.isActive", "class.igx-day-item--selected": "this.isSelectedCSS", "class.igx-day-item--inactive": "this.isInactive", "class.igx-day-item--hidden": "this.isHidden", "class.igx-day-item--current": "this.isToday", "class.igx-day-item--weekend": "this.isWeekend", "class.igx-day-item--range": "this.isWithinRangeCSS", "class.igx-day-item--range-preview": "this.isWithinPreviewRangeCSS", "class.igx-day-item--special": "this.isSpecial", "class.igx-day-item--disabled": "this.isDisabledCSS", "class.igx-day-item--single": "this.isSingleSelection" } }, ngImport: i0, template: "<span\n    aria-hidden=\"true\"\n    class=\"igx-day-item__inner\"\n    (mouseenter)=\"onMouseEnter()\"\n    (mouseleave)=\"onMouseLeave()\"\n    (mousedown)=\"onMouseDown($event)\"\n>\n    <ng-content></ng-content>\n</span>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDayItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.2.0", type: IgxDayItemComponent, isStandalone: true, selector: "igx-day-item", inputs: { date: "date", viewDate: "viewDate", selection: "selection", selected: "selected", disabledDates: "disabledDates", specialDates: "specialDates", hideOutsideDays: ["hideOutsideDays", "hideOutsideDays", booleanAttribute], isLastInRange: ["isLastInRange", "isLastInRange", booleanAttribute], isFirstInRange: ["isFirstInRange", "isFirstInRange", booleanAttribute], isWithinRange: ["isWithinRange", "isWithinRange", booleanAttribute], isWithinPreviewRange: ["isWithinPreviewRange", "isWithinPreviewRange", booleanAttribute], hideLeadingDays: ["hideLeadingDays", "hideLeadingDays", booleanAttribute], hideTrailingDays: ["hideTrailingDays", "hideTrailingDays", booleanAttribute], isActive: ["isActive", "isActive", booleanAttribute] }, outputs: { dateSelection: "dateSelection", mouseEnter: "mouseEnter", mouseLeave: "mouseLeave", mouseDown: "mouseDown" }, host: { properties: { "class.igx-day-item--last": "this.isLastInRange", "class.igx-day-item--first": "this.isFirstInRange", "class.igx-day-item--active": "this.isActive", "class.igx-day-item--selected": "this.isSelectedCSS", "class.igx-day-item--inactive": "this.isInactive", "class.igx-day-item--hidden": "this.isHidden", "class.igx-day-item--current": "this.isToday", "class.igx-day-item--weekend": "this.isWeekend", "class.igx-day-item--range": "this.isWithinRangeCSS", "class.igx-day-item--range-preview": "this.isWithinPreviewRangeCSS", "class.igx-day-item--special": "this.isSpecial", "class.igx-day-item--disabled": "this.isDisabledCSS", "class.igx-day-item--single": "this.isSingleSelection" } }, ngImport: i0, template: "<span\n    aria-hidden=\"true\"\n    class=\"igx-day-item__inner\"\n    (mouseenter)=\"onMouseEnter()\"\n    (mouseleave)=\"onMouseLeave()\"\n    (mousedown)=\"onMouseDown($event)\"\n>\n    <ng-content></ng-content>\n</span>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDayItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDayItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-day-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<span\n    aria-hidden=\"true\"\n    class=\"igx-day-item__inner\"\n    (mouseenter)=\"onMouseEnter()\"\n    (mouseleave)=\"onMouseLeave()\"\n    (mousedown)=\"onMouseDown($event)\"\n>\n    <ng-content></ng-content>\n</span>\n" }]
         }], propDecorators: { date: [{
@@ -1184,10 +1180,10 @@ class KeyboardNavigationService {
         this.keyHandlers.delete(key);
         return this;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: KeyboardNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: KeyboardNavigationService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: KeyboardNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: KeyboardNavigationService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: KeyboardNavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: KeyboardNavigationService, decorators: [{
             type: Injectable
         }] });
 
@@ -1217,12 +1213,6 @@ class IgxCalendarBaseDirective {
     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
      */
@@ -1353,14 +1343,6 @@ class IgxCalendarBaseDirective {
             this.activeViewDecade(activeViewIdx);
         }
     }
-    /**
-     * @hidden
-     */
-    changeYear(date) {
-        this.previousViewDate = this.viewDate;
-        this.viewDate = CalendarDay.from(date).add('month', -this.activeViewIdx).native;
-        this.activeView = IgxCalendarView.Month;
-    }
     /**
      * Returns the locale representation of the year in the year view if enabled,
      * otherwise returns the default `Date.getFullYear()` value.
@@ -1631,18 +1613,6 @@ class IgxCalendarBaseDirective {
          * @hidden
          */
         this.pageScrollDirection = "none" /* ScrollDirection.NONE */;
-        /**
-         * @hidden
-         */
-        this.scrollPage$ = new Subject();
-        /**
-         * @hidden
-         */
-        this.stopPageScroll$ = new Subject();
-        /**
-         * @hidden
-         */
-        this.startPageScroll$ = new Subject();
         /**
          * @hidden
          */
@@ -1871,7 +1841,7 @@ class IgxCalendarBaseDirective {
     /**
      * @hidden
      */
-    selectRange(value, excludeDisabledDates = false) {
+    selectRange(value) {
         if (Array.isArray(value)) {
             value.sort((a, b) => a.valueOf() - b.valueOf());
             this._startDate = this.getDateOnly(value[0]);
@@ -1926,9 +1896,6 @@ class IgxCalendarBaseDirective {
         if (this._startDate && this._endDate) {
             this.selectedDates = [this._startDate, ...this.generateDateRange(this._startDate, this._endDate)];
         }
-        if (excludeDisabledDates) {
-            this.selectedDates = this.selectedDates.filter(d => !this.isDateDisabled(d));
-        }
         this._onChangeCallback(this.selectedDates);
     }
     /**
@@ -2000,10 +1967,10 @@ class IgxCalendarBaseDirective {
         this._defaultResourceStrings = getCurrentResourceStrings(CalendarResourceStringsEN, false, locale);
         this._customResourceStrings = this._resourceStrings ? Object.assign({}, this._defaultResourceStrings, this._resourceStrings) : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCalendarBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.7", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCalendarBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.2.0", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCalendarBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCalendarBaseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCalendarBase]',
@@ -2065,10 +2032,10 @@ class DayDigitPipe {
         }
         return value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DayDigitPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: DayDigitPipe, isStandalone: true, name: "dayDigit" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: DayDigitPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: DayDigitPipe, isStandalone: true, name: "dayDigit" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DayDigitPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: DayDigitPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'dayDigit',
@@ -2475,8 +2442,8 @@ class IgxDaysViewComponent extends IgxCalendarBaseDirective {
     setPreviewRangeDate(value) {
         this.previewRangeDate = value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDaysViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDaysViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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" } }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -2485,7 +2452,7 @@ class IgxDaysViewComponent extends IgxCalendarBaseDirective {
             KeyboardNavigationService
         ], viewQueries: [{ propertyName: "dates", predicate: IgxDayItemComponent, descendants: true, read: IgxDayItemComponent }], usesInheritance: true, ngImport: i0, template: "<div\n    role=\"row\"\n    class=\"igx-days-row\"\n    [title]=\"weekNumberHeader.long | titlecase\"\n>\n    @if (showWeekNumbers) {\n        <div\n            role=\"columnheader\"\n            class=\"\n            igx-day-label\n            igx-day-label--week-number\n            igx-days-row__label\n            igx-days-row__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-day-label igx-days-row__label\"\n        >\n            <span class=\"igx-day-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-row\"\n        role=\"row\"\n    >\n        @if (showWeekNumbers) {\n            <div\n                class=\"\n                igx-day-item\n                igx-day-item--week-number\n                igx-days-row__day--week-number\"\n            >\n                <span\n                    role=\"rowheader\"\n                    class=\"\n                    igx-day-item__inner\n                    igx-day-item__inner--week-number\n                    igx-days-row__day-inner\n                    igx-days-row__day-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-day-item\"\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", styles: ["@layer ig.base{.igx-days-view{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--dropdown-size: var(--component-size);--_date-size: var(--size);--_date-inner-size: var(--inner-size);--_date-view-row-gap: .25rem;--_calendar-border-size: .0625rem;--_date-border-size: .0625rem;--_date-border-style: solid;--_range-border-style: solid;--_range-border-size: .0625rem;--_preview-border-style: dashed;display:flex;flex-flow:column nowrap;width:100%;min-width:max(var(--is-large, 1)*max(22.5rem,-1 * 22.5rem),var(--is-medium, 1)*max(19.625rem,-1 * 19.625rem),var(--is-small, 1)*max(18.125rem,-1 * 18.125rem));color:var(--content-foreground);background:var(--content-background);box-shadow:0 0 0 var(--_calendar-border-size) var(--border-color);border-radius:var(--border-radius);padding-block:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));padding-inline:max(var(--is-large, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));overflow:hidden;outline:none;gap:var(--_date-view-row-gap);font-family:var(--ig-body-1-font-family, var(--ig-font-family));font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom);font-size:max(var(--is-large, 1)*max(var(--ig-body-1-font-size),-1 * var(--ig-body-1-font-size)),var(--is-medium, 1)*max(var(--ig-body-2-font-size),-1 * var(--ig-body-2-font-size)),var(--is-small, 1)*max(var(--ig-body-2-font-size),-1 * var(--ig-body-2-font-size)));font-weight:max(var(--is-large, 1)*max(var(--ig-body-1-font-weight),-1 * var(--ig-body-1-font-weight)),var(--is-medium, 1)*max(var(--ig-body-2-font-weight),-1 * var(--ig-body-2-font-weight)),var(--is-small, 1)*max(var(--ig-body-2-font-weight),-1 * var(--ig-body-2-font-weight)));font-style:max(var(--is-large, 1)*max(var(--ig-body-1-font-style),-1 * var(--ig-body-1-font-style)),var(--is-medium, 1)*max(var(--ig-body-2-font-style),-1 * var(--ig-body-2-font-style)),var(--is-small, 1)*max(var(--ig-body-2-font-style),-1 * var(--ig-body-2-font-style)));line-height:max(var(--is-large, 1)*max(var(--ig-body-1-line-height),-1 * var(--ig-body-1-line-height)),var(--is-medium, 1)*max(var(--ig-body-2-line-height),-1 * var(--ig-body-2-line-height)),var(--is-small, 1)*max(var(--ig-body-2-line-height),-1 * var(--ig-body-2-line-height)));letter-spacing:max(var(--is-large, 1)*max(var(--ig-body-1-letter-spacing),-1 * var(--ig-body-1-letter-spacing)),var(--is-medium, 1)*max(var(--ig-body-2-letter-spacing),-1 * var(--ig-body-2-letter-spacing)),var(--is-small, 1)*max(var(--ig-body-2-letter-spacing),-1 * var(--ig-body-2-letter-spacing)));text-transform:max(var(--is-large, 1)*max(var(--ig-body-1-text-transform),-1 * var(--ig-body-1-text-transform)),var(--is-medium, 1)*max(var(--ig-body-2-text-transform),-1 * var(--ig-body-2-text-transform)),var(--is-small, 1)*max(var(--ig-body-2-text-transform),-1 * var(--ig-body-2-text-transform)));margin:0}.igx-days-view .igx-days-view,.igx-days-view .igx-calendar-view{background:inherit;color:inherit;box-shadow:none}.igx-days-view .igx-days-view,.igx-days-view .igx-calendar-view,.igx-days-view .igx-calendar-picker{border-radius:0}.igx-days-view:focus,.igx-days-view:focus-within,.igx-days-view:focus-visible{outline:none}.igx-days-view__grid{flex:1 1 auto}.igx-days-row{display:flex;justify-content:space-between}.igx-days-row:last-of-type .igx-days-row__day-inner--week-number{border-end-start-radius:var(--week-number-border-radius);border-end-end-radius:var(--week-number-border-radius)}.igx-days-row:last-of-type .igx-days-row__day-inner--week-number:before{display:none}.igx-day-item--range.igx-day-item--selected.igx-day-item--last,.igx-day-item--range.igx-day-item--selected.igx-day-item--first{background:#0000;border-block-color:rgba(0,0,0,0);z-index:0}.igx-day-item--range.igx-day-item--selected.igx-day-item--last:after,.igx-day-item--range.igx-day-item--selected.igx-day-item--first:after{content:\"\";position:absolute;z-index:-1;height:var(--_date-size);width:50%;color:var(--date-selected-foreground);background:var(--date-selected-range-background);border-width:var(--_range-border-size)}.igx-day-item--range.igx-day-item--selected.igx-day-item--last:before,.igx-day-item--range.igx-day-item--selected.igx-day-item--first:before{content:\"\";position:absolute;height:var(--_date-size);width:var(--_date-size);border-radius:var(--date-border-radius)}.igx-day-item--range.igx-day-item--selected.igx-day-item--last .igx-day-item__inner,.igx-day-item--range.igx-day-item--selected.igx-day-item--first .igx-day-item__inner{color:var(--date-selected-foreground);background:var(--date-selected-background)}.igx-day-item--range.igx-day-item--selected.igx-day-item--last .igx-day-item__inner:hover,.igx-day-item--range.igx-day-item--selected.igx-day-item--first .igx-day-item__inner:hover{color:var(--date-selected-hover-foreground);background:var(--date-selected-hover-background)}.igx-day-item--range.igx-day-item--selected.igx-day-item--last.igx-day-item--active .igx-day-item__inner,.igx-day-item--range.igx-day-item--selected.igx-day-item--first.igx-day-item--active .igx-day-item__inner{color:var(--date-selected-focus-foreground);background:var(--date-selected-focus-background)}.igx-day-item--first.igx-day-item--last:not(.igx-day-item--current,.igx-day-item--special) .igx-day-item__inner,.igx-day-item--last:not(.igx-day-item--current,.igx-day-item--special) .igx-day-item__inner,.igx-day-item--first:not(.igx-day-item--current,.igx-day-item--special) .igx-day-item__inner{border-radius:var(--date-range-border-radius)}.igx-day-item--special.igx-day-item--selected.igx-day-item--first.igx-day-item--last .igx-day-item__inner,.igx-day-item--special.igx-day-item--selected.igx-day-item--last .igx-day-item__inner,.igx-day-item--special.igx-day-item--selected.igx-day-item--first .igx-day-item__inner{color:var(--date-selected-foreground);background:var(--date-selected-background)}.igx-day-item--special.igx-day-item--selected.igx-day-item--first.igx-day-item--last .igx-day-item__inner:after,.igx-day-item--special.igx-day-item--selected.igx-day-item--last .igx-day-item__inner:after,.igx-day-item--special.igx-day-item--selected.igx-day-item--first .igx-day-item__inner:after{border-color:var(--date-selected-special-border-color)}.igx-day-item--special.igx-day-item--selected.igx-day-item--last .igx-day-item__inner:hover,.igx-day-item--special.igx-day-item--selected.igx-day-item--first .igx-day-item__inner:hover{color:var(--date-selected-hover-foreground);background:var(--date-selected-hover-background)}.igx-day-item--special.igx-day-item--selected.igx-day-item--last .igx-day-item__inner:hover:after,.igx-day-item--special.igx-day-item--selected.igx-day-item--first .igx-day-item__inner:hover:after{border-color:var(--date-selected-special-hover-border-color)}.igx-day-item--special.igx-day-item--selected.igx-day-item--first.igx-day-item--last.igx-day-item--active .igx-day-item__inner,.igx-day-item--special.igx-day-item--selected.igx-day-item--last.igx-day-item--active .igx-day-item__inner,.igx-day-item--special.igx-day-item--selected.igx-day-item--first.igx-day-item--active .igx-day-item__inner{color:var(--date-selected-focus-foreground);background:var(--date-selected-focus-background)}.igx-day-item--special.igx-day-item--selected.igx-day-item--first.igx-day-item--last.igx-day-item--active .igx-day-item__inner:after,.igx-day-item--special.igx-day-item--selected.igx-day-item--last.igx-day-item--active .igx-day-item__inner:after,.igx-day-item--special.igx-day-item--selected.igx-day-item--first.igx-day-item--active .igx-day-item__inner:after{border-color:var(--date-selected-special-focus-border-color)}.igx-day-item--current.igx-day-item--special.igx-day-item--first.igx-day-item--last .igx-day-item__inner,.igx-day-item--current.igx-day-item--special.igx-day-item--selected.igx-day-item--last .igx-day-item__inner,.igx-day-item--current.igx-day-item--special.igx-day-item--selected.igx-day-item--first .igx-day-item__inner,.igx-day-item--current.igx-day-item--first.igx-day-item--last .igx-day-item__inner,.igx-day-item--current.igx-day-item--selected.igx-day-item--last .igx-day-item__inner,.igx-day-item--current.igx-day-item--selected.igx-day-item--first .igx-day-item__inner{color:var(--date-selected-foreground);background:var(--date-selected-background);border-color:var(--date-selected-current-border-color);border-radius:var(--date-current-border-radius)}.igx-day-item--current.igx-day-item--first.igx-day-item--last .igx-day-item__inner:hover,.igx-day-item--current.igx-day-item--selected.igx-day-item--last .igx-day-item__inner:hover,.igx-day-item--current.igx-day-item--selected.igx-day-item--first .igx-day-item__inner:hover{color:var(--date-selected-hover-foreground);background:var(--date-selected-hover-background);border-color:var(--date-selected-current-hover-border-color)}.igx-day-item--current.igx-day-item--special.igx-day-item--first.igx-day-item--last.igx-day-item--active .igx-day-item__inner,.igx-day-item--current.igx-day-item--special.igx-day-item--selected.igx-day-item--last.igx-day-item--active .igx-day-item__inner,.igx-day-item--current.igx-day-item--special.igx-day-item--selected.igx-day-item--first.igx-day-item--active .igx-day-item__inner,.igx-day-item--current.igx-day-item--first.igx-day-item--last.igx-day-item--active .igx-day-item__inner,.igx-day-item--current.igx-day-item--selected.igx-day-item--last.igx-day-item--active .igx-day-item__inner,.igx-day-item--current.igx-day-item--selected.igx-day-item--first.igx-day-item--active .igx-day-item__inner{color:var(--date-selected-focus-foreground);background:var(--date-selected-focus-background);border-color:var(--date-selected-current-focus-border-color)}.igx-day-item--range.igx-day-item--selected.igx-day-item--last.igx-day-item--disabled:before,.igx-day-item--range.igx-day-item--selected.igx-day-item--first.igx-day-item--disabled:before{background:var(--content-background)}.igx-day-item{position:relative;display:flex;justify-content:center;align-items:center;color:inherit;outline:none;height:var(--_date-size);width:100%;border-block-start:var(--_range-border-size) var(--_date-border-style) rgba(0,0,0,0);border-block-end:var(--_range-border-size) var(--_date-border-style) rgba(0,0,0,0)}.igx-day-item__inner{position:relative;display:inline-flex;justify-content:center;align-items:center;width:var(--_date-size);height:var(--_date-size);min-width:var(--_date-size);border-radius:var(--date-border-radius);border-width:var(--_date-border-size);border-style:var(--_date-border-style);border-color:var(--date-border-color);z-index:2}.igx-day-item__inner:hover{color:var(--date-hover-foreground);background:var(--date-hover-background);border-color:var(--date-hover-border-color);cursor:pointer}.igx-day-item__inner:after{content:\"\";position:absolute;z-index:0;border-style:var(--_date-border-style);border-color:#0000}.igx-day-item__inner--week-number{border-radius:0;position:relative;pointer-events:none;z-index:1;min-width:auto;width:var(--_date-size);color:var(--week-number-foreground);background:var(--week-number-background);border-color:var(--week-number-background)}.igx-day-item__inner--week-number:after{display:none!important}.igx-day-item__inner--week-number:before{content:\"\";position:absolute;background:var(--week-number-background);inset-block-start:100%;height:calc(var(--_date-view-row-gap) + .125rem);width:var(--_date-size)}.igx-day-item--weekend:not(.igx-day-item--disabled,.igx-day-item--special,.igx-day-item--selected,.igx-day-item--current,.igx-day-item--first,.igx-day-item--last,.igx-day-item--inactive,.igx-day-item--range,.igx-day-item--active) .igx-day-item__inner{color:var(--weekend-color)}.igx-day-item--weekend:not(.igx-day-item--disabled,.igx-day-item--special,.igx-day-item--selected,.igx-day-item--current,.igx-day-item--first,.igx-day-item--last,.igx-day-item--inactive,.igx-day-item--range,.igx-day-item--active) .igx-day-item__inner:hover{color:var(--date-hover-foreground)}.igx-day-item--week-number{margin-inline-end:.25rem;justify-content:flex-start;width:var(--size);pointer-events:none}igx-day-item--week-number:hover,.igx-day-item__inner--week-number{cursor:default;color:var(--week-number-foreground)}.igx-day-item--inactive:not(.igx-day-item--disabled,.igx-day-item--special,.igx-day-item--current,.igx-day-item--first,.igx-day-item--last,.igx-day-item--range) .igx-day-item__inner{color:var(--inactive-color)}.igx-day-item--inactive:not(.igx-day-item--disabled,.igx-day-item--special,.igx-day-item--current,.igx-day-item--first,.igx-day-item--last,.igx-day-item--range) .igx-day-item__inner:hover{color:var(--date-hover-foreground)}.igx-day-item--active .igx-day-item__inner{color:var(--date-focus-foreground);background:var(--date-focus-background);border-color:var(--date-focus-border-color)}.igx-day-item--selected .igx-day-item__inner{color:var(--date-selected-foreground);background:var(--date-selected-background);border-color:var(--date-selected-border-color)}.igx-day-item--selected .igx-day-item__inner:hover{color:var(--date-selected-hover-foreground);background:var(--date-selected-hover-background);border-color:var(--date-selected-hover-border-color)}.igx-day-item--selected.igx-day-item--active .igx-day-item__inner{color:var(--date-selected-focus-foreground);background:var(--date-selected-focus-background);border-color:var(--date-selected-focus-border-color)}.igx-day-item--current .igx-day-item__inner{color:var(--date-current-foreground);background:var(--date-current-background);border-color:var(--date-current-border-color);border-radius:var(--date-current-border-radius)}.igx-day-item--current .igx-day-item__inner:hover{color:var(--date-current-hover-foreground);background:var(--date-current-hover-background);border-color:var(--date-current-hover-border-color)}.igx-day-item--current .igx-day-item__inner:after{width:var(--_date-inner-size);height:var(--_date-inner-size)}.igx-day-item--current.igx-day-item--active .igx-day-item__inner{color:var(--date-current-focus-foreground);background:var(--date-current-focus-background);border-color:var(--date-current-focus-border-color)}.igx-day-item--current.igx-day-item--selected .igx-day-item__inner{border-color:var(--date-selected-current-border-color)}.igx-day-item--current.igx-day-item--selected .igx-day-item__inner:hover{border-color:var(--date-selected-current-hover-border-color)}.igx-day-item--current.igx-day-item--selected.igx-day-item--active .igx-day-item__inner{border-color:var(--date-selected-current-focus-border-color)}.igx-day-item--current.igx-day-item--selected:not(.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner{color:var(--date-selected-current-foreground);background:var(--date-selected-current-background);border-color:var(--date-selected-current-border-color)}.igx-day-item--current.igx-day-item--selected:not(.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner:hover{color:var(--date-selected-current-hover-foreground);background:var(--date-selected-current-hover-background);border-color:var(--date-selected-current-hover-border-color)}.igx-day-item--current.igx-day-item--selected.igx-day-item--active:not(.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner{color:var(--date-selected-current-focus-foreground);background:var(--date-selected-current-focus-background);border-color:var(--date-selected-current-focus-border-color)}.igx-day-item--current.igx-day-item--range:not(.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner{color:var(--date-selected-current-range-foreground);background:var(--date-selected-current-range-background);border-color:var(--date-selected-current-border-color)}.igx-day-item--current.igx-day-item--range:not(.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner:hover{color:var(--date-selected-current-range-hover-foreground);background:var(--date-selected-current-range-hover-background);border-color:var(--date-selected-current-hover-border-color)}.igx-day-item--current.igx-day-item--range.igx-day-item--active:not(.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner{color:var(--date-selected-current-range-focus-foreground);background:var(--date-selected-current-range-focus-background);border-color:var(--date-selected-current-focus-border-color)}.igx-day-item--current.igx-day-item--disabled .igx-day-item__inner{color:var(--date-current-foreground);opacity:.38}.igx-day-item--special .igx-day-item__inner{color:var(--date-special-foreground);background:var(--date-special-background);border-radius:var(--date-special-border-radius)}.igx-day-item--special .igx-day-item__inner:after{width:var(--_date-size);height:var(--_date-size);border-width:var(--_date-border-size);border-color:var(--date-special-border-color);border-radius:var(--date-special-border-radius)}.igx-day-item--special .igx-day-item__inner:hover{color:var(--date-special-hover-foreground);background:var(--date-special-hover-background)}.igx-day-item--special .igx-day-item__inner:hover:after{border-color:var(--date-special-hover-border-color)}.igx-day-item--special.igx-day-item--active .igx-day-item__inner{background:var(--date-special-focus-background);color:var(--date-special-focus-foreground)}.igx-day-item--special.igx-day-item--active .igx-day-item__inner:after{border-color:var(--date-special-focus-border-color)}.igx-day-item--special.igx-day-item--selected .igx-day-item__inner:after{width:var(--_date-inner-size);height:var(--_date-inner-size)}.igx-day-item--special.igx-day-item--selected:not(.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner{color:var(--date-selected-special-foreground);background:var(--date-selected-special-background)}.igx-day-item--special.igx-day-item--selected:not(.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner:after{border-color:var(--date-selected-special-border-color)}.igx-day-item--special.igx-day-item--selected:not(.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner:hover{color:var(--date-selected-special-hover-foreground);background:var(--date-selected-special-hover-background)}.igx-day-item--special.igx-day-item--selected:not(.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner:hover:after{border-color:var(--date-selected-special-hover-border-color)}.igx-day-item--special.igx-day-item--selected.igx-day-item--active:not(.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner{color:var(--date-selected-special-focus-foreground);background:var(--date-selected-special-focus-background)}.igx-day-item--special.igx-day-item--selected.igx-day-item--active:not(.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner:after{border-color:var(--date-selected-special-focus-border-color)}.igx-day-item--special.igx-day-item--range:not(.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner{color:var(--date-special-range-foreground);background:var(--date-special-range-background)}.igx-day-item--special.igx-day-item--range:not(.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner:after{border-color:var(--date-special-range-border-color)}.igx-day-item--special.igx-day-item--range:not(.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner:hover{color:var(--date-special-range-hover-foreground);background:var(--date-special-range-hover-background)}.igx-day-item--special.igx-day-item--range:not(.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner:hover:after{border-color:var(--date-special-range-hover-border-color)}.igx-day-item--special.igx-day-item--range.igx-day-item--active:not(.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner{color:var(--date-special-range-focus-foreground);background:var(--date-special-range-focus-background)}.igx-day-item--special.igx-day-item--range.igx-day-item--active:not(.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner:after{border-color:var(--date-special-range-focus-border-color)}.igx-day-item--special.igx-day-item--range:not(.igx-day-item--first,.igx-day-item--last,.igx-day-item--current) .igx-day-item__inner{border-color:#0000}.igx-day-item--special.igx-day-item--range:not(.igx-day-item--first,.igx-day-item--last,.igx-day-item--current) .igx-day-item__inner:after{width:var(--_date-size);height:var(--_date-size)}.igx-day-item--special.igx-day-item--disabled .igx-day-item__inner{color:var(--date-special-range-foreground);opacity:.38}.igx-day-item--special.igx-day-item--current .igx-day-item__inner:after{width:var(--_date-inner-size);height:var(--_date-inner-size)}.igx-day-item--special.igx-day-item--current.igx-day-item--selected:not(.igx-day-item--range) .igx-day-item__inner:after{border-color:var(--date-selected-special-border-color)}.igx-day-item--special.igx-day-item--current.igx-day-item--selected:not(.igx-day-item--range) .igx-day-item__inner:hover:after{border-color:var(--date-selected-special-hover-border-color)}.igx-day-item--special.igx-day-item--current.igx-day-item--selected.igx-day-item--active:not(.igx-day-item--range) .igx-day-item__inner:after{border-color:var(--date-selected-special-focus-border-color)}.igx-day-item--range{border-top-color:var(--date-range-border-color);border-bottom-color:var(--date-range-border-color);background:var(--date-selected-range-background)}.igx-day-item--range:hover{border-top-color:var(--date-range-border-color);border-bottom-color:var(--date-range-border-color)}.igx-day-item--range .igx-day-item__inner{background:#0000;color:var(--date-selected-range-foreground)}.igx-day-item--range:not(.igx-day-item--first,.igx-day-item--last,.igx-day-item--current,.igx-day-item--special) .igx-day-item__inner{border-color:#0000}.igx-day-item--range.igx-day-item--selected .igx-day-item__inner:hover{background:var(--date-selected-range-hover-background);color:var(--date-selected-range-hover-foreground)}.igx-day-item--range.igx-day-item--selected:after{border:var(--_date-border-size) var(--_range-border-style) var(--date-range-border-color)}.igx-day-item--range.igx-day-item--selected.igx-day-item--active .igx-day-item__inner{color:var(--date-selected-range-focus-foreground);background:var(--date-selected-range-focus-background)}.igx-day-item--range-preview{position:relative;border-block-style:var(--_preview-border-style);border-block-color:var(--date-range-preview-border-color)}.igx-day-item--range-preview:not(.igx-day-item--first,.igx-day-item--last,.igx-day-item--current) .igx-day-item__inner{border-color:#0000}.igx-day-item--range-preview.igx-day-item--first{background:#0000;border-block-color:rgba(0,0,0,0)}.igx-day-item--range-preview.igx-day-item--first:after{content:\"\";position:absolute;height:var(--_date-size);inset-inline-start:50%;border-block-color:var(--date-range-preview-border-color);width:calc(50% + .0625rem);border-width:var(--_range-border-size);border-inline-color:rgba(0,0,0,0);border-style:var(--_preview-border-style)}.igx-day-item--range-preview.igx-day-item--last{background:#0000;border-block-color:rgba(0,0,0,0)}.igx-day-item--range-preview.igx-day-item--last:after{content:\"\";position:absolute;height:var(--_date-size);inset-inline-end:50%;border-block-color:var(--date-range-preview-border-color);width:calc(50% + .0625rem);border-width:var(--_range-border-size);border-inline-color:rgba(0,0,0,0);border-style:var(--_preview-border-style)}.igx-day-item--range-preview.igx-day-item--selected.igx-day-item--first:not(.igx-day-item--active) .igx-day-item__inner:not(:hover){color:var(--date-selected-foreground)}.igx-day-item--range-preview.igx-day-item--selected.igx-day-item--last:not(.igx-day-item--active) .igx-day-item__inner:not(:hover){color:var(--date-selected-foreground)}.igx-day-item--first:after{inset-inline-start:50%}.igx-day-item--last:after{inset-inline-end:50%}.igx-day-item--disabled{pointer-events:none;cursor:not-allowed}.igx-day-item--disabled .igx-day-item__inner{color:var(--date-disabled-foreground)}.igx-day-item--disabled.igx-day-item--range .igx-day-item__inner{color:var(--date-disabled-range-foreground)}.igx-day-item--disabled.igx-day-item--selected:not(.igx-day-item--range) .igx-day-item__inner{color:var(--date-selected-foreground);opacity:.38}.igx-day-item--disabled.igx-day-item--inactive .igx-day-item__inner{opacity:1}.igx-day-item--range.igx-day-item--selected.igx-day-item--first.igx-day-item--disabled .igx-day-item__inner,.igx-day-item--range.igx-day-item--selected.igx-day-item--last.igx-day-item--disabled .igx-day-item__inner{opacity:.38}.igx-day-item--hidden{cursor:default;visibility:hidden}.igx-day-label{position:relative;display:flex;justify-content:center;align-items:center;outline:none;height:var(--_date-size);min-width:var(--_date-size);width:100%;border-block-start:.0625rem solid rgba(0,0,0,0);border-block-end:.0625rem solid rgba(0,0,0,0);color:var(--weekday-color);border-radius:0}.igx-day-label:hover,.igx-day-label:focus{color:var(--weekday-color)}.igx-day-label{font-family:var(--ig-body-1-font-family, var(--ig-font-family));font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom);font-size:max(var(--is-large, 1)*max(var(--ig-body-1-font-size),-1 * var(--ig-body-1-font-size)),var(--is-medium, 1)*max(var(--ig-body-2-font-size),-1 * var(--ig-body-2-font-size)),var(--is-small, 1)*max(var(--ig-body-2-font-size),-1 * var(--ig-body-2-font-size)));font-weight:max(var(--is-large, 1)*max(var(--ig-body-1-font-weight),-1 * var(--ig-body-1-font-weight)),var(--is-medium, 1)*max(var(--ig-body-2-font-weight),-1 * var(--ig-body-2-font-weight)),var(--is-small, 1)*max(var(--ig-body-2-font-weight),-1 * var(--ig-body-2-font-weight)));font-style:max(var(--is-large, 1)*max(var(--ig-body-1-font-style),-1 * var(--ig-body-1-font-style)),var(--is-medium, 1)*max(var(--ig-body-2-font-style),-1 * var(--ig-body-2-font-style)),var(--is-small, 1)*max(var(--ig-body-2-font-style),-1 * var(--ig-body-2-font-style)));line-height:max(var(--is-large, 1)*max(var(--ig-body-1-line-height),-1 * var(--ig-body-1-line-height)),var(--is-medium, 1)*max(var(--ig-body-2-line-height),-1 * var(--ig-body-2-line-height)),var(--is-small, 1)*max(var(--ig-body-2-line-height),-1 * var(--ig-body-2-line-height)));letter-spacing:max(var(--is-large, 1)*max(var(--ig-body-1-letter-spacing),-1 * var(--ig-body-1-letter-spacing)),var(--is-medium, 1)*max(var(--ig-body-2-letter-spacing),-1 * var(--ig-body-2-letter-spacing)),var(--is-small, 1)*max(var(--ig-body-2-letter-spacing),-1 * var(--ig-body-2-letter-spacing)));text-transform:max(var(--is-large, 1)*max(var(--ig-body-1-text-transform),-1 * var(--ig-body-1-text-transform)),var(--is-medium, 1)*max(var(--ig-body-2-text-transform),-1 * var(--ig-body-2-text-transform)),var(--is-small, 1)*max(var(--ig-body-2-text-transform),-1 * var(--ig-body-2-text-transform)));margin:0}.igx-day-label--week-number{margin-inline-end:.25rem;justify-content:flex-start;width:var(--size);text-align:center}.igx-day-label--week-number span{display:flex;justify-content:center;align-items:center;width:var(--_date-size);height:var(--_date-size);position:relative;border-top-left-radius:var(--week-number-border-radius);border-top-right-radius:var(--week-number-border-radius);border:.0625rem solid rgba(0,0,0,0)}.igx-day-label--week-number span>i{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding:.25rem;font-style:normal}.igx-day-label__inner{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}}@layer ig.material{@container style(--ig-theme: material){.igx-days-row:nth-child(2) .igx-days-row__day--week-number{border-start-start-radius:var(--week-number-border-radius);border-start-end-radius:var(--week-number-border-radius)}}}@layer ig.material{@container style(--ig-theme: material){.igx-day-item--selected.igx-day-item--first.igx-day-item--last .igx-day-item__inner:after{width:var(--_date-inner-size);height:var(--_date-inner-size)}}}@layer ig.material{@container style(--ig-theme: material){.igx-day-label--week-number span{color:var(--week-number-foreground);background:var(--week-number-background)}.igx-day-label--week-number span:before{content:\"\";position:absolute;background:var(--week-number-background);border-inline:.0625rem solid var(--week-number-background);inset-block-start:100%;height:.375rem;width:var(--_date-size)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-days-view{padding-block-start:0;padding-block-end:1rem;padding-inline:0}.igx-days-view+.igx-days-view .igx-days-row{padding-inline-start:1.375rem}.igx-days-view:first-child .igx-days-row,.igx-days-view:nth-child(2n) .igx-days-row{padding-inline-end:1.375rem}.igx-days-view:last-child .igx-days-row,.igx-days-view:first-child:only-child .igx-days-row{padding-inline-end:.75rem}.igx-days-view .igx-date-picker{margin-block-end:0}.igx-days-view .igx-date-picker .igx-calendar-picker{padding-bottom:0}.igx-days-view .igx-date-picker .igx-calendar-picker__prev,.igx-days-view .igx-date-picker .igx-calendar-picker__next{top:.5rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-days-row{padding-inline:max(var(--is-large, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-days-row:nth-child(2) .igx-days-row__day-inner--week-number{border-start-start-radius:var(--week-number-border-radius);border-start-end-radius:var(--week-number-border-radius)}.igx-days-row:first-of-type{background:var(--header-background);border-block-end:.0625rem solid var(--border-color)}.igx-days-row:last-of-type{margin-block-end:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-day-item--special .igx-day-item__inner{border-radius:var(--date-border-radius)}.igx-day-item--special .igx-day-item__inner:after{border-radius:var(--date-special-border-radius)}.igx-day-item--special.igx-day-item--first .igx-day-item__inner,.igx-day-item--special.igx-day-item--last .igx-day-item__inner{border-radius:var(--date-range-border-radius)}.igx-day-item--special.igx-day-item--range:not(.igx-day-item--range-preview,.igx-day-item--current,.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner{border-color:#0000}.igx-day-item--special.igx-day-item--range:not(.igx-day-item--range-preview,.igx-day-item--current,.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner:hover{border-color:var(--date-hover-border-color)}.igx-day-item--special.igx-day-item--range.igx-day-item--active:not(.igx-day-item--range-preview,.igx-day-item--current,.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner{border-color:var(--date-focus-border-color)}.igx-day-item--current.igx-day-item--first.igx-day-item--last .igx-day-item__inner{border-radius:var(--date-range-border-radius)}.igx-day-item--current.igx-day-item--special:not(.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner{color:var(--date-current-foreground);background:var(--date-current-background);border-color:var(--date-current-border-color);border-radius:var(--date-current-border-radius)}.igx-day-item--current.igx-day-item--special:not(.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner:hover{color:var(--date-current-hover-foreground);background:var(--date-current-hover-background);border-color:var(--date-current-hover-border-color)}.igx-day-item--current.igx-day-item--special:not(.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner:after{width:var(--inner-size);height:var(--inner-size)}.igx-day-item--current.igx-day-item--special.igx-day-item--active:not(.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner{color:var(--date-current-focus-foreground);background:var(--date-current-focus-background);border-color:var(--date-current-focus-border-color)}.igx-day-item--current.igx-day-item--special.igx-day-item--range:not(.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner{color:var(--date-selected-current-range-foreground);background:var(--date-selected-current-range-background);border-color:var(--date-selected-current-border-color)}.igx-day-item--current.igx-day-item--special.igx-day-item--range:not(.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner:hover{color:var(--date-selected-current-range-hover-foreground);background:var(--date-selected-current-range-hover-background);border-color:var(--date-selected-current-hover-border-color)}.igx-day-item--current.igx-day-item--special.igx-day-item--range.igx-day-item--active:not(.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner{color:var(--date-selected-current-range-focus-foreground);background:var(--date-selected-current-range-focus-background);border-color:var(--date-selected-current-focus-border-color)}.igx-day-item--current.igx-day-item--special.igx-day-item--selected:not(.igx-day-item--range,.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner{color:var(--date-selected-current-foreground);background:var(--date-selected-current-background)}.igx-day-item--current.igx-day-item--special.igx-day-item--selected:not(.igx-day-item--range,.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner:hover{color:var(--date-selected-current-hover-foreground);background:var(--date-selected-current-hover-background)}.igx-day-item--current.igx-day-item--special.igx-day-item--selected.igx-day-item--active:not(.igx-day-item--range,.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner{color:var(--date-selected-current-focus-foreground);background:var(--date-selected-current-focus-background)}.igx-day-item--range-preview{color:var(--date-selected-range-foreground);background:var(--date-selected-range-background);border-block-style:solid}.igx-day-item--range-preview:after{background:var(--date-selected-range-background)}.igx-day-item--range-preview .igx-day-item__inner{border-color:#0000}.igx-day-item--range-preview .igx-day-item__inner:hover{color:var(--date-selected-range-foreground);border-color:#0000}.igx-day-item--range-preview.igx-day-item--first{background:#0000}.igx-day-item--range-preview.igx-day-item--first:after{width:50%;border-style:solid;border-inline:0}.igx-day-item--range-preview.igx-day-item--first .igx-day-item__inner{color:var(--date-selected-foreground);background:var(--date-selected-background);border-color:var(--date-selected-border-color);border-radius:var(--date-range-border-radius)}.igx-day-item--range-preview.igx-day-item--first .igx-day-item__inner:hover{color:var(--date-selected-hover-foreground);background:var(--date-selected-hover-background);border-color:var(--date-selected-hover-border-color)}.igx-day-item--range-preview.igx-day-item--first .igx-day-item__inner:after{width:var(--inner-size);height:var(--inner-size)}.igx-day-item--range-preview.igx-day-item--last{background:#0000}.igx-day-item--range-preview.igx-day-item--last:after{width:50%;border-style:solid;border-inline:0}.igx-day-item--range-preview.igx-day-item--last .igx-day-item__inner{color:var(--date-selected-foreground);background:var(--date-selected-background);border-color:var(--date-selected-border-color);border-radius:var(--date-range-border-radius)}.igx-day-item--range-preview.igx-day-item--last .igx-day-item__inner:hover{color:var(--date-selected-hover-foreground);background:var(--date-selected-hover-background);border-color:var(--date-selected-hover-border-color)}.igx-day-item--range-preview.igx-day-item--last .igx-day-item__inner:after{width:var(--inner-size);height:var(--inner-size)}.igx-day-item--range-preview.igx-day-item--first.igx-day-item--last .igx-day-item__inner{color:var(--date-selected-foreground);background:var(--date-selected-background);border-color:var(--date-selected-border-color);border-radius:var(--date-range-border-radius)}.igx-day-item--range-preview.igx-day-item--first.igx-day-item--active .igx-day-item__inner,.igx-day-item--range-preview.igx-day-item--last.igx-day-item--active .igx-day-item__inner{color:var(--date-selected-focus-foreground);background:var(--date-selected-focus-background);border-color:var(--date-selected-focus-border-color);border-radius:var(--date-range-border-radius)}.igx-day-item--range-preview.igx-day-item--current .igx-day-item__inner{color:var(--date-current-foreground);background:var(--date-current-background);border-color:var(--date-current-border-color)}.igx-day-item--range-preview.igx-day-item--current .igx-day-item__inner:hover{color:var(--date-current-hover-foreground);background:var(--date-current-hover-background)}.igx-day-item--range-preview.igx-day-item--current.igx-day-item--active .igx-day-item__inner{color:var(--date-current-focus-foreground);background:var(--date-current-focus-background)}.igx-day-item--range-preview.igx-day-item--current.igx-day-item--first .igx-day-item__inner{color:var(--date-selected-foreground);background:var(--date-selected-background);border-color:var(--date-selected-current-border-color)}.igx-day-item--range-preview.igx-day-item--current.igx-day-item--first .igx-day-item__inner:hover{color:var(--date-selected-hover-foreground);background:var(--date-selected-hover-background);border-color:var(--date-selected-current-hover-border-color)}.igx-day-item--range-preview.igx-day-item--current.igx-day-item--last .igx-day-item__inner{color:var(--date-selected-foreground);background:var(--date-selected-background);border-color:var(--date-selected-current-border-color)}.igx-day-item--range-preview.igx-day-item--current.igx-day-item--last .igx-day-item__inner:hover{color:var(--date-selected-hover-foreground);background:var(--date-selected-hover-background);border-color:var(--date-selected-current-hover-border-color)}.igx-day-item--range-preview.igx-day-item--current.igx-day-item--active.igx-day-item--first .igx-day-item__inner,.igx-day-item--range-preview.igx-day-item--current.igx-day-item--active.igx-day-item--last .igx-day-item__inner{color:var(--date-selected-focus-foreground);background:var(--date-selected-focus-background);border-color:var(--date-selected-current-focus-border-color)}.igx-day-item--range-preview.igx-day-item--special.igx-day-item--first .igx-day-item__inner:after{width:var(--inner-size);height:var(--inner-size);border-color:var(--date-selected-special-border-color)}.igx-day-item--range-preview.igx-day-item--special.igx-day-item--first .igx-day-item__inner:hover:after{border-color:var(--date-selected-special-hover-border-color)}.igx-day-item--range-preview.igx-day-item--special.igx-day-item--last .igx-day-item__inner:after{width:var(--inner-size);height:var(--inner-size);border-color:var(--date-selected-special-border-color)}.igx-day-item--range-preview.igx-day-item--special.igx-day-item--last .igx-day-item__inner:hover:after{border-color:var(--date-selected-special-hover-border-color)}.igx-day-item--range-preview.igx-day-item--special.igx-day-item--active.igx-day-item--first .igx-day-item__inner:after{border-color:var(--date-selected-special-focus-border-color)}.igx-day-item--range-preview.igx-day-item--special.igx-day-item--active.igx-day-item--last .igx-day-item__inner:after{border-color:var(--date-selected-special-focus-border-color)}.igx-day-item--range-preview.igx-day-item--weekend:not(.igx-day-item--special,.igx-day-item--current,.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner{color:var(--date-selected-range-foreground)}.igx-day-item--range-preview.igx-day-item--weekend:not(.igx-day-item--special,.igx-day-item--current,.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner:hover{color:var(--date-selected-range-hover-foreground)}.igx-day-item--range-preview.igx-day-item--weekend.igx-day-item--active:not(.igx-day-item--special,.igx-day-item--current,.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner{color:var(--date-selected-range-focus-foreground)}.igx-day-item--range-preview.igx-day-item--inactive:not(.igx-day-item--special,.igx-day-item--current,.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner{color:var(--date-selected-range-foreground)}.igx-day-item--range-preview.igx-day-item--inactive:not(.igx-day-item--special,.igx-day-item--current,.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner:hover{color:var(--date-selected-range-hover-foreground)}.igx-day-item--range-preview.igx-day-item--inactive.igx-day-item--active:not(.igx-day-item--special,.igx-day-item--current,.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner{color:var(--date-selected-range-focus-foreground)}.igx-day-item--range.igx-day-item--current.igx-day-item--first .igx-day-item__inner,.igx-day-item--range.igx-day-item--current.igx-day-item--last .igx-day-item__inner,.igx-day-item--range.igx-day-item--special.igx-day-item--first .igx-day-item__inner,.igx-day-item--range.igx-day-item--special.igx-day-item--last .igx-day-item__inner{border-radius:var(--date-range-border-radius)}.igx-day-item--disabled.igx-day-item--range-preview:not(.igx-day-item--special,.igx-day-item--current,.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner{color:var(--date-disabled-range-foreground)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-day-label{font-style:italic!important}.igx-day-label--week-number{text-align:center}.igx-day-label--week-number span{color:var(--weekday-color)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-days-row{height:var(--_date-size)}.igx-days-row:nth-child(2) .igx-days-row__day--week-number{border-start-start-radius:var(--week-number-border-radius);border-start-end-radius:var(--week-number-border-radius)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-day-item{--_preview-border-style: solid}.igx-day-item--current .igx-day-item__inner{background:#0000;border-color:var(--date-border-color);border-radius:var(--date-border-radius)}.igx-day-item--current .igx-day-item__inner:before{content:\"\";position:absolute;border:var(--_date-border-size) var(--_date-border-style) var(--date-current-border-color);box-sizing:border-box;width:var(--_date-inner-size);height:var(--_date-inner-size);background:var(--date-current-background);border-radius:var(--date-current-border-radius);z-index:-1}.igx-day-item--current .igx-day-item__inner:hover{background:var(--date-hover-background);border-color:var(--date-hover-border-color)}.igx-day-item--current .igx-day-item__inner:hover:before{background:var(--date-current-hover-background);border-color:var(--date-current-hover-border-color)}.igx-day-item--current.igx-day-item--active .igx-day-item__inner{background:var(--date-focus-background);border-color:var(--date-focus-border-color)}.igx-day-item--current.igx-day-item--active .igx-day-item__inner:before{background:var(--date-current-focus-background);border-color:var(--date-current-focus-border-color)}.igx-day-item--current.igx-day-item--selected .igx-day-item__inner{color:var(--date-selected-current-foreground);background:var(--date-selected-background);border-color:var(--date-selected-border-color)}.igx-day-item--current.igx-day-item--selected .igx-day-item__inner:before{border-color:var(--date-selected-current-border-color);background:var(--date-selected-current-background)}.igx-day-item--current.igx-day-item--selected .igx-day-item__inner:hover{color:var(--date-selected-current-hover-foreground);background:var(--date-selected-hover-background);border-color:var(--date-selected-hover-border-color)}.igx-day-item--current.igx-day-item--selected .igx-day-item__inner:hover:before{border-color:var(--date-selected-current-hover-border-color);background:var(--date-selected-current-hover-background)}.igx-day-item--current.igx-day-item--selected.igx-day-item--active .igx-day-item__inner{color:var(--date-selected-current-focus-foreground);background:var(--date-selected-focus-background);border-color:var(--date-selected-focus-border-color)}.igx-day-item--current.igx-day-item--selected.igx-day-item--active .igx-day-item__inner:before{border-color:var(--date-selected-current-focus-border-color);background:var(--date-selected-current-focus-background)}.igx-day-item--special .igx-day-item__inner{background:#0000;border-color:var(--date-border-color);border-radius:var(--date-border-radius)}.igx-day-item--special .igx-day-item__inner:after{width:var(--_date-inner-size);height:var(--_date-inner-size);background:var(--date-special-background);border-color:var(--date-special-border-color);border-radius:var(--date-special-border-radius);z-index:-1}.igx-day-item--special .igx-day-item__inner:hover{background:var(--date-hover-background);border-color:var(--date-hover-border-color)}.igx-day-item--special .igx-day-item__inner:hover:after{background:var(--date-special-hover-background);border-color:var(--date-special-hover-border-color)}.igx-day-item--special.igx-day-item--active .igx-day-item__inner{background:var(--date-focus-background);border-color:var(--date-focus-border-color)}.igx-day-item--special.igx-day-item--active .igx-day-item__inner:after{background:var(--date-special-focus-background);border-color:var(--date-special-focus-border-color)}.igx-day-item--special.igx-day-item--selected .igx-day-item__inner{color:var(--date-selected-special-foreground);background:var(--date-selected-background);border-color:var(--date-selected-border-color)}.igx-day-item--special.igx-day-item--selected .igx-day-item__inner:after{background:var(--date-selected-special-background);border-color:var(--date-selected-special-border-color);border-radius:var(--date-special-border-radius)}.igx-day-item--special.igx-day-item--selected .igx-day-item__inner:hover{color:var(--date-selected-special-hover-foreground);background:var(--date-selected-hover-background);border-color:var(--date-selected-hover-border-color)}.igx-day-item--special.igx-day-item--selected .igx-day-item__inner:hover:after{background:var(--date-selected-special-hover-background);border-color:var(--date-selected-special-hover-border-color)}.igx-day-item--special.igx-day-item--selected.igx-day-item--active .igx-day-item__inner{color:var(--date-selected-special-focus-foreground);background:var(--date-selected-focus-background);border-color:var(--date-selected-focus-border-color)}.igx-day-item--special.igx-day-item--selected.igx-day-item--active .igx-day-item__inner:after{background:var(--date-selected-special-focus-background);border-color:var(--date-selected-special-focus-border-color)}.igx-day-item--current.igx-day-item--special .igx-day-item__inner{color:var(--date-current-foreground)}.igx-day-item--current.igx-day-item--special .igx-day-item__inner:after{width:calc(var(--_date-inner-size) - .25rem);height:calc(var(--_date-inner-size) - .25rem);background:var(--date-current-background);border-color:var(--date-current-foreground);border-radius:var(--date-current-border-radius)}.igx-day-item--current.igx-day-item--special .igx-day-item__inner:hover{color:var(--date-current-hover-foreground)}.igx-day-item--current.igx-day-item--special .igx-day-item__inner:hover:after{background:var(--date-current-hover-background);border-color:var(--date-current-hover-foreground)}.igx-day-item--current.igx-day-item--special.igx-day-item--active .igx-day-item__inner{color:var(--date-current-focus-foreground)}.igx-day-item--current.igx-day-item--special.igx-day-item--active .igx-day-item__inner:after{background:var(--date-current-focus-background);border-color:var(--date-current-focus-foreground)}.igx-day-item--current.igx-day-item--special.igx-day-item--selected .igx-day-item__inner{color:var(--date-selected-current-foreground)}.igx-day-item--current.igx-day-item--special.igx-day-item--selected .igx-day-item__inner:after{background:var(--date-selected-current-background);border-color:var(--date-selected-current-foreground)}.igx-day-item--current.igx-day-item--special.igx-day-item--selected .igx-day-item__inner:hover{color:var(--date-selected-current-hover-foreground)}.igx-day-item--current.igx-day-item--special.igx-day-item--selected .igx-day-item__inner:hover:after{background:var(--date-selected-current-hover-background);border-color:var(--date-selected-current-hover-foreground)}.igx-day-item--current.igx-day-item--special.igx-day-item--selected.igx-day-item--active .igx-day-item__inner{color:var(--date-selected-current-focus-foreground)}.igx-day-item--current.igx-day-item--special.igx-day-item--selected.igx-day-item--active .igx-day-item__inner:after{background:var(--date-selected-current-focus-background);border-color:var(--date-selected-current-focus-foreground)}.igx-day-item--current.igx-day-item--special.igx-day-item--selected.igx-day-item--range-preview.igx-day-item--first .igx-day-item__inner:hover{color:var(--date-current-foreground)}.igx-day-item--current.igx-day-item--special.igx-day-item--selected.igx-day-item--range-preview.igx-day-item--first .igx-day-item__inner:hover:after{border-color:var(--date-current-foreground)}.igx-day-item--current.igx-day-item--special.igx-day-item--selected.igx-day-item--range-preview.igx-day-item--last .igx-day-item__inner:hover{color:var(--date-current-foreground)}.igx-day-item--current.igx-day-item--special.igx-day-item--selected.igx-day-item--range-preview.igx-day-item--last .igx-day-item__inner:hover:after{border-color:var(--date-current-foreground)}.igx-day-item--first.igx-day-item--last:not(.igx-day-item--current,.igx-day-item--special) .igx-day-item__inner{color:inherit;background:#0000;border-color:var(--date-range-preview-border-color);border-radius:var(--date-range-border-radius)}.igx-day-item--first.igx-day-item--last:not(.igx-day-item--current,.igx-day-item--special) .igx-day-item__inner:hover{border-color:var(--date-range-preview-border-color)}.igx-day-item--first.igx-day-item--last.igx-day-item--active:not(.igx-day-item--current,.igx-day-item--special) .igx-day-item__inner{border-color:var(--date-range-preview-border-color)}.igx-day-item--range{background:var(--date-selected-range-background);border-block-color:var(--date-range-border-color)}.igx-day-item--range .igx-day-item__inner{height:100%}.igx-day-item--range.igx-day-item--first:before,.igx-day-item--range.igx-day-item--first:after{height:var(--_date-size);width:calc(50% + var(--_date-size)/2)}.igx-day-item--range.igx-day-item--first:before{content:\"\";position:absolute;width:var(--_date-size);z-index:3;pointer-events:none;inset-inline-end:initial;border-block:var(--_range-border-size) var(--_range-border-style) var(--date-range-border-color);border-start-start-radius:var(--date-range-border-radius);border-end-start-radius:var(--date-range-border-radius);border-start-end-radius:0;border-end-end-radius:0}.igx-day-item--range.igx-day-item--first:after{background:var(--date-selected-range-background);border-block:var(--_range-border-size) var(--_range-border-style) var(--date-range-border-color);inset-inline-start:calc(50% - var(--_date-size) / 2);border-start-start-radius:var(--date-range-border-radius);border-end-start-radius:var(--date-range-border-radius);border-inline-end:0}.igx-day-item--range.igx-day-item--first .igx-day-item__inner{background:#0000;border-color:#0000}.igx-day-item--range.igx-day-item--first .igx-day-item__inner:hover{border-color:#0000}.igx-day-item--range.igx-day-item--last:before,.igx-day-item--range.igx-day-item--last:after{height:var(--_date-size);width:calc(50% + var(--_date-size)/2)}.igx-day-item--range.igx-day-item--last:before{content:\"\";position:absolute;width:var(--_date-size);z-index:3;pointer-events:none;inset-inline-start:initial;border-block:var(--_range-border-size) var(--_range-border-style) var(--date-range-border-color);border-start-end-radius:var(--date-range-border-radius);border-end-end-radius:var(--date-range-border-radius);border-start-start-radius:0;border-end-start-radius:0}.igx-day-item--range.igx-day-item--last:after{background:var(--date-selected-range-background);border-block:var(--_range-border-size) var(--_range-border-style) var(--date-range-border-color);inset-inline-end:calc(50% - var(--_date-size) / 2);border-start-end-radius:var(--date-range-border-radius);border-end-end-radius:var(--date-range-border-radius);border-inline-start:0}.igx-day-item--range.igx-day-item--last .igx-day-item__inner{background:#0000;border-color:#0000}.igx-day-item--range.igx-day-item--last .igx-day-item__inner:hover{border-color:#0000}.igx-day-item--range-preview .igx-day-item__inner,.igx-day-item--range-preview .igx-day-item__inner:hover{background:#0000;border-color:#0000}.igx-day-item--range-preview:not(.igx-day-item--disabled,.igx-day-item--inactive,.igx-day-item--weekend) .igx-day-item__inner{color:inherit}.igx-day-item--range-preview.igx-day-item--inactive:not(.igx-day-item--current) .igx-day-item__inner{color:var(--inactive-color)}.igx-day-item--range-preview.igx-day-item--inactive:not(.igx-day-item--current) .igx-day-item__inner:hover{color:var(--inactive-color)}.igx-day-item--range-preview.igx-day-item--weekend:not(.igx-day-item--current,.igx-day-item--special,.igx-day-item--inactive,.igx-day-item--disabled) .igx-day-item__inner{color:var(--weekend-color)}.igx-day-item--range-preview.igx-day-item--weekend:not(.igx-day-item--current,.igx-day-item--special,.igx-day-item--inactive,.igx-day-item--disabled) .igx-day-item__inner:hover{color:var(--weekend-color)}.igx-day-item--range-preview:not(.igx-day-item--first,.igx-day-item--last,.igx-day-item--current,.igx-day-item--special) .igx-day-item__inner{border-color:#0000}.igx-day-item--range-preview.igx-day-item--first{color:inherit;border-block-color:rgba(0,0,0,0)}.igx-day-item--range-preview.igx-day-item--first:before,.igx-day-item--range-preview.igx-day-item--first:after{height:var(--_date-size);width:calc(50% + var(--_date-size)/2)}.igx-day-item--range-preview.igx-day-item--first:before{content:\"\";position:absolute;width:var(--_date-size);z-index:3;pointer-events:none;inset-inline-end:initial;border-start-start-radius:var(--date-range-border-radius);border-end-start-radius:var(--date-range-border-radius);border-start-end-radius:0;border-end-end-radius:0}.igx-day-item--range-preview.igx-day-item--first:after{background:#0000!important;border-style:var(--_preview-border-style);border-color:var(--date-range-preview-border-color);inset-inline-start:calc(50% - var(--_date-size) / 2);border-start-start-radius:var(--date-range-border-radius);border-end-start-radius:var(--date-range-border-radius);border-inline-end:0}.igx-day-item--range-preview.igx-day-item--first .igx-day-item__inner{border-color:#0000;border-radius:var(--date-range-border-radius)}.igx-day-item--range-preview.igx-day-item--last{color:inherit;border-block-color:rgba(0,0,0,0)}.igx-day-item--range-preview.igx-day-item--last:before,.igx-day-item--range-preview.igx-day-item--last:after{height:var(--_date-size);width:calc(50% + var(--_date-size)/2)}.igx-day-item--range-preview.igx-day-item--last:before{content:\"\";position:absolute;width:var(--_date-size);z-index:3;pointer-events:none;inset-inline-start:initial;border-start-end-radius:var(--date-range-border-radius);border-end-end-radius:var(--date-range-border-radius);border-start-start-radius:0;border-end-start-radius:0}.igx-day-item--range-preview.igx-day-item--last:after{background:#0000!important;border-style:var(--_preview-border-style);border-color:var(--date-range-preview-border-color);inset-inline-end:calc(50% - var(--_date-size) / 2);border-start-end-radius:var(--date-range-border-radius);border-end-end-radius:var(--date-range-border-radius);border-inline-start:0}.igx-day-item--range-preview.igx-day-item--last .igx-day-item__inner{border-color:#0000;border-radius:var(--date-range-border-radius)}.igx-day-item--range-preview.igx-day-item--first.igx-day-item--selected .igx-day-item__inner:after{border-block-color:rgba(0,0,0,0)}.igx-day-item--range-preview.igx-day-item--last.igx-day-item--selected .igx-day-item__inner:after{border-block-color:rgba(0,0,0,0)}.igx-day-item--first.igx-day-item--last.igx-day-item--current:not(.igx-day-item--special) .igx-day-item__inner:after{display:none}.igx-day-item--range-preview.igx-day-item--first.igx-day-item--current:not(.igx-day-item--special) .igx-day-item__inner:after{display:none}.igx-day-item--range-preview.igx-day-item--last.igx-day-item--current:not(.igx-day-item--special) .igx-day-item__inner:after{display:none}.igx-day-item+.igx-day-item--last:after{inset-inline-end:calc(50% - var(--_date-size) / 2)}.igx-day-item--range-preview.igx-day-item--special .igx-day-item__inner{color:var(--date-special-foreground);background:#0000}.igx-day-item--range-preview.igx-day-item--special .igx-day-item__inner:after{background:var(--date-special-background);border-color:var(--date-special-border-color)}.igx-day-item--range-preview.igx-day-item--special .igx-day-item__inner:hover{background:#0000;color:var(--date-special-foreground)}.igx-day-item--range-preview.igx-day-item--special .igx-day-item__inner:hover:after{background:var(--date-special-background);border-color:var(--date-special-border-color)}.igx-day-item--range-preview.igx-day-item--special.igx-day-item--active .igx-day-item__inner{color:var(--date-special-foreground);background:#0000}.igx-day-item--range-preview.igx-day-item--special.igx-day-item--active .igx-day-item__inner:after{background:var(--date-special-focus-background);border-color:var(--date-special-focus-border-color)}.igx-day-item--range-preview.igx-day-item--current .igx-day-item__inner,.igx-day-item--range-preview.igx-day-item--current .igx-day-item__inner:hover{color:var(--date-current-foreground);background:#0000;border-color:#0000}.igx-day-item--range-preview.igx-day-item--current .igx-day-item__inner:hover:before{background:var(--date-current-background);border-color:var(--date-current-border-color)}.igx-day-item--range-preview.igx-day-item--current .igx-day-item__inner:hover:after{border-color:var(--date-current-foreground)}.igx-day-item--range-preview.igx-day-item--current.igx-day-item--active .igx-day-item__inner{color:var(--date-current-foreground);background:#0000;border-color:#0000}.igx-day-item--range-preview.igx-day-item--current.igx-day-item--active .igx-day-item__inner:before{background:var(--date-current-background);border-color:var(--date-current-border-color)}.igx-day-item--range-preview.igx-day-item--current.igx-day-item--active .igx-day-item__inner:after{border-color:var(--date-current-foreground)}.igx-day-item--range-preview.igx-day-item--current.igx-day-item--special .igx-day-item__inner{color:var(--date-current-foreground);background:#0000;border-color:#0000}.igx-day-item--range-preview.igx-day-item--current.igx-day-item--special .igx-day-item__inner:after{background:var(--date-current-background);border-color:var(--date-current-foreground)}.igx-day-item--range-preview.igx-day-item--current.igx-day-item--special .igx-day-item__inner:hover:after{background:var(--date-current-background);border-color:var(--date-current-foreground)}.igx-day-item--range-preview.igx-day-item--current.igx-day-item--special.igx-day-item--active .igx-day-item__inner{color:var(--date-current-foreground);background:#0000;border-color:#0000}.igx-day-item--range-preview.igx-day-item--current.igx-day-item--special.igx-day-item--active .igx-day-item__inner:before{background:var(--date-current-background);border-color:var(--date-current-border-color)}.igx-day-item--range-preview.igx-day-item--current.igx-day-item--special.igx-day-item--active .igx-day-item__inner:after{background:var(--date-current-background);border-color:var(--date-current-foreground)}.igx-day-item--range-preview.igx-day-item--current.igx-day-item--special.igx-day-item--active .igx-day-item__inner:hover{color:var(--date-current-foreground);background:#0000;border-color:#0000}.igx-day-item--range-preview.igx-day-item--current.igx-day-item--special.igx-day-item--active .igx-day-item__inner:hover:before{background:var(--date-current-background);border-color:var(--date-current-border-color)}.igx-day-item--range-preview.igx-day-item--current.igx-day-item--special.igx-day-item--active .igx-day-item__inner:hover:after{border-color:var(--date-current-foreground)}.igx-day-item--selected.igx-day-item--first.igx-day-item--last .igx-day-item__inner{background:#0000;border-color:var(--date-range-preview-border-color);border-radius:var(--date-range-border-radius)}.igx-day-item--selected.igx-day-item--first.igx-day-item--last.igx-day-item--special .igx-day-item__inner{color:var(--date-special-foreground)}.igx-day-item--selected.igx-day-item--first.igx-day-item--last.igx-day-item--special .igx-day-item__inner:before{border-color:#0000}.igx-day-item--selected.igx-day-item--first.igx-day-item--last.igx-day-item--special .igx-day-item__inner:after{background:var(--date-special-background);border-color:var(--date-special-border-color)}.igx-day-item--selected.igx-day-item--first.igx-day-item--last.igx-day-item--special .igx-day-item__inner:hover:after{background:var(--date-special-background);border-color:var(--date-special-border-color)}.igx-day-item--selected.igx-day-item--first.igx-day-item--last.igx-day-item--current .igx-day-item__inner{color:var(--date-current-foreground)}.igx-day-item--selected.igx-day-item--first.igx-day-item--last.igx-day-item--current .igx-day-item__inner:before{background:var(--date-current-background);border-color:var(--date-current-border-color)}.igx-day-item--selected.igx-day-item--first.igx-day-item--last.igx-day-item--current .igx-day-item__inner:after{border-color:var(--date-current-foreground)}.igx-day-item--selected.igx-day-item--first.igx-day-item--last.igx-day-item--current .igx-day-item__inner:hover:before{background:var(--date-current-background);border-color:var(--date-current-border-color)}.igx-day-item--selected.igx-day-item--first.igx-day-item--last.igx-day-item--current .igx-day-item__inner:hover:after{border-color:var(--date-current-foreground)}.igx-day-item--selected.igx-day-item--first.igx-day-item--last.igx-day-item--current.igx-day-item--special .igx-day-item__inner{color:var(--date-current-foreground)}.igx-day-item--selected.igx-day-item--first.igx-day-item--last.igx-day-item--current.igx-day-item--special .igx-day-item__inner:before{background:var(--date-current-background);border-color:var(--date-current-border-color)}.igx-day-item--selected.igx-day-item--first.igx-day-item--last.igx-day-item--current.igx-day-item--special .igx-day-item__inner:after{background:var(--date-current-background);border-color:var(--date-current-foreground)}.igx-day-item--selected.igx-day-item--first.igx-day-item--last.igx-day-item--current.igx-day-item--special .igx-day-item__inner:hover:after{background:var(--date-current-background);border-color:var(--date-current-foreground)}.igx-day-item--selected.igx-day-item--first.igx-day-item--last.igx-day-item--current.igx-day-item--special.igx-day-item--active .igx-day-item__inner:after{background:var(--date-current-background);border-color:var(--date-current-foreground)}.igx-day-item--range-preview.igx-day-item--selected.igx-day-item--special.igx-day-item--first .igx-day-item__inner,.igx-day-item--range-preview.igx-day-item--selected.igx-day-item--special.igx-day-item--last .igx-day-item__inner{border-color:#0000}.igx-day-item--range-preview.igx-day-item--selected.igx-day-item--current.igx-day-item--first .igx-day-item__inner:before{background:var(--date-current-background);border-color:var(--date-current-border-color)}.igx-day-item--range-preview.igx-day-item--selected.igx-day-item--current.igx-day-item--last .igx-day-item__inner:before{background:var(--date-current-background);border-color:var(--date-current-border-color)}.igx-day-item--range.igx-day-item--selected{background:var(--date-selected-range-background)}.igx-day-item--range.igx-day-item--selected.igx-day-item--first{background:#0000;border-color:#0000}.igx-day-item--range.igx-day-item--selected.igx-day-item--first:before{background:#0000;border-inline-start:var(--_range-border-size) var(--_range-border-style) var(--date-range-border-color);border-inline-end:0;border-start-start-radius:var(--date-range-border-radius);border-end-start-radius:var(--date-range-border-radius);border-start-end-radius:0;border-end-end-radius:0}.igx-day-item--range.igx-day-item--selected.igx-day-item--first:after{background:var(--date-selected-range-background)}.igx-day-item--range.igx-day-item--selected.igx-day-item--last{background:#0000;border-color:#0000}.igx-day-item--range.igx-day-item--selected.igx-day-item--last:before{background:#0000;border-inline-end:var(--_range-border-size) var(--_range-border-style) var(--date-range-border-color);border-inline-start:0;border-start-end-radius:var(--date-range-border-radius);border-end-end-radius:var(--date-range-border-radius);border-start-start-radius:0;border-end-start-radius:0}.igx-day-item--range.igx-day-item--selected.igx-day-item--last:after{background:var(--date-selected-range-background)}.igx-day-item--range.igx-day-item--selected:not(.igx-day-item--range-preview,.igx-day-item--special,.igx-day-item--current,.igx-day-item--disabled) .igx-day-item__inner{color:var(--date-selected-range-foreground)}.igx-day-item--range.igx-day-item--selected:not(.igx-day-item--range-preview,.igx-day-item--special,.igx-day-item--current,.igx-day-item--disabled) .igx-day-item__inner:hover{color:var(--date-selected-range-hover-foreground);background:var(--date-selected-range-hover-background)}.igx-day-item--range.igx-day-item--selected:not(.igx-day-item--range-preview,.igx-day-item--special,.igx-day-item--current,.igx-day-item--disabled) .igx-day-item__inner:before{background:var(--date-selected-range-background)}.igx-day-item--range.igx-day-item--selected.igx-day-item--active:not(.igx-day-item--range-preview,.igx-day-item--special,.igx-day-item--current,.igx-day-item--disabled) .igx-day-item__inner{color:var(--date-selected-range-focus-foreground);background:var(--date-selected-range-focus-background)}.igx-day-item--range.igx-day-item--selected.igx-day-item--inactive:not(.igx-day-item--range-preview,.igx-day-item--special,.igx-day-item--current,.igx-day-item--disabled) .igx-day-item__inner{color:var(--date-selected-range-foreground)}.igx-day-item--range.igx-day-item--selected.igx-day-item--special:not(.igx-day-item--range-preview) .igx-day-item__inner{border-color:#0000}.igx-day-item--range.igx-day-item--selected.igx-day-item--current:not(.igx-day-item--range-preview) .igx-day-item__inner{border-color:#0000}.igx-day-item--range.igx-day-item--special:not(.igx-day-item--range-preview) .igx-day-item__inner{color:var(--date-special-range-foreground);background:#0000;border-radius:var(--date-range-border-radius)}.igx-day-item--range.igx-day-item--special:not(.igx-day-item--range-preview) .igx-day-item__inner:after{background:var(--date-special-range-background);border-color:var(--date-special-range-border-color)}.igx-day-item--range.igx-day-item--special:not(.igx-day-item--range-preview) .igx-day-item__inner:hover{color:var(--date-special-range-hover-foreground);background:var(--date-selected-range-hover-background)}.igx-day-item--range.igx-day-item--special:not(.igx-day-item--range-preview) .igx-day-item__inner:hover:after{background:var(--date-special-range-hover-background);border-color:var(--date-special-range-hover-border-color)}.igx-day-item--range.igx-day-item--special.igx-day-item--active:not(.igx-day-item--range-preview) .igx-day-item__inner{color:var(--date-special-range-focus-foreground);background:var(--date-selected-range-focus-background)}.igx-day-item--range.igx-day-item--special.igx-day-item--active:not(.igx-day-item--range-preview) .igx-day-item__inner:after{background:var(--date-special-range-focus-background);border-color:var(--date-special-range-focus-border-color)}.igx-day-item--range.igx-day-item--current:not(.igx-day-item--range-preview) .igx-day-item__inner{color:var(--date-selected-current-range-foreground);background:#0000;border-radius:var(--date-range-border-radius)}.igx-day-item--range.igx-day-item--current:not(.igx-day-item--range-preview) .igx-day-item__inner:before{background:var(--date-selected-current-range-background);border-color:var(--date-selected-current-border-color)}.igx-day-item--range.igx-day-item--current:not(.igx-day-item--range-preview) .igx-day-item__inner:hover{color:var(--date-selected-current-range-hover-foreground);background:var(--date-selected-range-hover-background)}.igx-day-item--range.igx-day-item--current:not(.igx-day-item--range-preview) .igx-day-item__inner:hover:before{background:var(--date-selected-current-range-hover-background);border-color:var(--date-selected-current-hover-border-color)}.igx-day-item--range.igx-day-item--current.igx-day-item--active:not(.igx-day-item--range-preview) .igx-day-item__inner{color:var(--date-selected-current-range-focus-foreground);background:var(--date-selected-range-focus-background)}.igx-day-item--range.igx-day-item--current.igx-day-item--active:not(.igx-day-item--range-preview) .igx-day-item__inner:before{background:var(--date-selected-current-range-focus-background);border-color:var(--date-selected-current-focus-border-color)}.igx-day-item--range.igx-day-item--current.igx-day-item--special:not(.igx-day-item--range-preview) .igx-day-item__inner{color:var(--date-selected-current-range-foreground)}.igx-day-item--range.igx-day-item--current.igx-day-item--special:not(.igx-day-item--range-preview) .igx-day-item__inner:before{background:var(--date-selected-current-range-background);border-color:var(--date-selected-current-border-color)}.igx-day-item--range.igx-day-item--current.igx-day-item--special:not(.igx-day-item--range-preview) .igx-day-item__inner:after{background:var(--date-selected-current-range-background);border-color:var(--date-selected-current-foreground)}.igx-day-item--range.igx-day-item--current.igx-day-item--special:not(.igx-day-item--range-preview) .igx-day-item__inner:hover{color:var(--date-selected-current-range-hover-foreground)}.igx-day-item--range.igx-day-item--current.igx-day-item--special:not(.igx-day-item--range-preview) .igx-day-item__inner:hover:before{background:var(--date-selected-current-range-hover-background);border-color:var(--date-selected-current-hover-border-color)}.igx-day-item--range.igx-day-item--current.igx-day-item--special:not(.igx-day-item--range-preview) .igx-day-item__inner:hover:after{background:var(--date-selected-current-range-hover-background);border-color:var(--date-selected-current-hover-foreground)}.igx-day-item--range.igx-day-item--current.igx-day-item--special.igx-day-item--active:not(.igx-day-item--range-preview) .igx-day-item__inner{color:var(--date-selected-current-range-focus-foreground)}.igx-day-item--range.igx-day-item--current.igx-day-item--special.igx-day-item--active:not(.igx-day-item--range-preview) .igx-day-item__inner:before{background:var(--date-selected-current-range-focus-background);border-color:var(--date-selected-current-focus-border-color)}.igx-day-item--range.igx-day-item--current.igx-day-item--special.igx-day-item--active:not(.igx-day-item--range-preview) .igx-day-item__inner:after{background:var(--date-selected-current-range-focus-background);border-color:var(--date-selected-current-focus-foreground)}.igx-day-item--range.igx-day-item--special.igx-day-item--disabled:not(.igx-day-item--range-preview) .igx-day-item__inner{border-color:#0000}.igx-day-item--range.igx-day-item--current.igx-day-item--disabled:not(.igx-day-item--range-preview) .igx-day-item__inner{border-color:#0000}.igx-day-item--range.igx-day-item--special.igx-day-item--current.igx-day-item--disabled:not(.igx-day-item--range-preview) .igx-day-item__inner:after{border-color:var(--date-current-foreground)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-day-label--week-number span{color:var(--week-number-foreground);background:var(--week-number-background)}.igx-day-label--week-number span:before{content:\"\";position:absolute;background:var(--week-number-background);border-inline:var(--_date-border-size) var(--_date-border-style) var(--week-number-background);inset-block-start:100%;height:.375rem;width:var(--_date-size)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-day-item{--_date-border-size: .125rem}.igx-day-item--label.igx-day-item--week-number span{border:0}.igx-day-item--label.igx-day-item--week-number span:before{height:.25rem;inset-block-start:100%;inset-inline-start:0;border:0}.igx-day-item--week-number span{border:0}.igx-day-item--week-number span:before{height:.25rem;inset-block-start:100%;inset-inline-start:0;border:0}.igx-day-item--special .igx-day-item__inner{font-weight:700}.igx-day-item--special .igx-day-item__inner:after{border-width:var(--_date-border-size)}.igx-day-item--current.igx-day-item--selected.igx-day-item--first .igx-day-item__inner{color:var(--date-selected-current-foreground);background:var(--date-selected-current-background);border-color:var(--date-selected-current-border-color)}.igx-day-item--current.igx-day-item--selected.igx-day-item--first .igx-day-item__inner:hover{color:var(--date-selected-current-hover-foreground);background:var(--date-selected-current-hover-background);border-color:var(--date-selected-current-hover-border-color)}.igx-day-item--current.igx-day-item--selected.igx-day-item--last .igx-day-item__inner{color:var(--date-selected-current-foreground);background:var(--date-selected-current-background);border-color:var(--date-selected-current-border-color)}.igx-day-item--current.igx-day-item--selected.igx-day-item--last .igx-day-item__inner:hover{color:var(--date-selected-current-hover-foreground);background:var(--date-selected-current-hover-background);border-color:var(--date-selected-current-hover-border-color)}.igx-day-item--current.igx-day-item--selected.igx-day-item--first.igx-day-item--active .igx-day-item__inner,.igx-day-item--current.igx-day-item--selected.igx-day-item--last.igx-day-item--active .igx-day-item__inner{color:var(--date-selected-current-focus-foreground);background:var(--date-selected-current-focus-background);border-color:var(--date-selected-current-focus-border-color)}.igx-day-item--current.igx-day-item--selected.igx-day-item--range.igx-day-item--first .igx-day-item__inner{color:var(--date-selected-current-foreground);background:var(--date-selected-current-background);border-color:var(--date-selected-current-border-color)}.igx-day-item--current.igx-day-item--selected.igx-day-item--range.igx-day-item--first .igx-day-item__inner:hover{color:var(--date-selected-current-hover-foreground);background:var(--date-selected-current-hover-background);border-color:var(--date-selected-current-hover-border-color)}.igx-day-item--current.igx-day-item--selected.igx-day-item--range.igx-day-item--last .igx-day-item__inner{color:var(--date-selected-current-foreground);background:var(--date-selected-current-background);border-color:var(--date-selected-current-border-color)}.igx-day-item--current.igx-day-item--selected.igx-day-item--range.igx-day-item--last .igx-day-item__inner:hover{color:var(--date-selected-current-hover-foreground);background:var(--date-selected-current-hover-background);border-color:var(--date-selected-current-hover-border-color)}.igx-day-item--current.igx-day-item--selected.igx-day-item--range.igx-day-item--first.igx-day-item--active .igx-day-item__inner,.igx-day-item--current.igx-day-item--selected.igx-day-item--range.igx-day-item--last.igx-day-item--active .igx-day-item__inner{color:var(--date-selected-current-focus-foreground);background:var(--date-selected-current-focus-background);border-color:var(--date-selected-current-focus-border-color)}.igx-day-item--special.igx-day-item--selected.igx-day-item--first .igx-day-item__inner{color:var(--date-selected-special-foreground);background:var(--date-selected-special-background)}.igx-day-item--special.igx-day-item--selected.igx-day-item--first .igx-day-item__inner:hover{color:var(--date-selected-special-hover-foreground);background:var(--date-selected-special-hover-background)}.igx-day-item--special.igx-day-item--selected.igx-day-item--first .igx-day-item__inner:after{border-radius:calc(var(--date-special-border-radius) - var(--_date-border-size))}.igx-day-item--special.igx-day-item--selected.igx-day-item--last .igx-day-item__inner{color:var(--date-selected-special-foreground);background:var(--date-selected-special-background)}.igx-day-item--special.igx-day-item--selected.igx-day-item--last .igx-day-item__inner:hover{color:var(--date-selected-special-hover-foreground);background:var(--date-selected-special-hover-background)}.igx-day-item--special.igx-day-item--selected.igx-day-item--last .igx-day-item__inner:after{border-radius:calc(var(--date-special-border-radius) - var(--_date-border-size))}.igx-day-item--special.igx-day-item--selected.igx-day-item--first.igx-day-item--active .igx-day-item__inner,.igx-day-item--special.igx-day-item--selected.igx-day-item--last.igx-day-item--active .igx-day-item__inner{color:var(--date-selected-special-focus-foreground);background:var(--date-selected-special-focus-background)}.igx-day-item--special.igx-day-item--selected:not(.igx-day-item--range,.igx-day-item--preview) .igx-day-item__inner:after{border-radius:calc(var(--date-special-border-radius) - var(--_date-border-size))}.igx-day-item--special.igx-day-item--current .igx-day-item__inner{border-radius:var(--date-current-border-radius)}.igx-day-item--special.igx-day-item--current .igx-day-item__inner:after{width:calc(var(--_date-inner-size) - .25rem);height:calc(var(--_date-inner-size) - .25rem);border-radius:calc(var(--date-special-border-radius) - var(--_date-border-size))}.igx-day-item--special.igx-day-item--current.igx-day-item--range .igx-day-item__inner{color:var(--date-special-foreground);background:var(--date-selected-current-background);border-color:var(--date-selected-current-border-color)}.igx-day-item--special.igx-day-item--current.igx-day-item--range .igx-day-item__inner:hover{color:var(--date-special-hover-foreground);background:var(--date-selected-current-hover-background);border-color:var(--date-selected-current-hover-border-color)}.igx-day-item--special.igx-day-item--current.igx-day-item--range.igx-day-item--active .igx-day-item__inner{color:var(--date-special-focus-foreground);background:var(--date-selected-current-focus-background);border-color:var(--date-selected-current-focus-border-color)}.igx-day-item--special.igx-day-item--current.igx-day-item--range:not(.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner{color:var(--date-special-range-foreground);background:var(--date-selected-current-range-background);border-color:var(--date-selected-current-border-color)}.igx-day-item--special.igx-day-item--current.igx-day-item--range:not(.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner:hover{color:var(--date-special-range-hover-foreground);background:var(--date-selected-current-range-hover-background);border-color:var(--date-selected-current-hover-border-color)}.igx-day-item--special.igx-day-item--current.igx-day-item--range.igx-day-item--active:not(.igx-day-item--first,.igx-day-item--last) .igx-day-item__inner{color:var(--date-special-range-focus-foreground);background:var(--date-selected-current-range-focus-background);border-color:var(--date-selected-current-focus-border-color)}.igx-day-item--special.igx-day-item--current.igx-day-item--range.igx-day-item--first .igx-day-item__inner{color:var(--date-selected-special-foreground);background:var(--date-selected-current-background);border-color:var(--date-selected-current-border-color)}.igx-day-item--special.igx-day-item--current.igx-day-item--range.igx-day-item--first .igx-day-item__inner:hover{color:var(--date-selected-special-hover-foreground);background:var(--date-selected-current-hover-background);border-color:var(--date-selected-current-hover-border-color)}.igx-day-item--special.igx-day-item--current.igx-day-item--range.igx-day-item--last .igx-day-item__inner{color:var(--date-selected-special-foreground);background:var(--date-selected-current-background);border-color:var(--date-selected-current-border-color)}.igx-day-item--special.igx-day-item--current.igx-day-item--range.igx-day-item--last .igx-day-item__inner:hover{color:var(--date-selected-special-hover-foreground);background:var(--date-selected-current-hover-background);border-color:var(--date-selected-current-hover-border-color)}.igx-day-item--special.igx-day-item--current.igx-day-item--range.igx-day-item--active.igx-day-item--first .igx-day-item__inner,.igx-day-item--special.igx-day-item--current.igx-day-item--range.igx-day-item--active.igx-day-item--last .igx-day-item__inner{color:var(--date-selected-special-focus-foreground);background:var(--date-selected-current-focus-background);border-color:var(--date-selected-current-focus-border-color)}.igx-day-item--special.igx-day-item--current:not(.igx-day-item--range) .igx-day-item__inner:after{width:calc(var(--_date-inner-size) - .25rem);height:calc(var(--_date-inner-size) - .25rem);border-radius:calc(var(--date-special-border-radius) - var(--_date-border-size))}.igx-day-item--special.igx-day-item--current.igx-day-item--active:not(.igx-day-item--range) .igx-day-item__inner{color:var(--date-selected-special-focus-foreground);background:var(--date-selected-current-focus-background);border-color:var(--date-selected-special-focus-border-color)}.igx-day-item--special.igx-day-item--current:not(.igx-day-item--selected,.igx-day-item--range) .igx-day-item__inner{color:var(--date-special-foreground);background:var(--date-current-background);border-color:var(--date-current-border-color)}.igx-day-item--special.igx-day-item--current:not(.igx-day-item--selected,.igx-day-item--range) .igx-day-item__inner:after{border-color:var(--date-special-border-color)}.igx-day-item--special.igx-day-item--current:not(.igx-day-item--selected,.igx-day-item--range) .igx-day-item__inner:hover{color:var(--date-special-hover-foreground);background:var(--date-current-hover-background);border-color:var(--date-current-hover-border-color)}.igx-day-item--special.igx-day-item--current:not(.igx-day-item--selected,.igx-day-item--range) .igx-day-item__inner:hover:after{border-color:var(--date-special-hover-border-color)}.igx-day-item--special.igx-day-item--current.igx-day-item--active:not(.igx-day-item--selected,.igx-day-item--range) .igx-day-item__inner{color:var(--date-special-focus-foreground);background:var(--date-current-focus-background);border-color:var(--date-current-focus-border-color)}.igx-day-item--special.igx-day-item--current.igx-day-item--active:not(.igx-day-item--selected,.igx-day-item--range) .igx-day-item__inner:after{border-color:var(--date-special-focus-border-color)}.igx-day-item--special.igx-day-item--current.igx-day-item--selected:not(.igx-day-item--range) .igx-day-item__inner{color:var(--date-selected-special-foreground);background:var(--date-selected-current-background);border-color:var(--date-selected-current-border-color)}.igx-day-item--special.igx-day-item--current.igx-day-item--selected:not(.igx-day-item--range) .igx-day-item__inner:after{border-color:var(--date-selected-special-border-color)}.igx-day-item--special.igx-day-item--current.igx-day-item--selected:not(.igx-day-item--range) .igx-day-item__inner:hover{color:var(--date-selected-special-hover-foreground);background:var(--date-selected-current-hover-background);border-color:var(--date-selected-current-hover-border-color)}.igx-day-item--special.igx-day-item--current.igx-day-item--selected:not(.igx-day-item--range) .igx-day-item__inner:hover:after{border-color:var(--date-selected-special-hover-border-color)}.igx-day-item--special.igx-day-item--current.igx-day-item--selected.igx-day-item--active:not(.igx-day-item--range) .igx-day-item__inner{color:var(--date-selected-special-focus-foreground);background:var(--date-selected-current-focus-background);border-color:var(--date-selected-current-focus-border-color)}.igx-day-item--special.igx-day-item--current.igx-day-item--selected.igx-day-item--active:not(.igx-day-item--range) .igx-day-item__inner:after{border-color:var(--date-selected-special-focus-border-color)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-day-label__inner--week-number{border:0}.igx-day-label__inner--week-number:before{height:.25rem;inset-block-start:100%;inset-inline-start:0;border:0}.igx-day-label--week-number span{color:var(--week-number-foreground);background:var(--week-number-background);border:0}.igx-day-label--week-number span:before{content:\"\";position:absolute;background:var(--week-number-background);border-inline:var(--_date-border-size) var(--_date-border-style) var(--week-number-background);inset-block-start:100%;height:.25rem;width:var(--_date-size);inset-inline-start:0;border:0}}}\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, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDaysViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDaysViewComponent, decorators: [{
             type: Component,
             args: [{ providers: [
                         {
@@ -2590,10 +2557,10 @@ class IgxMonthViewSlotsCalendar {
     transform(monthViews) {
         return new Array(monthViews);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxMonthViewSlotsCalendar, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxMonthViewSlotsCalendar, isStandalone: true, name: "IgxMonthViewSlots" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxMonthViewSlotsCalendar, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxMonthViewSlotsCalendar, isStandalone: true, name: "IgxMonthViewSlots" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxMonthViewSlotsCalendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxMonthViewSlotsCalendar, decorators: [{
             type: Pipe,
             args: [{
                     name: 'IgxMonthViewSlots',
@@ -2611,10 +2578,10 @@ class IgxGetViewDateCalendar {
         const date = this.calendar.timedelta(viewDate, 'month', index);
         return wholeDate ? date : date.getMonth();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGetViewDateCalendar, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxGetViewDateCalendar, isStandalone: true, name: "IgxGetViewDate" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGetViewDateCalendar, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxGetViewDateCalendar, isStandalone: true, name: "IgxGetViewDate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxGetViewDateCalendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxGetViewDateCalendar, decorators: [{
             type: Pipe,
             args: [{
                     name: 'IgxGetViewDate',
@@ -2721,7 +2688,6 @@ class IgxCalendarComponent extends IgxCalendarBaseDirective {
          * @internal
          */
         this.startPrevPageScroll = (isKeydownTrigger = false) => {
-            this.startPageScroll$.next();
             this.pageScrollDirection = "prev" /* ScrollDirection.PREV */;
             this.previousPage(isKeydownTrigger);
         };
@@ -2732,7 +2698,6 @@ class IgxCalendarComponent extends IgxCalendarBaseDirective {
          * @internal
          */
         this.startNextPageScroll = (isKeydownTrigger = false) => {
-            this.startPageScroll$.next();
             this.pageScrollDirection = "next" /* ScrollDirection.NEXT */;
             this.nextPage(isKeydownTrigger);
         };
@@ -2744,8 +2709,6 @@ class IgxCalendarComponent extends IgxCalendarBaseDirective {
          */
         this.stopPageScroll = (event) => {
             event.stopPropagation();
-            this.stopPageScroll$.next(true);
-            this.stopPageScroll$.complete();
             if (this.platform.isActivationKey(event)) {
                 this.resetActiveDate(this.viewDate);
             }
@@ -2940,19 +2903,6 @@ class IgxCalendarComponent extends IgxCalendarBaseDirective {
             .set("End", this.onEnd)
             .set("PageUp", this.handlePageUp)
             .set("PageDown", this.handlePageDown);
-        this.startPageScroll$.pipe(takeUntil(this.stopPageScroll$), switchMap(() => this.scrollPage$.pipe(skipLast(1), debounce(() => interval(300)), takeUntil(this.stopPageScroll$)))).subscribe(() => {
-            switch (this.pageScrollDirection) {
-                case "prev" /* ScrollDirection.PREV */:
-                    this.previousPage();
-                    break;
-                case "next" /* ScrollDirection.NEXT */:
-                    this.nextPage();
-                    break;
-                case "none" /* ScrollDirection.NONE */:
-                default:
-                    break;
-            }
-        });
         this.activeView$.subscribe((view) => {
             this.activeViewChanged.emit(view);
             this.viewDateChanged.emit({
@@ -3195,30 +3145,6 @@ class IgxCalendarComponent extends IgxCalendarBaseDirective {
             }
         }
     }
-    /**
-     * @hidden
-     * @internal
-     */
-    onYearsViewClick(event) {
-        if (!this.platform.isBrowser) {
-            return;
-        }
-        const path = event.composed ? event.composedPath() : [event.target];
-        const years = this.dacadeView.viewItems.toArray();
-        const validTarget = years.some(year => path.includes(year.nativeElement));
-        if (validTarget) {
-            this.activeView = IgxCalendarView.Year;
-        }
-    }
-    /**
-     * @hidden
-     * @internal
-     */
-    onYearsViewKeydown(event) {
-        if (this.platform.isActivationKey(event)) {
-            this.activeView = IgxCalendarView.Year;
-        }
-    }
     /**
      * @hidden
      * @internal
@@ -3396,25 +3322,23 @@ class IgxCalendarComponent extends IgxCalendarBaseDirective {
      * @hidden
      * @internal
      */
-    generateContext(value, i) {
-        const construct = (date, index) => ({
-            index: index,
-            date,
-            ...formatToParts(date, this.locale, this.formatOptions, [
-                "era",
-                "year",
-                "month",
-                "day",
-                "weekday",
-            ]),
-        });
-        const formatObject = Array.isArray(value)
-            ? value.map((date, index) => construct(date, index))
-            : construct(value, i);
-        return { $implicit: formatObject };
+    generateContext(date, index) {
+        return {
+            $implicit: {
+                index: index,
+                date,
+                ...formatToParts(date, this.locale, this.formatOptions, [
+                    "era",
+                    "year",
+                    "month",
+                    "day",
+                    "weekday",
+                ]),
+            }
+        };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCalendarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxCalendarComponent, isStandalone: true, selector: "igx-calendar", inputs: { id: "id", hasHeader: ["hasHeader", "hasHeader", booleanAttribute], vertical: ["vertical", "vertical", booleanAttribute], orientation: "orientation", headerOrientation: "headerOrientation", monthsViewNumber: "monthsViewNumber", showWeekNumbers: ["showWeekNumbers", "showWeekNumbers", booleanAttribute] }, host: { listeners: { "mousedown": "onMouseDown($event)" }, properties: { "attr.id": "this.id", "class.igx-calendar--vertical": "this.styleVerticalClass", "class.igx-calendar": "this.styleClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCalendarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: IgxCalendarComponent, isStandalone: true, selector: "igx-calendar", inputs: { id: "id", hasHeader: ["hasHeader", "hasHeader", booleanAttribute], vertical: ["vertical", "vertical", booleanAttribute], orientation: "orientation", headerOrientation: "headerOrientation", monthsViewNumber: "monthsViewNumber", showWeekNumbers: ["showWeekNumbers", "showWeekNumbers", booleanAttribute] }, host: { listeners: { "mousedown": "onMouseDown($event)" }, properties: { "attr.id": "this.id", "class.igx-calendar--vertical": "this.styleVerticalClass", "class.igx-calendar": "this.styleClass" } }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -3424,9 +3348,9 @@ 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\" data-no-typography>\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\" data-no-typography>\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", styles: ["@layer ig.base{.igx-calendar{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--dropdown-size: var(--component-size);display:flex;flex-flow:column nowrap;width:100%;color:var(--content-foreground);background:var(--content-background);box-shadow:0 0 0 .0625rem var(--border-color);border-radius:var(--border-radius);min-width:max(var(--is-large, 1)*max(22.5rem,-1 * 22.5rem),var(--is-medium, 1)*max(19.625rem,-1 * 19.625rem),var(--is-small, 1)*max(18.125rem,-1 * 18.125rem));overflow:hidden;outline:none}.igx-calendar .igx-days-view,.igx-calendar .igx-calendar-view{background:inherit;color:inherit;box-shadow:none}.igx-calendar .igx-days-view,.igx-calendar .igx-calendar-view,.igx-calendar .igx-calendar-picker{border-radius:0}.igx-calendar__header{display:flex;flex-direction:column;color:var(--header-foreground);background:var(--header-background);position:relative}.igx-calendar__wrapper{display:flex;width:100%;flex-direction:column;outline-style:none}.igx-calendar__wrapper--vertical{display:grid;grid-template-rows:repeat(calc(var(--calendar-months) * 2),auto)}.igx-calendar__wrapper--vertical .igx-days-view{grid-row:var(--calendar-row-start)}.igx-calendar__pickers{display:flex;flex-grow:1;grid-row:var(--calendar-row-start)}.igx-calendar__pickers:focus-visible{outline:none}.igx-calendar__pickers>*{flex-grow:1}.igx-calendar__pickers--days{display:grid;grid-template-columns:repeat(var(--calendar-months),1fr)}.igx-calendar__pickers--vertical{display:contents}.igx-calendar__body{display:grid;grid-template-columns:repeat(var(--calendar-months),1fr)}.igx-calendar__body--vertical{display:contents}.igx-calendar__header-year{color:currentColor}.igx-calendar__header-date{display:flex}.igx-calendar__header-date>span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.igx-calendar--vertical{flex-flow:row nowrap}.igx-calendar--vertical .igx-calendar__header-date{flex-wrap:wrap}.igx-calendar__aria-off-screen{position:absolute!important;border:none!important;height:1px!important;width:1px!important;inset-inline-start:0!important;top:0!important;overflow:hidden!important;padding:0!important;margin:0!important;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.igx-calendar__aria-off-screen:focus{outline:none}}@layer ig.material{@container style(--ig-theme: material){.igx-calendar__header{padding:1rem 1.5rem;gap:1.75rem}.igx-calendar__pickers--vertical .igx-calendar-picker__prev,.igx-calendar__pickers--vertical .igx-calendar-picker__next{transform:rotate(90deg)}.igx-calendar__pickers--days{gap:2.5rem}.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view+.igx-days-view{padding-inline-start:1.375rem}.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view:first-child,.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view:nth-child(2n){padding-inline-end:1.375rem}.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view:last-child{padding-inline-end:max(var(--is-large, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-calendar__header-year{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);margin:0}.igx-calendar__header-date{font-family:var(--ig-h4-font-family, var(--ig-font-family));font-size:var(--ig-h4-font-size);font-weight:var(--ig-h4-font-weight);font-style:var(--ig-h4-font-style);line-height:var(--ig-h4-line-height);letter-spacing:var(--ig-h4-letter-spacing);text-transform:var(--ig-h4-text-transform);margin-top:var(--ig-h4-margin-top);margin-bottom:var(--ig-h4-margin-bottom);margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:10.5rem;width:10.5rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-calendar__header{padding:1rem}.igx-calendar__pickers--vertical .igx-calendar-picker__prev,.igx-calendar__pickers--vertical .igx-calendar-picker__next{transform:rotate(90deg)}.igx-calendar__pickers:not(.igx-calendar__pickers--days){border-block-end:.0625rem solid var(--border-color)}.igx-calendar__header-year{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);min-height:1.5rem;margin:0}.igx-calendar__header-date{font-family:var(--ig-h4-font-family, var(--ig-font-family));font-size:var(--ig-h4-font-size);font-weight:var(--ig-h4-font-weight);font-style:var(--ig-h4-font-style);line-height:var(--ig-h4-line-height);letter-spacing:var(--ig-h4-letter-spacing);text-transform:var(--ig-h4-text-transform);margin-top:var(--ig-h4-margin-top);margin-bottom:var(--ig-h4-margin-bottom);padding-block-end:.5rem;margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:10.5rem;width:10.5rem}.igx-calendar--vertical .igx-calendar__header-date{padding-block-end:.5rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-calendar__header{padding:1rem}.igx-calendar__pickers--days{gap:2.5rem}.igx-calendar__body{-moz-column-gap:2.75rem;column-gap:2.75rem}.igx-calendar__header-year{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);margin:0}.igx-calendar__header-date{font-family:var(--ig-h4-font-family, var(--ig-font-family));font-size:var(--ig-h4-font-size);font-weight:var(--ig-h4-font-weight);font-style:var(--ig-h4-font-style);line-height:var(--ig-h4-line-height);letter-spacing:var(--ig-h4-letter-spacing);text-transform:var(--ig-h4-text-transform);margin-top:var(--ig-h4-margin-top);margin-bottom:var(--ig-h4-margin-bottom);margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:10.5rem;width:10.5rem}.igx-calendar--vertical .igx-calendar__header-date{margin:0}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-calendar__header{padding:1rem;gap:.125rem}.igx-calendar__header:after{content:\"\";position:absolute;background:var(--border-color);inset-block-start:calc(100% - .0625rem);inset-inline-start:0;height:.0625rem;width:100%}.igx-calendar__pickers--vertical .igx-calendar-picker__prev,.igx-calendar__pickers--vertical .igx-calendar-picker__next{transform:rotate(90deg)}.igx-calendar__pickers--days{gap:2.5rem}.igx-calendar__body{-moz-column-gap:2.75rem;column-gap:2.75rem}.igx-calendar__header-year{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin:0}.igx-calendar__header-date{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom);margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:8.5rem;width:8.5rem}.igx-calendar--vertical .igx-calendar__header:after{inset-inline-start:calc(100% - .0625rem);inset-block-start:0;height:100%;width:.0625rem}.igx-calendar--vertical .igx-calendar__header-date{margin:0}}}\n", "@layer ig.base{.igx-calendar-picker{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;position:relative;color:var(--picker-foreground);background:var(--picker-background);margin:0}.igx-calendar-picker:focus,.igx-calendar-picker:focus-within{outline:none}.igx-calendar-picker__dates{display:flex;gap:.25rem}.igx-calendar-picker__nav{display:flex;position:absolute;inset-inline-end:1rem}.igx-calendar-picker__date{color:var(--picker-foreground);text-align:center;outline:none;transition:color .15s ease-in-out 0s}.igx-calendar-picker__date:hover{color:var(--picker-hover-foreground);cursor:pointer}.igx-calendar-picker__date:focus{color:var(--picker-focus-foreground)}.igx-calendar-picker .igx-calendar-picker__next,.igx-calendar-picker .igx-calendar-picker__prev{display:flex;align-items:center;justify-content:center;color:var(--navigation-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none;cursor:pointer}.igx-calendar-picker .igx-calendar-picker__next:hover,.igx-calendar-picker .igx-calendar-picker__prev:hover{color:var(--navigation-hover-color)}.igx-calendar-picker .igx-calendar-picker__next:focus,.igx-calendar-picker .igx-calendar-picker__prev:focus{color:var(--navigation-focus-color)}[dir=rtl] .igx-calendar-picker .igx-calendar-picker__next,[dir=rtl] .igx-calendar-picker .igx-calendar-picker__prev{transform:scaleX(-1)}}@layer ig.material{@container style(--ig-theme: material){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1.5rem}.igx-calendar-picker__nav{gap:1.5rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);margin:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:1.5rem}.igx-calendar-picker__prev,.igx-calendar-picker__next{top:.25rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-calendar-picker{--ig-icon-size: .875rem;height:3.125rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:.5rem}.igx-calendar-picker__prev,.igx-calendar-picker__next{padding:.3125rem}}}\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" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+        ], 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; 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\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\" data-no-typography>\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\" data-no-typography>\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", styles: ["@layer ig.base{.igx-calendar{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--dropdown-size: var(--component-size);display:flex;flex-flow:column nowrap;width:100%;color:var(--content-foreground);background:var(--content-background);box-shadow:0 0 0 .0625rem var(--border-color);border-radius:var(--border-radius);min-width:max(var(--is-large, 1)*max(22.5rem,-1 * 22.5rem),var(--is-medium, 1)*max(19.625rem,-1 * 19.625rem),var(--is-small, 1)*max(18.125rem,-1 * 18.125rem));overflow:hidden;outline:none}.igx-calendar .igx-days-view,.igx-calendar .igx-calendar-view{background:inherit;color:inherit;box-shadow:none}.igx-calendar .igx-days-view,.igx-calendar .igx-calendar-view,.igx-calendar .igx-calendar-picker{border-radius:0}.igx-calendar__header{display:flex;flex-direction:column;color:var(--header-foreground);background:var(--header-background);position:relative}.igx-calendar__wrapper{display:flex;width:100%;flex-direction:column;outline-style:none}.igx-calendar__wrapper--vertical{display:grid;grid-template-rows:repeat(calc(var(--calendar-months) * 2),auto)}.igx-calendar__wrapper--vertical .igx-days-view{grid-row:var(--calendar-row-start)}.igx-calendar__pickers{display:flex;flex-grow:1;grid-row:var(--calendar-row-start)}.igx-calendar__pickers:focus-visible{outline:none}.igx-calendar__pickers>*{flex-grow:1}.igx-calendar__pickers--days{display:grid;grid-template-columns:repeat(var(--calendar-months),1fr)}.igx-calendar__pickers--vertical{display:contents}.igx-calendar__body{display:grid;grid-template-columns:repeat(var(--calendar-months),1fr)}.igx-calendar__body--vertical{display:contents}.igx-calendar__header-year{color:currentColor}.igx-calendar__header-date{display:flex}.igx-calendar__header-date>span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.igx-calendar--vertical{flex-flow:row nowrap}.igx-calendar--vertical .igx-calendar__header-date{flex-wrap:wrap}.igx-calendar__aria-off-screen{position:absolute!important;border:none!important;height:1px!important;width:1px!important;inset-inline-start:0!important;top:0!important;overflow:hidden!important;padding:0!important;margin:0!important;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.igx-calendar__aria-off-screen:focus{outline:none}}@layer ig.material{@container style(--ig-theme: material){.igx-calendar__header{padding:1rem 1.5rem;gap:1.75rem}.igx-calendar__pickers--vertical .igx-calendar-picker__prev,.igx-calendar__pickers--vertical .igx-calendar-picker__next{transform:rotate(90deg)}.igx-calendar__pickers--days{gap:2.5rem}.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view+.igx-days-view{padding-inline-start:1.375rem}.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view:first-child,.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view:nth-child(2n){padding-inline-end:1.375rem}.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view:last-child{padding-inline-end:max(var(--is-large, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-calendar__header-year{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);margin:0}.igx-calendar__header-date{font-family:var(--ig-h4-font-family, var(--ig-font-family));font-size:var(--ig-h4-font-size);font-weight:var(--ig-h4-font-weight);font-style:var(--ig-h4-font-style);line-height:var(--ig-h4-line-height);letter-spacing:var(--ig-h4-letter-spacing);text-transform:var(--ig-h4-text-transform);margin-top:var(--ig-h4-margin-top);margin-bottom:var(--ig-h4-margin-bottom);margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:10.5rem;width:10.5rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-calendar__header{padding:1rem}.igx-calendar__pickers--vertical .igx-calendar-picker__prev,.igx-calendar__pickers--vertical .igx-calendar-picker__next{transform:rotate(90deg)}.igx-calendar__pickers:not(.igx-calendar__pickers--days){border-block-end:.0625rem solid var(--border-color)}.igx-calendar__header-year{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);min-height:1.5rem;margin:0}.igx-calendar__header-date{font-family:var(--ig-h4-font-family, var(--ig-font-family));font-size:var(--ig-h4-font-size);font-weight:var(--ig-h4-font-weight);font-style:var(--ig-h4-font-style);line-height:var(--ig-h4-line-height);letter-spacing:var(--ig-h4-letter-spacing);text-transform:var(--ig-h4-text-transform);margin-top:var(--ig-h4-margin-top);margin-bottom:var(--ig-h4-margin-bottom);padding-block-end:.5rem;margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:10.5rem;width:10.5rem}.igx-calendar--vertical .igx-calendar__header-date{padding-block-end:.5rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-calendar__header{padding:1rem}.igx-calendar__pickers--days{gap:2.5rem}.igx-calendar__body{-moz-column-gap:2.75rem;column-gap:2.75rem}.igx-calendar__header-year{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);margin:0}.igx-calendar__header-date{font-family:var(--ig-h4-font-family, var(--ig-font-family));font-size:var(--ig-h4-font-size);font-weight:var(--ig-h4-font-weight);font-style:var(--ig-h4-font-style);line-height:var(--ig-h4-line-height);letter-spacing:var(--ig-h4-letter-spacing);text-transform:var(--ig-h4-text-transform);margin-top:var(--ig-h4-margin-top);margin-bottom:var(--ig-h4-margin-bottom);margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:10.5rem;width:10.5rem}.igx-calendar--vertical .igx-calendar__header-date{margin:0}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-calendar__header{padding:1rem;gap:.125rem}.igx-calendar__header:after{content:\"\";position:absolute;background:var(--border-color);inset-block-start:calc(100% - .0625rem);inset-inline-start:0;height:.0625rem;width:100%}.igx-calendar__pickers--vertical .igx-calendar-picker__prev,.igx-calendar__pickers--vertical .igx-calendar-picker__next{transform:rotate(90deg)}.igx-calendar__pickers--days{gap:2.5rem}.igx-calendar__body{-moz-column-gap:2.75rem;column-gap:2.75rem}.igx-calendar__header-year{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin:0}.igx-calendar__header-date{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom);margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:8.5rem;width:8.5rem}.igx-calendar--vertical .igx-calendar__header:after{inset-inline-start:calc(100% - .0625rem);inset-block-start:0;height:100%;width:.0625rem}.igx-calendar--vertical .igx-calendar__header-date{margin:0}}}\n", "@layer ig.base{.igx-calendar-picker{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;position:relative;color:var(--picker-foreground);background:var(--picker-background);margin:0}.igx-calendar-picker:focus,.igx-calendar-picker:focus-within{outline:none}.igx-calendar-picker__dates{display:flex;gap:.25rem}.igx-calendar-picker__nav{display:flex;position:absolute;inset-inline-end:1rem}.igx-calendar-picker__date{color:var(--picker-foreground);text-align:center;outline:none;transition:color .15s ease-in-out 0s}.igx-calendar-picker__date:hover{color:var(--picker-hover-foreground);cursor:pointer}.igx-calendar-picker__date:focus{color:var(--picker-focus-foreground)}.igx-calendar-picker .igx-calendar-picker__next,.igx-calendar-picker .igx-calendar-picker__prev{display:flex;align-items:center;justify-content:center;color:var(--navigation-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none;cursor:pointer}.igx-calendar-picker .igx-calendar-picker__next:hover,.igx-calendar-picker .igx-calendar-picker__prev:hover{color:var(--navigation-hover-color)}.igx-calendar-picker .igx-calendar-picker__next:focus,.igx-calendar-picker .igx-calendar-picker__prev:focus{color:var(--navigation-focus-color)}[dir=rtl] .igx-calendar-picker .igx-calendar-picker__next,[dir=rtl] .igx-calendar-picker .igx-calendar-picker__prev{transform:scaleX(-1)}}@layer ig.material{@container style(--ig-theme: material){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1.5rem}.igx-calendar-picker__nav{gap:1.5rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);margin:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:1.5rem}.igx-calendar-picker__prev,.igx-calendar-picker__next{top:.25rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-calendar-picker{--ig-icon-size: .875rem;height:3.125rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:.5rem}.igx-calendar-picker__prev,.igx-calendar-picker__next{padding:.3125rem}}}\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" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCalendarComponent, decorators: [{
             type: Component,
             args: [{ providers: [
                         {
@@ -3448,7 +3372,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         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\" data-no-typography>\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\" data-no-typography>\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", styles: ["@layer ig.base{.igx-calendar{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--dropdown-size: var(--component-size);display:flex;flex-flow:column nowrap;width:100%;color:var(--content-foreground);background:var(--content-background);box-shadow:0 0 0 .0625rem var(--border-color);border-radius:var(--border-radius);min-width:max(var(--is-large, 1)*max(22.5rem,-1 * 22.5rem),var(--is-medium, 1)*max(19.625rem,-1 * 19.625rem),var(--is-small, 1)*max(18.125rem,-1 * 18.125rem));overflow:hidden;outline:none}.igx-calendar .igx-days-view,.igx-calendar .igx-calendar-view{background:inherit;color:inherit;box-shadow:none}.igx-calendar .igx-days-view,.igx-calendar .igx-calendar-view,.igx-calendar .igx-calendar-picker{border-radius:0}.igx-calendar__header{display:flex;flex-direction:column;color:var(--header-foreground);background:var(--header-background);position:relative}.igx-calendar__wrapper{display:flex;width:100%;flex-direction:column;outline-style:none}.igx-calendar__wrapper--vertical{display:grid;grid-template-rows:repeat(calc(var(--calendar-months) * 2),auto)}.igx-calendar__wrapper--vertical .igx-days-view{grid-row:var(--calendar-row-start)}.igx-calendar__pickers{display:flex;flex-grow:1;grid-row:var(--calendar-row-start)}.igx-calendar__pickers:focus-visible{outline:none}.igx-calendar__pickers>*{flex-grow:1}.igx-calendar__pickers--days{display:grid;grid-template-columns:repeat(var(--calendar-months),1fr)}.igx-calendar__pickers--vertical{display:contents}.igx-calendar__body{display:grid;grid-template-columns:repeat(var(--calendar-months),1fr)}.igx-calendar__body--vertical{display:contents}.igx-calendar__header-year{color:currentColor}.igx-calendar__header-date{display:flex}.igx-calendar__header-date>span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.igx-calendar--vertical{flex-flow:row nowrap}.igx-calendar--vertical .igx-calendar__header-date{flex-wrap:wrap}.igx-calendar__aria-off-screen{position:absolute!important;border:none!important;height:1px!important;width:1px!important;inset-inline-start:0!important;top:0!important;overflow:hidden!important;padding:0!important;margin:0!important;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.igx-calendar__aria-off-screen:focus{outline:none}}@layer ig.material{@container style(--ig-theme: material){.igx-calendar__header{padding:1rem 1.5rem;gap:1.75rem}.igx-calendar__pickers--vertical .igx-calendar-picker__prev,.igx-calendar__pickers--vertical .igx-calendar-picker__next{transform:rotate(90deg)}.igx-calendar__pickers--days{gap:2.5rem}.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view+.igx-days-view{padding-inline-start:1.375rem}.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view:first-child,.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view:nth-child(2n){padding-inline-end:1.375rem}.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view:last-child{padding-inline-end:max(var(--is-large, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-calendar__header-year{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);margin:0}.igx-calendar__header-date{font-family:var(--ig-h4-font-family, var(--ig-font-family));font-size:var(--ig-h4-font-size);font-weight:var(--ig-h4-font-weight);font-style:var(--ig-h4-font-style);line-height:var(--ig-h4-line-height);letter-spacing:var(--ig-h4-letter-spacing);text-transform:var(--ig-h4-text-transform);margin-top:var(--ig-h4-margin-top);margin-bottom:var(--ig-h4-margin-bottom);margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:10.5rem;width:10.5rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-calendar__header{padding:1rem}.igx-calendar__pickers--vertical .igx-calendar-picker__prev,.igx-calendar__pickers--vertical .igx-calendar-picker__next{transform:rotate(90deg)}.igx-calendar__pickers:not(.igx-calendar__pickers--days){border-block-end:.0625rem solid var(--border-color)}.igx-calendar__header-year{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);min-height:1.5rem;margin:0}.igx-calendar__header-date{font-family:var(--ig-h4-font-family, var(--ig-font-family));font-size:var(--ig-h4-font-size);font-weight:var(--ig-h4-font-weight);font-style:var(--ig-h4-font-style);line-height:var(--ig-h4-line-height);letter-spacing:var(--ig-h4-letter-spacing);text-transform:var(--ig-h4-text-transform);margin-top:var(--ig-h4-margin-top);margin-bottom:var(--ig-h4-margin-bottom);padding-block-end:.5rem;margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:10.5rem;width:10.5rem}.igx-calendar--vertical .igx-calendar__header-date{padding-block-end:.5rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-calendar__header{padding:1rem}.igx-calendar__pickers--days{gap:2.5rem}.igx-calendar__body{-moz-column-gap:2.75rem;column-gap:2.75rem}.igx-calendar__header-year{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);margin:0}.igx-calendar__header-date{font-family:var(--ig-h4-font-family, var(--ig-font-family));font-size:var(--ig-h4-font-size);font-weight:var(--ig-h4-font-weight);font-style:var(--ig-h4-font-style);line-height:var(--ig-h4-line-height);letter-spacing:var(--ig-h4-letter-spacing);text-transform:var(--ig-h4-text-transform);margin-top:var(--ig-h4-margin-top);margin-bottom:var(--ig-h4-margin-bottom);margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:10.5rem;width:10.5rem}.igx-calendar--vertical .igx-calendar__header-date{margin:0}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-calendar__header{padding:1rem;gap:.125rem}.igx-calendar__header:after{content:\"\";position:absolute;background:var(--border-color);inset-block-start:calc(100% - .0625rem);inset-inline-start:0;height:.0625rem;width:100%}.igx-calendar__pickers--vertical .igx-calendar-picker__prev,.igx-calendar__pickers--vertical .igx-calendar-picker__next{transform:rotate(90deg)}.igx-calendar__pickers--days{gap:2.5rem}.igx-calendar__body{-moz-column-gap:2.75rem;column-gap:2.75rem}.igx-calendar__header-year{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin:0}.igx-calendar__header-date{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom);margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:8.5rem;width:8.5rem}.igx-calendar--vertical .igx-calendar__header:after{inset-inline-start:calc(100% - .0625rem);inset-block-start:0;height:100%;width:.0625rem}.igx-calendar--vertical .igx-calendar__header-date{margin:0}}}\n", "@layer ig.base{.igx-calendar-picker{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;position:relative;color:var(--picker-foreground);background:var(--picker-background);margin:0}.igx-calendar-picker:focus,.igx-calendar-picker:focus-within{outline:none}.igx-calendar-picker__dates{display:flex;gap:.25rem}.igx-calendar-picker__nav{display:flex;position:absolute;inset-inline-end:1rem}.igx-calendar-picker__date{color:var(--picker-foreground);text-align:center;outline:none;transition:color .15s ease-in-out 0s}.igx-calendar-picker__date:hover{color:var(--picker-hover-foreground);cursor:pointer}.igx-calendar-picker__date:focus{color:var(--picker-focus-foreground)}.igx-calendar-picker .igx-calendar-picker__next,.igx-calendar-picker .igx-calendar-picker__prev{display:flex;align-items:center;justify-content:center;color:var(--navigation-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none;cursor:pointer}.igx-calendar-picker .igx-calendar-picker__next:hover,.igx-calendar-picker .igx-calendar-picker__prev:hover{color:var(--navigation-hover-color)}.igx-calendar-picker .igx-calendar-picker__next:focus,.igx-calendar-picker .igx-calendar-picker__prev:focus{color:var(--navigation-focus-color)}[dir=rtl] .igx-calendar-picker .igx-calendar-picker__next,[dir=rtl] .igx-calendar-picker .igx-calendar-picker__prev{transform:scaleX(-1)}}@layer ig.material{@container style(--ig-theme: material){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1.5rem}.igx-calendar-picker__nav{gap:1.5rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);margin:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:1.5rem}.igx-calendar-picker__prev,.igx-calendar-picker__next{top:.25rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-calendar-picker{--ig-icon-size: .875rem;height:3.125rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:.5rem}.igx-calendar-picker__prev,.igx-calendar-picker__next{padding:.3125rem}}}\n"] }]
+                    ], 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; 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\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\" data-no-typography>\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\" data-no-typography>\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", styles: ["@layer ig.base{.igx-calendar{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--dropdown-size: var(--component-size);display:flex;flex-flow:column nowrap;width:100%;color:var(--content-foreground);background:var(--content-background);box-shadow:0 0 0 .0625rem var(--border-color);border-radius:var(--border-radius);min-width:max(var(--is-large, 1)*max(22.5rem,-1 * 22.5rem),var(--is-medium, 1)*max(19.625rem,-1 * 19.625rem),var(--is-small, 1)*max(18.125rem,-1 * 18.125rem));overflow:hidden;outline:none}.igx-calendar .igx-days-view,.igx-calendar .igx-calendar-view{background:inherit;color:inherit;box-shadow:none}.igx-calendar .igx-days-view,.igx-calendar .igx-calendar-view,.igx-calendar .igx-calendar-picker{border-radius:0}.igx-calendar__header{display:flex;flex-direction:column;color:var(--header-foreground);background:var(--header-background);position:relative}.igx-calendar__wrapper{display:flex;width:100%;flex-direction:column;outline-style:none}.igx-calendar__wrapper--vertical{display:grid;grid-template-rows:repeat(calc(var(--calendar-months) * 2),auto)}.igx-calendar__wrapper--vertical .igx-days-view{grid-row:var(--calendar-row-start)}.igx-calendar__pickers{display:flex;flex-grow:1;grid-row:var(--calendar-row-start)}.igx-calendar__pickers:focus-visible{outline:none}.igx-calendar__pickers>*{flex-grow:1}.igx-calendar__pickers--days{display:grid;grid-template-columns:repeat(var(--calendar-months),1fr)}.igx-calendar__pickers--vertical{display:contents}.igx-calendar__body{display:grid;grid-template-columns:repeat(var(--calendar-months),1fr)}.igx-calendar__body--vertical{display:contents}.igx-calendar__header-year{color:currentColor}.igx-calendar__header-date{display:flex}.igx-calendar__header-date>span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.igx-calendar--vertical{flex-flow:row nowrap}.igx-calendar--vertical .igx-calendar__header-date{flex-wrap:wrap}.igx-calendar__aria-off-screen{position:absolute!important;border:none!important;height:1px!important;width:1px!important;inset-inline-start:0!important;top:0!important;overflow:hidden!important;padding:0!important;margin:0!important;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.igx-calendar__aria-off-screen:focus{outline:none}}@layer ig.material{@container style(--ig-theme: material){.igx-calendar__header{padding:1rem 1.5rem;gap:1.75rem}.igx-calendar__pickers--vertical .igx-calendar-picker__prev,.igx-calendar__pickers--vertical .igx-calendar-picker__next{transform:rotate(90deg)}.igx-calendar__pickers--days{gap:2.5rem}.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view+.igx-days-view{padding-inline-start:1.375rem}.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view:first-child,.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view:nth-child(2n){padding-inline-end:1.375rem}.igx-calendar__body:not(.igx-calendar__body--vertical) .igx-days-view:last-child{padding-inline-end:max(var(--is-large, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-calendar__header-year{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);margin:0}.igx-calendar__header-date{font-family:var(--ig-h4-font-family, var(--ig-font-family));font-size:var(--ig-h4-font-size);font-weight:var(--ig-h4-font-weight);font-style:var(--ig-h4-font-style);line-height:var(--ig-h4-line-height);letter-spacing:var(--ig-h4-letter-spacing);text-transform:var(--ig-h4-text-transform);margin-top:var(--ig-h4-margin-top);margin-bottom:var(--ig-h4-margin-bottom);margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:10.5rem;width:10.5rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-calendar__header{padding:1rem}.igx-calendar__pickers--vertical .igx-calendar-picker__prev,.igx-calendar__pickers--vertical .igx-calendar-picker__next{transform:rotate(90deg)}.igx-calendar__pickers:not(.igx-calendar__pickers--days){border-block-end:.0625rem solid var(--border-color)}.igx-calendar__header-year{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);min-height:1.5rem;margin:0}.igx-calendar__header-date{font-family:var(--ig-h4-font-family, var(--ig-font-family));font-size:var(--ig-h4-font-size);font-weight:var(--ig-h4-font-weight);font-style:var(--ig-h4-font-style);line-height:var(--ig-h4-line-height);letter-spacing:var(--ig-h4-letter-spacing);text-transform:var(--ig-h4-text-transform);margin-top:var(--ig-h4-margin-top);margin-bottom:var(--ig-h4-margin-bottom);padding-block-end:.5rem;margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:10.5rem;width:10.5rem}.igx-calendar--vertical .igx-calendar__header-date{padding-block-end:.5rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-calendar__header{padding:1rem}.igx-calendar__pickers--days{gap:2.5rem}.igx-calendar__body{-moz-column-gap:2.75rem;column-gap:2.75rem}.igx-calendar__header-year{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);margin:0}.igx-calendar__header-date{font-family:var(--ig-h4-font-family, var(--ig-font-family));font-size:var(--ig-h4-font-size);font-weight:var(--ig-h4-font-weight);font-style:var(--ig-h4-font-style);line-height:var(--ig-h4-line-height);letter-spacing:var(--ig-h4-letter-spacing);text-transform:var(--ig-h4-text-transform);margin-top:var(--ig-h4-margin-top);margin-bottom:var(--ig-h4-margin-bottom);margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:10.5rem;width:10.5rem}.igx-calendar--vertical .igx-calendar__header-date{margin:0}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-calendar__header{padding:1rem;gap:.125rem}.igx-calendar__header:after{content:\"\";position:absolute;background:var(--border-color);inset-block-start:calc(100% - .0625rem);inset-inline-start:0;height:.0625rem;width:100%}.igx-calendar__pickers--vertical .igx-calendar-picker__prev,.igx-calendar__pickers--vertical .igx-calendar-picker__next{transform:rotate(90deg)}.igx-calendar__pickers--days{gap:2.5rem}.igx-calendar__body{-moz-column-gap:2.75rem;column-gap:2.75rem}.igx-calendar__header-year{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin:0}.igx-calendar__header-date{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom);margin:0}.igx-calendar--vertical .igx-calendar__header{min-width:8.5rem;width:8.5rem}.igx-calendar--vertical .igx-calendar__header:after{inset-inline-start:calc(100% - .0625rem);inset-block-start:0;height:100%;width:.0625rem}.igx-calendar--vertical .igx-calendar__header-date{margin:0}}}\n", "@layer ig.base{.igx-calendar-picker{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;position:relative;color:var(--picker-foreground);background:var(--picker-background);margin:0}.igx-calendar-picker:focus,.igx-calendar-picker:focus-within{outline:none}.igx-calendar-picker__dates{display:flex;gap:.25rem}.igx-calendar-picker__nav{display:flex;position:absolute;inset-inline-end:1rem}.igx-calendar-picker__date{color:var(--picker-foreground);text-align:center;outline:none;transition:color .15s ease-in-out 0s}.igx-calendar-picker__date:hover{color:var(--picker-hover-foreground);cursor:pointer}.igx-calendar-picker__date:focus{color:var(--picker-focus-foreground)}.igx-calendar-picker .igx-calendar-picker__next,.igx-calendar-picker .igx-calendar-picker__prev{display:flex;align-items:center;justify-content:center;color:var(--navigation-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none;cursor:pointer}.igx-calendar-picker .igx-calendar-picker__next:hover,.igx-calendar-picker .igx-calendar-picker__prev:hover{color:var(--navigation-hover-color)}.igx-calendar-picker .igx-calendar-picker__next:focus,.igx-calendar-picker .igx-calendar-picker__prev:focus{color:var(--navigation-focus-color)}[dir=rtl] .igx-calendar-picker .igx-calendar-picker__next,[dir=rtl] .igx-calendar-picker .igx-calendar-picker__prev{transform:scaleX(-1)}}@layer ig.material{@container style(--ig-theme: material){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1.5rem}.igx-calendar-picker__nav{gap:1.5rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);margin:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:1.5rem}.igx-calendar-picker__prev,.igx-calendar-picker__next{top:.25rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-calendar-picker{--ig-icon-size: .875rem;height:3.125rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:.5rem}.igx-calendar-picker__prev,.igx-calendar-picker__next{padding:.3125rem}}}\n"] }]
         }], propDecorators: { wrapper: [{
                 type: ViewChild,
                 args: ["wrapper"]
@@ -3697,10 +3621,32 @@ class IgxMonthPickerComponent extends IgxCalendarBaseDirective {
     get showActiveDay() {
         return this._showActiveDay;
     }
+    /**
+     * Gets the date that is presented. By default it is the current date.
+     *
+     * @returns The date presented in the current view.
+     * @example
+     * ```typescript
+     * const viewDate = this.monthPicker.viewDate;
+     * ```
+     */
+    get viewDate() {
+        return super.viewDate;
+    }
+    /**
+     * Sets the date that will be presented in the default view when the component renders.
+     *
+     * @param value The date to present.
+     * @example
+     * ```html
+     * <igx-month-picker [viewDate]="viewDate"></igx-month-picker>
+     * ```
+     */
+    set viewDate(value) {
+        super.viewDate = value;
+        this.resetActiveDescendant();
+    }
     get activeDescendant() {
-        if (this.activeView === 'month') {
-            return this.value?.getTime();
-        }
         return this._activeDescendant ?? this.viewDate.getTime();
     }
     set activeDescendant(date) {
@@ -3726,6 +3672,7 @@ class IgxMonthPickerComponent extends IgxCalendarBaseDirective {
             .set("PageUp", this.handlePageUp)
             .set("PageDown", this.handlePageDown);
         this.activeView$.subscribe((view) => {
+            this.resetActiveDescendant();
             this.activeViewChanged.emit(view);
             this.viewDateChanged.emit({
                 previousValue: this.previousViewDate,
@@ -3756,6 +3703,13 @@ class IgxMonthPickerComponent extends IgxCalendarBaseDirective {
             delta > 0 ? this.nextPage() : this.previousPage();
         }
     }
+    /**
+     * Drops the cached keyboard-active item so `aria-activedescendant`
+     * falls back to the view date, which is rendered in the current view.
+     */
+    resetActiveDescendant() {
+        this._activeDescendant = undefined;
+    }
     handlePageUp(event) {
         this.handlePageUpDown(event, -1);
     }
@@ -3851,25 +3805,23 @@ class IgxMonthPickerComponent extends IgxCalendarBaseDirective {
      * @hidden
      * @internal
      */
-    generateContext(value, i) {
-        const construct = (date, index) => ({
-            index: index,
-            date,
-            ...formatToParts(date, this.locale, this.formatOptions, [
-                "era",
-                "year",
-                "month",
-                "day",
-                "weekday",
-            ]),
-        });
-        const formatObject = Array.isArray(value)
-            ? value.map((date, index) => construct(date, index))
-            : construct(value, i);
-        return { $implicit: formatObject };
+    generateContext(date, index) {
+        return {
+            $implicit: {
+                index: index,
+                date,
+                ...formatToParts(date, this.locale, this.formatOptions, [
+                    "era",
+                    "year",
+                    "month",
+                    "day",
+                    "weekday",
+                ]),
+            }
+        };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxMonthPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxMonthPickerComponent, isStandalone: true, selector: "igx-month-picker", inputs: { id: "id" }, host: { listeners: { "keydown.pageup": "previousPage($event)", "keydown.pagedown": "nextPage($event)", "mousedown": "onMouseDown($event)" }, properties: { "attr.id": "this.id", "class.igx-month-picker": "this.styleClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxMonthPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: IgxMonthPickerComponent, isStandalone: true, selector: "igx-month-picker", inputs: { id: "id" }, host: { listeners: { "keydown.pageup": "previousPage($event)", "keydown.pagedown": "nextPage($event)", "mousedown": "onMouseDown($event)" }, properties: { "attr.id": "this.id", "class.igx-month-picker": "this.styleClass" } }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -3879,9 +3831,9 @@ 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", styles: ["@layer ig.base{.igx-month-picker{display:flex;overflow:hidden;min-width:max(var(--is-large, 1)*max(22.5rem,-1 * 22.5rem),var(--is-medium, 1)*max(19.625rem,-1 * 19.625rem),var(--is-small, 1)*max(18.125rem,-1 * 18.125rem));color:var(--content-foreground);background:var(--content-background);box-shadow:0 0 0 .0625rem var(--border-color);border-radius:var(--border-radius);outline:none}.igx-month-picker .igx-calendar-view{color:inherit;background:inherit;box-shadow:none;border-radius:0}.igx-month-picker .igx-calendar__wrapper{display:flex;width:100%;flex-direction:column;outline-style:none}.igx-month-picker .igx-calendar__aria-off-screen{position:absolute!important;border:none!important;height:1px!important;width:1px!important;inset-inline-start:0!important;top:0!important;overflow:hidden!important;padding:0!important;margin:0!important;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.igx-month-picker .igx-calendar__aria-off-screen:focus{outline:none}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-month-picker .igx-calendar__pickers{border-block-end:.0625rem solid var(--border-color)}}}\n", "@layer ig.base{.igx-calendar-picker{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;position:relative;color:var(--picker-foreground);background:var(--picker-background);margin:0}.igx-calendar-picker:focus,.igx-calendar-picker:focus-within{outline:none}.igx-calendar-picker__dates{display:flex;gap:.25rem}.igx-calendar-picker__nav{display:flex;position:absolute;inset-inline-end:1rem}.igx-calendar-picker__date{color:var(--picker-foreground);text-align:center;outline:none;transition:color .15s ease-in-out 0s}.igx-calendar-picker__date:hover{color:var(--picker-hover-foreground);cursor:pointer}.igx-calendar-picker__date:focus{color:var(--picker-focus-foreground)}.igx-calendar-picker .igx-calendar-picker__next,.igx-calendar-picker .igx-calendar-picker__prev{display:flex;align-items:center;justify-content:center;color:var(--navigation-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none;cursor:pointer}.igx-calendar-picker .igx-calendar-picker__next:hover,.igx-calendar-picker .igx-calendar-picker__prev:hover{color:var(--navigation-hover-color)}.igx-calendar-picker .igx-calendar-picker__next:focus,.igx-calendar-picker .igx-calendar-picker__prev:focus{color:var(--navigation-focus-color)}[dir=rtl] .igx-calendar-picker .igx-calendar-picker__next,[dir=rtl] .igx-calendar-picker .igx-calendar-picker__prev{transform:scaleX(-1)}}@layer ig.material{@container style(--ig-theme: material){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1.5rem}.igx-calendar-picker__nav{gap:1.5rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);margin:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:1.5rem}.igx-calendar-picker__prev,.igx-calendar-picker__next{top:.25rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-calendar-picker{--ig-icon-size: .875rem;height:3.125rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:.5rem}.igx-calendar-picker__prev,.igx-calendar-picker__next{padding:.3125rem}}}\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" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+        ], 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                (activeDateChanged)=\"activeDescendant = $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                (activeDateChanged)=\"activeDescendant = $event\"\n                (mousedown)=\"$event.preventDefault()\"\n            >\n            </igx-years-view>\n        }\n    </section>\n</div>\n", styles: ["@layer ig.base{.igx-month-picker{display:flex;overflow:hidden;min-width:max(var(--is-large, 1)*max(22.5rem,-1 * 22.5rem),var(--is-medium, 1)*max(19.625rem,-1 * 19.625rem),var(--is-small, 1)*max(18.125rem,-1 * 18.125rem));color:var(--content-foreground);background:var(--content-background);box-shadow:0 0 0 .0625rem var(--border-color);border-radius:var(--border-radius);outline:none}.igx-month-picker .igx-calendar-view{color:inherit;background:inherit;box-shadow:none;border-radius:0}.igx-month-picker .igx-calendar__wrapper{display:flex;width:100%;flex-direction:column;outline-style:none}.igx-month-picker .igx-calendar__aria-off-screen{position:absolute!important;border:none!important;height:1px!important;width:1px!important;inset-inline-start:0!important;top:0!important;overflow:hidden!important;padding:0!important;margin:0!important;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.igx-month-picker .igx-calendar__aria-off-screen:focus{outline:none}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-month-picker .igx-calendar__pickers{border-block-end:.0625rem solid var(--border-color)}}}\n", "@layer ig.base{.igx-calendar-picker{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;position:relative;color:var(--picker-foreground);background:var(--picker-background);margin:0}.igx-calendar-picker:focus,.igx-calendar-picker:focus-within{outline:none}.igx-calendar-picker__dates{display:flex;gap:.25rem}.igx-calendar-picker__nav{display:flex;position:absolute;inset-inline-end:1rem}.igx-calendar-picker__date{color:var(--picker-foreground);text-align:center;outline:none;transition:color .15s ease-in-out 0s}.igx-calendar-picker__date:hover{color:var(--picker-hover-foreground);cursor:pointer}.igx-calendar-picker__date:focus{color:var(--picker-focus-foreground)}.igx-calendar-picker .igx-calendar-picker__next,.igx-calendar-picker .igx-calendar-picker__prev{display:flex;align-items:center;justify-content:center;color:var(--navigation-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none;cursor:pointer}.igx-calendar-picker .igx-calendar-picker__next:hover,.igx-calendar-picker .igx-calendar-picker__prev:hover{color:var(--navigation-hover-color)}.igx-calendar-picker .igx-calendar-picker__next:focus,.igx-calendar-picker .igx-calendar-picker__prev:focus{color:var(--navigation-focus-color)}[dir=rtl] .igx-calendar-picker .igx-calendar-picker__next,[dir=rtl] .igx-calendar-picker .igx-calendar-picker__prev{transform:scaleX(-1)}}@layer ig.material{@container style(--ig-theme: material){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1.5rem}.igx-calendar-picker__nav{gap:1.5rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);margin:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:1.5rem}.igx-calendar-picker__prev,.igx-calendar-picker__next{top:.25rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-calendar-picker{--ig-icon-size: .875rem;height:3.125rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:.5rem}.igx-calendar-picker__prev,.igx-calendar-picker__next{padding:.3125rem}}}\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" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxMonthPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxMonthPickerComponent, decorators: [{
             type: Component,
             args: [{ providers: [
                         {
@@ -3899,7 +3851,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         IgxIconComponent,
                         IgxMonthsViewComponent,
                         IgxYearsViewComponent,
-                    ], 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", styles: ["@layer ig.base{.igx-month-picker{display:flex;overflow:hidden;min-width:max(var(--is-large, 1)*max(22.5rem,-1 * 22.5rem),var(--is-medium, 1)*max(19.625rem,-1 * 19.625rem),var(--is-small, 1)*max(18.125rem,-1 * 18.125rem));color:var(--content-foreground);background:var(--content-background);box-shadow:0 0 0 .0625rem var(--border-color);border-radius:var(--border-radius);outline:none}.igx-month-picker .igx-calendar-view{color:inherit;background:inherit;box-shadow:none;border-radius:0}.igx-month-picker .igx-calendar__wrapper{display:flex;width:100%;flex-direction:column;outline-style:none}.igx-month-picker .igx-calendar__aria-off-screen{position:absolute!important;border:none!important;height:1px!important;width:1px!important;inset-inline-start:0!important;top:0!important;overflow:hidden!important;padding:0!important;margin:0!important;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.igx-month-picker .igx-calendar__aria-off-screen:focus{outline:none}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-month-picker .igx-calendar__pickers{border-block-end:.0625rem solid var(--border-color)}}}\n", "@layer ig.base{.igx-calendar-picker{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;position:relative;color:var(--picker-foreground);background:var(--picker-background);margin:0}.igx-calendar-picker:focus,.igx-calendar-picker:focus-within{outline:none}.igx-calendar-picker__dates{display:flex;gap:.25rem}.igx-calendar-picker__nav{display:flex;position:absolute;inset-inline-end:1rem}.igx-calendar-picker__date{color:var(--picker-foreground);text-align:center;outline:none;transition:color .15s ease-in-out 0s}.igx-calendar-picker__date:hover{color:var(--picker-hover-foreground);cursor:pointer}.igx-calendar-picker__date:focus{color:var(--picker-focus-foreground)}.igx-calendar-picker .igx-calendar-picker__next,.igx-calendar-picker .igx-calendar-picker__prev{display:flex;align-items:center;justify-content:center;color:var(--navigation-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none;cursor:pointer}.igx-calendar-picker .igx-calendar-picker__next:hover,.igx-calendar-picker .igx-calendar-picker__prev:hover{color:var(--navigation-hover-color)}.igx-calendar-picker .igx-calendar-picker__next:focus,.igx-calendar-picker .igx-calendar-picker__prev:focus{color:var(--navigation-focus-color)}[dir=rtl] .igx-calendar-picker .igx-calendar-picker__next,[dir=rtl] .igx-calendar-picker .igx-calendar-picker__prev{transform:scaleX(-1)}}@layer ig.material{@container style(--ig-theme: material){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1.5rem}.igx-calendar-picker__nav{gap:1.5rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);margin:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:1.5rem}.igx-calendar-picker__prev,.igx-calendar-picker__next{top:.25rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-calendar-picker{--ig-icon-size: .875rem;height:3.125rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:.5rem}.igx-calendar-picker__prev,.igx-calendar-picker__next{padding:.3125rem}}}\n"] }]
+                    ], 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                (activeDateChanged)=\"activeDescendant = $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                (activeDateChanged)=\"activeDescendant = $event\"\n                (mousedown)=\"$event.preventDefault()\"\n            >\n            </igx-years-view>\n        }\n    </section>\n</div>\n", styles: ["@layer ig.base{.igx-month-picker{display:flex;overflow:hidden;min-width:max(var(--is-large, 1)*max(22.5rem,-1 * 22.5rem),var(--is-medium, 1)*max(19.625rem,-1 * 19.625rem),var(--is-small, 1)*max(18.125rem,-1 * 18.125rem));color:var(--content-foreground);background:var(--content-background);box-shadow:0 0 0 .0625rem var(--border-color);border-radius:var(--border-radius);outline:none}.igx-month-picker .igx-calendar-view{color:inherit;background:inherit;box-shadow:none;border-radius:0}.igx-month-picker .igx-calendar__wrapper{display:flex;width:100%;flex-direction:column;outline-style:none}.igx-month-picker .igx-calendar__aria-off-screen{position:absolute!important;border:none!important;height:1px!important;width:1px!important;inset-inline-start:0!important;top:0!important;overflow:hidden!important;padding:0!important;margin:0!important;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.igx-month-picker .igx-calendar__aria-off-screen:focus{outline:none}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-month-picker .igx-calendar__pickers{border-block-end:.0625rem solid var(--border-color)}}}\n", "@layer ig.base{.igx-calendar-picker{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;position:relative;color:var(--picker-foreground);background:var(--picker-background);margin:0}.igx-calendar-picker:focus,.igx-calendar-picker:focus-within{outline:none}.igx-calendar-picker__dates{display:flex;gap:.25rem}.igx-calendar-picker__nav{display:flex;position:absolute;inset-inline-end:1rem}.igx-calendar-picker__date{color:var(--picker-foreground);text-align:center;outline:none;transition:color .15s ease-in-out 0s}.igx-calendar-picker__date:hover{color:var(--picker-hover-foreground);cursor:pointer}.igx-calendar-picker__date:focus{color:var(--picker-focus-foreground)}.igx-calendar-picker .igx-calendar-picker__next,.igx-calendar-picker .igx-calendar-picker__prev{display:flex;align-items:center;justify-content:center;color:var(--navigation-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none;cursor:pointer}.igx-calendar-picker .igx-calendar-picker__next:hover,.igx-calendar-picker .igx-calendar-picker__prev:hover{color:var(--navigation-hover-color)}.igx-calendar-picker .igx-calendar-picker__next:focus,.igx-calendar-picker .igx-calendar-picker__prev:focus{color:var(--navigation-focus-color)}[dir=rtl] .igx-calendar-picker .igx-calendar-picker__next,[dir=rtl] .igx-calendar-picker .igx-calendar-picker__prev{transform:scaleX(-1)}}@layer ig.material{@container style(--ig-theme: material){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1.5rem}.igx-calendar-picker__nav{gap:1.5rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);margin:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:1.5rem}.igx-calendar-picker__prev,.igx-calendar-picker__next{top:.25rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-calendar-picker{--ig-icon-size: 1.5rem;height:3.5rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-calendar-picker{--ig-icon-size: .875rem;height:3.125rem;padding-inline:1rem}.igx-calendar-picker__dates{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom);margin:0}.igx-calendar-picker__nav{gap:.5rem}.igx-calendar-picker__prev,.igx-calendar-picker__next{padding:.3125rem}}}\n"] }]
         }], propDecorators: { id: [{
                 type: HostBinding,
                 args: ["attr.id"]
@@ -3953,11 +3905,11 @@ const IGX_CALENDAR_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxCalendarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxCalendarModule, imports: [IgxCalendarComponent, IgxDaysViewComponent, IgxMonthsViewComponent, IgxYearsViewComponent, IgxMonthPickerComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarHeaderTitleTemplateDirective, IgxCalendarMonthDirective, IgxCalendarYearDirective, IgxCalendarSubheaderTemplateDirective], exports: [IgxCalendarComponent, IgxDaysViewComponent, IgxMonthsViewComponent, IgxYearsViewComponent, IgxMonthPickerComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarHeaderTitleTemplateDirective, IgxCalendarMonthDirective, IgxCalendarYearDirective, IgxCalendarSubheaderTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCalendarModule, imports: [IgxCalendarComponent, IgxMonthPickerComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxCalendarModule, imports: [IgxCalendarComponent, IgxDaysViewComponent, IgxMonthsViewComponent, IgxYearsViewComponent, IgxMonthPickerComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarHeaderTitleTemplateDirective, IgxCalendarMonthDirective, IgxCalendarYearDirective, IgxCalendarSubheaderTemplateDirective], exports: [IgxCalendarComponent, IgxDaysViewComponent, IgxMonthsViewComponent, IgxYearsViewComponent, IgxMonthPickerComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarHeaderTitleTemplateDirective, IgxCalendarMonthDirective, IgxCalendarYearDirective, IgxCalendarSubheaderTemplateDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCalendarModule, imports: [IgxCalendarComponent, IgxMonthPickerComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxCalendarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxCalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [