From dd502bec9f6f6474db3c377812c8b46cd46988d3 Mon Sep 17 00:00:00 2001
From: Marc Stammerjohann <marcstammerjohann@web.de>
Date: Fri, 19 Apr 2019 23:37:57 +0200
Subject: [PATCH] feat(icon): add dotVisible input

---
 .../core/src/lib/icon/icon.component.html     |  6 ++--
 projects/core/src/lib/icon/icon.component.ts  | 28 ++++++++++++++-----
 src/app/pages/icon/icon.page.html             |  6 +++-
 src/app/pages/icon/icon.page.ts               |  5 ++--
 4 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/projects/core/src/lib/icon/icon.component.html b/projects/core/src/lib/icon/icon.component.html
index cb122f25..d511a42f 100644
--- a/projects/core/src/lib/icon/icon.component.html
+++ b/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>
diff --git a/projects/core/src/lib/icon/icon.component.ts b/projects/core/src/lib/icon/icon.component.ts
index b862c8e5..68a83b26 100644
--- a/projects/core/src/lib/icon/icon.component.ts
+++ b/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 {
diff --git a/src/app/pages/icon/icon.page.html b/src/app/pages/icon/icon.page.html
index 2c4697f8..7176b0b0 100644
--- a/src/app/pages/icon/icon.page.html
+++ b/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>
 
diff --git a/src/app/pages/icon/icon.page.ts b/src/app/pages/icon/icon.page.ts
index a2d492c8..52bb481c 100644
--- a/src/app/pages/icon/icon.page.ts
+++ b/src/app/pages/icon/icon.page.ts
@@ -9,8 +9,9 @@ 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) { }
 
@@ -18,7 +19,7 @@ export class IconPage implements OnInit {
   }
 
   decrement() {
-    if (this.indicatorValue >= 0) {
+    if (this.indicatorValue > 0) {
       this.indicatorValue--;
     }
   }