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 @@
-= 0" class="indicator">
- 0" class="indicator-background">
+
+ 0 || dotVisible" class="indicator-background">
-= 0" [@scaleAnim]="indicatorValueState" (@scaleAnim.done)="incrementDone($event)"
+ 0 && !dotVisible" [@scaleAnim]="indicatorValueState" (@scaleAnim.done)="incrementDone($event)"
class="indicator-value">
{{indicatorValue}}
9">9+
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();
-
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 @@
Icon turned off
+
+ Icon dot
+
+
-
+
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--;
}
}