From dc0544d0d8f54071cb7c9bffec36de19b0bccd68 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Mon, 28 Mar 2022 01:21:55 +0300
Subject: [PATCH] Page content: Add padding in header and inner. Complete
 input, textarea and select base on new redesign

---
 .../page-content/page-content.component.ts    |  14 +-
 .../dataProvider/dataProvider.component.html  |   3 +-
 .../notify-form/notify-form.component.ts      |   2 +-
 sharedComponents/input/input.component.css    | 182 ++++++--
 sharedComponents/input/input.component.ts     | 404 +++++++++++-------
 utils/icons/icons.ts                          |   2 +-
 6 files changed, 405 insertions(+), 202 deletions(-)

diff --git a/dashboard/sharedComponents/page-content/page-content.component.ts b/dashboard/sharedComponents/page-content/page-content.component.ts
index 50978cbd..3e625246 100644
--- a/dashboard/sharedComponents/page-content/page-content.component.ts
+++ b/dashboard/sharedComponents/page-content/page-content.component.ts
@@ -1,4 +1,4 @@
-import {Component, ElementRef, EventEmitter, HostListener, OnDestroy, OnInit, Output, ViewChild} from "@angular/core";
+import {Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild} from "@angular/core";
 import {Subscription} from "rxjs";
 
 declare var UIkit;
@@ -10,12 +10,16 @@ declare var UIkit;
       <div id="header">
         <div id="page_content_header" uk-sticky="media: @m" [attr.offset]="offset">
           <div #header class="uk-container uk-container-large uk-padding-remove-vertical">
-            <ng-content select="[header]"></ng-content>
+            <div class="uk-padding-small uk-padding-remove-vertical">
+              <ng-content select="[header]"></ng-content>
+            </div>
           </div>
         </div>
       </div>
