@colijnit/sharedcomponents 1.0.31 → 1.0.32

package/fesm2015/colijnit-sharedcomponents.js

@@ -24,7 +24,7 @@ import { SendMethod as SendMethod$1 } from '@colijnit/mainapi/build/model/send-m
 import { PrintStockStickers } from '@colijnit/sharedapi/build/model/print-stock-stickers';
 import { GetStockHistoryRequest } from '@colijnit/articleapi/build/model/get-stock-history-request';
 import { ArticleStock as ArticleStock$1 } from '@colijnit/articleapi/build/model/article-stock';
-import { InputCheckboxModule, IconModule, CoDialogModule, ButtonModule, InputComboBoxModule, CoGridModule, InputRadioButtonModule, DropDownModule, SimpleGridModule, ImageModule, InputTextModule, InputNumberPickerModule, CoDialogWizardModule, InputTextareaModule, InputDatePickerModule } from '@colijnit/corecomponents_v12';
+import { InputCheckboxModule, IconModule, CoDialogModule, ButtonModule, InputComboBoxModule, CoGridModule, InputRadioButtonModule, DropDownModule, SimpleGridModule, ImageModule, InputTextModule, InputNumberPickerModule, CoDialogWizardModule, InputTextareaModule, ClickoutsideModule, InputDatePickerModule } from '@colijnit/corecomponents_v12';
 import * as i1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import { ArticleStockManagement } from '@colijnit/articleapi/build/model/article-stock-management';
@@ -2963,15 +2963,19 @@ LayoutSwitcherModule.decorators = [
             },] }
 ];
 
-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 = {}));
+
 class CoCircularGaugeComponent {
     constructor() {
-        this._color = GaugeColor$1.Low;
+        this._color = GaugeColor.Low;
         this.majorTicks = {
             height: 0,
         };
@@ -3044,25 +3048,33 @@ class CoCircularGaugeComponent {
     }
     ;
     getAnnotations() {
-        if (this.value) {
+        if (this.value !== undefined) {
+            const 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',
                 }];
         }
     }
     _setColor() {
         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;
         }
     }
 }
@@ -3104,12 +3116,6 @@ CoCircularGaugeModule.decorators = [
             },] }
 ];
 
-var GaugeColor;
-(function (GaugeColor) {
-    GaugeColor["Low"] = "#E0E0E0";
-    GaugeColor["Medium"] = "#F88952";
-    GaugeColor["High"] = "#5FDCB3";
-})(GaugeColor || (GaugeColor = {}));
 class CoLinearGaugeComponent {
     constructor() {
         this.color = GaugeColor.Low;
@@ -3129,14 +3135,23 @@ class CoLinearGaugeComponent {
     }
     _setColor() {
         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;
+        }
     }
 }
 CoLinearGaugeComponent.decorators = [
@@ -3182,6 +3197,7 @@ class StatusbarComponent {
     }
     set statusbarData(value) {
         this._statusbarData = value;
+        this.adjustTooHighPercentages();
     }
     get statusbarData() {
         return this._statusbarData;
@@ -3189,17 +3205,13 @@ class StatusbarComponent {
     showClass() {
         return true;
     }
-    onHover(event) {
-        this.showPopup = true;
-        this._mouseY = event.screenY;
-        this._windowHeight = window.innerHeight;
-        this.setPopupClass();
-    }
-    onLeave() {
-        this.showPopup = false;
-    }
-    onStatusbarClick() {
-        this.statusbarClick.emit();
+    onStatusbarClick(event) {
+        this.showPopup = !this.showPopup;
+        if (this.showPopup) {
+            this._mouseY = event.screenY;
+            this._windowHeight = window.innerHeight;
+            this.setPopupClass();
+        }
     }
     setPopupClass() {
         const popupHeight = this.statusbarData.length * 30;
@@ -3211,6 +3223,9 @@ class StatusbarComponent {
             this.popupClass = 'dropup';
         }
     }
+    adjustTooHighPercentages() {
+        this._statusbarData.forEach(data => data.percentage > 100 ? data.percentage = 100 : false);
+    }
 }
 StatusbarComponent.decorators = [
     { type: Component, args: [{
@@ -3218,16 +3233,14 @@ StatusbarComponent.decorators = [
                 template: `
     <div class="co-statusbar-wrapper"
          *ngIf="statusbarData"
-         (mouseover)="onHover($event)"
-         (mouseleave)="onLeave()"
-         (click)="onStatusbarClick()">
+         (click)="onStatusbarClick($event)">
       <div class="statuses">
         <div *ngFor="let data of statusbarData; let index = index" class="status">
           <co-linear-gauge [class.focused-status]="focusedStatusIndex !== undefined && focusedStatusIndex === index"
             [value]="data.percentage" [count]="data.count ? data.count : undefined"></co-linear-gauge>
         </div>
       </div>
-      <div class=status-description-popup *ngIf="showPopup" @showHidePopup [ngClass]="popupClass">
+      <div class=status-description-popup *ngIf="showPopup" @showHidePopup [ngClass]="popupClass" clickOutside (clickOutside)="showPopup=false">
         <div class="status-descriptions">
           <div *ngFor="let data of statusbarData; let index = index" class="status-description">
             <co-circular-gauge [value]="data.percentage"></co-circular-gauge>
@@ -3262,7 +3275,8 @@ StatusbarModule.decorators = [
                 imports: [
                     CommonModule,
                     CoCircularGaugeModule,
-                    CoLinearGaugeModule
+                    CoLinearGaugeModule,
+                    ClickoutsideModule
                 ],
                 declarations: [
                     StatusbarComponent