feat(icon): add dotVisible input

Author: marcjulian

projects/core/src/lib/icon/icon.component.html

@@ -1,9 +1,9 @@
 <ion-icon [slot]="slot" [@rotateAnim]="state" (@rotateAnim.done)="rotateAnimDone($event)" [name]="_name" [color]="color"></ion-icon>
-<span [@scaleAnim]="indicatorState" *ngIf="indicatorValue >= 0" class="indicator"></span>
-<span *ngIf="_indicatorValue > 0" class="indicator-background"></span>
+<span [@scaleAnim]="indicatorState" *ngIf="dotVisible" class="indicator"></span>
+<span *ngIf="_indicatorValue > 0 || dotVisible" class="indicator-background"></span>
 <span class="off-background" *ngIf="off"></span>
 <span class="off" *ngIf="off"></span>
-<span *ngIf="indicatorValue >= 0" [@scaleAnim]="indicatorValueState" (@scaleAnim.done)="incrementDone($event)"
+<span *ngIf="indicatorValue > 0 && !dotVisible" [@scaleAnim]="indicatorValueState" (@scaleAnim.done)="incrementDone($event)"
     class="indicator-value">
     <span *ngIf="indicatorValue <= 9">{{indicatorValue}}</span>
     <span *ngIf="indicatorValue > 9">9+</span>

projects/core/src/lib/icon/icon.component.ts

@@ -36,16 +36,16 @@ import { trigger, transition, animate, state, style } from '@angular/animations'
 export class FivIcon implements OnInit {
 
   _name: string;
-  _indicatorValue = -1;
+  _indicatorValue = 0;
   tempValue: number;
   state: 'normal' | 'rotate' = 'normal';
   temp: string;
   @Input() color: string;
+
   @Input() slot: string;
   @Input() off = false;
   @Output() transitionDone = new EventEmitter<string>();
 
-
   indicatorState: 'normal' | 'scale' = 'scale';
   indicatorValueState: 'normal' | 'scale' = 'scale';
 
@@ -69,6 +69,20 @@ export class FivIcon implements OnInit {
     this.transformIndicator(value);
   }
 
+  @Input()
+  set dotVisible(dotVisible: boolean) {
+    this._dotVisible = dotVisible;
+    if (dotVisible) {
+      this.indicatorState = 'normal';
+    }
+  }
+
+  get dotVisible(): boolean {
+    return this._dotVisible;
+  }
+
+  _dotVisible: boolean;
+
   constructor() { }
 
   ngOnInit() {
@@ -80,12 +94,12 @@ export class FivIcon implements OnInit {
   }
 
   transformIndicator(value: number) {
-    if (value === -1) {
+    if (this.dotVisible) {
+      this._indicatorValue = value;
+      return;
+    }
+    if (value === 0) {
       this._indicatorValue = value;
-      this.indicatorState = 'scale';
-      this.indicatorValueState = 'scale';
-    } else if (value === 0) {
-      this.tempValue = value;
       this.indicatorState = 'normal';
       this.indicatorValueState = 'scale';
     } else {

src/app/pages/icon/icon.page.html

@@ -24,10 +24,14 @@
             <ion-label>Icon turned off</ion-label>
             <ion-checkbox [(ngModel)]="off" slot="end"></ion-checkbox>
           </ion-item>
+          <ion-item>
+            <ion-label>Icon dot</ion-label>
+            <ion-checkbox [(ngModel)]="dot" slot="end"></ion-checkbox>
+          </ion-item>
 
           <div class="example">
             <ion-button [fivCenter] fill="clear">
-              <fiv-icon [off]="off" slot="icon-only" [indicatorValue]="indicatorValue" [name]="icon"></fiv-icon>
+              <fiv-icon [off]="off" [dotVisible]="dot" slot="icon-only" [indicatorValue]="indicatorValue" [name]="icon"></fiv-icon>
             </ion-button>
           </div>
 

src/app/pages/icon/icon.page.ts

@@ -9,16 +9,17 @@ import { Component, OnInit } from '@angular/core';
 export class IconPage implements OnInit {
 
   icon = 'md-notifications';
-  indicatorValue = -1;
+  indicatorValue = 0;
   off = false;
+  dot = false;
 
   constructor(private util: UtilService) { }
 
   ngOnInit() {
   }
 
   decrement() {
-    if (this.indicatorValue >= 0) {
+    if (this.indicatorValue > 0) {
       this.indicatorValue--;
     }
   }