Merge

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

@@ -27,8 +27,7 @@ import {
     ViewChildren,
     AfterViewChecked,
     ViewContainerRef,
-    InjectionToken,
-    Optional
+    InjectionToken
 } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil, first } from 'rxjs/operators';
@@ -64,7 +63,7 @@ import {
 } from './grid.rowEdit.directive';
 import { IgxGridNavigationService } from './grid-navigation.service';
 import { DeprecateProperty } from '../core/deprecateDecorators';
-import { DisplayDensity, IDisplayDensity, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity';
+import { DisplayDensity } from '../core/displayDensity';
 
 const MINIMUM_COLUMN_WIDTH = 136;
 
@@ -151,30 +150,7 @@ export interface IFocusChangeEventArgs {
     cancel: boolean;
 }
 
-/**
- * **Ignite UI for Angular Grid** -
- * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid.html)
- *
- * The Ignite UI Grid is used for presenting and manipulating tabular data in the simplest way possible.  Once data
- * has been bound, it can be manipulated through filtering, sorting & editing operations.
- *
- * Example:
- * ```html
- * <igx-grid [data]="employeeData" autoGenerate="false">
- *   <igx-column field="first" header="First Name"></igx-column>
- *   <igx-column field="last" header="Last Name"></igx-column>
- *   <igx-column field="role" header="Role"></igx-column>
- * </igx-grid>
- * ```
- */
-@Component({
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    preserveWhitespaces: false,
-    providers: [IgxGridNavigationService],
-    selector: 'igx-grid',
-    templateUrl: './grid.component.html'
-})
-export class IgxGridComponent extends DisplayDensityBase implements OnInit, OnDestroy, AfterContentInit, AfterViewInit, DoCheck {
+export abstract class IgxGridBaseComponent implements OnInit, OnDestroy, AfterContentInit, AfterViewInit {
 
     /**
      * An @Input property that lets you fill the `IgxGridComponent` with an array of data.
@@ -406,6 +382,42 @@ export class IgxGridComponent extends DisplayDensityBase implements OnInit, OnDe
     @Input()
     public paginationTemplate: TemplateRef<any>;
 
+    /**
+     * Return the display density currently applied to the grid.
+     * The default value is `comfortable`.
+     * Available options are `comfortable`, `cosy`, `compact`.
+     * ```typescript
+     * let gridTheme = this.grid.displayDensity;
+     * ```
+	 * @memberof IgxGridComponent
+     */
+    @Input()
+    public get displayDensity(): DisplayDensity | string {
+        return this._displayDensity;
+    }
+
+    /**
+     * Sets the display density currently applied to the grid.
+     * ```html
+     * <igx-grid #grid [data]="localData" [displayDensity]="'compact'" [autoGenerate]="true"></igx-grid>
+     * ```
+	 * @memberof IgxGridComponent
+     */
+    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;
+        }
+        this.onDensityChanged.emit();
+    }
+
     /**
      * Returns whether the column hiding UI for the `IgxGridComponent` is enabled.
      * By default it is disabled (false).
@@ -1105,6 +1117,12 @@ export class IgxGridComponent extends DisplayDensityBase implements OnInit, OnDe
     @Output()
     public onFocusChange = new EventEmitter<IFocusChangeEventArgs>();
 
+    /**
+     * @hidden
+     */
+    @Output()
+    protected onDensityChanged = new EventEmitter<any>();
+
     /**
      * @hidden
      */
@@ -1350,38 +1368,28 @@ export class IgxGridComponent extends DisplayDensityBase implements OnInit, OnDe
      */
     @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';
-        }
-    }
-
-    /**
-     * @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';
+        switch (this._displayDensity) {
+            case DisplayDensity.cosy:
+                return 'igx-grid--cosy';
+            case DisplayDensity.compact:
+                return 'igx-grid--compact';
+            default:
+                return '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';
+        switch (this._displayDensity) {
+            case DisplayDensity.cosy:
+                bannerClass = 'igx-banner--cosy';
+                break;
+            case DisplayDensity.compact:
+                bannerClass = 'igx-banner--compact';
+                break;
+            default:
+                bannerClass = 'igx-banner';
         }
-
         bannerClass += this.rowEditPositioningStrategy.isTop ? ' igx-banner__border-top' : ' igx-banner__border-bottom';
         return bannerClass;
     }
@@ -1936,6 +1944,7 @@ export class IgxGridComponent extends DisplayDensityBase implements OnInit, OnDe
     private _height = '100%';
     private _width = '100%';
     private _rowHeight;
+    private _displayDensity = DisplayDensity.comfortable;
     private _ngAfterViewInitPaassed = false;
     private _horizontalForOfs;
 
@@ -2009,9 +2018,7 @@ export class IgxGridComponent extends DisplayDensityBase implements OnInit, OnDe
         private resolver: ComponentFactoryResolver,
         protected differs: IterableDiffers,
         private viewRef: ViewContainerRef,
-        private navigation: IgxGridNavigationService,
-        @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensity) {
-        super(_displayDensityOptions);
+        private navigation: IgxGridNavigationService) {
         this.resizeHandler = () => {
             this.calculateGridSizes();
             this.zone.run(() => this.markForCheck());
@@ -2159,23 +2166,6 @@ export class IgxGridComponent extends DisplayDensityBase implements OnInit, OnDe
         vertScrDC.addEventListener('scroll', (evt) => { this.scrollHandler(evt); });
     }
 
-    public ngDoCheck(): void {
-        super.ngDoCheck();
-        if (this.groupingDiffer) {
-            const changes = this.groupingDiffer.diff(this.groupingExpressions);
-            if (changes && this.columnList) {
-                changes.forEachAddedItem((rec) => {
-                    const col = this.getColumnByName(rec.item.fieldName);
-                    col.hidden = true;
-                });
-                changes.forEachRemovedItem((rec) => {
-                    const col = this.getColumnByName(rec.item.fieldName);
-                    col.hidden = false;
-                });
-            }
-        }
-    }
-
     /**
      * @hidden
      */
