From 7f20cb104424dfd07a3348396b0720bda8053343 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Mon, 19 Oct 2020 15:05:16 +0000
Subject: [PATCH] [Library | Trunk]: Add new icons. Add outlined buttons on
 theme page

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59623 d315682c-612b-4755-9ff5-7f18f6832af3
---
 .../sharedComponents/input/input.component.ts    | 11 ++++++-----
 utils/icons/icons.component.ts                   |  2 +-
 utils/icons/icons.ts                             | 16 ++++++++++++++++
 utils/theme/theme.component.html                 | 13 ++++++++++---
 4 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/dashboard/sharedComponents/input/input.component.ts b/dashboard/sharedComponents/input/input.component.ts
index 5e6c54b2..603e46ea 100644
--- a/dashboard/sharedComponents/input/input.component.ts
+++ b/dashboard/sharedComponents/input/input.component.ts
@@ -18,17 +18,17 @@ export interface Option {
     <div *ngIf="label"
          class="uk-text-bold uk-form-label uk-margin-small-bottom">{{label + (required ? ' *' : '')}}</div>
     <div *ngIf="hint" class="uk-margin-bottom uk-text-small uk-form-hint">{{hint}}</div>
-    <div class="uk-grid" uk-grid>
+    <div class="uk-grid uk-flex uk-flex-middle" uk-grid>
       <ng-content></ng-content>
-      <div class="uk-width-expand@m" [class.uk-flex-first]="!extraLeft">
+      <div [class.uk-hidden]="hideControl"  class="uk-width-expand@m" [class.uk-flex-first]="!extraLeft">
         <ng-template [ngIf]="type === 'text'">
           <input class="uk-input input-box uk-text-small" [placeholder]="placeholder" [formControl]="formControl"
                  [class.uk-form-danger]="formControl.invalid && formControl.touched">
         </ng-template>
         <ng-template [ngIf]="type === 'textarea'">
-      <textarea class="uk-textarea input-box uk-text-small" [rows]="rows" [placeholder]="placeholder"
-                [formControl]="formControl" [class.uk-form-danger]="formControl.invalid && formControl.touched">
-      </textarea>
+          <textarea class="uk-textarea input-box uk-text-small" [rows]="rows" [placeholder]="placeholder"
+                    [formControl]="formControl" [class.uk-form-danger]="formControl.invalid && formControl.touched">
+          </textarea>
         </ng-template>
         <ng-template [ngIf]="type === 'select'">
           <div class="input-box clickable" [class.uk-form-danger]="formControl.invalid && formControl.touched" (click)="openSelect()">
@@ -58,6 +58,7 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges {
   @Input('placeholder') placeholder = '';
   @ViewChild('select') select: MatSelect;
   @Input() extraLeft: boolean = true;
+  @Input() hideControl: boolean = false;
   public required: boolean = false;
   private initValue: any;
   private subscriptions: any[] = [];
diff --git a/utils/icons/icons.component.ts b/utils/icons/icons.component.ts
index e09e588b..0a7994a7 100644
--- a/utils/icons/icons.component.ts
+++ b/utils/icons/icons.component.ts
@@ -14,7 +14,7 @@ import {IconsService} from "./icons.service";
 @Component({
   selector: 'icon',
   template: `
-    <span *ngIf="svg" class="uk-icon" [class.uk-display-inline-block]="!flex" [class.uk-flex]="flex" [ngClass]="customClass" [ngStyle]="style" [innerHTML]="svg | safeHtml"></span>
+    <span *ngIf="svg" class="uk-icon" [class.uk-flex]="flex" [ngClass]="customClass" [ngStyle]="style" [innerHTML]="svg | safeHtml"></span>
   `
 })
 export class IconsComponent implements OnInit{
diff --git a/utils/icons/icons.ts b/utils/icons/icons.ts
index be5ac0fc..75f9a55f 100644
--- a/utils/icons/icons.ts
+++ b/utils/icons/icons.ts
@@ -3,6 +3,11 @@ export interface Icon {
   data: string
 }
 
+export const arrow_left: Icon = {
+  name: 'arrow_left',
+  data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M20 11H6.83l2.88-2.88c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L3.71 11.3c-.39.39-.39 1.02 0 1.41L8.3 17.3c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L6.83 13H20c.55 0 1-.45 1-1s-.45-1-1-1z"/></svg>'
+}
+
 export const arrow_right: Icon = {
   name: 'arrow_right',
   data: '<svg height="20" viewBox="0 0 16 16" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M12.578,4.244,5.667,11.155V8.167A.833.833,0,1,0,4,8.167v5A.832.832,0,0,0,4.833,14h5a.833.833,0,0,0,0-1.667H6.845l6.911-6.911a.833.833,0,1,0-1.178-1.178h0Z" transform="translate(7.071 19.799) rotate(-135)"></path></svg>'
@@ -37,3 +42,14 @@ export const earth: Icon = {
   name: 'earth',
   data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 30 30"><path id="earth" d="M15,0A15,15,0,1,0,30,15,15,15,0,0,0,15,0Zm0,28.125a13.086,13.086,0,0,1-5.192-1.068l6.831-7.685a.935.935,0,0,0,.237-.622V15.938A.938.938,0,0,0,15.938,15c-3.31,0-6.8-3.442-6.837-3.475a.937.937,0,0,0-.663-.275H4.688a.938.938,0,0,0-.937.937v5.625a.936.936,0,0,0,.518.838L7.5,20.267v5.5A13.132,13.132,0,0,1,3.14,9.375H6.563A.935.935,0,0,0,7.226,9.1l3.75-3.75a.937.937,0,0,0,.275-.663V2.42a13.164,13.164,0,0,1,9.5.779c-.122.1-.24.21-.353.323a5.626,5.626,0,0,0,3.974,9.6c.093,0,.186,0,.278-.007A22.007,22.007,0,0,1,24.4,24.027a.878.878,0,0,0-.024.153A13.084,13.084,0,0,1,15,28.125Z"/></svg>'
 }
+
+export const edit: Icon = {
+  name: 'edit',
+  data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1c-.1.1-.15.22-.15.36zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>'
+}
+
+export const remove: Icon = {
+  name: 'remove',
+  data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z"/></svg>'
+}
+
diff --git a/utils/theme/theme.component.html b/utils/theme/theme.component.html
index 9ded1579..9ac632f0 100644
--- a/utils/theme/theme.component.html
+++ b/utils/theme/theme.component.html
@@ -104,7 +104,14 @@
                 <button class="uk-button uk-button-default" disabled="">Disabled</button>
               </div>
             </div>
-
+            <div class="uk-grid-small uk-child-width-auto uk-flex-middle uk-margin-medium uk-grid" uk-grid="">
+              <div>
+                <button class="uk-button uk-button-primary outlined">Outlined Primary</button>
+              </div>
+              <div>
+                <button class="uk-button uk-button-secondary outlined">Outlined Secondary</button>
+              </div>
+            </div>
             <hr class="uk-margin-medium">
 
             <div class="uk-child-width-1-2 uk-child-width-1-4@s uk-margin uk-grid" uk-grid="">
@@ -148,8 +155,8 @@
                   <li><span class="uk-label uk-label-danger">Danger</span></li>
                   <li><a class="uk-badge" href="#">1</a></li>
                   <li>
-                    <a class="uk-icon-button uk-icon" href="#" uk-icon="icon: home"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="home"><polygon points="18.65 11.35 10 2.71 1.35 11.35 0.65 10.65 10 1.29 19.35 10.65"></polygon><polygon points="15 4 18 4 18 7 17 7 17 5 15 5"></polygon><polygon points="3 11 4 11 4 18 7 18 7 12 12 12 12 18 16 18 16 11 17 11 17 19 11 19 11 13 8 13 8 19 3 19"></polygon></svg></a>
-                    <a class="uk-icon-button uk-icon" href="#" uk-icon="icon: github"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="github"><path d="M10,1 C5.03,1 1,5.03 1,10 C1,13.98 3.58,17.35 7.16,18.54 C7.61,18.62 7.77,18.34 7.77,18.11 C7.77,17.9 7.76,17.33 7.76,16.58 C5.26,17.12 4.73,15.37 4.73,15.37 C4.32,14.33 3.73,14.05 3.73,14.05 C2.91,13.5 3.79,13.5 3.79,13.5 C4.69,13.56 5.17,14.43 5.17,14.43 C5.97,15.8 7.28,15.41 7.79,15.18 C7.87,14.6 8.1,14.2 8.36,13.98 C6.36,13.75 4.26,12.98 4.26,9.53 C4.26,8.55 4.61,7.74 5.19,7.11 C5.1,6.88 4.79,5.97 5.28,4.73 C5.28,4.73 6.04,4.49 7.75,5.65 C8.47,5.45 9.24,5.35 10,5.35 C10.76,5.35 11.53,5.45 12.25,5.65 C13.97,4.48 14.72,4.73 14.72,4.73 C15.21,5.97 14.9,6.88 14.81,7.11 C15.39,7.74 15.73,8.54 15.73,9.53 C15.73,12.99 13.63,13.75 11.62,13.97 C11.94,14.25 12.23,14.8 12.23,15.64 C12.23,16.84 12.22,17.81 12.22,18.11 C12.22,18.35 12.38,18.63 12.84,18.54 C16.42,17.35 19,13.98 19,10 C19,5.03 14.97,1 10,1 L10,1 Z"></path></svg></a>
+                    <a class="uk-icon-button uk-icon uk-margin-small-right" href="#" uk-icon="icon: home"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="home"><polygon points="18.65 11.35 10 2.71 1.35 11.35 0.65 10.65 10 1.29 19.35 10.65"></polygon><polygon points="15 4 18 4 18 7 17 7 17 5 15 5"></polygon><polygon points="3 11 4 11 4 18 7 18 7 12 12 12 12 18 16 18 16 11 17 11 17 19 11 19 11 13 8 13 8 19 3 19"></polygon></svg></a>
+                    <a class="uk-icon-button small uk-icon uk-margin-small-right" href="#" uk-icon="icon: github"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="github"><path d="M10,1 C5.03,1 1,5.03 1,10 C1,13.98 3.58,17.35 7.16,18.54 C7.61,18.62 7.77,18.34 7.77,18.11 C7.77,17.9 7.76,17.33 7.76,16.58 C5.26,17.12 4.73,15.37 4.73,15.37 C4.32,14.33 3.73,14.05 3.73,14.05 C2.91,13.5 3.79,13.5 3.79,13.5 C4.69,13.56 5.17,14.43 5.17,14.43 C5.97,15.8 7.28,15.41 7.79,15.18 C7.87,14.6 8.1,14.2 8.36,13.98 C6.36,13.75 4.26,12.98 4.26,9.53 C4.26,8.55 4.61,7.74 5.19,7.11 C5.1,6.88 4.79,5.97 5.28,4.73 C5.28,4.73 6.04,4.49 7.75,5.65 C8.47,5.45 9.24,5.35 10,5.35 C10.76,5.35 11.53,5.45 12.25,5.65 C13.97,4.48 14.72,4.73 14.72,4.73 C15.21,5.97 14.9,6.88 14.81,7.11 C15.39,7.74 15.73,8.54 15.73,9.53 C15.73,12.99 13.63,13.75 11.62,13.97 C11.94,14.25 12.23,14.8 12.23,15.64 C12.23,16.84 12.22,17.81 12.22,18.11 C12.22,18.35 12.38,18.63 12.84,18.54 C16.42,17.35 19,13.98 19,10 C19,5.03 14.97,1 10,1 L10,1 Z"></path></svg></a>
                     <a class="uk-icon-link uk-icon" href="#" uk-icon="icon: trash"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="trash"><polyline fill="none" stroke="#000" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline><polyline fill="none" stroke="#000" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline><rect x="8" y="7" width="1" height="9"></rect><rect x="11" y="7" width="1" height="9"></rect><rect x="2" y="3" width="16" height="1"></rect></svg></a>
                   </li>
                 </ul>