Merge branch 'develop' of https://github.com/Teradata/covalent into f…

…eature/icon-service
Teradata · Mar 2, 2017 · 07ff469 · 07ff469
2 parents 3d27268 + 58094fa
commit 07ff469
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 16 deletions.
diff --git a/src/app/components/components/chips/chips.component.html b/src/app/components/components/chips/chips.component.html
@@ -3,12 +3,120 @@
   <md-card-subtitle>Small blocks for multiple items</md-card-subtitle>
   <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>      
+    <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[] = [
+                'stepper',
+                'expansion-panel',
+                'markdown',
+                'highlight',
+                'loading',
+                'media',
+                'chips',
+                'http',
+                'json-formatter',
+                'pipes',
+                'need more?',
+              ];
+
+            }
+          ]]>
+        </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 [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 [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;
+
+              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 {
+                this.readOnly = !this.readOnly;
+              }
+            }
+          ]]>
+        </td-highlight>
+      </md-tab>
+    </md-tab-group>
   </md-card-content>
   <md-divider></md-divider>
   <md-card-actions>

diff --git 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;
   }

diff --git a/src/platform/core/search/search-box/search-box.component.scss b/src/platform/core/search/search-box/search-box.component.scss
@@ -5,10 +5,5 @@
   height: 64px;
   td-search-input {
     margin-left: 12px;
-    /deep/ {
-      .mat-input-placeholder.mat-focused {
-        visibility: hidden;
-      }
-    }
   }
 }
diff --git a/src/platform/core/search/search-input/search-input.component.html b/src/platform/core/search/search-input/search-input.component.html
@@ -1,5 +1,5 @@
 <div class="td-search-input" layout="row" layout-align="end center">
-  <md-input-container [class.mat-hide-underline]="!showUnderline" flex>
+  <md-input-container [class.mat-hide-underline]="!showUnderline" floatPlaceholder="never" flex>
     <input mdInput
             #searchElement
             type="search"