-      <div id="page_content_inner" class="uk-section uk-padding-remove-top uk-container uk-container-large">
-        <ng-content select="[inner]"></ng-content>
+      <div id="page_content_inner" class="uk-container uk-container-large">
+        <div class="uk-padding uk-padding-remove-vertical">
+          <ng-content select="[inner]"></ng-content>
+        </div>
       </div>
     </div>
   `,
@@ -43,7 +47,7 @@ export class PageContentComponent implements OnInit, OnDestroy {
     this.clear();
     this.subscriptions.push(UIkit.util.on(document, 'active', '#sticky-menu', (): void => {
       this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height'));
-  
+      
     }));
     this.subscriptions.push(UIkit.util.on(document, 'inactive', '#sticky-menu', (): void => {
       this.offset = 0;
diff --git a/landingPages/dataProvider/dataProvider.component.html b/landingPages/dataProvider/dataProvider.component.html
index 1c58b22e..e41c4993 100644
--- a/landingPages/dataProvider/dataProvider.component.html
+++ b/landingPages/dataProvider/dataProvider.component.html
@@ -17,8 +17,7 @@
             <schema2jsonld *ngIf="dataProviderInfo" [data]=dataProviderInfo
                            [URL]="properties.domain+ properties.baseLink +properties.searchLinkToDataProvider +datasourceId"
                            type="datasource"
-                           [otherURL]="(dataProviderInfo.openDoarId)?(properties.openDoarURL+dataProviderInfo.openDoarId):((dataProviderInfo.r3DataId)?properties.r3DataURL+dataProviderInfo.r3DataId:nul)"></schema2jsonld>
-
+                           [otherURL]="(dataProviderInfo.openDoarId)?(properties.openDoarURL+dataProviderInfo.openDoarId):((dataProviderInfo.r3DataId)?properties.r3DataURL+dataProviderInfo.r3DataId:null)"></schema2jsonld>
             <landing-header [properties]="properties" [title]="dataProviderInfo.title.name"
                             [subTitle]="(dataProviderInfo.officialName
                             && dataProviderInfo.title.name !== dataProviderInfo.officialName)?dataProviderInfo.officialName:null"
diff --git a/notifications/notify-form/notify-form.component.ts b/notifications/notify-form/notify-form.component.ts
index 99d40600..a89b0b31 100644
--- a/notifications/notify-form/notify-form.component.ts
+++ b/notifications/notify-form/notify-form.component.ts
@@ -48,7 +48,7 @@ declare var UIkit;
           <div dashboard-input [formInput]="form.get('message')"
                [rows]="4" placeholder="Send a notification"
                type="textarea" class="uk-width-expand">
-            <div options class="uk-margin-top uk-width-1-1 uk-flex uk-flex-right">
+            <div tools class="uk-margin-top uk-width-1-1 uk-flex uk-flex-right">
               <button *ngIf="!sending && message" (click)="sendNotification()"
                       class="uk-button uk-button-small uk-button-secondary">Send</button>
               <button *ngIf="sending || !message" (click)="sendNotification()"
diff --git a/sharedComponents/input/input.component.css b/sharedComponents/input/input.component.css
index 628c8c4c..d7cf39ad 100644
--- a/sharedComponents/input/input.component.css
+++ b/sharedComponents/input/input.component.css
@@ -1,43 +1,167 @@
-.left, .right {
-  padding: 0 10px;
+:host {
+  --input-placeholder-color: var(--placeholder-color);
+  --input-background: transparent;
+  --input-shadow: none;
+  --input-border: none;
+  --input-color: var(--grey-color);
+  --input-color-disabled: var(--disable-color);
+  --input-background-disabled: var(--muted-color);
+  --input-options-background: transparent;
+  --input-options-divider: 1px solid var(--muted-color);
+  --input-options-background-active: var(--table-color);
+  --input-options-color-active: var(--dark-color);
 }
 
-.left {
-  position: absolute;
-  left: 40px;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.uk-grid-small .left {
-  left: 20px;
-}
-
-.left + .input-box {
-  padding-left: 41px;
-}
-
-.right {
+/** Input Container*/
+.input-container {
+  box-shadow: var(--input-shadow);
+  border: var(--input-border);
+  background: var(--input-background);
+  border-radius: 6px;
+  position: relative;
+}
+
+.input-container.disabled {
+  background-color: var(--input-background-disabled);
+}
+
+.input-container.opened {
+  z-index: 1;
+}
+
+/** Input wrapper*/
+.input-wrapper {
+  padding: 20px 0 20px 20px;
+  cursor: text;
+  position: relative;
+  color: var(--input-color);
+}
+
+.input-wrapper.select {
+  cursor: pointer;
+}
+
+.input-container.disabled  > .input-wrapper {
+  cursor: not-allowed !important;
+  user-select: none;
+  color: var(--input-color-disabled);
+}
+
+/** Placeholder */
+.input-wrapper > .placeholder {
   position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
   right: 0;
-  top: 50%;
+  overflow: hidden;
+  pointer-events: none;
+  color: var(--input-placeholder-color);
+  padding: 20px;
+}
+
+.input-container.disabled > .input-wrapper > .placeholder {
+  color: var(--input-color-disabled);
+}
+
+.input-wrapper > .placeholder > label {
+  position: absolute;
+  font-size: 16px;
+  line-height: 24px;
+  top: 32px;
   transform: translateY(-50%);
+  transition: all 0.5s ease 0s;
 }
 
-.right + .input-box {
-  padding-right: 41px;
+.input-container.focused > .input-wrapper > .placeholder > label {
+  top: 15px;
+  font-size: 12px;
+  line-height: 18px;
 }
 
-.input-message {
-  font-family: "Roboto", sans-serif;
-  font-size: 14px;
+/** Input */
+.input-wrapper .input {
+  outline: 0 none !important;
+  box-shadow: none;
+  border-radius: 0;
+  border: 0 none;
+  padding: 0 20px 0 0;
+  background: transparent !important;
+  color: inherit;
+  width: 100%;
+  min-height: 24px;
+  font-size: inherit;
+  line-height: inherit;
+  resize: none;
+  cursor: inherit;
 }
 
-.chip-input {
-  min-width: 100px;
+.input-wrapper .input:disabled {
+  background: transparent;
 }
 
-.left.top, .right.top {
-  top: 20%;
-  transform: translateY(-20%);
+.input-wrapper .input::placeholder {
+  color: transparent;
+}
+
+/* Tools */
+.input-wrapper > .tools {
+  max-height: 0;
+  transition: max-height 0.3s linear;
+  overflow: hidden;
+  padding-right: 20px;
+}
+
+.input-container.focused > .input-wrapper > .tools {
+  max-height: 100px;
+}
+
+/* Options */
+.input-container > .options {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.2s linear;
+  background: var(--input-options-background);
+}
+
+.input-container.opened > .options {
+  max-height: 200px;
+}
+
+.input-container > .options > ul {
+  margin: 0;
+  padding: 1px;
+  list-style: none;
+}
+
+.input-container > .options > ul > li > a {
+  padding: 10px 15px;
+  background: transparent;
+  color: var(--input-placeholder-color);
+  display: block;
+}
+
+.input-container > .options > ul > li:nth-child(n+2) {
+  border-top: var(--input-options-divider);
+}
+
+.input-container > .options > ul > li:last-child {
+  border-radius: 0 0 6px 6px;
+}
+
+.input-container > .options > ul > li:hover > a,  .input-container > .options > ul > li.uk-active > a{
+  background: var(--input-options-background-active);
+  color: var(--input-options-color-active);
+  font-weight: 600;
+}
+
+  /** Modifiers */
+.inner {
+  --input-shadow: var(--shadow-inset);
+  --input-background: var(--default-color);
+}
+
+.flat {
+  --input-background: var(--light-color);
+  --input-border: 1px solid var(--muted-color);
 }
diff --git a/sharedComponents/input/input.component.ts b/sharedComponents/input/input.component.ts
index 333c563b..6b16d826 100644
--- a/sharedComponents/input/input.component.ts
+++ b/sharedComponents/input/input.component.ts
@@ -19,7 +19,8 @@ import {MatSelect} from "@angular/material/select";
 import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete";
 import {map, startWith} from "rxjs/operators";
 import {MatChipInputEvent} from "@angular/material/chips";
-
+import {EnvProperties} from "../../utils/properties/env-properties";
+import {properties} from "../../../../environments/environment";
 
 export interface Option {
   icon?: string,
@@ -28,171 +29,190 @@ export interface Option {
   label: string
 }
 
+/**
+ * WARNING! dashboard-input selector is @deprecated, use input instead
+ *
+ * */
 @Component({
-  selector: '[dashboard-input]',
+  selector: '[dashboard-input], [input]',
   template: `
