Skip to content

Commit 3d1cdd4

Browse files
LipataLipata
committed
refactor(igx-combo): API renames, snippet fixes #1260 
1 parent 6d6dfa4 commit 3d1cdd4

File tree

8 files changed

+223
-288
lines changed

8 files changed

+223
-288
lines changed

‎projects/igniteui-angular/src/lib/combo/README.md

Lines changed: 45 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -11,60 +11,59 @@ Drop Down items are virtualized, which guarantees smooth work, even combo is bou
1111
A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/combo.html)
1212

1313
# Usage
14-
15-
1614
Basic usage of `igx-combo`
1715

1816
```html
19-
<igx-combo [data]="items" [valueKey]="'field'" [groupKey]="'region'" placeholder="Location(s)">
20-
<ng-template #dropdownItemTemplate let-display let-key="valueKey">
21-
<div class="item">
22-
<span class="state">State: {{ display[key] }}</span>
23-
<span class="region">Region: {{ display.region }}</span>
24-
</div>
25-
</ng-template>
17+
<igx-combo [data]="items" [valueKey]="'field'" [groupKey]="'region'"
18+
[allowCustomValues]="customValues" (onAddition)="handleAddition($event)"
19+
placeholder="Location(s)" searchPlaceholder="Search...">
2620
</igx-combo>
2721
```
2822

2923
## API
3024

31-
# API Summary
32-
| Name | Description | Type |
33-
|-----------------|---------------------------------------------------|-----------------------------|
34-
| `data` | combo data source | any |
35-
| `value` | combo value | string |
36-
| `allowCustomValue` | enable/disables combo custom value | boolean |
37-
| `valueKey` | combo value data source property | string |
38-
| `displayKey` | combo text data source property | string |
39-
| `groupKey` | combo item group | string |
40-
| `width ` | defines combo width | string |
41-
| `heigth` | defines combo height | string |
42-
| `dropDownHeight ` | defines drop down height | string |
43-
| `dropDownWidth ` | defines drop down width | string |
44-
| `dropDownItemHeight ` | defines drop down item height | string |
45-
| `placeholder ` | defines the "empty value" text | string |
46-
| `collapsed` | gets drop down state | boolean |
25+
### Inputs
4726

48-
### Methods
27+
| Name | Description | Type |
28+
|--------------------------|---------------------------------------------------|-----------------------------|
29+
| `data` | combo data source | any |
30+
| `value` | combo value | string |
31+
| `allowCustomValue` | enable/disables combo custom value | boolean |
32+
| `valueKey` | combo value data source property | string |
33+
| `displayKey` | combo dispaly data source property | string |
34+
| `groupKey` | combo item group | string |
35+
| `width ` | defines combo width | string |
36+
| `heigth` | defines combo height | string |
37+
| `itemsMaxHeight ` | defines drop down height | string |
38+
| `itemsMaxWidth ` | defines drop down width | string |
39+
| `itemHeight ` | defines drop down item height | string |
40+
| `placeholder ` | defines the "empty value" text | string |
41+
| `searchPlaceholder ` | defines the placeholder text for search input | string |
42+
| `collapsed` | gets drop down state | boolean |
43+
| `disabled` | defines whether the control is active or not | boolean |
44+
| `ariaLabelledBy` | defines label ID related to combo | boolean |
4945

50-
| Name | Description | Return type | Parameters |
51-
|----------|----------------------------|---------------------------------------------------|----------------------|
52-
| `open` | Opens drop down | -- | -- |
53-
| `close` | Closes drop down | -- | -- |
54-
| `toggle` | Toggles drop down | -- | -- |
55-
| `selectedItems` | Get current selection state | `Array<any>`- array with selected items' ID (itemData) | -- |
56-
| `selectItems` | Select defined items | |`Array<any>`, clearCurrentSelection: `boolean` |
57-
| `deselectItems` | Deselect defined items | -- | `Array<any>` |
58-
| `selectAllItems` | Select all items | -- | -- |
59-
| `deselectAllItems` | Deselect all items | -- | -- |
46+
### Outputs
47+
48+
| Name | Description | Cancelable | Parameters |
49+
|------------------ |-------------------------------------------------------------------------|------------- |-----------------------------------------|
50+
| `onSelectionChange` | Emitted when item selection is changing, before the selection completes | true | { oldSelection: `Array<any>`, newSelection: `Array<any>`, event: Event } |
51+
| `onSearchInput` | Emitted when an the search input's input event is triggered | false | { searchValue: `string` } |
52+
| `onAddition` | Emitted when an item is being added to the data collection | false | { oldCollection: `Array<any>`, addedItem: `<any>`, newCollection: `Array<any>` }|
53+
| `dropDownOpening` | Emitted before the dropdown is opened | false | { event: Event } |
54+
| `dropDownOpened` | Emitted after the dropdown is opened | false | { event: Event } |
55+
| `dropDownClosing` | Emitted before the dropdown is closed | false | { event: Event } |
56+
| `dropDownClosed` | Emitted after the dropdown is closed | false | { event: Event } |
57+
58+
### Methods
6059

61-
### Events
62-
|Name|Description|Cancelable|Parameters|
63-
|--|--|--|--|
64-
| `onSelectionChange` | -- | -- | { oldSelection: `Array<any>`, newSelection: `Array<any>`, event: Event }|
65-
| `onSearchInput` | -- | -- | { oldValue: `any`, newValue: `any`, event: Event }|
66-
| `dropDownOpening` | -- | -- | { event: Event }|
67-
| `dropDownOpened` | -- | -- | { event: Event }|
68-
| `dropDownClosing` | -- | -- | { event: Event }|
69-
| `dropDownClosed` | -- | -- | { event: Event }|
70-
| `onAddition` | -- | -- | { oldCollection: `Array<any>`, addedItem: `<any>`, newCollection: `Array<any>` }|
60+
| Name | Description | Return type | Parameters |
61+
|----------------- |-----------------------------|----------------------|-----------------------------|
62+
| `open` | Opens drop down | `void` | `None` |
63+
| `close` | Closes drop down | `void` | `None` |
64+
| `toggle` | Toggles drop down | `void` | `None` |
65+
| `selectedItems` | Get current selection state | `Array<any>` | `None` |
66+
| `selectItems` | Select defined items | `void` | items: `Array<any>`, clearCurrentSelection: `boolean` |
67+
| `deselectItems` | Deselect defined items | `void` | items: `Array<any>` |
68+
| `selectAllItems` | Select all (filtered) items | `void` | ignoreFilter?: `boolean` - if `true` selects **all** values |
69+
| `deselectAllItems` | Deselect (filtered) all items | `void` | ignoreFilter?: `boolean` - if `true` deselects **all** values |

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,9 @@ export class IgxComboDropDownComponent extends IgxDropDownBase {
110110
}
111111
}
112112

113+
/**
114+
* @hidden
115+
*/
113116
navigateFirst() {
114117
const vContainer = this.verticalScrollContainer;
115118
vContainer.scrollTo(0);
@@ -118,6 +121,9 @@ export class IgxComboDropDownComponent extends IgxDropDownBase {
118121
});
119122
}
120123

124+
/**
125+
* @hidden
126+
*/
121127
navigateLast() {
122128
const vContainer = this.verticalScrollContainer;
123129
vContainer.scrollTo(vContainer.igxForOf.length - 1);
@@ -126,6 +132,9 @@ export class IgxComboDropDownComponent extends IgxDropDownBase {
126132
});
127133
}
128134

135+
/**
136+
* @hidden
137+
*/
129138
setSelectedItem(itemID: any, select = true) {
130139
this.parentElement.setSelectedItem(itemID, select);
131140
}
@@ -142,6 +151,9 @@ export class IgxComboDropDownComponent extends IgxDropDownBase {
142151
}
143152
}
144153

