igniteui-angular 21.0.4 → 21.0.6

package/fesm2022/igniteui-angular-calendar.mjs

@@ -29,10 +29,10 @@ class IgxCalendarViewBaseDirective {
         event.preventDefault();
         this.itemSelection.emit(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCalendarViewBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", 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: "21.0.8", ngImport: i0, type: IgxCalendarViewBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", 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: "21.0.2", ngImport: i0, type: IgxCalendarViewBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCalendarViewBaseDirective, decorators: [{
             type: Directive
         }], propDecorators: { value: [{
                 type: Input
@@ -59,12 +59,12 @@ class IgxCalendarYearDirective extends IgxCalendarViewBaseDirective {
     get isActive() {
         return this.isSelected && this.showActive;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCalendarYearDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", 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: "21.0.8", ngImport: i0, type: IgxCalendarYearDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", 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: "21.0.2", ngImport: i0, type: IgxCalendarYearDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCalendarYearDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCalendarYear]',
@@ -97,12 +97,12 @@ class IgxCalendarMonthDirective extends IgxCalendarViewBaseDirective {
     get isActive() {
         return this.isSelected && this.showActive;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCalendarMonthDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", 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: "21.0.8", ngImport: i0, type: IgxCalendarMonthDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", 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: "21.0.2", ngImport: i0, type: IgxCalendarMonthDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCalendarMonthDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCalendarMonth]',
@@ -129,10 +129,10 @@ class IgxCalendarHeaderTitleTemplateDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCalendarHeaderTitleTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxCalendarHeaderTitleTemplateDirective, isStandalone: true, selector: "[igxCalendarHeaderTitle]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCalendarHeaderTitleTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxCalendarHeaderTitleTemplateDirective, isStandalone: true, selector: "[igxCalendarHeaderTitle]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCalendarHeaderTitleTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCalendarHeaderTitleTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCalendarHeaderTitle]',
@@ -146,10 +146,10 @@ class IgxCalendarHeaderTemplateDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCalendarHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxCalendarHeaderTemplateDirective, isStandalone: true, selector: "[igxCalendarHeader]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCalendarHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxCalendarHeaderTemplateDirective, isStandalone: true, selector: "[igxCalendarHeader]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCalendarHeaderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCalendarHeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCalendarHeader]',
@@ -163,10 +163,10 @@ class IgxCalendarSubheaderTemplateDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCalendarSubheaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxCalendarSubheaderTemplateDirective, isStandalone: true, selector: "[igxCalendarSubheader]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCalendarSubheaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxCalendarSubheaderTemplateDirective, isStandalone: true, selector: "[igxCalendarSubheader]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCalendarSubheaderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCalendarSubheaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCalendarSubheader]',
@@ -226,10 +226,10 @@ class IgxCalendarScrollPageDirective {
         this.destroy$.next(true);
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCalendarScrollPageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", 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: "21.0.8", ngImport: i0, type: IgxCalendarScrollPageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", 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: "21.0.2", ngImport: i0, type: IgxCalendarScrollPageDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCalendarScrollPageDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCalendarScrollPage]',
@@ -549,8 +549,8 @@ class IgxCalendarViewDirective {
         this.date = date.native;
         this.activeDateChanged.emit(this.date);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCalendarViewDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.2", type: IgxCalendarViewDirective, isStandalone: true, inputs: { role: "role", tabIndex: "tabIndex", formatView: ["formatView", "formatView", booleanAttribute], showActive: ["showActive", "showActive", booleanAttribute], date: "date", locale: "locale" }, outputs: { selected: "selected", pageChanged: "pageChanged", activeDateChanged: "activeDateChanged" }, host: { listeners: { "keydown.arrowdown": "onKeydownArrowDown($event)", "keydown.arrowup": "onKeydownArrowUp($event)", "keydown.arrowright": "onKeydownArrowRight($event)", "keydown.arrowleft": "onKeydownArrowLeft($event)", "keydown.home": "onKeydownHome($event)", "keydown.end": "onKeydownEnd($event)", "keydown.enter": "onKeydownEnter($event)", "focus": "handleFocus()", "blur": "handleBlur()" }, properties: { "attr.role": "this.role", "attr.tabIndex": "this.tabIndex", "attr.aria-activeDescendant": "this.activeDescendant" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCalendarViewDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.8", 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,
@@ -558,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: "21.0.2", ngImport: i0, type: IgxCalendarViewDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCalendarViewDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -754,8 +754,8 @@ class IgxMonthsViewComponent extends IgxCalendarViewDirective {
             month: this.monthFormat,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxMonthsViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxMonthsViewComponent, isStandalone: true, selector: "igx-months-view", inputs: { id: "id", standalone: "standalone", monthFormat: "monthFormat", formatView: ["formatView", "formatView", booleanAttribute] }, host: { properties: { "attr.id": "this.id", "class.igx-calendar-view": "this.viewClass", "class.igx-calendar-view--standalone": "this.standalone" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxMonthsViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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,
@@ -767,7 +767,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", dependencies: [{ kind: "directive", type: IgxCalendarMonthDirective, selector: "[igxCalendarMonth]", exportAs: ["igxCalendarMonth"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxMonthsViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxMonthsViewComponent, decorators: [{
             type: Component,
             args: [{ providers: [
                         {
@@ -909,8 +909,8 @@ class IgxYearsViewComponent extends IgxCalendarViewDirective {
             this.el.nativeElement.focus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxYearsViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", 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: "21.0.8", ngImport: i0, type: IgxYearsViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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,
@@ -922,7 +922,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", dependencies: [{ kind: "directive", type: IgxCalendarYearDirective, selector: "[igxCalendarYear]", exportAs: ["igxCalendarYear"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxYearsViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxYearsViewComponent, decorators: [{
             type: Component,
             args: [{ providers: [
                         {
@@ -1052,10 +1052,10 @@ class IgxDayItemComponent {
     get isSingleSelection() {
         return this.selection !== CalendarSelection.RANGE;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxDayItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.2", 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-days-view__date--last": "this.isLastInRange", "class.igx-days-view__date--first": "this.isFirstInRange", "class.igx-days-view__date--active": "this.isActive", "class.igx-days-view__date--selected": "this.isSelectedCSS", "class.igx-days-view__date--inactive": "this.isInactive", "class.igx-days-view__date--hidden": "this.isHidden", "class.igx-days-view__date--current": "this.isToday", "class.igx-days-view__date--weekend": "this.isWeekend", "class.igx-days-view__date--range": "this.isWithinRangeCSS", "class.igx-days-view__date--range-preview": "this.isWithinPreviewRangeCSS", "class.igx-days-view__date--special": "this.isSpecial", "class.igx-days-view__date--disabled": "this.isDisabledCSS", "class.igx-days-view__date--single": "this.isSingleSelection" } }, ngImport: i0, template: "<span\n    aria-hidden=\"true\"\n    class=\"igx-days-view__date-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: "21.0.8", ngImport: i0, type: IgxDayItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.8", 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-days-view__date--last": "this.isLastInRange", "class.igx-days-view__date--first": "this.isFirstInRange", "class.igx-days-view__date--active": "this.isActive", "class.igx-days-view__date--selected": "this.isSelectedCSS", "class.igx-days-view__date--inactive": "this.isInactive", "class.igx-days-view__date--hidden": "this.isHidden", "class.igx-days-view__date--current": "this.isToday", "class.igx-days-view__date--weekend": "this.isWeekend", "class.igx-days-view__date--range": "this.isWithinRangeCSS", "class.igx-days-view__date--range-preview": "this.isWithinPreviewRangeCSS", "class.igx-days-view__date--special": "this.isSpecial", "class.igx-days-view__date--disabled": "this.isDisabledCSS", "class.igx-days-view__date--single": "this.isSingleSelection" } }, ngImport: i0, template: "<span\n    aria-hidden=\"true\"\n    class=\"igx-days-view__date-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: "21.0.2", ngImport: i0, type: IgxDayItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", 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-days-view__date-inner\"\n    (mouseenter)=\"onMouseEnter()\"\n    (mouseleave)=\"onMouseLeave()\"\n    (mousedown)=\"onMouseDown($event)\"\n>\n    <ng-content></ng-content>\n</span>\n" }]
         }], propDecorators: { date: [{
@@ -1181,10 +1181,10 @@ class KeyboardNavigationService {
         this.keyHandlers.delete(key);
         return this;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: KeyboardNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: KeyboardNavigationService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: KeyboardNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: KeyboardNavigationService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: KeyboardNavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: KeyboardNavigationService, decorators: [{
             type: Injectable
         }] });
 
@@ -1962,10 +1962,10 @@ class IgxCalendarBaseDirective {
     validateDate(value) {
         return DateTimeUtil.isValidDate(value) ? value : new Date();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCalendarBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.2", type: IgxCalendarBaseDirective, isStandalone: true, selector: "[igxCalendarBase]", inputs: { hideOutsideDays: ["hideOutsideDays", "hideOutsideDays", booleanAttribute], resourceStrings: "resourceStrings", weekStart: "weekStart", locale: "locale", formatOptions: "formatOptions", formatViews: "formatViews", activeView: "activeView", selection: "selection", viewDate: "viewDate", disabledDates: "disabledDates", specialDates: "specialDates", value: "value" }, outputs: { selected: "selected", viewDateChanged: "viewDateChanged", activeViewChanged: "activeViewChanged" }, host: { listeners: { "pointerdown": "onPointerdown($event)" } }, providers: [KeyboardNavigationService], viewQueries: [{ propertyName: "yearsBtns", predicate: ["yearsBtn"], descendants: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCalendarBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.8", 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: "21.0.2", ngImport: i0, type: IgxCalendarBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCalendarBaseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCalendarBase]',
@@ -2027,10 +2027,10 @@ class DayDigitPipe {
         }
         return value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DayDigitPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: DayDigitPipe, isStandalone: true, name: "dayDigit" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DayDigitPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: DayDigitPipe, isStandalone: true, name: "dayDigit" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DayDigitPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DayDigitPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'dayDigit',
@@ -2475,8 +2475,8 @@ class IgxDaysViewComponent extends IgxCalendarBaseDirective {
     setPreviewRangeDate(value) {
         this.previewRangeDate = value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxDaysViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxDaysViewComponent, isStandalone: true, selector: "igx-days-view", inputs: { id: "id", tabIndex: "tabIndex", role: "role", standalone: "standalone", showWeekNumbers: ["showWeekNumbers", "showWeekNumbers", booleanAttribute], activeDate: "activeDate", previewRangeDate: "previewRangeDate", hideLeadingDays: ["hideLeadingDays", "hideLeadingDays", booleanAttribute], hideTrailingDays: ["hideTrailingDays", "hideTrailingDays", booleanAttribute], showActiveDay: ["showActiveDay", "showActiveDay", booleanAttribute] }, outputs: { dateSelected: "dateSelected", pageChanged: "pageChanged", activeDateChange: "activeDateChange", previewRangeDateChange: "previewRangeDateChange" }, host: { listeners: { "keydown.arrowright": "onArrowRight($event)", "keydown.arrowleft": "onArrowLeft($event)", "keydown.arrowup": "onArrowUp($event)", "keydown.arrowdown": "onArrowDown($event)", "keydown.space": "onKeydownEnter($event)", "keydown.enter": "onKeydownEnter($event)", "keydown.home": "onKeydownHome($event)", "keydown.end": "onKeydownEnd($event)", "focus": "handleFocus()", "blur": "handleBlur()" }, properties: { "attr.id": "this.id", "attr.tabIndex": "this.tabIndex", "attr.role": "this.role", "class.igx-days-view": "this.defaultClass", "class.igx-days-view--standalone": "this.standalone", "attr.aria-activeDescendant": "this.activeDescendant", "class.igx-days-view--material": "this.isMaterial", "class.igx-days-view--fluent": "this.isFluent", "class.igx-days-view--bootstrap": "this.isBootstrap", "class.igx-days-view--indigo": "this.isIndigo" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxDaysViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxDaysViewComponent, isStandalone: true, selector: "igx-days-view", inputs: { id: "id", tabIndex: "tabIndex", role: "role", standalone: "standalone", showWeekNumbers: ["showWeekNumbers", "showWeekNumbers", booleanAttribute], activeDate: "activeDate", previewRangeDate: "previewRangeDate", hideLeadingDays: ["hideLeadingDays", "hideLeadingDays", booleanAttribute], hideTrailingDays: ["hideTrailingDays", "hideTrailingDays", booleanAttribute], showActiveDay: ["showActiveDay", "showActiveDay", booleanAttribute] }, outputs: { dateSelected: "dateSelected", pageChanged: "pageChanged", activeDateChange: "activeDateChange", previewRangeDateChange: "previewRangeDateChange" }, host: { listeners: { "keydown.arrowright": "onArrowRight($event)", "keydown.arrowleft": "onArrowLeft($event)", "keydown.arrowup": "onArrowUp($event)", "keydown.arrowdown": "onArrowDown($event)", "keydown.space": "onKeydownEnter($event)", "keydown.enter": "onKeydownEnter($event)", "keydown.home": "onKeydownHome($event)", "keydown.end": "onKeydownEnd($event)", "focus": "handleFocus()", "blur": "handleBlur()" }, properties: { "attr.id": "this.id", "attr.tabIndex": "this.tabIndex", "attr.role": "this.role", "class.igx-days-view": "this.defaultClass", "class.igx-days-view--standalone": "this.standalone", "attr.aria-activeDescendant": "this.activeDescendant", "class.igx-days-view--material": "this.isMaterial", "class.igx-days-view--fluent": "this.isFluent", "class.igx-days-view--bootstrap": "this.isBootstrap", "class.igx-days-view--indigo": "this.isIndigo" } }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -2485,7 +2485,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-view__row\"\n    [title]=\"weekNumberHeader.long | titlecase\"\n>\n    @if (showWeekNumbers) {\n        <div\n            role=\"columnheader\"\n            class=\"igx-days-view__label igx-days-view__label--week-number\"\n        >\n            <span>\n                <i>{{ weekNumberHeader.short | titlecase }}</i>\n            </span>\n        </div>\n    }\n    @for (dayName of weekHeaderLabels; track dayName.long) {\n        <span\n            role=\"columnheader\"\n            [attr.aria-label]=\"dayName.long\"\n            class=\"igx-days-view__label\"\n        >\n            <span class=\"igx-days-view__label-inner\">\n                {{ dayName.formatted | titlecase }}\n            </span>\n        </span>\n    }\n</div>\n\n@for (\n    week of monthWeeks; track rowTracker(i, week);\n    let isLast = $last; let i = $index\n) {\n    <div\n        class=\"igx-days-view__row\"\n        role=\"row\"\n    >\n        @if (showWeekNumbers) {\n            <div class=\"igx-days-view__date igx-days-view__date--week-number\">\n                <span\n                    role=\"rowheader\"\n                    class=\"igx-days-view__date-inner igx-days-view__date-inner--week-number\"\n                >\n                    {{ getWeekNumber(week[0]) }}\n                </span>\n            </div>\n        }\n        @for (day of week; track dateTracker($index, day)) {\n            <igx-day-item\n                #item\n                class=\"igx-days-view__date\"\n                role=\"gridcell\"\n                [attr.id]=\"item.isCurrentMonth && day.timestamp\"\n                [attr.aria-selected]=\"isSelected(day)\"\n                [attr.aria-disabled]=\"isDateDisabled(day.native)\"\n                [attr.aria-label]=\"\n                    isFirstInRange(day)\n                        ? day.native.toDateString() +\n                          ', ' +\n                          resourceStrings.igx_calendar_range_start\n                        : isLastInRange(day)\n                          ? day.native.toDateString() +\n                            ', ' +\n                            resourceStrings.igx_calendar_range_end\n                          : day.native.toDateString()\n                \"\n                [date]=\"day\"\n                [viewDate]=\"viewDate\"\n                [selection]=\"selection\"\n                [selected]=\"isSelected(day)\"\n                [isActive]=\"isActiveDate(day)\"\n                [isLastInRange]=\"isLastInRange(day)\"\n                [isFirstInRange]=\"isFirstInRange(day)\"\n                [isWithinRange]=\"isWithinRange(day.native, true)\"\n                [isWithinPreviewRange]=\"isWithinPreviewRange(day.native)\"\n                [disabledDates]=\"disabledDates\"\n                [specialDates]=\"specialDates\"\n                [hideLeadingDays]=\"hideLeadingDays\"\n                [hideTrailingDays]=\"hideTrailingDays\"\n                [attr.tabindex]=\"-1\"\n                (click)=\"handleDateClick(item)\"\n                (mouseEnter)=\"changePreviewRange(day.native)\"\n                (mouseLeave)=\"clearPreviewRange()\"\n            >\n                {{ formattedDate(day.native) | dayDigit:formatViews }}\n            </igx-day-item>\n        }\n    </div>\n}\n", dependencies: [{ kind: "component", type: IgxDayItemComponent, selector: "igx-day-item", inputs: ["date", "viewDate", "selection", "selected", "disabledDates", "specialDates", "hideOutsideDays", "isLastInRange", "isFirstInRange", "isWithinRange", "isWithinPreviewRange", "hideLeadingDays", "hideTrailingDays", "isActive"], outputs: ["dateSelection", "mouseEnter", "mouseLeave", "mouseDown"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: DayDigitPipe, name: "dayDigit" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxDaysViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxDaysViewComponent, decorators: [{
             type: Component,
             args: [{ providers: [
                         {
@@ -2602,10 +2602,10 @@ class IgxMonthViewSlotsCalendar {
     transform(monthViews) {
         return new Array(monthViews);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxMonthViewSlotsCalendar, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxMonthViewSlotsCalendar, isStandalone: true, name: "IgxMonthViewSlots" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxMonthViewSlotsCalendar, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxMonthViewSlotsCalendar, isStandalone: true, name: "IgxMonthViewSlots" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxMonthViewSlotsCalendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxMonthViewSlotsCalendar, decorators: [{
             type: Pipe,
             args: [{
                     name: 'IgxMonthViewSlots',
@@ -2623,10 +2623,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: "21.0.2", ngImport: i0, type: IgxGetViewDateCalendar, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxGetViewDateCalendar, isStandalone: true, name: "IgxGetViewDate" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGetViewDateCalendar, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxGetViewDateCalendar, isStandalone: true, name: "IgxGetViewDate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGetViewDateCalendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGetViewDateCalendar, decorators: [{
             type: Pipe,
             args: [{
                     name: 'IgxGetViewDate',
@@ -3429,8 +3429,8 @@ class IgxCalendarComponent extends IgxCalendarBaseDirective {
             : construct(value, i);
         return { $implicit: formatObject };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCalendarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", 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: "21.0.8", ngImport: i0, type: IgxCalendarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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,
@@ -3442,7 +3442,7 @@ class IgxCalendarComponent extends IgxCalendarBaseDirective {
             },
         ], queries: [{ propertyName: "headerTemplateDirective", first: true, predicate: i0.forwardRef(() => IgxCalendarHeaderTemplateDirective), descendants: true, read: IgxCalendarHeaderTemplateDirective, static: true }, { propertyName: "headerTitleTemplateDirective", first: true, predicate: i0.forwardRef(() => IgxCalendarHeaderTitleTemplateDirective), descendants: true, read: IgxCalendarHeaderTitleTemplateDirective, static: true }, { propertyName: "subheaderTemplateDirective", first: true, predicate: i0.forwardRef(() => IgxCalendarSubheaderTemplateDirective), descendants: true, read: IgxCalendarSubheaderTemplateDirective, static: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "dacadeView", first: true, predicate: ["decade"], descendants: true, read: IgxYearsViewComponent }, { propertyName: "monthsView", first: true, predicate: ["months"], descendants: true, read: IgxMonthsViewComponent }, { propertyName: "daysView", first: true, predicate: ["days"], descendants: true, read: IgxDaysViewComponent }, { propertyName: "prevPageBtn", first: true, predicate: ["prevPageBtn"], descendants: true }, { propertyName: "nextPageBtn", first: true, predicate: ["nextPageBtn"], descendants: true }, { propertyName: "monthsBtns", predicate: ["monthsBtn"], descendants: true }, { propertyName: "monthViews", predicate: ["days"], descendants: true, read: IgxDaysViewComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template let-result #defaultHeaderTitle>\n    @if (selection === 'single') {\n        <span>{{ resourceStrings.igx_calendar_select_date }}</span>\n    }\n    @if (selection === 'range') {\n        <span>{{ resourceStrings.igx_calendar_range_placeholder }}</span>\n    }\n</ng-template>\n\n<ng-template let-result #defaultHeaderDate>\n    @if (selection === 'single') {\n        <span>{{ getFormattedDate().weekday }},&nbsp;</span>\n        <span>{{ getFormattedDate().monthday }}</span>\n    }\n    @if (selection === 'range') {\n        <span>{{ selectedDates.length === 0 ? 'Start' : getFormattedRange().start}}</span>\n        <span>&nbsp;-&nbsp;</span>\n        <span>{{ selectedDates.length <= 1 ? 'End' : getFormattedRange().end}}</span>\n    }\n</ng-template>\n\n<!-- Month -->\n<ng-template #defaultMonth let-obj>\n    <span\n        #monthsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'LLLL') + ', ' + resourceStrings.igx_calendar_select_month\"\n        (keydown)=\"onActiveViewYearKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewYear($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedMonth(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n    @if (activeView === 'year') {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n    }\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n        (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedYear(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Month Year -->\n<ng-template #defaultMonthYear let-obj let-result>\n    @if (monthsViewNumber < 2 || obj.index < 1) {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">\n            {{ monthsViewNumber > 1 ?\n            (resourceStrings.igx_calendar_first_picker_of.replace('{0}', monthsViewNumber.toString()) + ' ' +\n            (obj.date | date: 'LLLL yyyy')) :\n            resourceStrings.igx_calendar_selected_month_is + (obj.date | date: 'LLLL yyyy')}}\n        </span>\n    }\n    <ng-container *ngTemplateOutlet=\"defaultMonth; context: {$implicit: obj}\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"defaultYear; context: {$implicit: obj}\"></ng-container>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n    <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_prev\"></igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_next\"></igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n    <div\n        #prevPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__prev\"\n        role=\"button\"\n        [attr.aria-label]=\"prevNavLabel((getPrevMonth(viewDate) | date: 'LLLL'))\"\n        data-action=\"prev\"\n        igxCalendarScrollPage\n        [startScroll]=\"startPrevPageScroll\"\n        [stopScroll]=\"stopPageScroll\"\n        (keydown)=\"$event.stopPropagation()\"\n    >\n        <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n    <div\n        #nextPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__next\"\n        role=\"button\"\n        [attr.aria-label]=\"nextNavLabel((getNextMonth(viewDate, monthsViewNumber) | date: 'LLLL'))\"\n        data-action=\"next\"\n        igxCalendarScrollPage\n        [startScroll]=\"startNextPageScroll\"\n        [stopScroll]=\"stopPageScroll\"\n        (keydown)=\"$event.stopPropagation()\"\n    >\n        <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- PICKER IN DAYS -->\n<ng-template #calendarDaysPicker let-i>\n    <section class=\"igx-calendar-picker\" [style.--calendar-row-start]=\"1 + (2 * i)\">\n        <div class=\"igx-calendar-picker__dates\" [attr.data-month]=\"i | IgxGetViewDate:viewDate:false\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultMonthYear; context: getContext(i)\">\n            </ng-container>\n        </div>\n        @if (this.orientation === 'horizontal' ? i === monthsViewNumber - 1 : i === 0) {\n            <div class=\"igx-calendar-picker__nav\">\n                <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n            </div>\n        }\n    </section>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultYear; context: getContext(0)\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultDecade;\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n\n@if (selection === 'single' && hasHeader || selection === 'range' && hasHeader) {\n    <header\n        aria-labelledby=\"igx-aria-calendar-title-month igx-aria-calendar-title-year\"\n        class=\"igx-calendar__header\"\n    >\n        <h5 id=\"igx-aria-calendar-title-year\" class=\"igx-calendar__header-year\">\n            <ng-container *ngTemplateOutlet=\"headerTitleTemplate ?? defaultHeaderTitle; context: headerContext\"></ng-container>\n        </h5>\n        <h2 id=\"igx-aria-calendar-title-month\" class=\"igx-calendar__header-date\">\n            <ng-container *ngTemplateOutlet=\"headerTemplate ? headerTemplate : defaultHeaderDate; context: headerContext\">\n            </ng-container>\n        </h2>\n    </header>\n}\n\n\n<div\n    #wrapper\n    [style.--calendar-months]=\"monthsViewNumber\"\n    [tabIndex]=\"0\"\n    class=\"igx-calendar__wrapper\"\n    [class.igx-calendar__wrapper--vertical]=\"orientation === 'vertical'\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.aria-multiselectable]=\"selection !== 'single'\"\n    aria-labelledby=\"calendar-desc\"\n    role=\"grid\"\n    (focus)=\"this.onWrapperFocus($event)\"\n    (blur)=\"this.onWrapperBlur($event)\"\n    >\n    <div id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n        @switch (selection) {\n            @case ('multi') {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_multi_selection.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_multi_selection}}\n            }\n            @case ('range') {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_range_selection.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_range_selection}}\n            }\n            @default {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_single_selection.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_single_selection}}\n            }\n        }\n    </div>\n    <section\n        class=\"igx-calendar__pickers\"\n        [class.igx-calendar__pickers--days]=\"isDefaultView\"\n        [class.igx-calendar__pickers--vertical]=\"orientation === 'vertical'\"\n    >\n        @if (isDefaultView) {\n            @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) {\n                <ng-container *ngTemplateOutlet=\"calendarDaysPicker; context: {$implicit: i}\"></ng-container>\n            }\n        }\n\n        @if (isYearView) {\n            <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n        }\n\n        @if (isDecadeView) {\n            <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n        }\n    </section>\n\n    <section class=\"igx-calendar__body\" [class.igx-calendar__body--vertical]=\"orientation === 'vertical'\" role=\"presentation\">\n        @if (isDefaultView) {\n            @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) {\n                <igx-days-view\n                    #days\n                    role=\"rowgroup\"\n                    [tabIndex]=\"-1\"\n                    [selection]=\"selection\"\n                    [locale]=\"locale\"\n                    [value]=\"value\"\n                    [(activeDate)]=\"activeDate\"\n                    [(previewRangeDate)]=\"previewRangeDate\"\n                    [viewDate]=\"i | IgxGetViewDate: viewDate\"\n                    [weekStart]=\"weekStart\"\n                    [formatOptions]=\"formatOptions\"\n                    [formatViews]=\"formatViews\"\n                    [disabledDates]=\"disabledDates\"\n                    [specialDates]=\"specialDates\"\n                    [style.--calendar-row-start]=\"(i + 1) * 2\"\n                    [hideLeadingDays]=\"hideOutsideDays || i !== 0\"\n                    [hideTrailingDays]=\"hideOutsideDays || i !== monthsViewNumber - 1\"\n                    [showWeekNumbers]=\"showWeekNumbers\"\n                    [showActiveDay]=\"showActiveDay\"\n                    [standalone]=\"false\"\n                    (swiperight)=\"previousPage()\"\n                    (swipeleft)=\"nextPage()\"\n                    (dateSelected)=\"handleDateSelection($event)\"\n                    (mousedown)=\"$event.preventDefault()\">\n                </igx-days-view>\n            }\n        }\n\n        @if (isYearView) {\n            <igx-months-view\n                #months\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.month\"\n                [monthFormat]=\"formatOptions.month\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (pageChanged)=\"updateYear($event)\"\n                (activeDateChanged)=\"updateActiveDescendant($event)\"\n                (selected)=\"changeMonth($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            </igx-months-view>\n        }\n\n        @if (isDecadeView) {\n            <igx-years-view\n                #decade\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.year\"\n                [yearFormat]=\"formatOptions.year\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (pageChanged)=\"updateYear($event)\"\n                (activeDateChanged)=\"updateActiveDescendant($event)\"\n                (selected)=\"changeYear($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            </igx-years-view>\n        }\n    </section>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxCalendarScrollPageDirective, selector: "[igxCalendarScrollPage]", inputs: ["startScroll", "stopScroll"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxDaysViewComponent, selector: "igx-days-view", inputs: ["id", "tabIndex", "role", "standalone", "showWeekNumbers", "activeDate", "previewRangeDate", "hideLeadingDays", "hideTrailingDays", "showActiveDay"], outputs: ["dateSelected", "pageChanged", "activeDateChange", "previewRangeDateChange"] }, { kind: "component", type: IgxMonthsViewComponent, selector: "igx-months-view", inputs: ["id", "standalone", "monthFormat", "formatView"] }, { kind: "component", type: IgxYearsViewComponent, selector: "igx-years-view", inputs: ["standalone", "yearFormat"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: IgxMonthViewSlotsCalendar, name: "IgxMonthViewSlots" }, { kind: "pipe", type: IgxGetViewDateCalendar, name: "IgxGetViewDate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCalendarComponent, decorators: [{
             type: Component,
             args: [{ providers: [
                         {
@@ -3878,8 +3878,8 @@ class IgxMonthPickerComponent extends IgxCalendarBaseDirective {
             : construct(value, i);
         return { $implicit: formatObject };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxMonthPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", 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: "21.0.8", ngImport: i0, type: IgxMonthPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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,
@@ -3891,7 +3891,7 @@ class IgxMonthPickerComponent extends IgxCalendarBaseDirective {
             },
         ], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "monthsView", first: true, predicate: ["months"], descendants: true, read: IgxMonthsViewComponent }, { propertyName: "dacadeView", first: true, predicate: ["decade"], descendants: true, read: IgxYearsViewComponent }, { propertyName: "daysView", first: true, predicate: ["days"], descendants: true, read: IgxDaysViewComponent }, { propertyName: "yearsBtn", first: true, predicate: ["yearsBtn"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_prev\"></igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_next\"></igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n    <div\n        #prevPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__prev\"\n        role=\"button\"\n        [attr.aria-label]=\"prevNavLabel((getPrevYearDate(viewDate) | date: 'yyyy'))\"\n        data-action=\"prev\"\n        igxCalendarScrollPage\n        (mousedown)=\"previousPage()\"\n        (keydown)=\"changePageKB($event, false)\"\n    >\n        <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n    <div\n        #nextPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__next\"\n        role=\"button\"\n        [attr.aria-label]=\"nextNavLabel((getNextYearDate(viewDate) | date: 'yyyy'))\"\n        data-action=\"next\"\n        igxCalendarScrollPage\n        (mousedown)=\"nextPage()\"\n        (keydown)=\"changePageKB($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n    @if (activeView === 'year') {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n    }\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n        (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedYear(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n    <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\">\n            <ng-container\n                *ngTemplateOutlet=\"defaultYear; context: getContext(0)\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n            <ng-container\n                    *ngTemplateOutlet=\"defaultDecade;\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<div\n    #wrapper\n    [tabIndex]=\"0\"\n    class=\"igx-calendar__wrapper\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.aria-multiselectable]=\"selection !== 'single'\"\n    aria-labelledby=\"calendar-desc\"\n    role=\"grid\"\n    (focus)=\"this.onWrapperFocus($event)\"\n    (blur)=\"this.onWrapperBlur($event)\"\n    >\n    <caption id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n        {{ resourceStrings.igx_calendar_singular_single_selection}}\n    </caption>\n\n    <section class=\"igx-calendar__pickers\">\n        @if (isDefaultView) {\n            <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n        }\n\n        @if (isDecadeView) {\n            <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n        }\n    </section>\n\n    <section class=\"igx-calendar__body\">\n        @if (isDefaultView) {\n            <igx-months-view\n                #months\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.month\"\n                [monthFormat]=\"formatOptions.month\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (selected)=\"selectMonth($event)\"\n                (pageChanged)=\"updateDate($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            >\n            </igx-months-view>\n        }\n\n        @if (isDecadeView) {\n            <igx-years-view\n                #decade\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.year\"\n                [yearFormat]=\"formatOptions.year\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (selected)=\"selectYear($event)\"\n                (pageChanged)=\"updateDate($event)\"\n                (mousedown)=\"$event.preventDefault()\"\n            >\n            </igx-years-view>\n        }\n    </section>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxMonthsViewComponent, selector: "igx-months-view", inputs: ["id", "standalone", "monthFormat", "formatView"] }, { kind: "component", type: IgxYearsViewComponent, selector: "igx-years-view", inputs: ["standalone", "yearFormat"] }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxMonthPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxMonthPickerComponent, decorators: [{
             type: Component,
             args: [{ providers: [
                         {
@@ -3963,11 +3963,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: "21.0.2", ngImport: i0, type: IgxCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", 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: "21.0.2", ngImport: i0, type: IgxCalendarModule, imports: [IgxCalendarComponent, IgxMonthPickerComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", 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: "21.0.8", ngImport: i0, type: IgxCalendarModule, imports: [IgxCalendarComponent, IgxMonthPickerComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCalendarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [