diff --git a/src/app/components/components/chips/chips.component.html b/src/app/components/components/chips/chips.component.html index 08bcb88163..a9b047f1df 100644 --- a/src/app/components/components/chips/chips.component.html +++ b/src/app/components/components/chips/chips.component.html @@ -200,10 +200,10 @@
Type and see how it will load items async:
@@ -216,10 +216,10 @@ @@ -253,6 +253,7 @@ this.filteredAsync = undefined; if (value) { this.filteringAsync = true; + // Timeout isn't actually needed here, only added for demo to simulate async behavior setTimeout(() => { this.filteredAsync = this.strings.filter((item: any) => { return item.toLowerCase().indexOf(value.toLowerCase()) > -1; diff --git a/src/app/components/components/chips/chips.component.ts b/src/app/components/components/chips/chips.component.ts index 4dc3a25f10..fe9da73ea2 100644 --- a/src/app/components/components/chips/chips.component.ts +++ b/src/app/components/components/chips/chips.component.ts @@ -90,6 +90,7 @@ export class ChipsDemoComponent implements OnInit { this.filteredAsync = undefined; if (value) { this.filteringAsync = true; + // Timeout isn't actually needed here, only added for demo to simulate async behavior setTimeout(() => { this.filteredAsync = this.strings.filter((item: any) => { return item.toLowerCase().indexOf(value.toLowerCase()) > -1; diff --git a/src/platform/core/chips/README.md b/src/platform/core/chips/README.md index 1820bde75b..4a53ecf9b2 100644 --- a/src/platform/core/chips/README.md +++ b/src/platform/core/chips/README.md @@ -16,7 +16,7 @@ Properties: | `stacked?` | `boolean` | Set stacked or horizontal chips depending on value. Defaults to false. | `placeholder?` | `string` | Placeholder for the autocomplete input. | `chipAddition` | `boolean` | Disables the ability to add chips. When setting readOnly as true, this will be overriden. Defaults to true. -| `chipRemoval` | `boolean` | Disables the ability to remove chips. If it doesn't exist chipRemoval defaults to true. readyOnly must be false for this option to work. +| `chipRemoval` | `boolean` | Disables the ability to remove chips. When setting readOnly as true, this will be overriden. Defaults to true. | `debounce` | `string` | Debounce timeout between keypresses. Defaults to 200. | `add?` | `function` | Method to be executed when a chip is added. Sends chip value as event. | `remove?` | `function` | Method to be executed when a chip is removed. Sends chip value as event. diff --git a/src/platform/core/chips/chips.component.html b/src/platform/core/chips/chips.component.html index 2a6b3ac7d9..901f2af191 100644 --- a/src/platform/core/chips/chips.component.html +++ b/src/platform/core/chips/chips.component.html @@ -1,6 +1,7 @@
- @@ -13,7 +14,7 @@ [ngOutletContext]="{ chip: chip }">
- + cancel
diff --git a/src/platform/core/chips/chips.component.scss b/src/platform/core/chips/chips.component.scss index 6e1234b7a1..1731442220 100644 --- a/src/platform/core/chips/chips.component.scss +++ b/src/platform/core/chips/chips.component.scss @@ -33,7 +33,7 @@ box-sizing: border-box; max-width: 100%; position: relative; - &.td-chip-disabled { + &.td-chip-after-pad { @include rtl(padding, 0 12px 0 0, 0 0 0 12px); } md-icon.td-chip-removal { diff --git a/src/platform/core/chips/chips.component.ts b/src/platform/core/chips/chips.component.ts index 272a434788..f4ee383fb0 100644 --- a/src/platform/core/chips/chips.component.ts +++ b/src/platform/core/chips/chips.component.ts @@ -180,6 +180,14 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit, return this._chipRemoval; } + /** + * Checks if not in readOnly state and if chipRemoval is set to 'true' + * States if a chip can be removed + */ + get canRemoveChip(): boolean { + return this.chipRemoval && !this.readOnly; + } + /** * placeholder?: string * Placeholder for the autocomplete input. @@ -391,11 +399,11 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit, */ addChip(value: any): boolean { /** - * add a 200 ms delay when reopening the autocomplete to give it time + * add a debounce ms delay when reopening the autocomplete to give it time * to rerender the next list and at the correct spot */ this._closeAutocomplete(); - Observable.timer(200).toPromise().then(() => { + Observable.timer(this.debounce).toPromise().then(() => { this.setFocusedState(); this._setFirstOptionActive(); this._openAutocomplete(); @@ -532,15 +540,9 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit, switch (event.keyCode) { case DELETE: case BACKSPACE: - /** Check to see if not in [readOnly] state to delete a chip */ - if (!this.readOnly) { - /** - * Checks [chipRemoval] state to delete a chips - * To enable [chipRemoval] the [readOnly] state must be true. - */ - if (this.chipRemoval) { - this.removeChip(index); - } + /** Check to see if we can delete a chip */ + if (this.canRemoveChip) { + this.removeChip(index); } break; case UP_ARROW: