From fe9daccb5fd436a3ca527d4e694cc2e02e26f79d Mon Sep 17 00:00:00 2001 From: Ed Morales Date: Thu, 8 Jun 2017 13:26:10 -0700 Subject: [PATCH] feat(chips): leverage `td-chip` for all cases introducing `td-chip-avatar` (#672) * feat(chips): leverage td-chip for all cases introducing td-chip-avatar directive now we can use normal chip strings, template chips and contact chips by mixin and matching our templates and directives * fix(): unit tests * fix(): demo example * fix(): make sure td-chip-avatar is always the first item on the template --- .../components/chips/chips.component.html | 12 +++++++++--- src/platform/core/chips/README.md | 6 ++++-- src/platform/core/chips/chips.component.html | 8 ++++---- src/platform/core/chips/chips.component.scss | 15 +++++++++++++-- src/platform/core/chips/chips.component.spec.ts | 2 +- src/platform/core/chips/chips.component.ts | 6 +++--- src/platform/core/chips/chips.module.ts | 8 ++++---- 7 files changed, 38 insertions(+), 19 deletions(-) diff --git a/src/app/components/components/chips/chips.component.html b/src/app/components/components/chips/chips.component.html index a9b047f1df..4aac7c41b4 100644 --- a/src/app/components/components/chips/chips.component.html +++ b/src/app/components/components/chips/chips.component.html @@ -118,7 +118,7 @@ placeholder="Enter autocomplete strings" (inputChange)="filterObjects($event)" requireMatch> - + location_city {{chip.city}}, (Pop: {{chip.population}}) @@ -141,7 +141,7 @@ placeholder="Enter autocomplete strings" (inputChange)="filterObjects($event)" requireMatch> - + location_city { {chip.city} }, (Pop: { {chip.population} }) @@ -191,7 +191,7 @@ - Chips & async Autocomplete + Chips & async Autocomplete with template chip avatar Load autocomplete items asynchronous when typing in the input @@ -205,6 +205,9 @@ placeholder="Enter autocomplete strings" (inputChange)="filterAsync($event)" requireMatch> + +
{{chip.substring(0, 1).toUpperCase()}}
{{chip}} + @@ -221,6 +224,9 @@ placeholder="Enter autocomplete strings" (inputChange)="filterAsync($event)" requireMatch> + +
{ {chip.substring(0, 1).toUpperCase()} }
{ {chip} } + ]]> diff --git a/src/platform/core/chips/README.md b/src/platform/core/chips/README.md index 4a53ecf9b2..12206cde86 100644 --- a/src/platform/core/chips/README.md +++ b/src/platform/core/chips/README.md @@ -4,6 +4,8 @@ Add the [items] attribute to enable the autocomplete with a list, and [requireMatch] to not allow custom values. +Leverage the templates to create your own chip or contact chip. + ## API Summary Properties: @@ -55,8 +57,8 @@ Example for HTML usage: (inputChange)="inputChange($event)" requireMatch stacked> - - {{chip}} + +
A
{{chip}} {{option}} diff --git a/src/platform/core/chips/chips.component.html b/src/platform/core/chips/chips.component.html index 901f2af191..0491a87736 100644 --- a/src/platform/core/chips/chips.component.html +++ b/src/platform/core/chips/chips.component.html @@ -6,11 +6,11 @@ (keydown)="_chipKeydown($event, index)" (focus)="setFocusedState()">
-
- {{chip}} +
+ {{chip}}
diff --git a/src/platform/core/chips/chips.component.scss b/src/platform/core/chips/chips.component.scss index 1731442220..23242095ae 100644 --- a/src/platform/core/chips/chips.component.scss +++ b/src/platform/core/chips/chips.component.scss @@ -25,10 +25,21 @@ cursor: default; border-radius: 16px; @include rtl(margin, 8px 8px 0 0, 8px 0 0 8px); - .td-basic-chip { - min-height: 30px; + .td-chip { + min-height: 32px; font-size: 14px; @include rtl(padding, 0 0 0 12px, 0 12px 0 0); + [td-chip-avatar] { + display: flex; + order: -20; + justify-content: center; + align-items: center; + height: 32px; + width: 32px; + flex-shrink: 0; + @include rtl(margin, 0 8px 0 -12px, 0 -12px 0 8px); + border-radius: 50%; + } } box-sizing: border-box; max-width: 100%; diff --git a/src/platform/core/chips/chips.component.spec.ts b/src/platform/core/chips/chips.component.spec.ts index 9a93681809..ca6be6759d 100644 --- a/src/platform/core/chips/chips.component.spec.ts +++ b/src/platform/core/chips/chips.component.spec.ts @@ -744,7 +744,7 @@ class TdChipsBasicTestComponent { @Component({ template: ` - + {{chip.name}} diff --git a/src/platform/core/chips/chips.component.ts b/src/platform/core/chips/chips.component.ts index f4ee383fb0..20694e9390 100644 --- a/src/platform/core/chips/chips.component.ts +++ b/src/platform/core/chips/chips.component.ts @@ -19,9 +19,9 @@ const noop: any = () => { }; @Directive({ - selector: '[td-basic-chip]ng-template', + selector: '[td-chip]ng-template', }) -export class TdBasicChipDirective extends TemplatePortalDirective { +export class TdChipDirective extends TemplatePortalDirective { constructor(templateRef: TemplateRef, viewContainerRef: ViewContainerRef) { super(templateRef, viewContainerRef); } @@ -76,7 +76,7 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit, @ViewChild(MdAutocompleteTrigger) _autocompleteTrigger: MdAutocompleteTrigger; @ViewChildren(MdChip) _chipsChildren: QueryList; - @ContentChild(TdBasicChipDirective) _basicChipTemplate: TdBasicChipDirective; + @ContentChild(TdChipDirective) _chipTemplate: TdChipDirective; @ContentChild(TdAutocompleteOptionDirective) _autocompleteOptionTemplate: TdAutocompleteOptionDirective; @ViewChildren(MdOption) _options: QueryList; diff --git a/src/platform/core/chips/chips.module.ts b/src/platform/core/chips/chips.module.ts index 5dad8aa629..c22cf37545 100644 --- a/src/platform/core/chips/chips.module.ts +++ b/src/platform/core/chips/chips.module.ts @@ -5,8 +5,8 @@ import { CommonModule } from '@angular/common'; import { MdInputModule, MdIconModule, MdAutocompleteModule, MdChipsModule } from '@angular/material'; -import { TdChipsComponent, TdBasicChipDirective, TdAutocompleteOptionDirective } from './chips.component'; -export { TdChipsComponent, TdBasicChipDirective, TdAutocompleteOptionDirective } from './chips.component'; +import { TdChipsComponent, TdChipDirective, TdAutocompleteOptionDirective } from './chips.component'; +export { TdChipsComponent, TdChipDirective, TdAutocompleteOptionDirective } from './chips.component'; @NgModule({ imports: [ @@ -19,12 +19,12 @@ export { TdChipsComponent, TdBasicChipDirective, TdAutocompleteOptionDirective } ], declarations: [ TdChipsComponent, - TdBasicChipDirective, + TdChipDirective, TdAutocompleteOptionDirective, ], exports: [ TdChipsComponent, - TdBasicChipDirective, + TdChipDirective, TdAutocompleteOptionDirective, ], })