@@ -2248,12 +2238,14 @@ export class IgxGridComponent extends DisplayDensityBase implements OnInit, OnDe
 	 * @memberof IgxGridComponent
      */
     get defaultRowHeight(): number {
-           if (this.isCosy()) {
-            return 40;
-        } else if (this.isCompact()) {
-            return 32;
-        } else {
-            return 50;
+        switch (this._displayDensity) {
+            case DisplayDensity.compact:
+                return 32;
+            case DisplayDensity.cosy:
+                return 40;
+            case DisplayDensity.comfortable:
+            default:
+                return 50;
         }
     }
 

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

@@ -69,7 +69,7 @@ export class IgxGridSummaryComponent implements DoCheck {
 
     @HostBinding('class.igx-grid-summary')
     get defaultCSS() {
-        return this.gridAPI.get(this.gridID).isComfortable();
+        return this.displayDensity === DisplayDensity.comfortable;
     }
 
     get dataType(): DataType {

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

@@ -4,11 +4,10 @@ import {
     HostBinding,
     Input,
     Optional,
-    ViewChild,
-    Inject
+    ViewChild
 } from '@angular/core';
 
-import { DisplayDensity, IDisplayDensity, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity';
+import { DisplayDensity } from '../core/displayDensity';
 import {
     CsvFileTypes,
     IgxBaseExporter,
@@ -30,7 +29,7 @@ import { ConnectedPositioningStrategy } from '../services/overlay/position';
     selector: 'igx-grid-toolbar',
     templateUrl: './grid-toolbar.component.html'
 })
-export class IgxGridToolbarComponent extends DisplayDensityBase {
+export class IgxGridToolbarComponent {
 
     /**
      * @hidden
@@ -196,28 +195,65 @@ export class IgxGridToolbarComponent extends DisplayDensityBase {
         return this.grid.pinnedColumns.length;
     }
 
+    private _displayDensity: DisplayDensity | string;
+
+    /**
+     * Returns the theme of the `IgxGridToolbarComponent`.
+     * The default theme is `comfortable`.
+     * Available options are `comfortable`, `cosy`, `compact`.
+     * ```typescript
+     * let toolbarTheme = this.grid.toolbar.displayDensity;
+     * ```
+     */
+    @Input()
+    public get displayDensity(): DisplayDensity | string {
+        return this._displayDensity;
+    }
+
+    /**
+     * Sets the theme of the `IgxGridToolbarComponent`.
+     * ```html
+     * <igx-grid #grid [data]="localData" [displayDensity]="'compact'" [autoGenerate]="true"></igx-grid>
+     * ```
+     */
+    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;
+        }
+    }
+
     /**
      * Returns the theme of the `IgxGridToolbarComponent`.
      * ```typescript
      * const toolbarTheme = this.grid.toolbar.hostClass;
      * ```
      */
-     @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';
-             }
-         }
-    constructor(public gridAPI: IgxGridAPIService,
+
+    @HostBinding('attr.class')
+    get hostClass(): string {
+        switch (this._displayDensity) {
+            case DisplayDensity.compact:
+                return 'igx-grid-toolbar--compact';
+            case DisplayDensity.cosy:
+                return 'igx-grid-toolbar--cosy';
+            case DisplayDensity.comfortable:
+            default:
+                return 'igx-grid-toolbar';
+        }
+    }
+
+    constructor(public gridAPI: GridBaseAPIService<IgxGridBaseComponent>,
         public cdr: ChangeDetectorRef,
         @Optional() public excelExporter: IgxExcelExporterService,
-        @Optional() public csvExporter: IgxCsvExporterService,
-        @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensity) {
-            super(_displayDensityOptions);
+        @Optional() public csvExporter: IgxCsvExporterService) {
     }
 
     private _positionSettings: PositionSettings = {