feat(chips): ability to disable chip addition (input). (closes #500) (#…

…547) * added chips * added autocomplete boolean for chips component * added autocomplete boolean for chips component * added comment description * added toogle autocomplete method for documentation and testing. * removed white spaces * removed blank lines * changed autoComplete to allowAdd to disable chips autocomplete * changed comment from autoComplte to allowAdd * removed blank space * changed autocomplete click event from inlut.value to item, added check to inputChild focus * added ngIf to .mat-input-underline * changed allowAdd to chipAddition
Teradata · May 5, 2017 · 1c75d35 · 1c75d35
1 parent 459dcb3
commit 1c75d35
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 24 deletions.
diff --git a/src/app/components/components/chips/chips.component.html b/src/app/components/components/chips/chips.component.html
@@ -7,7 +7,7 @@
       <ng-template md-tab-label>Demo</ng-template>
       <div class="push">
         <div class="md-body-1">Type and select a preset option:</div>
-        <td-chips [items]="items" [(ngModel)]="itemsRequireMatch" placeholder="Enter autocomplete strings" [readOnly]="readOnly" requireMatch></td-chips>
+        <td-chips [chipAddition]="chipAddition" [items]="items" [(ngModel)]="itemsRequireMatch" placeholder="Enter autocomplete strings" [readOnly]="readOnly" requireMatch></td-chips>
       </div>
     </md-tab>
     <md-tab>
@@ -16,7 +16,7 @@
         <p>HTML:</p>
         <td-highlight lang="html">
           <![CDATA[
-            <td-chips [items]="items" [(ngModel)]="itemsRequireMatch" placeholder="Enter autocomplete strings" [readOnly]="readOnly" requireMatch></td-chips>
+            <td-chips [items]="items" [chipAddition]="chipAddition" [(ngModel)]="itemsRequireMatch" placeholder="Enter autocomplete strings" [readOnly]="readOnly" requireMatch></td-chips>
           ]]>
         </td-highlight>
         <p>Typescript:</p>
@@ -53,6 +53,7 @@
   <md-divider></md-divider>
   <md-card-actions>
     <button md-button color="primary" (click)="toggleReadOnly()" class="text-upper">Toggle ReadOnly</button>
+    <button md-button color="primary" (click)="toggleChipAddition()" class="text-upper">Toggle Chip Addition</button>
   </md-card-actions>
 </md-card>
 <md-card>
@@ -160,7 +161,7 @@ <h3>Example:</h3>
     <p>HTML:</p>
     <td-highlight lang="html">
       <![CDATA[
-        <td-chips placeholder="Enter string" [items]="items" [(ngModel)]="model" [readOnly]="readOnly" (add)="add($event)" (remove)="remove($event)" requireMatch>
+        <td-chips placeholder="Enter string" [items]="items" [(ngModel)]="model" [readOnly]="readOnly" [chipAddition]="chipAddition" (add)="add($event)" (remove)="remove($event)" requireMatch>
         </td-chips>        
       ]]>
     </td-highlight>

diff --git a/src/app/components/components/chips/chips.component.ts b/src/app/components/components/chips/chips.component.ts
@@ -40,9 +40,14 @@ export class ChipsDemoComponent {
                   Sends chip value as event.`,
     name: 'remove?',
     type: 'function',
+  },  {
+    description: `Disables the ability to add chips. If it doesn't exist chipAddition defaults to true.`,
+    name: 'chipAddition?',
+    type: 'boolean',
   }];
 
   readOnly: boolean = false;
