Fix some issues in input. Change class in advanced search input

sharedComponents/advanced-search-input/advanced-search-input.component.ts

@@ -13,7 +13,7 @@ import {InputComponent} from "../input/input.component";
 @Component({
   selector: 'advanced-search-input',
   template: `
-    <div class="advanced-search-input">
+    <div class="search-input" [ngClass]="inputClass">
       <div class="uk-grid uk-flex-middle" uk-grid>
         <div class="uk-width-expand">
           <div class="uk-grid uk-grid-collapse inputs" uk-grid>
@@ -30,8 +30,9 @@ import {InputComponent} from "../input/input.component";
   `
 })
 export class AdvancedSearchInputComponent implements AfterContentInit, OnDestroy {
-  @ContentChildren(InputComponent) inputs: QueryList<InputComponent>
+  @ContentChildren(InputComponent) inputs: QueryList<InputComponent>;
   @Input() disabled: boolean = false;
+  @Input() inputClass: string = 'inner'
   @Output() searchEmitter: EventEmitter<void> = new EventEmitter<void>();
   
   constructor() {

sharedComponents/input/input.component.ts

@@ -44,7 +44,7 @@ declare var UIkit;
     <div [id]="id">
       <div class="input-wrapper" [class.disabled]="formControl.disabled" [class.opened]="opened"
            [class.focused]="focused" [ngClass]="inputClass" [class.hint]="hint"
-           [class.active]="(formAsControl?.value || formAsArray?.length > 0) && !focused"
+           [class.active]="(formAsControl?.value || formAsArray?.length > 0 || getLabel(formAsControl?.value)) && !focused"
            [class.danger]="(formControl.invalid && (formControl.touched || searchControl?.touched)) || (searchControl?.invalid && searchControl?.touched)">
         <div #inputBox class="input-box" [class.select]="type === 'select'"
              [class.static]="placeholderInfo.static">
@@ -57,7 +57,7 @@ declare var UIkit;
                      [formControl]="formAsControl">
             </ng-template>
             <ng-template [ngIf]="type === 'textarea'">
-          <textarea #textArea class="input" [attr.placeholder]="placeholderInfo.static?placeholderInfo.label:hint"
+              <textarea #textArea class="input" [attr.placeholder]="placeholderInfo.static?placeholderInfo.label:hint"
                     [rows]="rows" [formControl]="formAsControl"></textarea>
             </ng-template>
             <ng-template [ngIf]="type === 'select'">
@@ -89,7 +89,7 @@ declare var UIkit;
               </div>
             </ng-template>
             <div *ngIf="formControl.disabled || icon || (type === 'select' && selectArrow) || type === 'autocomplete'"
-                 class="uk-margin-small-left uk-margin-right icon">
+                 class="uk-margin-left uk-margin-right icon">
               <icon *ngIf="formControl.disabled" [name]="'lock'" [flex]="true"></icon>
               <ng-template [ngIf]="formControl.enabled">
                 <icon *ngIf="!formControl.value && icon" [name]="icon" [flex]="true"></icon>
@@ -288,11 +288,13 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
   }
   
   ngOnChanges(changes: SimpleChanges) {
-    if(changes.value && this.formControl) {
+    if(this.formControl) {
-      this.formControl.setValue(this.value);
+      if (changes.value) {
-    }
+        this.formControl.setValue(this.value);
-    if (changes.formControl || changes.validators || changes.options) {
+      }
-      this.reset();
+      if (changes.formControl || changes.validators || changes.options) {
+        this.reset();
+      }
     }
   }
   
@@ -342,7 +344,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
         }
       }));
     }
-    if (this.formControl && this.formControl.validator) {
+    if (this.formControl.validator) {
       let validator = this.formControl.validator({} as AbstractControl);
       this.required = (validator && validator.required);
     }

sharedComponents/search-input/search-input.component.css

@@ -1,63 +0,0 @@
-input, input:focus {
-  background: transparent 0 0 no-repeat padding-box;
-  border-radius: 4px;
-  padding: 15px;
-  border: none;
-  outline: none;
-}
-
-input::placeholder {
-  color: #a3a3a3;
-  font-weight: 600;
-}
-
-@media only screen and (min-width: 960px) {
-  .bordered.focused {
-    border-bottom: 1px solid currentColor !important;
-  }
-  .bordered:not(.focused) {
-    border-bottom: 1px solid #a3a3a3 !important;
-  }
-}
-
-@media only screen and (max-width: 959px) {
-  input {
-    font-size: 14px;
-  }
-
-  .search-input {
-    padding-bottom: 5px;
-    border-bottom: 2px solid currentColor;
-  }
-}
-
-button.search, button.search:hover {
-  color: #1a1a1a;
-  font-weight: 700;
-  border: none;
-  outline: none;
-  background-color: transparent;
-  font-family: "Roboto", sans-serif;
-  font-size: 16px;
-}
-
-button.search:hover {
-  color: currentColor;
-}
-
-button.search .icon-bg {
-  width: 56px;
-  height: 56px;
-  position: relative;
-  background: white;
-  border-radius: 50%;
-}
-
-.selected {
-  color: #1a1a1a;
-}
-
-.overlay {
-  margin-left: -13px;
-  z-index: 1;
-}