@esfaenza/dashboard-feature 19.2.0 → 19.2.2

package/fesm2022/esfaenza-dashboard-feature.mjs

@@ -1,21 +1,21 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, EventEmitter, Output, Input, Inject, Component, Injectable, ViewContainerRef, ViewChildren, ViewEncapsulation, Optional, NgModule } from '@angular/core';
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
+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$1 from '@esfaenza/es-charts';
+import * as i2 from '@esfaenza/es-charts';
 import { EsChartsModule } from '@esfaenza/es-charts';
-import * as i1 from '@angular/router';
-import * as i1$1 from '@esfaenza/extensions';
+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 { Subject, timer } from 'rxjs';
 import { takeUntil, map } from 'rxjs/operators';
 import * as i7 from '@esfaenza/forms-and-validations';
 import { FormsAndValidationsModule } from '@esfaenza/forms-and-validations';
-import * as i1$2 from '@esfaenza/httpservice';
+import * as i1$3 from '@esfaenza/httpservice';
 import { HttpserviceModule } from '@esfaenza/httpservice';
 import { HttpParams } from '@angular/common/http';
 import { AppSearch } from '@esfaenza/es-table';
@@ -90,7 +90,7 @@ class JaceChartWidgetComponent {
         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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.EsChartComponent, selector: "es-chart", inputs: ["Type", "Data", "DataArray"] }] }); }
+    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,
@@ -166,7 +166,7 @@ class JaceCounterWidgetComponent {
         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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    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,
@@ -251,8 +251,8 @@ class JaceListWidgetComponent {
         }
         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.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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    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,
@@ -260,12 +260,835 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [DSH_DATA_SERVICE]
-                }] }, { type: i1.Router }], propDecorators: { DashboardDate: [{
+                }] }, { 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;
@@ -326,16 +1149,16 @@ class JaceMultiprogWidgetComponent {
         }
         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.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            <!-- TODO: riportare in vita la parte grafica... con calma -->\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                *ngIf=\"model.circleProgress\"></circle-progress>\r\n            <mat-progress-bar [value]=\"model.progressValues[i]\" [mode]=\"'determinate'\" *ngIf=\"!model.circleProgress\">\r\n            </mat-progress-bar> -->\r\n            <span>{{model.progressValues[i]}}</span>\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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    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            <!-- TODO: riportare in vita la parte grafica... con calma -->\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                *ngIf=\"model.circleProgress\"></circle-progress>\r\n            <mat-progress-bar [value]=\"model.progressValues[i]\" [mode]=\"'determinate'\" *ngIf=\"!model.circleProgress\">\r\n            </mat-progress-bar> -->\r\n            <span>{{model.progressValues[i]}}</span>\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"] }]
+            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.Router }], propDecorators: { DashboardDate: [{
+                }] }, { type: i1$1.Router }], propDecorators: { DashboardDate: [{
                 type: Input
             }], OnRemove: [{
                 type: Output
@@ -697,8 +1520,8 @@ class DashboardComponent {
     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$1.InterComService }, { token: i1.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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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 }); }
+    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,
@@ -706,7 +1529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [DSH_DATA_SERVICE]
-                }] }, { type: i1$1.InterComService }, { type: i1.ActivatedRoute }, { type: DashboardWidgetFactory }, { type: i0.ChangeDetectorRef }], propDecorators: { Configuration: [{
+                }] }, { type: i1$2.InterComService }, { type: i1$1.ActivatedRoute }, { type: DashboardWidgetFactory }, { type: i0.ChangeDetectorRef }], propDecorators: { Configuration: [{
                 type: Input
             }], gridItemRefs: [{
                 type: ViewChildren,
@@ -745,12 +1568,12 @@ class DashboardFeatureAPIDataService {
         }
         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$2.HTTPService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    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$2.HTTPService }] });
+        }], ctorParameters: () => [{ type: i1$3.HTTPService }] });
 
 const MODULES = [
     // Base
@@ -766,7 +1589,8 @@ const COMPONENTS = [
     JaceListWidgetComponent,
     JaceCounterWidgetComponent,
     JaceChartWidgetComponent,
-    JaceMultiprogWidgetComponent
+    JaceMultiprogWidgetComponent,
+    CircleProgressComponent
 ];
 class DashboardFeatureModule {
     static forRoot(options) {
@@ -776,7 +1600,8 @@ class DashboardFeatureModule {
                 { provide: DSH_OPTIONS, multi: true, useValue: new DefaultDashboardModuleOptions() },
                 { provide: DSH_OPTIONS, multi: true, useValue: options },
                 { provide: DSH_DATA_SERVICE, useClass: DashboardFeatureAPIDataService },
-                DashboardWidgetFactory
+                DashboardWidgetFactory,
+                { provide: CircleProgressOptions, useValue: options }
             ]
         };
     }
@@ -790,7 +1615,8 @@ class DashboardFeatureModule {
             JaceListWidgetComponent,
             JaceCounterWidgetComponent,
             JaceChartWidgetComponent,
-            JaceMultiprogWidgetComponent], imports: [
+            JaceMultiprogWidgetComponent,
+            CircleProgressComponent], imports: [
             // Base
             CommonModule,
             FormsModule,
@@ -801,7 +1627,8 @@ class DashboardFeatureModule {
             JaceListWidgetComponent,
             JaceCounterWidgetComponent,
             JaceChartWidgetComponent,
-            JaceMultiprogWidgetComponent] }); }
+            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: [{
@@ -984,5 +1811,5 @@ var JaceWidgetTypes;
  * Generated bundle index. Do not edit.
  */
 
-export { BaseJaceWidgetModel, BaseWidgetComponent, DSH_DATA_SERVICE, DashboardComponent, DashboardFeatureAPIDataService, DashboardFeatureModule, DashboardWidgetFactory, DefaultDashboardModuleOptions, JaceChartWidgetComponent, JaceCounterWidgetComponent, JaceDashboardConfig, JaceDashboardLayoutAppSearch, JaceDashboardLayoutDetail, JaceListWidgetComponent, JaceMultiprogWidgetComponent, JaceWidgetInstanceDetail, JaceWidgetTypes, SaveJaceDashboardLayoutDTO };
+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