From eb38257de2baffb5993ccbe68a9d300bfffbe2bb Mon Sep 17 00:00:00 2001
From: richa <richa.vyas@teradata.com>
Date: Tue, 28 Feb 2017 14:28:29 -0800
Subject: [PATCH 1/4] demo/code added for docs

---
 .../components/chips/chips.component.html     | 46 +++++++++++++++++--
 1 file changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/app/components/components/chips/chips.component.html b/src/app/components/components/chips/chips.component.html
index ab63817584..11bd6c2bcc 100644
--- a/src/app/components/components/chips/chips.component.html
+++ b/src/app/components/components/chips/chips.component.html
@@ -4,11 +4,47 @@
   <md-divider></md-divider>
   <md-card-content>
     <p>Basic Demo</p>
-    <td-chips placeholder="Enter any string" [readOnly]="readOnly"></td-chips>
-    <p>Autocomplete Demo</p>
-    <td-chips [items]="items" placeholder="Enter any string" [readOnly]="readOnly"></td-chips>
-    <p>Autocomplete and requireMatch Demo</p>
-    <td-chips [items]="items" [(ngModel)]="itemsRequireMatch" placeholder="Enter autocomplete strings" [readOnly]="readOnly" requireMatch></td-chips>      
+    <md-tab-group md-stretch-tabs>
+      <md-tab>
+        <template md-tab-label>Demo</template>
+        <td-chips placeholder="Enter any string" [readOnly]="readOnly"></td-chips>
+        <p>Autocomplete Demo</p>
+        <td-chips [items]="items" placeholder="Enter any string" [readOnly]="readOnly"></td-chips>
+        <p>Autocomplete and requireMatch Demo</p>
+        <td-chips [items]="items" [(ngModel)]="itemsRequireMatch" placeholder="Enter autocomplete strings" [readOnly]="readOnly" requireMatch></td-chips>
+      </md-tab>
+      <md-tab>
+        <template md-tab-label>Code</template>
+        <p>HTML:</p>
+        <td-highlight lang="html">
+          <![CDATA[
+            <td-chips placeholder="Enter any string" [readOnly]="readOnly"></td-chips>
+            <p>Autocomplete Demo</p>
+            <td-chips [items]="items" placeholder="Enter any string" [readOnly]="readOnly"></td-chips>
+            <p>Autocomplete and requireMatch Demo</p>
+            <td-chips [items]="items" [(ngModel)]="itemsRequireMatch" placeholder="Enter autocomplete strings" [readOnly]="readOnly" requireMatch></td-chips>
+          ]]>
+        </td-highlight>
+        <p>Typescript:</p>
+        <td-highlight lang="typescript">
+          <![CDATA[
+            export class ChipsDemoComponent {
+              readOnly: boolean = false;
+
+              itemsRequireMatch: string[] = this.items.slice(0, 6);
+
+              itemsReadOnly: string[] = this.items.slice(2, 8);
+
+              itemsForms: string[] = this.items.slice(6, 11);
+
+              toggleReadOnly(): void {
+                this.readOnly = !this.readOnly;
+              }
+            }
+          ]]>
+        </td-highlight>
+      </md-tab>
+    </md-tab-group>
   </md-card-content>
   <md-divider></md-divider>
   <md-card-actions>

From e891d96f112b89a87502f8ea22735cbeb099a62e Mon Sep 17 00:00:00 2001
From: richa <richa.vyas@teradata.com>
Date: Wed, 1 Mar 2017 10:19:35 -0800
Subject: [PATCH 2/4] removed unused vars & modified html

---
 .../components/chips/chips.component.html     | 74 +++++++++++++++----
 .../components/chips/chips.component.ts       |  4 -
 2 files changed, 61 insertions(+), 17 deletions(-)

diff --git a/src/app/components/components/chips/chips.component.html b/src/app/components/components/chips/chips.component.html
index 11bd6c2bcc..fb7be98458 100644
--- a/src/app/components/components/chips/chips.component.html
+++ b/src/app/components/components/chips/chips.component.html
@@ -3,14 +3,70 @@
   <md-card-subtitle>Small blocks for multiple items</md-card-subtitle>
   <md-divider></md-divider>
   <md-card-content>
-    <p>Basic Demo</p>
+    <h3 class="md-title">Basic Demo</h3>
+    <md-tab-group md-stretch-tabs>
+      <md-tab>
+        <template md-tab-label>Demo</template>
+        <td-chips placeholder="Enter any string"></td-chips>
+      </md-tab>
+      <md-tab>
+        <template md-tab-label>Code</template>
+        <p>HTML:</p>
+        <td-highlight lang="html">
+          <![CDATA[
+            <td-chips placeholder="Enter any string"></td-chips>
+          ]]>
+        </td-highlight>
+        <p>Typescript:</p>
+        <td-highlight lang="typescript">
+          <![CDATA[
+            export class ChipsDemoComponent {
+              
+            }
+          ]]>
+        </td-highlight>
+      </md-tab>
+    </md-tab-group>
+  </md-card-content>
+</md-card>
+<md-card>
+  <md-card-content>
+    <h3 class="md-title">Autocomplete Demo</h3>
+    <md-tab-group md-stretch-tabs>
+      <md-tab>
+        <template md-tab-label>Demo</template>
+        <td-chips [items]="items" placeholder="Enter any string"></td-chips>
+      </md-tab>
+      <md-tab>
+        <template md-tab-label>Code</template>
+        <p>HTML:</p>
+        <td-highlight lang="html">
+          <![CDATA[
+            <td-chips [items]="items" placeholder="Enter any string"></td-chips>
+          ]]>
+        </td-highlight>
+        <p>Typescript:</p>
+        <td-highlight lang="typescript">
+          <![CDATA[
+            export class ChipsDemoComponent {
+
+              items: string[] = [...];
+              
+              itemsReadOnly: string[] = this.items.slice(2, 8);
+
+            }
+          ]]>
+        </td-highlight>
+      </md-tab>
+    </md-tab-group>
+  </md-card-content>
+</md-card>
+<md-card>
+  <md-card-content>
+    <h3 class="md-title">Autocomplete and requireMatch Demo</h3>
     <md-tab-group md-stretch-tabs>
       <md-tab>
         <template md-tab-label>Demo</template>
-        <td-chips placeholder="Enter any string" [readOnly]="readOnly"></td-chips>
-        <p>Autocomplete Demo</p>
-        <td-chips [items]="items" placeholder="Enter any string" [readOnly]="readOnly"></td-chips>
-        <p>Autocomplete and requireMatch Demo</p>
         <td-chips [items]="items" [(ngModel)]="itemsRequireMatch" placeholder="Enter autocomplete strings" [readOnly]="readOnly" requireMatch></td-chips>
       </md-tab>
       <md-tab>
@@ -18,10 +74,6 @@
         <p>HTML:</p>
         <td-highlight lang="html">
           <![CDATA[
-            <td-chips placeholder="Enter any string" [readOnly]="readOnly"></td-chips>
-            <p>Autocomplete Demo</p>
-            <td-chips [items]="items" placeholder="Enter any string" [readOnly]="readOnly"></td-chips>
-            <p>Autocomplete and requireMatch Demo</p>
             <td-chips [items]="items" [(ngModel)]="itemsRequireMatch" placeholder="Enter autocomplete strings" [readOnly]="readOnly" requireMatch></td-chips>
           ]]>
         </td-highlight>
@@ -33,10 +85,6 @@
 
               itemsRequireMatch: string[] = this.items.slice(0, 6);
 
-              itemsReadOnly: string[] = this.items.slice(2, 8);
-
-              itemsForms: string[] = this.items.slice(6, 11);
-
               toggleReadOnly(): void {
                 this.readOnly = !this.readOnly;
               }
diff --git a/src/app/components/components/chips/chips.component.ts b/src/app/components/components/chips/chips.component.ts
index fd413af0e5..d663876b04 100644
--- a/src/app/components/components/chips/chips.component.ts
+++ b/src/app/components/components/chips/chips.component.ts
@@ -60,10 +60,6 @@ export class ChipsDemoComponent {
 
   itemsRequireMatch: string[] = this.items.slice(0, 6);
 
-  itemsReadOnly: string[] = this.items.slice(2, 8);
-
-  itemsForms: string[] = this.items.slice(6, 11);
-
   toggleReadOnly(): void {
     this.readOnly = !this.readOnly;
   }

From df4516975e5a34753842e4cfe7e01ce02c45be12 Mon Sep 17 00:00:00 2001
From: richa <richa.vyas@teradata.com>
Date: Wed, 1 Mar 2017 11:10:15 -0800
Subject: [PATCH 3/4] removed param which is not required for the block

---
 src/app/components/components/chips/chips.component.html | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/components/components/chips/chips.component.html b/src/app/components/components/chips/chips.component.html
index fb7be98458..995a313194 100644
--- a/src/app/components/components/chips/chips.component.html
+++ b/src/app/components/components/chips/chips.component.html
@@ -51,8 +51,6 @@ <h3 class="md-title">Autocomplete Demo</h3>
             export class ChipsDemoComponent {
 
               items: string[] = [...];
-              
-              itemsReadOnly: string[] = this.items.slice(2, 8);
 
             }
           ]]>

From db73810f5b46aeb34f7b0ff933ebef0ef2828358 Mon Sep 17 00:00:00 2001
From: emoralesb05 <eduardo.morales@teradata.com>
Date: Thu, 2 Mar 2017 12:29:41 -0800
Subject: [PATCH 4/4] chore(): updated demos in chips

---
 .../components/chips/chips.component.html     | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/app/components/components/chips/chips.component.html b/src/app/components/components/chips/chips.component.html
index 995a313194..5c173ad54b 100644
--- a/src/app/components/components/chips/chips.component.html
+++ b/src/app/components/components/chips/chips.component.html
@@ -50,7 +50,19 @@ <h3 class="md-title">Autocomplete Demo</h3>
           <![CDATA[
             export class ChipsDemoComponent {
 
-              items: string[] = [...];
+              items: string[] = [
+                'stepper',
+                'expansion-panel',
+                'markdown',
+                'highlight',
+                'loading',
+                'media',
+                'chips',
+                'http',
+                'json-formatter',
+                'pipes',
+                'need more?',
+              ];
 
             }
           ]]>
@@ -81,6 +93,20 @@ <h3 class="md-title">Autocomplete and requireMatch Demo</h3>
             export class ChipsDemoComponent {
               readOnly: boolean = false;
 
+              items: string[] = [
+                'stepper',
+                'expansion-panel',
+                'markdown',
+                'highlight',
+                'loading',
+                'media',
+                'chips',
+                'http',
+                'json-formatter',
+                'pipes',
+                'need more?',
+              ];
+
               itemsRequireMatch: string[] = this.items.slice(0, 6);
 
               toggleReadOnly(): void {