@colijnit/sharedcomponents 1.0.31 → 1.0.32

package/README.md

@@ -1,24 +1,24 @@
-# Sharedcomponents
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.1.0.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project sharedcomponents` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project sharedcomponents`.
-> Note: Don't forget to add `--project sharedcomponents` or else it will be added to the default project in your `angular.json` file. 
-
-## Build
-
-Run `ng build sharedcomponents` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build sharedcomponents`, go to the dist folder `cd dist/sharedcomponents` and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test sharedcomponents` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+# Sharedcomponents
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.1.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project sharedcomponents` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project sharedcomponents`.
+> Note: Don't forget to add `--project sharedcomponents` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build sharedcomponents` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build sharedcomponents`, go to the dist folder `cd dist/sharedcomponents` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test sharedcomponents` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/bundles/colijnit-sharedcomponents.umd.js

@@ -3100,15 +3100,19 @@
                 },] }
     ];
 
-    var GaugeColor$1;
+    var GaugeColor;
     (function (GaugeColor) {
-        GaugeColor["Low"] = "#E0E0E0";
-        GaugeColor["Medium"] = "#F88952";
-        GaugeColor["High"] = "#5FDCB3";
-    })(GaugeColor$1 || (GaugeColor$1 = {}));
+        GaugeColor["Lowest"] = "#E0E0E0";
+        GaugeColor["Low"] = "#fff7b8";
+        GaugeColor["MediumLow"] = "#ffe367";
+        GaugeColor["MediumHigh"] = "#ffc15b";
+        GaugeColor["High"] = "#F88952";
+        GaugeColor["Highest"] = "#5FDCB3";
+    })(GaugeColor || (GaugeColor = {}));
+
     var CoCircularGaugeComponent = /** @class */ (function () {
         function CoCircularGaugeComponent() {
-            this._color = GaugeColor$1.Low;
+            this._color = GaugeColor.Low;
             this.majorTicks = {
                 height: 0,
             };
@@ -3189,25 +3193,33 @@
         };
         ;
         CoCircularGaugeComponent.prototype.getAnnotations = function () {
-            if (this.value) {
+            if (this.value !== undefined) {
+                var label = this.value ? this.value + "%" : "0%";
                 return [{
-                        content: '<div class="annotation">' +
-                            this.value + '%</div>',
-                        angle: 90,
-                        radius: '50%',
+                        content: '<div class="annotation" style="width:20px;height:20px;">' +
+                            '<div class="annotation-label">' + label + '</div></div>',
                         zIndex: '10',
                     }];
             }
         };
         CoCircularGaugeComponent.prototype._setColor = function () {
             if (this.value == 0) {
-                this._color = GaugeColor$1.Low;
+                this._color = GaugeColor.Lowest;
+            }
+            else if (this.value >= 1 && this.value < 25) {
+                this._color = GaugeColor.Low;
+            }
+            else if (this.value >= 25 && this.value < 50) {
+                this._color = GaugeColor.MediumLow;
             }
-            else if (this.value >= 0 && this.value < 100) {
-                this._color = GaugeColor$1.Medium;
+            else if (this.value >= 50 && this.value < 75) {
+                this._color = GaugeColor.MediumHigh;
+            }
+            else if (this.value >= 75 && this.value < 100) {
+                this._color = GaugeColor.High;
             }
             else if (this.value == 100) {
-                this._color = GaugeColor$1.High;
+                this._color = GaugeColor.Highest;
             }
         };
         return CoCircularGaugeComponent;
@@ -3245,12 +3257,6 @@
                 },] }
     ];
 
