Skip to content

Commit

Permalink
feat(igxCombo): add display density to combo component, refactor temp…
Browse files Browse the repository at this point in the history 
…late,#2410
  • Loading branch information
@ViktorSlavov
ViktorSlavov committed Nov 13, 2018
1 parent ae5233a commit 3e79bce
Show file tree
Hide file tree
Showing 4 changed files with 86 additions and 52 deletions.
100 changes: 50 additions & 50 deletions projects/igniteui-angular/src/lib/combo/combo.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,58 +14,58 @@
{{ item[key] }}
</ng-template>

<div class="igx-combo" [style.width]="width" role="combobox" [attr.aria-expanded]="!dropdown.collapsed" aria-haspopup="listbox" [attr.aria-owns]="dropdown.id">
<igx-input-group [type]="type" (click)="onInputClick($event)">
<input igxInput #comboInput name="comboInput" type="text" [(ngModel)]="value" readonly [placeholder]="placeholder" [disabled]="disabled" (blur)="onBlur($event)"/>
<igx-suffix *ngIf="value.length" class="clearButton" aria-label="Clear Selection" igxRipple (click)="handleClearItems($event)">
<igx-icon fontSet="material">clear</igx-icon>
</igx-suffix>
<igx-suffix igxButton="icon" class="dropdownToggleButton" igxRipple>
<igx-icon *ngIf="dropdown.collapsed; else toggleUp" fontSet="material">arrow_drop_down</igx-icon>
<ng-template #toggleUp>
<igx-icon fontSet="material">arrow_drop_up</igx-icon>
</ng-template>
</igx-suffix>
<igx-input-group [displayDensity]="displayDensity" [type]="type" (click)="onInputClick($event)">
<input igxInput #comboInput name="comboInput" type="text" [(ngModel)]="value" readonly [placeholder]="placeholder"
[disabled]="disabled" (blur)="onBlur($event)" />
<igx-suffix *ngIf="value.length" class="clearButton" aria-label="Clear Selection" igxRipple (click)="handleClearItems($event)">
<igx-icon fontSet="material">clear</igx-icon>
</igx-suffix>
<igx-suffix igxButton="icon" class="dropdownToggleButton" igxRipple>
<igx-icon *ngIf="dropdown.collapsed; else toggleUp" fontSet="material">arrow_drop_down</igx-icon>
<ng-template #toggleUp>
<igx-icon fontSet="material">arrow_drop_up</igx-icon>
</ng-template>
</igx-suffix>
</igx-input-group>
<igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [width]="itemsWidth || '100%'">
<igx-input-group [displayDensity]="displayDensity" class="igx-combo__search">
<input class="igx-combo-input" igxInput #searchInput name="searchInput" type="text" [(ngModel)]="searchValue"
(ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)" (keydown)="handleKeyDown($event)"
(focus)="dropdown.onBlur($event)" [placeholder]="searchPlaceholder" aria-autocomplete="both"
[attr.aria-owns]="dropdown.id" [attr.aria-labelledby]="ariaLabelledBy" />
</igx-input-group>
<igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [width]="itemsWidth || '100%'">
<igx-input-group class="igx-combo__search">
<input class="igx-combo-input" igxInput #searchInput name="searchInput" type="text" [(ngModel)]="searchValue" (ngModelChange)="handleInputChange($event)"
(keyup)="handleKeyUp($event)" (keydown)="handleKeyDown($event)" (focus)="dropdown.onBlur($event)" [placeholder]="searchPlaceholder" aria-autocomplete="both"
[attr.aria-owns]="dropdown.id" [attr.aria-labelledby]="ariaLabelledBy" />
</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"
[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" (onChunkPreload)="dataLoading($event)" #virtualScrollContainer>
<igx-combo-item [value]="item" isHeader={{item.isHeader}} role="option">
<ng-container *ngIf="!item.isHeader">
<igx-checkbox [checked]="isItemSelected(item)" disableRipple="true" disabled="true" class="igx-combo__checkbox"></igx-checkbox>
</ng-container>
<ng-container *ngIf="item.isHeader">
<ng-container *ngTemplateOutlet="headerItemTemplate ? headerItemTemplate : headerItemBase; context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}"></ng-container>
</ng-container>
<ng-container *ngIf="!item.isHeader">
<ng-container #listItem *ngTemplateOutlet="template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};"></ng-container>
</ng-container>
</igx-combo-item>
</ng-template>
</div>
<div class="igx-combo__add" *ngIf="filteredData.length === 0 || isAddButtonVisible()">
<div class="igx-combo__empty" *ngIf="filteredData.length === 0">
<ng-container *ngTemplateOutlet="emptyTemplate ? emptyTemplate : empty; context: {$implicit: this}">
<ng-container *ngTemplateOutlet="headerTemplate; context: {$implicit: this}">
</ng-container>
<div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'" [style.maxHeight.px]="itemsMaxHeight"
[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"
(onChunkPreload)="dataLoading($event)" #virtualScrollContainer>
<igx-combo-item [value]="item" isHeader={{item.isHeader}} role="option">
<ng-container *ngIf="!item.isHeader">
<igx-checkbox [checked]="isItemSelected(item)" disableRipple="true" disabled="true" class="igx-combo__checkbox"></igx-checkbox>
</ng-container>
<ng-container *ngIf="item.isHeader">
<ng-container *ngTemplateOutlet="headerItemTemplate ? headerItemTemplate : headerItemBase; context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}"></ng-container>
</ng-container>
</div>
<igx-combo-item *ngIf="isAddButtonVisible()" [tabindex]="dropdown.collapsed ? -1 : customValueFlag ? 1 : -1" class="igx-combo__add-item"
igxRipple (keypress)="addItemToCollection()" [isHeader]="false" [disabled]="false" [value]="'ADD ITEM'" role="button"
aria-label="Add Item">
<ng-container *ngTemplateOutlet="addItemTemplate ? addItemTemplate : addItemDefault; context: {$implicit: this}">
<ng-container *ngIf="!item.isHeader">
<ng-container #listItem *ngTemplateOutlet="template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};"></ng-container>
</ng-container>
</igx-combo-item>
</ng-template>
</div>
<div class="igx-combo__add" *ngIf="filteredData.length === 0 || isAddButtonVisible()">
<div class="igx-combo__empty" *ngIf="filteredData.length === 0">
<ng-container *ngTemplateOutlet="emptyTemplate ? emptyTemplate : empty; context: {$implicit: this}">
</ng-container>
</div>
<ng-container *ngTemplateOutlet="footerTemplate; context: {$implicit: this}">
</ng-container>
</igx-combo-drop-down>
</div>
<igx-combo-item *ngIf="isAddButtonVisible()" [tabindex]="dropdown.collapsed ? -1 : customValueFlag ? 1 : -1"
class="igx-combo__add-item" igxRipple (keypress)="addItemToCollection()" [isHeader]="false" [disabled]="false"
[value]="'ADD ITEM'" role="button" aria-label="Add Item">
<ng-container *ngTemplateOutlet="addItemTemplate ? addItemTemplate : addItemDefault; context: {$implicit: this}">
</ng-container>
</igx-combo-item>
</div>
<ng-container *ngTemplateOutlet="footerTemplate; context: {$implicit: this}">
</ng-container>
</igx-combo-drop-down>
27 changes: 25 additions & 2 deletions projects/igniteui-angular/src/lib/combo/combo.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import { IgxComboFilterConditionPipe, IgxComboFilteringPipe, IgxComboGroupingPip
import { OverlaySettings, AbsoluteScrollStrategy } from '../services';
import { Subscription } from 'rxjs';
import { DeprecateProperty } from '../core/deprecateDecorators';
import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../core/density';

/** Custom strategy to provide the combo with callback on initial positioning */
class ComboConnectedPositionStrategy extends ConnectedPositioningStrategy {
Expand Down Expand Up @@ -96,7 +97,7 @@ const noop = () => { };
selector: 'igx-combo',
templateUrl: 'combo.component.html'
})
export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, OnInit, OnDestroy {
export class IgxComboComponent extends DisplayDensityBase implements AfterViewInit, ControlValueAccessor, OnInit, OnDestroy {
/**
* @hidden
*/
Expand Down Expand Up @@ -168,7 +169,9 @@ export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, O
protected elementRef: ElementRef,
protected cdr: ChangeDetectorRef,
protected selection: IgxSelectionAPIService,
@Self() @Optional() public ngControl: NgControl) {
@Self() @Optional() public ngControl: NgControl,
@Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
super(_displayDensityOptions);
if (this.ngControl) {
// Note: we provide the value accessor through here, instead of
// the `providers` to avoid running into a circular import.
Expand Down Expand Up @@ -522,6 +525,26 @@ export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, O
return this._valid === IgxComboState.INVALID;
}

@HostBinding('class.igx-combo')
public cssClass = 'igx-combo'; // Independant of display density, at the time being

@HostBinding(`attr.role`)
public role = 'combobox';

@HostBinding('attr.aria-expanded')
public get ariaExpanded() {
return !this.dropdown.collapsed;
}

@HostBinding('attr.aria-haspopup')
public get hasPopUp() {
return 'listbox';
}

@HostBinding('attr.aria-owns')
public get ariaOwns() {
return this.dropdown.id;
}
/**
* Controls whether custom values can be added to the collection
*
Expand Down
7 changes: 7 additions & 0 deletions src/app/combo/combo.sample.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
(onAddition)="handleAddition($event)"
[data]="items"
[allowCustomValues]="true"
[displayDensity]="'comfortable'"
[filterable]="true" [displayKey]="valueKeyVar" [valueKey]="valueKeyVar"
[groupKey]="valueKeyVar ? 'region' : ''" [width]="'100%'">
<ng-template *ngIf="currentDataType !== 'primitive'" #itemTemplate let-display let-key="valueKey">
Expand Down Expand Up @@ -61,6 +62,12 @@
</div>
</ng-template>
</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>
</div>
</section>
</div>
</div>
4 changes: 4 additions & 0 deletions src/app/combo/combo.sample.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,4 +121,8 @@ export class ComboSampleComponent implements OnInit {
this.igxCombo.itemTemplate = this.initialItemTemplate ? this.initialItemTemplate : this.customItemTemplate ;
this.initialItemTemplate = comboTemplate;
}

setDensity(density: string) {
this.igxCombo.displayDensity = density;
}
}

0 comments on commit 3e79bce

Please sign in to comment.