-    <div *ngIf="label && type != 'checkbox'"
-         class="uk-text-bold uk-form-label uk-margin-small-bottom">{{label + (required ? ' *' : '')}}</div>
-    <div *ngIf="hint" class="uk-margin-bottom uk-form-hint">{{hint}}</div>
-    <div class="uk-grid uk-flex" [ngClass]="'uk-flex-' + flex" [class.uk-grid-small]="gridSmall" uk-grid>
-      <ng-content></ng-content>
-      <div [class.uk-hidden]="hideControl" class="uk-width-expand uk-position-relative"
-           [class.uk-flex-first]="!extraLeft">
-        <ng-template [ngIf]="icon && formControl.enabled">
-          <span class="uk-text-muted" [class.top]="type === 'textarea'" [ngClass]="iconLeft?('left'):'right'">
-            <icon [name]="icon"></icon>
-          </span>
-        </ng-template>
-        <ng-template [ngIf]="formControl.disabled">
-          <span class="uk-text-muted left" [class.top]="type === 'textarea'">
-            <icon [name]="'lock'"></icon>
-          </span>
-        </ng-template>
-        <ng-template [ngIf]="type === 'text' || type === 'URL' || type === 'logoURL'">
-          <div [ngClass]="inputClass"
-               [class.uk-form-danger]="formControl.invalid && formControl.touched"
-               [attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':null">
-            <input #input class="uk-input" [placeholder]="placeholder" [formControl]="formControl">
+    <div class="input-container" [ngClass]="inputClass" [class.disabled]="formControl.disabled"
+         [class.focused]="(focused && type !== 'select') || formControl.value" [class.opened]="opened">
+      <div #inputBox class="input-wrapper" [class.select]="type === 'select'">
+        <div class="placeholder">
+          <label>{{placeholder}} <sup *ngIf="required">*</sup></label>
+        </div>
+        <div class="uk-flex" [class.uk-flex-middle]="type !== 'textarea'">
+          <ng-template [ngIf]="type === 'text' || type === 'URL' || type === 'logoURL'">
+            <input #input class="input" [formControl]="formAsControl">
+          </ng-template>
+          <ng-template [ngIf]="type === 'textarea'">
+            <textarea #textArea class="input" [rows]="rows" [formControl]="formAsControl"></textarea>
+          </ng-template>
+          <ng-template [ngIf]="type === 'select'">
+            <div class="input">{{getLabel(formControl.value)}}</div>
+          </ng-template>
+          <div *ngIf="formControl.disabled || icon || type === 'select'" class="uk-margin-small-left uk-margin-right">
+            <icon *ngIf="formControl.disabled" [name]="'lock'" [flex]="true"></icon>
+            <icon *ngIf="formControl.enabled && icon" [name]="icon" [flex]="true"></icon>
+            <icon *ngIf="formControl.enabled && !icon" name="arrow_drop_down" [flex]="true"></icon>
           </div>
-        </ng-template>
-        <ng-template [ngIf]="type === 'textarea'">
-          <div [ngClass]="inputClass" class="uk-padding-remove-right"
-               [class.uk-form-danger]="formControl.invalid && formControl.touched"
-               [attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':null">
-              <textarea class="uk-textarea"
-                        [rows]="rows" [placeholder]="placeholder"
-                        [formControl]="formControl">
-              </textarea>
-              <div class="tools" [class.focused]="focused">
-                <ng-content select="[options]"></ng-content>
-              </div>
-          </div>
-        </ng-template>
-        <ng-template [ngIf]="type === 'select'">
-          <div [ngClass]="inputClass"
-               [attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':null"
-               [class.clickable]="formControl.enabled"
-               [class.uk-form-danger]="formControl.invalid && formControl.touched" (click)="openSelect()">
-            <mat-form-field class="uk-width-1-1">
-              <mat-select #select [required]="required" [value]="null"
-                          (openedChange)="stopPropagation()" [formControl]="formControl"
-                          [disableOptionCentering]="true">
-                <mat-option *ngIf="placeholder" class="uk-hidden" [value]="''">{{placeholder}}</mat-option>
-                <mat-option *ngFor="let option of options" [value]="option.value" [attr.uk-tooltip]="(tooltip) ? option.label : null">
-                  {{option.label}}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-          </div>
-        </ng-template>
-        <ng-template [ngIf]="type === 'autocomplete'">
-          <div [ngClass]="inputClass"
-               [attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':null"
-               [class.clickable]="formControl.enabled"
-               [class.uk-form-danger]="formControl.invalid && formControl.touched" (click)="openSelect()">
-            <mat-form-field class="uk-width-1-1">
-              <mat-chip-list #chipList>
-                <mat-chip *ngIf="formControl.value" [selectable]="false" [removable]="removable"
-                          [attr.uk-tooltip]="getLabel(formControl.value)">
+        </div>
+        <div class="tools">
+          <ng-content select="[tools]"></ng-content>
+        </div>
+      </div>
+      <div #optionBox class="options">
+        <ul *ngIf="options?.length > 1">
+          <li *ngFor="let option of options" [class.uk-active]="formControl.value === option.value">
+            <a (click)="selectOption(option)">{{option.label}}</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <!--<ng-template [ngIf]="type === 'select'">
+      <div [ngClass]="inputClass"
+           [attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':null"
+           [class.clickable]="formControl.enabled"
+           [class.uk-form-danger]="formControl.invalid && formControl.touched" (click)="openSelect()">
+        <mat-form-field class="uk-width-1-1">
+          <mat-select #select [required]="required" [value]="null"
+                      (openedChange)="stopPropagation()" [formControl]="formAsControl"
+                      [disableOptionCentering]="true">
+            <mat-option *ngIf="placeholder" class="uk-hidden" [value]="''">{{placeholder}}</mat-option>
+            <mat-option *ngFor="let option of options" [value]="option.value"
+                        [attr.uk-tooltip]="(tooltip) ? option.label : null">
+              {{option.label}}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+    </ng-template>-->
+    <ng-template [ngIf]="type === 'autocomplete'">
+      <div [ngClass]="inputClass"
+           [attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':null"
+           [class.clickable]="formControl.enabled"
+           [class.uk-form-danger]="formControl.invalid && formControl.touched" (click)="openSelect()">
+        <mat-form-field class="uk-width-1-1">
+          <mat-chip-list #chipList>
+            <mat-chip *ngIf="formControl.value" [selectable]="false" [removable]="removable"
+                      [attr.uk-tooltip]="getLabel(formControl.value)">
                   <span class="uk-flex uk-flex-middle uk-width-1-1">
-                    <span class="uk-width-expand uk-text-truncate" [class.uk-text-small]="smallChip">{{getLabel(formControl.value)}}</span>
+                    <span class="uk-width-expand uk-text-truncate"
+                          [class.uk-text-small]="smallChip">{{getLabel(formControl.value)}}</span>
                     <icon name="remove_circle" class="mat-chip-remove" [flex]="true" [ratio]="smallChip?0.8:1"
                           (click)="resetSearch($event)"></icon>
                   </span>
-                </mat-chip>
-                <div [class.uk-hidden]="formControl.value" class="uk-width-expand uk-position-relative chip-input">
-                  <input #searchInput [formControl]="searchControl" [matAutocomplete]="auto"
-                         [matChipInputFor]="chipList" [matAutocompleteConnectedTo]="origin">
-                  <div *ngIf="placeholder && !searchInput.value" class="placeholder uk-width-1-1"
-                       (click)="searchInput.focus()">{{placeholder}}</div>
-                </div>
-                <div class="uk-width-1-1 uk-invisible" matAutocompleteOrigin #origin="matAutocompleteOrigin"></div>
-              </mat-chip-list>
-              <mat-autocomplete #auto="matAutocomplete" (optionSelected)="formControl.setValue($event.option.value)" [class]="panelClass" [panelWidth]="panelWidth">
-                <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value" [attr.uk-tooltip]="option.label">
-                  {{option.label}}
-                </mat-option>
-              </mat-autocomplete>
-            </mat-form-field>
-          </div>
-        </ng-template>
-        <ng-template [ngIf]="type === 'chips'">
-          <div [ngClass]="inputClass"
-               [attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':null"
-               [class.clickable]="formControl.enabled"
-               [class.uk-form-danger]="formControl.invalid && searchControl.invalid && searchControl.touched" (click)="openSelect()">
-            <mat-form-field class="uk-width-1-1">
-              <mat-chip-list #chipList>
-                <mat-chip *ngFor="let chip of formAsArray.controls; let i=index" [selectable]="false"
-                          [removable]="removable" [attr.uk-tooltip]="getLabel(chip.value)">
-                  <span class="uk-flex uk-flex-middle uk-width-1-1">
-                    <span class="uk-width-expand uk-text-truncate" [class.uk-text-small]="smallChip">{{getLabel(chip.value)}}</span>
-                    <icon name="remove_circle" class="mat-chip-remove" [flex]="true" [ratio]="smallChip?0.8:1" (click)="removed(i)"></icon>
-                  </span>
-                </mat-chip>
-                <div class="uk-width-expand uk-position-relative chip-input">
-                  <input #searchInput style="width: calc(100% - 8px) !important;" [formControl]="searchControl" [matAutocomplete]="auto"
-                         [matChipInputFor]="chipList" [matAutocompleteConnectedTo]="origin"
-                         [matChipInputAddOnBlur]="addExtraChips && searchControl.value"
-                         (matChipInputTokenEnd)="add($event)">
-                  <div *ngIf="placeholder && !searchControl.value" class="placeholder uk-width-1-1"
-                       (click)="searchInput.focus()">{{placeholder}}</div>
-                </div>
-                <div class="uk-width-1-1 uk-invisible" matAutocompleteOrigin #origin="matAutocompleteOrigin"></div>
-              </mat-chip-list>
-              <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" [class]="panelClass" [panelWidth]="panelWidth">
-                <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value" [attr.uk-tooltip]="option.label">
-                  {{option.label}}
-                </mat-option>
-              </mat-autocomplete>
-            </mat-form-field>
-          </div>
-        </ng-template>
-        <span *ngIf="formControl.invalid && formControl.touched" class="uk-text-danger input-message">
-          <span *ngIf="formControl.errors.error">{{formControl.errors.error}}</span>
-          <span *ngIf="type === 'URL' || type === 'logoURL'">Please provide a valid URL (e.g. https://example.com)</span>
-        </span>
-        <span class="uk-text-danger input-message">
-          <ng-content select="[error]"></ng-content>
-        </span>
-        <span *ngIf="formControl.valid" class="uk-text-warning input-message">
-          <ng-content select="[warning]"></ng-content>
-          <span *ngIf="!secure">
-            <span class="uk-text-bold">Note:</span> Prefer urls like "<span class="uk-text-bold">https://</span>example.com/my-secure-image.png"
-                instead of "<span class="uk-text-bold">http://</span>example.com/my-image.png".
-                <span class="uk-text-bold">Browsers may not load non secure content.</span>
-          </span>
-        </span>
-        <span class="input-message">
-          <ng-content select="[note]"></ng-content>
-        </span>
+            </mat-chip>
+            <div [class.uk-hidden]="formControl.value" class="uk-width-expand uk-position-relative chip-input">
+              <input #searchInput [formControl]="searchControl" [matAutocomplete]="auto"
+                     [matChipInputFor]="chipList" [matAutocompleteConnectedTo]="origin">
+              <div *ngIf="placeholder && !searchInput.value" class="placeholder uk-width-1-1"
+                   (click)="searchInput.focus()">{{placeholder}}</div>
+            </div>
+            <div class="uk-width-1-1 uk-invisible" matAutocompleteOrigin #origin="matAutocompleteOrigin"></div>
+          </mat-chip-list>
+          <mat-autocomplete #auto="matAutocomplete" (optionSelected)="formControl.setValue($event.option.value)"
+                            [class]="panelClass" [panelWidth]="panelWidth">
+            <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value"
+                        [attr.uk-tooltip]="option.label">
+              {{option.label}}
+            </mat-option>
+          </mat-autocomplete>
+        </mat-form-field>
       </div>
-    </div>
-    <mat-checkbox *ngIf="type === 'checkbox'" [formControl]="formControl">{{label}}</mat-checkbox>
+    </ng-template>
+    <ng-template [ngIf]="type === 'chips'">
+      <div [ngClass]="inputClass"
+           [attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':null"
+           [class.clickable]="formControl.enabled"
+           [class.uk-form-danger]="formControl.invalid && searchControl.invalid && searchControl.touched"
+           (click)="openSelect()">
+        <mat-form-field class="uk-width-1-1">
+          <mat-chip-list #chipList>
+            <mat-chip *ngFor="let chip of formAsArray.controls; let i=index" [selectable]="false"
+                      [removable]="removable" [attr.uk-tooltip]="getLabel(chip.value)">
+                  <span class="uk-flex uk-flex-middle uk-width-1-1">
+                    <span class="uk-width-expand uk-text-truncate"
+                          [class.uk-text-small]="smallChip">{{getLabel(chip.value)}}</span>
+                    <icon name="remove_circle" class="mat-chip-remove" [flex]="true" [ratio]="smallChip?0.8:1"
+                          (click)="removed(i)"></icon>
+                  </span>
+            </mat-chip>
+            <div class="uk-width-expand uk-position-relative chip-input">
+              <input #searchInput style="width: calc(100% - 8px) !important;" [formControl]="searchControl"
+                     [matAutocomplete]="auto"
+                     [matChipInputFor]="chipList" [matAutocompleteConnectedTo]="origin"
+                     [matChipInputAddOnBlur]="addExtraChips && searchControl.value"
+                     (matChipInputTokenEnd)="add($event)">
+              <div *ngIf="placeholder && !searchControl.value" class="placeholder uk-width-1-1"
+                   (click)="searchInput.focus()">{{placeholder}}</div>
+            </div>
+            <div class="uk-width-1-1 uk-invisible" matAutocompleteOrigin #origin="matAutocompleteOrigin"></div>
+          </mat-chip-list>
+          <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" [class]="panelClass"
+                            [panelWidth]="panelWidth">
+            <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value"
+                        [attr.uk-tooltip]="option.label">
+              {{option.label}}
+            </mat-option>
+          </mat-autocomplete>
+        </mat-form-field>
+      </div>
+    </ng-template>
+    <span *ngIf="formControl.invalid && formControl.touched" class="uk-text-danger input-message">
+      <span *ngIf="formControl.errors.error">{{formControl.errors.error}}</span>
+      <span
+          *ngIf="type === 'URL' || type === 'logoURL'">Please provide a valid URL (e.g. https://example.com)</span>
+    </span>
+    <span class="uk-text-danger uk-text-small">
+      <ng-content select="[error]"></ng-content>
+    </span>
+    <span *ngIf="formControl.valid" class="uk-text-warning uk-text-small">
+      <ng-content select="[warning]"></ng-content>
+      <span *ngIf="!secure">
+        <span class="uk-text-bold">Note:</span> Prefer urls like "<span class="uk-text-bold">https://</span>example.com/my-secure-image.png"
+            instead of "<span class="uk-text-bold">http://</span>example.com/my-image.png".
+            <span class="uk-text-bold">Browsers may not load non secure content.</span>
+      </span>
+    </span>
+    <span class="uk-text-small">
+      <ng-content select="[note]"></ng-content>
+    </span>
   `,
   styleUrls: ['input.component.css']
 })
-export class InputComponent implements OnDestroy, AfterViewInit, OnChanges {
+export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChanges {
   /** Basic information */
   @Input('formInput') formControl: AbstractControl;
-  @Input('type') type: 'text' | 'URL' | 'logoURL' | 'autocomplete' | 'textarea' | 'select' | 'checkbox' | 'chips' = 'text';
+  @Input('type') type: 'text' | 'URL' | 'logoURL' | 'autocomplete' | 'textarea' | 'select' | 'chips' = 'text';
+  @Input() value: any | any[];
+  @Output() valueChange = new EventEmitter<any | any[]>();
+  /** @deprecated */
   @Input('label') label: string;
   /** Text */
   @ViewChild('input') input: ElementRef;
   /** Textarea options */
+  @ViewChild('textArea') textArea: ElementRef;
   @Input('rows') rows: number = 3;
   /** Select | chips available options */
   @Input('options') options: Option[] = [];
+  /** @deprecated */
   @Input('hint') hint = null;
   @Input('placeholder') placeholder = '';
-  @Input() inputClass: string = 'input-box';
+  @Input() inputClass: string = 'inner';
   /** Extra element Right or Left of the input */
+  /** @deprecated */
   @Input() extraLeft: boolean = true;
+  /** @deprecated */
   @Input() gridSmall: boolean = false;
+  /** @deprecated */
   @Input() hideControl: boolean = false;
+  /** @deprecated */
   @Input() flex: 'middle' | 'top' | 'bottom' = 'middle';
-  /** Icon Right or Left on the input */
+  /** Icon on the input */
   @Input() icon: string = null;
+  /** @deprecated */
   @Input() iconLeft: boolean = false;
   /** Chip options */
   @Input() removable: boolean = true;
@@ -202,31 +222,69 @@ export class InputComponent implements OnDestroy, AfterViewInit, OnChanges {
   @Input() panelClass: string = null;
   @Input() showOptionsOnEmpty: boolean = true;
   @Input() validators: ValidatorFn[] | ValidatorFn;
+  @Input() disabled: boolean = false;
   @Output() focusEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
   /** LogoUrl information */
   public secure: boolean = true;
   /** Internal basic information */
   public required: boolean = false;
+  public focused: boolean = false;
+  public opened: boolean = false;
+  public properties: EnvProperties = properties;
   private initValue: any;
+  private subscriptions: any[] = [];
   /** Chips && Autocomplete*/
   public filteredOptions: Observable<Option[]>;
   public searchControl: FormControl;
-  private subscriptions: any[] = [];
-	@Input() tooltip: boolean = true;
-  @ViewChild('select') select: MatSelect;
+  @Input() tooltip: boolean = true;
+  @ViewChild('inputBox') inputBox: ElementRef;
+  @ViewChild('optionBox') optionBox: ElementRef;
   @ViewChild('searchInput') searchInput: ElementRef;
-  focused: boolean = false;
   
   constructor(private elementRef: ElementRef) {
+    if (elementRef.nativeElement.hasAttribute('dashboard-input') && this.properties.environment === "development") {
+      console.warn("'dashboard-input' selector is deprecated; use 'input' instead.");
+    }
   }
   
   @HostListener('document:click', ['$event'])
-  clickOut(event) {
-    this.focused = !!this.elementRef.nativeElement.contains(event.target);
+  click(event) {
+    this.focused = (this.inputBox && this.inputBox.nativeElement.contains(event.target));
+    if (this.focused) {
+      if(this.input) {
+        this.input.nativeElement.focus();
+      } else if(this.textArea) {
+        this.textArea.nativeElement.focus();
+      }
+      this.open(!this.opened);
+    } else {
+      this.open(false);
+    }
     this.focusEmitter.emit(this.focused);
   }
   
+  ngOnInit() {
+    if(!this.formControl) {
+      if(Array.isArray(this.value)) {
+        this.formControl = new FormArray([]);
+        this.value.forEach(value => {
+          this.formAsArray.push(new FormControl(value, this.validators));
+        });
+      } else {
+        this.formControl = new FormControl(this.value);
+        this.formControl.setValidators(this.validators);
+      }
+      if(this.disabled) {
+        this.formControl.disable();
+      }
+    }
+  }
+  
   ngAfterViewInit() {
+    /** If options are available set max-height base on input-wrapper height */
+    if(this.options && this.options.length > 1) {
+      this.elementRef.nativeElement.style.maxHeight = this.inputBox.nativeElement.clientHeight + 'px';
+    }
     this.reset();
   }
   
@@ -236,26 +294,38 @@ export class InputComponent implements OnDestroy, AfterViewInit, OnChanges {
     }
   }
   
+  get formAsControl(): FormControl {
+    if (this.formControl instanceof FormControl) {
+      return this.formControl;
+    } else {
+      return null;
+    }
+  }
+  
   get formAsArray(): FormArray {
-    return (<FormArray>this.formControl);
+    if (this.formControl instanceof FormArray) {
+      return this.formControl;
+    } else {
+      return null;
+    }
   }
   
   reset() {
     this.secure = true;
     this.unsubscribe();
     this.initValue = HelperFunctions.copy(this.formControl.value);
-    if(this.type === 'logoURL') {
+    if (this.type === 'logoURL') {
       this.secure = (!this.initValue || this.initValue.includes('https://'));
     }
     if (this.type === 'chips' || this.type === 'autocomplete') {
-      if(this.options) {
+      if (this.options) {
         this.filteredOptions = of(this.options);
         this.searchControl = new FormControl('', this.validators);
         this.subscriptions.push(this.searchControl.valueChanges.subscribe(value => {
           setTimeout(() => {
             this.searchInput.nativeElement.focus();
             this.searchInput.nativeElement.value = value;
-          },0);
+          }, 0);
         }));
         this.filteredOptions = this.searchControl.valueChanges.pipe(startWith(''),
           map(option => this.filter(option)));
@@ -267,20 +337,19 @@ export class InputComponent implements OnDestroy, AfterViewInit, OnChanges {
     }
     this.subscriptions.push(this.formControl.valueChanges.subscribe(value => {
       value = (value === '') ? null : value;
-      if(this.type === 'logoURL') {
+      if (this.type === 'logoURL') {
         this.secure = (!value || value.includes('https://'));
       }
       if (this.initValue === value || (this.initValue === '' && value === null)) {
         this.formControl.markAsPristine();
       }
-      if(this.searchControl) {
+      if (this.searchControl) {
         this.searchControl.setValue(null);
       }
+      this.value = this.formControl.value;
+      this.valueChange.emit(this.value);
     }));
-    if (!this.formControl.value) {
-      this.formControl.setValue((this.type === "checkbox")?false:'');
-    }
-    if(this.input) {
+    if (this.input) {
       this.input.nativeElement.disabled = this.formControl.disabled;
     }
   }
@@ -293,12 +362,6 @@ export class InputComponent implements OnDestroy, AfterViewInit, OnChanges {
     });
   }
   
-  openSelect() {
-    if (this.select) {
-      this.select.open();
-    }
-  }
-  
   ngOnDestroy(): void {
     this.unsubscribe();
   }
@@ -323,11 +386,11 @@ export class InputComponent implements OnDestroy, AfterViewInit, OnChanges {
   
   private filter(value: string): Option[] {
     let options = this.options;
-    if(this.type === "chips") {
-      options = options.filter(option => !this.formAsArray.value.find(value =>  HelperFunctions.equals(option.value, value)));
+    if (this.type === "chips") {
+      options = options.filter(option => !this.formAsArray.value.find(value => HelperFunctions.equals(option.value, value)));
     }
     if ((!value || value.length == 0)) {
-      return (this.showOptionsOnEmpty)?options:[];
+      return (this.showOptionsOnEmpty) ? options : [];
     }
     const filterValue = value.toString().toLowerCase();
     return options.filter(option => option.label.toLowerCase().indexOf(filterValue) != -1);
@@ -348,10 +411,23 @@ export class InputComponent implements OnDestroy, AfterViewInit, OnChanges {
     return (option) ? option.label : value;
   }
   
+  open(value: boolean) {
+    this.opened = value && this.formControl.enabled;
+    setTimeout(() => {
+      this.optionBox.nativeElement.style.overflow = this.opened?'auto':'hidden';
+    }, this.opened?200:0);
+  }
+  
   resetSearch(event: any) {
     event.stopPropagation();
     this.searchControl.setValue('');
-		this.formControl.markAsDirty(); // TODO check - should it also become dirty on addition?
+    this.formControl.markAsDirty();
     this.formControl.setValue(null);
   }
+  
+  selectOption(option: Option) {
+    if(this.formAsControl) {
+      this.formAsControl.setValue(option.value);
+    }
+  }
 }
diff --git a/utils/icons/icons.ts b/utils/icons/icons.ts
index 847782dd..bb26a560 100644
--- a/utils/icons/icons.ts
+++ b/utils/icons/icons.ts
@@ -156,7 +156,7 @@ export const incognito = {
 
 export const restricted = {
   name: 'restricted',
-  data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g id="noun-remove-file-3557544" transform="translate(-176.397 -106.4)"><path id="Path_104600" data-name="Path 104600" d="M181.881,274.166A5.485,5.485,0,1,0,178,272.559,5.484,5.484,0,0,0,181.881,274.166Zm-3.548-5.484a3.531,3.531,0,0,1,.452-1.729l4.839,4.839a3.548,3.548,0,0,1-5.29-3.11Zm7.1,0a3.527,3.527,0,0,1-.452,1.729l-4.839-4.839a3.548,3.548,0,0,1,5.29,3.11Z" transform="translate(0 -147.766)" fill="#4b4b4b"/><path id="Path_104601" data-name="Path 104601" d="M245.859,106.4a2.258,2.258,0,0,0-2.258,2.258v4.516h1.936v-4.516a.323.323,0,0,1,.323-.323h8.064v3.871h3.871v11.935a.323.323,0,0,1-.323.323h-5.484V126.4h5.484a2.259,2.259,0,0,0,2.258-2.258v-13.3l-4.439-4.439Z" transform="translate(-63.333)" fill="#4b4b4b"/></g></svg>'
+  data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g id="noun-remove-file-3557544" transform="translate(-176.397 -106.4)"><path id="Path_104600" data-name="Path 104600" d="M181.881,274.166A5.485,5.485,0,1,0,178,272.559,5.484,5.484,0,0,0,181.881,274.166Zm-3.548-5.484a3.531,3.531,0,0,1,.452-1.729l4.839,4.839a3.548,3.548,0,0,1-5.29-3.11Zm7.1,0a3.527,3.527,0,0,1-.452,1.729l-4.839-4.839a3.548,3.548,0,0,1,5.29,3.11Z" transform="translate(0 -147.766)"/><path id="Path_104601" data-name="Path 104601" d="M245.859,106.4a2.258,2.258,0,0,0-2.258,2.258v4.516h1.936v-4.516a.323.323,0,0,1,.323-.323h8.064v3.871h3.871v11.935a.323.323,0,0,1-.323.323h-5.484V126.4h5.484a2.259,2.259,0,0,0,2.258-2.258v-13.3l-4.439-4.439Z" transform="translate(-63.333)"/></g></svg>'
 }
 
 export const graph = {