Skip to content

Commit b24b585

Browse files
ViktorSlavovViktorSlavov
committed
feat(igxCombo): combo/dropdown extend DisplayDensityBase, adjust template,#2960 
1 parent ae5233a commit b24b585

File tree

6 files changed

+153
-64
lines changed

6 files changed

+153
-64
lines changed

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

Lines changed: 50 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -14,58 +14,58 @@
1414
{{ item[key] }}
1515
</ng-template>
1616

17-
<div class="igx-combo" [style.width]="width" role="combobox" [attr.aria-expanded]="!dropdown.collapsed" aria-haspopup="listbox" [attr.aria-owns]="dropdown.id">
18-
<igx-input-group [type]="type" (click)="onInputClick($event)">
19-
<input igxInput #comboInput name="comboInput" type="text" [(ngModel)]="value" readonly [placeholder]="placeholder" [disabled]="disabled" (blur)="onBlur($event)"/>
20-
<igx-suffix *ngIf="value.length" class="clearButton" aria-label="Clear Selection" igxRipple (click)="handleClearItems($event)">
21-
<igx-icon fontSet="material">clear</igx-icon>
22-
</igx-suffix>
23-
<igx-suffix igxButton="icon" class="dropdownToggleButton" igxRipple>
24-
<igx-icon *ngIf="dropdown.collapsed; else toggleUp" fontSet="material">arrow_drop_down</igx-icon>
25-
<ng-template #toggleUp>
26-
<igx-icon fontSet="material">arrow_drop_up</igx-icon>
27-
</ng-template>
28-
</igx-suffix>
17+
<igx-input-group [type]="type" [displayDensity]="displayDensity" (click)="onInputClick($event)">
18+
<input igxInput #comboInput name="comboInput" type="text" [(ngModel)]="value" readonly [placeholder]="placeholder"
19+
[disabled]="disabled" (blur)="onBlur($event)" />
20+
<igx-suffix *ngIf="value.length" class="clearButton" aria-label="Clear Selection" igxRipple (click)="handleClearItems($event)">
21+
<igx-icon fontSet="material">clear</igx-icon>
22+
</igx-suffix>
23+
<igx-suffix igxButton="icon" class="dropdownToggleButton" igxRipple>
24+
<igx-icon *ngIf="dropdown.collapsed; else toggleUp" fontSet="material">arrow_drop_down</igx-icon>
25+
<ng-template #toggleUp>
26+
<igx-icon fontSet="material">arrow_drop_up</igx-icon>
27+
</ng-template>
28+
</igx-suffix>
29+
</igx-input-group>
30+
<igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [displayDensity]="displayDensity" [width]="itemsWidth || '100%'">
31+
<igx-input-group class="igx-combo__search" [displayDensity]="displayDensity">
32+
<input class="igx-combo-input" igxInput #searchInput name="searchInput" type="text" [(ngModel)]="searchValue"
33+
(ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)" (keydown)="handleKeyDown($event)"
34+
(focus)="dropdown.onBlur($event)" [placeholder]="searchPlaceholder" aria-autocomplete="both"
35+
[attr.aria-owns]="dropdown.id" [attr.aria-labelledby]="ariaLabelledBy" />
2936
</igx-input-group>
30-
<igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [width]="itemsWidth || '100%'">
31-
<igx-input-group class="igx-combo__search">
32-
<input class="igx-combo-input" igxInput #searchInput name="searchInput" type="text" [(ngModel)]="searchValue" (ngModelChange)="handleInputChange($event)"
33-
(keyup)="handleKeyUp($event)" (keydown)="handleKeyDown($event)" (focus)="dropdown.onBlur($event)" [placeholder]="searchPlaceholder" aria-autocomplete="both"
34-
[attr.aria-owns]="dropdown.id" [attr.aria-labelledby]="ariaLabelledBy" />
35-
</igx-input-group>
36-
<ng-container *ngTemplateOutlet="headerTemplate; context: {$implicit: this}">
37-
</ng-container>
38-
<div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'" [style.maxHeight.px]="itemsMaxHeight"
39-
[igxDropDownItemNavigation]="dropdown" [tabindex]="dropdown.collapsed ? -1 : 0" role="listbox" [attr.id]="dropdown.id">
40-
<ng-template igxFor let-item [igxForOf]="data | comboFiltering:filteringExpressions:filteringLogic | comboSorting:sortingExpressions | comboGrouping:groupKey"
41-
[igxForScrollOrientation]="'vertical'" [igxForContainerSize]="itemsMaxHeight"
42-
[igxForItemSize]="itemHeight" (onChunkPreload)="dataLoading($event)" #virtualScrollContainer>
43-
<igx-combo-item [value]="item" isHeader={{item.isHeader}} role="option">
44-
<ng-container *ngIf="!item.isHeader">
45-
<igx-checkbox [checked]="isItemSelected(item)" disableRipple="true" disabled="true" class="igx-combo__checkbox"></igx-checkbox>
46-
</ng-container>
47-
<ng-container *ngIf="item.isHeader">
48-
<ng-container *ngTemplateOutlet="headerItemTemplate ? headerItemTemplate : headerItemBase; context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}"></ng-container>
49-
</ng-container>
50-
<ng-container *ngIf="!item.isHeader">
51-
<ng-container #listItem *ngTemplateOutlet="template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};"></ng-container>
52-
</ng-container>
53-
</igx-combo-item>
54-
</ng-template>
55-
</div>
56-
<div class="igx-combo__add" *ngIf="filteredData.length === 0 || isAddButtonVisible()">
57-
<div class="igx-combo__empty" *ngIf="filteredData.length === 0">
58-
<ng-container *ngTemplateOutlet="emptyTemplate ? emptyTemplate : empty; context: {$implicit: this}">
37+
<ng-container *ngTemplateOutlet="headerTemplate; context: {$implicit: this}">
38+
</ng-container>
39+
<div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'" [style.maxHeight.px]="itemsMaxHeight"
40+
[igxDropDownItemNavigation]="dropdown" [tabindex]="dropdown.collapsed ? -1 : 0" role="listbox" [attr.id]="dropdown.id">
41+
<ng-template igxFor let-item [igxForOf]="data | comboFiltering:filteringExpressions:filteringLogic | comboSorting:sortingExpressions | comboGrouping:groupKey"
42+
[igxForScrollOrientation]="'vertical'" [igxForContainerSize]="itemsMaxHeight" [igxForItemSize]="itemHeight"
43+
(onChunkPreload)="dataLoading($event)" #virtualScrollContainer>
44+
<igx-combo-item [value]="item" isHeader={{item.isHeader}} role="option">
45+
<ng-container *ngIf="!item.isHeader">
46+
<igx-checkbox [checked]="isItemSelected(item)" disableRipple="true" disabled="true" class="igx-combo__checkbox"></igx-checkbox>
47+
</ng-container>
48+
<ng-container *ngIf="item.isHeader">
49+
<ng-container *ngTemplateOutlet="headerItemTemplate ? headerItemTemplate : headerItemBase; context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}"></ng-container>
5950
</ng-container>
60-
</div>
61-
<igx-combo-item *ngIf="isAddButtonVisible()" [tabindex]="dropdown.collapsed ? -1 : customValueFlag ? 1 : -1" class="igx-combo__add-item"
62-
igxRipple (keypress)="addItemToCollection()" [isHeader]="false" [disabled]="false" [value]="'ADD ITEM'" role="button"
63-
aria-label="Add Item">
64-
<ng-container *ngTemplateOutlet="addItemTemplate ? addItemTemplate : addItemDefault; context: {$implicit: this}">
51+
<ng-container *ngIf="!item.isHeader">
52+
<ng-container #listItem *ngTemplateOutlet="template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};"></ng-container>
6553
</ng-container>
6654
</igx-combo-item>
55+
</ng-template>
56+
</div>
57+
<div class="igx-combo__add" *ngIf="filteredData.length === 0 || isAddButtonVisible()">
58+
<div class="igx-combo__empty" *ngIf="filteredData.length === 0">
59+
<ng-container *ngTemplateOutlet="emptyTemplate ? emptyTemplate : empty; context: {$implicit: this}">
60+
</ng-container>
6761
</div>
68-
<ng-container *ngTemplateOutlet="footerTemplate; context: {$implicit: this}">
69-
</ng-container>
70-
</igx-combo-drop-down>
71-
</div>
62+
<igx-combo-item *ngIf="isAddButtonVisible()" [tabindex]="dropdown.collapsed ? -1 : customValueFlag ? 1 : -1"
63+
class="igx-combo__add-item" igxRipple (keypress)="addItemToCollection()" [isHeader]="false" [disabled]="false"
64+
[value]="'ADD ITEM'" role="button" aria-label="Add Item">
65+
<ng-container *ngTemplateOutlet="addItemTemplate ? addItemTemplate : addItemDefault; context: {$implicit: this}">
66+
</ng-container>
67+
</igx-combo-item>
68+
</div>
69+
<ng-container *ngTemplateOutlet="footerTemplate; context: {$implicit: this}">
70+
</ng-container>
71+
</igx-combo-drop-down>

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

