Remove text transform from chips in input

sharedComponents/input/input.component.ts

@@ -23,14 +23,22 @@ import {properties} from "../../../../environments/environment";
 import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive";
 import {element} from "protractor";
 
-export type InputType = 'text' | 'URL' | 'logoURL' | 'autocomplete' | 'autocomplete_soft' | 'textarea' | 'select' | 'chips';
+export type InputType =
+  'text'
+  | 'URL'
+  | 'logoURL'
+  | 'autocomplete'
+  | 'autocomplete_soft'
+  | 'textarea'
+  | 'select'
+  | 'chips';
 
 export interface Option {
   icon?: string,
   iconClass?: string,
   value: any,
   label: string,
-	tooltip?: string,
+  tooltip?: string,
   disabled?: boolean,
   hidden?: boolean
 }
@@ -112,7 +120,7 @@ declare var UIkit;
                 <div *ngFor="let chip of formAsArray.controls; let i=index" #chip
                      [class.uk-hidden]="!focused && i > visibleChips - 1"
                      class="chip">
-                  <div class="uk-label uk-label-small uk-flex uk-flex-middle"
+                  <div class="uk-label uk-label-small uk-text-transform-none uk-flex uk-flex-middle"
                        [attr.uk-tooltip]="(tooltip)?('title: ' + getLabel(chip.value) + '; delay: 500; pos: bottom-left'):null">
                     <span class="uk-text-truncate uk-width-expand">{{getLabel(chip.value)}}</span>
                     <icon *ngIf="focused" (click)="remove(i, $event)"
@@ -274,10 +282,10 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
         return option;
       }
     });
-    if(!this.tooltip) {
+    if (!this.tooltip) {
       this.tooltip = this.optionsArray.length > 0;
     }
-    if(this.type === "select") {
+    if (this.type === "select") {
       if (this.optionsArray.length > this.optionsBreakpoint) {
         this.type = 'autocomplete';
         this.showOptionsOnEmpty = true;
@@ -317,11 +325,11 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
   
   @HostListener('window:keydown.arrowLeft', ['$event'])
   arrowLeft(event: KeyboardEvent) {
-    if(this.focused) {
+    if (this.focused) {
       event.preventDefault();
-      if(this.activeElement.getValue()) {
+      if (this.activeElement.getValue()) {
         let index = this.chips.toArray().indexOf(this.activeElement.getValue());
-        if(index > 0) {
+        if (index > 0) {
           this.activeElement.next(this.chips.get(index - 1));
           return;
         }
@@ -331,11 +339,11 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
   
   @HostListener('window:keydown.arrowRight', ['$event'])
   arrowRight(event: KeyboardEvent) {
-    if(this.focused) {
+    if (this.focused) {
       event.preventDefault();
-      if(this.activeElement.getValue()) {
+      if (this.activeElement.getValue()) {
         let index = this.chips.toArray().indexOf(this.activeElement.getValue());
-        if(index < this.chips.length - 1) {
+        if (index < this.chips.length - 1) {
           this.activeElement.next(this.chips.get(index + 1));
           return;
         }
@@ -355,7 +363,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
     } else {
       this.focus(false, event);
     }
-    if(this.extendEnter) {
+    if (this.extendEnter) {
       this.extendEnter();
     }
   }
@@ -389,7 +397,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
       }
     }
     this.activeElement.subscribe(element => {
-      if(element) {
+      if (element) {
         element.nativeElement.scrollIntoView({behavior: 'smooth'});
       }
     })
@@ -404,7 +412,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
       if (changes.value) {
         this.formControl.setValue(this.value);
       }
-      if(changes.validators) {
+      if (changes.validators) {
         this.updateValidators();
       }
       if (changes.formControl || changes.validators || changes.options) {
@@ -508,7 +516,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
   }
   
   updateValidators() {
-    if(this.formAsArray) {
+    if (this.formAsArray) {
       this.formAsArray.controls.forEach(control => {
         control.setValidators(this.validators);
         control.updateValueAndValidity();
@@ -548,15 +556,33 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
   }
   
   add(event, addChips = false) {
-    if (addChips && this.searchControl.value && this.searchControl.valid) {
+    if (addChips && this.searchControl.value) {
-      if (event && event.stopPropagation) {
+      this.splitSearchControl();
-        event.stopPropagation();
+    } else if (!this.focused) {
-      }
-      this.formAsArray.push(new UntypedFormControl(this.searchControl.value, this.validators));
-      this.formAsArray.markAsDirty();
       this.searchControl.setValue('');
+    }
+  }
+  
+  splitSearchControl() {
+    let values = [this.searchControl.value];
+    this.separators.forEach(separator => {
+      values = ([] as string[]).concat(...values.map(value => {
+        if (Array.isArray(value)) {
+          return ([] as string[]).concat(...value.map(element => element.split(separator)));
+        } else {
+          return value.split(separator);
+        }
+      }));
+    });
+    values.forEach(value => {
+      let control = new UntypedFormControl(value.trim(), this.validators);
+      if (control.valid) {
+        this.formAsArray.push(control);
+        this.formAsArray.markAsDirty();
+      }
+    });
+    if (this.formAsArray.dirty) {
       this.activeElement.next(this.chips.last);
-    } else if(!this.focused) {
       this.searchControl.setValue('');
     }
   }
@@ -566,7 +592,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
     return (option) ? option.label : (value);
   }
   
-	getTooltip(value: any): string {
+  getTooltip(value: any): string {
     let option = this.optionsArray.find(option => HelperFunctions.equals(option.value, value));
     return (option) ? (option.tooltip ? option.tooltip : option.label) : (value);
   }