igniteui-angular 18.2.11 → 18.2.13

package/fesm2022/igniteui-angular.mjs

@@ -4,7 +4,7 @@ import * as i4 from '@angular/forms';
 import { NgModel, NgControl, FormControlName, NG_VALUE_ACCESSOR, Validators, NG_VALIDATORS, FormGroup, FormsModule, RequiredValidator, MinValidator, MaxValidator, EmailValidator, MinLengthValidator, MaxLengthValidator, PatternValidator, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { Observable, NEVER, Subject, fromEvent, BehaviorSubject, interval, animationFrameScheduler, noop, merge, Subscription, timer, takeUntil as takeUntil$1, pipe } from 'rxjs';
 import { takeUntil, filter, throttle, throttleTime, first as first$2, startWith, take, debounce, tap, switchMap, skipLast, debounceTime, map, shareReplay, takeWhile, timeout, pluck } from 'rxjs/operators';
-import { isPlatformBrowser, formatDate as formatDate$1, CurrencyPipe, formatPercent, formatNumber, getLocaleCurrencyCode, DatePipe, getLocaleDateFormat, FormatWidth, getLocaleDateTimeFormat, DOCUMENT, NgTemplateOutlet, NgIf, NgClass, NgSwitch, NgSwitchCase, NgSwitchDefault, NgFor, TitleCasePipe, getLocaleFirstDayOfWeek, NgStyle, getLocaleCurrencySymbol, formatCurrency as formatCurrency$1, getLocaleNumberFormat, NumberFormatStyle, DecimalPipe, PercentPipe, getCurrencySymbol, AsyncPipe } from '@angular/common';
+import { isPlatformBrowser, formatDate as formatDate$1, CurrencyPipe, formatPercent, formatNumber, getLocaleCurrencyCode, DatePipe, getLocaleDateFormat, FormatWidth, getLocaleDateTimeFormat, DOCUMENT, NgIf, NgTemplateOutlet, NgClass, NgSwitch, NgSwitchCase, NgSwitchDefault, NgFor, TitleCasePipe, getLocaleFirstDayOfWeek, NgStyle, getLocaleCurrencySymbol, formatCurrency as formatCurrency$1, getLocaleNumberFormat, NumberFormatStyle, DecimalPipe, PercentPipe, getCurrencySymbol, AsyncPipe } from '@angular/common';
 import { mergeWith, isEqual as isEqual$1 } from 'lodash-es';
 import { strToU8, zip } from 'fflate';
 import { scaleInVerTop, scaleOutVerTop, AnimationUtil, fadeIn, fadeOut, slideInTop, slideOutTop, slideInBottom, slideOutBottom, scaleInHorRight, scaleOutHorRight, scaleInHorLeft, scaleOutHorLeft, scaleInVerBottom, scaleOutVerBottom, scaleInCenter, growVerIn, growVerOut, slideInLeft } from 'igniteui-angular/animations';
@@ -5953,7 +5953,9 @@ class IgxOverlayService {
             return;
         }
         if (settings) {
-            // TODO: update attach
+            settings.positionStrategy ??= info.settings.positionStrategy;
+            settings.scrollStrategy ??= info.settings.scrollStrategy;
+            info.settings = { ...info.settings, ...settings };
         }
         this.updateSize(info);
         info.settings.positionStrategy.position(info.elementRef.nativeElement.parentElement, { width: info.initialSize.width, height: info.initialSize.height }, this._document, true, info.settings.target);
@@ -10242,7 +10244,7 @@ class IgxIconComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: "igx-icon", standalone: true, imports: [NgTemplateOutlet, NgIf], template: "<!-- This is only here for backwards compatibility in case  -->\n<!-- ligatures are used and the name is provided as content -->\n@if (!iconRef.name) {\n    <ng-content></ng-content>\n}\n\n@switch (iconRef.type) {\n    @case (\"liga\") {{{ iconRef.name }}}\n\n    @case (\"svg\") {\n        <div [innerHTML]=\"getSvg\"></div>\n    }\n}\n" }]
+            args: [{ selector: "igx-icon", standalone: true, template: "<!-- This is only here for backwards compatibility in case  -->\n<!-- ligatures are used and the name is provided as content -->\n@if (!iconRef.name) {\n    <ng-content></ng-content>\n}\n\n@switch (iconRef.type) {\n    @case (\"liga\") {{{ iconRef.name }}}\n\n    @case (\"svg\") {\n        <div [innerHTML]=\"getSvg\"></div>\n    }\n}\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: IgxIconService }, { type: i0.ChangeDetectorRef }], propDecorators: { elementClasses: [{
                 type: HostBinding,
                 args: ["class"]
@@ -24303,7 +24305,7 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
      * ```
      */
     open(overlaySettings) {
-        const settings = overlaySettings || this.getDefaultOverlaySettings();
+        const settings = { ...{}, ...this.getDefaultOverlaySettings(), ...overlaySettings };
         this.toggleDirective.open(settings);
         this.updateScrollPosition();
     }
@@ -24752,7 +24754,7 @@ class IgxGridActionButtonComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxGridActionButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-grid-action-button', standalone: true, imports: [NgIf, IgxButtonDirective, IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective], template: "<ng-container *ngIf=\"!asMenuItem\">\n    <button type=\"button\" [title]=\"labelText\" igxIconButton=\"flat\" igxRipple (click)=\"handleClick($event)\" (mousedown)=\"preventEvent($event)\">\n        <igx-icon *ngIf=\"iconSet\" [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n        <igx-icon *ngIf=\"!iconSet\" >{{iconName}}</igx-icon>\n    </button>\n</ng-container>\n\n<ng-template #menuItemTemplate>\n    <ng-container *ngIf=\"asMenuItem\">\n        <div #container [className]=\"containerClass\">\n            <igx-icon *ngIf=\"iconSet\" [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n            <igx-icon *ngIf=\"!iconSet\" >{{iconName}}</igx-icon>\n            <label igxLabel>{{labelText}}</label>\n        </div>\n    </ng-container>\n</ng-template>\n" }]
+            args: [{ selector: 'igx-grid-action-button', standalone: true, imports: [NgIf, IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective], template: "<ng-container *ngIf=\"!asMenuItem\">\n    <button type=\"button\" [title]=\"labelText\" igxIconButton=\"flat\" igxRipple (click)=\"handleClick($event)\" (mousedown)=\"preventEvent($event)\">\n        <igx-icon *ngIf=\"iconSet\" [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n        <igx-icon *ngIf=\"!iconSet\" >{{iconName}}</igx-icon>\n    </button>\n</ng-container>\n\n<ng-template #menuItemTemplate>\n    <ng-container *ngIf=\"asMenuItem\">\n        <div #container [className]=\"containerClass\">\n            <igx-icon *ngIf=\"iconSet\" [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n            <igx-icon *ngIf=\"!iconSet\" >{{iconName}}</igx-icon>\n            <label igxLabel>{{labelText}}</label>\n        </div>\n    </ng-container>\n</ng-template>\n" }]
         }], propDecorators: { container: [{
                 type: ViewChild,
                 args: ['container']
@@ -28021,7 +28023,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                         NgIf,
                         NgFor,
                         NgTemplateOutlet,
-                        IgxButtonDirective,
                         IgxIconButtonDirective,
                         IgxRippleDirective,
                         IgxToggleActionDirective,
@@ -30605,6 +30606,14 @@ class IgxMonthsViewComponent extends IgxCalendarViewDirective {
          */
         this._monthFormat = "short";
     }
+    /**
+     * @hidden
+     */
+    onMouseDown() {
+        if (this.tabIndex !== -1) {
+            this.el.nativeElement.focus();
+        }
+    }
     /**
      * Returns the locale representation of the month in the months view.
      *
@@ -30651,7 +30660,7 @@ class IgxMonthsViewComponent extends IgxCalendarViewDirective {
                 provide: DAY_INTERVAL_TOKEN,
                 useValue: "month",
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"igx-calendar-view__items\" role=\"row\">\n    <span\n        igxCalendarMonth\n        #item=\"igxCalendarMonth\"\n        *ngFor=\"let month of range; trackBy: monthTracker\"\n        class=\"igx-calendar-view__item\"\n        role=\"gridcell\"\n        [attr.id]=\"month.getTime()\"\n        [attr.aria-label]=\"formattedMonth(month).long\"\n        [attr.aria-selected]=\"item.isSelected\"\n        [value]=\"month\"\n        [date]=\"date\"\n        [showActive]=\"showActive\"\n        (itemSelection)=\"selectDate($event)\"\n    >\n        <span class=\"igx-calendar-view__item-inner\" aria-hidden=\"true\">\n            {{ formattedMonth(month).formatted | titlecase }}\n        </span>\n    </span>\n</div>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: IgxCalendarMonthDirective, selector: "[igxCalendarMonth]", exportAs: ["igxCalendarMonth"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"igx-calendar-view__items\" role=\"row\">\n    <span\n        igxCalendarMonth\n        #item=\"igxCalendarMonth\"\n        *ngFor=\"let month of range; trackBy: monthTracker\"\n        class=\"igx-calendar-view__item\"\n        role=\"gridcell\"\n        [attr.id]=\"month.getTime()\"\n        [attr.aria-label]=\"formattedMonth(month).long\"\n        [attr.aria-selected]=\"item.isSelected\"\n        [value]=\"month\"\n        [date]=\"date\"\n        [showActive]=\"showActive\"\n        (itemSelection)=\"selectDate($event)\"\n        (mousedown)=\"onMouseDown()\"\n    >\n        <span class=\"igx-calendar-view__item-inner\" aria-hidden=\"true\">\n            {{ formattedMonth(month).formatted | titlecase }}\n        </span>\n    </span>\n</div>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: IgxCalendarMonthDirective, selector: "[igxCalendarMonth]", exportAs: ["igxCalendarMonth"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxMonthsViewComponent, decorators: [{
             type: Component,
@@ -30665,7 +30674,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                             provide: DAY_INTERVAL_TOKEN,
                             useValue: "month",
                         },
-                    ], selector: "igx-months-view", standalone: true, imports: [NgFor, IgxCalendarMonthDirective, TitleCasePipe, DatePipe], template: "<div class=\"igx-calendar-view__items\" role=\"row\">\n    <span\n        igxCalendarMonth\n        #item=\"igxCalendarMonth\"\n        *ngFor=\"let month of range; trackBy: monthTracker\"\n        class=\"igx-calendar-view__item\"\n        role=\"gridcell\"\n        [attr.id]=\"month.getTime()\"\n        [attr.aria-label]=\"formattedMonth(month).long\"\n        [attr.aria-selected]=\"item.isSelected\"\n        [value]=\"month\"\n        [date]=\"date\"\n        [showActive]=\"showActive\"\n        (itemSelection)=\"selectDate($event)\"\n    >\n        <span class=\"igx-calendar-view__item-inner\" aria-hidden=\"true\">\n            {{ formattedMonth(month).formatted | titlecase }}\n        </span>\n    </span>\n</div>\n" }]
+                    ], selector: "igx-months-view", standalone: true, imports: [NgFor, IgxCalendarMonthDirective, TitleCasePipe], template: "<div class=\"igx-calendar-view__items\" role=\"row\">\n    <span\n        igxCalendarMonth\n        #item=\"igxCalendarMonth\"\n        *ngFor=\"let month of range; trackBy: monthTracker\"\n        class=\"igx-calendar-view__item\"\n        role=\"gridcell\"\n        [attr.id]=\"month.getTime()\"\n        [attr.aria-label]=\"formattedMonth(month).long\"\n        [attr.aria-selected]=\"item.isSelected\"\n        [value]=\"month\"\n        [date]=\"date\"\n        [showActive]=\"showActive\"\n        (itemSelection)=\"selectDate($event)\"\n        (mousedown)=\"onMouseDown()\"\n    >\n        <span class=\"igx-calendar-view__item-inner\" aria-hidden=\"true\">\n            {{ formattedMonth(month).formatted | titlecase }}\n        </span>\n    </span>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DAY_INTERVAL_TOKEN]
@@ -30789,6 +30798,14 @@ class IgxYearsViewComponent extends IgxCalendarViewDirective {
             year: this.yearFormat,
         });
     }
+    /**
+     * @hidden
+     */
+    onMouseDown() {
+        if (this.tabIndex !== -1) {
+            this.el.nativeElement.focus();
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxYearsViewComponent, deps: [{ token: i0.ElementRef }, { token: DAY_INTERVAL_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: IgxYearsViewComponent, isStandalone: true, selector: "igx-years-view", inputs: { standalone: "standalone", yearFormat: "yearFormat" }, host: { properties: { "class.igx-calendar-view": "this.viewClass", "class.igx-calendar-view--standalone": "this.standalone" } }, providers: [
             {
@@ -30800,7 +30817,7 @@ class IgxYearsViewComponent extends IgxCalendarViewDirective {
                 provide: DAY_INTERVAL_TOKEN,
                 useValue: "year",
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"igx-calendar-view__items\" role=\"row\">\n    <span\n        igxCalendarYear\n        #item=\"igxCalendarYear\"\n        *ngFor=\"let year of range; trackBy: yearTracker\"\n        class=\"igx-calendar-view__item\"\n        role=\"gridcell\"\n        [attr.id]=\"year.getTime()\"\n        [attr.aria-label]=\"formattedYear(year).long\"\n        [attr.aria-selected]=\"item.isSelected\"\n        [attr.aria-current]=\"item.isCurrent\"\n        [value]=\"year\"\n        [date]=\"date\"\n        [showActive]=\"showActive\"\n        (itemSelection)=\"selectDate($event)\"\n    >\n        <span class=\"igx-calendar-view__item-inner\" aria-hidden=\"true\">\n            {{ formattedYear(year).formatted }}\n        </span>\n    </span>\n</div>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: IgxCalendarYearDirective, selector: "[igxCalendarYear]", exportAs: ["igxCalendarYear"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"igx-calendar-view__items\" role=\"row\">\n    <span\n        igxCalendarYear\n        #item=\"igxCalendarYear\"\n        *ngFor=\"let year of range; trackBy: yearTracker\"\n        class=\"igx-calendar-view__item\"\n        role=\"gridcell\"\n        [attr.id]=\"year.getTime()\"\n        [attr.aria-label]=\"formattedYear(year).long\"\n        [attr.aria-selected]=\"item.isSelected\"\n        [attr.aria-current]=\"item.isCurrent\"\n        [value]=\"year\"\n        [date]=\"date\"\n        [showActive]=\"showActive\"\n        (itemSelection)=\"selectDate($event)\"\n        (mousedown)=\"onMouseDown()\"\n    >\n        <span class=\"igx-calendar-view__item-inner\" aria-hidden=\"true\">\n            {{ formattedYear(year).formatted }}\n        </span>\n    </span>\n</div>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: IgxCalendarYearDirective, selector: "[igxCalendarYear]", exportAs: ["igxCalendarYear"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxYearsViewComponent, decorators: [{
             type: Component,
@@ -30814,7 +30831,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                             provide: DAY_INTERVAL_TOKEN,
                             useValue: "year",
                         },
-                    ], selector: "igx-years-view", standalone: true, imports: [NgFor, IgxCalendarYearDirective], template: "<div class=\"igx-calendar-view__items\" role=\"row\">\n    <span\n        igxCalendarYear\n        #item=\"igxCalendarYear\"\n        *ngFor=\"let year of range; trackBy: yearTracker\"\n        class=\"igx-calendar-view__item\"\n        role=\"gridcell\"\n        [attr.id]=\"year.getTime()\"\n        [attr.aria-label]=\"formattedYear(year).long\"\n        [attr.aria-selected]=\"item.isSelected\"\n        [attr.aria-current]=\"item.isCurrent\"\n        [value]=\"year\"\n        [date]=\"date\"\n        [showActive]=\"showActive\"\n        (itemSelection)=\"selectDate($event)\"\n    >\n        <span class=\"igx-calendar-view__item-inner\" aria-hidden=\"true\">\n            {{ formattedYear(year).formatted }}\n        </span>\n    </span>\n</div>\n" }]
+                    ], selector: "igx-years-view", standalone: true, imports: [NgFor, IgxCalendarYearDirective], template: "<div class=\"igx-calendar-view__items\" role=\"row\">\n    <span\n        igxCalendarYear\n        #item=\"igxCalendarYear\"\n        *ngFor=\"let year of range; trackBy: yearTracker\"\n        class=\"igx-calendar-view__item\"\n        role=\"gridcell\"\n        [attr.id]=\"year.getTime()\"\n        [attr.aria-label]=\"formattedYear(year).long\"\n        [attr.aria-selected]=\"item.isSelected\"\n        [attr.aria-current]=\"item.isCurrent\"\n        [value]=\"year\"\n        [date]=\"date\"\n        [showActive]=\"showActive\"\n        (itemSelection)=\"selectDate($event)\"\n        (mousedown)=\"onMouseDown()\"\n    >\n        <span class=\"igx-calendar-view__item-inner\" aria-hidden=\"true\">\n            {{ formattedYear(year).formatted }}\n        </span>\n    </span>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DAY_INTERVAL_TOKEN]
@@ -33277,7 +33294,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                             multi: false,
                             provide: KeyboardNavigationService,
                         },
-                    ], selector: 'igx-calendar', standalone: true, imports: [NgIf, NgTemplateOutlet, IgxCalendarScrollPageDirective, NgStyle, IgxIconComponent, NgFor, IgxDaysViewComponent, IgxMonthsViewComponent, IgxYearsViewComponent, DatePipe, IgxMonthViewSlotsCalendar, IgxGetViewDateCalendar], template: "<ng-template let-result #defaultHeaderTitle>\n    <ng-container *ngIf=\"selection === 'single'\">\n        <span>{{ resourceStrings.igx_calendar_select_date }}</span>\n    </ng-container>\n    <ng-container *ngIf=\"selection === 'range'\">\n        <span>{{ resourceStrings.igx_calendar_range_placeholder }}</span>\n    </ng-container>\n</ng-template>\n\n<ng-template let-result #defaultHeaderDate>\n    <ng-container *ngIf=\"selection === 'single'\">\n        <span>{{ getFormattedDate().weekday }},&nbsp;</span>\n        <span>{{ getFormattedDate().monthday }}</span>\n    </ng-container>\n    <ng-container *ngIf=\"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    </ng-container>\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    <span *ngIf=\"activeView === 'year'\" class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\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    <span *ngIf=\"monthsViewNumber < 2 || obj.index < 1\" 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    <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        <div\n            class=\"igx-calendar-picker__nav\"\n            *ngIf=\"this.orientation === 'horizontal' ? i === monthsViewNumber - 1 : i === 0\"\n        >\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 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<header\n    aria-labelledby=\"igx-aria-calendar-title-month igx-aria-calendar-title-year\"\n    class=\"igx-calendar__header\"\n    *ngIf=\"selection === 'single' && hasHeader || selection === 'range' && hasHeader\">\n    <h5 id=\"igx-aria-calendar-title-year\" class=\"igx-calendar__header-year\">\n        <ng-container *ngTemplateOutlet=\"headerTitleTemplate ?? defaultHeaderTitle; context: headerContext\"></ng-container>\n    </h5>\n    <h2 id=\"igx-aria-calendar-title-month\" class=\"igx-calendar__header-date\">\n        <ng-container *ngTemplateOutlet=\"headerTemplate ? headerTemplate : defaultHeaderDate; context: headerContext\">\n        </ng-container>\n    </h2>\n</header>\n\n\n<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    >\n    <caption id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n        <ng-container *ngIf=\"selection === 'multi'\">\n            {{ monthsViewNumber && monthsViewNumber > 1 ?\n            resourceStrings.igx_calendar_multi_selection.replace('{0}', monthsViewNumber.toString()) :\n            resourceStrings.igx_calendar_singular_multi_selection}}\n        </ng-container>\n        <ng-container *ngIf=\"selection === 'range'\">\n            {{ monthsViewNumber && monthsViewNumber > 1 ?\n            resourceStrings.igx_calendar_range_selection.replace('{0}', monthsViewNumber.toString()) :\n            resourceStrings.igx_calendar_singular_range_selection}}\n        </ng-container>\n        <ng-container *ngIf=\"selection === 'single'\">\n            {{ monthsViewNumber && monthsViewNumber > 1 ?\n            resourceStrings.igx_calendar_single_selection.replace('{0}', monthsViewNumber.toString()) :\n            resourceStrings.igx_calendar_singular_single_selection}}\n        </ng-container>\n    </caption>\n    <section\n        class=\"igx-calendar__pickers\"\n        [class.igx-calendar__pickers--days]=\"isDefaultView\"\n        [class.igx-calendar__pickers--vertical]=\"orientation === 'vertical'\"\n    >\n        <ng-container *ngIf=\"isDefaultView\">\n            <ng-container *ngFor=\"let view of monthsViewNumber | IgxMonthViewSlots; index as i\">\n                <ng-container *ngTemplateOutlet=\"calendarDaysPicker; context: {$implicit: i}\"></ng-container>\n            </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"isYearView\">\n            <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"isDecadeView\">\n            <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n        </ng-container>\n    </section>\n\n    <section class=\"igx-calendar__body\" [class.igx-calendar__body--vertical]=\"orientation === 'vertical'\" role=\"presentation\">\n        <ng-container *ngIf=\"isDefaultView\">\n            <ng-container *ngFor=\"let view of monthsViewNumber | IgxMonthViewSlots; index as i\">\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            </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"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        </ng-container>\n\n        <ng-container *ngIf=\"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        </ng-container>\n    </section>\n</div>\n" }]
+                    ], selector: 'igx-calendar', standalone: true, imports: [NgIf, NgTemplateOutlet, IgxCalendarScrollPageDirective, IgxIconComponent, NgFor, IgxDaysViewComponent, IgxMonthsViewComponent, IgxYearsViewComponent, DatePipe, IgxMonthViewSlotsCalendar, IgxGetViewDateCalendar], template: "<ng-template let-result #defaultHeaderTitle>\n    <ng-container *ngIf=\"selection === 'single'\">\n        <span>{{ resourceStrings.igx_calendar_select_date }}</span>\n    </ng-container>\n    <ng-container *ngIf=\"selection === 'range'\">\n        <span>{{ resourceStrings.igx_calendar_range_placeholder }}</span>\n    </ng-container>\n</ng-template>\n\n<ng-template let-result #defaultHeaderDate>\n    <ng-container *ngIf=\"selection === 'single'\">\n        <span>{{ getFormattedDate().weekday }},&nbsp;</span>\n        <span>{{ getFormattedDate().monthday }}</span>\n    </ng-container>\n    <ng-container *ngIf=\"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    </ng-container>\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    <span *ngIf=\"activeView === 'year'\" class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\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    <span *ngIf=\"monthsViewNumber < 2 || obj.index < 1\" 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    <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        <div\n            class=\"igx-calendar-picker__nav\"\n            *ngIf=\"this.orientation === 'horizontal' ? i === monthsViewNumber - 1 : i === 0\"\n        >\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 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<header\n    aria-labelledby=\"igx-aria-calendar-title-month igx-aria-calendar-title-year\"\n    class=\"igx-calendar__header\"\n    *ngIf=\"selection === 'single' && hasHeader || selection === 'range' && hasHeader\">\n    <h5 id=\"igx-aria-calendar-title-year\" class=\"igx-calendar__header-year\">\n        <ng-container *ngTemplateOutlet=\"headerTitleTemplate ?? defaultHeaderTitle; context: headerContext\"></ng-container>\n    </h5>\n    <h2 id=\"igx-aria-calendar-title-month\" class=\"igx-calendar__header-date\">\n        <ng-container *ngTemplateOutlet=\"headerTemplate ? headerTemplate : defaultHeaderDate; context: headerContext\">\n        </ng-container>\n    </h2>\n</header>\n\n\n<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    >\n    <caption id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n        <ng-container *ngIf=\"selection === 'multi'\">\n            {{ monthsViewNumber && monthsViewNumber > 1 ?\n            resourceStrings.igx_calendar_multi_selection.replace('{0}', monthsViewNumber.toString()) :\n            resourceStrings.igx_calendar_singular_multi_selection}}\n        </ng-container>\n        <ng-container *ngIf=\"selection === 'range'\">\n            {{ monthsViewNumber && monthsViewNumber > 1 ?\n            resourceStrings.igx_calendar_range_selection.replace('{0}', monthsViewNumber.toString()) :\n            resourceStrings.igx_calendar_singular_range_selection}}\n        </ng-container>\n        <ng-container *ngIf=\"selection === 'single'\">\n            {{ monthsViewNumber && monthsViewNumber > 1 ?\n            resourceStrings.igx_calendar_single_selection.replace('{0}', monthsViewNumber.toString()) :\n            resourceStrings.igx_calendar_singular_single_selection}}\n        </ng-container>\n    </caption>\n    <section\n        class=\"igx-calendar__pickers\"\n        [class.igx-calendar__pickers--days]=\"isDefaultView\"\n        [class.igx-calendar__pickers--vertical]=\"orientation === 'vertical'\"\n    >\n        <ng-container *ngIf=\"isDefaultView\">\n            <ng-container *ngFor=\"let view of monthsViewNumber | IgxMonthViewSlots; index as i\">\n                <ng-container *ngTemplateOutlet=\"calendarDaysPicker; context: {$implicit: i}\"></ng-container>\n            </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"isYearView\">\n            <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"isDecadeView\">\n            <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n        </ng-container>\n    </section>\n\n    <section class=\"igx-calendar__body\" [class.igx-calendar__body--vertical]=\"orientation === 'vertical'\" role=\"presentation\">\n        <ng-container *ngIf=\"isDefaultView\">\n            <ng-container *ngFor=\"let view of monthsViewNumber | IgxMonthViewSlots; index as i\">\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            </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"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        </ng-container>\n\n        <ng-container *ngIf=\"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        </ng-container>\n    </section>\n</div>\n" }]
         }], propDecorators: { wrapper: [{
                 type: ViewChild,
                 args: ["wrapper"]
@@ -33722,7 +33739,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                         },
                     ], selector: "igx-month-picker", standalone: true, imports: [
                         NgIf,
-                        NgStyle,
                         NgTemplateOutlet,
                         DatePipe,
                         IgxIconComponent,
@@ -38501,6 +38517,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
  * @hidden
  */
 class IgxComboAddItemComponent extends IgxComboItemComponent {
+    get isDropDownItem() {
+        return false;
+    }
     get selected() {
         return false;
     }
@@ -38511,7 +38530,7 @@ class IgxComboAddItemComponent extends IgxComboItemComponent {
         this.comboAPI.add_custom_item();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxComboAddItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: IgxComboAddItemComponent, isStandalone: true, selector: "igx-combo-add-item", providers: [{ provide: IgxComboItemComponent, useExisting: IgxComboAddItemComponent }], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: IgxComboAddItemComponent, isStandalone: true, selector: "igx-combo-add-item", host: { properties: { "class.igx-drop-down__item": "this.isDropDownItem" } }, providers: [{ provide: IgxComboItemComponent, useExisting: IgxComboAddItemComponent }], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxComboAddItemComponent, decorators: [{
             type: Component,
@@ -38521,7 +38540,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                     providers: [{ provide: IgxComboItemComponent, useExisting: IgxComboAddItemComponent }],
                     standalone: true
                 }]
-        }] });
+        }], propDecorators: { isDropDownItem: [{
+                type: HostBinding,
+                args: ['class.igx-drop-down__item']
+            }] } });
 
 /** @hidden */
 class IgxComboDropDownComponent extends IgxDropDownComponent {
@@ -41382,6 +41404,7 @@ class IgxDialogComponent {
         const eventArgs = { dialog: this, event: null, cancel: false };
         this.opening.emit(eventArgs);
         if (!eventArgs.cancel) {
+            overlaySettings = { ...{}, ...this._overlayDefaultSettings, ...overlaySettings };
             this.toggleRef.open(overlaySettings);
             this.isOpenChange.emit(true);
             if (!this.leftButtonLabel && !this.rightButtonLabel) {
@@ -50435,7 +50458,7 @@ class IgxExcelStyleHeaderComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxExcelStyleHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-excel-style-header', standalone: true, imports: [NgIf, IgxButtonDirective, NgClass, IgxIconComponent, IgxIconButtonDirective], template: "<header *ngIf=\"esf.column\"\n        class=\"igx-excel-filter__menu-header\">\n    <h4>{{ esf.column.header || esf.column.field }}</h4>\n    <div class=\"igx-excel-filter__menu-header-actions\">\n        <button *ngIf=\"showSelecting\"\n            type=\"button\"\n            igxIconButton=\"flat\"\n            (click)=\"esf.onSelect()\"\n            [ngClass]=\"esf.column.selected ? 'igx-excel-filter__actions-selected' : 'igx-excel-filter__actions-select'\"\n            [attr.aria-label]=\"esf.column.selected ? esf.grid.resourceStrings.igx_grid_excel_deselect : esf.grid.resourceStrings.igx_grid_excel_select\"\n        >\n            <igx-icon family=\"default\" name=\"selected\"></igx-icon>\n        </button>\n        <button *ngIf=\"showPinning\"\n            type=\"button\"\n            igxIconButton=\"flat\"\n            (click)=\"esf.onPin()\"\n            [attr.aria-label]=\"esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin\"\n        >\n            <igx-icon family=\"default\" [name]=\"esf.column.pinned ? 'unpin' : 'pin'\"></igx-icon>\n        </button>\n        <button *ngIf=\"showHiding\"\n            type=\"button\"\n            igxIconButton=\"flat\"\n            (click)=\"esf.onHideToggle()\"\n            [attr.aria-label]=\"esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide\"\n        >\n            <igx-icon family=\"default\" [name]=\"esf.column.hidden ? 'show' : 'hide'\"></igx-icon>\n        </button>\n    </div>\n</header>\n" }]
+            args: [{ selector: 'igx-excel-style-header', standalone: true, imports: [NgIf, NgClass, IgxIconComponent, IgxIconButtonDirective], template: "<header *ngIf=\"esf.column\"\n        class=\"igx-excel-filter__menu-header\">\n    <h4>{{ esf.column.header || esf.column.field }}</h4>\n    <div class=\"igx-excel-filter__menu-header-actions\">\n        <button *ngIf=\"showSelecting\"\n            type=\"button\"\n            igxIconButton=\"flat\"\n            (click)=\"esf.onSelect()\"\n            [ngClass]=\"esf.column.selected ? 'igx-excel-filter__actions-selected' : 'igx-excel-filter__actions-select'\"\n            [attr.aria-label]=\"esf.column.selected ? esf.grid.resourceStrings.igx_grid_excel_deselect : esf.grid.resourceStrings.igx_grid_excel_select\"\n        >\n            <igx-icon family=\"default\" name=\"selected\"></igx-icon>\n        </button>\n        <button *ngIf=\"showPinning\"\n            type=\"button\"\n            igxIconButton=\"flat\"\n            (click)=\"esf.onPin()\"\n            [attr.aria-label]=\"esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin\"\n        >\n            <igx-icon family=\"default\" [name]=\"esf.column.pinned ? 'unpin' : 'pin'\"></igx-icon>\n        </button>\n        <button *ngIf=\"showHiding\"\n            type=\"button\"\n            igxIconButton=\"flat\"\n            (click)=\"esf.onHideToggle()\"\n            [attr.aria-label]=\"esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide\"\n        >\n            <igx-icon family=\"default\" [name]=\"esf.column.hidden ? 'show' : 'hide'\"></igx-icon>\n        </button>\n    </div>\n</header>\n" }]
         }], ctorParameters: () => [{ type: BaseFilteringComponent }], propDecorators: { showPinning: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -73288,7 +73311,7 @@ class IgxPivotRowHeaderGroupComponent extends IgxGridHeaderGroupComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxPivotRowHeaderGroupComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-header-group', standalone: true, imports: [IgxIconComponent, NgIf, IgxPivotRowDimensionHeaderComponent, NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxGridFilteringCellComponent, IgxPivotResizeHandleDirective, IgxHeaderGroupStylePipe], template: "<ng-template #defaultColumn>\n    <span class=\"igx-grid-th__group-title\" [title]=\"title\">{{column.header}}</span>\n</ng-template>\n\n<ng-template #defaultCollapseIndicator>\n    <igx-icon\n        family=\"default\"\n        [name]=\"column.expanded ? 'tree_collapse' : 'tree_expand'\">\n    </igx-icon>\n</ng-template>\n\n<ng-container *ngIf=\"!column.columnGroup\">\n    <span *ngIf=\"grid.hasMovableColumns\" class=\"igx-grid-th__drop-indicator-left\"></span>\n    <igx-pivot-row-dimension-header\n        role=\"columnheader\"\n        class=\"igx-grid-th--fw\"\n        [id]=\"grid.id + '_' + column.field\"\n        [ngClass]=\"column.headerClasses\"\n        [ngStyle]=\"column.headerStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n        [igxColumnMovingDrag]=\"column\"\n        [ghostHost]=\"grid.outlet.nativeElement\"\n        [attr.droppable]=\"true\"\n        (pointerdown)=\"pointerdown($event)\"\n        [igxColumnMovingDrop]=\"column\"\n        [column]=\"column\"\n        (keydown)=\"grid.navigation.headerNavigation($event)\"\n    >\n    </igx-pivot-row-dimension-header>\n    <span *ngIf=\"!column.columnGroup && column.resizable\" class=\"igx-grid-th__resize-handle\"\n        [igxPivotResizeHandle]=\"column\"\n        [igxPivotResizeHandleHeader]=\"this\"\n        [attr.draggable]=\"false\"\n        [style.cursor]=\"colResizingService.resizeCursor\">\n    </span>\n    <span *ngIf=\"grid.hasMovableColumns\" class=\"igx-grid-th__drop-indicator-right\"></span>\n</ng-container>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-header-group', standalone: true, imports: [IgxIconComponent, NgIf, IgxPivotRowDimensionHeaderComponent, NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxPivotResizeHandleDirective, IgxHeaderGroupStylePipe], template: "<ng-template #defaultColumn>\n    <span class=\"igx-grid-th__group-title\" [title]=\"title\">{{column.header}}</span>\n</ng-template>\n\n<ng-template #defaultCollapseIndicator>\n    <igx-icon\n        family=\"default\"\n        [name]=\"column.expanded ? 'tree_collapse' : 'tree_expand'\">\n    </igx-icon>\n</ng-template>\n\n<ng-container *ngIf=\"!column.columnGroup\">\n    <span *ngIf=\"grid.hasMovableColumns\" class=\"igx-grid-th__drop-indicator-left\"></span>\n    <igx-pivot-row-dimension-header\n        role=\"columnheader\"\n        class=\"igx-grid-th--fw\"\n        [id]=\"grid.id + '_' + column.field\"\n        [ngClass]=\"column.headerClasses\"\n        [ngStyle]=\"column.headerStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n        [igxColumnMovingDrag]=\"column\"\n        [ghostHost]=\"grid.outlet.nativeElement\"\n        [attr.droppable]=\"true\"\n        (pointerdown)=\"pointerdown($event)\"\n        [igxColumnMovingDrop]=\"column\"\n        [column]=\"column\"\n        (keydown)=\"grid.navigation.headerNavigation($event)\"\n    >\n    </igx-pivot-row-dimension-header>\n    <span *ngIf=\"!column.columnGroup && column.resizable\" class=\"igx-grid-th__resize-handle\"\n        [igxPivotResizeHandle]=\"column\"\n        [igxPivotResizeHandleHeader]=\"this\"\n        [attr.draggable]=\"false\"\n        [style.cursor]=\"colResizingService.resizeCursor\">\n    </span>\n    <span *ngIf=\"grid.hasMovableColumns\" class=\"igx-grid-th__drop-indicator-right\"></span>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [IGX_GRID_BASE]
@@ -74478,7 +74501,7 @@ class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroupCompone
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxPivotRowDimensionHeaderGroupComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-dimension-header-group', standalone: true, imports: [IgxIconComponent, NgIf, IgxPivotRowDimensionHeaderComponent, NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxGridFilteringCellComponent, IgxPivotResizeHandleDirective, IgxHeaderGroupStylePipe], template: "<ng-template #defaultColumn>\n    <span class=\"igx-grid-th__group-title\" [title]=\"title\">{{column.header}}</span>\n</ng-template>\n\n<ng-template #defaultCollapseIndicator>\n    <igx-icon\n        family=\"default\"\n        [name]=\"column.expanded ? 'tree_collapse' : 'tree_expand'\">\n    </igx-icon>\n</ng-template>\n\n<ng-container *ngIf=\"!column.columnGroup\">\n    <span *ngIf=\"grid.hasMovableColumns\" class=\"igx-grid-th__drop-indicator-left\"></span>\n    <igx-pivot-row-dimension-header\n        role=\"columnheader\"\n        class=\"igx-grid-th--fw\"\n        [id]=\"grid.id + '_' + column.field\"\n        [ngClass]=\"column.headerClasses\"\n        [ngStyle]=\"column.headerStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n        [igxColumnMovingDrag]=\"column\"\n        [ghostHost]=\"grid.outlet.nativeElement\"\n        [attr.droppable]=\"true\"\n        (pointerdown)=\"pointerdown($event)\"\n        [igxColumnMovingDrop]=\"column\"\n        [column]=\"column\"\n        (keydown)=\"grid.navigation.headerNavigation($event)\"\n    >\n    </igx-pivot-row-dimension-header>\n    <span *ngIf=\"!column.columnGroup && column.resizable\" class=\"igx-grid-th__resize-handle\"\n        [igxPivotResizeHandle]=\"column\"\n        [igxPivotResizeHandleHeader]=\"this\"\n        [attr.draggable]=\"false\"\n        [style.cursor]=\"colResizingService.resizeCursor\">\n    </span>\n    <span *ngIf=\"grid.hasMovableColumns\" class=\"igx-grid-th__drop-indicator-right\"></span>\n</ng-container>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-dimension-header-group', standalone: true, imports: [IgxIconComponent, NgIf, IgxPivotRowDimensionHeaderComponent, NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxPivotResizeHandleDirective, IgxHeaderGroupStylePipe], template: "<ng-template #defaultColumn>\n    <span class=\"igx-grid-th__group-title\" [title]=\"title\">{{column.header}}</span>\n</ng-template>\n\n<ng-template #defaultCollapseIndicator>\n    <igx-icon\n        family=\"default\"\n        [name]=\"column.expanded ? 'tree_collapse' : 'tree_expand'\">\n    </igx-icon>\n</ng-template>\n\n<ng-container *ngIf=\"!column.columnGroup\">\n    <span *ngIf=\"grid.hasMovableColumns\" class=\"igx-grid-th__drop-indicator-left\"></span>\n    <igx-pivot-row-dimension-header\n        role=\"columnheader\"\n        class=\"igx-grid-th--fw\"\n        [id]=\"grid.id + '_' + column.field\"\n        [ngClass]=\"column.headerClasses\"\n        [ngStyle]=\"column.headerStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n        [igxColumnMovingDrag]=\"column\"\n        [ghostHost]=\"grid.outlet.nativeElement\"\n        [attr.droppable]=\"true\"\n        (pointerdown)=\"pointerdown($event)\"\n        [igxColumnMovingDrop]=\"column\"\n        [column]=\"column\"\n        (keydown)=\"grid.navigation.headerNavigation($event)\"\n    >\n    </igx-pivot-row-dimension-header>\n    <span *ngIf=\"!column.columnGroup && column.resizable\" class=\"igx-grid-th__resize-handle\"\n        [igxPivotResizeHandle]=\"column\"\n        [igxPivotResizeHandleHeader]=\"this\"\n        [attr.draggable]=\"false\"\n        [style.cursor]=\"colResizingService.resizeCursor\">\n    </span>\n    <span *ngIf=\"grid.hasMovableColumns\" class=\"igx-grid-th__drop-indicator-right\"></span>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [IGX_GRID_BASE]
@@ -75666,8 +75689,7 @@ class IgxPivotRowDimensionMrlRowComponent extends IgxGridHeaderRowComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxPivotRowDimensionMrlRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-dimension-mrl-row', standalone: true, imports: [NgClass, NgStyle, NgFor, IgxIconComponent, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe,
-                        IgxPivotRowDimensionContentComponent, IgxPivotGridHorizontalRowCellMerging], template: "<ng-template ngFor let-cell let-cellIndex=\"index\" [ngForOf]=\"rowGroup\n    | pivotGridHorizontalRowCellMerging:grid.pivotConfiguration:grid.pipeTrigger\">\n    <igx-pivot-row-dimension-content role=\"row\" class=\"igx-grid-thead\"\n        [grid]=\"grid\"\n        [dimension]=\"cell.rootDimension\"\n        [rootDimension]=\"cell.rootDimension\"\n        [rowIndex]=\"rowIndex\"\n        [colIndex]=\"cellIndex\"\n        [rowData]=\"cell.records[0]\"\n        [width]=\"rowDimensionWidthCombined(cell.dimensions)\"\n        [layout]=\"{\n            rowStart: cell.rowStart,\n            rowEnd: cell.rowStart + cell.rowSpan,\n            colStart: cell.colStart,\n            colEnd: cell.colStart + cell.colSpan,\n            columnVisibleIndex: cellIndex\n        }\">\n    </igx-pivot-row-dimension-content>\n</ng-template>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-dimension-mrl-row', standalone: true, imports: [NgFor, IgxPivotRowDimensionContentComponent, IgxPivotGridHorizontalRowCellMerging], template: "<ng-template ngFor let-cell let-cellIndex=\"index\" [ngForOf]=\"rowGroup\n    | pivotGridHorizontalRowCellMerging:grid.pivotConfiguration:grid.pipeTrigger\">\n    <igx-pivot-row-dimension-content role=\"row\" class=\"igx-grid-thead\"\n        [grid]=\"grid\"\n        [dimension]=\"cell.rootDimension\"\n        [rootDimension]=\"cell.rootDimension\"\n        [rowIndex]=\"rowIndex\"\n        [colIndex]=\"cellIndex\"\n        [rowData]=\"cell.records[0]\"\n        [width]=\"rowDimensionWidthCombined(cell.dimensions)\"\n        [layout]=\"{\n            rowStart: cell.rowStart,\n            rowEnd: cell.rowStart + cell.rowSpan,\n            colStart: cell.colStart,\n            colEnd: cell.colStart + cell.colSpan,\n            columnVisibleIndex: cellIndex\n        }\">\n    </igx-pivot-row-dimension-content>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [IGX_GRID_BASE]
@@ -78768,7 +78790,7 @@ class IgxGridToolbarAdvancedFilteringComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxGridToolbarAdvancedFilteringComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-grid-toolbar-advanced-filtering', standalone: true, imports: [IgxButtonDirective, IgxRippleDirective, NgClass, IgxIconComponent, NgIf], template: "<button igxButton=\"outlined\" type=\"button\" name=\"btnAdvancedFiltering\" igxRipple\n    [title]=\"grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip\"\n    (click)=\"grid.openAdvancedFilteringDialog(overlaySettings)\"\n    class=\"igx-grid-toolbar__adv-filter\">\n    <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n    <span #ref>\n        <ng-content></ng-content>\n    </span>\n    <!-- D.P. fix(elements): Angular trims child nodes, native doesn't leaving white space when other items project\n    textContent (avoids layout trash of innerText) should avoid wiping the default text without user set one -->\n    <span *ngIf=\"!ref.textContent.trim()\">{{ grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_label }}</span>\n    <span class=\"igx-adv-filter--column-number\" *ngIf=\"grid?.advancedFilteringExpressionsTree\"> ({{ numberOfColumns }}) </span>\n</button>\n" }]
+            args: [{ selector: 'igx-grid-toolbar-advanced-filtering', standalone: true, imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent, NgIf], template: "<button igxButton=\"outlined\" type=\"button\" name=\"btnAdvancedFiltering\" igxRipple\n    [title]=\"grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip\"\n    (click)=\"grid.openAdvancedFilteringDialog(overlaySettings)\"\n    class=\"igx-grid-toolbar__adv-filter\">\n    <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n    <span #ref>\n        <ng-content></ng-content>\n    </span>\n    <!-- D.P. fix(elements): Angular trims child nodes, native doesn't leaving white space when other items project\n    textContent (avoids layout trash of innerText) should avoid wiping the default text without user set one -->\n    <span *ngIf=\"!ref.textContent.trim()\">{{ grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_label }}</span>\n    <span class=\"igx-adv-filter--column-number\" *ngIf=\"grid?.advancedFilteringExpressionsTree\"> ({{ numberOfColumns }}) </span>\n</button>\n" }]
         }], ctorParameters: () => [{ type: IgxToolbarToken, decorators: [{
                     type: Inject,
                     args: [IgxToolbarToken]
@@ -79129,7 +79151,7 @@ class IgxGridToolbarExporterComponent extends BaseToolbarDirective {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxGridToolbarExporterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-grid-toolbar-exporter', standalone: true, imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent, NgIf, IgxToggleDirective, IgxExcelTextDirective, NgTemplateOutlet, IgxCSVTextDirective], template: "<button [title]=\"grid?.resourceStrings.igx_grid_toolbar_exporter_button_tooltip\" [disabled]=\"isExporting\"\n    igxButton=\"outlined\" type=\"button\" igxRipple #btn (click)=\"toggle(btn, toggleRef)\">\n\n    <igx-icon family=\"default\" name=\"file_download\"></igx-icon>\n    <span #ref>\n        <ng-content></ng-content>\n    </span>\n    <span *ngIf=\"!ref.textContent.trim()\">\n        {{ grid?.resourceStrings.igx_grid_toolbar_exporter_button_label }}\n    </span>\n    <igx-icon family=\"default\" name=\"arrow_drop_down\"></igx-icon>\n</button>\n\n<div class=\"igx-grid-toolbar__dropdown\" id=\"btnExport\">\n    <ul class=\"igx-grid-toolbar__dd-list\" igxToggle #toggleRef=\"toggle\">\n        <li *ngIf=\"exportExcel\" #btnExportExcel id=\"btnExportExcel\"\n            class=\"igx-grid-toolbar__dd-list-items\" igxRipple (click)=\"exportClicked('excel', toggleRef)\">\n            <span #excel>\n                <ng-content select=[excelText],excel-text></ng-content>\n            </span>\n            <excel-text *ngIf=\"!excel.childNodes.length\">\n                {{ grid?.resourceStrings.igx_grid_toolbar_exporter_excel_entry_text}}\n            </excel-text>\n        </li>\n\n        <li *ngIf=\"exportCSV\" #btnExportCsv id=\"btnExportCsv\" class=\"igx-grid-toolbar__dd-list-items\"\n            igxRipple (click)=\"exportClicked('csv', toggleRef)\">\n            <span #csv>\n                <ng-content select=[csvText],csv-text></ng-content>\n            </span>\n            <csv-text *ngIf=\"!csv.childNodes.length\">\n                {{ grid?.resourceStrings.igx_grid_toolbar_exporter_csv_entry_text }}</csv-text>\n        </li>\n    </ul>\n</div>\n" }]
+            args: [{ selector: 'igx-grid-toolbar-exporter', standalone: true, imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent, NgIf, IgxToggleDirective, IgxExcelTextDirective, IgxCSVTextDirective], template: "<button [title]=\"grid?.resourceStrings.igx_grid_toolbar_exporter_button_tooltip\" [disabled]=\"isExporting\"\n    igxButton=\"outlined\" type=\"button\" igxRipple #btn (click)=\"toggle(btn, toggleRef)\">\n\n    <igx-icon family=\"default\" name=\"file_download\"></igx-icon>\n    <span #ref>\n        <ng-content></ng-content>\n    </span>\n    <span *ngIf=\"!ref.textContent.trim()\">\n        {{ grid?.resourceStrings.igx_grid_toolbar_exporter_button_label }}\n    </span>\n    <igx-icon family=\"default\" name=\"arrow_drop_down\"></igx-icon>\n</button>\n\n<div class=\"igx-grid-toolbar__dropdown\" id=\"btnExport\">\n    <ul class=\"igx-grid-toolbar__dd-list\" igxToggle #toggleRef=\"toggle\">\n        <li *ngIf=\"exportExcel\" #btnExportExcel id=\"btnExportExcel\"\n            class=\"igx-grid-toolbar__dd-list-items\" igxRipple (click)=\"exportClicked('excel', toggleRef)\">\n            <span #excel>\n                <ng-content select=[excelText],excel-text></ng-content>\n            </span>\n            <excel-text *ngIf=\"!excel.childNodes.length\">\n                {{ grid?.resourceStrings.igx_grid_toolbar_exporter_excel_entry_text}}\n            </excel-text>\n        </li>\n\n        <li *ngIf=\"exportCSV\" #btnExportCsv id=\"btnExportCsv\" class=\"igx-grid-toolbar__dd-list-items\"\n            igxRipple (click)=\"exportClicked('csv', toggleRef)\">\n            <span #csv>\n                <ng-content select=[csvText],csv-text></ng-content>\n            </span>\n            <csv-text *ngIf=\"!csv.childNodes.length\">\n                {{ grid?.resourceStrings.igx_grid_toolbar_exporter_csv_entry_text }}</csv-text>\n        </li>\n    </ul>\n</div>\n" }]
         }], ctorParameters: () => [{ type: IgxToolbarToken, decorators: [{
                     type: Inject,
                     args: [IgxToolbarToken]
@@ -79687,7 +79709,7 @@ class IgxPageSizeSelectorComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxPageSizeSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-page-size', standalone: true, imports: [IgxSelectComponent, FormsModule, IgxLabelDirective, NgFor, IgxSelectItemComponent], template: "<label class=\"igx-page-size__label\">{{ paginator.resourceStrings.igx_paginator_label }}</label>\n<div class=\"igx-page-size__select\">\n    <igx-select [overlaySettings]=\"paginator.overlaySettings\" [(ngModel)]=\"paginator.perPage\" type=\"border\">\n        <igx-select-item [value]=\"val\" *ngFor=\"let val of paginator.selectOptions\">\n            {{ val }}\n        </igx-select-item>\n    </igx-select>\n</div>\n" }]
+            args: [{ selector: 'igx-page-size', standalone: true, imports: [IgxSelectComponent, FormsModule, NgFor, IgxSelectItemComponent], template: "<label class=\"igx-page-size__label\">{{ paginator.resourceStrings.igx_paginator_label }}</label>\n<div class=\"igx-page-size__select\">\n    <igx-select [overlaySettings]=\"paginator.overlaySettings\" [(ngModel)]=\"paginator.perPage\" type=\"border\">\n        <igx-select-item [value]=\"val\" *ngFor=\"let val of paginator.selectOptions\">\n            {{ val }}\n        </igx-select-item>\n    </igx-select>\n</div>\n" }]
         }], ctorParameters: () => [{ type: IgxPaginatorComponent, decorators: [{
                     type: Host
                 }] }], propDecorators: { cssClass: [{
@@ -79712,7 +79734,7 @@ class IgxPageNavigationComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxPageNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-page-nav', standalone: true, imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective], template: "<button\n    [title]=\"paginator.resourceStrings.igx_paginator_first_page_button_text\"\n    [disabled]=\"paginator.isFirstPage\"\n    [attr.aria-disabled]=\"paginator.isFirstPage\"\n    (click)=\"paginator.paginate(0)\"\n    igxIconButton=\"flat\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"first_page\"></igx-icon>\n</button>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_previous_page_button_text\"\n    [disabled]=\"paginator.isFirstPage\"\n    [attr.aria-disabled]=\"paginator.isFirstPage\"\n    (click)=\"paginator.previousPage()\"\n    igxIconButton=\"flat\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"prev\"></igx-icon>\n</button>\n<div class=\"igx-page-nav__text\" aria-current=\"page\">\n    <span>{{ paginator.page + 1 }}</span>\n    <span\n        >&nbsp;{{\n            paginator.resourceStrings.igx_paginator_pager_text\n        }}&nbsp;</span\n    >\n    <span>{{ paginator.totalPages || 1 }}</span>\n</div>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_next_page_button_text\"\n    [disabled]=\"paginator.isLastPage\"\n    [attr.aria-disabled]=\"paginator.isLastPage\"\n    (click)=\"paginator.nextPage()\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    igxIconButton=\"flat\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"next\"></igx-icon>\n</button>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_last_page_button_text\"\n    [disabled]=\"paginator.isLastPage\"\n    [attr.aria-disabled]=\"paginator.isLastPage\"\n    (click)=\"paginator.paginate(paginator.totalPages - 1)\"\n    igxIconButton=\"flat\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"last_page\"></igx-icon>\n</button>\n\n" }]
+            args: [{ selector: 'igx-page-nav', standalone: true, imports: [IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective], template: "<button\n    [title]=\"paginator.resourceStrings.igx_paginator_first_page_button_text\"\n    [disabled]=\"paginator.isFirstPage\"\n    [attr.aria-disabled]=\"paginator.isFirstPage\"\n    (click)=\"paginator.paginate(0)\"\n    igxIconButton=\"flat\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"first_page\"></igx-icon>\n</button>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_previous_page_button_text\"\n    [disabled]=\"paginator.isFirstPage\"\n    [attr.aria-disabled]=\"paginator.isFirstPage\"\n    (click)=\"paginator.previousPage()\"\n    igxIconButton=\"flat\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"prev\"></igx-icon>\n</button>\n<div class=\"igx-page-nav__text\" aria-current=\"page\">\n    <span>{{ paginator.page + 1 }}</span>\n    <span\n        >&nbsp;{{\n            paginator.resourceStrings.igx_paginator_pager_text\n        }}&nbsp;</span\n    >\n    <span>{{ paginator.totalPages || 1 }}</span>\n</div>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_next_page_button_text\"\n    [disabled]=\"paginator.isLastPage\"\n    [attr.aria-disabled]=\"paginator.isLastPage\"\n    (click)=\"paginator.nextPage()\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    igxIconButton=\"flat\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"next\"></igx-icon>\n</button>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_last_page_button_text\"\n    [disabled]=\"paginator.isLastPage\"\n    [attr.aria-disabled]=\"paginator.isLastPage\"\n    (click)=\"paginator.paginate(paginator.totalPages - 1)\"\n    igxIconButton=\"flat\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"last_page\"></igx-icon>\n</button>\n\n" }]
         }], ctorParameters: () => [{ type: IgxPaginatorComponent, decorators: [{
                     type: Host
                 }] }], propDecorators: { cssClass: [{