[ADF-1238] Removed mdl from alfresco search component (#2309)

* [ADF-1328] removed mdl from adf search

* [ADF-11328] removed mdl from search added theme style

* Fix failing tests

* Fix the last bit of stylings

ng2-components/ng2-alfresco-search/src/components/search-autocomplete.component.html

@@ -1,5 +1,5 @@
 <table data-automation-id="autocomplete_results" *ngIf="results && results.length && searchTerm"
-       class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
+       class="full-width adf-search-result">
     <tbody #resultsTableBody>
     <tr id="result_row_{{idx}}" *ngFor="let result of results; let idx = index" tabindex="0"
             (blur)="onRowBlur($event)" (focus)="onRowFocus($event)"
@@ -22,7 +22,7 @@
 </table>
 
 <table id="search_no_result" data-automation-id="search_no_result_found" *ngIf="results && results.length === 0"
-       class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
+       class="full-width adf-search-result">
     <tbody>
     <tr>
         <td>
@@ -33,7 +33,7 @@
 </table>
 
 <table data-automation-id="autocomplete_error_message" *ngIf="errorMessage"
-       class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
+       class="full-width adf-search-result">
     <tbody>
     <tr>
         <td>{{ 'SEARCH.RESULTS.ERROR' | translate:{errorMessage: errorMessage} }}</td>

ng2-components/ng2-alfresco-search/src/components/search-autocomplete.component.scss

@@ -1,51 +1,78 @@
-:host {
-    position: absolute;
-    z-index: 5;
-    display: none;
-    color: #555;
-    margin: -21px 0px 0px 0px;
-}
-:host a {
-    color: #555;
-    text-decoration: none;
-}
-:host table {
-    width: 300px;
-}
-:host .mdl-data-table tbody tr {
-    height: 32px;
-}
-:host .mdl-data-table td {
-    height: 32px;
-    padding: 8px;
-    text-align: left;
-    border-top: none;
-    border-bottom: none;
-}
-:host.active.valid {
-    display: block;
-}
+@mixin mat-search-autocomplete-theme($theme) {
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
+    $foreground: map-get($theme, foreground);
+    $background: map-get($theme, background);
 
-.img-td{
-    width: 30px;
-}
+    .adf {
 
-.truncate{
-    width: 240px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
+        &-search-result {
+            position: absolute;
+            z-index: 5;
+            display: none;
+            color: mat-color($foreground, text);
+            background-color: mat-color($background, card);
+            margin: -21px 0px 0px 0px;
+            border: 1px solid mat-color($primary);
+            border-collapse: collapse;
+            white-space: nowrap;
+            font-size: 14px;
 
-:host /deep/ .highlight {
-    color: #33afdf;
-}
+            a {
+                color: mat-color($foreground, text);
+                text-decoration: none;
+            }
 
-@media screen and (max-width: 400px) {
-    :host {
-        right: 0;
-    }
-    .truncate{
-        width: 200px;
+            table {
+                width: 300px;
+            }
+
+            tbody tr {
+                height: 32px;
+
+                &:hover {
+                    background-color: mat-color($background, hover);
+                }
+            }
+
+            td {
+                height: 32px;
+                padding: 8px;
+                text-align: left;
+                border-top: none;
+                border-bottom: none;
+            }
+
+            .highlight {
+                color: mat-color($primary, 900);
+            }
+
+            .img-td{
+                width: 30px;
+            }
+
+            .truncate{
+                width: 240px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            @media screen and (max-width: 400px) {
+                :host {
+                    right: 0;
+                }
+                .truncate{
+                    width: 200px;
+                }
+            }
+        }
+
+        &-valid-search {
+            .adf-search-result {
+                display: block;
+            }
+        }
     }
 }

ng2-components/ng2-alfresco-search/src/components/search-autocomplete.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, ElementRef, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnChanges, Output, ViewChild, ViewEncapsulation } from '@angular/core';
 import { MinimalNodeEntity } from 'alfresco-js-api';
 import { SearchOptions, SearchService } from 'ng2-alfresco-core';
 import { ThumbnailService } from 'ng2-alfresco-core';
@@ -23,7 +23,8 @@ import { ThumbnailService } from 'ng2-alfresco-core';
 @Component({
     selector: 'adf-search-autocomplete, alfresco-search-autocomplete',
     templateUrl: './search-autocomplete.component.html',
-    styleUrls: ['./search-autocomplete.component.scss']
+    styleUrls: ['./search-autocomplete.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class SearchAutocompleteComponent implements OnChanges {
 

ng2-components/ng2-alfresco-search/src/components/search-control.component.html

@@ -1,25 +1,30 @@
-<form #f="ngForm" (ngSubmit)="onSearch(f.value)">
-    <div [class]="getTextFieldClassName()">
-        <label *ngIf="expandable" class="mdl-button mdl-js-button mdl-button--icon" for="searchControl">
-            <i mdl-upgrade class="material-icons">search</i>
-        </label>
-        <div [class]="getTextFieldHolderClassName()">
-            <input
-                mdl
-                class="mdl-textfield__input"
-                [type]="inputType"
-                [autocomplete]="getAutoComplete()"
-                data-automation-id="search_input"
-                #searchInput
-                id="searchControl"
-                [formControl]="searchControl"
-                [(ngModel)]="searchTerm"
-                (focus)="onFocus($event)"
-                (blur)="onBlur($event)"
-                (keyup.escape)="onEscape()"
-                (keyup.arrowdown)="onArrowDown()"
-                aria-labelledby="searchLabel">
-            <label id="searchLabel" class="mdl-textfield__label" for="searchControl">{{'SEARCH.CONTROL.LABEL' | translate}}</label>
+<form #f="ngForm" (ngSubmit)="onSearch(f.value)" class="adf-search-form">
+    <div class="adf-search-container"
+        [@transitionMessages]="_subscriptAnimationState">
+        <button md-button
+            (click)="onClickSearch()"
+            *ngIf="expandable"
+            class="adf-search-button">
+            <md-icon aria-label="search button">search</md-icon>
+        </button>
+        <div class="search-field">
+            <md-input-container>
+                <input
+                    mdInput
+                    [type]="inputType"
+                    [autocomplete]="getAutoComplete()"
+                    data-automation-id="search_input"
+                    #searchInput
+                    id="searchControl"
+                    [formControl]="searchControl"
+                    [(ngModel)]="searchTerm"
+                    (focus)="onFocus($event)"
+                    (blur)="onBlur($event)"
+                    (keyup.escape)="onEscape()"
+                    (keyup.arrowdown)="onArrowDown()"
+                    aria-labelledby="searchLabel">
+                <!--label id="searchLabel" for="searchControl">{{'SEARCH.CONTROL.LABEL' | translate}}</label-->
+            </md-input-container>
         </div>
     </div>
 </form>
@@ -32,7 +37,8 @@
     [resultSort]="liveSearchResultSort"
     [maxResults]="liveSearchMaxResults"
     [highlight]="highlight"
-    [ngClass]="{active: searchActive, valid: searchValid}"
+    [class.adf-active-search]="searchActive"
+    [class.adf-valid-search]="searchValid"
     (fileSelect)="onFileClicked($event)"
     (searchFocus)="onAutoCompleteFocus($event)"
     (scrollBack)="onAutoCompleteReturn($event)"

ng2-components/ng2-alfresco-search/src/components/search-control.component.scss

@@ -1,13 +1,64 @@
-.search-field {
-    width: 267px;
-}
-@media only screen and (max-width: 400px) {
-    .search-field {
-        width: 200px;
+@mixin mat-search-control-theme($theme) {
+    $background: map-get($theme, background);
+
+    .adf {
+
+        &-search-button.mat-button {
+            border-radius: 50%;
+            height: 32px;
+            min-width: 20px;
+            width: 32px;
+            padding: 0;
+            overflow: hidden;
+            color: inherit;
+            line-height: normal;
+            border: none;
+        }
+
+        &-search-container {
+            display: flex;
+            align-items: center;
+
+            .search-field {
+                width: 260px;
+                padding-top: 6px;
+
+                .mat-input-container {
+                    width: 100%;
+                }
+
+                .mat-input-underline .mat-input-ripple {
+                    background-color: mat-color($background, card);
+                }
+
+                .mat-input-element {
+                    font-size: 16px;
+                }
+            }
+
+            .search-field .mat-input-infix {
+                padding: 0px;
+            }
+
+            @media only screen and (max-width: 400px) {
+                .search-field {
+                    width: 200px;
+                }
+            }
+            @media only screen and (max-width: 320px) {
+                .search-field {
+                    width: 160px;
+                }
+            }
+        }
+
+        &-search-form{
+            overflow: hidden;
+        }
+
+        &-active-search,
+        &-valid-search {
+            display: block;
+        }
     }
-}
-@media only screen and (max-width: 320px) {
-    .search-field {
-        width: 160px;
-    }
-}
+}

ng2-components/ng2-alfresco-search/src/components/search-control.component.spec.ts

@@ -128,22 +128,6 @@ describe('SearchControlComponent', () => {
             fixture.detectChanges();
             expect(element.querySelectorAll('input[type="text"]')[0].getAttribute('autocomplete')).toBe('on');
         });
-
-        it('should show an expanding control by default', () => {
-            fixture.detectChanges();
-            expect(element.querySelectorAll('div.mdl-textfield--expandable').length).toBe(1);
-            expect(element.querySelectorAll('div.mdl-textfield__expandable-holder').length).toBe(1);
-            expect(element.querySelectorAll('label.mdl-button--icon').length).toBe(1);
-        });
-
-        it('should show a normal non-expanding control when configured', () => {
-            fixture.detectChanges();
-            fixture.componentInstance.expandable = false;
-            fixture.detectChanges();
-            expect(element.querySelectorAll('div.mdl-textfield--expandable').length).toBe(0);
-            expect(element.querySelectorAll('div.mdl-textfield__expandable-holder').length).toBe(0);
-            expect(element.querySelectorAll('label.mdl-button--icon').length).toBe(0);
-        });
     });
 
     describe('Find as you type', () => {
@@ -172,7 +156,7 @@ describe('SearchControlComponent', () => {
             window.setTimeout(() => { // wait for debounce() to complete
                 fixture.detectChanges();
                 let autocomplete: Element = element.querySelector('adf-search-autocomplete');
-                expect(autocomplete.classList.contains('active')).toBe(true);
+                expect(autocomplete.classList.contains('adf-active-search')).toBe(true);
                 done();
             }, 100);
         });
@@ -202,7 +186,7 @@ describe('SearchControlComponent', () => {
             window.setTimeout(() => { // wait for debounce() to complete
                 fixture.detectChanges();
                 let autocomplete: Element = element.querySelector('adf-search-autocomplete');
-                expect(autocomplete.classList.contains('active')).toBe(true);
+                expect(autocomplete.classList.contains('adf-active-search')).toBe(true);
                 done();
             }, 100);
         });
@@ -229,7 +213,7 @@ describe('SearchControlComponent', () => {
             }));
             fixture.detectChanges();
             let autocomplete: Element = element.querySelector('adf-search-autocomplete');
-            expect(autocomplete.classList.contains('active')).toBe(true);
+            expect(autocomplete.classList.contains('adf-active-search')).toBe(true);
         });
 
         it('should select the first result in find-as-you-type when down arrow is pressed and FAYT is visible', (done) => {

ng2-components/ng2-alfresco-search/src/components/search-control.component.ts

@@ -15,7 +15,8 @@
  * limitations under the License.
  */
 
-import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
 import { FormControl, Validators } from '@angular/forms';
 import { Observable, Subject } from 'rxjs/Rx';
 import { SearchTermValidator } from './../forms/search-term-validator';
@@ -24,7 +25,19 @@ import { SearchAutocompleteComponent } from './search-autocomplete.component';
 @Component({
     selector: 'adf-search-control, alfresco-search-control',
     templateUrl: './search-control.component.html',
-    styleUrls: ['./search-control.component.scss']
+    styleUrls: ['./search-control.component.scss'],
+    animations: [
+        trigger('transitionMessages', [
+            state('active', style({ transform: 'translateX(0%)'})),
+            state('inactive', style({ transform: 'translateX(89%)'})),
+            transition('void => active, inactive => active',
+                animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)')),
+            transition('active => inactive, void => inactive',
+                animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)'))
+        ])
+    ],
+    encapsulation: ViewEncapsulation.None
+
 })
 export class SearchControlComponent implements OnInit, OnDestroy {
 
@@ -34,6 +47,8 @@ export class SearchControlComponent implements OnInit, OnDestroy {
     @Input()
     inputType = 'text';
 
+// style({ transform: 'translateX(0%)'}) style({ transform: 'translateX(89%)'}),
+
     @Input()
     autocomplete: boolean = false;
 
@@ -87,6 +102,8 @@ export class SearchControlComponent implements OnInit, OnDestroy {
 
     private focusSubject = new Subject<FocusEvent>();
 
+    _subscriptAnimationState: string = 'inactive';
+
     constructor() {
         this.searchControl = new FormControl(
             this.searchTerm,
@@ -132,14 +149,6 @@ export class SearchControlComponent implements OnInit, OnDestroy {
         });
     }
 
-    getTextFieldClassName(): string {
-        return 'mdl-textfield mdl-js-textfield' + (this.expandable ? ' mdl-textfield--expandable' : '');
-    }
-
-    getTextFieldHolderClassName(): string {
-        return this.expandable ? 'search-field mdl-textfield__expandable-holder' : 'search-field';
-    }
-
     getAutoComplete(): string {
         return this.autocomplete ? 'on' : 'off';
     }
@@ -227,4 +236,9 @@ export class SearchControlComponent implements OnInit, OnDestroy {
         this.setAutoCompleteDisplayed(false);
     }
 
+    onClickSearch() {
+        this.searchActive = !this.searchActive;
+        this._subscriptAnimationState = this.searchActive ? 'active' : 'inactive';
+    }
+
 }

ng2-components/ng2-alfresco-search/src/components/search.component.html

@@ -1,5 +1,5 @@
 <div data-automation-id="search_result_table"
-     class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
+     class="adf-data-table full-width">
     <p data-automation-id="search_error_message" *ngIf="errorMessage">{{ 'SEARCH.RESULTS.ERROR' | translate:{errorMessage: errorMessage} }}</p>
     <div class="container">
         <adf-document-list

ng2-components/ng2-alfresco-search/src/components/search.component.scss

@@ -1,11 +1,11 @@
-:host .mdl-data-table caption {
+:host .adf-data-table caption {
     margin: 0 0 16px 0;
     text-align: left;
 }
-:host .mdl-data-table td {
+:host .adf-data-table td {
     white-space: nowrap;
 }
-:host .mdl-data-table td.col-mimetype-icon {
+:host .adf-data-table td.col-mimetype-icon {
     width: 24px;
 }
 :host .col-display-name {

ng2-components/ng2-alfresco-search/styles/index.scss

@@ -0,0 +1,7 @@
+@import '../src/components/search-autocomplete.component';
+@import '../src/components/search-control.component';
+
+@mixin alfresco-search-theme($theme) {
+    @include mat-search-control-theme($theme);
+    @include mat-search-autocomplete-theme($theme);
+}