feat(igxCombo): add display density to constructors, #2960

ViktorSlavov · ViktorSlavov · commit 1b55a28655c4 · 2018-11-13T14:26:31.000+02:00
diff --git a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts
@@ -1,6 +1,6 @@
 import {
     ChangeDetectorRef, Component, ContentChild,
-    ElementRef, forwardRef, Inject, QueryList, EventEmitter, OnDestroy
+    ElementRef, forwardRef, Inject, QueryList, EventEmitter, OnDestroy, Optional
 } from '@angular/core';
 import { takeUntil } from 'rxjs/operators';
 import { IgxDropDownBase, Navigate } from '../drop-down/drop-down.component';
@@ -11,6 +11,7 @@ import { IgxSelectionAPIService } from '../core/selection';
 import { IgxForOfDirective } from '../directives/for-of/for_of.directive';
 import { Subject } from 'rxjs';
 import { CancelableEventArgs } from '../core/utils';
+import { IDisplayDensityOptions, DisplayDensityToken } from '../core/density';
 
 /** @hidden */
 @Component({
@@ -26,8 +27,9 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements OnDest
         protected cdr: ChangeDetectorRef,
         protected selection: IgxSelectionAPIService,
         @Inject(forwardRef(() => IgxComboComponent))
-        public combo: IgxComboComponent) {
-        super(elementRef, cdr, selection);
+        public combo: IgxComboComponent,
+        @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
+        super(elementRef, cdr, selection, _displayDensityOptions);
     }
 
     /**
diff --git a/projects/igniteui-angular/src/lib/combo/combo-item.component.ts b/projects/igniteui-angular/src/lib/combo/combo-item.component.ts
@@ -5,11 +5,13 @@ import {
     HostListener,
     HostBinding,
     Inject,
-    Input
+    Input,
+    Optional
 } from '@angular/core';
 import { IgxSelectionAPIService } from '../core/selection';
 import { IgxDropDownItemBase } from '../drop-down/drop-down-item.component';
 import { IgxComboDropDownComponent } from './combo-dropdown.component';
+import { DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
 
 /** @hidden */
 @Component({
@@ -39,9 +41,10 @@ export class IgxComboItemComponent extends IgxDropDownItemBase {
     constructor(
         @Inject(forwardRef(() => IgxComboDropDownComponent)) public dropDown: IgxComboDropDownComponent,
         protected elementRef: ElementRef,
-        protected selection: IgxSelectionAPIService
+        protected selection: IgxSelectionAPIService,
+        @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions,
     ) {
-        super(dropDown, elementRef);
+        super(dropDown, elementRef, _displayDensityOptions);
     }
 
     /**
diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.html b/projects/igniteui-angular/src/lib/combo/combo.component.html
@@ -27,7 +27,7 @@
         </ng-template>
     </igx-suffix>
 </igx-input-group>
-<igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [displayDensity]="displayDensity" [width]="itemsWidth || '100%'">
+<igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [width]="itemsWidth || '100%'">
     <igx-input-group class="igx-combo__search" [displayDensity]="displayDensity">
         <input class="igx-combo-input" igxInput #searchInput name="searchInput" type="text" [(ngModel)]="searchValue"
             (ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)" (keydown)="handleKeyDown($event)"
@@ -36,7 +36,7 @@
     </igx-input-group>
     <ng-container *ngTemplateOutlet="headerTemplate; context: {$implicit: this}">
     </ng-container>
-    <div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'" [style.maxHeight.px]="itemsMaxHeight"
+    <div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'"
         [igxDropDownItemNavigation]="dropdown" [tabindex]="dropdown.collapsed ? -1 : 0" role="listbox" [attr.id]="dropdown.id">
         <ng-template igxFor let-item [igxForOf]="data | comboFiltering:filteringExpressions:filteringLogic | comboSorting:sortingExpressions | comboGrouping:groupKey"
             [igxForScrollOrientation]="'vertical'" [igxForContainerSize]="itemsMaxHeight" [igxForItemSize]="itemHeight"
diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down-item.component.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down-item.component.ts
@@ -6,16 +6,18 @@ import {
     HostListener,
     Inject,
     Input,
-    DoCheck
+    DoCheck,
+    Optional
 } from '@angular/core';
 import { IgxDropDownComponent, ISelectionEventArgs } from './drop-down.component';
+import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
 
 /**
  * The `<igx-drop-down-item>` is a container intended for row items in
  * a `<igx-drop-down>` container.
  */
 
-export class IgxDropDownItemBase {
+export class IgxDropDownItemBase extends DisplayDensityBase {
 
     /**
      * @hidden
@@ -49,14 +51,6 @@ export class IgxDropDownItemBase {
     @Input()
     public value: any;
 
-    /**
-     * @hidden
-     */
-    @HostBinding('class.igx-drop-down__item')
-    get itemStyle(): boolean {
-        return !this.isHeader;
-    }
-
     /**
      * Gets if the item is the currently selected one in the dropdown
      *
@@ -153,6 +147,28 @@ export class IgxDropDownItemBase {
     @HostBinding('class.igx-drop-down__item--disabled')
     public disabled = false;
 
+    /**
+     * @hidden
+     */
+    @HostBinding('class.igx-drop-down__item--cosy')
+    public get cosyClass() {
+        return this.isCosy();
+    }
+    /**
+     * @hidden
+     */
+    @HostBinding('class.igx-drop-down__item--compact')
+    public get compactClass() {
+        return this.isCompact();
+    }
+    /**
+     * @hidden
+     */
+    @HostBinding('class.igx-drop-down__item')
+    public get defaultClass() {
+        return !this.isCompact() && !this.isCosy();
+    }
+
     /**
      * @hidden
      */
@@ -192,8 +208,11 @@ export class IgxDropDownItemBase {
 
     constructor(
         public dropDown: any,
-        protected elementRef: ElementRef
-    ) { }
+        protected elementRef: ElementRef,
+        @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions
+    ) {
+        super(_displayDensityOptions);
+    }
 
     /**
      * @hidden
@@ -232,9 +251,10 @@ export class IgxDropDownItemComponent extends IgxDropDownItemBase implements DoC
 
     constructor(
         @Inject(forwardRef(() => IgxDropDownComponent)) public dropDown: IgxDropDownComponent,
-        protected elementRef: ElementRef
+        protected elementRef: ElementRef,
+        @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions
     ) {
-        super(dropDown, elementRef);
+        super(dropDown, elementRef, _displayDensityOptions);
     }
 
     /**
diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts
@@ -207,6 +207,28 @@ export class IgxDropDownBase extends DisplayDensityBase implements OnInit, ITogg
         this.toggleDirective.id = value;
     }
 
+    /**
+     * @hidden
+     */
+    @HostBinding('class.igx-drop-down--cosy')
+    public get cosyClass() {
+        return this.isCosy();
+    }
+    /**
+     * @hidden
+     */
+    @HostBinding('class.igx-drop-down--compact')
+    public get compactClass() {
+        return this.isCompact();
+    }
+    /**
+     * @hidden
+     */
+    @HostBinding('class.igx-drop-down')
+    public get defaultClass() {
+        return !this.isCompact() && !this.isCosy();
+    }
+
     /**
      * Gets if the dropdown is collapsed
      *
@@ -298,7 +320,7 @@ export class IgxDropDownBase extends DisplayDensityBase implements OnInit, ITogg
         protected elementRef: ElementRef,
         protected cdr: ChangeDetectorRef,
         protected selection: IgxSelectionAPIService,
-        @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions?: IDisplayDensityOptions) {
+        @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
             super(_displayDensityOptions);
         }
 
@@ -736,30 +758,9 @@ export class IgxDropDownComponent extends IgxDropDownBase {
     constructor(
         protected elementRef: ElementRef,
         protected cdr: ChangeDetectorRef,
-        protected selection: IgxSelectionAPIService) {
-        super(elementRef, cdr, selection);
-    }
-
-    /**
-     * @hidden
-     */
-    @HostBinding('class.igx-drop-down--cosy')
-    public get cosyClass() {
-        return this.isCosy();
-    }
-    /**
-     * @hidden
-     */
-    @HostBinding('class.igx-drop-down--compact')
-    public get compactClass() {
-        return this.isCompact();
-    }
-    /**
-     * @hidden
-     */
-    @HostBinding('class.igx-drop-down')
-    public get defaultClass() {
-        return !this.isCompact() && !this.isCosy();
+        protected selection: IgxSelectionAPIService,
+        @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
+        super(elementRef, cdr, selection, _displayDensityOptions);
     }
 
     protected changeSelectedItem(newSelection?: IgxDropDownItemComponent): boolean {
