Skip to content

Commit 1b55a28

Browse files
ViktorSlavovViktorSlavov
committed
feat(igxCombo): add display density to constructors, #2960 
1 parent b24b585 commit 1b55a28

File tree

5 files changed

+73
-47
lines changed

5 files changed

+73
-47
lines changed

‎projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {
22
ChangeDetectorRef, Component, ContentChild,
3-
ElementRef, forwardRef, Inject, QueryList, EventEmitter, OnDestroy
3+
ElementRef, forwardRef, Inject, QueryList, EventEmitter, OnDestroy, Optional
44
} from '@angular/core';
55
import { takeUntil } from 'rxjs/operators';
66
import { IgxDropDownBase, Navigate } from '../drop-down/drop-down.component';
@@ -11,6 +11,7 @@ import { IgxSelectionAPIService } from '../core/selection';
1111
import { IgxForOfDirective } from '../directives/for-of/for_of.directive';
1212
import { Subject } from 'rxjs';
1313
import { CancelableEventArgs } from '../core/utils';
14+
import { IDisplayDensityOptions, DisplayDensityToken } from '../core/density';
1415

1516
/** @hidden */
1617
@Component({
@@ -26,8 +27,9 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements OnDest
2627
protected cdr: ChangeDetectorRef,
2728
protected selection: IgxSelectionAPIService,
2829
@Inject(forwardRef(() => IgxComboComponent))
29-
public combo: IgxComboComponent) {
30-
super(elementRef, cdr, selection);
30+
public combo: IgxComboComponent,
31+
@Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
32+
super(elementRef, cdr, selection, _displayDensityOptions);
3133
}
3234

3335
/**

‎projects/igniteui-angular/src/lib/combo/combo-item.component.ts

+6-3
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,13 @@ import {
55
HostListener,
66
HostBinding,
77
Inject,
8-
Input
8+
Input,
9+
Optional
910
} from '@angular/core';
1011
import { IgxSelectionAPIService } from '../core/selection';
1112
import { IgxDropDownItemBase } from '../drop-down/drop-down-item.component';
1213
import { IgxComboDropDownComponent } from './combo-dropdown.component';
14+
import { DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
1315

1416
/** @hidden */
1517
@Component({
@@ -39,9 +41,10 @@ export class IgxComboItemComponent extends IgxDropDownItemBase {
3941
constructor(
4042
@Inject(forwardRef(() => IgxComboDropDownComponent)) public dropDown: IgxComboDropDownComponent,
4143
protected elementRef: ElementRef,
42-
protected selection: IgxSelectionAPIService
44+
protected selection: IgxSelectionAPIService,
45+
@Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions,
4346
) {
44-
super(dropDown, elementRef);
47+
super(dropDown, elementRef, _displayDensityOptions);
4548
}
4649

4750
/**

‎projects/igniteui-angular/src/lib/combo/combo.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
</ng-template>
2828
</igx-suffix>
2929
</igx-input-group>
30-
<igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [displayDensity]="displayDensity" [width]="itemsWidth || '100%'">
30+
<igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [width]="itemsWidth || '100%'">
3131
<igx-input-group class="igx-combo__search" [displayDensity]="displayDensity">
3232
<input class="igx-combo-input" igxInput #searchInput name="searchInput" type="text" [(ngModel)]="searchValue"
3333
(ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)" (keydown)="handleKeyDown($event)"
@@ -36,7 +36,7 @@
3636
</igx-input-group>
3737
<ng-container *ngTemplateOutlet="headerTemplate; context: {$implicit: this}">
3838
</ng-container>
39-
<div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'" [style.maxHeight.px]="itemsMaxHeight"
39+
<div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'"
4040
[igxDropDownItemNavigation]="dropdown" [tabindex]="dropdown.collapsed ? -1 : 0" role="listbox" [attr.id]="dropdown.id">
4141
<ng-template igxFor let-item [igxForOf]="data | comboFiltering:filteringExpressions:filteringLogic | comboSorting:sortingExpressions | comboGrouping:groupKey"
4242
[igxForScrollOrientation]="'vertical'" [igxForContainerSize]="itemsMaxHeight" [igxForItemSize]="itemHeight"

‎projects/igniteui-angular/src/lib/drop-down/drop-down-item.component.ts

+34-14
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,18 @@ import {
66
HostListener,
77
Inject,
88
Input,
9-
DoCheck
9+
DoCheck,
10+
Optional
1011
} from '@angular/core';
1112
import { IgxDropDownComponent, ISelectionEventArgs } from './drop-down.component';
13+
import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
1214

1315
/**
1416
* The `<igx-drop-down-item>` is a container intended for row items in
1517
* a `<igx-drop-down>` container.
1618
*/
1719

18-
export class IgxDropDownItemBase {
20+
export class IgxDropDownItemBase extends DisplayDensityBase {
1921

2022
/**
2123
* @hidden
@@ -49,14 +51,6 @@ export class IgxDropDownItemBase {
4951
@Input()
5052
public value: any;
5153

52-
/**
53-
* @hidden
54-
*/
55-
@HostBinding('class.igx-drop-down__item')
56-
get itemStyle(): boolean {
57-
return !this.isHeader;
58-
}
59-
6054
/**
6155
* Gets if the item is the currently selected one in the dropdown
6256
*
@@ -153,6 +147,28 @@ export class IgxDropDownItemBase {
153147
@HostBinding('class.igx-drop-down__item--disabled')
154148
public disabled = false;
155149

150+
/**
151+
* @hidden
152+
*/
153+
@HostBinding('class.igx-drop-down__item--cosy')
154+
public get cosyClass() {
155+
return this.isCosy();
156+
}
157+
/**
158+
* @hidden
159+
*/
160+
@HostBinding('class.igx-drop-down__item--compact')
161+
public get compactClass() {
162+
return this.isCompact();
163+
}
164+
/**
165+
* @hidden
166+
*/
167+
@HostBinding('class.igx-drop-down__item')
168+
public get defaultClass() {
169+
return !this.isCompact() && !this.isCosy();
170+
}
171+
156172
/**
157173
* @hidden
158174
*/
@@ -192,8 +208,11 @@ export class IgxDropDownItemBase {
192208

193209
constructor(
194210
public dropDown: any,
195-
protected elementRef: ElementRef
196-
) { }
211+
protected elementRef: ElementRef,
212+
@Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions
213+
) {
214+
super(_displayDensityOptions);
215+
}
197216

198217
/**
199218
* @hidden
@@ -232,9 +251,10 @@ export class IgxDropDownItemComponent extends IgxDropDownItemBase implements DoC
232251

233252
constructor(
234253
@Inject(forwardRef(() => IgxDropDownComponent)) public dropDown: IgxDropDownComponent,
235-
protected elementRef: ElementRef
254+
protected elementRef: ElementRef,
255+
@Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions
236256
) {
237-
super(dropDown, elementRef);
257+
super(dropDown, elementRef, _displayDensityOptions);
238258
}
239259

240260
/**

‎projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts

+26-25
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,28 @@ export class IgxDropDownBase extends DisplayDensityBase implements OnInit, ITogg
207207
this.toggleDirective.id = value;
208208
}
209209

210+
/**
211+
* @hidden
212+
*/
213+
@HostBinding('class.igx-drop-down--cosy')
214+
public get cosyClass() {
215+
return this.isCosy();
216+
}
217+
/**
218+
* @hidden
219+
*/
220+
@HostBinding('class.igx-drop-down--compact')
221+
public get compactClass() {
222+
return this.isCompact();
223+
}
224+
/**
225+
* @hidden
226+
*/
227+
@HostBinding('class.igx-drop-down')
228+
public get defaultClass() {
229+
return !this.isCompact() && !this.isCosy();
230+
}
231+
210232
/**
211233
* Gets if the dropdown is collapsed
212234
*
@@ -298,7 +320,7 @@ export class IgxDropDownBase extends DisplayDensityBase implements OnInit, ITogg
298320
protected elementRef: ElementRef,
299321
protected cdr: ChangeDetectorRef,
300322
protected selection: IgxSelectionAPIService,
301-
@Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions?: IDisplayDensityOptions) {
323+
@Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
302324
super(_displayDensityOptions);
303325
}
304326

@@ -736,30 +758,9 @@ export class IgxDropDownComponent extends IgxDropDownBase {
736758
constructor(
737759
protected elementRef: ElementRef,
738760
protected cdr: ChangeDetectorRef,
739-
protected selection: IgxSelectionAPIService) {
740-
super(elementRef, cdr, selection);
741-
}
742-
743-
/**
744-
* @hidden
745-
*/
746-
@HostBinding('class.igx-drop-down--cosy')
747-
public get cosyClass() {
748-
return this.isCosy();
749-
}
750-
/**
751-
* @hidden
752-
*/
753-
@HostBinding('class.igx-drop-down--compact')
754-
public get compactClass() {
755-
return this.isCompact();
756-
}
757-
/**
758-
* @hidden
759-
*/
760-
@HostBinding('class.igx-drop-down')
761-
public get defaultClass() {
762-
return !this.isCompact() && !this.isCosy();
761+
protected selection: IgxSelectionAPIService,
762+
@Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
763+
super(elementRef, cdr, selection, _displayDensityOptions);
763764
}
764765

765766
protected changeSelectedItem(newSelection?: IgxDropDownItemComponent): boolean {

0 commit comments

Comments
 (0)