igniteui-angular 18.2.4 → 18.2.6

package/fesm2022/igniteui-angular.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { Injectable, Directive, Input, HostListener, EventEmitter, InjectionToken, isDevMode, inject, PLATFORM_ID, Inject, ElementRef, ViewContainerRef, createComponent, Output, HostBinding, Self, Optional, booleanAttribute, SecurityContext, Component, ContentChildren, ContentChild, RendererStyleFlags2, Pipe, ViewChild, DestroyRef, LOCALE_ID, forwardRef, Host, QueryList, ViewChildren, TemplateRef, ChangeDetectionStrategy, SimpleChange, SkipSelf, CUSTOM_ELEMENTS_SCHEMA, reflectComponentType, NgModule } from '@angular/core';
 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, Subject, fromEvent, BehaviorSubject, interval, animationFrameScheduler, noop, merge, Subscription, timer, pipe } from 'rxjs';
+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 { mergeWith, isEqual as isEqual$1 } from 'lodash-es';
@@ -402,7 +402,9 @@ const isObject = (value) => !!(value && value.toString() === '[object Object]');
  * @returns true if provided variable is Date
  * @hidden
  */
-const isDate = (value) => value instanceof Date;
+const isDate = (value) => {
+    return Object.prototype.toString.call(value) === "[object Date]";
+};
 /**
  * Checks if the two passed arguments are equal
  * Currently supports date objects
@@ -599,14 +601,24 @@ const HEADER_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'escape', 'esc', 'l
  * Run the resizeObservable outside angular zone, because it patches the MutationObserver which causes an infinite loop.
  * Related issue: https://github.com/angular/angular/issues/31712
  */
