Fix input stylings for adf-people-search and modify existing fix for form inputs (#2405)

ng2-components/ng2-activiti-form/src/components/form.component.scss

@@ -39,6 +39,6 @@ form-field {
     .mat-input-element {
         font-size: 14px;
         padding-top: 8px;
-        line-height: 20px;
+        line-height: normal;
     }
 }

ng2-components/ng2-activiti-tasklist/src/components/people-search.component.scss

@@ -3,71 +3,75 @@
     $accent: map-get($theme, accent);
     $warn: map-get($theme, warn);
 
-    :host {
+    .adf-people-search {
         width: 100%;
-    }
 
-    .activiti-label {
+        .activiti-label {
-        font-weight: bolder;
-    }
-
-    .fix-element-user-list {
-        padding-top: 0px;
-        padding-right: 0px;
-        padding-bottom: 0px;
-        padding-left: 0px;
-    }
-
-    .search-text-header {
-        font-weight: bold;
-        opacity: 0.54;
-    }
-
-    .search-text-container {
-        width: 100%;
-    }
-
-    .search-list-container {
-        max-height: 152px;
-        width: 100%;
-        overflow-y: auto;
-    }
-
-    adf-people-list /deep/ adf-datatable /deep/ thead {
-        display: none;
-    }
-
-    .search-list-action-container {
-        border-top: 1px solid #eee;
-        text-align: right;
-        padding: 5px 0px;
-        margin-top: 5px;
-        > button {
-            opacity: 0.54;
             font-weight: bolder;
-            &:hover {
+        }
-                color: mat-color($primary);
+    
+        .fix-element-user-list {
+            padding-top: 0px;
+            padding-right: 0px;
+            padding-bottom: 0px;
+            padding-left: 0px;
+        }
+    
+        .search-text-header {
+            font-weight: bold;
+            opacity: 0.54;
+        }
+    
+        .search-text-container {
+            width: 100%;
+
+            input {
+                line-height: normal;
             }
         }
-    }
     
-    .people-pic {
+        .search-list-container {
-        background: mat-color($primary);
+            max-height: 152px;
-        width: 30px;
+            width: 100%;
-        padding: 10px 5px;
+            overflow-y: auto;
-        border-radius: 90%;
+        }
-        color: #fff;
-        text-align: center;
-        font-weight: bolder;
-        font-size: 18px;
-        text-transform: uppercase;
-        vertical-align: text-bottom;
-    }
     
-    .people-img {
+        adf-people-list /deep/ adf-datatable /deep/ thead {
-        border-radius: 90%;
+            display: none;
-        width: 40px;
+        }
-        height: 40px;
+    
-        vertical-align: middle;
+        .search-list-action-container {
+            border-top: 1px solid #eee;
+            text-align: right;
+            padding: 5px 0px;
+            margin-top: 5px;
+            > button {
+                opacity: 0.54;
+                font-weight: bolder;
+                &:hover {
+                    color: mat-color($primary);
+                }
+            }
+        }
+    
+        .people-pic {
+            background: mat-color($primary);
+            width: 30px;
+            padding: 10px 5px;
+            border-radius: 90%;
+            color: #fff;
+            text-align: center;
+            font-weight: bolder;
+            font-size: 18px;
+            text-transform: uppercase;
+            vertical-align: text-bottom;
+        }
+    
+        .people-img {
+            border-radius: 90%;
+            width: 40px;
+            height: 40px;
+            vertical-align: middle;
+        }    
     }
 }

ng2-components/ng2-activiti-tasklist/src/components/people-search.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, Directive, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { Observable } from 'rxjs/Observable';
 import { User } from '../models/user.model';
@@ -23,7 +23,11 @@ import { User } from '../models/user.model';
 @Component({
     selector: 'adf-people-search, activiti-people-search',
     templateUrl: './people-search.component.html',
-    styleUrls: ['./people-search.component.scss']
+    styleUrls: ['./people-search.component.scss'],
+    host: {
+        'class': 'adf-people-search'
+    },
+    encapsulation: ViewEncapsulation.None
 })
 
 export class PeopleSearchComponent implements OnInit {