[ADF-1980] fix search component styles (#2684)

* fix search component styles

* remove obsolete styles and use routed viewer

* cleanup demo shell search bar

* fix app crashes

lib/content-services/search/components/search-control.component.html

@@ -1,26 +1,27 @@
-<div class="adf-search-container" *ngIf="isLoggedIn()"
-[@transitionMessages]="subscriptAnimationState">
-<a mat-icon-button
-    *ngIf="expandable"
-    id="adf-search-button"
-    class="adf-search-button"
-    (click)="toggleSearchBar($event)"
-    (keyup.enter)="toggleSearchBar($event)">
-    <mat-icon aria-label="search button">search</mat-icon>
-</a>
-<mat-form-field class="adf-input-form-field-divider">
-    <input matInput
-        [type]="inputType"
-        [autocomplete]="getAutoComplete()"
-        id="adf-control-input"
-        [(ngModel)]="searchTerm"
-        (focus)="activateToolbar()"
-        (blur)="onBlur($event)"
-        (keyup.escape)="toggleSearchBar()"
-        (ngModelChange)="inputChange($event)"
-        [searchAutocomplete]="auto"
-        (keyup.enter)="searchSubmit($event)">
-</mat-form-field>
+<div class="adf-search-container">
+    <div *ngIf="isLoggedIn()" [@transitionMessages]="subscriptAnimationState">
+        <a mat-icon-button
+            *ngIf="expandable"
+            id="adf-search-button"
+            class="adf-search-button"
+            (click)="toggleSearchBar($event)"
+            (keyup.enter)="toggleSearchBar($event)">
+            <mat-icon aria-label="search button">search</mat-icon>
+        </a>
+        <mat-form-field class="adf-input-form-field-divider">
+            <input matInput
+                [type]="inputType"
+                [autocomplete]="getAutoComplete()"
+                id="adf-control-input"
+                [(ngModel)]="searchTerm"
+                (focus)="activateToolbar()"
+                (blur)="onBlur($event)"
+                (keyup.escape)="toggleSearchBar()"
+                (ngModelChange)="inputChange($event)"
+                [searchAutocomplete]="auto"
+                (keyup.enter)="searchSubmit($event)">
+        </mat-form-field>
+    </div>
 </div>
 
 <adf-search #auto="searchAutocomplete"
@@ -41,15 +42,16 @@
                 <mat-icon mat-list-icon>
                     <img [src]="getMimeTypeIcon(item)" />
                 </mat-icon>
-                    <h4 mat-line id="result_name_{{idx}}"
-                        *ngIf="highlight; else elseBlock"
-                        class="adf-search-fixed-text"
-                        [innerHtml]="item.entry.name | highlight: searchTerm">
-                        {{ item?.entry.name }}</h4>
-                    <ng-template #elseBlock>
-                        <h4 class="adf-search-fixed-text" mat-line id="result_name_{{idx}}" [innerHtml]="item.entry.name"></h4>
-                    </ng-template>
-                    <p mat-line class="adf-search-fixed-text"> {{item?.entry.createdByUser.displayName}} </p>
+                <h4 mat-line id="result_name_{{idx}}"
+                    *ngIf="highlight; else elseBlock"
+                    class="adf-search-fixed-text"
+                    [innerHtml]="item.entry.name | highlight: searchTerm">
+                    {{ item?.entry.name }}
+                </h4>
+                <ng-template #elseBlock>
+                    <h4 class="adf-search-fixed-text" mat-line id="result_name_{{idx}}" [innerHtml]="item.entry.name"></h4>
+                </ng-template>
+                <p mat-line class="adf-search-fixed-text"> {{item?.entry.createdByUser.displayName}} </p>
             </mat-list-item>
             <mat-list-item
                 id="search_no_result"

lib/content-services/search/components/search-control.component.scss

@@ -5,6 +5,10 @@
     $accent: map-get($theme, accent);
     $mat-menu-border-radius: 2px !default;
 
+    .adf-search-container {
+        overflow: hidden;
+    }
+
     .adf {
 
         &-search-fixed-text {

lib/content-services/search/components/search-control.component.ts

@@ -17,7 +17,7 @@
 
 import { AuthenticationService, ThumbnailService } from '@alfresco/adf-core';
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { MinimalNodeEntity, QueryBody } from 'alfresco-js-api';
 import { Observable } from 'rxjs/Observable';
 import { Subject } from 'rxjs/Subject';
@@ -28,15 +28,17 @@ import { Subject } from 'rxjs/Subject';
     styleUrls: ['./search-control.component.scss'],
     animations: [
         trigger('transitionMessages', [
-            state('active', style({transform: 'translateX(0%)'})),
-            state('inactive', style({transform: 'translateX(83%)', overflow: 'hidden'})),
-            state('no-animation', style({transform: 'translateX(0%)', width: '100%'})),
+            state('active', style({ transform: 'translateX(0%)' })),
+            state('inactive', style({ transform: 'translateX(83%)', overflow: 'hidden' })),
+            state('no-animation', style({ transform: 'translateX(0%)', width: '100%' })),
             transition('inactive => active',
                 animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)')),
             transition('active => inactive',
                 animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)'))
         ])
-    ]
+    ],
+    encapsulation: ViewEncapsulation.None,
+    host: { class: 'adf-search-control' }
 })
 export class SearchControlComponent implements OnInit, OnDestroy {
 
@@ -77,7 +79,7 @@ export class SearchControlComponent implements OnInit, OnDestroy {
     private focusSubject = new Subject<FocusEvent>();
 
     constructor(public authService: AuthenticationService,
-                private thumbnailService: ThumbnailService) {
+        private thumbnailService: ThumbnailService) {
 
         this.toggleSearch.asObservable().debounceTime(100).subscribe(() => {
             if (this.expandable) {
@@ -96,8 +98,15 @@ export class SearchControlComponent implements OnInit, OnDestroy {
     }
 
     ngOnDestroy(): void {
-        this.focusSubject.unsubscribe();
-        this.toggleSearch.unsubscribe();
+        if (this.focusSubject) {
+            this.focusSubject.unsubscribe();
+            this.focusSubject = null;
+        }
+
+        if (this.toggleSearch) {
+            this.toggleSearch.unsubscribe();
+            this.toggleSearch = null;
+        }
     }
 
     isLoggedIn(): boolean {
@@ -118,55 +127,57 @@ export class SearchControlComponent implements OnInit, OnDestroy {
     }
 
     getMimeTypeIcon(node: MinimalNodeEntity): string {
-      let mimeType;
+        let mimeType;
 
-      if (node.entry.content && node.entry.content.mimeType) {
-          mimeType = node.entry.content.mimeType;
-      }
-      if (node.entry.isFolder) {
-          mimeType = 'folder';
-      }
+        if (node.entry.content && node.entry.content.mimeType) {
+            mimeType = node.entry.content.mimeType;
+        }
+        if (node.entry.isFolder) {
+            mimeType = 'folder';
+        }
 
-      return this.thumbnailService.getMimeTypeIcon(mimeType);
-  }
+        return this.thumbnailService.getMimeTypeIcon(mimeType);
+    }
 
-  isSearchBarActive() {
-      return this.subscriptAnimationState === 'active' && this.liveSearchEnabled;
-  }
+    isSearchBarActive() {
+        return this.subscriptAnimationState === 'active' && this.liveSearchEnabled;
+    }
 
-  toggleSearchBar() {
-    this.toggleSearch.next();
-  }
+    toggleSearchBar() {
+        if (this.toggleSearch) {
+            this.toggleSearch.next();
+        }
+    }
 
-  elementClicked(item: any) {
-      if (item.entry) {
-          this.optionClicked.next(item);
-          this.toggleSearchBar();
-      }
-  }
+    elementClicked(item: any) {
+        if (item.entry) {
+            this.optionClicked.next(item);
+            this.toggleSearchBar();
+        }
+    }
 
-  onFocus($event): void {
-      this.focusSubject.next($event);
-  }
+    onFocus($event): void {
+        this.focusSubject.next($event);
+    }
 
-  onBlur($event): void {
-     this.focusSubject.next($event);
-  }
+    onBlur($event): void {
+        this.focusSubject.next($event);
+    }
 
-  activateToolbar($event) {
-      if ( !this.isSearchBarActive() ) {
-          this.toggleSearchBar();
-      }
-  }
+    activateToolbar($event) {
+        if (!this.isSearchBarActive()) {
+            this.toggleSearchBar();
+        }
+    }
 
-  private setupFocusEventHandlers() {
-      let focusEvents: Observable<FocusEvent> = this.focusSubject.asObservable()
-                                                    .distinctUntilChanged().debounceTime(50);
-      focusEvents.filter(($event: any) => {
-          return this.isSearchBarActive() && ($event.type === 'blur' ||  $event.type === 'focusout');
-      }).subscribe(() => {
-        this.toggleSearchBar();
-      });
-  }
+    private setupFocusEventHandlers() {
+        let focusEvents: Observable<FocusEvent> = this.focusSubject.asObservable()
+            .distinctUntilChanged().debounceTime(50);
+        focusEvents.filter(($event: any) => {
+            return this.isSearchBarActive() && ($event.type === 'blur' || $event.type === 'focusout');
+        }).subscribe(() => {
+            this.toggleSearchBar();
+        });
+    }
 
 }

lib/content-services/search/components/search-trigger.directive.ts

@@ -79,7 +79,10 @@ export class SearchTriggerDirective implements ControlValueAccessor, OnDestroy {
                 @Optional() @Inject(DOCUMENT) private document: any) { }
 
     ngOnDestroy() {
-        this.escapeEventStream.unsubscribe();
+        if (this.escapeEventStream) {
+            this.escapeEventStream.unsubscribe();
+            this.escapeEventStream = null;
+        }
         if ( this.closingActionsSubscription ) {
             this.closingActionsSubscription.unsubscribe();
         }