+  chipAddition: boolean = true;
 
   items: string[] = [
     'stepper',
@@ -63,5 +68,8 @@ export class ChipsDemoComponent {
   toggleReadOnly(): void {
     this.readOnly = !this.readOnly;
   }
+  toggleChipAddition(): void {
+    this.chipAddition = !this.chipAddition;
+  }
 
 }
diff --git a/src/platform/core/chips/chips.component.html b/src/platform/core/chips/chips.component.html
@@ -9,27 +9,29 @@
         </md-icon>
       </md-basic-chip>
     </ng-template>
-    <md-input-container floatPlaceholder="never"
-                        [style.width.px]="readOnly ? 0 : null"
-                        [color]="matches ? 'primary' : 'warn'">
-      <input mdInput
-              flex="100" 
-              #input
-              [mdAutocomplete]="autocomplete"
-              [formControl]="inputControl"
-              [placeholder]="readOnly? '' : placeholder"
-              (keydown)="_inputKeydown($event)"
-              (keyup.enter)="addChip(input.value)"
-              (focus)="handleFocus()"
-              (blur)="handleBlur()">
-    </md-input-container>
+    <div *ngIf="chipAddition">
+      <md-input-container floatPlaceholder="never"
+                          [style.width.px]="readOnly ? 0 : null"
+                          [color]="matches ? 'primary' : 'warn'">
+        <input mdInput
+                flex="100" 
+                #input
+                [mdAutocomplete]="autocomplete"
+                [formControl]="inputControl"
+                [placeholder]="readOnly? '' : placeholder"
+                (keydown)="_inputKeydown($event)"
+                (keyup.enter)="addChip(input.value)"
+                (focus)="handleFocus()"
+                (blur)="handleBlur()">
+      </md-input-container>
+    </div>
     <md-autocomplete #autocomplete="mdAutocomplete">
       <ng-template let-item ngFor [ngForOf]="filteredItems | async">
-        <md-option (click)="addChip(input.value)" [value]="item">{{item}}</md-option>
+        <md-option (click)="addChip(item)" [value]="item">{{item}}</md-option>
       </ng-template>
     </md-autocomplete>
   </md-chip-list>
-  <div class="mat-input-underline"
+  <div *ngIf="chipAddition" class="mat-input-underline"
        [class.mat-disabled]="readOnly">
     <span class="mat-input-ripple"
           [class.mat-focused]="focused"

diff --git a/src/platform/core/chips/chips.component.ts b/src/platform/core/chips/chips.component.ts
@@ -65,7 +65,7 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit {
    * Enables Autocompletion with the provided list of strings.
    */
   @Input('items') items: string[] = [];
-
+  
   /**
    * requireMatch?: boolean
    * Validates input against the provided list before adding it to the model.
@@ -96,6 +96,12 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit {
     return this._readOnly;
   }
 
+  /**
+   * chipAddition?: boolean
+   * Disables the ability to add chips. If it doesn't exist chip addition defaults to true.
+   */
+  @Input('chipAddition') chipAddition: boolean = true;
+
   /**
    * placeholder?: string
    * Placeholder for the autocomplete input.
@@ -215,7 +221,9 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit {
    * Programmatically focus the input. Since its the component entry point
    */
   focus(): void {
-    this._inputChild.focus();
+    if (this.chipAddition) {
+      this._inputChild.focus();
+    }
   }
 
   /**
@@ -227,6 +235,7 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit {
       case DELETE:
       case BACKSPACE:
         /** Check to see if input is empty when pressing left arrow to move to the last chip */
+
         if (!this._inputChild.value) {
           this._focusLastChip();
           event.preventDefault();
@@ -257,7 +266,7 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit {
            * Checks if deleting last single chip, to focus input afterwards
            * Else check if its not the last chip of the list to focus the next one.
            */
-          if (index === (this._totalChips - 1) && index === 0) {
+          if (index === (this._totalChips - 1) && index === 0 && this.chipAddition) {
             this.focus();
           } else if (index < (this._totalChips - 1)) {
             this._focusChip(index + 1);
@@ -267,20 +276,22 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit {
         break;
       case LEFT_ARROW:
         /** Check to see if left arrow was pressed while focusing the first chip to focus input next */
-        if (index === 0) {
+        if (index === 0 && this.chipAddition) {
           this.focus();
           event.stopPropagation();
         }
         break;
       case RIGHT_ARROW:
         /** Check to see if right arrow was pressed while focusing the last chip to focus input next */
-        if (index === (this._totalChips - 1)) {
+        if (index === (this._totalChips - 1) && this.chipAddition) {
           this.focus();
           event.stopPropagation();
         }
         break;
       case ESCAPE:
+        if (this.chipAddition) {
         this.focus();
+        }
         break;
       default:
         // default