fix(Pivot): Fix pivot selector error when initializing. Fix adding row dimension with API

projects/igniteui-angular-elements/src/app/custom-strategy.spec.ts

@@ -1,4 +1,4 @@
-import { IgxActionStripComponent, IgxColumnComponent, IgxGridComponent, IgxHierarchicalGridComponent } from 'igniteui-angular';
+import { IgxActionStripComponent, IgxColumnComponent, IgxGridComponent, IgxHierarchicalGridComponent, PivotGridType } from 'igniteui-angular';
 import { html } from 'lit';
 import { firstValueFrom, fromEvent, timer } from 'rxjs';
 import { ComponentRefKey, IgcNgElement } from './custom-strategy';
@@ -14,6 +14,7 @@ import {
     IgcColumnLayoutComponent,
     IgcActionStripComponent,
     IgcGridEditingActionsComponent,
+    IgcPivotDataSelectorComponent,
 } from './components';
 import { defineComponents } from '../utils/register';
 
@@ -25,6 +26,7 @@ describe('Elements: ', () => {
             IgcGridComponent,
             IgcHierarchicalGridComponent,
             IgcPivotGridComponent,
+            IgcPivotDataSelectorComponent,
             IgcColumnComponent,
             IgcColumnLayoutComponent,
             IgcPaginatorComponent,
@@ -192,6 +194,41 @@ describe('Elements: ', () => {
             expect(() => stateComponent.getStateAsString()).not.toThrow();
         });
 
+        it(`should initialize pivot grid with pivot selector`, async () => {
+            const innerHtml = `
+            <igc-pivot-grid id="testGrid">
+            </igc-pivot-grid>
+            <igc-pivot-data-selector></igc-pivot-data-selector>
+            `;
+            testContainer.innerHTML = innerHtml;
+
+            const grid = document.querySelector<IgcNgElement & InstanceType<typeof IgcPivotGridComponent>>('#testGrid');
+            expect(grid).toBeTruthy();
+            const pivotSelector = document.querySelector<IgcNgElement & InstanceType<typeof IgcPivotDataSelectorComponent>>('igc-pivot-data-selector');
+            expect(pivotSelector).toBeTruthy();
+            pivotSelector!.grid = grid as PivotGridType;
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 2));
+            grid!.data = [
+                { country: 'Bulgaria', city: 'Sofia', unitsSold: 12 },
+                { country: 'USA', city: 'New York', unitsSold: 20 }
+            ];
+            grid!.pivotConfiguration = {
+                columns: [{ memberName: 'country', enabled: true }],
+                rows: [{ memberName: 'city', enabled: true }],
+                values: [{
+                    member: 'unitsSold',
+                    aggregate: {
+                        key: 'SUM',
+                        aggregator: (_members, data) => (data ?? []).reduce((sum, value) => sum + value.unitsSold, 0),
+                        label: 'Sum'
+                    },
+                    enabled: true
+                }]
+            };
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 2));
+            expect(pivotSelector!.querySelectorAll('igx-list-item').length).toBeGreaterThan(0);
+        });
+
         it(`should allow manipulating projected columns through the DOM`, async () => {
             const innerHtml = `
             <igc-grid id="testGrid" primary-key="ProductID">

projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.html

@@ -14,7 +14,7 @@
       item of dims
         | filterPivotItems
           : input.value
-          : grid?.pipeTrigger;
+          : pipeRetrigger;
       track item.memberName
     ) {
       <igx-list-item [id]="item.memberName">
@@ -31,7 +31,7 @@
       item of values
         | filterPivotItems
           : input.value
-          : grid?.pipeTrigger;
+          : pipeRetrigger;
       track item
     ) {
       <igx-list-item [id]="item.member">

projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts

@@ -10,7 +10,8 @@ import {
     booleanAttribute,
     inject,
     ChangeDetectionStrategy,
-    ViewEncapsulation
+    ViewEncapsulation,
+    OnDestroy
 } from "@angular/core";
 import { first } from "rxjs/operators";
 import { IgxFilterPivotItemsPipe } from "./pivot-grid.pipes";
@@ -26,6 +27,7 @@ import { IgxChipComponent } from 'igniteui-angular/chips';
 import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, ISelectionEventArgs } from 'igniteui-angular/drop-down';
 import { AbsoluteScrollStrategy, AutoPositionStrategy, ColumnType, OverlaySettings, PositionSettings, ɵSize, SortingDirection, VerticalAlignment } from 'igniteui-angular/core';
 import { IPivotAggregator, IPivotDimension, IPivotValue, PivotDimensionType, PivotGridType, PivotUtil } from 'igniteui-angular/grids/core';
+import { Subscription } from 'rxjs';
 
 interface IDataSelectorPanel {
     name: string;
@@ -69,9 +71,11 @@ interface IDataSelectorPanel {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxInputGroupComponent, IgxIconComponent, IgxPrefixDirective, IgxInputDirective, IgxListComponent, IgxListItemComponent, IgxCheckboxComponent, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxDropDirective, IgxExpansionPanelTitleDirective, IgxChipComponent, IgxExpansionPanelBodyComponent, IgxDragDirective, IgxDropDownItemNavigationDirective, IgxDragHandleDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxFilterPivotItemsPipe]
 })
-export class IgxPivotDataSelectorComponent {
+export class IgxPivotDataSelectorComponent implements OnDestroy {
     private renderer = inject(Renderer2);
     private cdr = inject(ChangeDetectorRef);
+    private pivotConfigChangeSub!: Subscription;
+    protected pipeRetrigger = 0;
 
 
     /**
@@ -310,6 +314,13 @@ export class IgxPivotDataSelectorComponent {
         },
     ];
 
+    /**
+     * @hidden @internal
+     */
+    public ngOnDestroy() {
+        this.pivotConfigChangeSub?.unsubscribe();
+    }
+
 
     /* treatAsRef */
     /**
@@ -318,6 +329,13 @@ export class IgxPivotDataSelectorComponent {
     @Input()
     public set grid(value: PivotGridType) {
         this._grid = value;
+        this.pivotConfigChangeSub?.unsubscribe();
+        this.pivotConfigChangeSub = value.pivotConfigurationChange
+            .subscribe(() => {
+                this.pipeRetrigger++;
+                this.cdr.markForCheck();
+            });
+
     }
 
     /* treatAsRef */

projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts

@@ -284,7 +284,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     public dimensionsChange = new EventEmitter<IDimensionsChange>();
 
     /**
-     * Emitted when any of the pivotConfiguration properties is changed via the grid chip area.
+     * Emitted when the pivot configuration or any of its properties changes.
      *
      * @example
      * ```html
@@ -412,6 +412,8 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         this.setDateDimensionsLocaleData();
         if (!this._init) {
             this.setupColumns();
+            // Notify listeners (e.g. IgxPivotDataSelectorComponent) that the whole config was replaced, not just a single dimension/value.
+            this.pivotConfigurationChange.emit({ pivotConfiguration: this.pivotConfiguration });
         }
         this.notifyChanges(true);
     }
@@ -1755,6 +1757,10 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         if (targetCollectionType === PivotDimensionType.Filter) {
             this.dimensionDataColumns = this.generateDimensionColumns();
             this.reflow();
+        } else {
+            // In case that target collection is row dimension and the target dimension is not coming from
+            // the column dimensions collection we should schedule CD
+            this.cdr.markForCheck();
         }
         this.pivotConfigurationChange.emit({ pivotConfiguration: this.pivotConfiguration });
     }

projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.spec.ts

@@ -2616,6 +2616,24 @@ describe('IgxPivotGrid #pivotGrid', () => {
             expect(chip).not.toBeNull();
         });
 
+        it('should allow inserting new dimension as a row.', () => {
+            pivotGrid.pivotConfiguration = { rows: [], columns: [], filters: [], values: [] };
+            fixture.detectChanges();
+
+            pivotGrid.insertDimensionAt({ memberName: 'SellerName', enabled: true }, PivotDimensionType.Row, 0);
+
+            fixture.detectChanges();
+            expect(pivotGrid.pivotConfiguration.rows[0].memberName).toBe('SellerName');
+
+
+            const dimensionContents = fixture.debugElement.queryAll(By.css('.igx-grid__tbody-pivot-dimension'));
+            expect(dimensionContents.length).toBeGreaterThan(0);
+            const rowHeaders = dimensionContents[0].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
+            expect(rowHeaders.length).toBeGreaterThan(0);
+            const first = rowHeaders.map(x => x.componentInstance.column.header)[0];
+            expect(first).toBe('Stanley Brooker');
+        });
+
         it('should allow removing dimension.', () => {
             const filter = { memberName: 'SellerNameFilter', memberFunction: (rec) => rec.SellerName, enabled: true };
             pivotGrid.pivotConfiguration.filters = [filter];