refactor(pivot-data-selector): allow init without initially set grid (#12783)

Author: damyanpetev

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

@@ -13,7 +13,7 @@
         <igx-list-item
             *ngFor="
                 let item of dims
-                    | filterPivotItems: input.value:grid.pipeTrigger
+                    | filterPivotItems: input.value:grid?.pipeTrigger
             "
             [id]="item.memberName"
         >
@@ -28,7 +28,7 @@
         <igx-list-item
             *ngFor="
                 let item of values
-                    | filterPivotItems: input.value:grid.pipeTrigger
+                    | filterPivotItems: input.value:grid?.pipeTrigger
             "
             [id]="item.member"
         >
@@ -59,11 +59,11 @@
         >
             <igx-expansion-panel-title class="igx-pivot-data-selector__header">
                 <h6 class="igx-pivot-data-selector__header-title">
-                    {{ grid.resourceStrings[panel.i18n] }}
+                    {{ grid?.resourceStrings[panel.i18n] }}
                 </h6>
                 <div class="igx-pivot-data-selector__header-extra">
                     <igx-icon>{{ panel.icon }}</igx-icon>
-                    <igx-chip>{{ this.grid[panel.dataKey].length }}</igx-chip>
+                    <igx-chip>{{ this.grid ? this.grid[panel.dataKey].length : 0 }}</igx-chip>
                 </div>
             </igx-expansion-panel-title>
         </igx-expansion-panel-header>
@@ -73,7 +73,7 @@ <h6 class="igx-pivot-data-selector__header-title">
             (dropped)="onItemDropped($event, panel.type)"
         >
             <igx-list
-                *ngIf="this.grid[panel.dataKey].length > 0"
+                *ngIf="this.grid && this.grid[panel.dataKey].length > 0"
                 [displayDensity]="displayDensity"
             >
                 <igx-list-item
@@ -149,9 +149,9 @@ <h6 class="igx-pivot-data-selector__header-title">
             </igx-list>
             <div
                 class="igx-pivot-data-selector__empty"
-                *ngIf="this.grid[panel.dataKey].length === 0"
+                *ngIf="this.grid && this.grid[panel.dataKey].length === 0"
             >
-                {{ grid.resourceStrings.igx_grid_pivot_selector_panel_empty }}
+                {{ grid?.resourceStrings.igx_grid_pivot_selector_panel_empty }}
             </div>
         </igx-expansion-panel-body>
     </igx-expansion-panel>

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

@@ -220,11 +220,11 @@ export class IgxPivotDataSelectorComponent {
     public dropAllowed: boolean;
     /** @hidden @internal */
     public get dims() : IPivotDimension[] {
-        return this._grid.allDimensions;
+        return this._grid?.allDimensions || [];
     };
     /** @hidden @internal */
     public get values(): IPivotValue[] {
-        return this._grid.pivotConfiguration.values;
+        return this._grid?.pivotConfiguration.values || [];
     };
 
     constructor(private renderer: Renderer2, private cdr: ChangeDetectorRef) {}
@@ -610,6 +610,10 @@ export class IgxPivotDataSelectorComponent {
         }
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
     public getPanelCollapsed(panelType: PivotDimensionType): boolean {
         switch(panelType) {
             case PivotDimensionType.Column:
@@ -623,6 +627,10 @@ export class IgxPivotDataSelectorComponent {
         }
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
     public onCollapseChange(value: boolean, panelType: PivotDimensionType): void {
         switch(panelType) {
             case PivotDimensionType.Column:

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

@@ -21,6 +21,22 @@ import {
 import { IgxPivotGridModule } from "./pivot-grid.module";
 
 describe("Pivot data selector", () => {
+
+    configureTestSuite(() => {
+        return TestBed.configureTestingModule({
+            declarations: [IgxPivotDataSelectorComponent],
+            imports: [NoopAnimationsModule, IgxPivotGridModule],
+        });
+    });
+
+    it("should initialize standalone before a grid is set ", () => {
+        const fixture = TestBed.createComponent(IgxPivotDataSelectorComponent);
+        fixture.detectChanges();
+        expect(fixture.componentInstance).toBeDefined();
+    });
+});
+
+describe("Pivot data selector integration", () => {
     let fixture;
     let grid: PivotGridType;
     let selector: IgxPivotDataSelectorComponent;