igniteui-angular 13.2.3 → 13.2.6

package/fesm2020/igniteui-angular.mjs

@@ -11158,7 +11158,7 @@ class IgxGridForOfDirective extends IgxForOfDirective {
                 this.igxForContainerSize = args.containerSize;
                 const sizeDiff = this._updateSizeCache(changes);
                 this._applyChanges();
-                if (sizeDiff) {
+                if (sizeDiff && this.igxForScrollOrientation === 'vertical') {
                     this._adjustScrollPositionAfterSizeChange(sizeDiff);
                 }
                 this._updateScrollOffset();
@@ -24016,8 +24016,8 @@ class IgxRowAddCrudState extends IgxRowCrudState {
         if (isAddRow) {
             this.endAddRow();
             if (commit) {
-                this.grid.rowAddedNotifier.next({ data: args.newValue });
-                this.grid.rowAdded.emit({ data: args.newValue });
+                this.grid.rowAddedNotifier.next({ data: args.newValue, owner: this.grid });
+                this.grid.rowAdded.emit({ data: args.newValue, owner: this.grid });
             }
         }
         return args;
@@ -37693,7 +37693,7 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
     }
     /** @hidden @internal */
     onBlur() {
-        if (this.collapsed) {
+        if (this.collapsed && !this.selectedItem) {
             this.clearOnBlur();
         }
         super.onBlur();
@@ -46365,6 +46365,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                     selector: '[igxTreeExpandIndicator]'
                 }]
         }] });
