Merge remote-tracking branch 'remotes/origin/6.2.x' into mvenkov/bann…

…er-component-implementation

# Conflicts:
#	projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts

projects/igniteui-angular/src/lib/chips/chip.component.ts

@@ -9,9 +9,11 @@
     Output,
     ViewChild,
     Renderer2,
-    TemplateRef
+    TemplateRef,
+    Inject,
+    Optional
 } from '@angular/core';
-import { DisplayDensity } from '../core/displayDensity';
+import { DisplayDensity, IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity';
 import {
     IgxDragDirective,
     IDragBaseEventArgs,
@@ -50,7 +52,7 @@ let CHIP_ID = 0;
     selector: 'igx-chip',
     templateUrl: 'chip.component.html'
 })
-export class IgxChipComponent {
+export class IgxChipComponent extends DisplayDensityBase {
 
     /**
      * An @Input property that sets the value of `id` attribute. If not provided it will be automatically generated.
@@ -163,43 +165,6 @@ export class IgxChipComponent {
         return this._selected;
     }
 
-    /**
-     * Returns the `IgxChipComponent` theme.
-     * ```typescript
-     * @ViewChild('myChip')
-     * public chip: IgxChipComponent;
-     *     ngAfterViewInit(){
-     *     let chipTheme = this.chip.displayDensity;
-     * }
-     * ```
-     */
-    @Input()
-    public get displayDensity(): DisplayDensity | string {
-        return this._displayDensity;
-    }
-
-    /**
-     * An @Input property that sets the `IgxChipComponent` theme.
-     * Available options are `compact`, `cosy`, `comfortable`.
-     * The default theme is `comfortable`.
-     * ```html
-     * <igx-chip #myChip [id]="'igx-chip-1'" [displayDensity]="'compact'"></igx-chip>
-     * ```
-     */
-    public set displayDensity(val: DisplayDensity | string) {
-        switch (val) {
-            case 'compact':
-                this._displayDensity = DisplayDensity.compact;
-                break;
-            case 'cosy':
-                this._displayDensity = DisplayDensity.cosy;
-                break;
-            case 'comfortable':
-            default:
-                this._displayDensity = DisplayDensity.comfortable;
-        }
-    }
-
     /**
      * An @Input property that sets the `IgxChipComponent` background color.
      * The `color` property supports string, rgb, hex.
@@ -340,15 +305,12 @@ export class IgxChipComponent {
     @HostBinding('attr.class')
     get hostClass(): string {
         const classes = [];
-        switch (this._displayDensity) {
-            case DisplayDensity.cosy:
-                classes.push('igx-chip--cosy');
-                break;
-            case DisplayDensity.compact:
-                classes.push('igx-chip--compact');
-                break;
-            default:
-                classes.push('igx-chip');
+        if (this.isCosy()) {
+            classes.push('igx-chip--cosy');
+        } else if (this.isCompact()) {
+            classes.push('igx-chip--compact');
+        } else {
+            classes.push('igx-chip');
         }
         classes.push(this.disabled ? 'igx-chip--disabled' : '');
         // The custom classes should be at the end.
@@ -398,26 +360,27 @@ export class IgxChipComponent {
      * @hidden
      */
     public get ghostClass(): string {
-        switch (this._displayDensity) {
-            case DisplayDensity.cosy:
-                return 'igx-chip__ghost--cosy';
-            case DisplayDensity.compact:
-                return 'igx-chip__ghost--compact';
-            default:
-                return 'igx-chip__ghost';
-        }
+       if (this.isCosy()) {
+            return 'igx-chip__ghost--cosy';
+       } else if (this.isCompact()) {
+            return 'igx-chip__ghost--compact';
+       } else {
+            return 'igx-chip__ghost';
+       }
     }
 
     public get chipTabindex() {
         return !this.disabled ? 0 : '';
     }
 
-    protected _displayDensity = DisplayDensity.comfortable;
     protected _selected = false;
     protected _selectedItemClass = 'igx-chip__item--selected';
     protected _movedWhileRemoving = false;
 
-    constructor(public cdr: ChangeDetectorRef, public elementRef: ElementRef, private renderer: Renderer2) { }
+    constructor(public cdr: ChangeDetectorRef, public elementRef: ElementRef, private renderer: Renderer2,
+        @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
+            super(_displayDensityOptions);
+        }
 
     /**
      * @hidden

projects/igniteui-angular/src/lib/chips/chip.spec.ts

@@ -227,14 +227,15 @@ describe('IgxChip', () => {
         expect(firstChipSuffixText).toEqual('suf');
     });
 
-    it('should make chip comfortable when density is not set', () => {
+   it('should make chip comfortable when density is not set', () => {
         const fix = TestBed.createComponent(TestChipComponent);
         fix.detectChanges();
 
         const components = fix.debugElement.queryAll(By.directive(IgxChipComponent));
         const firstComponent = components[0];
 
-        expect(firstComponent.componentInstance.displayDensity).toEqual(DisplayDensity.comfortable);
+        const isFirstChipComfortable = firstComponent.componentInstance.isComfortable();
+        expect(isFirstChipComfortable).toEqual(true);
 
         // Assert default css class is applied
         const comfortableComponents = fix.debugElement.queryAll(By.css('.igx-chip'));

projects/igniteui-angular/src/lib/core/displayDensity.ts

@@ -1,4 +1,5 @@
-import { InjectionToken, Input } from '@angular/core';
+import { InjectionToken, Input, Output, EventEmitter, DoCheck } from '@angular/core';
+
 
 /**
  * Defines the posible values of the components' display density.
@@ -12,20 +13,25 @@ export const enum DisplayDensity {
 /**
  * Describes the object used to configure the DisplayDensity in Angular DI.
  */
-export interface IDisplayDensity {
+export interface IDisplayDensityOptions {
     displayDensity: DisplayDensity;
 }
 
+export interface IDensityChangedEventArgs {
+    oldDensity: DisplayDensity;
+    newDensity: DisplayDensity;
+}
+
 /**
  * Defines the DisplayDensity DI token.
  */
-export const DisplayDensityToken = new InjectionToken<IDisplayDensity>('DisplayDensity');
+export const DisplayDensityToken = new InjectionToken<IDisplayDensityOptions>('DisplayDensity');
 
 /**
  * Base class containing all logic required for implementing DisplayDensity.
  */
-export class DisplayDensityBase {
-    protected _displayDensity: DisplayDensity | string;
+export class DisplayDensityBase implements DoCheck {
+    protected _displayDensity: DisplayDensity;
 
     /**
      * Returns the theme of the component.
@@ -44,6 +50,7 @@ export class DisplayDensityBase {
      * Sets the theme of the component.
      */
     public set displayDensity(val: DisplayDensity | string) {
+        const currentDisplayDensity = this._displayDensity;
         switch (val) {
             case 'compact':
                 this._displayDensity = DisplayDensity.compact;
@@ -52,23 +59,33 @@ export class DisplayDensityBase {
                 this._displayDensity = DisplayDensity.cosy;
                 break;
             case 'comfortable':
-            default:
                 this._displayDensity = DisplayDensity.comfortable;
         }
+        if (currentDisplayDensity !== this._displayDensity) {
+            const densityChangedArgs: IDensityChangedEventArgs = {
+                oldDensity: currentDisplayDensity,
+                newDensity: this._displayDensity
+            };
+            this.onDensityChanged.emit(densityChangedArgs);
+        }
     }
 
+    @Output()
+    public onDensityChanged = new EventEmitter<IDensityChangedEventArgs>();
+    protected oldDisplayDensityOptions: IDisplayDensityOptions = { displayDensity: DisplayDensity.comfortable };
+
     /**
      *@hidden
      */
-    protected isCosy(): boolean {
+    public isCosy(): boolean {
         return this._displayDensity === DisplayDensity.cosy ||
             (!this._displayDensity && this.displayDensityOptions && this.displayDensityOptions.displayDensity === DisplayDensity.cosy);
     }
 
     /**
      *@hidden
      */
-    protected isComfortable(): boolean {
+    public isComfortable(): boolean {
         return this._displayDensity === DisplayDensity.comfortable ||
             (!this._displayDensity && (!this.displayDensityOptions ||
              this.displayDensityOptions.displayDensity === DisplayDensity.comfortable));
@@ -77,10 +94,23 @@ export class DisplayDensityBase {
     /**
      *@hidden
      */
-    protected isCompact(): boolean {
+    public isCompact(): boolean {
         return this._displayDensity === DisplayDensity.compact ||
             (!this._displayDensity && this.displayDensityOptions && this.displayDensityOptions.displayDensity === DisplayDensity.compact);
     }
+    constructor(protected displayDensityOptions: IDisplayDensityOptions) {
+        Object.assign(this.oldDisplayDensityOptions, displayDensityOptions);
+    }
 
-    constructor(protected displayDensityOptions: IDisplayDensity) {}
+    public ngDoCheck() {
+        if (this.oldDisplayDensityOptions && this.displayDensityOptions && !this._displayDensity &&
+            this.oldDisplayDensityOptions.displayDensity !== this.displayDensityOptions.displayDensity) {
+            const densityChangedArgs: IDensityChangedEventArgs = {
+                oldDensity: this.oldDisplayDensityOptions.displayDensity,
+                newDensity: this.displayDensityOptions.displayDensity
+            };
+            this.onDensityChanged.emit(densityChangedArgs);
+            this.oldDisplayDensityOptions = Object.assign(this.oldDisplayDensityOptions, this.displayDensityOptions);
+        }
+    }
 }

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -461,7 +461,7 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
         if (this.grid.rowEditable) {
             const rowCurrentState = this.grid.transactions.getAggregatedValue(this.row.rowID, false);
             if (rowCurrentState) {
-                return rowCurrentState && rowCurrentState[this.column.field];
+                return rowCurrentState[this.column.field] !== undefined && rowCurrentState[this.column.field] !== null;
             }
         } else {
             const rowTransaction: State = this.grid.transactions.getState(this.row.rowID);