154+
/**
155+
* @hidden
156+
*/
145157
navigateItem(newIndex: number, direction?: number) {
146158
// Virtual scrolling holds one hidden loaded element at the bottom of the drop down list.
147159
// At the top there isn't such a hidden element.
@@ -258,6 +270,9 @@ export class IgxComboDropDownComponent extends IgxDropDownBase {
258270
this._focusedItem = newItem;
259271
}
260272

273+
/**
274+
* @hidden
275+
*/
261276
onToggleOpening() {
262277
this.parentElement.handleInputChange();
263278
this.onOpening.emit();

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export class IgxComboItemComponent extends IgxDropDownItemBase {
2222

2323
@HostBinding('style.height.px')
2424
get itemHeight() {
25-
return this.parentElement.parentElement.dropDownItemHeight;
25+
return this.parentElement.parentElement.itemHeight;
2626
}
2727

2828
@Input()

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

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,8 @@
88
<span>The list is empty</span>
99
</ng-template>
1010
<ng-template #addItemDefault let-control>
11-
1211
Add item to collection
1312
<igx-icon fontSet="material" name="add_box" (click)="control.addItemToCollection()"></igx-icon>
14-
1513
</ng-template>
1614
<ng-template #headerItemBase let-item let-key="valueKey" let-groupKey="groupKey">
1715
{{ item[key] }}
@@ -38,22 +36,22 @@
3836
(keyup)="handleKeyDown($event)" (focus)="dropdown.onBlur($event)" [placeholder]="searchPlaceholder" aria-autocomplete="both"
3937
[attr.aria-owns]="dropdown.id" [attr.aria-labelledby]="ariaLabelledBy" />
4038
</igx-input-group>
41-
<ng-container *ngTemplateOutlet="dropdownHeader; context: {$impicit: this}">
39+
<ng-container *ngTemplateOutlet="dropdownHeaderTemplate; context: {$impicit: this}">
4240
</ng-container>
43-
<div #dropdownItemContainer class="igx-combo__content" [style.width.px]="dropDownWidth" [style.overflow]="'hidden'" [style.maxHeight.px]="dropDownHeight"
41+
<div #dropdownItemContainer class="igx-combo__content" [style.width.px]="itemsMaxWidth" [style.overflow]="'hidden'" [style.maxHeight.px]="itemsMaxHeight"
4442
[igxDropDownItemNavigation]="dropdown" [tabindex]="dropdown.collapsed ? -1 : 0" role="listbox" [attr.id]="dropdown.id">
4543
<ng-template igxFor let-item [igxForOf]="data | comboFiltering:filteringExpressions:filteringLogic | comboSorting:sortingExpressions | comboGrouping:groupKey"
46-
[igxForScrollOrientation]="'vertical'" [igxForContainerSize]="dropDownHeight"
47-
[igxForItemSize]="dropDownItemHeight" #virtualScrollContainer>
44+
[igxForScrollOrientation]="'vertical'" [igxForContainerSize]="itemsMaxHeight"
45+
[igxForItemSize]="itemHeight" #virtualScrollContainer>
4846
<igx-combo-item [itemData]="item" isHeader={{item.isHeader}} role="option">
4947
<ng-container *ngIf="!item.isHeader">
5048
<igx-checkbox [checked]="isItemSelected(item)" disableRipple="true" disabled="true"></igx-checkbox>
5149
</ng-container>
5250
<ng-container *ngIf="item.isHeader">
53-
<ng-container *ngTemplateOutlet="headerItemTemplate ? headerItemTemplate : headerItemBase; context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, textKey: textKey}"></ng-container>
51+
<ng-container *ngTemplateOutlet="headerItemTemplate ? headerItemTemplate : headerItemBase; context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}"></ng-container>
5452
</ng-container>
5553
<ng-container *ngIf="!item.isHeader">
56-
<ng-container #listItem *ngTemplateOutlet="template; context: {$implicit: item, data: data, valueKey: valueKey, textKey: textKey};"></ng-container>
54+
<ng-container #listItem *ngTemplateOutlet="template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};"></ng-container>
5755
</ng-container>
5856
</igx-combo-item>
5957
</ng-template>
@@ -68,7 +66,7 @@
6866
<ng-container *ngTemplateOutlet="addItemTemplate ? addItemTemplate : addItemDefault; context: {$impicit: this}">
6967
</ng-container>
7068
</igx-combo-item>
71-
<ng-container *ngTemplateOutlet="dropdownFooter; context: {$impicit: this}">
69+
<ng-container *ngTemplateOutlet="dropdownFooterTemplate; context: {$impicit: this}">
7270
</ng-container>
7371
</igx-combo-drop-down>
7472
</div>

0 commit comments

Comments
 (0)