chore: update to ionic v4,

src/ion-tags-input/colors.ts

@@ -1,10 +1,17 @@
 export const TAG_COLORS = {
-  "default": "#4a8bfc",
-  "secondary": "#32db64",
-  "danger": "#f53d3d",
-  "warn": "#ffc125",
+  // ionic colors
+  'primary':null, 
+  'secondary':null, 
+  'tertiary':null, 
+  'success':null, 
+  'warning':null, 
+  'danger':null, 
+  'dark':null, 
+  'medium':null, 
+  'light':null,
+
+  // custom colors
+  "warn": "green",  
   "gray": "#767676",
   "purple": "#7e60ff",
-  "dark": "#222",
-  "light": "#bcbcbc"
 };

src/ion-tags-input/ion-tag.ts

@@ -1,6 +1,7 @@
-import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { Component, EventEmitter, HostBinding, Input, Output } from "@angular/core";
 import { TAG_COLORS } from "./colors";
 
+
 @Component({
   selector: 'ion-tag',
   template: `
@@ -12,32 +13,70 @@ import { TAG_COLORS } from "./colors";
  </span>  
   `,
   host: {
-    'class': 'iti-tag iti-tag-color',
-    '[class.iti-tag-md]': 'mode === "md"',
-    '[class.iti-tag-ios]': 'mode === "ios"',
-    '[class.iti-tag-wp]': 'mode === "wp"',
-    '[style.background-color]': '_color'
+    '[style.background-color]': '_bgColor',
   },
   styleUrls: [/** COMPONENT_STYLE */]
 })
+
 export class IonTag {
+  private _bgColor: string;
+  public ionColorClasses: string;
 
-  _color: string = TAG_COLORS['default'];
+  @HostBinding('class')
+  get ionColorClass() {
+    return this.ionColorClasses;
+  };
 
   @Input() tag: string;
   @Input() allowClear: boolean = true;
   @Input() mode: 'md' | 'ios' | 'wp';
   @Output() onClear: EventEmitter<string> = new EventEmitter();
   @Input()
   set color(value: string) {
-    if (value !== 'random') {
-      this._color = value;
-    } else {
-      const keys = Object.keys(TAG_COLORS);
-      const max = keys.length + 1;
-      let index = Math.floor(Math.random() * max);
-      this._color = (TAG_COLORS[keys[index]] as string)
+    this.ionColorClasses = `iti-tag iti-tag-color iti-tag-${this.mode} `;
+    if (value === 'random') {
+      value = RandomShuffled.next(Object.keys(TAG_COLORS));
     }
+    if (TAG_COLORS[value] === null) {
+      // use ionic colors
+      this.ionColorClasses += `ion-color ion-color-${value}`;
+      this._bgColor = null;
+      return;
+    }
+    this._bgColor = TAG_COLORS[value] || value;
   };
 
 }
+
+
+
+/**
+ * iterate through a random shuffled array colors so colors are not repeated
+ */
+class RandomShuffled {
+  static shuffled:Array<string>= [];
+  static next(array: Array<string>):string {
+    if (RandomShuffled.shuffled.length)
+      return RandomShuffled.shuffled.pop();
+
+    array = array.slice();  // make a copy
+    let currentIndex = array.length;
+    let temporaryValue:string;
+    let randomIndex:number;
+
+    // While there remain elements to shuffle...
+    while (0 !== currentIndex) {
+
+      // Pick a remaining element...
+      randomIndex = Math.floor(Math.random() * currentIndex);
+      currentIndex -= 1;
+
+      // And swap it with the current element.
+      temporaryValue = array[currentIndex];
+      array[currentIndex] = array[randomIndex];
+      array[randomIndex] = temporaryValue;
+    }
+    RandomShuffled.shuffled = array;
+    return array.pop();
+  }
+}

src/ion-tags-input/ion-tags-input.module.ts

@@ -6,7 +6,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgModule } from '@angular/core';
 import { IonTagsInput } from "./ion-tags-input";
 import { IonTag } from "./ion-tag";
-import { IonicModule } from "ionic-angular";
+import { IonicModule } from '@ionic/angular';
 
 @NgModule({
   imports: [

src/ion-tags-input/ion-tags-input.scss

@@ -1,6 +1,6 @@
 .ion-tags-input {
 
-  $default-color: #4a8bfc;
+  $default-color: var(--ion-color-primary);
 
   .iti-tag-color {
     background-color: $default-color;
@@ -35,6 +35,11 @@
     &.iti-tag-md {
       border-radius: 4px;
     }
+
+    &.ion-color {
+      color: var(--ion-color-contrast);
+      background-color: var(--ion-color-base);
+    }
   }
 
   .iti-input {

src/ion-tags-input/ion-tags-input.ts

@@ -12,15 +12,15 @@ import {
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 
-import { Platform } from 'ionic-angular';
+import { Platform } from '@ionic/angular';
 import { TAG_COLORS } from "./colors";
 
 
 export const CITY_PICKER_VALUE_ACCESSOR: any = {
   provide: NG_VALUE_ACCESSOR,
   useExisting: forwardRef(() => IonTagsInput),
   multi: true
-};
+};  
 
 @Component({
   selector: 'ion-tags-input',
@@ -42,7 +42,7 @@ export const CITY_PICKER_VALUE_ACCESSOR: any = {
          [placeholder]="placeholder"
          [(ngModel)]="_editTag"
          (blur)="blur()"
-         (keyup.backspace)="keyRemoveTag($event); false"
+         (keyup.backspace)="keyRemoveTag(); false"
          (keyup)="separatorStrAddTag()"
          (keyup.enter)="keyAddTag()">
   `,
@@ -53,7 +53,10 @@ export const CITY_PICKER_VALUE_ACCESSOR: any = {
     '[class.readonly]': 'readonly'
   },
   encapsulation: ViewEncapsulation.None,
-  styleUrls: [/** COMPONENT_STYLE */]
+  styleUrls: [
+    /** COMPONENT_STYLE */
+    './ion-tags-input.scss'
+  ]
 })
 export class IonTagsInput implements ControlValueAccessor, OnInit {
 
@@ -70,11 +73,7 @@ export class IonTagsInput implements ControlValueAccessor, OnInit {
   @Input() verifyMethod: (tagSrt: string) => boolean;
   @Input()
   set color(value: string) {
-    if (TAG_COLORS.hasOwnProperty(value)) {
-      this.cssColor = (TAG_COLORS[value] as string);
-    } else {
-      this.cssColor = value;
-    }
+    this.cssColor = value;
   }
   @Input()
   set once(value: boolean | string) {
@@ -246,7 +245,8 @@ export class IonTagsInput implements ControlValueAccessor, OnInit {
   }
 
   initMode(): any {
-    this.mode = this.plt.is('ios') ? 'ios' : this.plt.is('android') ? 'md' : this.plt.is('windows') ? 'mp' : 'md';
+    this.mode = this.plt.is('ios') ? 'ios' : this.plt.is('android') ? 'md' : 'md';
   }
 
 }
+