igniteui-angular 19.0.5 → 19.0.7

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';
@@ -5948,7 +5948,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);
@@ -10222,7 +10224,7 @@ class IgxIconComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: "igx-icon", 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", 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"]
@@ -24258,7 +24260,7 @@ class IgxDropDownComponent extends IgxDropDownBaseDirective {
      * ```
      */
     open(overlaySettings) {
-        const settings = overlaySettings || this.getDefaultOverlaySettings();
+        const settings = { ...{}, ...this.getDefaultOverlaySettings(), ...overlaySettings };
         this.toggleDirective.open(settings);
         this.updateScrollPosition();
     }
@@ -24707,7 +24709,7 @@ class IgxGridActionButtonComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxGridActionButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-grid-action-button', 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', 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']
@@ -27975,7 +27977,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                         NgIf,
                         NgFor,
                         NgTemplateOutlet,
-                        IgxButtonDirective,
                         IgxIconButtonDirective,
                         IgxRippleDirective,
                         IgxToggleActionDirective,
@@ -30559,6 +30560,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.
      *
@@ -30605,7 +30614,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: "19.0.0", ngImport: i0, type: IgxMonthsViewComponent, decorators: [{
             type: Component,
@@ -30619,7 +30628,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                             provide: DAY_INTERVAL_TOKEN,
                             useValue: "month",
                         },
-                    ], selector: "igx-months-view", 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", 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]
@@ -30743,6 +30752,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: "19.0.0", 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: "19.0.0", type: IgxYearsViewComponent, isStandalone: true, selector: "igx-years-view", inputs: { standalone: "standalone", yearFormat: "yearFormat" }, host: { properties: { "class.igx-calendar-view": "this.viewClass", "class.igx-calendar-view--standalone": "this.standalone" } }, providers: [
             {
@@ -30754,7 +30771,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: "19.0.0", ngImport: i0, type: IgxYearsViewComponent, decorators: [{
             type: Component,
@@ -30768,7 +30785,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                             provide: DAY_INTERVAL_TOKEN,
                             useValue: "year",
                         },
-                    ], selector: "igx-years-view", 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", 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]
@@ -33231,7 +33248,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                             multi: false,
                             provide: KeyboardNavigationService,
                         },
-                    ], selector: 'igx-calendar', 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', 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"]
@@ -33676,7 +33693,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                         },
                     ], selector: "igx-month-picker", imports: [
                         NgIf,
-                        NgStyle,
                         NgTemplateOutlet,
                         DatePipe,
                         IgxIconComponent,
@@ -34179,6 +34195,8 @@ var Direction;
     Direction[Direction["PREV"] = 2] = "PREV";
 })(Direction || (Direction = {}));
 /** @hidden */
+const IGX_CAROUSEL_COMPONENT = /*@__PURE__*/ new InjectionToken('IgxCarouselToken');
+/** @hidden */
 let IgxCarouselComponentBase = class IgxCarouselComponentBase {
     constructor(animationService, cdr) {
         this.animationService = animationService;
@@ -34457,15 +34475,15 @@ class IgxSlideComponent {
         this._destroy$.next(true);
         this._destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxSlideComponent, deps: [{ token: i0.ElementRef }, { token: IgxCarouselComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxSlideComponent, deps: [{ token: i0.ElementRef }, { token: IGX_CAROUSEL_COMPONENT }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0", type: IgxSlideComponent, isStandalone: true, selector: "igx-slide", inputs: { index: "index", direction: "direction", total: "total", active: ["active", "active", booleanAttribute], previous: ["previous", "previous", booleanAttribute] }, outputs: { activeChange: "activeChange" }, host: { properties: { "attr.tabindex": "this.tabIndex", "attr.id": "this.id", "attr.role": "this.tab", "attr.aria-labelledby": "this.ariaLabelledBy", "class.igx-slide": "this.cssClass", "class.igx-slide--current": "this.active", "class.igx-slide--previous": "this.previous" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxSlideComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-slide', standalone: true, template: "<ng-content></ng-content>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: IgxCarouselComponent, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
-                    args: [IgxCarouselComponent]
+                    args: [IGX_CAROUSEL_COMPONENT]
                 }] }], propDecorators: { index: [{
                 type: Input
             }], direction: [{
@@ -35610,7 +35628,8 @@ class IgxCarouselComponent extends IgxCarouselComponentBase {
             {
                 provide: HAMMER_GESTURE_CONFIG,
                 useClass: CarouselHammerConfig
-            }
+            },
+            { provide: IGX_CAROUSEL_COMPONENT, useExisting: IgxCarouselComponent }
         ], queries: [{ propertyName: "indicatorTemplate", first: true, predicate: IgxCarouselIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "nextButtonTemplate", first: true, predicate: IgxCarouselNextButtonDirective, descendants: true, read: TemplateRef }, { propertyName: "prevButtonTemplate", first: true, predicate: IgxCarouselPrevButtonDirective, descendants: true, read: TemplateRef }, { propertyName: "slides", predicate: IgxSlideComponent }], viewQueries: [{ propertyName: "defaultIndicator", first: true, predicate: ["defaultIndicator"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultNextButton", first: true, predicate: ["defaultNextButton"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultPrevButton", first: true, predicate: ["defaultPrevButton"], descendants: true, read: TemplateRef, static: true }, { propertyName: "_indicators", predicate: ["indicators"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultIndicator let-slide>\n    <div class=\"igx-nav-dot\"\n        [class.igx-nav-dot--active]=\"slide.active\">\n    </div>\n</ng-template>\n\n<ng-template #defaultNextButton>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"carousel_next\"\n        class=\"igx-nav-arrow\">\n    </igx-icon>\n</ng-template>\n\n<ng-template #defaultPrevButton>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"carousel_prev\"\n        class=\"igx-nav-arrow\">\n    </igx-icon>\n</ng-template>\n\n<button *ngIf=\"navigation && slides.length\"\n    igxButton\n    class=\"igx-carousel__arrow--prev\"\n    [attr.aria-label]=\"resourceStrings.igx_carousel_previous_slide\"\n    [disabled]=\"prevButtonDisabled\"\n    (click)=\"prev()\"\n    (keydown)=\"handleKeydownPrev($event)\">\n    <ng-container *ngTemplateOutlet=\"getPrevButtonTemplate; context: {$implicit: prevButtonDisabled};\"></ng-container>\n</button>\n\n<button *ngIf=\"navigation && slides.length\"\n    igxButton\n    class=\"igx-carousel__arrow--next\"\n    [attr.aria-label]=\"resourceStrings.igx_carousel_next_slide\"\n    [disabled]=\"nextButtonDisabled\"\n    (click)=\"next()\"\n    (keydown)=\"handleKeydownNext($event)\">\n    <ng-container *ngTemplateOutlet=\"getNextButtonTemplate; context: {$implicit: nextButtonDisabled};\"></ng-container>\n</button>\n\n<div *ngIf=\"showIndicators\" [ngClass]=\"indicatorsClass\" [attr.role]=\"'tablist'\" (keyup)=\"handleKeyUp($event)\" (focusout)=\"handleFocusOut($event)\" (click)=\"handleClick()\" (keydown)=\"handleKeydown($event)\">\n    <div #indicators *ngFor=\"let slide of slides\"\n        class=\"igx-carousel-indicators__indicator\"\n        (click)=\"select(slide)\"\n        [id]=\"'tab-'+ slide.index + '-' + total\"\n        [attr.role]=\"'tab'\"\n        [attr.tabindex]=\"slide.active ? 0 : -1\"\n        [attr.aria-label]=\"resourceStrings.igx_carousel_slide + ' ' + (slide.index + 1) + ' ' + resourceStrings.igx_carousel_of + ' ' + this.total\"\n        [attr.aria-controls]=\"'panel-' + slide.index\"\n        [attr.aria-selected]=\"slide.active\">\n        <ng-container *ngTemplateOutlet=\"getIndicatorTemplate; context: {$implicit: slide};\"></ng-container>\n    </div>\n</div>\n\n<div *ngIf=\"showIndicatorsLabel\" [ngClass]=\"indicatorsClass\" class=\"igx-carousel-label-indicator\">\n    <span [id]=\"labelId\" class=\"igx-carousel__label\">{{getCarouselLabel}}</span>\n</div>\n\n<div class=\"igx-carousel__inner\" [attr.aria-live]=\"!interval || stoppedByInteraction ? 'polite' : 'off'\">\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;outline-style:none}\n"], dependencies: [{ kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxCarouselComponent, decorators: [{
@@ -35619,7 +35638,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                         {
                             provide: HAMMER_GESTURE_CONFIG,
                             useClass: CarouselHammerConfig
-                        }
+                        },
+                        { provide: IGX_CAROUSEL_COMPONENT, useExisting: IgxCarouselComponent }
                     ], selector: 'igx-carousel', imports: [IgxButtonDirective, IgxIconComponent, NgIf, NgClass, NgFor, NgTemplateOutlet], template: "<ng-template #defaultIndicator let-slide>\n    <div class=\"igx-nav-dot\"\n        [class.igx-nav-dot--active]=\"slide.active\">\n    </div>\n</ng-template>\n\n<ng-template #defaultNextButton>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"carousel_next\"\n        class=\"igx-nav-arrow\">\n    </igx-icon>\n</ng-template>\n\n<ng-template #defaultPrevButton>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"carousel_prev\"\n        class=\"igx-nav-arrow\">\n    </igx-icon>\n</ng-template>\n\n<button *ngIf=\"navigation && slides.length\"\n    igxButton\n    class=\"igx-carousel__arrow--prev\"\n    [attr.aria-label]=\"resourceStrings.igx_carousel_previous_slide\"\n    [disabled]=\"prevButtonDisabled\"\n    (click)=\"prev()\"\n    (keydown)=\"handleKeydownPrev($event)\">\n    <ng-container *ngTemplateOutlet=\"getPrevButtonTemplate; context: {$implicit: prevButtonDisabled};\"></ng-container>\n</button>\n\n<button *ngIf=\"navigation && slides.length\"\n    igxButton\n    class=\"igx-carousel__arrow--next\"\n    [attr.aria-label]=\"resourceStrings.igx_carousel_next_slide\"\n    [disabled]=\"nextButtonDisabled\"\n    (click)=\"next()\"\n    (keydown)=\"handleKeydownNext($event)\">\n    <ng-container *ngTemplateOutlet=\"getNextButtonTemplate; context: {$implicit: nextButtonDisabled};\"></ng-container>\n</button>\n\n<div *ngIf=\"showIndicators\" [ngClass]=\"indicatorsClass\" [attr.role]=\"'tablist'\" (keyup)=\"handleKeyUp($event)\" (focusout)=\"handleFocusOut($event)\" (click)=\"handleClick()\" (keydown)=\"handleKeydown($event)\">\n    <div #indicators *ngFor=\"let slide of slides\"\n        class=\"igx-carousel-indicators__indicator\"\n        (click)=\"select(slide)\"\n        [id]=\"'tab-'+ slide.index + '-' + total\"\n        [attr.role]=\"'tab'\"\n        [attr.tabindex]=\"slide.active ? 0 : -1\"\n        [attr.aria-label]=\"resourceStrings.igx_carousel_slide + ' ' + (slide.index + 1) + ' ' + resourceStrings.igx_carousel_of + ' ' + this.total\"\n        [attr.aria-controls]=\"'panel-' + slide.index\"\n        [attr.aria-selected]=\"slide.active\">\n        <ng-container *ngTemplateOutlet=\"getIndicatorTemplate; context: {$implicit: slide};\"></ng-container>\n    </div>\n</div>\n\n<div *ngIf=\"showIndicatorsLabel\" [ngClass]=\"indicatorsClass\" class=\"igx-carousel-label-indicator\">\n    <span [id]=\"labelId\" class=\"igx-carousel__label\">{{getCarouselLabel}}</span>\n</div>\n\n<div class=\"igx-carousel__inner\" [attr.aria-live]=\"!interval || stoppedByInteraction ? 'polite' : 'off'\">\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;outline-style:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: undefined, decorators: [{
                     type: Inject,
@@ -41329,6 +41349,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) {
@@ -44202,7 +44223,7 @@ class IgxColumnComponent {
                 columnSizes[col.colStart - 1] = {
                     ref: col,
                     width: col.width === 'fit-content' ? col.autoSize :
-                        col.widthSetByUser || this.grid.columnWidthSetByUser ? parseInt(col.calcWidth, 10) : null,
+                        col.widthSetByUser || this.grid.columnWidthSetByUser ? parseFloat(col.calcWidth) : null,
                     colSpan: col.gridColumnSpan,
                     colEnd: col.colStart + col.gridColumnSpan,
                     widthSetByUser: col.widthSetByUser
@@ -44231,7 +44252,7 @@ class IgxColumnComponent {
                 columnSizes[col.colStart - 1] = {
                     ref: col,
                     width: col.width === 'fit-content' ? col.autoSize :
-                        col.widthSetByUser || this.grid.columnWidthSetByUser ? parseInt(col.calcWidth, 10) : null,
+                        col.widthSetByUser || this.grid.columnWidthSetByUser ? parseFloat(col.calcWidth) : null,
                     colSpan: col.gridColumnSpan,
                     colEnd: col.colStart + col.gridColumnSpan,
                     widthSetByUser: col.widthSetByUser
@@ -44246,7 +44267,7 @@ class IgxColumnComponent {
                         columnSizes[i] = {
                             ref: col,
                             width: col.width === 'fit-content' ? col.autoSize :
-                                col.widthSetByUser || this.grid.columnWidthSetByUser ? parseInt(col.calcWidth, 10) : null,
+                                col.widthSetByUser || this.grid.columnWidthSetByUser ? parseFloat(col.calcWidth) : null,
                             colSpan: col.gridColumnSpan,
                             colEnd: col.colStart + col.gridColumnSpan,
                             widthSetByUser: col.widthSetByUser
@@ -44306,7 +44327,7 @@ class IgxColumnComponent {
                 result.push(size.width + 'px');
             }
             else {
-                result.push(parseInt(this.grid.getPossibleColumnWidth(), 10) + 'px');
+                result.push(parseFloat(this.grid.getPossibleColumnWidth()) + 'px');
             }
         }
         return result;
@@ -44715,7 +44736,7 @@ class IgxColumnComponent {
             this._calcWidth = this.grid.minColumnWidth;
         }
         else if (isPercentageWidth) {
-            this._calcWidth = Math.floor(parseFloat(colWidth) / 100 * this.grid.calcWidth);
+            this._calcWidth = parseFloat(colWidth) / 100 * this.grid.calcWidth;
         }
         else if (!colWidth || isAutoWidth && !this.autoSize) {
             // no width
@@ -44724,7 +44745,7 @@ class IgxColumnComponent {
         else {
             this._calcWidth = this.width;
         }
-        this.calcPixelWidth = parseInt(this._calcWidth, 10);
+        this.calcPixelWidth = parseFloat(this._calcWidth);
     }
     /**
      * @hidden
@@ -45423,7 +45444,7 @@ class IgxColumnGroupComponent extends IgxColumnComponent {
             if (val.hidden) {
                 return acc;
             }
-            return acc + parseInt(val.calcWidth, 10);
+            return acc + parseFloat(val.calcWidth);
         }, 0)}`;
         return width + 'px';
     }
