@colijnit/sharedcomponents 1.0.22 → 1.0.23

package/fesm2015/colijnit-sharedcomponents.js

@@ -41,6 +41,7 @@ import * as i1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import { ArticleStockManagement } from '@colijnit/articleapi/build/model/article-stock-management';
 import { ArticleTransaction as ArticleTransaction$1 } from '@colijnit/articleapi/build/model/article-transaction';
+import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge';
 
 class DocsignComponent {
     constructor() {
@@ -1278,8 +1279,6 @@ class SharedConnectorService {
         return __awaiter(this, void 0, void 0, function* () {
             this.articleConnector = new Articles(this._optionsService.options);
             this.sharedConnector = new Sharedapi(this._optionsService.options);
-            console.log(this.articleConnector);
-            console.log(this.sharedConnector);
         });
     }
     getAllPrinters(showAll = true) {
@@ -3169,6 +3168,314 @@ LayoutSwitcherModule.decorators = [
             },] }
 ];
 
+var GaugeColor$1;
+(function (GaugeColor) {
+    GaugeColor["Low"] = "#E0E0E0";
+    GaugeColor["Medium"] = "#F88952";
+    GaugeColor["High"] = "#5FDCB3";
+})(GaugeColor$1 || (GaugeColor$1 = {}));
+class CoCircularGaugeComponent {
+    constructor() {
+        this._color = GaugeColor$1.Low;
+        this.majorTicks = {
+            height: 0,
+        };
+        this.minorTicks = {
+            height: 0
+        };
+        this.labelStyle = {
+            position: 'Inside', useRangeColor: true,
+            font: { size: '0px', fontFamily: 'inherit' }
+        };
+        this.lineStyle = {
+            width: 0
+        };
+        this.ranges = [
+            {
+                start: 1, end: 100,
+                radius: '13px',
+                startWidth: 3, endWidth: 3,
+                color: '#E0E0E0',
+                roundedCornerRadius: 0
+            },
+        ];
+    }
+    set value(value) {
+        this._value = value;
+        this._setColor();
+    }
+    get value() {
+        return this._value;
+    }
+    get color() {
+        return this._color;
+    }
+    showClass() {
+        return true;
+    }
+    getAxes() {
+        return [{
+                minimum: 0,
+                maximum: 100,
+                radius: '15px',
+                startAngle: 1,
+                endAngle: 360,
+                majorTicks: this.majorTicks,
+                minorTicks: this.minorTicks,
+                labelStyle: this.labelStyle,
+                lineStyle: this.lineStyle,
+                ranges: this.ranges,
+                pointers: this.getPointers(),
+                annotations: this.getAnnotations(),
+            }];
+    }
+    getPointers() {
+        if (this.value) {
+            return [{
+                    roundedCornerRadius: 0,
+                    value: this.value,
+                    type: 'RangeBar',
+                    radius: '13px',
+                    color: this.color,
+                    border: {
+                        width: 0
+                    },
+                    animation: {
+                        enable: false
+                    },
+                    pointerWidth: 3
+                }];
+        }
+    }
+    ;
+    getAnnotations() {
+        if (this.value) {
+            return [{
+                    content: '<div class="annotation">' +
+                        this.value + '%</div>',
+                    angle: 90,
+                    radius: '50%',
+                    zIndex: '10',
+                }];
+        }
+    }
+    _setColor() {
+        if (this.value == 0) {
+            this._color = GaugeColor$1.Low;
+        }
+        else if (this.value >= 0 && this.value < 100) {
+            this._color = GaugeColor$1.Medium;
+        }
+        else if (this.value == 100) {
+            this._color = GaugeColor$1.High;
+        }
+    }
+}
+CoCircularGaugeComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-circular-gauge",
+                template: `
+    <div class="circular-gauge-wrapper">
+      <ejs-circulargauge
+        class="circular-gauge"
+        [width]="'100%'"
+        [axes]="getAxes()">
+      </ejs-circulargauge>
+    </div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+CoCircularGaugeComponent.propDecorators = {
+    circulargauge: [{ type: ViewChild, args: ['circulargauge',] }],
+    value: [{ type: Input }],
+    showClass: [{ type: HostBinding, args: ["class.co-circular-gauge",] }]
+};
+
+class CoCircularGaugeModule {
+}
+CoCircularGaugeModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    CircularGaugeModule
+                ],
+                declarations: [
+                    CoCircularGaugeComponent
+                ],
+                exports: [
+                    CoCircularGaugeComponent
+                ]
+            },] }
+];
+
+var GaugeColor;
+(function (GaugeColor) {
+    GaugeColor["Low"] = "#E0E0E0";
+    GaugeColor["Medium"] = "#F88952";
+    GaugeColor["High"] = "#5FDCB3";
+})(GaugeColor || (GaugeColor = {}));
+class CoLinearGaugeComponent {
+    constructor() {
+        this.color = GaugeColor.Low;
+    }
+    set value(value) {
+        this._value = value;
+        this._setColor();
+    }
+    get value() {
+        return this._value;
+    }
+    showClass() {
+        return true;
+    }
+    getStyle() {
+        return `linear-gradient(90deg, ${this.color} 0 ${this.value}%, white ${this.value}% 100%`;
+    }
+    _setColor() {
+        if (this.value == 0) {
+            this.color = GaugeColor.Low;
+        }
+        else if (this.value >= 0 && this.value < 100) {
+            this.color = GaugeColor.Medium;
+        }
+        else if (this.value == 100) {
+            this.color = GaugeColor.High;
+        }
+    }
+}
+CoLinearGaugeComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-linear-gauge",
+                template: `
+    <div class="linear-gauge"
+         [style.background]="getStyle()"
+         [style.border-color]="color"
+         [textContent]="count ? count : ''"
+    ></div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+CoLinearGaugeComponent.propDecorators = {
+    value: [{ type: Input }],
+    count: [{ type: Input }],
+    showClass: [{ type: HostBinding, args: ["class.co-linear-gauge",] }]
+};
+
+class CoLinearGaugeModule {
+}
+CoLinearGaugeModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                ],
+                declarations: [
+                    CoLinearGaugeComponent
+                ],
+                exports: [
+                    CoLinearGaugeComponent
+                ]
+            },] }
+];
+
+class StatusbarComponent {
+    constructor() {
+        this.statusbarClick = new EventEmitter();
+        this.showPopup = false;
+        this.popupClass = 'dropdown';
+    }
+    set statusbarData(value) {
+        this._statusbarData = value;
+    }
+    get statusbarData() {
+        return this._statusbarData;
+    }
+    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();
+    }
+    setPopupClass() {
+        const popupHeight = this.statusbarData.length * 30;
+        let dropdownInScreen = (this._mouseY + popupHeight) <= this._windowHeight;
+        if (dropdownInScreen) {
+            this.popupClass = 'dropdown';
+        }
+        else {
+            this.popupClass = 'dropup';
+        }
+    }
+}
+StatusbarComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-statusbar",
+                template: `
+    <div class="co-statusbar-wrapper"
+         *ngIf="statusbarData"
+         (mouseover)="onHover($event)"
+         (mouseleave)="onLeave()"
+         (click)="onStatusbarClick()">
+      <div class="statuses">
+        <div *ngFor="let data of statusbarData; let index = index" class="status">
+          <co-linear-gauge [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-descriptions">
+          <div *ngFor="let data of statusbarData; let index = index" class="status-description">
+            <co-circular-gauge [value]="data.percentage"></co-circular-gauge>
+            <span [textContent]="data.label"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+                animations: [
+                    trigger("showHidePopup", [
+                        state("void", style({ opacity: 0 })),
+                        state("*", style({ opacity: 1 })),
+                        transition("void <=> *", animate("250ms ease-in-out")),
+                    ])
+                ],
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+StatusbarComponent.ctorParameters = () => [];
+StatusbarComponent.propDecorators = {
+    statusbarData: [{ type: Input }],
+    statusbarClick: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.co-statusbar",] }]
+};
+
+class StatusbarModule {
+}
+StatusbarModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    CoCircularGaugeModule,
+                    CoLinearGaugeModule
+                ],
+                declarations: [
+                    StatusbarComponent
+                ],
+                exports: [
+                    StatusbarComponent
+                ]
+            },] }
+];
+
 class SharedService {
     constructor(options, connector) {
         this.options = options;
@@ -3200,5 +3507,5 @@ SharedService.ctorParameters = () => [
  * Generated bundle index. Do not edit.
  */
 
-export { DocsignComponent, DocsignModule, KeyPadComponent, KeyPadModule, LayoutSwitcherComponent, LayoutSwitcherModule, SendMethodDialogComponent, SendMethodDialogModule, SharedService, StockComponent, StockModule, SignatureComponent as ɵa, SignaturesComponent as ɵb, StockService as ɵc, SharedConnectorService as ɵd, OptionsService as ɵe, DictionaryService as ɵf, IconCacheService as ɵg, StockInformationComponent as ɵh, StockInformationGridComponent as ɵi, StockLocationComponent as ɵj, StockTransferComponent as ɵk, StockChangeAmountComponent as ɵl };
+export { CoCircularGaugeComponent, CoCircularGaugeModule, CoLinearGaugeComponent, CoLinearGaugeModule, DocsignComponent, DocsignModule, KeyPadComponent, KeyPadModule, LayoutSwitcherComponent, LayoutSwitcherModule, SendMethodDialogComponent, SendMethodDialogModule, SharedService, StatusbarComponent, StatusbarModule, StockComponent, StockModule, SignatureComponent as ɵa, SignaturesComponent as ɵb, StockService as ɵc, SharedConnectorService as ɵd, OptionsService as ɵe, DictionaryService as ɵf, IconCacheService as ɵg, StockInformationComponent as ɵh, StockInformationGridComponent as ɵi, StockLocationComponent as ɵj, StockTransferComponent as ɵk, StockChangeAmountComponent as ɵl };
 //# sourceMappingURL=colijnit-sharedcomponents.js.map