Lines changed: 57 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,13 @@ import { IgxInputGroupModule } from '../input-group/input-group.component';
3232
import { IgxComboItemComponent } from './combo-item.component';
3333
import { IgxComboDropDownComponent } from './combo-dropdown.component';
3434
import { IgxComboFilterConditionPipe, IgxComboFilteringPipe, IgxComboGroupingPipe, IgxComboSortingPipe } from './combo.pipes';
35-
import { OverlaySettings, AbsoluteScrollStrategy } from '../services';
35+
import { OverlaySettings, AbsoluteScrollStrategy, AutoPositionStrategy } from '../services';
3636
import { Subscription } from 'rxjs';
3737
import { DeprecateProperty } from '../core/deprecateDecorators';
38+
import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
3839

3940
/** Custom strategy to provide the combo with callback on initial positioning */
40-
class ComboConnectedPositionStrategy extends ConnectedPositioningStrategy {
41+
class ComboConnectedPositionStrategy extends AutoPositionStrategy {
4142
private _callback: () => void;
4243
constructor(callback: () => void) {
4344
super();
@@ -96,7 +97,7 @@ const noop = () => { };
9697
selector: 'igx-combo',
9798
templateUrl: 'combo.component.html'
9899
})
99-
export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, OnInit, OnDestroy {
100+
export class IgxComboComponent extends DisplayDensityBase implements AfterViewInit, ControlValueAccessor, OnInit, OnDestroy {
100101
/**
101102
* @hidden
102103
*/
@@ -168,7 +169,9 @@ export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, O
168169
protected elementRef: ElementRef,
169170
protected cdr: ChangeDetectorRef,
170171
protected selection: IgxSelectionAPIService,
171-
@Self() @Optional() public ngControl: NgControl) {
172+
@Self() @Optional() public ngControl: NgControl,
173+
@Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions?: IDisplayDensityOptions) {
174+
super(_displayDensityOptions);
172175
if (this.ngControl) {
173176
// Note: we provide the value accessor through here, instead of
174177
// the `providers` to avoid running into a circular import.
@@ -506,6 +509,35 @@ export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, O
506509
this._width = val;
507510
}
508511

512+
/**
513+
* @hidden
514+
*/
515+
@HostBinding('attr.role')
516+
public get role(): string {
517+
return 'combobox';
518+
}
519+
/**
520+
* @hidden
521+
*/
522+
@HostBinding('attr.aria-haspopup')
523+
public get hasPopup(): string {
524+
return 'listbox';
525+
}
526+
/**
527+
* @hidden
528+
*/
529+
@HostBinding('attr.aria-expanded')
530+
public get ariaExpanded(): boolean {
531+
return !this.dropdown.collapsed;
532+
}
533+
/**
534+
* @hidden
535+
*/
536+
@HostBinding('attr.aria-owns')
537+
public get ariaOwns(): string {
538+
return this.dropdown.id;
539+
}
540+
509541
/**
510542
* @hidden
511543
*/
@@ -522,6 +554,27 @@ export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, O
522554
return this._valid === IgxComboState.INVALID;
523555
}
524556

557+
/**
558+
* @hidden
559+
*/
560+
@HostBinding('class.igx-combo--cosy')
561+
public get cosyClass() {
562+
return this.isCosy();
563+
}
564+
/**
565+
* @hidden
566+
*/
567+
@HostBinding('class.igx-combo--compact')
568+
public get compactClass() {
569+
return this.isCompact();
570+
}
571+
/**
572+
* @hidden
573+
*/
574+
@HostBinding('class.igx-combo')
575+
public get defaultClass() {
576+
return !this.isCompact() && !this.isCosy();
577+
}
525578
/**
526579
* Controls whether custom values can be added to the collection
527580
*

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
<div class="igx-drop-down">
2-
<div class="igx-drop-down__list" igxToggle (onOpening)="onToggleOpening($event)" (onOpened)="onToggleOpened()" (onClosing)="onToggleClosing($event)" (onClosed)="onToggleClosed()">
3-
<ng-container *ngIf="!collapsed">
4-
<ng-content></ng-content>
5-
</ng-container>
6-
</div>
1+
<div class="igx-drop-down__list" igxToggle (onOpening)="onToggleOpening($event)" (onOpened)="onToggleOpened()" (onClosing)="onToggleClosing($event)" (onClosed)="onToggleClosed()">
2+
<ng-container *ngIf="!collapsed">
3+
<ng-content></ng-content>
4+
</ng-container>
75
</div>

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

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ import {
1616
Optional,
1717
HostListener,
1818
Directive,
19-
Inject
19+
Inject,
20+
HostBinding
2021
} from '@angular/core';
2122
import { IgxSelectionAPIService } from '../core/selection';
2223
import { IgxToggleDirective, IgxToggleModule } from '../directives/toggle/toggle.directive';
@@ -25,6 +26,7 @@ import { OverlaySettings } from '../services';
2526
import { IToggleView } from '../core/navigation';
2627
import { IgxComboDropDownComponent } from '../combo/combo-dropdown.component';
2728
import { CancelableEventArgs } from '../core/utils';
29+
import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
2830

2931
let NEXT_ID = 0;
3032

@@ -45,7 +47,7 @@ export enum Navigate {
4547
}
4648

4749

48-
export class IgxDropDownBase implements OnInit, IToggleView {
50+
export class IgxDropDownBase extends DisplayDensityBase implements OnInit, IToggleView {
4951
private _initiallySelectedItem: IgxDropDownItemComponent = null;
5052
protected _focusedItem: any = null;
5153
private _width;
@@ -295,7 +297,10 @@ export class IgxDropDownBase implements OnInit, IToggleView {
295297
constructor(
296298
protected elementRef: ElementRef,
297299
protected cdr: ChangeDetectorRef,
298-
protected selection: IgxSelectionAPIService) { }
300+
protected selection: IgxSelectionAPIService,
301+
@Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions?: IDisplayDensityOptions) {
302+
super(_displayDensityOptions);
303+
}
299304

300305
/**
301306
* Select an item by index
@@ -735,6 +740,28 @@ export class IgxDropDownComponent extends IgxDropDownBase {
735740
super(elementRef, cdr, selection);
736741
}
737742

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();
763+
}
764+
738765
protected changeSelectedItem(newSelection?: IgxDropDownItemComponent): boolean {
739766
const oldSelection = this.selectedItem;
740767
const selectionChanged = super.changeSelectedItem(newSelection);

‎src/app/combo/combo.sample.html

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,9 @@
2020
(onAddition)="handleAddition($event)"
2121
[data]="items"
2222
[allowCustomValues]="true"
23+
[displayDensity]="'compact'"
2324
[filterable]="true" [displayKey]="valueKeyVar" [valueKey]="valueKeyVar"
24-
[groupKey]="valueKeyVar ? 'region' : ''" [width]="'100%'">
25+
[groupKey]="valueKeyVar ? 'region' : ''" [width]="'100%'">
2526
<ng-template *ngIf="currentDataType !== 'primitive'" #itemTemplate let-display let-key="valueKey">
2627
<div class="state-card--simple">
2728
<div class="display-value--main">{{display[key]}}</div>
@@ -61,6 +62,12 @@
6162
</div>
6263
</ng-template>
6364
</div>
65+
<div>
66+
<h4>Display Density</h4>
67+
<button igxButton="raised" [disabled]="igxCombo.isCompact()" (click)="setDensity('compact')">Compact</button>
68+
<button igxButton="raised" [disabled]="igxCombo.isCosy()" (click)="setDensity('cosy')">Cosy</button>
69+
<button igxButton="raised" [disabled]="!igxCombo.isCosy() && !igxCombo.isCompact()" (click)="setDensity('comfortable')">Comfortable</button>
70+
</div>
6471
</section>
6572
</div>
6673
</div>

‎src/app/combo/combo.sample.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,4 +121,8 @@ export class ComboSampleComponent implements OnInit {
121121
this.igxCombo.itemTemplate = this.initialItemTemplate ? this.initialItemTemplate : this.customItemTemplate ;
122122
this.initialItemTemplate = comboTemplate;
123123
}
124+
125+
setDensity(density: string) {
126+
this.igxCombo.displayDensity = density;
127+
}
124128
}

0 commit comments

Comments
 (0)