Add some empty containers with message when there's no dimension/value in the chip area. Add some classes.

Author: MKirova

projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts

@@ -184,8 +184,8 @@ export class IgxGridHeaderRowComponent implements DoCheck {
     }
 
     constructor(
-        private ref: ElementRef<HTMLElement>,
-        private cdr: ChangeDetectorRef
+        protected ref: ElementRef<HTMLElement>,
+        protected cdr: ChangeDetectorRef
     ) { }
 
     /**

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

@@ -204,7 +204,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
 
     public get pivotRowWidths() {
         const rowDimCount = this.rowDimensions.length;
-        return MINIMUM_COLUMN_WIDTH * rowDimCount;
+        return MINIMUM_COLUMN_WIDTH * rowDimCount || MINIMUM_COLUMN_WIDTH;
     }
 
     public get rowDimensions() {

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html

@@ -20,6 +20,9 @@
         (igxDragEnter)="onAreaDragEnter($event, colArea, 1)"
         (igxDragLeave)="onAreaDragLeave($event, colArea)"
         >
+        <div *ngIf="grid.columnDimensions.length === 0">
+            <span class='igx-pivot__emptyChipArea'>Drop Column Fields here.</span>
+        </div>
             <igx-chip *ngFor="let col of grid.columnDimensions" [draggable]="'true'" [id]="col.fieldName"
              [removable]="true" (remove)="columnRemoved($event)"
              (dragEnter)="onDimDragEnter($event, 1)"
@@ -39,6 +42,9 @@
          (igxDragEnter)="onAreaDragEnter($event, valueArea)"
          (igxDragLeave)="onAreaDragLeave($event, valueArea)"
          >
+         <div *ngIf="grid.values.length === 0">
+             <span class='igx-pivot__emptyChipArea'>Drop Value Fields here.</span>
+         </div>
             <igx-chip *ngFor="let value of grid.values" [draggable]="'true'" [id]="value.member" [removable]="true" (remove)="valueRemoved($event)"
             (dragEnter)="onDimDragEnter($event)"
             (dragLeave)="onDimDragLeave($event)"
@@ -65,6 +71,9 @@
                  (igxDragEnter)="onAreaDragEnter($event, rowArea, 0)"
                  (igxDragLeave)="onAreaDragLeave($event, rowArea)"
                  >
+                    <div *ngIf="grid.rowDimensions.length === 0">
+                        <span class='igx-pivot__emptyChipArea'>Drop Row Fields here.</span>
+                    </div>
                     <igx-chip *ngFor="let row of grid.rowDimensions" [draggable]="'true'" [id]="row.fieldName"
                      [removable]="true" (remove)="rowRemoved($event)"
                      (dragEnter)="onDimDragEnter($event, 0)"

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

@@ -1,10 +1,12 @@
 import {
     ChangeDetectionStrategy,
+    ChangeDetectorRef,
     Component,
-    Input
+    ElementRef,
+    Input,
+    Renderer2
 } from '@angular/core';
 import { IBaseChipEventArgs } from '../../chips/chip.component';
-import { IChipsAreaReorderEventArgs } from '../../chips/chips-area.component';
 import { IgxGridHeaderRowComponent } from '../headers/grid-header-row.component';
 import { PivotDimensionType } from './pivot-grid.interface';
 import { IgxPivotRowComponent } from './pivot-row.component';
@@ -35,6 +37,16 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
     @Input()
     public row: IgxPivotRowComponent;
 
+    private _dropIndicatorClass = 'igx-pivot-grid__drop-indicator';
+
+    constructor(
+        protected ref: ElementRef<HTMLElement>,
+        protected cdr: ChangeDetectorRef,
+        protected renderer: Renderer2,
+        ) {
+            super(ref, cdr);
+    }
+
     public rowRemoved(event: IBaseChipEventArgs) {
         const row = this.grid.pivotConfiguration.rows.find(x => x.fieldName === event.owner.id);
         row.enabled = false;
@@ -62,9 +74,12 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
             // cannot drag between dimensions and value
             return;
         }
+        this.renderer.addClass(event.owner.nativeElement, this._dropIndicatorClass);
+        // TODO- remove once classes are added.
         event.owner.nativeElement.style.borderLeft = '1px solid red';
     }
     public onDimDragLeave(event) {
+        this.renderer.removeClass(event.owner.nativeElement, this._dropIndicatorClass);
         event.owner.nativeElement.style.borderLeft = '';
     }
 
@@ -80,11 +95,14 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
         const targetElem = event.detail.originalEvent.target;
         const targetOwner = event.detail.owner.element.nativeElement.parentElement;
         if (targetOwner !== lastElem && targetElem.getBoundingClientRect().x >= lastElem.getBoundingClientRect().x) {
+            this.renderer.addClass(area.chipsList.last.nativeElement, this._dropIndicatorClass);
+            // TODO- remove once classes are added.
             area.chipsList.last.nativeElement.style.borderRight = '1px solid red';
         }
     }
     public onAreaDragLeave(event, area) {
         area.chipsList.toArray().forEach(element => {
+            this.renderer.removeClass(element.nativeElement, this._dropIndicatorClass);
             element.nativeElement.style.borderRight = '';
         });
     }