fix(spinner): add color input property to spinner, fix class clobbering

fixes #7087 fixes #7401

src/components.ios.scss

@@ -30,6 +30,7 @@
   "components/searchbar/searchbar.ios",
   "components/segment/segment.ios",
   "components/select/select.ios",
+  "components/spinner/spinner.ios",
   "components/tabs/tabs.ios",
   "components/toggle/toggle.ios",
   "components/toast/toast.ios",

src/components.md.scss

@@ -30,6 +30,7 @@
   "components/searchbar/searchbar.md",
   "components/segment/segment.md",
   "components/select/select.md",
+  "components/spinner/spinner.md",
   "components/tabs/tabs.md",
   "components/toggle/toggle.md",
   "components/toast/toast.md",

src/components.wp.scss

@@ -30,6 +30,7 @@
   "components/searchbar/searchbar.wp",
   "components/segment/segment.wp",
   "components/select/select.wp",
+  "components/spinner/spinner.wp",
   "components/tabs/tabs.wp",
   "components/toggle/toggle.wp",
   "components/toast/toast.wp",

src/components/spinner/spinner.ios.scss

@@ -0,0 +1,24 @@
+@import "./spinner";
+
+// iOS Spinner
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+
+  .spinner-#{$color-name} {
+
+    &.spinner-ios line,
+    &.spinner-ios-small line,
+    &.spinner-crescent circle {
+      stroke: $color-base;
+    }
+
+    &.spinner-bubbles circle,
+    &.spinner-circles circle,
+    &.spinner-dots circle {
+      fill: $color-base;
+    }
+
+  }
+
+}

src/components/spinner/spinner.md.scss

@@ -0,0 +1,24 @@
+@import "./spinner";
+
+// Material Design Spinner
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+
+  .spinner-#{$color-name} {
+
+    &.spinner-ios line,
+    &.spinner-ios-small line,
+    &.spinner-crescent circle {
+      stroke: $color-base;
+    }
+
+    &.spinner-bubbles circle,
+    &.spinner-circles circle,
+    &.spinner-dots circle {
+      fill: $color-base;
+    }
+
+  }
+
+}

src/components/spinner/spinner.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Input, Renderer, ViewEncapsulation } from '@angular/core';
 import { NgFor, NgStyle } from '@angular/common';
 
 import { Config } from '../../config/config';
@@ -108,7 +108,6 @@ import { Config } from '../../config/config';
   `,
   directives: [NgFor, NgStyle],
   host: {
-    '[class]': '_applied',
     '[class.spinner-paused]': 'paused'
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -122,6 +121,21 @@ export class Spinner {
   private _init: boolean;
   private _applied: string;
 
+  /** @internal */ 
+  _color: string;
+
+  /**
+   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   */
+  @Input()
+  get color(): string {
+    return this._color;
+  }
+
+  set color(value: string) {
+    this._updateColor(value);
+  }  
+
   /**
    * @input {string} SVG spinner name.
    */
@@ -153,7 +167,11 @@ export class Spinner {
    */
   @Input() paused: boolean = false;
 
-  constructor(private _config: Config) {}
+  constructor(
+    private _config: Config, 
+    private _elementRef: ElementRef,
+    private _renderer: Renderer
+  ) {}
 
   /**
    * @private
@@ -188,6 +206,7 @@ export class Spinner {
           }
         }
 
+        this._renderer.setElementClass(this._elementRef.nativeElement, this._applied, true);
       }
     }
   }
@@ -199,6 +218,24 @@ export class Spinner {
     return data;
   }
 
+  /**
+   * @internal
+   */
+  _updateColor(newColor: string) {
+    this._setElementColor(this._color, false);
+    this._setElementColor(newColor, true);
+    this._color = newColor;
+  }
+
+  /**
+   * @internal
+   */
+  _setElementColor(color: string, isAdd: boolean) {
+    if (color !== null && color !== '') {
+      this._renderer.setElementClass(this._elementRef.nativeElement, `spinner-${color}`, isAdd);
+    }
+  }
+
 }
 
 const SPINNERS: any = {

src/components/spinner/spinner.wp.scss

@@ -0,0 +1,24 @@
+@import "./spinner";
+
+// Windows Spinner
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+
+  .spinner-#{$color-name} {
+
+    &.spinner-ios line,
+    &.spinner-ios-small line,
+    &.spinner-crescent circle {
+      stroke: $color-base;
+    }
+
+    &.spinner-bubbles circle,
+    &.spinner-circles circle,
+    &.spinner-dots circle {
+      fill: $color-base;
+    }
+
+  }
+
+}

src/components/spinner/test/colors/index.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { ionicBootstrap } from '../../../../../src';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+class E2EPage {
+  paused: boolean = false;
+
+  toggleState() {
+    this.paused = !this.paused;
+  }
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class E2EApp {
+  root = E2EPage;
+}
+
+ionicBootstrap(E2EApp);

src/components/spinner/test/colors/main.html

@@ -0,0 +1,59 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Spinners</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content padding>
+
+  <table style="border-collapse:initial; border-spacing: 20px">
+    <tr>
+      <td>Platform Default</td>
+      <td>
+        <ion-spinner color="primary" [paused]="paused"></ion-spinner>
+      </td>
+    </tr>
+    <tr>
+      <td>ios</td>
+      <td>
+        <ion-spinner color="secondary" name="ios" duration="1000" [paused]="paused"></ion-spinner>
+      </td>
+    </tr>
+    <tr>
+      <td>ios-small</td>
+      <td>
+        <ion-spinner color="danger" name="ios-small" duration="1000" [paused]="paused"></ion-spinner>
+      </td>
+    </tr>
+    <tr>
+      <td>bubbles</td>
+      <td>
+        <ion-spinner color="light" name="bubbles" [paused]="paused"></ion-spinner>
+      </td>
+    </tr>
+    <tr>
+      <td>circles</td>
+      <td>
+        <ion-spinner color="secondary" name="circles" [paused]="paused"></ion-spinner>
+      </td>
+    </tr>
+    <tr>
+      <td>crescent</td>
+      <td>
+        <ion-spinner color="primary" name="crescent" [paused]="paused"></ion-spinner>
+      </td>
+    </tr>
+    <tr>
+      <td>dots</td>
+      <td>
+        <ion-spinner color="danger" name="dots" [paused]="paused"></ion-spinner>
+      </td>
+    </tr>
+  </table>
+
+  <button ion-button (click)="toggleState()">Toggle Paused</button>
+
+</ion-content>