@@ -45529,7 +45550,7 @@ class IgxColumnLayoutComponent extends IgxColumnGroupComponent {
      * @memberof IgxColumnGroupComponent
      */
     get width() {
-        const width = this.getFilledChildColumnSizes(this.children).reduce((acc, val) => acc + parseInt(val, 10), 0);
+        const width = this.getFilledChildColumnSizes(this.children).reduce((acc, val) => acc + parseFloat(val), 0);
         return width;
     }
     /* blazorSuppress */
@@ -45544,7 +45565,7 @@ class IgxColumnLayoutComponent extends IgxColumnGroupComponent {
         let borderWidth = 0;
         if (this.headerGroup && this.headerGroup.hasLastPinnedChildColumn) {
             const headerStyles = this.grid.document.defaultView.getComputedStyle(this.headerGroup.nativeElement.children[0]);
-            borderWidth = parseInt(headerStyles.borderRightWidth, 10);
+            borderWidth = parseFloat(headerStyles.borderRightWidth);
         }
         return super.getCalcWidth() + borderWidth;
     }
@@ -50009,10 +50030,11 @@ function generateExpressionsListRecursive(expressions, operator, expressionsUIs)
  * @hidden
  */
 class IgxExcelStyleCustomDialogComponent {
-    constructor(overlayService, cdr, platform) {
+    constructor(overlayService, cdr, platform, esf) {
         this.overlayService = overlayService;
         this.cdr = cdr;
         this.platform = platform;
+        this.esf = esf;
         this.expressionsList = new Array();
         this._customDialogPositionSettings = {
             verticalDirection: VerticalAlignment.Middle,
@@ -50072,6 +50094,10 @@ class IgxExcelStyleCustomDialogComponent {
             this.toggle.close();
         }
     }
+    cancelDialog() {
+        this.esf.cancel();
+        this.closeDialog();
+    }
     onApplyButtonClick() {
         this.expressionsList = this.expressionsList.filter(element => element.expression.condition &&
             (element.expression.searchVal || element.expression.searchVal === 0 || element.expression.condition.isUnary));
@@ -50182,13 +50208,13 @@ class IgxExcelStyleCustomDialogComponent {
             this.expressionsContainer.nativeElement.scrollTop = this.expressionsContainer.nativeElement.scrollHeight;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, deps: [{ token: IgxOverlayService }, { token: i0.ChangeDetectorRef }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: IgxExcelStyleCustomDialogComponent, isStandalone: true, selector: "igx-excel-style-custom-dialog", inputs: { expressionsList: "expressionsList", column: "column", selectedOperator: "selectedOperator", filteringService: "filteringService", overlayComponentId: "overlayComponentId" }, viewQueries: [{ propertyName: "toggle", first: true, predicate: ["toggle"], descendants: true, read: IgxToggleDirective, static: true }, { propertyName: "defaultExpressionTemplate", first: true, predicate: ["defaultExpressionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "dateExpressionTemplate", first: true, predicate: ["dateExpressionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true, static: true }, { propertyName: "expressionComponents", predicate: IgxExcelStyleDefaultExpressionComponent, descendants: true }, { propertyName: "expressionDateComponents", predicate: IgxExcelStyleDateExpressionComponent, descendants: true }], ngImport: i0, template: "<article #toggle igxToggle\n    class=\"igx-excel-filter__secondary\"\n    [ngClass]=\"{\n        'igx-excel-filter__secondary--cosy': grid.gridSize === '2',\n        'igx-excel-filter__secondary--compact': grid.gridSize === '1'\n    }\"\n    (keydown)=\"onKeyDown($event)\"\n    (opening)=\"onCustomDialogOpening()\"\n    (opened)=\"onCustomDialogOpened()\">\n    <header class=\"igx-excel-filter__secondary-header\">\n        <h4 class=\"ig-typography__h6\">\n            {{ grid.resourceStrings.igx_grid_excel_custom_dialog_header }}{{ column.header || column.field }}\n        </h4>\n    </header>\n\n    <article #expressionsContainer class=\"igx-excel-filter__secondary-main\">\n        <ng-container *ngIf=\"column.dataType === 'date' || column.dataType === 'dateTime' || column.dataType === 'time'\">\n            <igx-excel-style-date-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-date-expression>\n        </ng-container>\n\n        <ng-container *ngIf=\"column.dataType !== 'date' && column.dataType !== 'dateTime' && column.dataType !== 'time'\">\n            <igx-excel-style-default-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-default-expression>\n        </ng-container>\n\n        <button type=\"button\" igxButton\n            class=\"igx-excel-filter__add-filter\"\n            (click)=\"onAddButtonClick()\">\n            <igx-icon family=\"default\" name=\"add\"></igx-icon>\n            <span>{{ grid.resourceStrings.igx_grid_excel_custom_dialog_add }}</span>\n        </button>\n    </article>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"onClearButtonClick()\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"closeDialog()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button type=\"button\"\n                igxButton=\"contained\"\n                (click)=\"onApplyButtonClick()\"\n                (keydown)=\"onApplyButtonKeyDown($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n", dependencies: [{ kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxExcelStyleDateExpressionComponent, selector: "igx-excel-style-date-expression" }, { kind: "component", type: IgxExcelStyleDefaultExpressionComponent, selector: "igx-excel-style-default-expression", inputs: ["column", "expressionUI", "expressionsList", "grid"], outputs: ["expressionRemoved", "logicOperatorChanged"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, deps: [{ token: IgxOverlayService }, { token: i0.ChangeDetectorRef }, { token: PlatformUtil }, { token: BaseFilteringComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: IgxExcelStyleCustomDialogComponent, isStandalone: true, selector: "igx-excel-style-custom-dialog", inputs: { expressionsList: "expressionsList", column: "column", selectedOperator: "selectedOperator", filteringService: "filteringService", overlayComponentId: "overlayComponentId" }, viewQueries: [{ propertyName: "toggle", first: true, predicate: ["toggle"], descendants: true, read: IgxToggleDirective, static: true }, { propertyName: "defaultExpressionTemplate", first: true, predicate: ["defaultExpressionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "dateExpressionTemplate", first: true, predicate: ["dateExpressionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true, static: true }, { propertyName: "expressionComponents", predicate: IgxExcelStyleDefaultExpressionComponent, descendants: true }, { propertyName: "expressionDateComponents", predicate: IgxExcelStyleDateExpressionComponent, descendants: true }], ngImport: i0, template: "<article #toggle igxToggle\n    class=\"igx-excel-filter__secondary\"\n    [ngClass]=\"{\n        'igx-excel-filter__secondary--cosy': grid.gridSize === '2',\n        'igx-excel-filter__secondary--compact': grid.gridSize === '1'\n    }\"\n    (keydown)=\"onKeyDown($event)\"\n    (opening)=\"onCustomDialogOpening()\"\n    (opened)=\"onCustomDialogOpened()\">\n    <header class=\"igx-excel-filter__secondary-header\">\n        <h4 class=\"ig-typography__h6\">\n            {{ grid.resourceStrings.igx_grid_excel_custom_dialog_header }}{{ column.header || column.field }}\n        </h4>\n    </header>\n\n    <article #expressionsContainer class=\"igx-excel-filter__secondary-main\">\n        <ng-container *ngIf=\"column.dataType === 'date' || column.dataType === 'dateTime' || column.dataType === 'time'\">\n            <igx-excel-style-date-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-date-expression>\n        </ng-container>\n\n        <ng-container *ngIf=\"column.dataType !== 'date' && column.dataType !== 'dateTime' && column.dataType !== 'time'\">\n            <igx-excel-style-default-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-default-expression>\n        </ng-container>\n\n        <button type=\"button\" igxButton\n            class=\"igx-excel-filter__add-filter\"\n            (click)=\"onAddButtonClick()\">\n            <igx-icon family=\"default\" name=\"add\"></igx-icon>\n            <span>{{ grid.resourceStrings.igx_grid_excel_custom_dialog_add }}</span>\n        </button>\n    </article>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"onClearButtonClick()\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"cancelDialog()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button type=\"button\"\n                igxButton=\"contained\"\n                (click)=\"onApplyButtonClick()\"\n                (keydown)=\"onApplyButtonKeyDown($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n", dependencies: [{ kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxExcelStyleDateExpressionComponent, selector: "igx-excel-style-date-expression" }, { kind: "component", type: IgxExcelStyleDefaultExpressionComponent, selector: "igx-excel-style-default-expression", inputs: ["column", "expressionUI", "expressionsList", "grid"], outputs: ["expressionRemoved", "logicOperatorChanged"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-excel-style-custom-dialog', imports: [IgxToggleDirective, NgClass, NgIf, NgFor, IgxExcelStyleDateExpressionComponent, IgxExcelStyleDefaultExpressionComponent, IgxButtonDirective, IgxIconComponent], template: "<article #toggle igxToggle\n    class=\"igx-excel-filter__secondary\"\n    [ngClass]=\"{\n        'igx-excel-filter__secondary--cosy': grid.gridSize === '2',\n        'igx-excel-filter__secondary--compact': grid.gridSize === '1'\n    }\"\n    (keydown)=\"onKeyDown($event)\"\n    (opening)=\"onCustomDialogOpening()\"\n    (opened)=\"onCustomDialogOpened()\">\n    <header class=\"igx-excel-filter__secondary-header\">\n        <h4 class=\"ig-typography__h6\">\n            {{ grid.resourceStrings.igx_grid_excel_custom_dialog_header }}{{ column.header || column.field }}\n        </h4>\n    </header>\n\n    <article #expressionsContainer class=\"igx-excel-filter__secondary-main\">\n        <ng-container *ngIf=\"column.dataType === 'date' || column.dataType === 'dateTime' || column.dataType === 'time'\">\n            <igx-excel-style-date-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-date-expression>\n        </ng-container>\n\n        <ng-container *ngIf=\"column.dataType !== 'date' && column.dataType !== 'dateTime' && column.dataType !== 'time'\">\n            <igx-excel-style-default-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-default-expression>\n        </ng-container>\n\n        <button type=\"button\" igxButton\n            class=\"igx-excel-filter__add-filter\"\n            (click)=\"onAddButtonClick()\">\n            <igx-icon family=\"default\" name=\"add\"></igx-icon>\n            <span>{{ grid.resourceStrings.igx_grid_excel_custom_dialog_add }}</span>\n        </button>\n    </article>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"onClearButtonClick()\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"closeDialog()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button type=\"button\"\n                igxButton=\"contained\"\n                (click)=\"onApplyButtonClick()\"\n                (keydown)=\"onApplyButtonKeyDown($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n" }]
-        }], ctorParameters: () => [{ type: IgxOverlayService }, { type: i0.ChangeDetectorRef }, { type: PlatformUtil }], propDecorators: { expressionsList: [{
+            args: [{ selector: 'igx-excel-style-custom-dialog', imports: [IgxToggleDirective, NgClass, NgIf, NgFor, IgxExcelStyleDateExpressionComponent, IgxExcelStyleDefaultExpressionComponent, IgxButtonDirective, IgxIconComponent], template: "<article #toggle igxToggle\n    class=\"igx-excel-filter__secondary\"\n    [ngClass]=\"{\n        'igx-excel-filter__secondary--cosy': grid.gridSize === '2',\n        'igx-excel-filter__secondary--compact': grid.gridSize === '1'\n    }\"\n    (keydown)=\"onKeyDown($event)\"\n    (opening)=\"onCustomDialogOpening()\"\n    (opened)=\"onCustomDialogOpened()\">\n    <header class=\"igx-excel-filter__secondary-header\">\n        <h4 class=\"ig-typography__h6\">\n            {{ grid.resourceStrings.igx_grid_excel_custom_dialog_header }}{{ column.header || column.field }}\n        </h4>\n    </header>\n\n    <article #expressionsContainer class=\"igx-excel-filter__secondary-main\">\n        <ng-container *ngIf=\"column.dataType === 'date' || column.dataType === 'dateTime' || column.dataType === 'time'\">\n            <igx-excel-style-date-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-date-expression>\n        </ng-container>\n\n        <ng-container *ngIf=\"column.dataType !== 'date' && column.dataType !== 'dateTime' && column.dataType !== 'time'\">\n            <igx-excel-style-default-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-default-expression>\n        </ng-container>\n\n        <button type=\"button\" igxButton\n            class=\"igx-excel-filter__add-filter\"\n            (click)=\"onAddButtonClick()\">\n            <igx-icon family=\"default\" name=\"add\"></igx-icon>\n            <span>{{ grid.resourceStrings.igx_grid_excel_custom_dialog_add }}</span>\n        </button>\n    </article>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"onClearButtonClick()\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"cancelDialog()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button type=\"button\"\n                igxButton=\"contained\"\n                (click)=\"onApplyButtonClick()\"\n                (keydown)=\"onApplyButtonKeyDown($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n" }]
+        }], ctorParameters: () => [{ type: IgxOverlayService }, { type: i0.ChangeDetectorRef }, { type: PlatformUtil }, { type: BaseFilteringComponent }], propDecorators: { expressionsList: [{
                 type: Input
             }], column: [{
                 type: Input
@@ -50395,7 +50421,7 @@ class IgxExcelStyleHeaderComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxExcelStyleHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-excel-style-header', 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', 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 }]
@@ -55898,7 +55924,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
 class IgxHeaderGroupWidthPipe {
     transform(width, minWidth, hasLayout) {
         const isFitContent = width === 'fit-content';
-        return hasLayout ? '' : isFitContent ? width : `${Math.max(parseInt(width), minWidth)}px`;
+        return hasLayout ? '' : isFitContent ? width : `${Math.max(parseFloat(width), minWidth)}px`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxHeaderGroupWidthPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: IgxHeaderGroupWidthPipe, isStandalone: true, name: "igxHeaderGroupWidth" }); }
@@ -65339,7 +65365,7 @@ class IgxGridBaseDirective {
         let totalWidth = 0;
         let i = 0;
         for (i; i < cols.length; i++) {
-            totalWidth += parseInt(cols[i].calcWidth, 10) || 0;
+            totalWidth += parseFloat(cols[i].calcWidth) || 0;
         }
         this._totalWidth = totalWidth;
         return totalWidth;
@@ -66104,7 +66130,7 @@ class IgxGridBaseDirective {
         }
         else {
             computedWidth = this.calcWidth ||
-                parseInt(this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('width'), 10);
+                parseFloat(this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('width'));
         }
         const visibleChildColumns = this.visibleColumns.filter(c => !c.columnGroup);
         // Column layouts related
@@ -66123,7 +66149,7 @@ class IgxGridBaseDirective {
         const sumExistingWidths = columnsWithSetWidths
             .reduce((prev, curr) => {
             const colWidth = curr.width;
-            let widthValue = parseInt(colWidth, 10);
+            let widthValue = parseFloat(colWidth);
             if (isNaN(widthValue)) {
                 widthValue = MINIMUM_COLUMN_WIDTH$1;
             }
@@ -66137,9 +66163,9 @@ class IgxGridBaseDirective {
             return '0px';
         }
         computedWidth -= this.featureColumnsWidth();
-        const columnWidth = Math.floor(!Number.isFinite(sumExistingWidths) ?
+        const columnWidth = !Number.isFinite(sumExistingWidths) ?
             Math.max(computedWidth / columnsToSize, this.minColumnWidth) :
-            Math.max((computedWidth - sumExistingWidths) / columnsToSize, this.minColumnWidth));
+            Math.max((computedWidth - sumExistingWidths) / columnsToSize, this.minColumnWidth);
         return columnWidth + 'px';
     }
     /**
@@ -67131,8 +67157,8 @@ class IgxGridBaseDirective {
             this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : this.minColumnWidth + 'px';
         }
         this._columns.forEach((column) => {
-            if (this.hasColumnLayouts && parseInt(this._columnWidth, 10)) {
-                const columnWidthCombined = parseInt(this._columnWidth, 10) * (column.colEnd ? column.colEnd - column.colStart : 1);
+            if (this.hasColumnLayouts && parseFloat(this._columnWidth)) {
+                const columnWidthCombined = parseFloat(this._columnWidth) * (column.colEnd ? column.colEnd - column.colStart : 1);
                 column.defaultWidth = columnWidthCombined + 'px';
             }
             else {
@@ -73269,7 +73295,7 @@ class IgxPivotRowHeaderGroupComponent extends IgxGridHeaderGroupComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxPivotRowHeaderGroupComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-header-group', 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', 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]
@@ -74459,7 +74485,7 @@ class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroupCompone
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxPivotRowDimensionHeaderGroupComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-dimension-header-group', 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', 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]
@@ -75647,8 +75673,7 @@ class IgxPivotRowDimensionMrlRowComponent extends IgxGridHeaderRowComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxPivotRowDimensionMrlRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-dimension-mrl-row', 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', 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]
@@ -78749,7 +78774,7 @@ class IgxGridToolbarAdvancedFilteringComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxGridToolbarAdvancedFilteringComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-grid-toolbar-advanced-filtering', 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', 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]
@@ -79110,7 +79135,7 @@ class IgxGridToolbarExporterComponent extends BaseToolbarDirective {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxGridToolbarExporterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-grid-toolbar-exporter', 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', 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]
@@ -79668,7 +79693,7 @@ class IgxPageSizeSelectorComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxPageSizeSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-page-size', 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', 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: [{
@@ -79693,7 +79718,7 @@ class IgxPageNavigationComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxPageNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-page-nav', 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', 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: [{