-    var GaugeColor;
-    (function (GaugeColor) {
-        GaugeColor["Low"] = "#E0E0E0";
-        GaugeColor["Medium"] = "#F88952";
-        GaugeColor["High"] = "#5FDCB3";
-    })(GaugeColor || (GaugeColor = {}));
     var CoLinearGaugeComponent = /** @class */ (function () {
         function CoLinearGaugeComponent() {
             this.color = GaugeColor.Low;
@@ -3274,14 +3280,23 @@
         };
         CoLinearGaugeComponent.prototype._setColor = function () {
             if (this.value == 0) {
+                this.color = GaugeColor.Lowest;
+            }
+            else if (this.value >= 1 && this.value < 25) {
                 this.color = GaugeColor.Low;
             }
-            else if (this.value >= 0 && this.value < 100) {
-                this.color = GaugeColor.Medium;
+            else if (this.value >= 25 && this.value < 50) {
+                this.color = GaugeColor.MediumLow;
             }
-            else if (this.value == 100) {
+            else if (this.value >= 50 && this.value < 75) {
+                this.color = GaugeColor.MediumHigh;
+            }
+            else if (this.value >= 75 && this.value < 100) {
                 this.color = GaugeColor.High;
             }
+            else if (this.value == 100) {
+                this.color = GaugeColor.Highest;
+            }
         };
         return CoLinearGaugeComponent;
     }());
@@ -3329,6 +3344,7 @@
             },
             set: function (value) {
                 this._statusbarData = value;
+                this.adjustTooHighPercentages();
             },
             enumerable: false,
             configurable: true
@@ -3336,17 +3352,13 @@
         StatusbarComponent.prototype.showClass = function () {
             return true;
         };
-        StatusbarComponent.prototype.onHover = function (event) {
-            this.showPopup = true;
-            this._mouseY = event.screenY;
-            this._windowHeight = window.innerHeight;
-            this.setPopupClass();
-        };
-        StatusbarComponent.prototype.onLeave = function () {
-            this.showPopup = false;
-        };
-        StatusbarComponent.prototype.onStatusbarClick = function () {
-            this.statusbarClick.emit();
+        StatusbarComponent.prototype.onStatusbarClick = function (event) {
+            this.showPopup = !this.showPopup;
+            if (this.showPopup) {
+                this._mouseY = event.screenY;
+                this._windowHeight = window.innerHeight;
+                this.setPopupClass();
+            }
         };
         StatusbarComponent.prototype.setPopupClass = function () {
             var popupHeight = this.statusbarData.length * 30;
@@ -3358,12 +3370,15 @@
                 this.popupClass = 'dropup';
             }
         };
+        StatusbarComponent.prototype.adjustTooHighPercentages = function () {
+            this._statusbarData.forEach(function (data) { return data.percentage > 100 ? data.percentage = 100 : false; });
+        };
         return StatusbarComponent;
     }());
     StatusbarComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-statusbar",
-                    template: "\n    <div class=\"co-statusbar-wrapper\"\n         *ngIf=\"statusbarData\"\n         (mouseover)=\"onHover($event)\"\n         (mouseleave)=\"onLeave()\"\n         (click)=\"onStatusbarClick()\">\n      <div class=\"statuses\">\n        <div *ngFor=\"let data of statusbarData; let index = index\" class=\"status\">\n          <co-linear-gauge [class.focused-status]=\"focusedStatusIndex !== undefined && focusedStatusIndex === index\"\n            [value]=\"data.percentage\" [count]=\"data.count ? data.count : undefined\"></co-linear-gauge>\n        </div>\n      </div>\n      <div class=status-description-popup *ngIf=\"showPopup\" @showHidePopup [ngClass]=\"popupClass\">\n        <div class=\"status-descriptions\">\n          <div *ngFor=\"let data of statusbarData; let index = index\" class=\"status-description\">\n            <co-circular-gauge [value]=\"data.percentage\"></co-circular-gauge>\n            <span [textContent]=\"data.label\"></span>\n          </div>\n        </div>\n      </div>\n    </div>\n  ",
+                    template: "\n    <div class=\"co-statusbar-wrapper\"\n         *ngIf=\"statusbarData\"\n         (click)=\"onStatusbarClick($event)\">\n      <div class=\"statuses\">\n        <div *ngFor=\"let data of statusbarData; let index = index\" class=\"status\">\n          <co-linear-gauge [class.focused-status]=\"focusedStatusIndex !== undefined && focusedStatusIndex === index\"\n            [value]=\"data.percentage\" [count]=\"data.count ? data.count : undefined\"></co-linear-gauge>\n        </div>\n      </div>\n      <div class=status-description-popup *ngIf=\"showPopup\" @showHidePopup [ngClass]=\"popupClass\" clickOutside (clickOutside)=\"showPopup=false\">\n        <div class=\"status-descriptions\">\n          <div *ngFor=\"let data of statusbarData; let index = index\" class=\"status-description\">\n            <co-circular-gauge [value]=\"data.percentage\"></co-circular-gauge>\n            <span [textContent]=\"data.label\"></span>\n          </div>\n        </div>\n      </div>\n    </div>\n  ",
                     animations: [
                         animations.trigger("showHidePopup", [
                             animations.state("void", animations.style({ opacity: 0 })),
@@ -3392,7 +3407,8 @@
                     imports: [
                         common.CommonModule,
                         CoCircularGaugeModule,
-                        CoLinearGaugeModule
+                        CoLinearGaugeModule,
+                        corecomponents_v12.ClickoutsideModule
                     ],
                     declarations: [
                         StatusbarComponent