feat(chips): leverage td-chip for all cases introducing `td-chip-av…

…atar` (#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
Teradata · Jun 8, 2017 · fe9dacc · fe9dacc
1 parent 3f86bce
commit fe9dacc
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 19 deletions.
diff --git 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>
-          <ng-template td-basic-chip let-chip="chip">
+          <ng-template td-chip let-chip="chip">
             <md-icon>location_city</md-icon> {{chip.city}}, (Pop: {{chip.population}})
           </ng-template>
           <ng-template td-autocomplete-option let-option="option">
@@ -141,7 +141,7 @@
                       placeholder="Enter autocomplete strings"
                       (inputChange)="filterObjects($event)"
                       requireMatch>
-              <ng-template td-basic-chip let-chip="chip">
+              <ng-template td-chip let-chip="chip">
                 <md-icon>location_city</md-icon> { {chip.city} }, (Pop: { {chip.population} })
               </ng-template>
               <ng-template td-autocomplete-option let-option="option">
@@ -191,7 +191,7 @@
   </md-tab-group>
 </md-card>
 <md-card>
-  <md-card-title>Chips &amp; async Autocomplete</md-card-title>
+  <md-card-title>Chips &amp; async Autocomplete with template chip avatar</md-card-title>
   <md-card-subtitle>Load autocomplete items asynchronous when typing in the input</md-card-subtitle>
   <md-divider></md-divider>
   <md-tab-group md-stretch-tabs dynamicHeight>
@@ -205,6 +205,9 @@
                   placeholder="Enter autocomplete strings"
                   (inputChange)="filterAsync($event)"
                   requireMatch>
+          <ng-template td-chip let-chip="chip">
+            <div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.substring(0, 1).toUpperCase()}}</div> {{chip}}
+          </ng-template>
           <md-progress-bar [style.height.px]="2" *ngIf="filteringAsync" mode="indeterminate"></md-progress-bar>
         </td-chips>
       </div>
@@ -221,6 +224,9 @@
                       placeholder="Enter autocomplete strings"
                       (inputChange)="filterAsync($event)"
                       requireMatch>
+              <ng-template td-chip let-chip="chip">
+                <div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{ {chip.substring(0, 1).toUpperCase()} }</div> { {chip} }
+              </ng-template>
               <md-progress-bar [style.height.px]="2" *ngIf="filteringAsync" mode="indeterminate"></md-progress-bar>
             </td-chips>
           ]]>

diff --git 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>
-  <ng-template td-basic-chip let-chip="chip">
-    {{chip}}
+  <ng-template td-chip let-chip="chip">
+    <div td-chip-avatar>A</div> {{chip}}
   </ng-template>
   <ng-template td-autocomplete-option let-option="option">
     {{option}}

diff --git 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()">
       <div layout="row" layout-align="start center" flex>
-        <div class="td-basic-chip" layout="row" layout-align="start center" flex>
-          <span *ngIf="!_basicChipTemplate?.templateRef">{{chip}}</span>
+        <div class="td-chip" layout="row" layout-align="start center" flex>
+          <span *ngIf="!_chipTemplate?.templateRef">{{chip}}</span>
           <ng-template
-            *ngIf="_basicChipTemplate?.templateRef"
-            [ngTemplateOutlet]="_basicChipTemplate?.templateRef"
+            *ngIf="_chipTemplate?.templateRef"
+            [ngTemplateOutlet]="_chipTemplate?.templateRef"
             [ngOutletContext]="{ chip: chip }">
           </ng-template>
         </div>

diff --git 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
@@ -744,7 +744,7 @@ class TdChipsBasicTestComponent {
 @Component({
   template: `
       <td-chips [items]="objects" [(ngModel)]="selectedObjects" requireMatch>
-        <ng-template td-basic-chip let-chip="chip">
+        <ng-template td-chip let-chip="chip">
           {{chip.name}}
         </ng-template>
         <ng-template td-autocomplete-option let-option="option">

diff --git 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<any>, viewContainerRef: ViewContainerRef) {
     super(templateRef, viewContainerRef);
   }
@@ -76,7 +76,7 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit,
   @ViewChild(MdAutocompleteTrigger) _autocompleteTrigger: MdAutocompleteTrigger;
   @ViewChildren(MdChip) _chipsChildren: QueryList<MdChip>;
 
-  @ContentChild(TdBasicChipDirective) _basicChipTemplate: TdBasicChipDirective;
+  @ContentChild(TdChipDirective) _chipTemplate: TdChipDirective;
   @ContentChild(TdAutocompleteOptionDirective) _autocompleteOptionTemplate: TdAutocompleteOptionDirective;
 
   @ViewChildren(MdOption) _options: QueryList<MdOption>;

diff --git 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,
   ],
 })