From 8f1659fca1e517d909b8863cef85476fb7f5c1ff Mon Sep 17 00:00:00 2001
From: Will Abson <will.abson@gmail.com>
Date: Wed, 1 Jun 2016 18:55:34 +0100
Subject: [PATCH] Add expandable input field to search control

---
 ng2-components/ng2-alfresco-search/README.md          |  1 +
 .../components/alfresco-search-control.component.html |  6 +++---
 .../components/alfresco-search-control.component.ts   | 11 +++++++++++
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/ng2-components/ng2-alfresco-search/README.md b/ng2-components/ng2-alfresco-search/README.md
index 9c93a3d395..61be278253 100644
--- a/ng2-components/ng2-alfresco-search/README.md
+++ b/ng2-components/ng2-alfresco-search/README.md
@@ -144,6 +144,7 @@ bootstrap(SearchDemo, [
 
 **searchTerm**: {string} (optional) default "". Search term to pre-populate the field with<br />
 **inputType**: {string} (optional) default "text". Type of the input field to render, e.g. "search" or "text" (default)<br />
+**expandable** {boolean} (optional) default true. Whether to use an expanding search control, if false then a regular input is used.
 
 ### Search results
 
diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html
index 9a9dcfadbf..6412fd8994 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html
@@ -1,9 +1,9 @@
 <form (submit)="onSearch($event)">
-    <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
-        <label class="mdl-button mdl-js-button mdl-button--icon" for="searchTerm">
+    <div [class]="getTextFieldClassName()">
+        <label *ngIf="expandable" class="mdl-button mdl-js-button mdl-button--icon" for="searchTerm">
             <i class="material-icons">search</i>
         </label>
-        <div class="mdl-textfield__expandable-holder">
+        <div [class]="getTextFieldHolderClassName()">
             <input class="mdl-textfield__input" [type]="inputType" id="searchTerm" [ngFormControl]="searchControl" [(ngModel)]="searchTerm">
             <label class="mdl-textfield__label" for="searchTerm">Search content</label>
         </div>
diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts
index 7dde176be4..827fc29ae9 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts
@@ -38,6 +38,9 @@ export class AlfrescoSearchControlComponent {
     @Input()
     inputType = 'text';
 
+    @Input()
+    expandable: boolean = true;
+
     @Output()
     searchChange = new EventEmitter();
 
@@ -56,6 +59,14 @@ export class AlfrescoSearchControlComponent {
         componentHandler.upgradeAllRegistered();
     }
 
+    getTextFieldClassName(): string {
+        return 'mdl-textfield mdl-js-textfield' + (this.expandable ? ' mdl-textfield--expandable' : '');
+    }
+
+    getTextFieldHolderClassName(): string {
+        return this.expandable ? ' mdl-textfield__expandable-holder' : '';
+    }
+
     /**
      * Method called on form submit, i.e. when the user has hit enter
      *