@esfaenza/dashboard-feature 15.2.14 → 19.2.1

package/fesm2022/esfaenza-dashboard-feature.mjs

@@ -0,0 +1,1814 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, EventEmitter, Output, Input, Inject, Component, Injectable, ViewContainerRef, ViewChildren, ViewEncapsulation, Optional, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import * as i5 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i6 from 'angular-gridster2';
+import { GridsterModule, GridType } from 'angular-gridster2';
+import * as i2 from '@esfaenza/es-charts';
+import { EsChartsModule } from '@esfaenza/es-charts';
+import * as i1$1 from '@angular/router';
+import { timer, Subject } from 'rxjs';
+import * as i1$2 from '@esfaenza/extensions';
+import { InboundMessageTypes } from '@esfaenza/extensions';
+import { takeUntil, map } from 'rxjs/operators';
+import * as i7 from '@esfaenza/forms-and-validations';
+import { FormsAndValidationsModule } from '@esfaenza/forms-and-validations';
+import * as i1$3 from '@esfaenza/httpservice';
+import { HttpserviceModule } from '@esfaenza/httpservice';
+import { HttpParams } from '@angular/common/http';
+import { AppSearch } from '@esfaenza/es-table';
+
+/**
+ * Token di registrazione della DashboardFeatureService.
+ * Permette di fare l'override dell'implementazione di default a scopo di test delle widget
+ */
+const DSH_DATA_SERVICE = new InjectionToken('DSH_DATA_SERVICE');
+
+const DSH_OPTIONS = new InjectionToken('DSH_MODULE_OPTIONS');
+
+class JaceChartWidgetComponent {
+    constructor(dshService) {
+        this.dshService = dshService;
+        this.OnRemove = new EventEmitter();
+        this.configuration = false;
+        this.dataReady = false;
+        this.lastdate = "";
+        this.chartName = "";
+    }
+    setWidgetModel(dshBackendId, widgetModel) {
+        this.model = widgetModel;
+        if (this.model.backendid === undefined || this.model.backendid == "default_backend")
+            this.model.backendid = dshBackendId;
+        this.refreshData();
+    }
+    ngOnInit() { }
+    ngOnChanges(changes) {
+        //console.log(changes['DashboardDate'].currentValue);
+        if (changes['DashboardDate'].previousValue)
+            this.lastdate = changes['DashboardDate'].previousValue.toISOString();
+        let curdate = "";
+        if (changes['DashboardDate'].currentValue)
+            curdate = changes['DashboardDate'].currentValue.toISOString();
+        //fix per il datetimepicker material che cambia l'oggetto al momento del caricamento
+        if (this.lastdate != curdate) {
+            this.lastdate = curdate;
+            this.refreshData();
+        }
+    }
+    refreshData() {
+        if (!this.model)
+            return;
+        const pars = {};
+        if (this.DashboardDate)
+            pars["DT"] = this.DashboardDate.toISOString();
+        if (this.model.options && Object.keys(this.model.options).length != 0) {
+            for (let index = 0; index < Object.keys(this.model.options).length; index++) {
+                const k = Object.keys(this.model.options)[index];
+                pars[k] = this.model.options[k];
+            }
+        }
+        this.dshService.GetWidgetData(this.model.backendid, this.model.name, pars).subscribe(data => {
+            if (this.model) {
+                this.model.setData(data);
+                this.chartName = this.model.name;
+                this.dataReady = true;
+            }
+        });
+    }
+    removeWidget() {
+        if (!this.model)
+            return;
+        this.OnRemove.emit(this.model.name);
+    }
+    configure() {
+        if (this.configuration) {
+            //finito di configurare -> refreshData
+            this.refreshData();
+        }
+        this.configuration = !this.configuration;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: JaceChartWidgetComponent, deps: [{ token: DSH_DATA_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: JaceChartWidgetComponent, isStandalone: false, selector: "jace-dsh-chart", inputs: { DashboardDate: "DashboardDate" }, outputs: { OnRemove: "OnRemove" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"jace-dsh-widget-header {{model?.name}}-header\">\r\n    <div class=\"jace-dsh-widget-title\" *ngIf=\"model.title\">\r\n        {{model.title}}\r\n    </div>\r\n    <div class=\"jace-dsh-widget-controls\" *ngIf=\"dataReady\">\r\n        <span class=\"transition drag-handler jace-dsh-widget-drag\" *ngIf=\"model.dragEnabled\">\r\n            <i class=\"fa fa-arrows-alt\"></i>\r\n        </span>\r\n        <span class=\"transition jace-dsh-widget-opts\" (click)=\"configure()\">\r\n            <i class=\"fa fa-cog\"></i>\r\n        </span>\r\n        <span (click)=\"removeWidget()\" class=\"transition remove-button jace-dsh-widget-close\">\r\n            <i class=\"fa fa-times\"></i>\r\n        </span>\r\n    </div>\r\n</div>\r\n<div class=\"jace-dsh-widget-body gridster-item-content {{model?.name}}-body\">\r\n    <div class=\"jace-dsh-widget-loading\" *ngIf=\"!dataReady\">\r\n        <i class=\"fa fa-spinner fa-spin\"></i>\r\n    </div>\r\n\r\n    <div class=\"jace-dsh-chart-container jace-dsh-widget-slide\"\r\n        [ngClass]=\"{'jace-dsh-widget-content-hide':configuration,'jace-dsh-widget-content-show':!configuration}\"\r\n        *ngIf=\"dataReady\">\r\n        <!-- [Type]=\"Widget.chartType\" -->\r\n        <h6 *ngIf=\"model?.queryerror\" class=\"fg-disabled\" style=\"margin-top: 0.5rem;\"><span\r\n                class=\"fa fa-times-circle-o\"></span>&nbsp;&nbsp;Error retrieving data</h6>\r\n        <es-chart [Legend]=\"model.legend\" [Theme]=\"'dataviz'\" [Type]=\"model.chartType\" [Data]=\"model.chartData\"\r\n            [name]=\"chartName\"></es-chart>\r\n    </div>\r\n\r\n    <div class=\"jace-dsh-widget-settings jace-dsh-widget-slide \"\r\n        [ngClass]=\"{'jace-dsh-widget-settings-hide':!configuration,'jace-dsh-widget-settings-show':configuration}\">\r\n        <p>Configuration</p>\r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.EsChartComponent, selector: "es-chart", inputs: ["Type", "Data", "DataArray"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: JaceChartWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jace-dsh-chart', standalone: false, template: "<div class=\"jace-dsh-widget-header {{model?.name}}-header\">\r\n    <div class=\"jace-dsh-widget-title\" *ngIf=\"model.title\">\r\n        {{model.title}}\r\n    </div>\r\n    <div class=\"jace-dsh-widget-controls\" *ngIf=\"dataReady\">\r\n        <span class=\"transition drag-handler jace-dsh-widget-drag\" *ngIf=\"model.dragEnabled\">\r\n            <i class=\"fa fa-arrows-alt\"></i>\r\n        </span>\r\n        <span class=\"transition jace-dsh-widget-opts\" (click)=\"configure()\">\r\n            <i class=\"fa fa-cog\"></i>\r\n        </span>\r\n        <span (click)=\"removeWidget()\" class=\"transition remove-button jace-dsh-widget-close\">\r\n            <i class=\"fa fa-times\"></i>\r\n        </span>\r\n    </div>\r\n</div>\r\n<div class=\"jace-dsh-widget-body gridster-item-content {{model?.name}}-body\">\r\n    <div class=\"jace-dsh-widget-loading\" *ngIf=\"!dataReady\">\r\n        <i class=\"fa fa-spinner fa-spin\"></i>\r\n    </div>\r\n\r\n    <div class=\"jace-dsh-chart-container jace-dsh-widget-slide\"\r\n        [ngClass]=\"{'jace-dsh-widget-content-hide':configuration,'jace-dsh-widget-content-show':!configuration}\"\r\n        *ngIf=\"dataReady\">\r\n        <!-- [Type]=\"Widget.chartType\" -->\r\n        <h6 *ngIf=\"model?.queryerror\" class=\"fg-disabled\" style=\"margin-top: 0.5rem;\"><span\r\n                class=\"fa fa-times-circle-o\"></span>&nbsp;&nbsp;Error retrieving data</h6>\r\n        <es-chart [Legend]=\"model.legend\" [Theme]=\"'dataviz'\" [Type]=\"model.chartType\" [Data]=\"model.chartData\"\r\n            [name]=\"chartName\"></es-chart>\r\n    </div>\r\n\r\n    <div class=\"jace-dsh-widget-settings jace-dsh-widget-slide \"\r\n        [ngClass]=\"{'jace-dsh-widget-settings-hide':!configuration,'jace-dsh-widget-settings-show':configuration}\">\r\n        <p>Configuration</p>\r\n    </div>\r\n</div>" }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DSH_DATA_SERVICE]
+                }] }], propDecorators: { DashboardDate: [{
+                type: Input
+            }], OnRemove: [{
+                type: Output
+            }] } });
+
+class JaceCounterWidgetComponent {
+    constructor(dshService) {
+        this.dshService = dshService;
+        this.OnRemove = new EventEmitter();
+        this.configuration = false;
+        this.dataReady = false;
+        this.lastdate = "";
+    }
+    //TODO per online update: importare cdr: ChangeDectectorRef 
+    setWidgetModel(dshBackendId, widgetModel) {
+        this.model = widgetModel;
+        if (this.model.backendid === undefined || this.model.backendid == "default_backend")
+            this.model.backendid = dshBackendId;
+        this.refreshData();
+    }
+    ngOnInit() { }
+    ngOnChanges(changes) {
+        //console.log(changes['DashboardDate'].currentValue);
+        if (changes['DashboardDate'].previousValue)
+            this.lastdate = changes['DashboardDate'].previousValue.toISOString();
+        let curdate = "";
+        if (changes['DashboardDate'].currentValue)
+            curdate = changes['DashboardDate'].currentValue.toISOString();
+        //fix per il datetimepicker material che cambia l'oggetto al momento del caricamento
+        if (this.lastdate != curdate) {
+            this.lastdate = curdate;
+            this.refreshData();
+        }
+    }
+    refreshData() {
+        if (!this.model)
+            return;
+        const pars = {};
+        if (this.DashboardDate)
+            pars["DT"] = this.DashboardDate.toISOString();
+        if (this.model.options && Object.keys(this.model.options).length != 0) {
+            for (let index = 0; index < Object.keys(this.model.options).length; index++) {
+                const k = Object.keys(this.model.options)[index];
+                pars[k] = this.model.options[k];
+            }
+        }
+        this.dshService.GetWidgetData(this.model.backendid, this.model.name, pars).subscribe(data => {
+            if (this.model) {
+                this.model.setData(data);
+                this.dataReady = true;
+                //TODO per online update: this.cdr.markForCheck();                
+            }
+        });
+    }
+    removeWidget() {
+        if (!this.model)
+            return;
+        this.OnRemove.emit(this.model.name);
+    }
+    configure() {
+        if (this.configuration) {
+            //finito di configurare -> refreshData
+            this.refreshData();
+        }
+        this.configuration = !this.configuration;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: JaceCounterWidgetComponent, deps: [{ token: DSH_DATA_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: JaceCounterWidgetComponent, isStandalone: false, selector: "jace-dsh-counter", inputs: { DashboardDate: "DashboardDate" }, outputs: { OnRemove: "OnRemove" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"jace-dsh-widget-header {{model?.name}}-header\">\r\n    <div class=\"jace-dsh-widget-title\" *ngIf=\"model.title\">\r\n        {{model.title}}\r\n    </div>\r\n    <div class=\"jace-dsh-widget-controls\" *ngIf=\"dataReady\">\r\n        <span class=\"transition drag-handler jace-dsh-widget-drag\" *ngIf=\"model.dragEnabled\">\r\n            <i class=\"fa fa-arrows-alt\"></i>\r\n        </span>\r\n        <span class=\"transition jace-dsh-widget-opts\" (click)=\"configure()\">\r\n            <i class=\"fa fa-cog\"></i>\r\n        </span>\r\n        <span (click)=\"removeWidget()\" class=\"transition remove-button jace-dsh-widget-close\">\r\n            <i class=\"fa fa-times\"></i>\r\n        </span>\r\n    </div>\r\n</div>\r\n<div class=\"jace-dsh-widget-body gridster-item-content {{model?.name}}-body\">\r\n    <div class=\"jace-dsh-widget-loading\" *ngIf=\"!dataReady\">\r\n        <i class=\"fa fa-spinner fa-spin\"></i>\r\n    </div>\r\n    <div class=\"jace-dsh-counter-body jace-dsh-widget-slide\"\r\n        [ngClass]=\"{'jace-dsh-widget-content-hide':configuration,'jace-dsh-widget-content-show':!configuration}\"\r\n        *ngIf=\"dataReady\">\r\n        <i class=\"jace-dsh-counter-icon fa fa-2x\" [ngClass]=\"[ model.icon ? model.icon : '']\" *ngIf=\"model.icon\"></i>\r\n        <div class=\"jace-dsh-counter-super\">{{model.superText}}</div>\r\n        <div class=\"jace-dsh-counter-value\"><span>{{model.value}}</span> <span\r\n                class=\"jace-dsh-counter-unit\">{{model.unit}}</span> </div>\r\n\r\n        <div class=\"jace-dsh-counter-sub\">{{model.subText}}</div>\r\n    </div>\r\n\r\n    <div class=\"jace-dsh-widget-settings jace-dsh-widget-slide \"\r\n        [ngClass]=\"{'jace-dsh-widget-settings-hide':!configuration,'jace-dsh-widget-settings-show':configuration}\">\r\n        <p>Configuration</p>\r\n    </div>\r\n</div>", styles: [".jace-dsh-counter-body{padding:1em .5em}.jace-dsh-counter-value{font-size:2em;font-weight:700;text-align:center}.jace-dsh-counter-unit{margin-left:.08em;font-size:.5em;text-align:center}.jace-dsh-counter-super{font-size:1em;text-align:center}.jace-dsh-counter-sub{font-size:.8em;text-align:center}.jace-dsh-counter-icon{position:absolute;font-size:2.6em;color:#b0c4de}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: JaceCounterWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jace-dsh-counter', standalone: false, template: "<div class=\"jace-dsh-widget-header {{model?.name}}-header\">\r\n    <div class=\"jace-dsh-widget-title\" *ngIf=\"model.title\">\r\n        {{model.title}}\r\n    </div>\r\n    <div class=\"jace-dsh-widget-controls\" *ngIf=\"dataReady\">\r\n        <span class=\"transition drag-handler jace-dsh-widget-drag\" *ngIf=\"model.dragEnabled\">\r\n            <i class=\"fa fa-arrows-alt\"></i>\r\n        </span>\r\n        <span class=\"transition jace-dsh-widget-opts\" (click)=\"configure()\">\r\n            <i class=\"fa fa-cog\"></i>\r\n        </span>\r\n        <span (click)=\"removeWidget()\" class=\"transition remove-button jace-dsh-widget-close\">\r\n            <i class=\"fa fa-times\"></i>\r\n        </span>\r\n    </div>\r\n</div>\r\n<div class=\"jace-dsh-widget-body gridster-item-content {{model?.name}}-body\">\r\n    <div class=\"jace-dsh-widget-loading\" *ngIf=\"!dataReady\">\r\n        <i class=\"fa fa-spinner fa-spin\"></i>\r\n    </div>\r\n    <div class=\"jace-dsh-counter-body jace-dsh-widget-slide\"\r\n        [ngClass]=\"{'jace-dsh-widget-content-hide':configuration,'jace-dsh-widget-content-show':!configuration}\"\r\n        *ngIf=\"dataReady\">\r\n        <i class=\"jace-dsh-counter-icon fa fa-2x\" [ngClass]=\"[ model.icon ? model.icon : '']\" *ngIf=\"model.icon\"></i>\r\n        <div class=\"jace-dsh-counter-super\">{{model.superText}}</div>\r\n        <div class=\"jace-dsh-counter-value\"><span>{{model.value}}</span> <span\r\n                class=\"jace-dsh-counter-unit\">{{model.unit}}</span> </div>\r\n\r\n        <div class=\"jace-dsh-counter-sub\">{{model.subText}}</div>\r\n    </div>\r\n\r\n    <div class=\"jace-dsh-widget-settings jace-dsh-widget-slide \"\r\n        [ngClass]=\"{'jace-dsh-widget-settings-hide':!configuration,'jace-dsh-widget-settings-show':configuration}\">\r\n        <p>Configuration</p>\r\n    </div>\r\n</div>", styles: [".jace-dsh-counter-body{padding:1em .5em}.jace-dsh-counter-value{font-size:2em;font-weight:700;text-align:center}.jace-dsh-counter-unit{margin-left:.08em;font-size:.5em;text-align:center}.jace-dsh-counter-super{font-size:1em;text-align:center}.jace-dsh-counter-sub{font-size:.8em;text-align:center}.jace-dsh-counter-icon{position:absolute;font-size:2.6em;color:#b0c4de}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DSH_DATA_SERVICE]
+                }] }], propDecorators: { DashboardDate: [{
+                type: Input
+            }], OnRemove: [{
+                type: Output
+            }] } });
+
+class JaceListWidgetComponent {
+    constructor(dshService, router) {
+        this.dshService = dshService;
+        this.router = router;
+        this.OnRemove = new EventEmitter();
+        this.configuration = false;
+        this.dataReady = false;
+        this.lastdate = "";
+    }
+    setWidgetModel(dshBackendId, widgetModel) {
+        this.model = widgetModel;
+        if (this.model.backendid === undefined || this.model.backendid == "default_backend")
+            this.model.backendid = dshBackendId;
+        this.refreshData();
+    }
+    ngOnInit() { }
+    ngOnChanges(changes) {
+        //console.log(changes['DashboardDate'].currentValue);
+        if (changes['DashboardDate'].previousValue)
+            this.lastdate = changes['DashboardDate'].previousValue.toISOString();
+        let curdate = "";
+        if (changes['DashboardDate'].currentValue)
+            curdate = changes['DashboardDate'].currentValue.toISOString();
+        //fix per il datetimepicker material che cambia l'oggetto al momento del caricamento
+        if (this.lastdate != curdate) {
+            this.lastdate = curdate;
+            this.refreshData();
+        }
+    }
+    refreshData() {
+        if (!this.model)
+            return;
+        const pars = {};
+        if (this.DashboardDate)
+            pars["DT"] = this.DashboardDate.toISOString();
+        if (this.model.options && Object.keys(this.model.options).length != 0) {
+            for (let index = 0; index < Object.keys(this.model.options).length; index++) {
+                const k = Object.keys(this.model.options)[index];
+                pars[k] = this.model.options[k];
+            }
+        }
+        this.dshService.GetWidgetData(this.model.backendid, this.model.name, pars).subscribe(data => {
+            if (this.model) {
+                this.model.setData(data);
+                this.dataReady = true;
+            }
+        });
+    }
+    removeWidget() {
+        if (!this.model)
+            return;
+        this.OnRemove.emit(this.model.name);
+    }
+    itemClicked(item) {
+        if (item.link) {
+            //naviga al link
+            let to = item.link;
+            let par = {};
+            if (item.id && item.idParamName) {
+                par[item.idParamName] = item.id;
+            }
+            this.router.navigate([to, par]);
+        }
+    }
+    configure() {
+        if (this.configuration) {
+            //finito di configurare -> refreshData
+            this.refreshData();
+        }
+        this.configuration = !this.configuration;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: JaceListWidgetComponent, deps: [{ token: DSH_DATA_SERVICE }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: JaceListWidgetComponent, isStandalone: false, selector: "jace-dsh-list", inputs: { DashboardDate: "DashboardDate" }, outputs: { OnRemove: "OnRemove" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"jace-dsh-widget-header {{model?.name}}-header\">\r\n    <div class=\"jace-dsh-widget-title\" *ngIf=\"model.title\">\r\n        {{model.title}}\r\n    </div>\r\n    <div class=\"jace-dsh-widget-controls\" *ngIf=\"dataReady\">\r\n        <span class=\"transition drag-handler jace-dsh-widget-drag\" *ngIf=\"model.dragEnabled\">\r\n            <i class=\"fa fa-arrows-alt\"></i>\r\n        </span>\r\n        <span class=\"transition jace-dsh-widget-opts\" (click)=\"configure()\">\r\n            <i class=\"fa fa-cog\"></i>\r\n        </span>\r\n        <span (click)=\"removeWidget()\" class=\"transition remove-button jace-dsh-widget-close\">\r\n            <i class=\"fa fa-times\"></i>\r\n        </span>\r\n    </div>\r\n</div>\r\n<div class=\"jace-dsh-widget-body gridster-item-content {{model?.name}}-body\">\r\n    <div class=\"jace-dsh-widget-loading\" *ngIf=\"!dataReady\">\r\n        <i class=\"fa fa-spinner fa-spin\"></i>\r\n    </div>\r\n    <div class=\"jace-dsh-list-body jace-dsh-widget-slide\"\r\n        [ngClass]=\"{'jace-dsh-widget-content-hide':configuration,'jace-dsh-widget-content-show':!configuration}\"\r\n        *ngIf=\"dataReady\">\r\n        <div class=\"jace-dsh-list-super-text\" *ngIf=\"model.superText\">{{model.superText}}</div>\r\n        <div class=\"jace-dsh-list-item\" (click)=\"itemClicked(item)\" [class.jace-dsh-list-link]=\"item.link\"\r\n            *ngFor=\"let item of model.items\">\r\n            <div>\r\n                <span class=\"jace-dsh-list-item-id\" *ngIf=\"item.id && item.showId\">{{item.id}}</span>\r\n                <span>{{item.description}}</span>\r\n            </div>\r\n            <div *ngIf=\"item.subline\">\r\n                <span class=\"jace-dsh-list-item-subline\">{{item.subline}}</span>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n    <div class=\"jace-dsh-widget-settings jace-dsh-widget-slide \"\r\n        [ngClass]=\"{'jace-dsh-widget-settings-hide':!configuration,'jace-dsh-widget-settings-show':configuration}\">\r\n        <p>Configuration</p>\r\n    </div>\r\n</div>", styles: [".jace-dsh-list-body{height:100%;overflow-y:auto}.jace-dsh-list-super-text{font-weight:500}.jace-dsh-list-item{display:flow;flex-direction:row;justify-content:flex-start;padding:.4em;border:1px solid #eee;margin-top:2px}.jace-dsh-list-item-id{margin-right:1em;color:#fff;background:#637ca0;font-size:.8em;padding:.2em .5em;border-radius:.2em}.jace-dsh-list-link{color:#0275d8!important;cursor:pointer;text-decoration:none;display:block}.jace-dsh-list-link:hover{cursor:pointer;color:#fff;background-color:#b0c4de;text-decoration:underline}.jace-dsh-list-item-subline{font-size:.5em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: JaceListWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jace-dsh-list', standalone: false, template: "<div class=\"jace-dsh-widget-header {{model?.name}}-header\">\r\n    <div class=\"jace-dsh-widget-title\" *ngIf=\"model.title\">\r\n        {{model.title}}\r\n    </div>\r\n    <div class=\"jace-dsh-widget-controls\" *ngIf=\"dataReady\">\r\n        <span class=\"transition drag-handler jace-dsh-widget-drag\" *ngIf=\"model.dragEnabled\">\r\n            <i class=\"fa fa-arrows-alt\"></i>\r\n        </span>\r\n        <span class=\"transition jace-dsh-widget-opts\" (click)=\"configure()\">\r\n            <i class=\"fa fa-cog\"></i>\r\n        </span>\r\n        <span (click)=\"removeWidget()\" class=\"transition remove-button jace-dsh-widget-close\">\r\n            <i class=\"fa fa-times\"></i>\r\n        </span>\r\n    </div>\r\n</div>\r\n<div class=\"jace-dsh-widget-body gridster-item-content {{model?.name}}-body\">\r\n    <div class=\"jace-dsh-widget-loading\" *ngIf=\"!dataReady\">\r\n        <i class=\"fa fa-spinner fa-spin\"></i>\r\n    </div>\r\n    <div class=\"jace-dsh-list-body jace-dsh-widget-slide\"\r\n        [ngClass]=\"{'jace-dsh-widget-content-hide':configuration,'jace-dsh-widget-content-show':!configuration}\"\r\n        *ngIf=\"dataReady\">\r\n        <div class=\"jace-dsh-list-super-text\" *ngIf=\"model.superText\">{{model.superText}}</div>\r\n        <div class=\"jace-dsh-list-item\" (click)=\"itemClicked(item)\" [class.jace-dsh-list-link]=\"item.link\"\r\n            *ngFor=\"let item of model.items\">\r\n            <div>\r\n                <span class=\"jace-dsh-list-item-id\" *ngIf=\"item.id && item.showId\">{{item.id}}</span>\r\n                <span>{{item.description}}</span>\r\n            </div>\r\n            <div *ngIf=\"item.subline\">\r\n                <span class=\"jace-dsh-list-item-subline\">{{item.subline}}</span>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n    <div class=\"jace-dsh-widget-settings jace-dsh-widget-slide \"\r\n        [ngClass]=\"{'jace-dsh-widget-settings-hide':!configuration,'jace-dsh-widget-settings-show':configuration}\">\r\n        <p>Configuration</p>\r\n    </div>\r\n</div>", styles: [".jace-dsh-list-body{height:100%;overflow-y:auto}.jace-dsh-list-super-text{font-weight:500}.jace-dsh-list-item{display:flow;flex-direction:row;justify-content:flex-start;padding:.4em;border:1px solid #eee;margin-top:2px}.jace-dsh-list-item-id{margin-right:1em;color:#fff;background:#637ca0;font-size:.8em;padding:.2em .5em;border-radius:.2em}.jace-dsh-list-link{color:#0275d8!important;cursor:pointer;text-decoration:none;display:block}.jace-dsh-list-link:hover{cursor:pointer;color:#fff;background-color:#b0c4de;text-decoration:underline}.jace-dsh-list-item-subline{font-size:.5em}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DSH_DATA_SERVICE]
+                }] }, { type: i1$1.Router }], propDecorators: { DashboardDate: [{
+                type: Input
+            }], OnRemove: [{
+                type: Output
+            }] } });
+
+class CircleProgressOptions {
+    constructor() {
+        this.class = '';
+        this.backgroundGradient = false;
+        this.backgroundColor = 'transparent';
+        this.backgroundGradientStopColor = 'transparent';
+        this.backgroundOpacity = 1;
+        this.backgroundStroke = 'transparent';
+        this.backgroundStrokeWidth = 0;
+        this.backgroundPadding = 5;
+        this.percent = 0;
+        this.radius = 90;
+        this.space = 4;
+        this.toFixed = 0;
+        this.maxPercent = 1000;
+        this.renderOnClick = true;
+        this.units = '%';
+        this.unitsFontSize = '10';
+        this.unitsFontWeight = 'normal';
+        this.unitsColor = '#444444';
+        this.outerStrokeGradient = false;
+        this.outerStrokeWidth = 8;
+        this.outerStrokeColor = '#78C000';
+        this.outerStrokeGradientStopColor = 'transparent';
+        this.outerStrokeLinecap = 'round';
+        this.innerStrokeColor = '#C7E596';
+        this.innerStrokeWidth = 4;
+        this.titleFormat = undefined;
+        this.title = 'auto';
+        this.titleColor = '#444444';
+        this.titleFontSize = '20';
+        this.titleFontWeight = 'normal';
+        this.subtitleFormat = undefined;
+        this.subtitle = 'progress';
+        this.subtitleColor = '#A9A9A9';
+        this.subtitleFontSize = '10';
+        this.subtitleFontWeight = 'normal';
+        this.imageSrc = undefined;
+        this.imageHeight = 0;
+        this.imageWidth = 0;
+        this.animation = true;
+        this.animateTitle = true;
+        this.animateSubtitle = false;
+        this.animationDuration = 500;
+        this.showTitle = true;
+        this.showSubtitle = true;
+        this.showUnits = true;
+        this.showImage = false;
+        this.showBackground = true;
+        this.showInnerStroke = true;
+        this.clockwise = true;
+        this.responsive = false;
+        this.startFromZero = true;
+        this.showZeroOuterStroke = true;
+        this.lazy = false;
+    }
+}
+class CircleProgressComponent {
+    emitClickEvent(event) {
+        if (this.options.renderOnClick) {
+            this.animate(0, this.options.percent);
+        }
+        if (this.onClick.observers.length > 0) {
+            this.onClick.emit(event);
+        }
+    }
+    isDrawing() {
+        return (this._timerSubscription && !this._timerSubscription.closed);
+    }
+    findSvgElement() {
+        if (this.svgElement === null) {
+            let tags = this.elRef.nativeElement.getElementsByTagName('svg');
+            if (tags.length > 0) {
+                this.svgElement = tags[0];
+            }
+        }
+    }
+    isElementInViewport(el) {
+        // Return false if el has not been created in page.
+        if (el === null || el === undefined)
+            return false;
+        // Check if the element is out of view due to a container scrolling
+        let rect = el.getBoundingClientRect(), parent = el.parentNode, parentRect;
+        do {
+            parentRect = parent.getBoundingClientRect();
+            if (rect.top >= parentRect.bottom)
+                return false;
+            if (rect.bottom <= parentRect.top)
+                return false;
+            if (rect.left >= parentRect.right)
+                return false;
+            if (rect.right <= parentRect.left)
+                return false;
+            parent = parent.parentNode;
+        } while (parent != this.document.body);
+        // Check its within the document viewport
+        if (rect.top >= (this.window.innerHeight || this.document.documentElement.clientHeight))
+            return false;
+        if (rect.bottom <= 0)
+            return false;
+        if (rect.left >= (this.window.innerWidth || this.document.documentElement.clientWidth))
+            return false;
+        if (rect.right <= 0)
+            return false;
+        return true;
+    }
+    ngOnInit() {
+        this.loadEventsForLazyMode();
+    }
+    ngOnDestroy() {
+        this.unloadEventsForLazyMode();
+    }
+    ngOnChanges(changes) {
+        this.render();
+        if ('lazy' in changes) {
+            changes.lazy.currentValue ? this.loadEventsForLazyMode() : this.unloadEventsForLazyMode();
+        }
+    }
+    constructor(defaultOptions, ngZone, elRef, injector) {
+        this.ngZone = ngZone;
+        this.elRef = elRef;
+        this.onClick = new EventEmitter();
+        // <svg> of component
+        this.svgElement = null;
+        // whether <svg> is in viewport
+        this.isInViewport = false;
+        // event for notifying viewport change caused by scrolling or resizing
+        this.onViewportChanged = new EventEmitter();
+        this._viewportChangedSubscriber = null;
+        this.options = new CircleProgressOptions();
+        this.defaultOptions = new CircleProgressOptions();
+        this._lastPercent = 0;
+        this._gradientUUID = null;
+        this.render = () => {
+            this.applyOptions();
+            if (this.options.lazy) {
+                // Draw svg if it doesn't exist
+                this.svgElement === null && this.draw(this._lastPercent);
+                // Draw it only when it's in the viewport
+                if (this.isInViewport) {
+                    // Draw it at the latest position when I am in.
+                    if (this.options.animation && this.options.animationDuration > 0) {
+                        this.animate(this._lastPercent, this.options.percent);
+                    }
+                    else {
+                        this.draw(this.options.percent);
+                    }
+                    this._lastPercent = this.options.percent;
+                }
+            }
+            else {
+                if (this.options.animation && this.options.animationDuration > 0) {
+                    this.animate(this._lastPercent, this.options.percent);
+                }
+                else {
+                    this.draw(this.options.percent);
+                }
+                this._lastPercent = this.options.percent;
+            }
+        };
+        this.polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
+            let angleInRadius = angleInDegrees * Math.PI / 180;
+            let x = centerX + Math.sin(angleInRadius) * radius;
+            let y = centerY - Math.cos(angleInRadius) * radius;
+            return { x: x, y: y };
+        };
+        this.draw = (percent) => {
+            // make percent reasonable
+            percent = (percent === undefined) ? this.options.percent : Math.abs(percent);
+            // circle percent shouldn't be greater than 100%.
+            let circlePercent = (percent > 100) ? 100 : percent;
+            // determine box size
+            let boxSize = this.options.radius * 2 + this.options.outerStrokeWidth * 2;
+            if (this.options.showBackground) {
+                boxSize += (this.options.backgroundStrokeWidth * 2 + this.max(0, this.options.backgroundPadding * 2));
+            }
+            // the centre of the circle
+            let centre = { x: boxSize / 2, y: boxSize / 2 };
+            // the start point of the arc
+            let startPoint = { x: centre.x, y: centre.y - this.options.radius };
+            // get the end point of the arc
+            let endPoint = this.polarToCartesian(centre.x, centre.y, this.options.radius, 360 * (this.options.clockwise ?
+                circlePercent :
+                (100 - circlePercent)) / 100); // ####################
+            // We'll get an end point with the same [x, y] as the start point when percent is 100%, so move x a little bit.
+            if (circlePercent === 100) {
+                endPoint.x = endPoint.x + (this.options.clockwise ? -0.01 : +0.01);
+            }
+            // largeArcFlag and sweepFlag
+            let largeArcFlag, sweepFlag;
+            if (circlePercent > 50) {
+                [largeArcFlag, sweepFlag] = this.options.clockwise ? [1, 1] : [1, 0];
+            }
+            else {
+                [largeArcFlag, sweepFlag] = this.options.clockwise ? [0, 1] : [0, 0];
+            }
+            // percent may not equal the actual percent
+            let titlePercent = this.options.animateTitle ? percent : this.options.percent;
+            let titleTextPercent = titlePercent > this.options.maxPercent ?
+                `${this.options.maxPercent.toFixed(this.options.toFixed)}+` : titlePercent.toFixed(this.options.toFixed);
+            let subtitlePercent = this.options.animateSubtitle ? percent : this.options.percent;
+            // get title object
+            let title = {
+                x: centre.x,
+                y: centre.y,
+                textAnchor: 'middle',
+                color: this.options.titleColor,
+                fontSize: this.options.titleFontSize,
+                fontWeight: this.options.titleFontWeight,
+                texts: [],
+                tspans: []
+            };
+            // from v0.9.9, both title and titleFormat(...) may be an array of string.
+            if (this.options.titleFormat !== undefined && this.options.titleFormat.constructor.name === 'Function') {
+                let formatted = this.options.titleFormat(titlePercent);
+                if (formatted instanceof Array) {
+                    title.texts = [...formatted];
+                }
+                else {
+                    title.texts.push(formatted.toString());
+                }
+            }
+            else {
+                if (this.options.title === 'auto') {
+                    title.texts.push(titleTextPercent);
+                }
+                else {
+                    if (this.options.title instanceof Array) {
+                        title.texts = [...this.options.title];
+                    }
+                    else {
+                        title.texts.push(this.options.title.toString());
+                    }
+                }
+            }
+            // get subtitle object
+            let subtitle = {
+                x: centre.x,
+                y: centre.y,
+                textAnchor: 'middle',
+                color: this.options.subtitleColor,
+                fontSize: this.options.subtitleFontSize,
+                fontWeight: this.options.subtitleFontWeight,
+                texts: [],
+                tspans: []
+            };
+            // from v0.9.9, both subtitle and subtitleFormat(...) may be an array of string.
+            if (this.options.subtitleFormat !== undefined && this.options.subtitleFormat.constructor.name === 'Function') {
+                let formatted = this.options.subtitleFormat(subtitlePercent);
+                if (formatted instanceof Array) {
+                    subtitle.texts = [...formatted];
+                }
+                else {
+                    subtitle.texts.push(formatted.toString());
+                }
+            }
+            else {
+                if (this.options.subtitle instanceof Array) {
+                    subtitle.texts = [...this.options.subtitle];
+                }
+                else {
+                    subtitle.texts.push(this.options.subtitle.toString());
+                }
+            }
+            // get units object
+            let units = {
+                text: `${this.options.units}`,
+                fontSize: this.options.unitsFontSize,
+                fontWeight: this.options.unitsFontWeight,
+                color: this.options.unitsColor
+            };
+            // get total count of text lines to be shown
+            let rowCount = 0, rowNum = 1;
+            this.options.showTitle && (rowCount += title.texts.length);
+            this.options.showSubtitle && (rowCount += subtitle.texts.length);
+            // calc dy for each tspan for title
+            if (this.options.showTitle) {
+                for (let span of title.texts) {
+                    title.tspans.push({ span: span, dy: this.getRelativeY(rowNum, rowCount) });
+                    rowNum++;
+                }
+            }
+            // calc dy for each tspan for subtitle
+            if (this.options.showSubtitle) {
+                for (let span of subtitle.texts) {
+                    subtitle.tspans.push({ span: span, dy: this.getRelativeY(rowNum, rowCount) });
+                    rowNum++;
+                }
+            }
+            // create ID for gradient element
+            if (null === this._gradientUUID) {
+                this._gradientUUID = this.uuid();
+            }
+            // Bring it all together
+            this.svg = {
+                viewBox: `0 0 ${boxSize} ${boxSize}`,
+                // Set both width and height to '100%' if it's responsive
+                width: this.options.responsive ? '100%' : boxSize,
+                height: this.options.responsive ? '100%' : boxSize,
+                backgroundCircle: {
+                    cx: centre.x,
+                    cy: centre.y,
+                    r: this.options.radius + this.options.outerStrokeWidth / 2 + this.options.backgroundPadding,
+                    fill: this.options.backgroundColor,
+                    fillOpacity: this.options.backgroundOpacity,
+                    stroke: this.options.backgroundStroke,
+                    strokeWidth: this.options.backgroundStrokeWidth,
+                },
+                path: {
+                    // A rx ry x-axis-rotation large-arc-flag sweep-flag x y (https://developer.mozilla.org/en/docs/Web/SVG/Tutorial/Paths#Arcs)
+                    d: `M ${startPoint.x} ${startPoint.y}
+        A ${this.options.radius} ${this.options.radius} 0 ${largeArcFlag} ${sweepFlag} ${endPoint.x} ${endPoint.y}`,
+                    stroke: this.options.outerStrokeColor,
+                    strokeWidth: this.options.outerStrokeWidth,
+                    strokeLinecap: this.options.outerStrokeLinecap,
+                    fill: 'none'
+                },
+                circle: {
+                    cx: centre.x,
+                    cy: centre.y,
+                    r: this.options.radius - this.options.space - this.options.outerStrokeWidth / 2 - this.options.innerStrokeWidth / 2,
+                    fill: 'none',
+                    stroke: this.options.innerStrokeColor,
+                    strokeWidth: this.options.innerStrokeWidth,
+                },
+                title: title,
+                units: units,
+                subtitle: subtitle,
+                image: {
+                    x: centre.x - this.options.imageWidth / 2,
+                    y: centre.y - this.options.imageHeight / 2,
+                    src: this.options.imageSrc,
+                    width: this.options.imageWidth,
+                    height: this.options.imageHeight,
+                },
+                outerLinearGradient: {
+                    id: 'outer-linear-' + this._gradientUUID,
+                    colorStop1: this.options.outerStrokeColor,
+                    colorStop2: this.options.outerStrokeGradientStopColor === 'transparent' ? '#FFF' : this.options.outerStrokeGradientStopColor,
+                },
+                radialGradient: {
+                    id: 'radial-' + this._gradientUUID,
+                    colorStop1: this.options.backgroundColor,
+                    colorStop2: this.options.backgroundGradientStopColor === 'transparent' ? '#FFF' : this.options.backgroundGradientStopColor,
+                }
+            };
+        };
+        this.getAnimationParameters = (previousPercent, currentPercent) => {
+            const MIN_INTERVAL = 10;
+            let times, step, interval;
+            let fromPercent = this.options.startFromZero ? 0 : (previousPercent < 0 ? 0 : previousPercent);
+            let toPercent = currentPercent < 0 ? 0 : this.min(currentPercent, this.options.maxPercent);
+            let delta = Math.abs(Math.round(toPercent - fromPercent));
+            if (delta >= 100) {
+                // we will finish animation in 100 times
+                times = 100;
+                if (!this.options.animateTitle && !this.options.animateSubtitle) {
+                    step = 1;
+                }
+                else {
+                    // show title or subtitle animation even if the arc is full, we also need to finish it in 100 times.
+                    step = Math.round(delta / times);
+                }
+            }
+            else {
+                // we will finish in as many times as the number of percent.
+                times = delta;
+                step = 1;
+            }
+            // Get the interval of timer
+            interval = Math.round(this.options.animationDuration / times);
+            // Readjust all values if the interval of timer is extremely small.
+            if (interval < MIN_INTERVAL) {
+                interval = MIN_INTERVAL;
+                times = this.options.animationDuration / interval;
+                if (!this.options.animateTitle && !this.options.animateSubtitle && delta > 100) {
+                    step = Math.round(100 / times);
+                }
+                else {
+                    step = Math.round(delta / times);
+                }
+            }
+            // step must be greater than 0.
+            if (step < 1) {
+                step = 1;
+            }
+            return { times: times, step: step, interval: interval };
+        };
+        this.animate = (previousPercent, currentPercent) => {
+            if (this._timerSubscription && !this._timerSubscription.closed) {
+                this._timerSubscription.unsubscribe();
+            }
+            let fromPercent = this.options.startFromZero ? 0 : previousPercent;
+            let toPercent = currentPercent;
+            let { step: step, interval: interval } = this.getAnimationParameters(fromPercent, toPercent);
+            let count = fromPercent;
+            if (fromPercent < toPercent) {
+                this._timerSubscription = timer(0, interval).subscribe(() => {
+                    count += step;
+                    if (count <= toPercent) {
+                        if (!this.options.animateTitle && !this.options.animateSubtitle && count >= 100) {
+                            this.draw(toPercent);
+                            this._timerSubscription.unsubscribe();
+                        }
+                        else {
+                            this.draw(count);
+                        }
+                    }
+                    else {
+                        this.draw(toPercent);
+                        this._timerSubscription.unsubscribe();
+                    }
+                });
+            }
+            else {
+                this._timerSubscription = timer(0, interval).subscribe(() => {
+                    count -= step;
+                    if (count >= toPercent) {
+                        if (!this.options.animateTitle && !this.options.animateSubtitle && toPercent >= 100) {
+                            this.draw(toPercent);
+                            this._timerSubscription.unsubscribe();
+                        }
+                        else {
+                            this.draw(count);
+                        }
+                    }
+                    else {
+                        this.draw(toPercent);
+                        this._timerSubscription.unsubscribe();
+                    }
+                });
+            }
+        };
+        this.applyOptions = () => {
+            // the options of <circle-progress> may change already
+            for (let name of Object.keys(this.options)) {
+                if (this.hasOwnProperty(name) && this[name] !== undefined) {
+                    this.options[name] = this[name];
+                }
+                else if (this.templateOptions && this.templateOptions[name] !== undefined) {
+                    this.options[name] = this.templateOptions[name];
+                }
+            }
+            // make sure key options valid
+            this.options.radius = Math.abs(+this.options.radius);
+            this.options.space = +this.options.space;
+            this.options.percent = +this.options.percent > 0 ? +this.options.percent : 0;
+            this.options.maxPercent = Math.abs(+this.options.maxPercent);
+            this.options.animationDuration = Math.abs(this.options.animationDuration);
+            this.options.outerStrokeWidth = Math.abs(+this.options.outerStrokeWidth);
+            this.options.innerStrokeWidth = Math.abs(+this.options.innerStrokeWidth);
+            this.options.backgroundPadding = +this.options.backgroundPadding;
+        };
+        this.getRelativeY = (rowNum, rowCount) => {
+            // why '-0.18em'? It's a magic number when property 'alignment-baseline' equals 'baseline'. :)
+            let initialOffset = -0.18, offset = 1;
+            return (initialOffset + offset * (rowNum - rowCount / 2)).toFixed(2) + 'em';
+        };
+        this.min = (a, b) => {
+            return a < b ? a : b;
+        };
+        this.max = (a, b) => {
+            return a > b ? a : b;
+        };
+        this.uuid = () => {
+            // https://www.w3resource.com/javascript-exercises/javascript-math-exercise-23.php
+            var dt = new Date().getTime();
+            var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+                var r = (dt + Math.random() * 16) % 16 | 0;
+                dt = Math.floor(dt / 16);
+                return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+            });
+            return uuid;
+        };
+        this.checkViewport = () => {
+            this.findSvgElement();
+            let previousValue = this.isInViewport;
+            this.isInViewport = this.isElementInViewport(this.svgElement);
+            if (previousValue !== this.isInViewport && this.onViewportChanged.observers.length > 0) {
+                this.ngZone.run(() => {
+                    this.onViewportChanged.emit({ oldValue: previousValue, newValue: this.isInViewport });
+                });
+            }
+        };
+        this.onScroll = (event) => {
+            this.checkViewport();
+        };
+        this.loadEventsForLazyMode = () => {
+            if (this.options.lazy) {
+                this.ngZone.runOutsideAngular(() => {
+                    this.document.addEventListener('scroll', this.onScroll, true);
+                    this.window.addEventListener('resize', this.onScroll, true);
+                });
+                if (this._viewportChangedSubscriber === null) {
+                    this._viewportChangedSubscriber = this.onViewportChanged.subscribe(({ oldValue, newValue }) => {
+                        newValue ? this.render() : null;
+                    });
+                }
+                // svgElement must be created in DOM before being checked.
+                // Is there a better way to check the existence of svgElemnt?
+                let _timer = timer(0, 50).subscribe(() => {
+                    this.svgElement === null ? this.checkViewport() : _timer.unsubscribe();
+                });
+            }
+        };
+        this.unloadEventsForLazyMode = () => {
+            // Remove event listeners
+            this.document.removeEventListener('scroll', this.onScroll, true);
+            this.window.removeEventListener('resize', this.onScroll, true);
+            // Unsubscribe onViewportChanged
+            if (this._viewportChangedSubscriber !== null) {
+                this._viewportChangedSubscriber.unsubscribe();
+                this._viewportChangedSubscriber = null;
+            }
+        };
+        this.document = injector.get(DOCUMENT);
+        this.window = this.document.defaultView;
+        Object.assign(this.options, defaultOptions);
+        Object.assign(this.defaultOptions, defaultOptions);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CircleProgressComponent, deps: [{ token: CircleProgressOptions }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: CircleProgressComponent, isStandalone: false, selector: "circle-progress", inputs: { name: "name", class: "class", backgroundGradient: "backgroundGradient", backgroundColor: "backgroundColor", backgroundGradientStopColor: "backgroundGradientStopColor", backgroundOpacity: "backgroundOpacity", backgroundStroke: "backgroundStroke", backgroundStrokeWidth: "backgroundStrokeWidth", backgroundPadding: "backgroundPadding", radius: "radius", space: "space", percent: "percent", toFixed: "toFixed", maxPercent: "maxPercent", renderOnClick: "renderOnClick", units: "units", unitsFontSize: "unitsFontSize", unitsFontWeight: "unitsFontWeight", unitsColor: "unitsColor", outerStrokeGradient: "outerStrokeGradient", outerStrokeWidth: "outerStrokeWidth", outerStrokeColor: "outerStrokeColor", outerStrokeGradientStopColor: "outerStrokeGradientStopColor", outerStrokeLinecap: "outerStrokeLinecap", innerStrokeColor: "innerStrokeColor", innerStrokeWidth: "innerStrokeWidth", titleFormat: "titleFormat", title: "title", titleColor: "titleColor", titleFontSize: "titleFontSize", titleFontWeight: "titleFontWeight", subtitleFormat: "subtitleFormat", subtitle: "subtitle", subtitleColor: "subtitleColor", subtitleFontSize: "subtitleFontSize", subtitleFontWeight: "subtitleFontWeight", imageSrc: "imageSrc", imageHeight: "imageHeight", imageWidth: "imageWidth", animation: "animation", animateTitle: "animateTitle", animateSubtitle: "animateSubtitle", animationDuration: "animationDuration", showTitle: "showTitle", showSubtitle: "showSubtitle", showUnits: "showUnits", showImage: "showImage", showBackground: "showBackground", showInnerStroke: "showInnerStroke", clockwise: "clockwise", responsive: "responsive", startFromZero: "startFromZero", showZeroOuterStroke: "showZeroOuterStroke", lazy: "lazy", templateOptions: ["options", "templateOptions"] }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: `
+        <svg xmlns="http://www.w3.org/2000/svg" *ngIf="svg"
+             [attr.viewBox]="svg.viewBox" preserveAspectRatio="xMidYMid meet"
+             [attr.height]="svg.height" [attr.width]="svg.width" (click)="emitClickEvent($event)" [attr.class]="options.class">
+            <defs>
+                <linearGradient *ngIf="options.outerStrokeGradient" [attr.id]="svg.outerLinearGradient.id">
+                    <stop offset="5%" [attr.stop-color]="svg.outerLinearGradient.colorStop1"  [attr.stop-opacity]="1"/>
+                    <stop offset="95%" [attr.stop-color]="svg.outerLinearGradient.colorStop2" [attr.stop-opacity]="1"/>
+                </linearGradient>
+                <radialGradient *ngIf="options.backgroundGradient" [attr.id]="svg.radialGradient.id">
+                    <stop offset="5%" [attr.stop-color]="svg.radialGradient.colorStop1" [attr.stop-opacity]="1"/>
+                    <stop offset="95%" [attr.stop-color]="svg.radialGradient.colorStop2" [attr.stop-opacity]="1"/>
+                </radialGradient>
+            </defs>
+            <ng-container *ngIf="options.showBackground">
+                <circle *ngIf="!options.backgroundGradient"
+                        [attr.cx]="svg.backgroundCircle.cx"
+                        [attr.cy]="svg.backgroundCircle.cy"
+                        [attr.r]="svg.backgroundCircle.r"
+                        [attr.fill]="svg.backgroundCircle.fill"
+                        [attr.fill-opacity]="svg.backgroundCircle.fillOpacity"
+                        [attr.stroke]="svg.backgroundCircle.stroke"
+                        [attr.stroke-width]="svg.backgroundCircle.strokeWidth"/>
+                <circle *ngIf="options.backgroundGradient"
+                        [attr.cx]="svg.backgroundCircle.cx"
+                        [attr.cy]="svg.backgroundCircle.cy"
+                        [attr.r]="svg.backgroundCircle.r"
+                        attr.fill="url({{window.location.href}}#{{svg.radialGradient.id}})"
+                        [attr.fill-opacity]="svg.backgroundCircle.fillOpacity"
+                        [attr.stroke]="svg.backgroundCircle.stroke"
+                        [attr.stroke-width]="svg.backgroundCircle.strokeWidth"/>
+            </ng-container>            
+            <circle *ngIf="options.showInnerStroke"
+                    [attr.cx]="svg.circle.cx"
+                    [attr.cy]="svg.circle.cy"
+                    [attr.r]="svg.circle.r"
+                    [attr.fill]="svg.circle.fill"
+                    [attr.stroke]="svg.circle.stroke"
+                    [attr.stroke-width]="svg.circle.strokeWidth"/>
+            <ng-container *ngIf="+options.percent!==0 || options.showZeroOuterStroke">
+                <path *ngIf="!options.outerStrokeGradient"
+                        [attr.d]="svg.path.d"
+                        [attr.stroke]="svg.path.stroke"
+                        [attr.stroke-width]="svg.path.strokeWidth"
+                        [attr.stroke-linecap]="svg.path.strokeLinecap"
+                        [attr.fill]="svg.path.fill"/>
+                <path *ngIf="options.outerStrokeGradient"
+                        [attr.d]="svg.path.d"
+                        attr.stroke="url({{window.location.href}}#{{svg.outerLinearGradient.id}})"
+                        [attr.stroke-width]="svg.path.strokeWidth"
+                        [attr.stroke-linecap]="svg.path.strokeLinecap"
+                        [attr.fill]="svg.path.fill"/>
+            </ng-container>
+            <text *ngIf="!options.showImage && (options.showTitle || options.showUnits || options.showSubtitle)"
+                  alignment-baseline="baseline"
+                  [attr.x]="svg.circle.cx"
+                  [attr.y]="svg.circle.cy"
+                  [attr.text-anchor]="svg.title.textAnchor">
+                <ng-container *ngIf="options.showTitle">
+                    <tspan *ngFor="let tspan of svg.title.tspans"
+                           [attr.x]="svg.title.x"
+                           [attr.y]="svg.title.y"
+                           [attr.dy]="tspan.dy"
+                           [attr.font-size]="svg.title.fontSize"
+                           [attr.font-weight]="svg.title.fontWeight"
+                           [attr.fill]="svg.title.color">{{tspan.span}}</tspan>
+                </ng-container>
+                <tspan *ngIf="options.showUnits"
+                       [attr.font-size]="svg.units.fontSize"
+                       [attr.font-weight]="svg.units.fontWeight"
+                       [attr.fill]="svg.units.color">{{svg.units.text}}</tspan>
+                <ng-container *ngIf="options.showSubtitle">
+                    <tspan *ngFor="let tspan of svg.subtitle.tspans"
+                           [attr.x]="svg.subtitle.x"
+                           [attr.y]="svg.subtitle.y"
+                           [attr.dy]="tspan.dy"
+                           [attr.font-size]="svg.subtitle.fontSize"
+                           [attr.font-weight]="svg.subtitle.fontWeight"
+                           [attr.fill]="svg.subtitle.color">{{tspan.span}}</tspan>
+                </ng-container>
+            </text>
+            <image *ngIf="options.showImage" preserveAspectRatio="none" 
+                [attr.height]="svg.image.height"
+                [attr.width]="svg.image.width"
+                [attr.xlink:href]="svg.image.src"
+                [attr.x]="svg.image.x"
+                [attr.y]="svg.image.y"
+            />
+        </svg>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CircleProgressComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'circle-progress',
+                    standalone: false,
+                    template: `
+        <svg xmlns="http://www.w3.org/2000/svg" *ngIf="svg"
+             [attr.viewBox]="svg.viewBox" preserveAspectRatio="xMidYMid meet"
+             [attr.height]="svg.height" [attr.width]="svg.width" (click)="emitClickEvent($event)" [attr.class]="options.class">
+            <defs>
+                <linearGradient *ngIf="options.outerStrokeGradient" [attr.id]="svg.outerLinearGradient.id">
+                    <stop offset="5%" [attr.stop-color]="svg.outerLinearGradient.colorStop1"  [attr.stop-opacity]="1"/>
+                    <stop offset="95%" [attr.stop-color]="svg.outerLinearGradient.colorStop2" [attr.stop-opacity]="1"/>
+                </linearGradient>
+                <radialGradient *ngIf="options.backgroundGradient" [attr.id]="svg.radialGradient.id">
+                    <stop offset="5%" [attr.stop-color]="svg.radialGradient.colorStop1" [attr.stop-opacity]="1"/>
+                    <stop offset="95%" [attr.stop-color]="svg.radialGradient.colorStop2" [attr.stop-opacity]="1"/>
+                </radialGradient>
+            </defs>
+            <ng-container *ngIf="options.showBackground">
+                <circle *ngIf="!options.backgroundGradient"
+                        [attr.cx]="svg.backgroundCircle.cx"
+                        [attr.cy]="svg.backgroundCircle.cy"
+                        [attr.r]="svg.backgroundCircle.r"
+                        [attr.fill]="svg.backgroundCircle.fill"
+                        [attr.fill-opacity]="svg.backgroundCircle.fillOpacity"
+                        [attr.stroke]="svg.backgroundCircle.stroke"
+                        [attr.stroke-width]="svg.backgroundCircle.strokeWidth"/>
+                <circle *ngIf="options.backgroundGradient"
+                        [attr.cx]="svg.backgroundCircle.cx"
+                        [attr.cy]="svg.backgroundCircle.cy"
+                        [attr.r]="svg.backgroundCircle.r"
+                        attr.fill="url({{window.location.href}}#{{svg.radialGradient.id}})"
+                        [attr.fill-opacity]="svg.backgroundCircle.fillOpacity"
+                        [attr.stroke]="svg.backgroundCircle.stroke"
+                        [attr.stroke-width]="svg.backgroundCircle.strokeWidth"/>
+            </ng-container>            
+            <circle *ngIf="options.showInnerStroke"
+                    [attr.cx]="svg.circle.cx"
+                    [attr.cy]="svg.circle.cy"
+                    [attr.r]="svg.circle.r"
+                    [attr.fill]="svg.circle.fill"
+                    [attr.stroke]="svg.circle.stroke"
+                    [attr.stroke-width]="svg.circle.strokeWidth"/>
+            <ng-container *ngIf="+options.percent!==0 || options.showZeroOuterStroke">
+                <path *ngIf="!options.outerStrokeGradient"
+                        [attr.d]="svg.path.d"
+                        [attr.stroke]="svg.path.stroke"
+                        [attr.stroke-width]="svg.path.strokeWidth"
+                        [attr.stroke-linecap]="svg.path.strokeLinecap"
+                        [attr.fill]="svg.path.fill"/>
+                <path *ngIf="options.outerStrokeGradient"
+                        [attr.d]="svg.path.d"
+                        attr.stroke="url({{window.location.href}}#{{svg.outerLinearGradient.id}})"
+                        [attr.stroke-width]="svg.path.strokeWidth"
+                        [attr.stroke-linecap]="svg.path.strokeLinecap"
+                        [attr.fill]="svg.path.fill"/>
+            </ng-container>
+            <text *ngIf="!options.showImage && (options.showTitle || options.showUnits || options.showSubtitle)"
+                  alignment-baseline="baseline"
+                  [attr.x]="svg.circle.cx"
+                  [attr.y]="svg.circle.cy"
+                  [attr.text-anchor]="svg.title.textAnchor">
+                <ng-container *ngIf="options.showTitle">
+                    <tspan *ngFor="let tspan of svg.title.tspans"
+                           [attr.x]="svg.title.x"
+                           [attr.y]="svg.title.y"
+                           [attr.dy]="tspan.dy"
+                           [attr.font-size]="svg.title.fontSize"
+                           [attr.font-weight]="svg.title.fontWeight"
+                           [attr.fill]="svg.title.color">{{tspan.span}}</tspan>
+                </ng-container>
+                <tspan *ngIf="options.showUnits"
+                       [attr.font-size]="svg.units.fontSize"
+                       [attr.font-weight]="svg.units.fontWeight"
+                       [attr.fill]="svg.units.color">{{svg.units.text}}</tspan>
+                <ng-container *ngIf="options.showSubtitle">
+                    <tspan *ngFor="let tspan of svg.subtitle.tspans"
+                           [attr.x]="svg.subtitle.x"
+                           [attr.y]="svg.subtitle.y"
+                           [attr.dy]="tspan.dy"
+                           [attr.font-size]="svg.subtitle.fontSize"
+                           [attr.font-weight]="svg.subtitle.fontWeight"
+                           [attr.fill]="svg.subtitle.color">{{tspan.span}}</tspan>
+                </ng-container>
+            </text>
+            <image *ngIf="options.showImage" preserveAspectRatio="none" 
+                [attr.height]="svg.image.height"
+                [attr.width]="svg.image.width"
+                [attr.xlink:href]="svg.image.src"
+                [attr.x]="svg.image.x"
+                [attr.y]="svg.image.y"
+            />
+        </svg>
+    `
+                }]
+        }], ctorParameters: () => [{ type: CircleProgressOptions }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Injector }], propDecorators: { onClick: [{
+                type: Output
+            }], name: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], backgroundGradient: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }], backgroundGradientStopColor: [{
+                type: Input
+            }], backgroundOpacity: [{
+                type: Input
+            }], backgroundStroke: [{
+                type: Input
+            }], backgroundStrokeWidth: [{
+                type: Input
+            }], backgroundPadding: [{
+                type: Input
+            }], radius: [{
+                type: Input
+            }], space: [{
+                type: Input
+            }], percent: [{
+                type: Input
+            }], toFixed: [{
+                type: Input
+            }], maxPercent: [{
+                type: Input
+            }], renderOnClick: [{
+                type: Input
+            }], units: [{
+                type: Input
+            }], unitsFontSize: [{
+                type: Input
+            }], unitsFontWeight: [{
+                type: Input
+            }], unitsColor: [{
+                type: Input
+            }], outerStrokeGradient: [{
+                type: Input
+            }], outerStrokeWidth: [{
+                type: Input
+            }], outerStrokeColor: [{
+                type: Input
+            }], outerStrokeGradientStopColor: [{
+                type: Input
+            }], outerStrokeLinecap: [{
+                type: Input
+            }], innerStrokeColor: [{
+                type: Input
+            }], innerStrokeWidth: [{
+                type: Input
+            }], titleFormat: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], titleColor: [{
+                type: Input
+            }], titleFontSize: [{
+                type: Input
+            }], titleFontWeight: [{
+                type: Input
+            }], subtitleFormat: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], subtitleColor: [{
+                type: Input
+            }], subtitleFontSize: [{
+                type: Input
+            }], subtitleFontWeight: [{
+                type: Input
+            }], imageSrc: [{
+                type: Input
+            }], imageHeight: [{
+                type: Input
+            }], imageWidth: [{
+                type: Input
+            }], animation: [{
+                type: Input
+            }], animateTitle: [{
+                type: Input
+            }], animateSubtitle: [{
+                type: Input
+            }], animationDuration: [{
+                type: Input
+            }], showTitle: [{
+                type: Input
+            }], showSubtitle: [{
+                type: Input
+            }], showUnits: [{
+                type: Input
+            }], showImage: [{
+                type: Input
+            }], showBackground: [{
+                type: Input
+            }], showInnerStroke: [{
+                type: Input
+            }], clockwise: [{
+                type: Input
+            }], responsive: [{
+                type: Input
+            }], startFromZero: [{
+                type: Input
+            }], showZeroOuterStroke: [{
+                type: Input
+            }], lazy: [{
+                type: Input
+            }], templateOptions: [{
+                type: Input,
+                args: ['options']
+            }] } });
+
+class JaceMultiprogWidgetComponent {
+    constructor(dshService, router) {
+        this.dshService = dshService;
+        this.router = router;
+        this.OnRemove = new EventEmitter();
+        this.configuration = false;
+        this.dataReady = false;
+        this.lastdate = "";
+    }
+    setWidgetModel(dshBackendId, widgetModel) {
+        this.model = widgetModel;
+        if (this.model.backendid === undefined || this.model.backendid == "default_backend")
+            this.model.backendid = dshBackendId;
+        this.refreshData();
+    }
+    ngOnInit() { }
+    ngOnChanges(changes) {
+        //console.log(changes['DashboardDate'].currentValue);
+        if (changes['DashboardDate'].previousValue)
+            this.lastdate = changes['DashboardDate'].previousValue.toISOString();
+        let curdate = "";
+        if (changes['DashboardDate'].currentValue)
+            curdate = changes['DashboardDate'].currentValue.toISOString();
+        //fix per il datetimepicker material che cambia l'oggetto al momento del caricamento
+        if (this.lastdate != curdate) {
+            this.lastdate = curdate;
+            this.refreshData();
+        }
+    }
+    refreshData() {
+        if (!this.model)
+            return;
+        const pars = {};
+        if (this.DashboardDate)
+            pars["DT"] = this.DashboardDate.toISOString();
+        if (this.model.options && Object.keys(this.model.options).length != 0) {
+            for (let index = 0; index < Object.keys(this.model.options).length; index++) {
+                const k = Object.keys(this.model.options)[index];
+                pars[k] = this.model.options[k];
+            }
+        }
+        this.dshService.GetWidgetData(this.model.backendid, this.model.name, pars).subscribe(data => {
+            if (this.model) {
+                this.model.setData(data);
+                this.dataReady = true;
+            }
+        });
+    }
+    removeWidget() {
+        if (!this.model)
+            return;
+        this.OnRemove.emit(this.model.name);
+    }
+    configure() {
+        if (this.configuration) {
+            //finito di configurare -> refreshData
+            this.refreshData();
+        }
+        this.configuration = !this.configuration;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: JaceMultiprogWidgetComponent, deps: [{ token: DSH_DATA_SERVICE }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: JaceMultiprogWidgetComponent, isStandalone: false, selector: "jace-dsh-multiprog", inputs: { DashboardDate: "DashboardDate" }, outputs: { OnRemove: "OnRemove" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"jace-dsh-widget-header {{model?.name}}-header\">\r\n    <div class=\"jace-dsh-widget-title\" *ngIf=\"model.title\">\r\n        {{model.title}}\r\n    </div>\r\n    <div class=\"jace-dsh-widget-controls\" *ngIf=\"dataReady\">\r\n        <span class=\"transition drag-handler jace-dsh-widget-drag\" *ngIf=\"model.dragEnabled\">\r\n            <i class=\"fa fa-arrows-alt\"></i>\r\n        </span>\r\n        <span class=\"transition jace-dsh-widget-opts\" (click)=\"configure()\">\r\n            <i class=\"fa fa-cog\"></i>\r\n        </span>\r\n        <span (click)=\"removeWidget()\" class=\"transition remove-button jace-dsh-widget-close\">\r\n            <i class=\"fa fa-times\"></i>\r\n        </span>\r\n\r\n    </div>\r\n</div>\r\n<div class=\"jace-dsh-widget-body gridster-item-content {{model?.name}}-body\">\r\n    <div class=\"jace-dsh-widget-loading\" *ngIf=\"!dataReady\">\r\n        <i class=\"fa fa-spinner\"></i>\r\n    </div>\r\n    <div class=\"jace-dsh-multiprog-container jace-dsh-widget-slide\"\r\n        [ngClass]=\"{'jace-dsh-widget-content-hide':configuration,'jace-dsh-widget-content-show':!configuration}\"\r\n        *ngIf=\"dataReady\">\r\n        <div *ngFor=\"let item of model.progressTitles; let i = index\" class=\"jace-dsh-multiprog-progress\">\r\n            <div class=\"jace-dsh-multiprog-title\">{{item}}</div>\r\n            <!-- messo circle progress per tutto... prima si poteva switchare su progress bar ma pace -->\r\n             <circle-progress [percent]=\"model.progressValues[i]\" [showSubtitle]=false [radius]=\"36\"\r\n                [outerStrokeWidth]=\"4\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#7489AA'\"\r\n                [innerStrokeColor]=\"'#EFECCA'\" [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"true\"\r\n                ></circle-progress>\r\n        </div>\r\n    </div>\r\n    <div class=\"jace-dsh-widget-settings jace-dsh-widget-slide \"\r\n        [ngClass]=\"{'jace-dsh-widget-settings-hide':!configuration,'jace-dsh-widget-settings-show':configuration}\">\r\n        <p>Configuration</p>\r\n    </div>\r\n</div>", styles: [".jace-dsh-multiprog-title{text-align:center;font-weight:600;font-size:.8em}.jace-dsh-multiprog-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-evenly;padding:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: JaceMultiprogWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jace-dsh-multiprog', standalone: false, template: "<div class=\"jace-dsh-widget-header {{model?.name}}-header\">\r\n    <div class=\"jace-dsh-widget-title\" *ngIf=\"model.title\">\r\n        {{model.title}}\r\n    </div>\r\n    <div class=\"jace-dsh-widget-controls\" *ngIf=\"dataReady\">\r\n        <span class=\"transition drag-handler jace-dsh-widget-drag\" *ngIf=\"model.dragEnabled\">\r\n            <i class=\"fa fa-arrows-alt\"></i>\r\n        </span>\r\n        <span class=\"transition jace-dsh-widget-opts\" (click)=\"configure()\">\r\n            <i class=\"fa fa-cog\"></i>\r\n        </span>\r\n        <span (click)=\"removeWidget()\" class=\"transition remove-button jace-dsh-widget-close\">\r\n            <i class=\"fa fa-times\"></i>\r\n        </span>\r\n\r\n    </div>\r\n</div>\r\n<div class=\"jace-dsh-widget-body gridster-item-content {{model?.name}}-body\">\r\n    <div class=\"jace-dsh-widget-loading\" *ngIf=\"!dataReady\">\r\n        <i class=\"fa fa-spinner\"></i>\r\n    </div>\r\n    <div class=\"jace-dsh-multiprog-container jace-dsh-widget-slide\"\r\n        [ngClass]=\"{'jace-dsh-widget-content-hide':configuration,'jace-dsh-widget-content-show':!configuration}\"\r\n        *ngIf=\"dataReady\">\r\n        <div *ngFor=\"let item of model.progressTitles; let i = index\" class=\"jace-dsh-multiprog-progress\">\r\n            <div class=\"jace-dsh-multiprog-title\">{{item}}</div>\r\n            <!-- messo circle progress per tutto... prima si poteva switchare su progress bar ma pace -->\r\n             <circle-progress [percent]=\"model.progressValues[i]\" [showSubtitle]=false [radius]=\"36\"\r\n                [outerStrokeWidth]=\"4\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#7489AA'\"\r\n                [innerStrokeColor]=\"'#EFECCA'\" [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"true\"\r\n                ></circle-progress>\r\n        </div>\r\n    </div>\r\n    <div class=\"jace-dsh-widget-settings jace-dsh-widget-slide \"\r\n        [ngClass]=\"{'jace-dsh-widget-settings-hide':!configuration,'jace-dsh-widget-settings-show':configuration}\">\r\n        <p>Configuration</p>\r\n    </div>\r\n</div>", styles: [".jace-dsh-multiprog-title{text-align:center;font-weight:600;font-size:.8em}.jace-dsh-multiprog-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-evenly;padding:.5rem}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DSH_DATA_SERVICE]
+                }] }, { type: i1$1.Router }], propDecorators: { DashboardDate: [{
+                type: Input
+            }], OnRemove: [{
+                type: Output
+            }] } });
+
+class BaseJaceWidgetModel {
+    constructor() {
+        this.backendid = "default_backend";
+        this.resizeEnabled = false;
+        this.dataError = false;
+        this.options = {};
+    }
+    configureFromInstanceDetails(details) {
+        this.name = details.name;
+        this.widgetType = details.type;
+        this.title = details.title;
+        this.x = details.x;
+        this.y = details.y;
+        this.cols = details.cols;
+        this.rows = details.rows;
+        this.compactEnabled = details.compactenabled;
+        this.dragEnabled = details.dragenabled;
+        this.options = details.options;
+        this.dataError = details.queryerror;
+        this.resizeEnabled = details.resizeenabled;
+        this.backendid = details.backendid ?? "default_backend";
+    }
+}
+
+class JaceChartWidgetModel extends BaseJaceWidgetModel {
+    constructor() {
+        super();
+        this.chartType = 'line';
+        this.legend = false;
+        this.widgetType = "CHART";
+    }
+    setData(data) {
+        if (!data)
+            return;
+        if (data['queryerror'])
+            this.dataError = data['queryerror'];
+        if (data['legend'])
+            this.legend = data['legend'];
+        else
+            this.legend = true;
+        if (data['charttype'])
+            this.chartType = data['charttype'];
+        if (data['chartdata']) {
+            this.chartData = data['chartdata'];
+        }
+        if (this.options && this.options['legend'] == undefined)
+            this.options['legend'] = true;
+    }
+}
+
+class JaceCounterWidgetModel extends BaseJaceWidgetModel {
+    constructor() {
+        super();
+        this.superText = undefined;
+        this.subText = undefined;
+        this.value = 0;
+        this.icon = undefined;
+        this.unit = undefined;
+        this.widgetType = "COUNTER";
+    }
+    setData(data) {
+        if (data['queryerror'])
+            this.dataError = data['queryerror'];
+        this.superText = data['supertext'];
+        this.subText = data['subtext'];
+        this.value = data['value'];
+        this.icon = data['icon'];
+        this.options = data['options'];
+        this.unit = data['unit'];
+    }
+}
+
+class JaceListItemWidget {
+}
+class JaceListWidgetModel extends BaseJaceWidgetModel {
+    constructor() {
+        super();
+        this.superText = undefined;
+        this.items = [];
+        this.widgetType = "LIST";
+    }
+    setData(data) {
+        if (!data)
+            return;
+        if (data['queryerror'])
+            this.dataError = data['queryerror'];
+        this.superText = data['supertext'];
+        if (data['items']) {
+            const d = data['items'];
+            this.items = [];
+            for (let index = 0; index < d.length; index++) {
+                const item = new JaceListItemWidget();
+                const element = d[index];
+                if (element['id'])
+                    item.id = element['id'];
+                if (element['idparamname'])
+                    item.idParamName = element['idparamname'];
+                if (element['link'])
+                    item.link = element['link'];
+                if (element['subline'])
+                    item.subline = element['subline'];
+                if (element['classes'])
+                    item.classes = element['classes'];
+                item.description = element.description;
+                this.items.push(item);
+            }
+        }
+    }
+}
+
+class JaceMultiprogWidgetModel extends BaseJaceWidgetModel {
+    constructor() {
+        super();
+        this.resizeEnabled = true;
+        this.progressTitles = [];
+        this.progressValues = [];
+        this.circleProgress = false;
+        this.widgetType = "MULTIPROGRESS";
+    }
+    setData(data) {
+        if (data['queryerror'])
+            this.dataError = data['queryerror'];
+        this.progressTitles = data['progresstitles'] ?? [];
+        this.progressValues = data['progressvalues'] ?? [];
+        this.circleProgress = data['circleprogress'];
+        this.options = data['options'] ?? {};
+        if (this.circleProgress === undefined)
+            this.circleProgress = true;
+        if (this.cols === undefined && this.progressValues) {
+            if (this.progressValues.length == 1)
+                this.cols = 1;
+            else
+                this.cols = 2;
+        }
+    }
+}
+
+class DefaultDashboardModuleOptions {
+    constructor() {
+        this.widgetTypes = [
+            {
+                name: "COUNTER",
+                component: JaceCounterWidgetComponent,
+                model: JaceCounterWidgetModel
+            },
+            {
+                name: "LIST",
+                component: JaceListWidgetComponent,
+                model: JaceListWidgetModel
+            },
+            {
+                name: "CHART",
+                component: JaceChartWidgetComponent,
+                model: JaceChartWidgetModel
+            },
+            {
+                name: "MULTIPROGRESS",
+                component: JaceMultiprogWidgetComponent,
+                model: JaceMultiprogWidgetModel
+            }
+        ];
+    }
+}
+
+class DashboardWidgetFactory {
+    constructor() {
+        this.types = {};
+    }
+    addOption(option) {
+        if (option.widgetTypes) {
+            option.widgetTypes.forEach((o) => {
+                this.types[o.name] = o;
+            });
+        }
+    }
+    /**
+     * Versione ng11 della creazione dei componenti dinamici delle widget
+     * @param type
+     * @param vcr
+     * @returns
+     */
+    resolveComponent(type, vcr) {
+        if (!this.types)
+            return null;
+        let t = this.types[type];
+        if (!t)
+            return null;
+        let componentRef = vcr.createComponent(t.component);
+        return componentRef;
+    }
+    resolveDefinition(type, details) {
+        if (!this.types)
+            return null;
+        let t = this.types[type];
+        if (!t)
+            return null;
+        let definitionInstance = this.createInstance(t.model);
+        definitionInstance.configureFromInstanceDetails(details);
+        return definitionInstance;
+    }
+    createInstance(type) {
+        return new type();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DashboardWidgetFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DashboardWidgetFactory, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DashboardWidgetFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }], ctorParameters: () => [] });
+
+class SaveJaceDashboardLayoutDTO {
+    constructor() {
+        this.backendid = "default_backend";
+    }
+}
+
+//Definizione della widget restituita dal backend
+class JaceWidgetInstanceDetail {
+    constructor() {
+        this.queryerror = false;
+    }
+}
+
+/**
+ * Componente di base che rappresenta una dashboard.
+ * Utilizza Gridster2 per il layout delle widget [Gridster2](https://tiberiuzuld.github.io/angular-gridster2/)
+ */
+class DashboardComponent {
+    constructor(dshService, intercom, route, cmpFactory, cdr) {
+        this.dshService = dshService;
+        this.intercom = intercom;
+        this.route = route;
+        this.cmpFactory = cmpFactory;
+        this.cdr = cdr;
+        this.dashboardDate = new Date();
+        this.widgetDefinitions = [];
+        this.trackedSubscriptions = [];
+        this.destroySignal$ = new Subject();
+        this.intercom.send(InboundMessageTypes.Navigation, { sub: false, routeTitle: this.route.snapshot.data["title"] });
+    }
+    ngOnInit() { }
+    ngAfterViewInit() {
+        //qui this.gridItemRefs è 'riempito'
+        // sottoscrivo changes che sparerà tutte le volte che ngFor si aggiorna (ovvero quando cambia dashboard)
+        this.changesSub = this.gridItemRefs.changes.pipe(takeUntil(this.destroySignal$)).subscribe((comps) => {
+            this.renderLayout(comps);
+        });
+        //prima volta
+        //setTimeout(()=>this.reloadData(),500);
+        this.trackedSubscriptions.push(timer(500).pipe(takeUntil(this.destroySignal$), map(() => this.reloadData())).subscribe());
+    }
+    ngOnDestroy() {
+        //unsubscribe dalle changes dei viewref
+        if (this.changesSub)
+            this.changesSub.unsubscribe();
+        this.clearTrackedSubscriptions();
+        this.destroySignal$.next();
+        this.destroySignal$.complete();
+    }
+    clearTrackedSubscriptions() {
+        if (this.trackedSubscriptions) {
+            for (let index = 0; index < this.trackedSubscriptions.length; index++) {
+                const element = this.trackedSubscriptions[index];
+                element.unsubscribe();
+            }
+            this.trackedSubscriptions = [];
+        }
+    }
+    ngOnChanges(changes) {
+        //occhio: arriva prima di ngAfterViewInit
+        if (changes.Configuration) {
+            //appena ho configuration            
+            console.log(changes.Configuration);
+            // la prima volta l'ho già fatta alla creazione del componente
+            if (!changes.Configuration.firstChange) {
+                this.reloadData();
+            }
+        }
+    }
+    reloadData() {
+        if (!this.Configuration)
+            return;
+        this.dshService.GetUserDashboard(this.Configuration.backendId, this.Configuration.accountId, this.Configuration.dashboardName).pipe(takeUntil(this.destroySignal$)).subscribe(c => {
+            this.dashboardLayout = c;
+            this.widgetDefinitions = c.widgets.map(i => {
+                return this.cmpFactory.resolveDefinition(i.type, i);
+            });
+        });
+    }
+    removeItem(widgetName) {
+        if (!this.dashboardLayout)
+            return;
+        let idx = this.dashboardLayout.widgets.findIndex(s => s.name == widgetName);
+        this.widgetDefinitions.splice(idx, 1);
+    }
+    saveDashboard() {
+        if (!this.dashboardLayout)
+            return;
+        const dto = new SaveJaceDashboardLayoutDTO();
+        dto.backendid = this.Configuration.backendId;
+        dto.widgets = [];
+        for (let index = 0; index < this.widgetDefinitions.length; index++) {
+            const w = this.widgetDefinitions[index];
+            if (w == null)
+                continue;
+            let v = new JaceWidgetInstanceDetail();
+            v.id = w.id;
+            v.name = w.name;
+            v.x = w.x;
+            v.y = w.y;
+            v.cols = w.cols;
+            v.rows = w.rows;
+            v.compactenabled = w.compactEnabled;
+            v.dragenabled = w.dragEnabled;
+            v.resizeenabled = w.resizeEnabled;
+            v.type = w.widgetType;
+            v.title = w.title;
+            v.options = w.options;
+            dto.widgets.push(v);
+        }
+        this.dshService.SaveUserDashboard(dto).subscribe(res => {
+            if (res.success)
+                console.log('Dashboard saved');
+        });
+    }
+    renderLayout(comps) {
+        this.clearTrackedSubscriptions();
+        comps.map((host, index) => {
+            const vcr = host;
+            vcr.clear();
+            const widgetData = this.widgetDefinitions[index];
+            if (!widgetData || !widgetData.widgetType)
+                return;
+            let componentRef;
+            componentRef = this.cmpFactory.resolveComponent(widgetData?.widgetType, vcr);
+            if (!componentRef) {
+                console.log(`Tipo widget sconosciuto ${widgetData.widgetType}`);
+                return;
+            }
+            //setta l'input della data
+            if (this.Configuration.showDateInput)
+                componentRef.instance.DashboardDate = this.dashboardDate;
+            //setta il modello
+            componentRef.instance.setWidgetModel(this.Configuration.backendId, widgetData);
+            //setta la callback per OnRemove
+            let s = componentRef.instance.OnRemove.pipe(takeUntil(this.destroySignal$)).subscribe(name => this.removeItem(name));
+            this.trackedSubscriptions.push(s);
+            //componentRef.changeDetectorRef.markForCheck();
+            //componentRef.changeDetectorRef.detectChanges();
+        });
+        this.cdr.detectChanges();
+    }
+    addItem() {
+        //this.dashboard.push({});
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DashboardComponent, deps: [{ token: DSH_DATA_SERVICE }, { token: i1$2.InterComService }, { token: i1$1.ActivatedRoute }, { token: DashboardWidgetFactory }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: DashboardComponent, isStandalone: false, selector: "es-dashboard", inputs: { Configuration: "Configuration" }, viewQueries: [{ propertyName: "gridItemRefs", predicate: ["grid_item"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"Configuration\">\r\n\r\n    <form role=\"form\" class=\"jace-dsh-toolbar\" *ngIf=\"Configuration.showToolbar\">\r\n        <div *ngIf=\"Configuration.dashboardTitle\" class=\"jace-dsh-toolbar-title\">\r\n            {{Configuration.dashboardTitle}}\r\n        </div>\r\n        <div class=\"jace-dsh-toolbar-dtp\" *ngIf=\"Configuration?.showDateInput\">\r\n            <form-date InOutFormat=\"date\" [FormLayout]=\"false\" id=\"txt_dashboarddate\" [Validation]=\"false\"\r\n                autocomplete=\"off\" [(ngModel)]=\"dashboardDate\" name=\"dashboarddate\" [Placeholder]=\"'Dashboard Date'\">\r\n            </form-date>\r\n        </div>\r\n        <div class=\"jace-dsh-save-button\" (click)=\"saveDashboard()\">\r\n            <span class=\"transition\">\r\n                <i class=\"fa fa-save\"></i>\r\n            </span>\r\n        </div>\r\n    </form>\r\n\r\n    <gridster [options]=\"Configuration.gridsterConfig\" class=\"jace-dsh-widget-area\">\r\n        <gridster-item [item]=\"item\" *ngFor=\"let item of widgetDefinitions\" class=\"jace-dsh-widget {{item.name}}\">\r\n        <!-- <ng-container *ngFor=\"let item of widgetDefinitions\"> -->\r\n            <ng-template #grid_item></ng-template>\r\n        <!-- </ng-container> -->\r\n        </gridster-item>\r\n    </gridster>\r\n\r\n</ng-container>", styles: [".jace-dsh-toolbar{font-size:smaller;display:flex;flex-flow:row;justify-content:flex-end;align-items:center;padding:0 1em .5em}.jace-dsh-toolbar-title{flex:2 1 auto;font-size:2em;color:#777;font-variant:small-caps}.jace-dsh-toolbar-dtp{flex:1 1 auto}.jace-dsh-save-button{font-size:larger;padding:.5em 1em;border-radius:4px;border:1px solid #ddd;color:#777;margin-left:.5em;cursor:pointer;flex:0 0 auto}.jace-dsh-save-button:hover{color:#000;border-color:#000}.jace-dsh-widget-area{background:#e9ebee;scroll-behavior:auto}.jace-dsh-widget{border:solid 1px #ddd;border-radius:5px;min-width:204px}.jace-dsh-widget-header{margin:0rem .5rem;display:flex;flex-flow:row;justify-content:left;align-items:center}.jace-dsh-widget-title{padding:.5rem .2rem .3rem;border-bottom:solid 1px #ddd;text-transform:uppercase;font-size:.8rem}.jace-dsh-widget-body{margin:0rem .5rem;display:flex;flex-wrap:nowrap;overflow-x:clip}.jace-dsh-widget-loading{padding:.5rem;width:100%;flex:0 0 auto;font-size:4rem;font-weight:700;text-align:center}.jace-dsh-widget-slide{transition-property:transform;transition-duration:.75s;transition-timing-function:ease;width:100%;flex:0 0 auto}.jace-dsh-widget-content-show{transform:translate(0) translateZ(0)}.jace-dsh-widget-content-hide,.jace-dsh-widget-settings-show{transform:translate(-100%) translateZ(0)}.jace-dsh-widget-settings-hide{transform:translate(0) translateZ(0)}.jace-dsh-widget-settings{padding:.5rem;width:100%;flex:0 0 auto}.jace-dsh-widget-controls{margin-left:auto;order:2;z-index:1;top:0rem;right:0rem;padding:.2rem .1rem;font-size:1rem;color:#bbb;align-items:center;cursor:pointer}.jace-dsh-widget-drag{font-size:.78em}.jace-dsh-widget-opts{font-size:.92em}.jace-dsh-widget-close{font-size:1.1em}.jace-dsh-widget-controls span{margin-right:.1rem;margin-left:.1rem}.jace-dsh-widget-controls span:hover{color:#637ca0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i6.GridsterComponent, selector: "gridster", inputs: ["options"] }, { kind: "component", type: i6.GridsterItemComponent, selector: "gridster-item", inputs: ["item"], outputs: ["itemInit", "itemChange", "itemResize"] }, { kind: "component", type: i7.EsFormDateComponent, selector: "form-date", inputs: ["InOutFormat", "FloatingLabel"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DashboardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'es-dashboard', encapsulation: ViewEncapsulation.None, standalone: false, template: "<ng-container *ngIf=\"Configuration\">\r\n\r\n    <form role=\"form\" class=\"jace-dsh-toolbar\" *ngIf=\"Configuration.showToolbar\">\r\n        <div *ngIf=\"Configuration.dashboardTitle\" class=\"jace-dsh-toolbar-title\">\r\n            {{Configuration.dashboardTitle}}\r\n        </div>\r\n        <div class=\"jace-dsh-toolbar-dtp\" *ngIf=\"Configuration?.showDateInput\">\r\n            <form-date InOutFormat=\"date\" [FormLayout]=\"false\" id=\"txt_dashboarddate\" [Validation]=\"false\"\r\n                autocomplete=\"off\" [(ngModel)]=\"dashboardDate\" name=\"dashboarddate\" [Placeholder]=\"'Dashboard Date'\">\r\n            </form-date>\r\n        </div>\r\n        <div class=\"jace-dsh-save-button\" (click)=\"saveDashboard()\">\r\n            <span class=\"transition\">\r\n                <i class=\"fa fa-save\"></i>\r\n            </span>\r\n        </div>\r\n    </form>\r\n\r\n    <gridster [options]=\"Configuration.gridsterConfig\" class=\"jace-dsh-widget-area\">\r\n        <gridster-item [item]=\"item\" *ngFor=\"let item of widgetDefinitions\" class=\"jace-dsh-widget {{item.name}}\">\r\n        <!-- <ng-container *ngFor=\"let item of widgetDefinitions\"> -->\r\n            <ng-template #grid_item></ng-template>\r\n        <!-- </ng-container> -->\r\n        </gridster-item>\r\n    </gridster>\r\n\r\n</ng-container>", styles: [".jace-dsh-toolbar{font-size:smaller;display:flex;flex-flow:row;justify-content:flex-end;align-items:center;padding:0 1em .5em}.jace-dsh-toolbar-title{flex:2 1 auto;font-size:2em;color:#777;font-variant:small-caps}.jace-dsh-toolbar-dtp{flex:1 1 auto}.jace-dsh-save-button{font-size:larger;padding:.5em 1em;border-radius:4px;border:1px solid #ddd;color:#777;margin-left:.5em;cursor:pointer;flex:0 0 auto}.jace-dsh-save-button:hover{color:#000;border-color:#000}.jace-dsh-widget-area{background:#e9ebee;scroll-behavior:auto}.jace-dsh-widget{border:solid 1px #ddd;border-radius:5px;min-width:204px}.jace-dsh-widget-header{margin:0rem .5rem;display:flex;flex-flow:row;justify-content:left;align-items:center}.jace-dsh-widget-title{padding:.5rem .2rem .3rem;border-bottom:solid 1px #ddd;text-transform:uppercase;font-size:.8rem}.jace-dsh-widget-body{margin:0rem .5rem;display:flex;flex-wrap:nowrap;overflow-x:clip}.jace-dsh-widget-loading{padding:.5rem;width:100%;flex:0 0 auto;font-size:4rem;font-weight:700;text-align:center}.jace-dsh-widget-slide{transition-property:transform;transition-duration:.75s;transition-timing-function:ease;width:100%;flex:0 0 auto}.jace-dsh-widget-content-show{transform:translate(0) translateZ(0)}.jace-dsh-widget-content-hide,.jace-dsh-widget-settings-show{transform:translate(-100%) translateZ(0)}.jace-dsh-widget-settings-hide{transform:translate(0) translateZ(0)}.jace-dsh-widget-settings{padding:.5rem;width:100%;flex:0 0 auto}.jace-dsh-widget-controls{margin-left:auto;order:2;z-index:1;top:0rem;right:0rem;padding:.2rem .1rem;font-size:1rem;color:#bbb;align-items:center;cursor:pointer}.jace-dsh-widget-drag{font-size:.78em}.jace-dsh-widget-opts{font-size:.92em}.jace-dsh-widget-close{font-size:1.1em}.jace-dsh-widget-controls span{margin-right:.1rem;margin-left:.1rem}.jace-dsh-widget-controls span:hover{color:#637ca0}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DSH_DATA_SERVICE]
+                }] }, { type: i1$2.InterComService }, { type: i1$1.ActivatedRoute }, { type: DashboardWidgetFactory }, { type: i0.ChangeDetectorRef }], propDecorators: { Configuration: [{
+                type: Input
+            }], gridItemRefs: [{
+                type: ViewChildren,
+                args: ['grid_item', { read: ViewContainerRef }]
+            }] } });
+
+const Repository = {
+    GET_Dashboard_GetLayout: "/api/Dashboard/GetLayout",
+    POST_Dashboard_SaveLayout: "/api/Dashboard/SaveLayout",
+    GET_Dashboard_GetWidgetData: "/api/Dashboard/GetWidgetData"
+};
+
+class DashboardFeatureAPIDataService {
+    constructor(http) {
+        this.http = http;
+    }
+    GetUserDashboard(backendid, idaccount, dashboardName) {
+        let params = new HttpParams();
+        params = params.append("backendid", backendid.toString());
+        params = params.append("idaccount", idaccount.toString());
+        params = params.append("name", dashboardName);
+        return this.http.get(Repository["GET_Dashboard_GetLayout"], params);
+    }
+    SaveUserDashboard(dto) {
+        return this.http.post(Repository["POST_Dashboard_SaveLayout"], dto);
+    }
+    GetWidgetData(backendid, name, options) {
+        let params = new HttpParams();
+        params = params.append("backendid", backendid.toString());
+        params = params.append("name", name.toString());
+        if (options && Object.keys(options).length != 0) {
+            for (let index = 0; index < Object.keys(options).length; index++) {
+                const k = Object.keys(options)[index];
+                params = params.append(k, options[k]);
+            }
+        }
+        return this.http.get(Repository["GET_Dashboard_GetWidgetData"], params);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DashboardFeatureAPIDataService, deps: [{ token: i1$3.HTTPService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DashboardFeatureAPIDataService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DashboardFeatureAPIDataService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1$3.HTTPService }] });
+
+const MODULES = [
+    // Base
+    CommonModule,
+    FormsModule,
+    GridsterModule,
+    FormsAndValidationsModule,
+    EsChartsModule,
+    HttpserviceModule
+];
+const COMPONENTS = [
+    DashboardComponent,
+    JaceListWidgetComponent,
+    JaceCounterWidgetComponent,
+    JaceChartWidgetComponent,
+    JaceMultiprogWidgetComponent,
+    CircleProgressComponent
+];
+class DashboardFeatureModule {
+    static forRoot(options) {
+        return {
+            ngModule: DashboardFeatureModule,
+            providers: [
+                { provide: DSH_OPTIONS, multi: true, useValue: new DefaultDashboardModuleOptions() },
+                { provide: DSH_OPTIONS, multi: true, useValue: options },
+                { provide: DSH_DATA_SERVICE, useClass: DashboardFeatureAPIDataService },
+                DashboardWidgetFactory
+            ]
+        };
+    }
+    constructor(componentFactory, options) {
+        if (!options)
+            return;
+        options.map((o) => componentFactory.addOption(o));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DashboardFeatureModule, deps: [{ token: DashboardWidgetFactory }, { token: DSH_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: DashboardFeatureModule, declarations: [DashboardComponent,
+            JaceListWidgetComponent,
+            JaceCounterWidgetComponent,
+            JaceChartWidgetComponent,
+            JaceMultiprogWidgetComponent,
+            CircleProgressComponent], imports: [
+            // Base
+            CommonModule,
+            FormsModule,
+            GridsterModule,
+            FormsAndValidationsModule,
+            EsChartsModule,
+            HttpserviceModule], exports: [DashboardComponent,
+            JaceListWidgetComponent,
+            JaceCounterWidgetComponent,
+            JaceChartWidgetComponent,
+            JaceMultiprogWidgetComponent,
+            CircleProgressComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DashboardFeatureModule, imports: [MODULES] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DashboardFeatureModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENTS],
+                    imports: [...MODULES],
+                    exports: [...COMPONENTS]
+                }]
+        }], ctorParameters: () => [{ type: DashboardWidgetFactory }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DSH_OPTIONS]
+                }] }] });
+
+/**
+ * Configurazione della dashboard
+ */
+class JaceDashboardConfig {
+    constructor() {
+        /**
+         * Id del backend a cui verranno indirizzate le chiamate di questa dashboard.
+         * Deve essere uno di quelli definiti in appsetting.json del FE nella sezione **Backends**.
+         */
+        this.backendId = "default_backend";
+        /**
+         * Se questa dashboard contiene widget che mostrano dati che dipendono dalla data corrente
+         * mostra il controllo (datetimepicker) per variare la data in base a cui mostrare i dati.
+         *
+         * NOTA: showToolbar deve essere a true.
+         *
+         * Default = false
+         */
+        this.showDateInput = false;
+        /**
+         * Mostrare la toolbar in cima alla dashboard che contiene il titolo, il pulsante per salvare il proprio layout personalizzato
+         * e il picker per scegliere la data nel caso che le widget nella dashboard mostrino dati dipendenti dalla data.
+         *
+         * Default = true
+         */
+        this.showToolbar = true;
+        /**
+         * Titolo della dashboard mostrato in cima al layout all'interno della toolbar.
+         *
+         * NOTA: showToolbar deve essere a true.
+         *
+         * Default = undefined
+         */
+        this.dashboardTitle = undefined;
+        //default per gridster
+        this.gridsterConfig = {
+            maxCols: 10,
+            maxRows: 10,
+            minCols: 5,
+            minRows: 6,
+            defaultItemCols: 1,
+            defaultItemRows: 1,
+            disablePushOnDrag: true,
+            draggable: { enabled: true, ignoreContent: true },
+            displayGrid: "onDrag&Resize",
+            gridType: GridType.Fit,
+            resizable: { enabled: true },
+            /* fixedRowHeight: 164, */
+            setGridSize: true,
+            //compactType: "compactUp&Left"
+            /* itemChangeCallback: AppComponent.itemChange,
+            itemResizeCallback: AppComponent.itemResize, */
+        };
+    }
+}
+
+class JaceDashboardLayoutAppSearch extends AppSearch {
+    constructor() {
+        super(...arguments);
+        this.backendid = "default_backend";
+    }
+}
+
+//Definizione del layout della dashboard definito dal Backend
+class JaceDashboardLayoutDetail {
+}
+
+/**
+ * Classe di base astratta per la creazione di Widget custom.
+ */
+class BaseWidgetComponent {
+    constructor(dshService) {
+        this.dshService = dshService;
+        this.OnRemove = new EventEmitter();
+        this.configuration = false;
+        this.dataReady = false;
+        this.lastdate = "";
+    }
+    setWidgetModel(dshBackendId, widgetModel) {
+        this.model = widgetModel;
+        if (this.model.backendid === undefined || this.model.backendid == "default_backend")
+            this.model.backendid = dshBackendId;
+        this.refreshData();
+    }
+    ngOnInit() { }
+    ngOnChanges(changes) {
+        //console.log(changes['DashboardDate'].currentValue);
+        if (changes['DashboardDate'].previousValue)
+            this.lastdate = changes['DashboardDate'].previousValue.toISOString();
+        let curdate = "";
+        if (changes['DashboardDate'].currentValue)
+            curdate = changes['DashboardDate'].currentValue.toISOString();
+        //fix per il datetimepicker material che cambia l'oggetto al momento del caricamento
+        if (this.lastdate != curdate) {
+            this.lastdate = curdate;
+            this.refreshData();
+        }
+    }
+    /**
+     * Prepara i parametri e lancia la chiamata GetWidgetData della DashboardFeatureService.
+     * Imposta il model con i dati restituiti (setData) e imposta la variabile dataReady del campo a true
+     */
+    refreshData() {
+        if (!this.model)
+            return;
+        const pars = {};
+        if (this.DashboardDate)
+            pars["DT"] = this.DashboardDate.toISOString();
+        if (this.model.options && Object.keys(this.model.options).length != 0) {
+            for (let index = 0; index < Object.keys(this.model.options).length; index++) {
+                const k = Object.keys(this.model.options)[index];
+                pars[k] = this.model.options[k];
+            }
+        }
+        this.prepareGetDataParameters(pars);
+        this.dshService.GetWidgetData(this.model.backendid, this.model.name, pars).subscribe(data => {
+            if (this.model) {
+                this.model.setData(data);
+                this.dataReady = true;
+            }
+        });
+    }
+    /**
+     * Da chiamare quando l'utente preme il pulsante 'rimuovi' nella toolbar della widget.
+     */
+    removeWidget() {
+        if (!this.model)
+            return;
+        this.OnRemove.emit(this.model.name);
+    }
+    /**
+     * Da chiamare quando viene premuto il pulsante 'configure' nella toolbar della widget
+     */
+    configureWidget() {
+        if (this.configuration) {
+            //finito di configurare -> refreshData
+            this.refreshData();
+        }
+        this.configuration = !this.configuration;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BaseWidgetComponent, deps: [{ token: DSH_DATA_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BaseWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BaseWidgetComponent, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DSH_DATA_SERVICE]
+                }] }] });
+
+var JaceWidgetTypes;
+(function (JaceWidgetTypes) {
+    JaceWidgetTypes["CHART"] = "CHART";
+    JaceWidgetTypes["COUNTER"] = "COUNTER";
+    JaceWidgetTypes["LIST"] = "LIST";
+    JaceWidgetTypes["MULTIPROGRESS"] = "MULTIPROGRESS";
+})(JaceWidgetTypes || (JaceWidgetTypes = {}));
+
+/*
+ * Public API Surface of dashboard-feature
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BaseJaceWidgetModel, BaseWidgetComponent, CircleProgressComponent, CircleProgressOptions, DSH_DATA_SERVICE, DashboardComponent, DashboardFeatureAPIDataService, DashboardFeatureModule, DashboardWidgetFactory, DefaultDashboardModuleOptions, JaceChartWidgetComponent, JaceCounterWidgetComponent, JaceDashboardConfig, JaceDashboardLayoutAppSearch, JaceDashboardLayoutDetail, JaceListWidgetComponent, JaceMultiprogWidgetComponent, JaceWidgetInstanceDetail, JaceWidgetTypes, SaveJaceDashboardLayoutDTO };
+//# sourceMappingURL=esfaenza-dashboard-feature.mjs.map