Skip to content

Commit 4b8ee7d

Browse files
ViktorSlavovViktorSlavov
committed
chore(combo): format template, clean-up combo pipes
1 parent a474a02 commit 4b8ee7d

File tree

3 files changed

+52
-64
lines changed

3 files changed

+52
-64
lines changed

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

Lines changed: 45 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,3 @@
1-
<ng-template #complex let-display let-data="data" let-key="displayKey">
2-
{{display[key]}}
3-
</ng-template>
4-
<ng-template #primitive let-display>
5-
{{display}}
6-
</ng-template>
7-
<ng-template #empty>
8-
<span>The list is empty</span>
9-
</ng-template>
10-
<ng-template #addItemDefault let-control>
11-
<button igxButton="flat" igxRipple>Add item</button>
12-
</ng-template>
13-
<ng-template #headerItemBase let-item let-key="valueKey" let-groupKey="groupKey">
14-
{{ item[key] }}
15-
</ng-template>
16-
171
<igx-input-group #inputGroup [displayDensity]="displayDensity" [type]="type" (click)="onInputClick($event)">
182
<ng-container ngProjectAs="[igxLabel]">
193
<ng-content select="[igxLabel]"></ng-content>
@@ -22,14 +6,15 @@
226
<ng-content select="igx-prefix"></ng-content>
237
</ng-container>
248
<ng-container ngProjectAs="igx-hint, [igxHint]">
25-
<ng-content select="igx-hint, [igxHint]"></ng-content>
26-
</ng-container>
9+
<ng-content select="igx-hint, [igxHint]"></ng-content>
10+
</ng-container>
2711
<input igxInput #comboInput name="comboInput" type="text" [value]="value" readonly [attr.placeholder]="placeholder"
2812
[disabled]="disabled" (blur)="onBlur()" />
2913
<ng-container ngProjectAs="igx-suffix">
3014
<ng-content select="igx-suffix"></ng-content>
3115
</ng-container>
32-
<igx-suffix *ngIf="value.length" aria-label="Clear Selection" class="igx-combo__clear-button" igxRipple (click)="handleClearItems($event)">
16+
<igx-suffix *ngIf="value.length" aria-label="Clear Selection" class="igx-combo__clear-button" igxRipple
17+
(click)="handleClearItems($event)">
3318
<ng-container *ngIf="clearIconTemplate">
3419
<ng-container *ngTemplateOutlet="clearIconTemplate"></ng-container>
3520
</ng-container>
@@ -39,11 +24,13 @@
3924
<ng-container *ngIf="toggleIconTemplate">
4025
<ng-container *ngTemplateOutlet="toggleIconTemplate; context: {$implicit: this.collapsed}"></ng-container>
4126
</ng-container>
42-
<igx-icon *ngIf="!toggleIconTemplate" fontSet="material">{{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}</igx-icon>
27+
<igx-icon *ngIf="!toggleIconTemplate" fontSet="material">
28+
{{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}</igx-icon>
4329
</igx-suffix>
4430
</igx-input-group>
45-
<igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [displayDensity]="displayDensity" [width]="itemsWidth || '100%'" (onOpening)="handleOpening($event)"
46-
(onClosing)="handleClosing($event)" (onOpened)="handleOpened()" (onClosed)="handleClosed()">
31+
<igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [displayDensity]="displayDensity"
32+
[width]="itemsWidth || '100%'" (onOpening)="handleOpening($event)" (onClosing)="handleClosing($event)"
33+
(onOpened)="handleOpened()" (onClosed)="handleClosed()">
4734
<igx-input-group *ngIf="displaySearchInput" [displayDensity]="displayDensity" class="igx-combo__search">
4835
<input class="igx-combo-input" igxInput #searchInput name="searchInput" autocomplete="off" type="text"
4936
[(ngModel)]="searchValue" (ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)"
@@ -52,33 +39,55 @@
5239
</igx-input-group>
5340
<ng-container *ngTemplateOutlet="headerTemplate">
5441
</ng-container>
55-
<div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'" [style.maxHeight.px]="itemsMaxHeight"
56-
[igxDropDownItemNavigation]="dropdown" (focus)="dropdown.onFocus()" [tabindex]="dropdown.collapsed ? -1 : 0"
57-
role="listbox" [attr.id]="dropdown.id">
58-
<ng-template igxFor let-item let-index="index" [igxForOf]="data | comboFiltering:filteringExpressions:filteringLogic | comboSorting:sortingExpressions | comboGrouping:groupKey"
59-
[igxForScrollOrientation]="'vertical'" [igxForContainerSize]="itemsMaxHeight" [igxForItemSize]="itemHeight"
42+
<div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'"
43+
[style.maxHeight.px]="itemsMaxHeight" [igxDropDownItemNavigation]="dropdown" (focus)="dropdown.onFocus()"
44+
[tabindex]="dropdown.collapsed ? -1 : 0" role="listbox" [attr.id]="dropdown.id">
45+
<igx-combo-item *igxFor="let item of data | comboFiltering:filteringExpressions:filteringLogic
46+
| comboSorting:sortingExpressions
47+
| comboGrouping:groupKey:valueKey;
48+
index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight"
49+
[itemHeight]='itemHeight' [value]="item" [isHeader]="item.isHeader" role="option" [index]="rowIndex"
6050
(onChunkPreload)="dataLoading($event)">
61-
<igx-combo-item [itemHeight]='itemHeight' [value]="item" [isHeader]="item.isHeader" role="option" [index]="index">
62-
<ng-container *ngIf="item.isHeader">
63-
<ng-container *ngTemplateOutlet="headerItemTemplate ? headerItemTemplate : headerItemBase; context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}"></ng-container>
51+
<ng-container *ngIf="item.isHeader">
52+
<ng-container
53+
*ngTemplateOutlet="headerItemTemplate ? headerItemTemplate : headerItemBase;
54+
context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}">
6455
</ng-container>
65-
<ng-container *ngIf="!item.isHeader">
66-
<ng-container #listItem *ngTemplateOutlet="template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};"></ng-container>
56+
</ng-container>
57+
<ng-container *ngIf="!item.isHeader">
58+
<ng-container #listItem
59+
*ngTemplateOutlet="template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};">
6760
</ng-container>
68-
</igx-combo-item>
69-
</ng-template>
61+
</ng-container>
62+
</igx-combo-item>
7063
</div>
7164
<div class="igx-combo__add" *ngIf="filteredData.length === 0 || isAddButtonVisible()">
7265
<div class="igx-combo__empty" *ngIf="filteredData.length === 0">
7366
<ng-container *ngTemplateOutlet="emptyTemplate ? emptyTemplate : empty">
7467
</ng-container>
7568
</div>
76-
<igx-combo-add-item [itemHeight]='itemHeight' *ngIf="isAddButtonVisible()" [tabindex]="dropdown.collapsed ? -1 : customValueFlag ? 1 : -1"
77-
class="igx-combo__add-item" role="button" aria-label="Add Item" [index]="virtualScrollContainer.igxForOf.length">
69+
<igx-combo-add-item [itemHeight]='itemHeight' *ngIf="isAddButtonVisible()"
70+
[tabindex]="dropdown.collapsed ? -1 : customValueFlag ? 1 : -1" class="igx-combo__add-item" role="button"
71+
aria-label="Add Item" [index]="virtualScrollContainer.igxForOf.length">
7872
<ng-container *ngTemplateOutlet="addItemTemplate ? addItemTemplate : addItemDefault">
7973
</ng-container>
8074
</igx-combo-add-item>
8175
</div>
8276
<ng-container *ngTemplateOutlet="footerTemplate">
8377
</ng-container>
8478
</igx-combo-drop-down>
79+
<ng-template #complex let-display let-data="data" let-key="displayKey">
80+
{{display[key]}}
81+
</ng-template>
82+
<ng-template #primitive let-display>
83+
{{display}}
84+
</ng-template>
85+
<ng-template #empty>
86+
<span>The list is empty</span>
87+
</ng-template>
88+
<ng-template #addItemDefault let-control>
89+
<button igxButton="flat" igxRipple>Add item</button>
90+
</ng-template>
91+
<ng-template #headerItemBase let-item let-key="valueKey" let-groupKey="groupKey">
92+
{{ item[key] }}
93+
</ng-template>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import { IgxDropDownModule } from '../drop-down/index';
3030
import { IgxInputGroupModule, IgxInputGroupComponent } from '../input-group/input-group.component';
3131
import { IgxComboItemComponent } from './combo-item.component';
3232
import { IgxComboDropDownComponent } from './combo-dropdown.component';
33-
import { IgxComboFilterConditionPipe, IgxComboFilteringPipe, IgxComboGroupingPipe, IgxComboSortingPipe } from './combo.pipes';
33+
import { IgxComboFilteringPipe, IgxComboGroupingPipe, IgxComboSortingPipe } from './combo.pipes';
3434
import { OverlaySettings, AbsoluteScrollStrategy } from '../services';
3535
import { Subject } from 'rxjs';
3636
import { takeUntil } from 'rxjs/operators';
@@ -1617,7 +1617,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
16171617
* @hidden
16181618
*/
16191619
@NgModule({
1620-
declarations: [IgxComboComponent, IgxComboItemComponent, IgxComboFilterConditionPipe, IgxComboGroupingPipe,
1620+
declarations: [IgxComboComponent, IgxComboItemComponent, IgxComboGroupingPipe,
16211621
IgxComboFilteringPipe, IgxComboSortingPipe, IgxComboDropDownComponent, IgxComboAddItemComponent,
16221622
IgxComboItemDirective,
16231623
IgxComboEmptyDirective,
@@ -1637,6 +1637,6 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
16371637
IgxComboToggleIconDirective,
16381638
IgxComboClearIconDirective],
16391639
imports: [IgxRippleModule, CommonModule, IgxInputGroupModule, FormsModule, ReactiveFormsModule,
1640-
IgxForOfModule, IgxToggleModule, IgxCheckboxModule, IgxDropDownModule, IgxButtonModule, IgxIconModule],
1640+
IgxForOfModule, IgxToggleModule, IgxCheckboxModule, IgxDropDownModule, IgxButtonModule, IgxIconModule]
16411641
})
16421642
export class IgxComboModule { }

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

Lines changed: 4 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Inject, Pipe, PipeTransform } from '@angular/core';
1+
import { Pipe, PipeTransform, Inject } from '@angular/core';
22
import { cloneArray } from '../core/utils';
33
import { DataUtil } from '../data-operations/data-util';
44
import { FilteringLogic, IFilteringExpression } from '../data-operations/filtering-expression.interface';
@@ -16,15 +16,11 @@ import { IGX_COMBO_COMPONENT, IgxComboBase } from './combo.common';
1616
name: 'comboFiltering'
1717
})
1818
export class IgxComboFilteringPipe implements PipeTransform {
19-
20-
constructor(@Inject(IGX_COMBO_COMPONENT) public combo: IgxComboBase) { }
21-
2219
public transform(collection: any[], expressions: IFilteringExpression[],
2320
logic: FilteringLogic) {
2421
const filteringExpressionsTree = new FilteringExpressionsTree(logic);
2522
filteringExpressionsTree.filteringOperands = expressions;
2623
const state: IFilteringState = { expressionsTree: filteringExpressionsTree, strategy: new SimpleFilteringStrategy()};
27-
state.expressionsTree.filteringOperands = this.combo.filteringExpressions;
2824

2925
if (!state.expressionsTree.filteringOperands.length) {
3026
return collection;
@@ -52,8 +48,6 @@ export class SimpleFilteringStrategy extends FilteringStrategy {
5248
pure: true
5349
})
5450
export class IgxComboSortingPipe implements PipeTransform {
55-
constructor() { }
56-
5751
public transform(collection: any[], expressions: ISortingExpression []) {
5852
if (!expressions.length) {
5953
return collection;
@@ -73,7 +67,7 @@ export class IgxComboGroupingPipe implements PipeTransform {
7367

7468
constructor(@Inject(IGX_COMBO_COMPONENT) public combo: IgxComboBase) { }
7569

76-
public transform(collection: any[], groupKey: any) {
70+
public transform(collection: any[], groupKey: any, valueKey: any) {
7771
this.combo.filteredData = collection;
7872
if ((!groupKey && groupKey !== 0) || !collection.length) {
7973
return collection;
@@ -89,8 +83,8 @@ export class IgxComboGroupingPipe implements PipeTransform {
8983
}
9084
if (insertFlag) {
9185
data.splice(i + inserts, 0, {
92-
[this.combo.valueKey]: currentHeader,
93-
[this.combo.groupKey]: currentHeader,
86+
[valueKey]: currentHeader,
87+
[groupKey]: currentHeader,
9488
isHeader: true
9589
});
9690
inserts++;
@@ -99,18 +93,3 @@ export class IgxComboGroupingPipe implements PipeTransform {
9993
return data;
10094
}
10195
}
102-
103-
/**
104-
* @hidden
105-
*/
106-
@Pipe({
107-
name: 'filterCondition',
108-
pure: true
109-
})
110-
111-
export class IgxComboFilterConditionPipe implements PipeTransform {
112-
113-
public transform(value: string): string {
114-
return value.split(/(?=[A-Z])/).join(' ');
115-
}
116-
}

0 commit comments

Comments
 (0)