+/**
+ * IgxTreeComponent allows a developer to show a set of nodes in a hierarchical fashion.
+ *
+ * @igxModule IgxTreeModule
+ * @igxKeywords tree
+ * @igxTheme igx-tree-theme
+ * @igxGroup Grids & Lists
+ *
+ * @remark
+ * The Angular Tree Component allows users to represent hierarchical data in a tree-view structure,
+ * maintaining parent-child relationships, as well as to define static tree-view structure without a corresponding data model.
+ * Its primary purpose is to allow end-users to visualize and navigate within hierarchical data structures.
+ * The Ignite UI for Angular Tree Component also provides load on demand capabilities, item activation,
+ * bi-state and cascading selection of items through built-in checkboxes, built-in keyboard navigation and more.
+ *
+ * @example
+ * ```html
+ * <igx-tree>
+ *   <igx-tree-node>
+ *      I am a parent node 1
+ *      <igx-tree-node>
+ *          I am a child node 1
+ *      </igx-tree-node>
+ *      ...
+ *   </igx-tree-node>
+ *	 ...
+ * </igx-tree>
+ * ```
+ */
 class IgxTreeComponent extends DisplayDensityBase {
     constructor(navService, selectionService, treeService, element, _displayDensityOptions) {
         super(_displayDensityOptions);
@@ -48408,8 +48437,7 @@ class GridBaseAPIService {
             return;
         }
         const record = data[index];
-        // //  TODO: should we emit this when cascadeOnDelete is true for each row?!?!
-        grid.rowDeletedNotifier.next({ data: data[index] });
+        grid.rowDeletedNotifier.next({ data: data[index], owner: grid });
         this.deleteRowFromData(rowId, index);
         if (grid.selectionService.isRowSelected(rowId)) {
             grid.selectionService.deselectRow(rowId);
@@ -60390,6 +60418,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this._rendered = false;
         this.DRAG_SCROLL_DELTA = 10;
         this._dataCloneStrategy = new DefaultDataCloneStrategy();
+        this._autoSize = false;
         /**
          * @hidden @internal
          */
@@ -61430,6 +61459,12 @@ class IgxGridBaseDirective extends DisplayDensityBase {
     get scrollSize() {
         return this.verticalScrollContainer.getScrollNativeSize();
     }
+    /**
+     * @hidden @internal
+     */
+    get minColumnWidth() {
+        return MINIMUM_COLUMN_WIDTH$2;
+    }
     /**
      * Returns an array containing the filtered sorted data.
      *
@@ -61786,10 +61821,11 @@ class IgxGridBaseDirective extends DisplayDensityBase {
             this.notifyChanges(true);
             this.cdr.detectChanges();
         });
-        this.verticalScrollContainer.contentSizeChange.pipe(filter(() => !this._init), destructor).subscribe(() => {
-            this.notifyChanges();
+        this.verticalScrollContainer.contentSizeChange.pipe(filter(() => !this._init), throttleTime(30), destructor).subscribe(() => {
+            this.notifyChanges(true);
         });
         this.onDensityChanged.pipe(destructor).subscribe(() => {
+            this._autoSize = this.isPercentHeight && this.calcHeight !== this.getDataBasedBodyHeight();
             this.crudService.endEdit(false);
             if (this._summaryRowHeight === 0) {
                 this.summaryService.summaryHeight = 0;
@@ -62756,7 +62792,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         // commit pending states prior to adding a row
         this.crudService.endEdit(true);
         this.gridAPI.addRowToData(data);
-        this.rowAddedNotifier.next({ data });
+        this.rowAddedNotifier.next({ data: data, owner: this });
         this.pipeTrigger++;
         this.notifyChanges();
     }
@@ -62783,7 +62819,8 @@ class IgxGridBaseDirective extends DisplayDensityBase {
             rowID: rowId,
             cancel: false,
             rowData: this.getRowData(rowId),
-            oldValue: null
+            oldValue: null,
+            owner: this
         };
         this.rowDelete.emit(args);
         if (args.cancel) {
@@ -62791,8 +62828,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         }
         const record = this.gridAPI.deleteRowById(rowId);
         if (record !== null && record !== undefined) {
-            //  TODO: should we emit this when cascadeOnDelete is true for each row?!?!
-            this.rowDeleted.emit({ data: record });
+            this.rowDeleted.emit({ data: record, owner: this });
         }
         return record;
     }
@@ -63450,8 +63486,8 @@ class IgxGridBaseDirective extends DisplayDensityBase {
             return '0px';
         }
         const columnWidth = Math.floor(!Number.isFinite(sumExistingWidths) ?
-            Math.max(computedWidth / columnsToSize, MINIMUM_COLUMN_WIDTH$2) :
-            Math.max((computedWidth - sumExistingWidths) / columnsToSize, MINIMUM_COLUMN_WIDTH$2));
+            Math.max(computedWidth / columnsToSize, this.minColumnWidth) :
+            Math.max((computedWidth - sumExistingWidths) / columnsToSize, this.minColumnWidth));
         return columnWidth + 'px';
     }
     /**
@@ -64417,7 +64453,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      */
     _derivePossibleWidth() {
         if (!this.columnWidthSetByUser) {
-            this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : MINIMUM_COLUMN_WIDTH$2 + 'px';
+            this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : this.minColumnWidth + 'px';
         }
         this._columns.forEach((column) => {
             if (this.hasColumnLayouts && parseInt(this._columnWidth, 10)) {
@@ -64825,10 +64861,13 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.tbody.nativeElement.style.display = 'none';
         let res = !this.nativeElement.parentElement ||
             this.nativeElement.parentElement.clientHeight === 0 ||
-            this.nativeElement.parentElement.clientHeight === renderedHeight ||
+            this.nativeElement.parentElement.clientHeight === renderedHeight;
+        if ((!this.platform.isChromium && !this.platform.isFirefox) || this._autoSize) {
             // If grid causes the parent container to extend (for example when container is flex)
             // we should always auto-size since the actual size of the container will continuously change as the grid renders elements.
-            this.checkContainerSizeChange();
+            this._autoSize = false;
+            res = this.checkContainerSizeChange();
+        }
         this.tbody.nativeElement.style.display = '';
         return res;
     }
@@ -65219,7 +65258,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         const cols = this.hasColumnLayouts ?
             this.visibleColumns.filter(x => x.columnLayout) : this.visibleColumns.filter(x => !x.columnGroup);
         cols.forEach((item) => {
-            colSum += parseInt((item.calcWidth || item.defaultWidth), 10) || MINIMUM_COLUMN_WIDTH$2;
+            colSum += parseInt((item.calcWidth || item.defaultWidth), 10) || this.minColumnWidth;
         });
         if (!colSum) {
             return null;
@@ -73681,7 +73720,7 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
     addRow(data, parentRowID) {
         this.crudService.endEdit(true);
         this.gridAPI.addRowToData(data, parentRowID);
-        this.rowAddedNotifier.next({ data });
+        this.rowAddedNotifier.next({ data: data, owner: this });
         this.pipeTrigger++;
         this.notifyChanges();
     }
@@ -73788,7 +73827,22 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
         //  if this is flat self-referencing data, and CascadeOnDelete is set to true
         //  and if we have transactions we should start pending transaction. This allows
         //  us in case of delete action to delete all child rows as single undo action
-        return this.gridAPI.deleteRowById(rowId);
+        const args = {
+            rowID: rowId,
+            cancel: false,
+            rowData: this.getRowData(rowId),
+            oldValue: null,
+            owner: this
+        };
+        this.rowDelete.emit(args);
+        if (args.cancel) {
+            return;
+        }
+        const record = this.gridAPI.deleteRowById(rowId);
+        if (record !== null && record !== undefined) {
+            this.rowDeleted.emit({ data: record, owner: this });
+        }
+        return record;
     }
     /**
      * Returns the `IgxTreeGridRow` by index.
@@ -74126,6 +74180,7 @@ IgxTreeGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         IgxGridCRUDService,
         IgxGridSummaryService,
         IgxGridNavigationService,
+        IgxColumnResizingService,
         { provide: IgxGridSelectionService, useClass: IgxTreeGridSelectionService },
         { provide: IGX_GRID_SERVICE_BASE, useClass: IgxTreeGridAPIService },
         { provide: IGX_GRID_BASE, useExisting: IgxTreeGridComponent },
@@ -74139,6 +74194,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                         IgxGridCRUDService,
                         IgxGridSummaryService,
                         IgxGridNavigationService,
+                        IgxColumnResizingService,
                         { provide: IgxGridSelectionService, useClass: IgxTreeGridSelectionService },
                         { provide: IGX_GRID_SERVICE_BASE, useClass: IgxTreeGridAPIService },
                         { provide: IGX_GRID_BASE, useExisting: IgxTreeGridComponent },
@@ -76016,6 +76072,12 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
         const id = this.id;
         return (!this.parentIsland && this.paginationComponents?.first) || this.rootGrid.paginatorList?.find((pg) => pg.nativeElement.offsetParent?.id === id);
     }
+    /** @hidden @internal */
+    get excelStyleFilteringComponent() {
+        return this.parentIsland ?
+            this.parentIsland.excelStyleFilteringComponents.first :
+            super.excelStyleFilteringComponent;
+    }
     /**
      * Sets an array of objects containing the filtered data in the `IgxHierarchicalGridComponent`.
      * ```typescript
@@ -76688,6 +76750,7 @@ IgxHierarchicalGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
         { provide: IGX_GRID_SERVICE_BASE, useClass: IgxHierarchicalGridAPIService },
         { provide: IGX_GRID_BASE, useExisting: IgxHierarchicalGridComponent },
         IgxGridSummaryService,
+        IgxColumnResizingService,
         IgxFilteringService,
         IgxHierarchicalGridNavigationService,
         IgxForOfSyncService,
@@ -76702,6 +76765,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                         { provide: IGX_GRID_SERVICE_BASE, useClass: IgxHierarchicalGridAPIService },
                         { provide: IGX_GRID_BASE, useExisting: IgxHierarchicalGridComponent },
                         IgxGridSummaryService,
+                        IgxColumnResizingService,
                         IgxFilteringService,
                         IgxHierarchicalGridNavigationService,
                         IgxForOfSyncService,
@@ -81480,17 +81544,67 @@ class IgxSplitterPaneComponent {
         this.overflow = 'auto';
         /**
          * @hidden @internal
-         * Gets/Sets the `minHeight` and `minWidth` properties of the current pane.
+         * Get/Sets the `minWidth` properties of the current pane.
          */
-        this.minHeight = 0;
+        this.minWidth = '0';
         /**
          * @hidden @internal
-         * Gets/Sets the `maxHeight` and `maxWidth` properties of the current `IgxSplitterPaneComponent`.
+         * Get/Sets the `maxWidth` properties of the current pane.
+         */
+        this.maxWidth = '100%';
+        /**
+         * @hidden @internal
+         * Gets/Sets the `minHeight` properties of the current pane.
+         */
+        this.minHeight = '0';
+        /**
+         * @hidden @internal
+         * Gets/Sets the `maxHeight` properties of the current `IgxSplitterPaneComponent`.
          */
         this.maxHeight = '100%';
         this._size = 'auto';
         this._collapsed = false;
     }
+    /**
+     * Gets/Sets the minimum allowed size of the current pane.
+     *
+     * @example
+     * ```html
+     * <igx-splitter>
+     *  <igx-splitter-pane [minSize]='minSize'>...</igx-splitter-pane>
+     * </igx-splitter>
+     * ```
+     */
+    get minSize() {
+        return this._minSize;
+    }
+    ;
+    set minSize(value) {
+        this._minSize = value;
+        if (this.owner) {
+            this.owner.panes.notifyOnChanges();
+        }
+    }
+    /**
+     * Gets/Set the maximum allowed size of the current pane.
+     *
+     * @example
+     * ```html
+     * <igx-splitter>
+     *  <igx-splitter-pane [maxSize]='maxSize'>...</igx-splitter-pane>
+     * </igx-splitter>
+     * ```
+     */
+    get maxSize() {
+        return this._maxSize;
+    }
+    ;
+    set maxSize(value) {
+        this._maxSize = value;
+        if (this.owner) {
+            this.owner.panes.notifyOnChanges();
+        }
+    }
     /**
      * Gets/Sets the size of the current pane.
      *  * @example
@@ -81586,7 +81700,7 @@ class IgxSplitterPaneComponent {
     }
 }
 IgxSplitterPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxSplitterPaneComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-IgxSplitterPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: IgxSplitterPaneComponent, selector: "igx-splitter-pane", inputs: { minSize: "minSize", maxSize: "maxSize", resizable: "resizable", size: "size", collapsed: "collapsed" }, outputs: { collapsedChange: "collapsedChange" }, host: { properties: { "style.display": "this.display", "style.order": "this.order", "style.overflow": "this.overflow", "style.min-height": "this.minHeight", "style.min-width": "this.minHeight", "style.max-height": "this.maxHeight", "style.max-width": "this.maxHeight", "style.flex": "this.flex" } }, ngImport: i0, template: "<ng-content></ng-content>" });
+IgxSplitterPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: IgxSplitterPaneComponent, selector: "igx-splitter-pane", inputs: { minSize: "minSize", maxSize: "maxSize", resizable: "resizable", size: "size", collapsed: "collapsed" }, outputs: { collapsedChange: "collapsedChange" }, host: { properties: { "style.display": "this.display", "style.order": "this.order", "style.overflow": "this.overflow", "style.min-width": "this.minWidth", "style.max-width": "this.maxWidth", "style.min-height": "this.minHeight", "style.max-height": "this.maxHeight", "style.flex": "this.flex" } }, ngImport: i0, template: "<ng-content></ng-content>" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxSplitterPaneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-splitter-pane', template: "<ng-content></ng-content>" }]
@@ -81607,18 +81721,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
             }], overflow: [{
                 type: HostBinding,
                 args: ['style.overflow']
+            }], minWidth: [{
+                type: HostBinding,
+                args: ['style.min-width']
+            }], maxWidth: [{
+                type: HostBinding,
+                args: ['style.max-width']
             }], minHeight: [{
                 type: HostBinding,
                 args: ['style.min-height']
-            }, {
-                type: HostBinding,
-                args: ['style.min-width']
             }], maxHeight: [{
                 type: HostBinding,
                 args: ['style.max-height']
-            }, {
-                type: HostBinding,
-                args: ['style.max-width']
             }], size: [{
                 type: Input
             }], flex: [{
@@ -81737,6 +81851,7 @@ class IgxSplitterComponent {
     set type(value) {
         this._type = value;
         this.resetPaneSizes();
+        this.panes?.notifyOnChanges();
     }
     /**
      * @hidden @internal
@@ -81841,7 +81956,17 @@ class IgxSplitterComponent {
      * This method inits panes with properties.
      */
     initPanes() {
-        this.panes.forEach(pane => pane.owner = this);
+        this.panes.forEach(pane => {
+            pane.owner = this;
+            if (this.type === SplitterType.Horizontal) {
+                pane.minWidth = pane.minSize ?? '0';
+                pane.maxWidth = pane.maxSize ?? '100%';
+            }
+            else {
+                pane.minHeight = pane.minSize ?? '0';
+                pane.maxHeight = pane.maxSize ?? '100%';
+            }
+        });
         this.assignFlexOrder();
         if (this.panes.filter(x => x.collapsed).length > 0) {
             // if any panes are collapsed, reset sizes.
@@ -81855,7 +81980,13 @@ class IgxSplitterComponent {
     resetPaneSizes() {
         if (this.panes) {
             // if type is changed runtime, should reset sizes.
-            this.panes.forEach(x => x.size = 'auto');
+            this.panes.forEach(x => {
+                x.size = 'auto';
+                x.minWidth = '0';
+                x.maxWidth = '100%';
+                x.minHeight = '0';
+                x.maxHeight = '100%';
+            });
         }
     }
     /**
@@ -86216,6 +86347,19 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
          */
         this.toolbarExporting = new EventEmitter();
     }
+    /**
+     * Gets the sorting expressions generated for the dimensions.
+     *
+     * @example
+     * ```typescript
+     * const expressions = this.grid.dimensionsSortingExpressions;
+     * ```
+     */
+    get dimensionsSortingExpressions() {
+        const allEnabledDimensions = this.rowDimensions.concat(this.columnDimensions);
+        const dimensionsSortingExpressions = PivotSortUtil.generateDimensionSortingExpressions(allEnabledDimensions);
+        return dimensionsSortingExpressions;
+    }
     set pivotConfiguration(value) {
         this._pivotConfiguration = value;
         if (!this._init) {
@@ -86275,6 +86419,17 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
             this.onDensityChanged.emit(densityChangedArgs);
         }
     }
+    /**
+     * @hidden @internal
+     */
+    get minColumnWidth() {
+        if (this.superCompactMode) {
+            return MINIMUM_COLUMN_WIDTH_SUPER_COMPACT;
+        }
+        else {
+            return MINIMUM_COLUMN_WIDTH;
+        }
+    }
     get pivotKeys() {
         return this.pivotConfiguration.pivotKeys || DEFAULT_PIVOT_KEYS;
     }
@@ -87227,9 +87382,8 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
             dim.childLevel.sortDirection = dimension.sortDirection;
             dim = dim.childLevel;
         }
-        const dimensionsSortingExpressions = PivotSortUtil.generateDimensionSortingExpressions(this.rowDimensions);
         this.pipeTrigger++;
-        this.dimensionsSortingExpressionsChange.emit(dimensionsSortingExpressions);
+        this.dimensionsSortingExpressionsChange.emit(this.dimensionsSortingExpressions);
         if (dimensionType === PivotDimensionType.Column) {
             this.setupColumns();
         }
@@ -87480,7 +87634,6 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
                 ref.instance.header = value.displayName;
                 ref.instance.field = value.member;
                 ref.instance.parent = parent;
-                ref.instance.width = MINIMUM_COLUMN_WIDTH + 'px';
                 ref.instance.sortable = true;
                 ref.instance.dataType = value.dataType || this.resolveDataTypes(data[0][value.member]);
                 ref.instance.formatter = value.formatter;
@@ -87559,7 +87712,9 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
         ref.instance.header = parent != null ? key.split(parent.header + this.pivotKeys.columnDimensionSeparator)[1] : key;
         ref.instance.field = key;
         ref.instance.parent = parent;
-        ref.instance.width = this.resolveColumnDimensionWidth(value.dimension);
+        if (value.dimension.width) {
+            ref.instance.width = value.dimension.width;
+        }
         const valueDefinition = this.values[0];
         ref.instance.dataType = valueDefinition?.dataType || this.resolveDataTypes(data[0][valueDefinition?.member]);
         ref.instance.formatter = valueDefinition?.formatter;
@@ -87571,20 +87726,21 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
         if (dim.width) {
             return dim.width;
         }
-        return this.superCompactMode ? MINIMUM_COLUMN_WIDTH_SUPER_COMPACT + 'px' : MINIMUM_COLUMN_WIDTH + 'px';
+        return this.minColumnWidth + 'px';
     }
     getMeasureChildren(colFactory, data, parent, hidden, parentWidth) {
         const cols = [];
         const count = this.values.length;
-        const width = parentWidth ? parseInt(parentWidth, 10) / count :
-            this.superCompactMode ? MINIMUM_COLUMN_WIDTH_SUPER_COMPACT : MINIMUM_COLUMN_WIDTH;
+        const childWidth = parseInt(parentWidth, 10) / count;
         const isPercent = parentWidth && parentWidth.indexOf('%') !== -1;
         this.values.forEach(val => {
             const ref = colFactory.create(this.viewRef.injector);
             ref.instance.header = val.displayName || val.member;
             ref.instance.field = parent.field + this.pivotKeys.columnDimensionSeparator + val.member;
             ref.instance.parent = parent;
-            ref.instance.width = isPercent ? width + '%' : width + 'px';
+            if (parentWidth) {
+                ref.instance.width = isPercent ? childWidth + '%' : childWidth + 'px';
+            }
             ref.instance.hidden = hidden;
             ref.instance.sortable = true;
             ref.instance.dataType = val.dataType || this.resolveDataTypes(data[0][val.member]);