-const resizeObservable = (target) => new Observable((observer) => {
-    const instance = new (getResizeObserver())((entries) => {
-        observer.next(entries);
-    });
-    instance.observe(target);
-    const unsubscribe = () => instance.disconnect();
-    return unsubscribe;
-});
+const resizeObservable = (target) => {
+    const resizeObserver = getResizeObserver();
+    // check whether we are on server env or client env
+    if (resizeObserver) {
+        return new Observable((observer) => {
+            const instance = new resizeObserver((entries) => {
+                observer.next(entries);
+            });
+            instance.observe(target);
+            const unsubscribe = () => instance.disconnect();
+            return unsubscribe;
+        });
+    }
+    else {
+        // if on a server env return a empty observable that does not complete immediately
+        return NEVER;
+    }
+};
 /**
  * @hidden
  * @internal
@@ -4874,7 +4886,9 @@ class IgxAngularAnimationPlayer {
         // To workaround this we are getting the positions from the inner player.
         //  This is logged in Angular here - https://github.com/angular/angular/issues/18891
         //  As soon as this is resolved we can remove this hack
-        this._innerPlayer = innerRenderer.engine.players[innerRenderer.engine.players.length - 1];
+        const rendererEngine = innerRenderer.engine || innerRenderer.delegate.engine;
+        // A workaround because of Angular SSR is using some delegation.
+        this._innerPlayer = rendererEngine.players[rendererEngine.players.length - 1];
     }
     init() {
         this.internalPlayer.init();
@@ -11710,9 +11724,7 @@ class IgxDragDirective {
                 fromEvent(document.defaultView, 'mouseup').pipe(takeUntil(this._destroy))
                     .subscribe((res) => this.onPointerUp(res));
             }
-            this.element.nativeElement.addEventListener('transitionend', (args) => {
-                this.onTransitionEnd(args);
-            });
+            this.element.nativeElement.addEventListener('transitionend', this.onTransitionEnd.bind(this));
         });
         // Set transition duration to 0s. This also helps with setting `visibility: hidden` to the base to not lag.
         this.element.nativeElement.style.transitionDuration = '0.0s';
@@ -11731,6 +11743,7 @@ class IgxDragDirective {
                 this._dynamicGhostRef = null;
             }
         }
+        this.element.nativeElement.removeEventListener('transitionend', this.onTransitionEnd);
         if (this._containerScrollIntervalId) {
             clearInterval(this._containerScrollIntervalId);
             this._containerScrollIntervalId = null;
@@ -12115,12 +12128,7 @@ class IgxDragDirective {
             if (ghostDestroyArgs.cancel) {
                 return;
             }
-            this.ghostElement.remove();
-            this.ghostElement = null;
-            if (this._dynamicGhostRef) {
-                this._dynamicGhostRef.destroy();
-                this._dynamicGhostRef = null;
-            }
+            this.clearGhost();
         }
         else if (!this.ghost) {
             this.element.nativeElement.style.transitionProperty = '';
@@ -12142,6 +12150,18 @@ class IgxDragDirective {
             });
         });
     }
+    clearGhost() {
+        this.ghostElement.removeEventListener('pointermove', this.onPointerMove);
+        this.ghostElement.removeEventListener('pointerup', this.onPointerUp);
+        this.ghostElement.removeEventListener('lostpointercapture', this.onPointerLost);
+        this.ghostElement.removeEventListener('transitionend', this.onTransitionEnd);
+        this.ghostElement.remove();
+        this.ghostElement = null;
+        if (this._dynamicGhostRef) {
+            this._dynamicGhostRef.destroy();
+            this._dynamicGhostRef = null;
+        }
+    }
     /**
      * @hidden
      * Create ghost element - if a Node object is provided it creates a clone of that node,
@@ -12211,20 +12231,12 @@ class IgxDragDirective {
             if (this._pointerDownId !== null) {
                 this.ghostElement.setPointerCapture(this._pointerDownId);
             }
-            this.ghostElement.addEventListener('pointermove', (args) => {
-                this.onPointerMove(args);
-            });
-            this.ghostElement.addEventListener('pointerup', (args) => {
-                this.onPointerUp(args);
-            });
-            this.ghostElement.addEventListener('lostpointercapture', (args) => {
-                this.onPointerLost(args);
-            });
+            this.ghostElement.addEventListener('pointermove', this.onPointerMove.bind(this));
+            this.ghostElement.addEventListener('pointerup', this.onPointerUp.bind(this));
+            this.ghostElement.addEventListener('lostpointercapture', this.onPointerLost.bind(this));
         }
         // Transition animation when the ghostElement is released and it returns to it's original position.
-        this.ghostElement.addEventListener('transitionend', (args) => {
-            this.onTransitionEnd(args);
-        });
+        this.ghostElement.addEventListener('transitionend', this.onTransitionEnd.bind(this));
         this.cdr.detectChanges();
     }
     /**
@@ -14266,8 +14278,10 @@ class IgxForOfDirective extends IgxForOfToken {
     ngAfterViewInit() {
         if (this.igxForScrollOrientation === 'vertical') {
             this._zone.runOutsideAngular(() => {
-                this.contentObserver = new (getResizeObserver())(() => this.contentResizeNotify.next());
-                this.contentObserver.observe(this.dc.instance._viewContainer.element.nativeElement);
+                if (this.platformUtil.isBrowser) {
+                    this.contentObserver = new (getResizeObserver())(() => this.contentResizeNotify.next());
+                    this.contentObserver.observe(this.dc.instance._viewContainer.element.nativeElement);
+                }
             });
         }
     }
@@ -29575,7 +29589,7 @@ const IGX_BUTTON_GROUP_DIRECTIVES = [
 const daysInWeek = 7;
 const millisecondsInDay = 86400000;
 function toCalendarDay(date) {
-    return date instanceof Date ? CalendarDay.from(date) : date;
+    return isDate(date) ? CalendarDay.from(date) : date;
 }
 function checkRollover(original, modified) {
     return original.date !== modified.date
@@ -30202,7 +30216,7 @@ class IgxCalendarViewDirective {
      * @memberof IgxYearsViewComponent
      */
     set date(value) {
-        if (!(value instanceof Date))
+        if (!isDate(value))
             return;
         this._date = value;
     }
