refactor(displayDensity): Code cleanup in display density base class

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

@@ -303,14 +303,7 @@ export class IgxChipComponent extends DisplayDensityBase {
      */
     @HostBinding('attr.class')
     get hostClass(): string {
-        const classes = [];
-        if (this.isCosy()) {
-            classes.push('igx-chip--cosy');
-        } else if (this.isCompact()) {
-            classes.push('igx-chip--compact');
-        } else {
-            classes.push('igx-chip');
-        }
+        const classes = [this.getComponentDensityClass('igx-chip')];
         classes.push(this.disabled ? 'igx-chip--disabled' : '');
         // The custom classes should be at the end.
         classes.push(this.class);
@@ -359,13 +352,7 @@ export class IgxChipComponent extends DisplayDensityBase {
      * @hidden
      */
     public get ghostClass(): string {
-       if (this.isCosy()) {
-            return 'igx-chip__ghost--cosy';
-       } else if (this.isCompact()) {
-            return 'igx-chip__ghost--compact';
-       } else {
-            return 'igx-chip__ghost';
-       }
+        return this.getComponentDensityClass('igx-chip__ghost');
     }
 
     public get chipTabindex() {

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

@@ -235,8 +235,7 @@ describe('IgxChip', () => {
         const components = fix.debugElement.queryAll(By.directive(IgxChipComponent));
         const firstComponent = components[0];
 
-        const isFirstChipComfortable = firstComponent.componentInstance.isComfortable();
-        expect(isFirstChipComfortable).toEqual(true);
+        expect(firstComponent.componentInstance.displayDensity).toEqual(DisplayDensity.comfortable);
 
         // Assert default css class is applied
         const comfortableComponents = fix.debugElement.queryAll(By.css('.igx-chip'));

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

@@ -43,74 +43,62 @@ export class DisplayDensityBase implements DoCheck {
      */
     @Input()
     public get displayDensity(): DisplayDensity | string {
-        return this._displayDensity;
+        return this._displayDensity ||
+            ((this.displayDensityOptions && this.displayDensityOptions.displayDensity) || DisplayDensity.comfortable);
     }
 
     /**
      * Sets the theme of the component.
      */
     public set displayDensity(val: DisplayDensity | string) {
         const currentDisplayDensity = this._displayDensity;
-        switch (val) {
-            case 'compact':
-                this._displayDensity = DisplayDensity.compact;
-                break;
-            case 'cosy':
-                this._displayDensity = DisplayDensity.cosy;
-                break;
-            case 'comfortable':
-                this._displayDensity = DisplayDensity.comfortable;
-        }
+        this._displayDensity = val as DisplayDensity;
+
         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
-     */
-    public isCosy(): boolean {
-        return this._displayDensity === DisplayDensity.cosy ||
-            (!this._displayDensity && this.displayDensityOptions && this.displayDensityOptions.displayDensity === DisplayDensity.cosy);
-    }
+    protected oldDisplayDensityOptions: IDisplayDensityOptions = { displayDensity: DisplayDensity.comfortable };
 
-    /**
-     *@hidden
-     */
-    public isComfortable(): boolean {
-        return this._displayDensity === DisplayDensity.comfortable ||
-            (!this._displayDensity && (!this.displayDensityOptions ||
-             this.displayDensityOptions.displayDensity === DisplayDensity.comfortable));
-    }
 
-    /**
-     *@hidden
-     */
-    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);
     }
 
     public ngDoCheck() {
-        if (this.oldDisplayDensityOptions && this.displayDensityOptions && !this._displayDensity &&
-            this.oldDisplayDensityOptions.displayDensity !== this.displayDensityOptions.displayDensity) {
+        if (!this._displayDensity && this.displayDensityOptions &&
+                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);
         }
     }
+
+    /**
+     * Given a style class of a component/element returns the modified version of it based
+     * on the current display density.
+     */
+    protected getComponentDensityClass(baseStyleClass: string): string {
+        switch (this.displayDensity) {
+            case DisplayDensity.cosy:
+                return `${baseStyleClass}--${DisplayDensity.cosy}`;
+            case DisplayDensity.compact:
+                return `${baseStyleClass}--${DisplayDensity.compact}`;
+            default:
+                return baseStyleClass;
+        }
+    }
 }

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

@@ -57,7 +57,7 @@ import {
     IgxRowEditActionsDirective
 } from './grid.rowEdit.directive';
 import { IgxGridNavigationService } from './grid-navigation.service';
-import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity';
+import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase, DisplayDensity } from '../core/displayDensity';
 import { IgxGridRowComponent } from './grid';
 import { IgxFilteringService } from './filtering/grid-filtering.service';
 import { IgxGridFilteringCellComponent } from './filtering/grid-filtering-cell.component';
@@ -1577,26 +1577,12 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      */
     @HostBinding('attr.class')
     get hostClass(): string {
-        if (this.isCosy()) {
-            return 'igx-grid--cosy';
-        } else if (this.isCompact()) {
-            return 'igx-grid--compact';
-        } else {
-            return 'igx-grid';
-        }
+        return this.getComponentDensityClass('igx-grid');
     }
 
     get bannerClass(): string {
-        let bannerClass = '';
-        if (this.isCosy()) {
-            bannerClass = 'igx-banner--cosy';
-        } else if (this.isCompact()) {
-            bannerClass = 'igx-banner--compact';
-        } else {
-            bannerClass = 'igx-banner';
-        }
-        bannerClass += this.rowEditPositioningStrategy.isTop ? ' igx-banner__border-top' : ' igx-banner__border-bottom';
-        return bannerClass;
+        const position = this.rowEditPositioningStrategy.isTop ? 'igx-banner__border-top' : 'igx-banner__border-bottom';
+        return `${this.getComponentDensityClass('igx-banner')} ${position}`;
     }
 
     /**
@@ -2499,12 +2485,13 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
 	 * @memberof IgxGridBaseComponent
      */
     get defaultRowHeight(): number {
-        if (this.isCosy()) {
-            return 40;
-        } else if (this.isCompact()) {
-            return 32;
-        } else {
-            return 50;
+        switch (this.displayDensity) {
+            case DisplayDensity.cosy:
+                return 40;
+            case DisplayDensity.compact:
+                return 32;
+            default:
+                return 50;
         }
     }
 
@@ -2515,12 +2502,13 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
 	 * @memberof IgxGridBaseComponent
      */
     get defaultHeaderGroupMinWidth(): number {
-        if (this.isCosy()) {
-            return 32;
-        } else if (this.isCompact()) {
-            return 24;
-        } else {
-            return 48;
+        switch (this.displayDensity) {
+            case DisplayDensity.cosy:
+                return 32;
+            case DisplayDensity.compact:
+                return 24;
+            default:
+                return 48;
         }
     }
 

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

@@ -208,13 +208,7 @@ export class IgxGridToolbarComponent extends DisplayDensityBase {
 
     @HostBinding('attr.class')
     get hostClass(): string {
-        if (this.isCosy()) {
-            return 'igx-grid-toolbar--cosy';
-        } else if (this.isCompact()) {
-            return 'igx-grid-toolbar--compact';
-        } else {
-            return 'igx-grid-toolbar';
-        }
+        return this.getComponentDensityClass('igx-grid-toolbar');
     }
 
     constructor(public gridAPI: GridBaseAPIService<IgxGridBaseComponent>,

projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts

@@ -425,7 +425,7 @@ describe('IgxGrid - Grid Toolbar', () => {
         fixture.detectChanges();
 
         const toolbar = getToolbar(fixture).nativeElement;
-        expect(grid.toolbar.isComfortable()).toBe(true);
+        expect(grid.toolbar.displayDensity).toEqual(DisplayDensity.comfortable);
         expect(toolbar.classList[0]).toBe('igx-grid-toolbar');
         expect(parseFloat(toolbar.offsetHeight) > 55).toBe(true);
 
@@ -452,7 +452,7 @@ describe('IgxGrid - Grid Toolbar', () => {
         fixture.detectChanges();
 
         const toolbar = getToolbar(fixture).nativeElement;
-        expect(grid.toolbar.isComfortable()).toBe(true);
+        expect(grid.toolbar.displayDensity).toEqual(DisplayDensity.comfortable);
         expect(toolbar.classList[0]).toBe('igx-grid-toolbar');
 
         grid.displayDensity = DisplayDensity.compact;

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

@@ -428,13 +428,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements OnInit, Do
      * @hidden
      */
     get groupAreaHostClass(): string {
-        if (this.isCosy()) {
-            return 'igx-drop-area--cosy';
-        } else if (this.isCompact()) {
-            return 'igx-drop-area--compact';
-        } else {
-            return 'igx-drop-area';
-        }
+        return this.getComponentDensityClass('igx-drop-area');
     }
 
     /**

projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html

@@ -10,9 +10,9 @@
         ></div>
     </ng-container>
     <ng-container *ngIf="pinnedColumns.length > 0">
-        <igx-grid-summary-cell *ngFor="let col of notGroups(pinnedColumns)" [column]="col" [firstCellIndentation]="firstCellIndentation" [rowIndex]="index" [summaryResults]="getColumnSummaries(col.field)" [hasSummary]="col.hasSummary" [density]="gridDensity" [style.min-height.px]="minHeight"></igx-grid-summary-cell>
+        <igx-grid-summary-cell *ngFor="let col of notGroups(pinnedColumns)" [column]="col" [firstCellIndentation]="firstCellIndentation" [rowIndex]="index" [summaryResults]="getColumnSummaries(col.field)" [hasSummary]="col.hasSummary" [density]="grid.displayDensity" [style.min-height.px]="minHeight"></igx-grid-summary-cell>
     </ng-container>
     <ng-template igxGridFor let-col [igxGridForOf]="notGroups(unpinnedColumns)" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]="grid.unpinnedWidth" [igxForTrackBy]="grid.trackColumnChanges" #igxDirRef>
-        <igx-grid-summary-cell [column]="col" [rowIndex]="index" [firstCellIndentation]="firstCellIndentation" [summaryResults]="getColumnSummaries(col.field)" [hasSummary]="col.hasSummary" [density]="gridDensity" [style.min-height.px]="minHeight"></igx-grid-summary-cell>
+        <igx-grid-summary-cell [column]="col" [rowIndex]="index" [firstCellIndentation]="firstCellIndentation" [summaryResults]="getColumnSummaries(col.field)" [hasSummary]="col.hasSummary" [density]="grid.displayDensity" [style.min-height.px]="minHeight"></igx-grid-summary-cell>
     </ng-template>
 </ng-container>

projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.ts

@@ -70,17 +70,6 @@ export class IgxSummaryRowComponent implements DoCheck  {
         return this.element.nativeElement;
     }
 
-    // TO DO: to be refactored when displayDensity refactoring is merged
-    get gridDensity(): string {
-        if (this.grid.isCosy()) {
-            return DisplayDensity.cosy;
-        } else if (this.grid.isCompact()) {
-            return DisplayDensity.compact;
-        } else {
-            return DisplayDensity.comfortable;
-        }
-    }
-
     public getColumnSummaries(columnName) {
         if (!this.summaries.get(columnName)) {
             return [];

projects/igniteui-angular/src/lib/input-group/input-group.component.ts

@@ -222,23 +222,23 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp
      */
     @HostBinding('class.igx-input-group--cosy')
     get isDisplayDensityCosy() {
-        return this.isCosy();
+        return this.displayDensity === DisplayDensity.cosy;
     }
 
     /**
      *@hidden
      */
     @HostBinding('class.igx-input-group--comfortable')
     get isDisplayDensityComfortable() {
-        return this.isComfortable();
+        return this.displayDensity === DisplayDensity.comfortable;
     }
 
     /**
      *@hidden
      */
     @HostBinding('class.igx-input-group--compact')
     get isDisplayDensityCompact() {
-        return this.isCompact();
+        return this.displayDensity === DisplayDensity.compact;
     }
 
     /**

src/app/combo/combo.sample.html

@@ -64,9 +64,9 @@
         </div>
         <div>
             <h4>Display Density</h4>
-            <button igxButton="raised" [disabled]="igxCombo.isCompact()" (click)="setDensity('compact')">Compact</button>
-            <button igxButton="raised" [disabled]="igxCombo.isCosy()" (click)="setDensity('cosy')">Cosy</button>
-            <button igxButton="raised" [disabled]="!igxCombo.isCosy() && !igxCombo.isCompact()" (click)="setDensity('comfortable')">Comfortable</button>
+            <button igxButton="raised" [disabled]="igxCombo.displayDensity === compact" (click)="setDensity(compact)">Compact</button>
+            <button igxButton="raised" [disabled]="igxCombo.displayDensity === cosy" (click)="setDensity(cosy)">Cosy</button>
+            <button igxButton="raised" [disabled]="igxCombo.displayDensity === comfortable" (click)="setDensity(comfortable)">Comfortable</button>
         </div>
         <div>
             <h4>Search Input</h4>

src/app/combo/combo.sample.ts

@@ -1,5 +1,5 @@
 import { Component, ViewChild, OnInit, TemplateRef } from '@angular/core';
-import { IgxComboComponent } from 'igniteui-angular';
+import { IgxComboComponent, DisplayDensity } from 'igniteui-angular';
 import { take } from 'rxjs/operators';
 import { NgModule } from '@angular/core';
 import { FormGroup, FormControl, Validators, FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -44,8 +44,13 @@ export class ComboSampleComponent implements OnInit {
     @ViewChild('customItemTemplate', {read: TemplateRef})
     private customItemTemplate;
     private initialItemTemplate: TemplateRef<any> = null;
-    constructor() {
 
+    comfortable = DisplayDensity.comfortable;
+    cosy = DisplayDensity.cosy;
+    compact = DisplayDensity.compact;
+
+
+    constructor() {
         const division = {
             'New England 01': ['Connecticut', 'Maine', 'Massachusetts'],
             'New England 02': ['New Hampshire', 'Rhode Island', 'Vermont'],
@@ -126,7 +131,7 @@ export class ComboSampleComponent implements OnInit {
         this.initialItemTemplate = comboTemplate;
     }
 
-    setDensity(density: string) {
+    setDensity(density: DisplayDensity) {
         this.igxCombo.displayDensity = density;
     }
 }