igniteui-angular 22.1.0-beta.5 → 22.1.0-beta.7

package/fesm2022/igniteui-angular-calendar.mjs

@@ -1368,7 +1368,7 @@ class IgxCalendarBaseDirective {
      */
     formattedYear(value) {
         if (Array.isArray(value)) {
-            return undefined;
+            return;
         }
         if (this.formatViews.year) {
             return this.formatterYear.format(value);
@@ -2384,7 +2384,7 @@ class IgxDaysViewComponent extends IgxCalendarBaseDirective {
      */
     isSelected(date) {
         const dates = this.value;
-        const hasValue = this.value || (Array.isArray(this.value) && dates.length === 1);
+        const hasValue = this.value || (Array.isArray(this.value) && this.value.length === 1);
         if (isDateInRanges(date, this.disabledDates)) {
             return false;
         }
@@ -2410,7 +2410,6 @@ class IgxDaysViewComponent extends IgxCalendarBaseDirective {
                 },
             ]);
         }
-        return undefined;
     }
     /**
      * @hidden
@@ -3467,7 +3466,7 @@ class IgxCalendarComponent extends IgxCalendarBaseDirective {
                 multi: false,
                 provide: KeyboardNavigationService,
             },
-        ], queries: [{ propertyName: "headerTemplateDirective", first: true, predicate: i0.forwardRef(() => IgxCalendarHeaderTemplateDirective), descendants: true, read: IgxCalendarHeaderTemplateDirective, static: true }, { propertyName: "headerTitleTemplateDirective", first: true, predicate: i0.forwardRef(() => IgxCalendarHeaderTitleTemplateDirective), descendants: true, read: IgxCalendarHeaderTitleTemplateDirective, static: true }, { propertyName: "subheaderTemplateDirective", first: true, predicate: i0.forwardRef(() => IgxCalendarSubheaderTemplateDirective), descendants: true, read: IgxCalendarSubheaderTemplateDirective, static: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "dacadeView", first: true, predicate: ["decade"], descendants: true, read: IgxYearsViewComponent }, { propertyName: "monthsView", first: true, predicate: ["months"], descendants: true, read: IgxMonthsViewComponent }, { propertyName: "daysView", first: true, predicate: ["days"], descendants: true, read: IgxDaysViewComponent }, { propertyName: "prevPageBtn", first: true, predicate: ["prevPageBtn"], descendants: true }, { propertyName: "nextPageBtn", first: true, predicate: ["nextPageBtn"], descendants: true }, { propertyName: "monthsBtns", predicate: ["monthsBtn"], descendants: true }, { propertyName: "monthViews", predicate: ["days"], descendants: true, read: IgxDaysViewComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template let-result #defaultHeaderTitle>\n    @if (selection === 'single') {\n        <span>{{ resourceStrings.igx_calendar_select_date }}</span>\n    }\n    @if (selection === 'range') {\n        <span>{{ resourceStrings.igx_calendar_range_placeholder }}</span>\n    }\n</ng-template>\n\n<ng-template let-result #defaultHeaderDate>\n    @if (selection === 'single') {\n        <span>{{ getFormattedDate().weekday }},&nbsp;</span>\n        <span>{{ getFormattedDate().monthday }}</span>\n    }\n    @if (selection === 'range') {\n        <span>{{ selectedDates.length === 0 ? 'Start' : getFormattedRange().start}}</span>\n        <span>&nbsp;-&nbsp;</span>\n        <span>{{ selectedDates.length <= 1 ? 'End' : getFormattedRange().end}}</span>\n    }\n</ng-template>\n\n<!-- Month -->\n<ng-template #defaultMonth let-obj>\n    <span\n        #monthsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'LLLL') + ', ' + resourceStrings.igx_calendar_select_month\"\n        (keydown)=\"onActiveViewYearKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewYear($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedMonth(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n    @if (activeView === 'year') {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n    }\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n        (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedYear(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Month Year -->\n<ng-template #defaultMonthYear let-obj let-result>\n    @if (monthsViewNumber < 2 || obj.index < 1) {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">\n            {{ monthsViewNumber > 1 ?\n            (resourceStrings.igx_calendar_first_picker_of!.replace('{0}', monthsViewNumber.toString()) + ' ' +\n            (obj.date | date: 'LLLL yyyy')) :\n            resourceStrings.igx_calendar_selected_month_is + (obj.date | date: 'LLLL yyyy')}}\n        </span>\n    }\n    <ng-container *ngTemplateOutlet=\"defaultMonth; context: {$implicit: obj}\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"defaultYear; context: {$implicit: obj}\"></ng-container>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n    <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_prev\"></igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_next\"></igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n    <div\n        #prevPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__prev\"\n        role=\"button\"\n        [attr.aria-label]=\"prevNavLabel((getPrevMonth(viewDate) | date: 'LLLL'))\"\n        data-action=\"prev\"\n        igxCalendarScrollPage\n        [startScroll]=\"startPrevPageScroll\"\n        [stopScroll]=\"stopPageScroll\"\n        (keydown)=\"$event.stopPropagation()\"\n    >\n        <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n    <div\n        #nextPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__next\"\n        role=\"button\"\n        [attr.aria-label]=\"nextNavLabel((getNextMonth(viewDate, monthsViewNumber) | date: 'LLLL'))\"\n        data-action=\"next\"\n        igxCalendarScrollPage\n        [startScroll]=\"startNextPageScroll\"\n        [stopScroll]=\"stopPageScroll\"\n        (keydown)=\"$event.stopPropagation()\"\n    >\n        <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- PICKER IN DAYS -->\n<ng-template #calendarDaysPicker let-i>\n    <section class=\"igx-calendar-picker\" [style.--calendar-row-start]=\"1 + (2 * i)\">\n        <div class=\"igx-calendar-picker__dates\" [attr.data-month]=\"i | IgxGetViewDate:viewDate:false\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultMonthYear; context: getContext(i)\">\n            </ng-container>\n        </div>\n        @if (this.orientation === 'horizontal' ? i === monthsViewNumber - 1 : i === 0) {\n            <div class=\"igx-calendar-picker__nav\">\n                <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n            </div>\n        }\n    </section>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultYear; context: getContext(0)\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultDecade;\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n\n@if (selection === 'single' && hasHeader || selection === 'range' && hasHeader) {\n    <header\n        aria-labelledby=\"igx-aria-calendar-title-month igx-aria-calendar-title-year\"\n        class=\"igx-calendar__header\"\n    >\n        <h5 id=\"igx-aria-calendar-title-year\" class=\"igx-calendar__header-year\" 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;\">\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.1", ngImport: i0, type: IgxCalendarComponent, decorators: [{
             type: Component,
@@ -3491,7 +3490,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", 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;\">\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"]