@@ -39098,7 +39112,7 @@ class IgxComboComponent extends IgxComboBaseDirective {
             IgxComboAPIService,
             { provide: IGX_COMBO_COMPONENT, useExisting: IgxComboComponent },
             { provide: NG_VALUE_ACCESSOR, useExisting: IgxComboComponent, multi: true }
-        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [type]=\"type\" (click)=\"onClick($event)\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n    <input igxInput #comboInput name=\"comboInput\" type=\"text\" [value]=\"displayValue\" readonly\n            [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\"\n            role=\"combobox\" aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"!dropdown.collapsed\" [attr.aria-controls]=\"dropdown.listId\"\n            [attr.aria-labelledby]=\"ariaLabelledBy || label?.id || placeholder\"\n            (blur)=\"onBlur()\" />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"displayValue\" [attr.aria-label]=\"resourceStrings.igx_combo_clearItems_placeholder\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClearItems($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\" family=\"default\" name=\"input_clear\"></igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\" family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n    </igx-suffix>\n</igx-input-group>\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\"\n    [labelledBy]=\"ariaLabelledBy || label?.id || placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\">\n    <div class=\"igx-combo__search\">\n        <igx-input-group *ngIf=\"displaySearchInput\">\n            <input igxInput #searchInput name=\"searchInput\" autocomplete=\"off\" type=\"text\"\n                   [(ngModel)]=\"searchValue\" (ngModelChange)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n                   (keydown)=\"handleKeyDown($event)\" (focus)=\"dropdown.onBlur($event)\" [attr.placeholder]=\"getSearchPlaceholderText()\"\n                   aria-autocomplete=\"list\" role=\"searchbox\" aria-label=\"search\"/>\n            <igx-suffix *ngIf=\"showSearchCaseIcon\" (click)=\"toggleCaseSensitive()\">\n                <span [ngClass]=\"filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'\">\n                    <igx-icon\n                        family=\"default\"\n                        name=\"case_sensitive\"\n                        [active]=\"filteringOptions.caseSensitive\">\n                    </igx-icon>\n                </span>\n            </igx-suffix>\n        </igx-input-group>\n    </div>\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n        [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-combo-item [itemHeight]=\"itemHeight\" *igxFor=\"let item of data\n            | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction:disableFiltering\n            | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator;\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\" [role]=\"item?.isHeader? 'group' : 'option'\">\n            <ng-container *ngIf=\"item?.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            <ng-container *ngIf=\"!item?.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            [attr.aria-label]=\"resourceStrings.igx_combo_addCustomValues_placeholder\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button type=\"button\" igxButton=\"flat\" igxRipple>{{ resourceStrings.igx_combo_addCustomValues_placeholder }}</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxComboDropDownComponent, selector: "igx-combo-drop-down", inputs: ["singleMode"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "component", type: IgxComboItemComponent, selector: "igx-combo-item", inputs: ["itemHeight", "ariaLabel", "singleMode"] }, { kind: "component", type: IgxComboAddItemComponent, selector: "igx-combo-add-item" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "pipe", type: IgxComboFilteringPipe, name: "comboFiltering" }, { kind: "pipe", type: IgxComboGroupingPipe, name: "comboGrouping" }] }); }
+        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [type]=\"type\" (click)=\"onClick($event)\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n    <input igxInput #comboInput name=\"comboInput\" type=\"text\" [value]=\"displayValue\" readonly\n            [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\"\n            role=\"combobox\" aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"!dropdown.collapsed\" [attr.aria-controls]=\"dropdown.listId\"\n            [attr.aria-labelledby]=\"ariaLabelledBy || label?.id || placeholder\"\n            (blur)=\"onBlur()\" />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"displayValue\" [attr.aria-label]=\"resourceStrings.igx_combo_clearItems_placeholder\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClearItems($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\" family=\"default\" name=\"input_clear\"></igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\" family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n    </igx-suffix>\n</igx-input-group>\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\"\n    [labelledBy]=\"ariaLabelledBy || label?.id || placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\">\n    <div class=\"igx-combo__search\" *ngIf=\"displaySearchInput\">\n        <igx-input-group>\n            <input igxInput #searchInput name=\"searchInput\" autocomplete=\"off\" type=\"text\"\n                   [(ngModel)]=\"searchValue\" (ngModelChange)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n                   (keydown)=\"handleKeyDown($event)\" (focus)=\"dropdown.onBlur($event)\" [attr.placeholder]=\"getSearchPlaceholderText()\"\n                   aria-autocomplete=\"list\" role=\"searchbox\" aria-label=\"search\"/>\n            <igx-suffix *ngIf=\"showSearchCaseIcon\" (click)=\"toggleCaseSensitive()\">\n                <span [ngClass]=\"filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'\">\n                    <igx-icon\n                        family=\"default\"\n                        name=\"case_sensitive\"\n                        [active]=\"filteringOptions.caseSensitive\">\n                    </igx-icon>\n                </span>\n            </igx-suffix>\n        </igx-input-group>\n    </div>\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n        [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-combo-item [itemHeight]=\"itemHeight\" *igxFor=\"let item of data\n            | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction:disableFiltering\n            | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator;\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\" [role]=\"item?.isHeader? 'group' : 'option'\">\n            <ng-container *ngIf=\"item?.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            <ng-container *ngIf=\"!item?.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            [attr.aria-label]=\"resourceStrings.igx_combo_addCustomValues_placeholder\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button type=\"button\" igxButton=\"flat\" igxRipple>{{ resourceStrings.igx_combo_addCustomValues_placeholder }}</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxComboDropDownComponent, selector: "igx-combo-drop-down", inputs: ["singleMode"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "component", type: IgxComboItemComponent, selector: "igx-combo-item", inputs: ["itemHeight", "ariaLabel", "singleMode"] }, { kind: "component", type: IgxComboAddItemComponent, selector: "igx-combo-add-item" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "pipe", type: IgxComboFilteringPipe, name: "comboFiltering" }, { kind: "pipe", type: IgxComboGroupingPipe, name: "comboGrouping" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxComboComponent, decorators: [{
             type: Component,
@@ -39124,7 +39138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                         IgxRippleDirective,
                         IgxComboFilteringPipe,
                         IgxComboGroupingPipe
-                    ], template: "<igx-input-group #inputGroup [type]=\"type\" (click)=\"onClick($event)\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n    <input igxInput #comboInput name=\"comboInput\" type=\"text\" [value]=\"displayValue\" readonly\n            [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\"\n            role=\"combobox\" aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"!dropdown.collapsed\" [attr.aria-controls]=\"dropdown.listId\"\n            [attr.aria-labelledby]=\"ariaLabelledBy || label?.id || placeholder\"\n            (blur)=\"onBlur()\" />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"displayValue\" [attr.aria-label]=\"resourceStrings.igx_combo_clearItems_placeholder\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClearItems($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\" family=\"default\" name=\"input_clear\"></igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\" family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n    </igx-suffix>\n</igx-input-group>\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\"\n    [labelledBy]=\"ariaLabelledBy || label?.id || placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\">\n    <div class=\"igx-combo__search\">\n        <igx-input-group *ngIf=\"displaySearchInput\">\n            <input igxInput #searchInput name=\"searchInput\" autocomplete=\"off\" type=\"text\"\n                   [(ngModel)]=\"searchValue\" (ngModelChange)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n                   (keydown)=\"handleKeyDown($event)\" (focus)=\"dropdown.onBlur($event)\" [attr.placeholder]=\"getSearchPlaceholderText()\"\n                   aria-autocomplete=\"list\" role=\"searchbox\" aria-label=\"search\"/>\n            <igx-suffix *ngIf=\"showSearchCaseIcon\" (click)=\"toggleCaseSensitive()\">\n                <span [ngClass]=\"filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'\">\n                    <igx-icon\n                        family=\"default\"\n                        name=\"case_sensitive\"\n                        [active]=\"filteringOptions.caseSensitive\">\n                    </igx-icon>\n                </span>\n            </igx-suffix>\n        </igx-input-group>\n    </div>\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n        [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-combo-item [itemHeight]=\"itemHeight\" *igxFor=\"let item of data\n            | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction:disableFiltering\n            | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator;\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\" [role]=\"item?.isHeader? 'group' : 'option'\">\n            <ng-container *ngIf=\"item?.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            <ng-container *ngIf=\"!item?.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            [attr.aria-label]=\"resourceStrings.igx_combo_addCustomValues_placeholder\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button type=\"button\" igxButton=\"flat\" igxRipple>{{ resourceStrings.igx_combo_addCustomValues_placeholder }}</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n" }]
+                    ], template: "<igx-input-group #inputGroup [type]=\"type\" (click)=\"onClick($event)\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n    <input igxInput #comboInput name=\"comboInput\" type=\"text\" [value]=\"displayValue\" readonly\n            [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\"\n            role=\"combobox\" aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"!dropdown.collapsed\" [attr.aria-controls]=\"dropdown.listId\"\n            [attr.aria-labelledby]=\"ariaLabelledBy || label?.id || placeholder\"\n            (blur)=\"onBlur()\" />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"displayValue\" [attr.aria-label]=\"resourceStrings.igx_combo_clearItems_placeholder\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClearItems($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\" family=\"default\" name=\"input_clear\"></igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\" family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n    </igx-suffix>\n</igx-input-group>\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\"\n    [labelledBy]=\"ariaLabelledBy || label?.id || placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\">\n    <div class=\"igx-combo__search\" *ngIf=\"displaySearchInput\">\n        <igx-input-group>\n            <input igxInput #searchInput name=\"searchInput\" autocomplete=\"off\" type=\"text\"\n                   [(ngModel)]=\"searchValue\" (ngModelChange)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n                   (keydown)=\"handleKeyDown($event)\" (focus)=\"dropdown.onBlur($event)\" [attr.placeholder]=\"getSearchPlaceholderText()\"\n                   aria-autocomplete=\"list\" role=\"searchbox\" aria-label=\"search\"/>\n            <igx-suffix *ngIf=\"showSearchCaseIcon\" (click)=\"toggleCaseSensitive()\">\n                <span [ngClass]=\"filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'\">\n                    <igx-icon\n                        family=\"default\"\n                        name=\"case_sensitive\"\n                        [active]=\"filteringOptions.caseSensitive\">\n                    </igx-icon>\n                </span>\n            </igx-suffix>\n        </igx-input-group>\n    </div>\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n        [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-combo-item [itemHeight]=\"itemHeight\" *igxFor=\"let item of data\n            | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction:disableFiltering\n            | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator;\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\" [role]=\"item?.isHeader? 'group' : 'option'\">\n            <ng-container *ngIf=\"item?.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            <ng-container *ngIf=\"!item?.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            [attr.aria-label]=\"resourceStrings.igx_combo_addCustomValues_placeholder\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button type=\"button\" igxButton=\"flat\" igxRipple>{{ resourceStrings.igx_combo_addCustomValues_placeholder }}</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: IgxComboAPIService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -50192,7 +50206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
  */
 class IgxExcelStyleConditionalFilterComponent {
     get filterNumber() {
-        return this.esf.expressionsList.length;
+        return this.esf.expressionsList.filter(e => e.expression.condition).length;
     }
     constructor(esf, platform) {
         this.esf = esf;
@@ -50284,6 +50298,9 @@ class IgxExcelStyleConditionalFilterComponent {
             this.esf.expressionsList[0].expression.condition.name !== 'in') {
             this.customDialog.expressionsList = this.esf.expressionsList;
         }
+        else {
+            this.customDialog.expressionsList = this.customDialog.expressionsList.filter(e => e.expression.fieldName === this.esf.column.field && e.expression.condition);
+        }
         this.customDialog.selectedOperator = eventArgs.newSelection.value;
         eventArgs.cancel = true;
         if (this.esf.overlayComponentId) {
@@ -55389,7 +55406,7 @@ class IgxColumnMovingDragDirective extends IgxDragDirective {
                 source: this.column
             };
             this.column.grid.columnMovingStart.emit(movingStartArgs);
-            this.subscription$ = fromEvent(this.column.grid.document.defaultView, 'keydown').subscribe((ev) => {
+            this.subscription$ = fromEvent(this.column.grid.document.defaultView, 'keydown').pipe(takeUntil$1(this._destroy)).subscribe((ev) => {
                 if (ev.key === this.platformUtil.KEYMAP.ESCAPE) {
                     this.onEscape(ev);
                 }
@@ -64232,6 +64249,7 @@ class IgxGridBaseDirective {
         this._rowSelectionMode = GridSelectionMode.none;
         this._selectRowOnClick = true;
         this._columnSelectionMode = GridSelectionMode.none;
+        this.isColumnWidthSum = false;
         this.rowEditPositioningStrategy = new RowEditPositionStrategy({
             horizontalDirection: HorizontalAlignment.Right,
             verticalDirection: VerticalAlignment.Bottom,
@@ -64816,7 +64834,7 @@ class IgxGridBaseDirective {
             .subscribe((change) => {
             this.onPinnedRowsChanged(change);
         });
-        this.addRowSnackbar?.clicked.subscribe(() => {
+        this.addRowSnackbar?.clicked.pipe(takeUntil(this.destroy$)).subscribe(() => {
             const rec = this.filteredSortedData[this.lastAddedRowIndex];
             this.scrollTo(rec, 0);
             this.addRowSnackbar.close();
@@ -67045,6 +67063,7 @@ class IgxGridBaseDirective {
         }
         if (this.width === null || !width) {
             width = this.getColumnWidthSum();
+            this.isColumnWidthSum = true;
         }
         if (this.hasVerticalScroll() && this.width !== null) {
             width -= this.scrollSize;
@@ -67811,6 +67830,9 @@ class IgxGridBaseDirective {
             this.resetCachedWidths();
             this.cdr.detectChanges();
         }
+        if (this.isColumnWidthSum) {
+            this.calcWidth = this.getColumnWidthSum();
+        }
     }
     extractDataFromColumnsSelection(source, formatters = false, headers = false) {
         let record = {};
@@ -76294,7 +76316,7 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
     }
     /** @hidden */
     featureColumnsWidth() {
-        return this.pivotRowWidths;
+        return this.pivotRowWidths || 0;
     }
     /* blazorSuppress */
     /**
@@ -76414,7 +76436,7 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
     }
     /** @hidden @internal */
     get pivotPinnedWidth() {
-        return this.isPinningToStart ? this.pinnedWidth : this.headerFeaturesWidth;
+        return !this._init ? (this.isPinningToStart ? this.pinnedWidth : this.headerFeaturesWidth) : 0;
     }
     /** @hidden @internal */
     get pivotUnpinnedWidth() {
@@ -76450,11 +76472,6 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
         this.toggleRowGroup(col, newState);
         this.reflow();
     }
-    getColumnWidthSum() {
-        let colSum = super.getColumnWidthSum();
-        colSum += this.rowDimensions.map(dim => this.rowDimensionWidthToPixels(dim)).reduce((prev, cur) => prev + cur, 0);
-        return colSum;
-    }
     /**
      * @hidden @internal
      */
@@ -77283,6 +77300,9 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
                 dim.autoWidth = maxSize;
             }
         }
+        if (this.isColumnWidthSum) {
+            this.calcWidth = this.getColumnWidthSum();
+        }
     }
     /** @hidden @internal */
     get hasDimensionsToAutosize() {
@@ -89114,9 +89134,10 @@ class IgxTabsComponent extends IgxTabsDirective {
             this.realignSelectedIndicator();
         });
     }
-    constructor(animationService, cdr, ngZone, dir) {
+    constructor(animationService, cdr, ngZone, dir, platform) {
         super(animationService, cdr, dir);
         this.ngZone = ngZone;
+        this.platform = platform;
         /**
          * Determines the tab activation.
          * When set to auto, the tab is instantly selected while navigating with the Left/Right Arrows, Home or End keys and the corresponding panel is displayed.
@@ -89136,12 +89157,14 @@ class IgxTabsComponent extends IgxTabsDirective {
     ngAfterViewInit() {
         super.ngAfterViewInit();
         this.ngZone.runOutsideAngular(() => {
-            this._resizeObserver = new (getResizeObserver())(() => {
-                this.updateScrollButtons();
-                this.realignSelectedIndicator();
-            });
-            this._resizeObserver.observe(this.headerContainer.nativeElement);
-            this._resizeObserver.observe(this.viewPort.nativeElement);
+            if (this.platform.isBrowser) {
+                this._resizeObserver = new (getResizeObserver())(() => {
+                    this.updateScrollButtons();
+                    this.realignSelectedIndicator();
+                });
+                this._resizeObserver.observe(this.headerContainer.nativeElement);
+                this._resizeObserver.observe(this.viewPort.nativeElement);
+            }
         });
     }
     /** @hidden @internal */
@@ -89313,7 +89336,7 @@ class IgxTabsComponent extends IgxTabsDirective {
     getElementOffset(element) {
         return this.dir.rtl ? this.itemsWrapper.nativeElement.offsetWidth - element.offsetLeft - element.offsetWidth : element.offsetLeft;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxTabsComponent, deps: [{ token: IgxAngularAnimationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: IgxDirectionality }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxTabsComponent, deps: [{ token: IgxAngularAnimationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: IgxDirectionality }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: IgxTabsComponent, isStandalone: true, selector: "igx-tabs", inputs: { tabAlignment: "tabAlignment", activation: "activation" }, host: { properties: { "class.igx-tabs": "this.defaultClass" } }, providers: [{ provide: IgxTabsBase, useExisting: IgxTabsComponent }], viewQueries: [{ propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true, static: true }, { propertyName: "viewPort", first: true, predicate: ["viewPort"], descendants: true, static: true }, { propertyName: "itemsWrapper", first: true, predicate: ["itemsWrapper"], descendants: true, static: true }, { propertyName: "itemsContainer", first: true, predicate: ["itemsContainer"], descendants: true, static: true }, { propertyName: "selectedIndicator", first: true, predicate: ["selectedIndicator"], descendants: true }, { propertyName: "scrollPrevButton", first: true, predicate: ["scrollPrevButton"], descendants: true }, { propertyName: "scrollNextButton", first: true, predicate: ["scrollNextButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #headerContainer class=\"igx-tabs__header\">\n    <button #scrollPrevButton type=\"button\" igxIconButton=\"flat\" igxRipple tabindex=\"-1\" class=\"igx-tabs__header-button\" (click)=\"scrollPrev()\">\n        <igx-icon family=\"default\" name=\"prev\"></igx-icon>\n    </button>\n    <div #viewPort class=\"igx-tabs__header-content\">\n        <div #itemsWrapper class=\"igx-tabs__header-wrapper\" role=\"tablist\">\n            <div #itemsContainer class=\"igx-tabs__header-scroll\" [ngClass]=\"resolveHeaderScrollClasses()\">\n                <ng-container *ngFor=\"let tab of items; let i = index\">\n                    <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n                </ng-container>\n            </div>\n            <div #selectedIndicator *ngIf=\"items.length > 0\" class=\"igx-tabs__header-active-indicator\">\n            </div>\n        </div>\n    </div>\n    <button #scrollNextButton type=\"button\" igxIconButton=\"flat\" igxRipple tabindex=\"-1\" class=\"igx-tabs__header-button\" (click)=\"scrollNext()\">\n        <igx-icon family=\"default\" name=\"next\"></igx-icon>\n    </button>\n</div>\n<div class=\"igx-tabs__panels\">\n    <ng-container *ngFor=\"let tab of items; let i = index\">\n        <ng-container *ngTemplateOutlet=\"tab.panelTemplate\"></ng-container>\n    </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { 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"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxTabsComponent, decorators: [{
@@ -89322,7 +89345,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [IgxAngularAnimationService]
-                }] }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: IgxDirectionality }], propDecorators: { tabAlignment: [{
+                }] }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: IgxDirectionality }, { type: PlatformUtil }], propDecorators: { tabAlignment: [{
                 type: Input
             }], activation: [{
                 type: Input
@@ -89420,10 +89443,12 @@ class IgxTabHeaderComponent extends IgxTabHeaderDirective {
     /** @hidden @internal */
     ngAfterViewInit() {
         this.ngZone.runOutsideAngular(() => {
-            this._resizeObserver = new (getResizeObserver())(() => {
-                this.tabs.realignSelectedIndicator();
-            });
-            this._resizeObserver.observe(this.nativeElement);
+            if (this.platform.isBrowser) {
+                this._resizeObserver = new (getResizeObserver())(() => {
+                    this.tabs.realignSelectedIndicator();
+                });
+                this._resizeObserver.observe(this.nativeElement);
+            }
         });
     }
     /** @hidden @internal */