@c8y/ngx-components 1023.88.2 → 1023.90.1

package/fesm2022/c8y-ngx-components-widgets-implementations-info-gauge.mjs

@@ -77,10 +77,10 @@ class InfoGaugeCurrentMeasurementPipe {
         }
         return { color, strokeDashOffset };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: InfoGaugeCurrentMeasurementPipe, deps: [{ token: i1.MeasurementRealtimeService }, { token: i1.AlertService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: InfoGaugeCurrentMeasurementPipe, isStandalone: true, name: "infoGaugeCurrentMeasurement" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: InfoGaugeCurrentMeasurementPipe, deps: [{ token: i1.MeasurementRealtimeService }, { token: i1.AlertService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: InfoGaugeCurrentMeasurementPipe, isStandalone: true, name: "infoGaugeCurrentMeasurement" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: InfoGaugeCurrentMeasurementPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: InfoGaugeCurrentMeasurementPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'infoGaugeCurrentMeasurement',
@@ -742,10 +742,10 @@ class RadialGaugeService {
             return clampedValue;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: RadialGaugeService, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: RadialGaugeService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RadialGaugeService, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RadialGaugeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: RadialGaugeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RadialGaugeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -811,14 +811,14 @@ class RadialGaugeViewComponent {
     onChartInit(ec) {
         this.echartsInstance = ec;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: RadialGaugeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: RadialGaugeViewComponent, isStandalone: true, selector: "c8y-radial-gauge", inputs: { activeDatapointGauge: "activeDatapointGauge", measurement: "measurement", fractionSize: "fractionSize", gaugeOptions: "gaugeOptions", selectedPresetId: "selectedPresetId" }, host: { classAttribute: "c8y-radial-gauge" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RadialGaugeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: RadialGaugeViewComponent, isStandalone: true, selector: "c8y-radial-gauge", inputs: { activeDatapointGauge: "activeDatapointGauge", measurement: "measurement", fractionSize: "fractionSize", gaugeOptions: "gaugeOptions", selectedPresetId: "selectedPresetId" }, host: { classAttribute: "c8y-radial-gauge" }, providers: [
             MeasurementRealtimeService,
             RadialGaugeService,
             { provide: NGX_ECHARTS_CONFIG, useFactory: () => ({ echarts: () => import('echarts') }) }
         ], viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"p-absolute fit-w fit-h\"\n  data-cy=\"c8y-radial-gauge--chart\"\n  #chart\n  echarts\n  [options]=\"chartOptions$ | async\"\n  (chartInit)=\"onChartInit($event)\"\n></div>\n", dependencies: [{ kind: "ngmodule", type: NgxEchartsModule }, { kind: "directive", type: i1$1.NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: RadialGaugeViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RadialGaugeViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-radial-gauge', host: { class: 'c8y-radial-gauge' }, providers: [
                         MeasurementRealtimeService,
@@ -885,10 +885,10 @@ class InfoGaugeWidgetViewComponent {
             datapoint.__target = { name, id };
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: InfoGaugeWidgetViewComponent, deps: [{ token: i2.ContextDashboardComponent, optional: true }, { token: i1.DynamicComponentComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: InfoGaugeWidgetViewComponent, isStandalone: true, selector: "c8y-info-gauge-widget-view", inputs: { config: "config" }, host: { classAttribute: "d-contents" }, providers: [MeasurementRealtimeService], usesOnChanges: true, ngImport: i0, template: "@if (isInfoGauge) {\n  <div class=\"label-value-unit-gauge new-radial\">\n    @if (activeDatapointLabels?.length && isInfoGauge) {\n      <div class=\"gauge-legend\">\n        @for (dp of activeDatapointLabels; track dp) {\n          @if (dp | infoGaugeCurrentMeasurement | async; as measurement) {\n            <label\n              class=\"text-truncate\"\n              title=\"{{ dp.label }}\"\n            >\n              {{ dp.label }}\n            </label>\n            @if (!measurement.notFound) {\n              <h3\n                class=\"text-truncate\"\n                title=\"{{ measurement.value | number: fractionSize }} {{\n                  dp.unit || measurement.unit\n                }}\"\n              >\n                {{ measurement.value | number: fractionSize }} {{ dp.unit || measurement.unit }}\n              </h3>\n            } @else {\n              <h3>--</h3>\n            }\n            <p class=\"text-muted m-b-8\">\n              <small>\n                <div>{{ measurement.date | c8yDate: 'mediumDate' }}</div>\n                <div>{{ measurement.date | c8yDate: 'mediumTime' }}</div>\n              </small>\n            </p>\n          }\n        }\n      </div>\n    }\n    @if (activeDatapointGauge && isInfoGauge) {\n      @if (activeDatapointGauge | infoGaugeCurrentMeasurement: true | async; as measurement) {\n        <div class=\"gauge-svg\">\n          <svg\n            height=\"214px\"\n            width=\"214px\"\n            viewBox=\"0 0 214 214\"\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          >\n            <desc>radial gauge</desc>\n            <g\n              id=\"scale\"\n              stroke=\"none\"\n              stroke-width=\"1\"\n              fill=\"none\"\n              fill-rule=\"evenodd\"\n              stroke-dasharray=\"1,5\"\n            >\n              <circle\n                id=\"Oval\"\n                stroke=\"#CACECE\"\n                stroke-width=\"7\"\n                cx=\"107\"\n                cy=\"107\"\n                r=\"103\"\n              ></circle>\n              <rect\n                id=\"mask\"\n                height=\"214\"\n                stroke=\"none\"\n                fill-rule=\"evenodd\"\n                x=\"0\"\n                y=\"0\"\n                width=\"214\"\n                transform=\"rotate(-45 290 182)\"\n              ></rect>\n            </g>\n            <path\n              class=\"track\"\n              d=\"M 107 27 a 80 80 0 1 0.1 0 Z\"\n              transform=\"rotate(-135 107 107)\"\n            ></path>\n            <path\n              class=\"track-value\"\n              [ngStyle]=\"{\n                stroke: measurement.color,\n                'stroke-dashoffset': -measurement.strokeDashOffset\n              }\"\n              d=\"M 107 27 a 80 80 0 1 0.1 0 Z\"\n              transform=\"rotate(-135 107 107)\"\n            ></path>\n            <foreignObject\n              class=\"d-flex a-i-center j-c-center\"\n              height=\"100%\"\n              width=\"100%\"\n              requiredFeatures=\"http://www.w3.org/TR/SVG11/feature#Extensibility\"\n            >\n              <div\n                class=\"d-flex d-col fit-h a-i-center j-c-center\"\n                style=\"padding: 3rem\"\n                xmlns=\"http://www.w3.org/1999/xhtml\"\n              >\n                <p\n                  class=\"text-truncate text-center\"\n                  title=\"{{ activeDatapointGauge.label }}\"\n                >\n                  {{ activeDatapointGauge.label }}\n                </p>\n                @if (!measurement.notFound) {\n                  <p\n                    class=\"center-value text-truncate\"\n                    title=\"{{ measurement.value | number: fractionSize }}\"\n                  >\n                    {{ measurement.value | number: fractionSize }}\n                  </p>\n                } @else {\n                  <p class=\"center-value\">--</p>\n                }\n                <p class=\"center-unit strong\">\n                  {{ activeDatapointGauge.unit || measurement.unit }}\n                </p>\n                <div class=\"center-date-time\">{{ measurement.date | c8yDate: 'mediumDate' }}</div>\n                <div class=\"center-date-time\">{{ measurement.date | c8yDate: 'mediumTime' }}</div>\n              </div>\n            </foreignObject>\n          </svg>\n        </div>\n      }\n    }\n    <div class=\"clearfix\"></div>\n  </div>\n}\n@if (!isInfoGauge) {\n  @if (activeDatapointGauge | infoGaugeCurrentMeasurement | async; as measurement) {\n    <c8y-radial-gauge\n      [activeDatapointGauge]=\"activeDatapointGauge\"\n      [measurement]=\"measurement\"\n      [fractionSize]=\"config.fractionSize\"\n      [gaugeOptions]=\"config.gaugeOptions\"\n      [selectedPresetId]=\"config.selectedPresetId\"\n    ></c8y-radial-gauge>\n  }\n}\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: RadialGaugeViewComponent, selector: "c8y-radial-gauge", inputs: ["activeDatapointGauge", "measurement", "fractionSize", "gaugeOptions", "selectedPresetId"] }, { kind: "pipe", type: InfoGaugeCurrentMeasurementPipe, name: "infoGaugeCurrentMeasurement" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: InfoGaugeWidgetViewComponent, deps: [{ token: i2.ContextDashboardComponent, optional: true }, { token: i1.DynamicComponentComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: InfoGaugeWidgetViewComponent, isStandalone: true, selector: "c8y-info-gauge-widget-view", inputs: { config: "config" }, host: { classAttribute: "d-contents" }, providers: [MeasurementRealtimeService], usesOnChanges: true, ngImport: i0, template: "@if (isInfoGauge) {\n  <div class=\"label-value-unit-gauge new-radial\">\n    @if (activeDatapointLabels?.length && isInfoGauge) {\n      <div class=\"gauge-legend\">\n        @for (dp of activeDatapointLabels; track dp) {\n          @if (dp | infoGaugeCurrentMeasurement | async; as measurement) {\n            <label\n              class=\"text-truncate\"\n              title=\"{{ dp.label }}\"\n            >\n              {{ dp.label }}\n            </label>\n            @if (!measurement.notFound) {\n              <h3\n                class=\"text-truncate\"\n                title=\"{{ measurement.value | number: fractionSize }} {{\n                  dp.unit || measurement.unit\n                }}\"\n              >\n                {{ measurement.value | number: fractionSize }} {{ dp.unit || measurement.unit }}\n              </h3>\n            } @else {\n              <h3>--</h3>\n            }\n            <p class=\"text-muted m-b-8\">\n              <small>\n                <div>{{ measurement.date | c8yDate: 'mediumDate' }}</div>\n                <div>{{ measurement.date | c8yDate: 'mediumTime' }}</div>\n              </small>\n            </p>\n          }\n        }\n      </div>\n    }\n    @if (activeDatapointGauge && isInfoGauge) {\n      @if (activeDatapointGauge | infoGaugeCurrentMeasurement: true | async; as measurement) {\n        <div class=\"gauge-svg\">\n          <svg\n            height=\"214px\"\n            width=\"214px\"\n            viewBox=\"0 0 214 214\"\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          >\n            <desc>radial gauge</desc>\n            <g\n              id=\"scale\"\n              stroke=\"none\"\n              stroke-width=\"1\"\n              fill=\"none\"\n              fill-rule=\"evenodd\"\n              stroke-dasharray=\"1,5\"\n            >\n              <circle\n                id=\"Oval\"\n                stroke=\"#CACECE\"\n                stroke-width=\"7\"\n                cx=\"107\"\n                cy=\"107\"\n                r=\"103\"\n              ></circle>\n              <rect\n                id=\"mask\"\n                height=\"214\"\n                stroke=\"none\"\n                fill-rule=\"evenodd\"\n                x=\"0\"\n                y=\"0\"\n                width=\"214\"\n                transform=\"rotate(-45 290 182)\"\n              ></rect>\n            </g>\n            <path\n              class=\"track\"\n              d=\"M 107 27 a 80 80 0 1 0.1 0 Z\"\n              transform=\"rotate(-135 107 107)\"\n            ></path>\n            <path\n              class=\"track-value\"\n              [ngStyle]=\"{\n                stroke: measurement.color,\n                'stroke-dashoffset': -measurement.strokeDashOffset\n              }\"\n              d=\"M 107 27 a 80 80 0 1 0.1 0 Z\"\n              transform=\"rotate(-135 107 107)\"\n            ></path>\n            <foreignObject\n              class=\"d-flex a-i-center j-c-center\"\n              height=\"100%\"\n              width=\"100%\"\n              requiredFeatures=\"http://www.w3.org/TR/SVG11/feature#Extensibility\"\n            >\n              <div\n                class=\"d-flex d-col fit-h a-i-center j-c-center\"\n                style=\"padding: 3rem\"\n                xmlns=\"http://www.w3.org/1999/xhtml\"\n              >\n                <p\n                  class=\"text-truncate text-center\"\n                  title=\"{{ activeDatapointGauge.label }}\"\n                >\n                  {{ activeDatapointGauge.label }}\n                </p>\n                @if (!measurement.notFound) {\n                  <p\n                    class=\"center-value text-truncate\"\n                    title=\"{{ measurement.value | number: fractionSize }}\"\n                  >\n                    {{ measurement.value | number: fractionSize }}\n                  </p>\n                } @else {\n                  <p class=\"center-value\">--</p>\n                }\n                <p class=\"center-unit strong\">\n                  {{ activeDatapointGauge.unit || measurement.unit }}\n                </p>\n                <div class=\"center-date-time\">{{ measurement.date | c8yDate: 'mediumDate' }}</div>\n                <div class=\"center-date-time\">{{ measurement.date | c8yDate: 'mediumTime' }}</div>\n              </div>\n            </foreignObject>\n          </svg>\n        </div>\n      }\n    }\n    <div class=\"clearfix\"></div>\n  </div>\n}\n@if (!isInfoGauge) {\n  @if (activeDatapointGauge | infoGaugeCurrentMeasurement | async; as measurement) {\n    <c8y-radial-gauge\n      [activeDatapointGauge]=\"activeDatapointGauge\"\n      [measurement]=\"measurement\"\n      [fractionSize]=\"config.fractionSize\"\n      [gaugeOptions]=\"config.gaugeOptions\"\n      [selectedPresetId]=\"config.selectedPresetId\"\n    ></c8y-radial-gauge>\n  }\n}\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: RadialGaugeViewComponent, selector: "c8y-radial-gauge", inputs: ["activeDatapointGauge", "measurement", "fractionSize", "gaugeOptions", "selectedPresetId"] }, { kind: "pipe", type: InfoGaugeCurrentMeasurementPipe, name: "infoGaugeCurrentMeasurement" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: InfoGaugeWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: InfoGaugeWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-info-gauge-widget-view', host: { class: 'd-contents' }, providers: [MeasurementRealtimeService], standalone: true, imports: [
                         NgStyle,
@@ -942,8 +942,8 @@ class PresetPreviewComponent {
         this.onTouched();
         this.onPresetChange.emit(presetId);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PresetPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: PresetPreviewComponent, isStandalone: true, selector: "c8y-preset-preview", inputs: { ALL_GAUGE_PRESETS: "ALL_GAUGE_PRESETS" }, outputs: { onPresetChange: "onPresetChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PresetPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: PresetPreviewComponent, isStandalone: true, selector: "c8y-preset-preview", inputs: { ALL_GAUGE_PRESETS: "ALL_GAUGE_PRESETS" }, outputs: { onPresetChange: "onPresetChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => PresetPreviewComponent),
@@ -951,7 +951,7 @@ class PresetPreviewComponent {
             }
         ], ngImport: i0, template: "<div class=\"d-grid grid__col--4-4-4 gap-4\">\n  <button\n    class=\"c8y-radial-gauge__preset preset-{{ preset.id }}\"\n    [class.selected]=\"preset.id === selectedPresetId\"\n    [attr.aria-label]=\"preset.name | translate\"\n    type=\"button\"\n    *ngFor=\"let preset of ALL_GAUGE_PRESETS\"\n    (click)=\"emitPresetChange(preset.id)\"\n  >\n    <c8y-radial-gauge\n      class=\"c8y-radial-gauge--square\"\n      *ngIf=\"preset.id !== 'custom'\"\n      [activeDatapointGauge]=\"activeDatapointGauge\"\n      [measurement]=\"measurement\"\n      [fractionSize]=\"2\"\n      [selectedPresetId]=\"preset.id\"\n      [gaugeOptions]=\"preset\"\n    ></c8y-radial-gauge>\n    <span>{{ preset.name | translate }}</span>\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RadialGaugeViewComponent, selector: "c8y-radial-gauge", inputs: ["activeDatapointGauge", "measurement", "fractionSize", "gaugeOptions", "selectedPresetId"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PresetPreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PresetPreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-preset-preview', standalone: true, imports: [CommonModule, RadialGaugeViewComponent], providers: [
                         {
@@ -1170,10 +1170,10 @@ class InfoGaugeWidgetConfigComponent {
             gaugePresetId: [this.config.selectedPresetId || 'default']
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: InfoGaugeWidgetConfigComponent, deps: [{ token: i1$3.FormBuilder }, { token: i1$3.NgForm }, { token: i2.WidgetConfigComponent }, { token: i2.WidgetConfigService }, { token: i1.DynamicComponentComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: InfoGaugeWidgetConfigComponent, isStandalone: true, selector: "c8y-info-gauge-widget-config", inputs: { config: "config" }, providers: [MeasurementRealtimeService], viewQueries: [{ propertyName: "editorComponent", first: true, predicate: EditorComponent, descendants: true }, { propertyName: "previewMapSet", first: true, predicate: ["gaugePreview"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  @if (isInfoGauge) {\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Decimal places' | translate }}</legend>\n      <c8y-form-group>\n        <input\n          class=\"form-control\"\n          name=\"fractionSize\"\n          type=\"number\"\n          formControlName=\"fractionSize\"\n          step=\"1\"\n        />\n      </c8y-form-group>\n    </fieldset>\n    @if (formGroup.errors?.noActiveDatapoint) {\n      <div\n        class=\"alert alert-info\"\n        role=\"alert\"\n        translate\n      >\n        At least one data point for the labels or the gauge needs to be selected.\n      </div>\n    }\n  } @else {\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Decimal places' | translate }}</legend>\n      <c8y-form-group>\n        <input\n          class=\"form-control\"\n          name=\"fractionSize\"\n          type=\"number\"\n          formControlName=\"fractionSize\"\n          step=\"1\"\n        />\n      </c8y-form-group>\n    </fieldset>\n\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Presets' | translate }}</legend>\n      <c8y-preset-preview\n        formControlName=\"gaugePresetId\"\n        [ALL_GAUGE_PRESETS]=\"ALL_GAUGE_PRESETS\"\n        (onPresetChange)=\"onRadioPresetChange($event)\"\n      ></c8y-preset-preview>\n    </fieldset>\n\n    <div class=\"p-16\">\n      <button\n        class=\"btn btn-default\"\n        aria-controls=\"advancedCollapse\"\n        [attr.aria-expanded]=\"showAdvancedOptions\"\n        type=\"button\"\n        (click)=\"showAdvancedOptions = !showAdvancedOptions\"\n      >\n        {{ showAdvancedOptions ? hideAdvancedOptionsLabel : showAdvancedOptionsLabel }}\n      </button>\n    </div>\n\n    <div\n      class=\"collapse\"\n      id=\"advancedCollapse\"\n      [collapse]=\"!showAdvancedOptions\"\n      [isAnimated]=\"true\"\n    >\n      <div\n        class=\"fit-h\"\n        style=\"min-height: 400px\"\n      >\n        <c8y-editor\n          [ngModel]=\"gaugeOptionsString\"\n          (ngModelChange)=\"gaugeJSONChange($event)\"\n          (editorInit)=\"assignSchema()\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          monacoEditorMarkerValidator\n        ></c8y-editor>\n      </div>\n    </div>\n  }\n</form>\n\n<ng-template #gaugePreview>\n  @if (\n    (datapointsGauge?.length > 0 && activeDatapointGauge) ||\n    (datapointsLabels?.length > 0 && activeDatapointLabel)\n  ) {\n    <div>\n      <c8y-info-gauge-widget-view [config]=\"previewConfig\"></c8y-info-gauge-widget-view>\n    </div>\n  } @else {\n    <div class=\"d-col a-i-start j-c-center\">\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-data-points'\"\n        [title]=\"'No data points selected' | translate\"\n        [subtitle]=\"'Select data point to render content' | translate\"\n        [horizontal]=\"false\"\n        data-cy=\"info-gauge--empty-state-no-data-point-selected\"\n      >\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#info-gauge\">user documentation</a>.\n          </small>\n        </p>\n      </c8y-ui-empty-state>\n    </div>\n  }\n</ng-template>\n", dependencies: [{ kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: i1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i4.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: EditorComponent, selector: "c8y-editor", inputs: ["editorOptions", "theme"], outputs: ["editorInit"] }, { kind: "directive", type: MonacoEditorMarkerValidatorDirective, selector: "c8y-editor [monacoEditorMarkerValidator]" }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: PresetPreviewComponent, selector: "c8y-preset-preview", inputs: ["ALL_GAUGE_PRESETS"], outputs: ["onPresetChange"] }, { kind: "component", type: InfoGaugeWidgetViewComponent, selector: "c8y-info-gauge-widget-view", inputs: ["config"] }, { kind: "component", type: GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: InfoGaugeWidgetConfigComponent, deps: [{ token: i1$3.FormBuilder }, { token: i1$3.NgForm }, { token: i2.WidgetConfigComponent }, { token: i2.WidgetConfigService }, { token: i1.DynamicComponentComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: InfoGaugeWidgetConfigComponent, isStandalone: true, selector: "c8y-info-gauge-widget-config", inputs: { config: "config" }, providers: [MeasurementRealtimeService], viewQueries: [{ propertyName: "editorComponent", first: true, predicate: EditorComponent, descendants: true }, { propertyName: "previewMapSet", first: true, predicate: ["gaugePreview"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  @if (isInfoGauge) {\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Decimal places' | translate }}</legend>\n      <c8y-form-group>\n        <input\n          class=\"form-control\"\n          name=\"fractionSize\"\n          type=\"number\"\n          formControlName=\"fractionSize\"\n          step=\"1\"\n        />\n      </c8y-form-group>\n    </fieldset>\n    @if (formGroup.errors?.noActiveDatapoint) {\n      <div\n        class=\"alert alert-info\"\n        role=\"alert\"\n        translate\n      >\n        At least one data point for the labels or the gauge needs to be selected.\n      </div>\n    }\n  } @else {\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Decimal places' | translate }}</legend>\n      <c8y-form-group>\n        <input\n          class=\"form-control\"\n          name=\"fractionSize\"\n          type=\"number\"\n          formControlName=\"fractionSize\"\n          step=\"1\"\n        />\n      </c8y-form-group>\n    </fieldset>\n\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Presets' | translate }}</legend>\n      <c8y-preset-preview\n        formControlName=\"gaugePresetId\"\n        [ALL_GAUGE_PRESETS]=\"ALL_GAUGE_PRESETS\"\n        (onPresetChange)=\"onRadioPresetChange($event)\"\n      ></c8y-preset-preview>\n    </fieldset>\n\n    <div class=\"p-16\">\n      <button\n        class=\"btn btn-default\"\n        aria-controls=\"advancedCollapse\"\n        [attr.aria-expanded]=\"showAdvancedOptions\"\n        type=\"button\"\n        (click)=\"showAdvancedOptions = !showAdvancedOptions\"\n      >\n        {{ showAdvancedOptions ? hideAdvancedOptionsLabel : showAdvancedOptionsLabel }}\n      </button>\n    </div>\n\n    <div\n      class=\"collapse\"\n      id=\"advancedCollapse\"\n      [collapse]=\"!showAdvancedOptions\"\n      [isAnimated]=\"true\"\n    >\n      <div\n        class=\"fit-h\"\n        style=\"min-height: 400px\"\n      >\n        <c8y-editor\n          [ngModel]=\"gaugeOptionsString\"\n          (ngModelChange)=\"gaugeJSONChange($event)\"\n          (editorInit)=\"assignSchema()\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          monacoEditorMarkerValidator\n        ></c8y-editor>\n      </div>\n    </div>\n  }\n</form>\n\n<ng-template #gaugePreview>\n  @if (\n    (datapointsGauge?.length > 0 && activeDatapointGauge) ||\n    (datapointsLabels?.length > 0 && activeDatapointLabel)\n  ) {\n    <div>\n      <c8y-info-gauge-widget-view [config]=\"previewConfig\"></c8y-info-gauge-widget-view>\n    </div>\n  } @else {\n    <div class=\"d-col a-i-start j-c-center\">\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-data-points'\"\n        [title]=\"'No data points selected' | translate\"\n        [subtitle]=\"'Select data point to render content' | translate\"\n        [horizontal]=\"false\"\n        data-cy=\"info-gauge--empty-state-no-data-point-selected\"\n      >\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#info-gauge\">user documentation</a>.\n          </small>\n        </p>\n      </c8y-ui-empty-state>\n    </div>\n  }\n</ng-template>\n", dependencies: [{ kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: i1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i4.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: EditorComponent, selector: "c8y-editor", inputs: ["editorOptions", "theme"], outputs: ["editorInit"] }, { kind: "directive", type: MonacoEditorMarkerValidatorDirective, selector: "c8y-editor [monacoEditorMarkerValidator]" }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: PresetPreviewComponent, selector: "c8y-preset-preview", inputs: ["ALL_GAUGE_PRESETS"], outputs: ["onPresetChange"] }, { kind: "component", type: InfoGaugeWidgetViewComponent, selector: "c8y-info-gauge-widget-view", inputs: ["config"] }, { kind: "component", type: GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: InfoGaugeWidgetConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: InfoGaugeWidgetConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-info-gauge-widget-config', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], providers: [MeasurementRealtimeService], standalone: true, imports: [
                         FormGroupComponent,

package/fesm2022/c8y-ngx-components-widgets-implementations-kpi.mjs

@@ -141,7 +141,7 @@ class KpiWidgetViewComponent {
         return this.isDashboardMode() && !this.config.isGlobalContextReady;
     }
     resolveDisplayMode() {
-        return (this.config?.displayMode || GLOBAL_CONTEXT_DISPLAY_MODE.CONFIG);
+        return (this.config?.displayMode || GLOBAL_CONTEXT_DISPLAY_MODE.VIEW_AND_CONFIG);
     }
     extractContext(source) {
         return {
@@ -229,10 +229,10 @@ class KpiWidgetViewComponent {
             datapoint.__target = { name: context.name, id: context.id };
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: KpiWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: KpiWidgetViewComponent, isStandalone: true, selector: "c8y-kpi-widget-view", inputs: { config: "config" }, host: { classAttribute: "d-col fit-h" }, providers: [MeasurementRealtimeService], usesOnChanges: true, ngImport: i0, template: "@if (displayMode() === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD && getDashboardChild()) {\n  <c8y-global-context-connector\n    [controls]=\"widgetControls()\"\n    [config]=\"contextConfig()\"\n    [dashboardChild]=\"getDashboardChild()\"\n    [linked]=\"isLinkedToGlobal()\"\n    [emitRefresh]=\"false\"\n    (configChange)=\"onContextChange($event)\"\n    (refresh)=\"onRefresh()\"\n  ></c8y-global-context-connector>\n} @else if (displayMode() !== GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {\n  <c8y-local-controls\n    [controls]=\"widgetControls()\"\n    [displayMode]=\"displayMode()\"\n    [config]=\"contextConfig()\"\n    [emitRefresh]=\"false\"\n    (configChange)=\"onContextChange($event)\"\n    (refresh)=\"onRefresh()\"\n  ></c8y-local-controls>\n}\n\n@if (state$ | async; as lastState) {\n  <div class=\"kpi-widget__container d-flex d-col flex-grow fit-w a-i-center j-c-center\">\n    <div class=\"d-flex a-i-center j-c-center fit-w\">\n      @if (config.icon && config.showIcon) {\n        <div\n          class=\"m-r-16 flex-no-shrink text-muted\"\n          [ngClass]=\"lastState.colorClass\"\n        >\n          <i\n            class=\"icon-32\"\n            [c8yIcon]=\"config.icon\"\n          ></i>\n        </div>\n      }\n      <div class=\"text-truncate\">\n        <span\n          class=\"text-truncate text-medium\"\n          [ngStyle]=\"{ 'font-size': (config.fontSize || '36') + 'px' }\"\n          title=\"{{\n            lastState.colorClass === 'text-danger'\n              ? ('Within red range:' | translate)\n              : lastState.colorClass === 'text-warning'\n                ? ('Within yellow range:' | translate)\n                : ''\n          }} {{\n            lastState.latestMeasurement.value\n              | number\n                : '1.' +\n                    (config.numberOfDecimalPlaces || '0') +\n                    '-' +\n                    (config.numberOfDecimalPlaces || '0')\n          }} {{ lastState.unit || '' }}\"\n          [ngClass]=\"lastState.colorClass\"\n        >\n          {{\n            lastState.latestMeasurement.value\n              | number\n                : '1.' +\n                    (config.numberOfDecimalPlaces || '0') +\n                    '-' +\n                    (config.numberOfDecimalPlaces || '0')\n          }}\n          <small class=\"text-regular\">{{ lastState.unit || '' }}</small>\n        </span>\n      </div>\n      @if (config?.showTrend && lastState.previousValue; as previousValue) {\n        <div class=\"dot dot-info dot-30 m-l-16 flex-no-shrink\">\n          <i\n            class=\"icon-20\"\n            c8yIcon=\"arrow-dotted-up\"\n            [ngStyle]=\"{ transform: 'rotate(' + lastState.trend + ')' }\"\n            [title]=\"\n              ('Previous value' | translate) +\n              ': ' +\n              (previousValue.value\n                | number\n                  : '1.' +\n                      (config.numberOfDecimalPlaces || '0') +\n                      '-' +\n                      (config.numberOfDecimalPlaces || '0')) +\n              ' (' +\n              (previousValue.date | c8yDate: 'medium') +\n              ')'\n            \"\n          ></i>\n        </div>\n      }\n    </div>\n    <div class=\"d-flex d-col a-i-center\">\n      @if (config?.showTimestamp) {\n        <p class=\"icon-flex text-center text-muted small m-b-0\">\n          <i c8yIcon=\"calendar\"></i>\n          {{ lastState.latestMeasurement.date | c8yDate: 'medium' }}\n        </p>\n      }\n      @if (isHistoryMode()) {\n        <p class=\"text-center text-muted small m-b-0\">\n          <span translate>Last measurement in selected time range</span>\n        </p>\n      }\n    </div>\n  </div>\n} @else {\n  <div class=\"d-flex flex-grow fit-w j-c-center a-i-center\">\n    @let noDataSubtitleLive = 'Waiting for measurements to be created.' | translate;\n    @let noDataSubtitleHistory = 'No data available for the selected time period.' | translate;\n    @if (noDataInitiallyInDB()) {\n      <c8y-ui-empty-state\n        [icon]=\"'line-chart'\"\n        [title]=\"'No measurement to display.' | translate\"\n        [subtitle]=\"isHistoryMode() ? noDataSubtitleHistory : noDataSubtitleLive\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    } @else {\n      <c8y-loading></c8y-loading>\n    }\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: GlobalContextConnectorComponent, selector: "c8y-global-context-connector", inputs: ["controls", "config", "isLoading", "dashboardChild", "linked", "emitRefresh"], outputs: ["configChange", "refresh", "linkedChange"] }, { kind: "component", type: LocalControlsComponent, selector: "c8y-local-controls", inputs: ["controls", "displayMode", "config", "isLoading", "disabled", "emitRefresh"], outputs: ["configChange", "refresh"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KpiWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KpiWidgetViewComponent, isStandalone: true, selector: "c8y-kpi-widget-view", inputs: { config: "config" }, host: { classAttribute: "d-col fit-h" }, providers: [MeasurementRealtimeService], usesOnChanges: true, ngImport: i0, template: "@if (displayMode() === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD && getDashboardChild()) {\n  <c8y-global-context-connector\n    [controls]=\"widgetControls()\"\n    [config]=\"contextConfig()\"\n    [dashboardChild]=\"getDashboardChild()\"\n    [linked]=\"isLinkedToGlobal()\"\n    [emitRefresh]=\"false\"\n    (configChange)=\"onContextChange($event)\"\n    (refresh)=\"onRefresh()\"\n  ></c8y-global-context-connector>\n} @else if (displayMode() !== GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {\n  <c8y-local-controls\n    [controls]=\"widgetControls()\"\n    [displayMode]=\"displayMode()\"\n    [config]=\"contextConfig()\"\n    [emitRefresh]=\"false\"\n    (configChange)=\"onContextChange($event)\"\n    (refresh)=\"onRefresh()\"\n  ></c8y-local-controls>\n}\n\n@if (state$ | async; as lastState) {\n  <div class=\"kpi-widget__container d-flex d-col flex-grow fit-w a-i-center j-c-center\">\n    <div class=\"d-flex a-i-center j-c-center fit-w\">\n      @if (config.icon && config.showIcon) {\n        <div\n          class=\"m-r-16 flex-no-shrink text-muted\"\n          [ngClass]=\"lastState.colorClass\"\n        >\n          <i\n            class=\"icon-32\"\n            [c8yIcon]=\"config.icon\"\n          ></i>\n        </div>\n      }\n      <div class=\"text-truncate\">\n        <span\n          class=\"text-truncate text-medium\"\n          [ngStyle]=\"{ 'font-size': (config.fontSize || '36') + 'px' }\"\n          title=\"{{\n            lastState.colorClass === 'text-danger'\n              ? ('Within red range:' | translate)\n              : lastState.colorClass === 'text-warning'\n                ? ('Within yellow range:' | translate)\n                : ''\n          }} {{\n            lastState.latestMeasurement.value\n              | number\n                : '1.' +\n                    (config.numberOfDecimalPlaces || '0') +\n                    '-' +\n                    (config.numberOfDecimalPlaces || '0')\n          }} {{ lastState.unit || '' }}\"\n          [ngClass]=\"lastState.colorClass\"\n        >\n          {{\n            lastState.latestMeasurement.value\n              | number\n                : '1.' +\n                    (config.numberOfDecimalPlaces || '0') +\n                    '-' +\n                    (config.numberOfDecimalPlaces || '0')\n          }}\n          <small class=\"text-regular\">{{ lastState.unit || '' }}</small>\n        </span>\n      </div>\n      @if (config?.showTrend && lastState.previousValue; as previousValue) {\n        <div class=\"dot dot-info dot-30 m-l-16 flex-no-shrink\">\n          <i\n            class=\"icon-20\"\n            c8yIcon=\"arrow-dotted-up\"\n            [ngStyle]=\"{ transform: 'rotate(' + lastState.trend + ')' }\"\n            [title]=\"\n              ('Previous value' | translate) +\n              ': ' +\n              (previousValue.value\n                | number\n                  : '1.' +\n                      (config.numberOfDecimalPlaces || '0') +\n                      '-' +\n                      (config.numberOfDecimalPlaces || '0')) +\n              ' (' +\n              (previousValue.date | c8yDate: 'medium') +\n              ')'\n            \"\n          ></i>\n        </div>\n      }\n    </div>\n    <div class=\"d-flex d-col a-i-center\">\n      @if (config?.showTimestamp) {\n        <p class=\"icon-flex text-center text-muted small m-b-0\">\n          <i c8yIcon=\"calendar\"></i>\n          {{ lastState.latestMeasurement.date | c8yDate: 'medium' }}\n        </p>\n      }\n      @if (isHistoryMode()) {\n        <p class=\"text-center text-muted small m-b-0\">\n          <span translate>Last measurement in selected time range</span>\n        </p>\n      }\n    </div>\n  </div>\n} @else {\n  <div class=\"d-flex flex-grow fit-w j-c-center a-i-center\">\n    @let noDataSubtitleLive = 'Waiting for measurements to be created.' | translate;\n    @let noDataSubtitleHistory = 'No data available for the selected time period.' | translate;\n    @if (noDataInitiallyInDB()) {\n      <c8y-ui-empty-state\n        [icon]=\"'line-chart'\"\n        [title]=\"'No measurement to display.' | translate\"\n        [subtitle]=\"isHistoryMode() ? noDataSubtitleHistory : noDataSubtitleLive\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    } @else {\n      <c8y-loading></c8y-loading>\n    }\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: GlobalContextConnectorComponent, selector: "c8y-global-context-connector", inputs: ["controls", "config", "isLoading", "dashboardChild", "linked", "emitRefresh"], outputs: ["configChange", "refresh", "linkedChange"] }, { kind: "component", type: LocalControlsComponent, selector: "c8y-local-controls", inputs: ["controls", "displayMode", "config", "isLoading", "disabled", "emitRefresh", "dashboardChild"], outputs: ["configChange", "refresh"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: KpiWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KpiWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-kpi-widget-view', standalone: true, imports: [
                         AsyncPipe,
@@ -372,10 +372,10 @@ class KpiWidgetConfigComponent {
             ])
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: KpiWidgetConfigComponent, deps: [{ token: i1.FormBuilder }, { token: i1.NgForm }, { token: i2.WidgetConfigComponent }, { token: i2.WidgetConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: KpiWidgetConfigComponent, isStandalone: true, selector: "c8y-kpi-widget-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["kpiPreview"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <fieldset class=\"c8y-fieldset\">\n    <legend>{{ 'Layout' | translate }}</legend>\n    <div class=\"d-flex a-i-center gap-8\">\n      <div class=\"form-group form-group-sm m-b-24\">\n        <label translate>Icon</label>\n        <c8y-icon-selector-wrapper\n          [iconSize]=\"16\"\n          name=\"icon\"\n          formControlName=\"icon\"\n        ></c8y-icon-selector-wrapper>\n      </div>\n      <c8y-form-group class=\"form-group-sm m-b-24 flex-grow\">\n        <label\n          [title]=\"'Font size of measurement value (px)' | translate\"\n          translate\n        >\n          Font size of measurement value (px)\n        </label>\n        <input\n          class=\"form-control\"\n          name=\"fontSize\"\n          type=\"number\"\n          formControlName=\"fontSize\"\n          [placeholder]=\"'e.g. {{ example }}' | translate: { example: 36 }\"\n        />\n        <c8y-messages [show]=\"formGroup.controls?.fontSize?.errors\"></c8y-messages>\n      </c8y-form-group>\n    </div>\n  </fieldset>\n\n  <fieldset class=\"c8y-fieldset\">\n    <legend>{{ 'Display' | translate }}</legend>\n    <div class=\"d-flex gap-16 flex-wrap p-t-4 p-b-8 m-b-4\">\n      <c8y-form-group class=\"m-b-0\">\n        <label\n          class=\"c8y-checkbox\"\n          [title]=\"'Show timestamp' | translate\"\n        >\n          <input\n            name=\"showTimestamp\"\n            type=\"checkbox\"\n            formControlName=\"showTimestamp\"\n          />\n          <span></span>\n          <span translate>Show timestamp</span>\n        </label>\n      </c8y-form-group>\n\n      <c8y-form-group class=\"m-b-0\">\n        <label\n          class=\"c8y-checkbox\"\n          [title]=\"'Show icon' | translate\"\n        >\n          <input\n            name=\"showIcon\"\n            type=\"checkbox\"\n            formControlName=\"showIcon\"\n          />\n          <span></span>\n          <span translate>Show icon</span>\n        </label>\n      </c8y-form-group>\n\n      <c8y-form-group class=\"m-b-0\">\n        <label\n          class=\"c8y-checkbox\"\n          [title]=\"'Show trend icon' | translate\"\n        >\n          <input\n            name=\"showTrend\"\n            type=\"checkbox\"\n            formControlName=\"showTrend\"\n          />\n          <span></span>\n          <span translate>Show trend icon</span>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{\n              'Indicates the trend between the last two measurement values.' | translate\n            }}\"\n            placement=\"top\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n          ></button>\n        </label>\n      </c8y-form-group>\n    </div>\n  </fieldset>\n\n  <fieldset class=\"c8y-fieldset\">\n    <legend translate>Number of decimal places</legend>\n    <c8y-form-group class=\"form-group-sm p-t-4\">\n      <input\n        class=\"form-control\"\n        name=\"numberOfDecimalPlaces\"\n        type=\"number\"\n        formControlName=\"numberOfDecimalPlaces\"\n        [placeholder]=\"'e.g. {{ example }}' | translate: { example: 1 }\"\n      />\n      <c8y-messages [show]=\"formGroup.controls?.numberOfDecimalPlaces?.errors\"></c8y-messages>\n    </c8y-form-group>\n  </fieldset>\n</form>\n\n<ng-template #kpiPreview>\n  @if (formGroup && formGroup.value) {\n    @if (formGroup.value.datapoints?.length > 0 && previewActiveDatapoint) {\n      <div style=\"height: 300px\">\n        <c8y-kpi-widget-view [config]=\"previewConfig\"></c8y-kpi-widget-view>\n      </div>\n    } @else {\n      <div class=\"col-md-6 d-col a-i-start j-c-center\">\n        <c8y-ui-empty-state\n          [icon]=\"'c8y-data-points'\"\n          [title]=\"'No data points selected' | translate\"\n          [subtitle]=\"'Select data point to render content' | translate\"\n          [horizontal]=\"false\"\n          data-cy=\"kpi-widget--empty-state-no-data-point-selected\"\n        >\n          <p c8y-guide-docs>\n            <small\n              translate\n              ngNonBindable\n            >\n              Find out more in the\n              <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#kpi\">user documentation</a>.\n            </small>\n          </p>\n        </c8y-ui-empty-state>\n      </div>\n    }\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "ngmodule", type: IconSelectorModule }, { kind: "component", type: i3.IconSelectorWrapperComponent, selector: "c8y-icon-selector-wrapper", inputs: ["canRemoveIcon", "selectedIcon", "iconSize"], outputs: ["onSelect"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: KpiWidgetViewComponent, selector: "c8y-kpi-widget-view", inputs: ["config"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KpiWidgetConfigComponent, deps: [{ token: i1.FormBuilder }, { token: i1.NgForm }, { token: i2.WidgetConfigComponent }, { token: i2.WidgetConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KpiWidgetConfigComponent, isStandalone: true, selector: "c8y-kpi-widget-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["kpiPreview"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <fieldset class=\"c8y-fieldset\">\n    <legend>{{ 'Layout' | translate }}</legend>\n    <div class=\"d-flex a-i-center gap-8\">\n      <div class=\"form-group form-group-sm m-b-24\">\n        <label translate>Icon</label>\n        <c8y-icon-selector-wrapper\n          [iconSize]=\"16\"\n          name=\"icon\"\n          formControlName=\"icon\"\n        ></c8y-icon-selector-wrapper>\n      </div>\n      <c8y-form-group class=\"form-group-sm m-b-24 flex-grow\">\n        <label\n          [title]=\"'Font size of measurement value (px)' | translate\"\n          translate\n        >\n          Font size of measurement value (px)\n        </label>\n        <input\n          class=\"form-control\"\n          name=\"fontSize\"\n          type=\"number\"\n          formControlName=\"fontSize\"\n          [placeholder]=\"'e.g. {{ example }}' | translate: { example: 36 }\"\n        />\n        <c8y-messages [show]=\"formGroup.controls?.fontSize?.errors\"></c8y-messages>\n      </c8y-form-group>\n    </div>\n  </fieldset>\n\n  <fieldset class=\"c8y-fieldset\">\n    <legend>{{ 'Display' | translate }}</legend>\n    <div class=\"d-flex gap-16 flex-wrap p-t-4 p-b-8 m-b-4\">\n      <c8y-form-group class=\"m-b-0\">\n        <label\n          class=\"c8y-checkbox\"\n          [title]=\"'Show timestamp' | translate\"\n        >\n          <input\n            name=\"showTimestamp\"\n            type=\"checkbox\"\n            formControlName=\"showTimestamp\"\n          />\n          <span></span>\n          <span translate>Show timestamp</span>\n        </label>\n      </c8y-form-group>\n\n      <c8y-form-group class=\"m-b-0\">\n        <label\n          class=\"c8y-checkbox\"\n          [title]=\"'Show icon' | translate\"\n        >\n          <input\n            name=\"showIcon\"\n            type=\"checkbox\"\n            formControlName=\"showIcon\"\n          />\n          <span></span>\n          <span translate>Show icon</span>\n        </label>\n      </c8y-form-group>\n\n      <c8y-form-group class=\"m-b-0\">\n        <label\n          class=\"c8y-checkbox\"\n          [title]=\"'Show trend icon' | translate\"\n        >\n          <input\n            name=\"showTrend\"\n            type=\"checkbox\"\n            formControlName=\"showTrend\"\n          />\n          <span></span>\n          <span translate>Show trend icon</span>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{\n              'Indicates the trend between the last two measurement values.' | translate\n            }}\"\n            placement=\"top\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n          ></button>\n        </label>\n      </c8y-form-group>\n    </div>\n  </fieldset>\n\n  <fieldset class=\"c8y-fieldset\">\n    <legend translate>Number of decimal places</legend>\n    <c8y-form-group class=\"form-group-sm p-t-4\">\n      <input\n        class=\"form-control\"\n        name=\"numberOfDecimalPlaces\"\n        type=\"number\"\n        formControlName=\"numberOfDecimalPlaces\"\n        [placeholder]=\"'e.g. {{ example }}' | translate: { example: 1 }\"\n      />\n      <c8y-messages [show]=\"formGroup.controls?.numberOfDecimalPlaces?.errors\"></c8y-messages>\n    </c8y-form-group>\n  </fieldset>\n</form>\n\n<ng-template #kpiPreview>\n  @if (formGroup && formGroup.value) {\n    @if (formGroup.value.datapoints?.length > 0 && previewActiveDatapoint) {\n      <div style=\"height: 300px\">\n        <c8y-kpi-widget-view [config]=\"previewConfig\"></c8y-kpi-widget-view>\n      </div>\n    } @else {\n      <div class=\"col-md-6 d-col a-i-start j-c-center\">\n        <c8y-ui-empty-state\n          [icon]=\"'c8y-data-points'\"\n          [title]=\"'No data points selected' | translate\"\n          [subtitle]=\"'Select data point to render content' | translate\"\n          [horizontal]=\"false\"\n          data-cy=\"kpi-widget--empty-state-no-data-point-selected\"\n        >\n          <p c8y-guide-docs>\n            <small\n              translate\n              ngNonBindable\n            >\n              Find out more in the\n              <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#kpi\">user documentation</a>.\n            </small>\n          </p>\n        </c8y-ui-empty-state>\n      </div>\n    }\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "ngmodule", type: IconSelectorModule }, { kind: "component", type: i3.IconSelectorWrapperComponent, selector: "c8y-icon-selector-wrapper", inputs: ["canRemoveIcon", "selectedIcon", "iconSize"], outputs: ["onSelect"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: KpiWidgetViewComponent, selector: "c8y-kpi-widget-view", inputs: ["config"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: KpiWidgetConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KpiWidgetConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-kpi-widget-config', standalone: true, imports: [
                         ReactiveFormsModule,

package/fesm2022/c8y-ngx-components-widgets-implementations-kpi.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"c8y-ngx-components-widgets-implementations-kpi.mjs","sources":["../../widgets/implementations/kpi/kpi-widget.model.ts","../../widgets/implementations/kpi/kpi-widget-view/kpi-widget-view.component.ts","../../widgets/implementations/kpi/kpi-widget-view/kpi-widget-view.component.html","../../widgets/implementations/kpi/kpi-widget-config/kpi-widget-config.component.ts","../../widgets/implementations/kpi/kpi-widget-config/kpi-widget-config.component.html","../../widgets/implementations/kpi/c8y-ngx-components-widgets-implementations-kpi.ts"],"sourcesContent":["import { KPIDetails } from '@c8y/ngx-components/datapoint-selector';\nimport { SupportedIconsSuggestions } from '@c8y/ngx-components/icon-selector/icons';\nimport type { GlobalContextState } from '@c8y/ngx-components/global-context';\n\nexport interface KpiWidgetConfig extends Partial<GlobalContextState> {\n  datapoints: KPIDetails[];\n  icon?: SupportedIconsSuggestions | null;\n  showTimestamp?: boolean | null;\n  showTrend?: boolean | null;\n  showIcon?: boolean | null;\n  numberOfDecimalPlaces?: number | null;\n  fontSize?: number | null;\n}\n\nexport interface MeasurementValue {\n  unit?: string;\n  value: number;\n  date: string;\n}\n\nexport enum ColorClass {\n  danger = 'text-danger',\n  warning = 'text-warning',\n  unknown = ''\n}\n\nexport type KpiState = {\n  latestMeasurement: MeasurementValue;\n  previousValue: MeasurementValue | undefined;\n  trend: string;\n  unit: string;\n  colorClass: ColorClass;\n};\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  inject,\n  Input,\n  OnChanges,\n  OnInit,\n  signal,\n  SimpleChanges\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { IMeasurement } from '@c8y/client';\nimport {\n  C8yTranslateDirective,\n  C8yTranslatePipe,\n  DashboardChildComponent,\n  DatePipe,\n  EmptyStateComponent,\n  IconDirective,\n  LoadingComponent,\n  MeasurementRealtimeService\n} from '@c8y/ngx-components';\nimport { ContextDashboardComponent } from '@c8y/ngx-components/context-dashboard';\nimport { KPIDetails } from '@c8y/ngx-components/datapoint-selector';\nimport {\n  DisplayMode,\n  GLOBAL_CONTEXT_DISPLAY_MODE,\n  GlobalContextConnectorComponent,\n  GlobalContextState,\n  LocalControlsComponent,\n  PRESET_NAME,\n  PresetName,\n  REFRESH_OPTION,\n  WidgetConfigMigrationService\n} from '@c8y/ngx-components/global-context';\nimport { isEqual, merge as mergeObj } from 'lodash-es';\nimport { BehaviorSubject, combineLatest, merge as merge$, NEVER, Observable, Subject } from 'rxjs';\nimport {\n  distinctUntilChanged,\n  filter,\n  map,\n  pairwise,\n  share,\n  startWith,\n  switchMap,\n  tap\n} from 'rxjs/operators';\nimport { ColorClass, KpiState, KpiWidgetConfig, MeasurementValue } from '../kpi-widget.model';\nimport { AsyncPipe, DecimalPipe, NgClass, NgStyle } from '@angular/common';\n\n@Component({\n  selector: 'c8y-kpi-widget-view',\n  templateUrl: './kpi-widget-view.component.html',\n  standalone: true,\n  imports: [\n    AsyncPipe,\n    DatePipe,\n    DecimalPipe,\n    NgClass,\n    NgStyle,\n    C8yTranslatePipe,\n    C8yTranslateDirective,\n    IconDirective,\n    LoadingComponent,\n    EmptyStateComponent,\n    GlobalContextConnectorComponent,\n    LocalControlsComponent\n  ],\n  providers: [MeasurementRealtimeService],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { class: 'd-col fit-h' }\n})\nexport class KpiWidgetViewComponent implements OnChanges, OnInit {\n  @Input() config: KpiWidgetConfig = { datapoints: [] };\n\n  displayMode = signal<DisplayMode>(GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD);\n  contextConfig = signal<GlobalContextState>({});\n  isLinkedToGlobal = signal<boolean | undefined>(undefined);\n  widgetControls = signal<PresetName>(PRESET_NAME.KPI);\n  isHistoryMode = signal(false);\n\n  state$: Observable<KpiState | null> = NEVER;\n  noDataInitiallyInDB = signal(false);\n\n  readonly GLOBAL_CONTEXT_DISPLAY_MODE = GLOBAL_CONTEXT_DISPLAY_MODE;\n\n  private dashboardChild = inject(DashboardChildComponent, { optional: true });\n  private dashboard = inject(ContextDashboardComponent, { optional: true });\n  private measurementRealtime = inject(MeasurementRealtimeService);\n  private widgetConfigMigrationService = inject(WidgetConfigMigrationService);\n  private destroyRef = inject(DestroyRef);\n\n  private context$ = new BehaviorSubject<GlobalContextState | null>(null);\n  private refresh$ = new Subject<void>();\n  private lastDatapoint: KPIDetails | null = null;\n\n  ngOnInit(): void {\n    this.config = mergeObj(\n      this.config,\n      this.widgetConfigMigrationService.migrateWidgetConfig(this.config)\n    );\n\n    this.syncDisplayState();\n    this.buildStatePipeline();\n\n    if (!this.isDashboardMode()) {\n      this.emitContext(this.config);\n    }\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    const cfg = changes.config?.currentValue as KpiWidgetConfig;\n    if (!cfg) {\n      return;\n    }\n    this.config = cfg;\n    this.syncDisplayState();\n\n    if (this.isOnRealDashboard()) {\n      return;\n    }\n    if (this.isDashboardPreviewWaitingForContext()) {\n      return;\n    }\n    this.emitContext(this.config, this.hasDatapointChanged());\n  }\n\n  onContextChange(event: { context: GlobalContextState; diff: GlobalContextState }): void {\n    this.contextConfig.set(event.context);\n    this.emitContext(event.context);\n  }\n\n  onRefresh(): void {\n    this.refresh$.next();\n  }\n\n  getDashboardChild(): DashboardChildComponent {\n    return this.dashboardChild;\n  }\n\n  setupObservable(datapoint: KPIDetails, context: GlobalContextState): Observable<KpiState> {\n    const isHistory = context.refreshOption === REFRESH_OPTION.HISTORY;\n    const isPaused = !isHistory && context.isAutoRefreshEnabled === false;\n    this.isHistoryMode.set(isHistory);\n    this.noDataInitiallyInDB.set(false);\n\n    let source$: Observable<MeasurementValue>;\n    if (isPaused) {\n      source$ = this.getHistoryMeasurement$(datapoint, {});\n    } else if (isHistory) {\n      source$ = this.getHistoryMeasurement$(datapoint, context);\n    } else {\n      source$ = this.getLiveMeasurement$(datapoint);\n    }\n\n    const shared$ = source$.pipe(share());\n    const lastTwo$ = shared$.pipe(pairwise());\n\n    return combineLatest([\n      shared$,\n      lastTwo$.pipe(\n        map(([prev]) => prev),\n        startWith(undefined as MeasurementValue | undefined)\n      ),\n      this.getTrend$(lastTwo$),\n      shared$.pipe(\n        map(m => datapoint.unit || m.unit || ''),\n        startWith(''),\n        distinctUntilChanged()\n      ),\n      this.getColorClass$(shared$, datapoint)\n    ]).pipe(\n      map(([latestMeasurement, previousValue, trend, unit, colorClass]) => ({\n        latestMeasurement,\n        previousValue,\n        trend,\n        unit,\n        colorClass\n      }))\n    );\n  }\n\n  private buildStatePipeline(): void {\n    const readState = () => ({ ctx: this.context$.value, dp: this.findActiveDatapoint() });\n\n    this.state$ = merge$(\n      this.context$.pipe(map(readState), distinctUntilChanged(isEqual)),\n      this.refresh$.pipe(map(readState))\n    ).pipe(\n      filter((s): s is { ctx: GlobalContextState; dp: KPIDetails } => !!s.ctx && !!s.dp),\n      switchMap(({ ctx, dp }) => {\n        this.assignContextFromContextDashboard(dp);\n        return this.setupObservable(dp, ctx).pipe(startWith(null as KpiState | null));\n      }),\n      takeUntilDestroyed(this.destroyRef)\n    );\n  }\n\n  private syncDisplayState(): void {\n    const newMode = this.resolveDisplayMode();\n    if (this.displayMode() !== newMode) {\n      this.displayMode.set(newMode);\n    }\n\n    const newCtx = this.extractContext(this.config);\n    if (!isEqual(this.contextConfig(), newCtx)) {\n      this.contextConfig.set(newCtx);\n    }\n  }\n\n  private emitContext(source: Partial<GlobalContextState>, force = false): void {\n    const ctx = this.extractContext(source);\n    if (force || !isEqual(this.context$.value, ctx)) {\n      this.context$.next(ctx);\n    }\n  }\n\n  private isDashboardMode(): boolean {\n    return this.resolveDisplayMode() === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD;\n  }\n\n  private isOnRealDashboard(): boolean {\n    return this.isDashboardMode() && !!this.dashboardChild;\n  }\n\n  private isDashboardPreviewWaitingForContext(): boolean {\n    return this.isDashboardMode() && !this.config.isGlobalContextReady;\n  }\n\n  private resolveDisplayMode(): DisplayMode {\n    return (this.config?.displayMode || GLOBAL_CONTEXT_DISPLAY_MODE.CONFIG) as DisplayMode;\n  }\n\n  private extractContext(source: Partial<GlobalContextState>): GlobalContextState {\n    return {\n      dateTimeContext: source.dateTimeContext,\n      isAutoRefreshEnabled: source.isAutoRefreshEnabled,\n      refreshInterval: source.refreshInterval,\n      refreshOption: source.refreshOption\n    };\n  }\n\n  private findActiveDatapoint(): KPIDetails | undefined {\n    return this.config?.datapoints?.find(dp => dp?.__active);\n  }\n\n  private hasDatapointChanged(): boolean {\n    const dp = this.findActiveDatapoint();\n    if (!dp) {\n      return false;\n    }\n    const prev = this.lastDatapoint;\n    this.lastDatapoint = dp;\n    return (\n      !prev ||\n      dp.fragment !== prev.fragment ||\n      dp.series !== prev.series ||\n      dp.__target?.id !== prev.__target?.id ||\n      dp.unit !== prev.unit ||\n      dp.redRangeMin !== prev.redRangeMin ||\n      dp.redRangeMax !== prev.redRangeMax ||\n      dp.yellowRangeMin !== prev.yellowRangeMin ||\n      dp.yellowRangeMax !== prev.yellowRangeMax\n    );\n  }\n\n  private getLiveMeasurement$(datapoint: KPIDetails): Observable<MeasurementValue> {\n    return this.measurementRealtime\n      .latestValueOfSpecificMeasurement$(\n        datapoint.fragment,\n        datapoint.series,\n        datapoint.__target,\n        this.config.showTrend ? 2 : 1,\n        true\n      )\n      .pipe(\n        tap(m => {\n          if (!m) this.noDataInitiallyInDB.set(true);\n        }),\n        filter(m => !!m),\n        map(m => this.toMeasurementValue(m, datapoint))\n      );\n  }\n\n  private getHistoryMeasurement$(\n    datapoint: KPIDetails,\n    context: GlobalContextState\n  ): Observable<MeasurementValue> {\n    return this.measurementRealtime\n      .lastMeasurement$(\n        datapoint.fragment,\n        datapoint.series,\n        datapoint.__target,\n        1,\n        true,\n        context.dateTimeContext?.dateFrom,\n        context.dateTimeContext?.dateTo\n      )\n      .pipe(\n        tap(m => {\n          if (!m) this.noDataInitiallyInDB.set(true);\n        }),\n        filter(m => !!m),\n        map(m => this.toMeasurementValue(m, datapoint))\n      );\n  }\n\n  private toMeasurementValue(m: IMeasurement, dp: KPIDetails): MeasurementValue {\n    return {\n      unit: m[dp.fragment][dp.series].unit,\n      value: m[dp.fragment][dp.series].value,\n      date: m.time as string\n    };\n  }\n\n  private getColorClass$(\n    measurement$: Observable<MeasurementValue>,\n    datapoint: KPIDetails\n  ): Observable<ColorClass> {\n    return measurement$.pipe(\n      map(m => {\n        if (this.inRange(datapoint, m.value, 'redRangeMin', 'redRangeMax')) {\n          return ColorClass.danger;\n        }\n        if (this.inRange(datapoint, m.value, 'yellowRangeMin', 'yellowRangeMax')) {\n          return ColorClass.warning;\n        }\n        return ColorClass.unknown;\n      }),\n      startWith(ColorClass.unknown),\n      distinctUntilChanged()\n    );\n  }\n\n  private getTrend$(lastTwo$: Observable<MeasurementValue[]>): Observable<string> {\n    return lastTwo$.pipe(\n      map(([prev, curr]) => {\n        if (prev.value < curr.value) return '45deg';\n        if (prev.value > curr.value) return '135deg';\n        return '90deg';\n      }),\n      startWith('90deg'),\n      distinctUntilChanged()\n    );\n  }\n\n  private inRange(dp: KPIDetails, value: number, minKey: string, maxKey: string): boolean {\n    return (\n      typeof dp[minKey] === 'number' &&\n      typeof dp[maxKey] === 'number' &&\n      value >= dp[minKey] &&\n      value < dp[maxKey]\n    );\n  }\n\n  private assignContextFromContextDashboard(datapoint: KPIDetails): void {\n    if (!this.dashboard?.isDeviceTypeDashboard) {\n      return;\n    }\n    const context = this.dashboard?.context;\n    if (context?.id) {\n      datapoint.__target = { name: context.name, id: context.id };\n    }\n  }\n}\n","@if (displayMode() === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD && getDashboardChild()) {\n  <c8y-global-context-connector\n    [controls]=\"widgetControls()\"\n    [config]=\"contextConfig()\"\n    [dashboardChild]=\"getDashboardChild()\"\n    [linked]=\"isLinkedToGlobal()\"\n    [emitRefresh]=\"false\"\n    (configChange)=\"onContextChange($event)\"\n    (refresh)=\"onRefresh()\"\n  ></c8y-global-context-connector>\n} @else if (displayMode() !== GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {\n  <c8y-local-controls\n    [controls]=\"widgetControls()\"\n    [displayMode]=\"displayMode()\"\n    [config]=\"contextConfig()\"\n    [emitRefresh]=\"false\"\n    (configChange)=\"onContextChange($event)\"\n    (refresh)=\"onRefresh()\"\n  ></c8y-local-controls>\n}\n\n@if (state$ | async; as lastState) {\n  <div class=\"kpi-widget__container d-flex d-col flex-grow fit-w a-i-center j-c-center\">\n    <div class=\"d-flex a-i-center j-c-center fit-w\">\n      @if (config.icon && config.showIcon) {\n        <div\n          class=\"m-r-16 flex-no-shrink text-muted\"\n          [ngClass]=\"lastState.colorClass\"\n        >\n          <i\n            class=\"icon-32\"\n            [c8yIcon]=\"config.icon\"\n          ></i>\n        </div>\n      }\n      <div class=\"text-truncate\">\n        <span\n          class=\"text-truncate text-medium\"\n          [ngStyle]=\"{ 'font-size': (config.fontSize || '36') + 'px' }\"\n          title=\"{{\n            lastState.colorClass === 'text-danger'\n              ? ('Within red range:' | translate)\n              : lastState.colorClass === 'text-warning'\n                ? ('Within yellow range:' | translate)\n                : ''\n          }} {{\n            lastState.latestMeasurement.value\n              | number\n                : '1.' +\n                    (config.numberOfDecimalPlaces || '0') +\n                    '-' +\n                    (config.numberOfDecimalPlaces || '0')\n          }} {{ lastState.unit || '' }}\"\n          [ngClass]=\"lastState.colorClass\"\n        >\n          {{\n            lastState.latestMeasurement.value\n              | number\n                : '1.' +\n                    (config.numberOfDecimalPlaces || '0') +\n                    '-' +\n                    (config.numberOfDecimalPlaces || '0')\n          }}\n          <small class=\"text-regular\">{{ lastState.unit || '' }}</small>\n        </span>\n      </div>\n      @if (config?.showTrend && lastState.previousValue; as previousValue) {\n        <div class=\"dot dot-info dot-30 m-l-16 flex-no-shrink\">\n          <i\n            class=\"icon-20\"\n            c8yIcon=\"arrow-dotted-up\"\n            [ngStyle]=\"{ transform: 'rotate(' + lastState.trend + ')' }\"\n            [title]=\"\n              ('Previous value' | translate) +\n              ': ' +\n              (previousValue.value\n                | number\n                  : '1.' +\n                      (config.numberOfDecimalPlaces || '0') +\n                      '-' +\n                      (config.numberOfDecimalPlaces || '0')) +\n              ' (' +\n              (previousValue.date | c8yDate: 'medium') +\n              ')'\n            \"\n          ></i>\n        </div>\n      }\n    </div>\n    <div class=\"d-flex d-col a-i-center\">\n      @if (config?.showTimestamp) {\n        <p class=\"icon-flex text-center text-muted small m-b-0\">\n          <i c8yIcon=\"calendar\"></i>\n          {{ lastState.latestMeasurement.date | c8yDate: 'medium' }}\n        </p>\n      }\n      @if (isHistoryMode()) {\n        <p class=\"text-center text-muted small m-b-0\">\n          <span translate>Last measurement in selected time range</span>\n        </p>\n      }\n    </div>\n  </div>\n} @else {\n  <div class=\"d-flex flex-grow fit-w j-c-center a-i-center\">\n    @let noDataSubtitleLive = 'Waiting for measurements to be created.' | translate;\n    @let noDataSubtitleHistory = 'No data available for the selected time period.' | translate;\n    @if (noDataInitiallyInDB()) {\n      <c8y-ui-empty-state\n        [icon]=\"'line-chart'\"\n        [title]=\"'No measurement to display.' | translate\"\n        [subtitle]=\"isHistoryMode() ? noDataSubtitleHistory : noDataSubtitleLive\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    } @else {\n      <c8y-loading></c8y-loading>\n    }\n  </div>\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  inject,\n  Input,\n  OnChanges,\n  OnInit,\n  SimpleChanges,\n  TemplateRef,\n  ViewChild\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n  AbstractControl,\n  ControlContainer,\n  FormBuilder,\n  NgForm,\n  ReactiveFormsModule,\n  ValidationErrors,\n  ValidatorFn,\n  Validators\n} from '@angular/forms';\nimport {\n  C8yTranslateDirective,\n  C8yTranslatePipe,\n  C8yValidators,\n  EmptyStateComponent,\n  FormGroupComponent,\n  GuideDocsComponent,\n  GuideHrefDirective,\n  MessagesComponent,\n  OnBeforeSave\n} from '@c8y/ngx-components';\nimport { WidgetConfigComponent, WidgetConfigService } from '@c8y/ngx-components/context-dashboard';\nimport {\n  DatapointAttributesFormConfig,\n  DatapointSelectorModalOptions,\n  DatapointSelectorModule,\n  KPIDetails\n} from '@c8y/ngx-components/datapoint-selector';\nimport { IconSelectorModule } from '@c8y/ngx-components/icon-selector';\nimport { PopoverModule } from 'ngx-bootstrap/popover';\nimport { Observable } from 'rxjs';\nimport { debounceTime, filter } from 'rxjs/operators';\nimport { KpiWidgetViewComponent } from '../kpi-widget-view/kpi-widget-view.component';\nimport { KpiWidgetConfig } from '../kpi-widget.model';\n\nexport function exactlyASingleDatapointActive(): ValidatorFn {\n  return (control: AbstractControl): ValidationErrors | null => {\n    const datapoints: KPIDetails[] = control.value;\n    if (!datapoints?.length) {\n      return null;\n    }\n    return datapoints.filter(dp => dp.__active).length === 1\n      ? null\n      : { exactlyOneDatapointNeedsToBeActive: true };\n  };\n}\n\n@Component({\n  selector: 'c8y-kpi-widget-config',\n  templateUrl: './kpi-widget-config.component.html',\n  standalone: true,\n  imports: [\n    ReactiveFormsModule,\n    C8yTranslatePipe,\n    C8yTranslateDirective,\n    FormGroupComponent,\n    MessagesComponent,\n    EmptyStateComponent,\n    GuideDocsComponent,\n    GuideHrefDirective,\n    DatapointSelectorModule,\n    IconSelectorModule,\n    PopoverModule,\n    KpiWidgetViewComponent\n  ],\n  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class KpiWidgetConfigComponent implements OnChanges, OnInit, OnBeforeSave {\n  @ViewChild('kpiPreview')\n  set previewMapSet(template: TemplateRef<unknown>) {\n    this.widgetConfigService.setPreview(template || null);\n  }\n\n  @Input() config: KpiWidgetConfig;\n\n  previewActiveDatapoint: KPIDetails;\n  datapointSelectionConfig: Partial<DatapointSelectorModalOptions> = {};\n  defaultFormOptions: Partial<DatapointAttributesFormConfig> = {\n    showRedRange: true,\n    showYellowRange: true\n  };\n  formGroup: ReturnType<KpiWidgetConfigComponent['createForm']>;\n  previewConfig: KpiWidgetConfig;\n\n  private destroyRef = inject(DestroyRef);\n  private limits = {\n    fontSizeMax: 72,\n    fontSizeMin: 18,\n    numberOfDecimalPlacesMax: 10,\n    numberOfDecimalPlacesMin: 0\n  } as const;\n\n  constructor(\n    private formBuilder: FormBuilder,\n    private form: NgForm,\n    private widgetConfig: WidgetConfigComponent,\n    private widgetConfigService: WidgetConfigService\n  ) {}\n\n  onBeforeSave(config?: KpiWidgetConfig): boolean | Promise<boolean> | Observable<boolean> {\n    if (this.formGroup.valid) {\n      Object.assign(config, this.formGroup.value);\n      return true;\n    }\n    return false;\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (this.formGroup && changes.config) {\n      this.formGroup.controls.datapoints.patchValue(this.config.datapoints || []);\n    }\n  }\n\n  ngOnInit(): void {\n    if (this.widgetConfig.context?.id) {\n      this.datapointSelectionConfig.contextAsset = this.widgetConfig.context;\n    }\n\n    this.previewConfig = { ...this.config };\n    this.initForm();\n\n    if (this.config?.datapoints) {\n      this.formGroup.patchValue({ datapoints: this.config.datapoints });\n      this.previewActiveDatapoint = this.config.datapoints.find(dp => dp.__active);\n    }\n\n    this.widgetConfigService.currentConfig$\n      .pipe(\n        filter(c => !!c),\n        takeUntilDestroyed(this.destroyRef)\n      )\n      .subscribe(c => {\n        this.previewConfig = { ...this.previewConfig, ...c, ...this.formGroup.value };\n      });\n  }\n\n  private initForm(): void {\n    this.formGroup = this.createForm();\n    this.form.form.addControl('config', this.formGroup);\n    this.formGroup.patchValue(this.config);\n\n    this.formGroup.valueChanges\n      .pipe(debounceTime(100), takeUntilDestroyed(this.destroyRef))\n      .subscribe(formValue => {\n        if (formValue.datapoints) {\n          this.previewActiveDatapoint = formValue.datapoints.find(dp => dp.__active);\n        }\n\n        if (this.formGroup.valid) {\n          this.previewConfig = { ...this.config, ...this.applyLimitsToPreview(formValue) };\n        }\n\n        Object.assign(this.config, formValue);\n      });\n  }\n\n  private applyLimitsToPreview(formValue: Partial<KpiWidgetConfig>): Partial<KpiWidgetConfig> {\n    const result = { ...formValue };\n\n    if (result.numberOfDecimalPlaces !== undefined) {\n      result.numberOfDecimalPlaces = this.clamp(\n        result.numberOfDecimalPlaces,\n        this.limits.numberOfDecimalPlacesMin,\n        this.limits.numberOfDecimalPlacesMax\n      );\n    }\n\n    if (result.fontSize !== undefined) {\n      result.fontSize = this.clamp(\n        result.fontSize,\n        this.limits.fontSizeMin,\n        this.limits.fontSizeMax\n      );\n    }\n\n    return result;\n  }\n\n  private clamp(value: number, min: number, max: number): number {\n    return Math.max(min, Math.min(max, value));\n  }\n\n  private createForm() {\n    return this.formBuilder.group({\n      numberOfDecimalPlaces: [\n        2,\n        [\n          Validators.required,\n          Validators.min(this.limits.numberOfDecimalPlacesMin),\n          Validators.max(this.limits.numberOfDecimalPlacesMax),\n          C8yValidators.integerValidator()\n        ]\n      ],\n      showTimestamp: [true, []],\n      showTrend: [true, []],\n      showIcon: [true, []],\n      icon: ['water', [Validators.required, Validators.minLength(1)]],\n      fontSize: [\n        36,\n        [\n          Validators.required,\n          Validators.min(this.limits.fontSizeMin),\n          Validators.max(this.limits.fontSizeMax)\n        ]\n      ],\n      datapoints: this.formBuilder.control(new Array<KPIDetails>(), [\n        Validators.required,\n        Validators.minLength(1),\n        exactlyASingleDatapointActive()\n      ])\n    });\n  }\n}\n","<form [formGroup]=\"formGroup\">\n  <fieldset class=\"c8y-fieldset\">\n    <legend>{{ 'Layout' | translate }}</legend>\n    <div class=\"d-flex a-i-center gap-8\">\n      <div class=\"form-group form-group-sm m-b-24\">\n        <label translate>Icon</label>\n        <c8y-icon-selector-wrapper\n          [iconSize]=\"16\"\n          name=\"icon\"\n          formControlName=\"icon\"\n        ></c8y-icon-selector-wrapper>\n      </div>\n      <c8y-form-group class=\"form-group-sm m-b-24 flex-grow\">\n        <label\n          [title]=\"'Font size of measurement value (px)' | translate\"\n          translate\n        >\n          Font size of measurement value (px)\n        </label>\n        <input\n          class=\"form-control\"\n          name=\"fontSize\"\n          type=\"number\"\n          formControlName=\"fontSize\"\n          [placeholder]=\"'e.g. {{ example }}' | translate: { example: 36 }\"\n        />\n        <c8y-messages [show]=\"formGroup.controls?.fontSize?.errors\"></c8y-messages>\n      </c8y-form-group>\n    </div>\n  </fieldset>\n\n  <fieldset class=\"c8y-fieldset\">\n    <legend>{{ 'Display' | translate }}</legend>\n    <div class=\"d-flex gap-16 flex-wrap p-t-4 p-b-8 m-b-4\">\n      <c8y-form-group class=\"m-b-0\">\n        <label\n          class=\"c8y-checkbox\"\n          [title]=\"'Show timestamp' | translate\"\n        >\n          <input\n            name=\"showTimestamp\"\n            type=\"checkbox\"\n            formControlName=\"showTimestamp\"\n          />\n          <span></span>\n          <span translate>Show timestamp</span>\n        </label>\n      </c8y-form-group>\n\n      <c8y-form-group class=\"m-b-0\">\n        <label\n          class=\"c8y-checkbox\"\n          [title]=\"'Show icon' | translate\"\n        >\n          <input\n            name=\"showIcon\"\n            type=\"checkbox\"\n            formControlName=\"showIcon\"\n          />\n          <span></span>\n          <span translate>Show icon</span>\n        </label>\n      </c8y-form-group>\n\n      <c8y-form-group class=\"m-b-0\">\n        <label\n          class=\"c8y-checkbox\"\n          [title]=\"'Show trend icon' | translate\"\n        >\n          <input\n            name=\"showTrend\"\n            type=\"checkbox\"\n            formControlName=\"showTrend\"\n          />\n          <span></span>\n          <span translate>Show trend icon</span>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{\n              'Indicates the trend between the last two measurement values.' | translate\n            }}\"\n            placement=\"top\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n          ></button>\n        </label>\n      </c8y-form-group>\n    </div>\n  </fieldset>\n\n  <fieldset class=\"c8y-fieldset\">\n    <legend translate>Number of decimal places</legend>\n    <c8y-form-group class=\"form-group-sm p-t-4\">\n      <input\n        class=\"form-control\"\n        name=\"numberOfDecimalPlaces\"\n        type=\"number\"\n        formControlName=\"numberOfDecimalPlaces\"\n        [placeholder]=\"'e.g. {{ example }}' | translate: { example: 1 }\"\n      />\n      <c8y-messages [show]=\"formGroup.controls?.numberOfDecimalPlaces?.errors\"></c8y-messages>\n    </c8y-form-group>\n  </fieldset>\n</form>\n\n<ng-template #kpiPreview>\n  @if (formGroup && formGroup.value) {\n    @if (formGroup.value.datapoints?.length > 0 && previewActiveDatapoint) {\n      <div style=\"height: 300px\">\n        <c8y-kpi-widget-view [config]=\"previewConfig\"></c8y-kpi-widget-view>\n      </div>\n    } @else {\n      <div class=\"col-md-6 d-col a-i-start j-c-center\">\n        <c8y-ui-empty-state\n          [icon]=\"'c8y-data-points'\"\n          [title]=\"'No data points selected' | translate\"\n          [subtitle]=\"'Select data point to render content' | translate\"\n          [horizontal]=\"false\"\n          data-cy=\"kpi-widget--empty-state-no-data-point-selected\"\n        >\n          <p c8y-guide-docs>\n            <small\n              translate\n              ngNonBindable\n            >\n              Find out more in the\n              <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#kpi\">user documentation</a>.\n            </small>\n          </p>\n        </c8y-ui-empty-state>\n      </div>\n    }\n  }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["mergeObj","merge$"],"mappings":"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"}
+{"version":3,"file":"c8y-ngx-components-widgets-implementations-kpi.mjs","sources":["../../widgets/implementations/kpi/kpi-widget.model.ts","../../widgets/implementations/kpi/kpi-widget-view/kpi-widget-view.component.ts","../../widgets/implementations/kpi/kpi-widget-view/kpi-widget-view.component.html","../../widgets/implementations/kpi/kpi-widget-config/kpi-widget-config.component.ts","../../widgets/implementations/kpi/kpi-widget-config/kpi-widget-config.component.html","../../widgets/implementations/kpi/c8y-ngx-components-widgets-implementations-kpi.ts"],"sourcesContent":["import { KPIDetails } from '@c8y/ngx-components/datapoint-selector';\nimport { SupportedIconsSuggestions } from '@c8y/ngx-components/icon-selector/icons';\nimport type { GlobalContextState } from '@c8y/ngx-components/global-context';\n\nexport interface KpiWidgetConfig extends Partial<GlobalContextState> {\n  datapoints: KPIDetails[];\n  icon?: SupportedIconsSuggestions | null;\n  showTimestamp?: boolean | null;\n  showTrend?: boolean | null;\n  showIcon?: boolean | null;\n  numberOfDecimalPlaces?: number | null;\n  fontSize?: number | null;\n}\n\nexport interface MeasurementValue {\n  unit?: string;\n  value: number;\n  date: string;\n}\n\nexport enum ColorClass {\n  danger = 'text-danger',\n  warning = 'text-warning',\n  unknown = ''\n}\n\nexport type KpiState = {\n  latestMeasurement: MeasurementValue;\n  previousValue: MeasurementValue | undefined;\n  trend: string;\n  unit: string;\n  colorClass: ColorClass;\n};\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  inject,\n  Input,\n  OnChanges,\n  OnInit,\n  signal,\n  SimpleChanges\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { IMeasurement } from '@c8y/client';\nimport {\n  C8yTranslateDirective,\n  C8yTranslatePipe,\n  DashboardChildComponent,\n  DatePipe,\n  EmptyStateComponent,\n  IconDirective,\n  LoadingComponent,\n  MeasurementRealtimeService\n} from '@c8y/ngx-components';\nimport { ContextDashboardComponent } from '@c8y/ngx-components/context-dashboard';\nimport { KPIDetails } from '@c8y/ngx-components/datapoint-selector';\nimport {\n  DisplayMode,\n  GLOBAL_CONTEXT_DISPLAY_MODE,\n  GlobalContextConnectorComponent,\n  GlobalContextState,\n  LocalControlsComponent,\n  PRESET_NAME,\n  PresetName,\n  REFRESH_OPTION,\n  WidgetConfigMigrationService\n} from '@c8y/ngx-components/global-context';\nimport { isEqual, merge as mergeObj } from 'lodash-es';\nimport { BehaviorSubject, combineLatest, merge as merge$, NEVER, Observable, Subject } from 'rxjs';\nimport {\n  distinctUntilChanged,\n  filter,\n  map,\n  pairwise,\n  share,\n  startWith,\n  switchMap,\n  tap\n} from 'rxjs/operators';\nimport { ColorClass, KpiState, KpiWidgetConfig, MeasurementValue } from '../kpi-widget.model';\nimport { AsyncPipe, DecimalPipe, NgClass, NgStyle } from '@angular/common';\n\n@Component({\n  selector: 'c8y-kpi-widget-view',\n  templateUrl: './kpi-widget-view.component.html',\n  standalone: true,\n  imports: [\n    AsyncPipe,\n    DatePipe,\n    DecimalPipe,\n    NgClass,\n    NgStyle,\n    C8yTranslatePipe,\n    C8yTranslateDirective,\n    IconDirective,\n    LoadingComponent,\n    EmptyStateComponent,\n    GlobalContextConnectorComponent,\n    LocalControlsComponent\n  ],\n  providers: [MeasurementRealtimeService],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { class: 'd-col fit-h' }\n})\nexport class KpiWidgetViewComponent implements OnChanges, OnInit {\n  @Input() config: KpiWidgetConfig = { datapoints: [] };\n\n  displayMode = signal<DisplayMode>(GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD);\n  contextConfig = signal<GlobalContextState>({});\n  isLinkedToGlobal = signal<boolean | undefined>(undefined);\n  widgetControls = signal<PresetName>(PRESET_NAME.KPI);\n  isHistoryMode = signal(false);\n\n  state$: Observable<KpiState | null> = NEVER;\n  noDataInitiallyInDB = signal(false);\n\n  readonly GLOBAL_CONTEXT_DISPLAY_MODE = GLOBAL_CONTEXT_DISPLAY_MODE;\n\n  private dashboardChild = inject(DashboardChildComponent, { optional: true });\n  private dashboard = inject(ContextDashboardComponent, { optional: true });\n  private measurementRealtime = inject(MeasurementRealtimeService);\n  private widgetConfigMigrationService = inject(WidgetConfigMigrationService);\n  private destroyRef = inject(DestroyRef);\n\n  private context$ = new BehaviorSubject<GlobalContextState | null>(null);\n  private refresh$ = new Subject<void>();\n  private lastDatapoint: KPIDetails | null = null;\n\n  ngOnInit(): void {\n    this.config = mergeObj(\n      this.config,\n      this.widgetConfigMigrationService.migrateWidgetConfig(this.config)\n    );\n\n    this.syncDisplayState();\n    this.buildStatePipeline();\n\n    if (!this.isDashboardMode()) {\n      this.emitContext(this.config);\n    }\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    const cfg = changes.config?.currentValue as KpiWidgetConfig;\n    if (!cfg) {\n      return;\n    }\n    this.config = cfg;\n    this.syncDisplayState();\n\n    if (this.isOnRealDashboard()) {\n      return;\n    }\n    if (this.isDashboardPreviewWaitingForContext()) {\n      return;\n    }\n    this.emitContext(this.config, this.hasDatapointChanged());\n  }\n\n  onContextChange(event: { context: GlobalContextState; diff: GlobalContextState }): void {\n    this.contextConfig.set(event.context);\n    this.emitContext(event.context);\n  }\n\n  onRefresh(): void {\n    this.refresh$.next();\n  }\n\n  getDashboardChild(): DashboardChildComponent {\n    return this.dashboardChild;\n  }\n\n  setupObservable(datapoint: KPIDetails, context: GlobalContextState): Observable<KpiState> {\n    const isHistory = context.refreshOption === REFRESH_OPTION.HISTORY;\n    const isPaused = !isHistory && context.isAutoRefreshEnabled === false;\n    this.isHistoryMode.set(isHistory);\n    this.noDataInitiallyInDB.set(false);\n\n    let source$: Observable<MeasurementValue>;\n    if (isPaused) {\n      source$ = this.getHistoryMeasurement$(datapoint, {});\n    } else if (isHistory) {\n      source$ = this.getHistoryMeasurement$(datapoint, context);\n    } else {\n      source$ = this.getLiveMeasurement$(datapoint);\n    }\n\n    const shared$ = source$.pipe(share());\n    const lastTwo$ = shared$.pipe(pairwise());\n\n    return combineLatest([\n      shared$,\n      lastTwo$.pipe(\n        map(([prev]) => prev),\n        startWith(undefined as MeasurementValue | undefined)\n      ),\n      this.getTrend$(lastTwo$),\n      shared$.pipe(\n        map(m => datapoint.unit || m.unit || ''),\n        startWith(''),\n        distinctUntilChanged()\n      ),\n      this.getColorClass$(shared$, datapoint)\n    ]).pipe(\n      map(([latestMeasurement, previousValue, trend, unit, colorClass]) => ({\n        latestMeasurement,\n        previousValue,\n        trend,\n        unit,\n        colorClass\n      }))\n    );\n  }\n\n  private buildStatePipeline(): void {\n    const readState = () => ({ ctx: this.context$.value, dp: this.findActiveDatapoint() });\n\n    this.state$ = merge$(\n      this.context$.pipe(map(readState), distinctUntilChanged(isEqual)),\n      this.refresh$.pipe(map(readState))\n    ).pipe(\n      filter((s): s is { ctx: GlobalContextState; dp: KPIDetails } => !!s.ctx && !!s.dp),\n      switchMap(({ ctx, dp }) => {\n        this.assignContextFromContextDashboard(dp);\n        return this.setupObservable(dp, ctx).pipe(startWith(null as KpiState | null));\n      }),\n      takeUntilDestroyed(this.destroyRef)\n    );\n  }\n\n  private syncDisplayState(): void {\n    const newMode = this.resolveDisplayMode();\n    if (this.displayMode() !== newMode) {\n      this.displayMode.set(newMode);\n    }\n\n    const newCtx = this.extractContext(this.config);\n    if (!isEqual(this.contextConfig(), newCtx)) {\n      this.contextConfig.set(newCtx);\n    }\n  }\n\n  private emitContext(source: Partial<GlobalContextState>, force = false): void {\n    const ctx = this.extractContext(source);\n    if (force || !isEqual(this.context$.value, ctx)) {\n      this.context$.next(ctx);\n    }\n  }\n\n  private isDashboardMode(): boolean {\n    return this.resolveDisplayMode() === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD;\n  }\n\n  private isOnRealDashboard(): boolean {\n    return this.isDashboardMode() && !!this.dashboardChild;\n  }\n\n  private isDashboardPreviewWaitingForContext(): boolean {\n    return this.isDashboardMode() && !this.config.isGlobalContextReady;\n  }\n\n  private resolveDisplayMode(): DisplayMode {\n    return (this.config?.displayMode || GLOBAL_CONTEXT_DISPLAY_MODE.VIEW_AND_CONFIG) as DisplayMode;\n  }\n\n  private extractContext(source: Partial<GlobalContextState>): GlobalContextState {\n    return {\n      dateTimeContext: source.dateTimeContext,\n      isAutoRefreshEnabled: source.isAutoRefreshEnabled,\n      refreshInterval: source.refreshInterval,\n      refreshOption: source.refreshOption\n    };\n  }\n\n  private findActiveDatapoint(): KPIDetails | undefined {\n    return this.config?.datapoints?.find(dp => dp?.__active);\n  }\n\n  private hasDatapointChanged(): boolean {\n    const dp = this.findActiveDatapoint();\n    if (!dp) {\n      return false;\n    }\n    const prev = this.lastDatapoint;\n    this.lastDatapoint = dp;\n    return (\n      !prev ||\n      dp.fragment !== prev.fragment ||\n      dp.series !== prev.series ||\n      dp.__target?.id !== prev.__target?.id ||\n      dp.unit !== prev.unit ||\n      dp.redRangeMin !== prev.redRangeMin ||\n      dp.redRangeMax !== prev.redRangeMax ||\n      dp.yellowRangeMin !== prev.yellowRangeMin ||\n      dp.yellowRangeMax !== prev.yellowRangeMax\n    );\n  }\n\n  private getLiveMeasurement$(datapoint: KPIDetails): Observable<MeasurementValue> {\n    return this.measurementRealtime\n      .latestValueOfSpecificMeasurement$(\n        datapoint.fragment,\n        datapoint.series,\n        datapoint.__target,\n        this.config.showTrend ? 2 : 1,\n        true\n      )\n      .pipe(\n        tap(m => {\n          if (!m) this.noDataInitiallyInDB.set(true);\n        }),\n        filter(m => !!m),\n        map(m => this.toMeasurementValue(m, datapoint))\n      );\n  }\n\n  private getHistoryMeasurement$(\n    datapoint: KPIDetails,\n    context: GlobalContextState\n  ): Observable<MeasurementValue> {\n    return this.measurementRealtime\n      .lastMeasurement$(\n        datapoint.fragment,\n        datapoint.series,\n        datapoint.__target,\n        1,\n        true,\n        context.dateTimeContext?.dateFrom,\n        context.dateTimeContext?.dateTo\n      )\n      .pipe(\n        tap(m => {\n          if (!m) this.noDataInitiallyInDB.set(true);\n        }),\n        filter(m => !!m),\n        map(m => this.toMeasurementValue(m, datapoint))\n      );\n  }\n\n  private toMeasurementValue(m: IMeasurement, dp: KPIDetails): MeasurementValue {\n    return {\n      unit: m[dp.fragment][dp.series].unit,\n      value: m[dp.fragment][dp.series].value,\n      date: m.time as string\n    };\n  }\n\n  private getColorClass$(\n    measurement$: Observable<MeasurementValue>,\n    datapoint: KPIDetails\n  ): Observable<ColorClass> {\n    return measurement$.pipe(\n      map(m => {\n        if (this.inRange(datapoint, m.value, 'redRangeMin', 'redRangeMax')) {\n          return ColorClass.danger;\n        }\n        if (this.inRange(datapoint, m.value, 'yellowRangeMin', 'yellowRangeMax')) {\n          return ColorClass.warning;\n        }\n        return ColorClass.unknown;\n      }),\n      startWith(ColorClass.unknown),\n      distinctUntilChanged()\n    );\n  }\n\n  private getTrend$(lastTwo$: Observable<MeasurementValue[]>): Observable<string> {\n    return lastTwo$.pipe(\n      map(([prev, curr]) => {\n        if (prev.value < curr.value) return '45deg';\n        if (prev.value > curr.value) return '135deg';\n        return '90deg';\n      }),\n      startWith('90deg'),\n      distinctUntilChanged()\n    );\n  }\n\n  private inRange(dp: KPIDetails, value: number, minKey: string, maxKey: string): boolean {\n    return (\n      typeof dp[minKey] === 'number' &&\n      typeof dp[maxKey] === 'number' &&\n      value >= dp[minKey] &&\n      value < dp[maxKey]\n    );\n  }\n\n  private assignContextFromContextDashboard(datapoint: KPIDetails): void {\n    if (!this.dashboard?.isDeviceTypeDashboard) {\n      return;\n    }\n    const context = this.dashboard?.context;\n    if (context?.id) {\n      datapoint.__target = { name: context.name, id: context.id };\n    }\n  }\n}\n","@if (displayMode() === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD && getDashboardChild()) {\n  <c8y-global-context-connector\n    [controls]=\"widgetControls()\"\n    [config]=\"contextConfig()\"\n    [dashboardChild]=\"getDashboardChild()\"\n    [linked]=\"isLinkedToGlobal()\"\n    [emitRefresh]=\"false\"\n    (configChange)=\"onContextChange($event)\"\n    (refresh)=\"onRefresh()\"\n  ></c8y-global-context-connector>\n} @else if (displayMode() !== GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {\n  <c8y-local-controls\n    [controls]=\"widgetControls()\"\n    [displayMode]=\"displayMode()\"\n    [config]=\"contextConfig()\"\n    [emitRefresh]=\"false\"\n    (configChange)=\"onContextChange($event)\"\n    (refresh)=\"onRefresh()\"\n  ></c8y-local-controls>\n}\n\n@if (state$ | async; as lastState) {\n  <div class=\"kpi-widget__container d-flex d-col flex-grow fit-w a-i-center j-c-center\">\n    <div class=\"d-flex a-i-center j-c-center fit-w\">\n      @if (config.icon && config.showIcon) {\n        <div\n          class=\"m-r-16 flex-no-shrink text-muted\"\n          [ngClass]=\"lastState.colorClass\"\n        >\n          <i\n            class=\"icon-32\"\n            [c8yIcon]=\"config.icon\"\n          ></i>\n        </div>\n      }\n      <div class=\"text-truncate\">\n        <span\n          class=\"text-truncate text-medium\"\n          [ngStyle]=\"{ 'font-size': (config.fontSize || '36') + 'px' }\"\n          title=\"{{\n            lastState.colorClass === 'text-danger'\n              ? ('Within red range:' | translate)\n              : lastState.colorClass === 'text-warning'\n                ? ('Within yellow range:' | translate)\n                : ''\n          }} {{\n            lastState.latestMeasurement.value\n              | number\n                : '1.' +\n                    (config.numberOfDecimalPlaces || '0') +\n                    '-' +\n                    (config.numberOfDecimalPlaces || '0')\n          }} {{ lastState.unit || '' }}\"\n          [ngClass]=\"lastState.colorClass\"\n        >\n          {{\n            lastState.latestMeasurement.value\n              | number\n                : '1.' +\n                    (config.numberOfDecimalPlaces || '0') +\n                    '-' +\n                    (config.numberOfDecimalPlaces || '0')\n          }}\n          <small class=\"text-regular\">{{ lastState.unit || '' }}</small>\n        </span>\n      </div>\n      @if (config?.showTrend && lastState.previousValue; as previousValue) {\n        <div class=\"dot dot-info dot-30 m-l-16 flex-no-shrink\">\n          <i\n            class=\"icon-20\"\n            c8yIcon=\"arrow-dotted-up\"\n            [ngStyle]=\"{ transform: 'rotate(' + lastState.trend + ')' }\"\n            [title]=\"\n              ('Previous value' | translate) +\n              ': ' +\n              (previousValue.value\n                | number\n                  : '1.' +\n                      (config.numberOfDecimalPlaces || '0') +\n                      '-' +\n                      (config.numberOfDecimalPlaces || '0')) +\n              ' (' +\n              (previousValue.date | c8yDate: 'medium') +\n              ')'\n            \"\n          ></i>\n        </div>\n      }\n    </div>\n    <div class=\"d-flex d-col a-i-center\">\n      @if (config?.showTimestamp) {\n        <p class=\"icon-flex text-center text-muted small m-b-0\">\n          <i c8yIcon=\"calendar\"></i>\n          {{ lastState.latestMeasurement.date | c8yDate: 'medium' }}\n        </p>\n      }\n      @if (isHistoryMode()) {\n        <p class=\"text-center text-muted small m-b-0\">\n          <span translate>Last measurement in selected time range</span>\n        </p>\n      }\n    </div>\n  </div>\n} @else {\n  <div class=\"d-flex flex-grow fit-w j-c-center a-i-center\">\n    @let noDataSubtitleLive = 'Waiting for measurements to be created.' | translate;\n    @let noDataSubtitleHistory = 'No data available for the selected time period.' | translate;\n    @if (noDataInitiallyInDB()) {\n      <c8y-ui-empty-state\n        [icon]=\"'line-chart'\"\n        [title]=\"'No measurement to display.' | translate\"\n        [subtitle]=\"isHistoryMode() ? noDataSubtitleHistory : noDataSubtitleLive\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    } @else {\n      <c8y-loading></c8y-loading>\n    }\n  </div>\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  inject,\n  Input,\n  OnChanges,\n  OnInit,\n  SimpleChanges,\n  TemplateRef,\n  ViewChild\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n  AbstractControl,\n  ControlContainer,\n  FormBuilder,\n  NgForm,\n  ReactiveFormsModule,\n  ValidationErrors,\n  ValidatorFn,\n  Validators\n} from '@angular/forms';\nimport {\n  C8yTranslateDirective,\n  C8yTranslatePipe,\n  C8yValidators,\n  EmptyStateComponent,\n  FormGroupComponent,\n  GuideDocsComponent,\n  GuideHrefDirective,\n  MessagesComponent,\n  OnBeforeSave\n} from '@c8y/ngx-components';\nimport { WidgetConfigComponent, WidgetConfigService } from '@c8y/ngx-components/context-dashboard';\nimport {\n  DatapointAttributesFormConfig,\n  DatapointSelectorModalOptions,\n  DatapointSelectorModule,\n  KPIDetails\n} from '@c8y/ngx-components/datapoint-selector';\nimport { IconSelectorModule } from '@c8y/ngx-components/icon-selector';\nimport { PopoverModule } from 'ngx-bootstrap/popover';\nimport { Observable } from 'rxjs';\nimport { debounceTime, filter } from 'rxjs/operators';\nimport { KpiWidgetViewComponent } from '../kpi-widget-view/kpi-widget-view.component';\nimport { KpiWidgetConfig } from '../kpi-widget.model';\n\nexport function exactlyASingleDatapointActive(): ValidatorFn {\n  return (control: AbstractControl): ValidationErrors | null => {\n    const datapoints: KPIDetails[] = control.value;\n    if (!datapoints?.length) {\n      return null;\n    }\n    return datapoints.filter(dp => dp.__active).length === 1\n      ? null\n      : { exactlyOneDatapointNeedsToBeActive: true };\n  };\n}\n\n@Component({\n  selector: 'c8y-kpi-widget-config',\n  templateUrl: './kpi-widget-config.component.html',\n  standalone: true,\n  imports: [\n    ReactiveFormsModule,\n    C8yTranslatePipe,\n    C8yTranslateDirective,\n    FormGroupComponent,\n    MessagesComponent,\n    EmptyStateComponent,\n    GuideDocsComponent,\n    GuideHrefDirective,\n    DatapointSelectorModule,\n    IconSelectorModule,\n    PopoverModule,\n    KpiWidgetViewComponent\n  ],\n  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class KpiWidgetConfigComponent implements OnChanges, OnInit, OnBeforeSave {\n  @ViewChild('kpiPreview')\n  set previewMapSet(template: TemplateRef<unknown>) {\n    this.widgetConfigService.setPreview(template || null);\n  }\n\n  @Input() config: KpiWidgetConfig;\n\n  previewActiveDatapoint: KPIDetails;\n  datapointSelectionConfig: Partial<DatapointSelectorModalOptions> = {};\n  defaultFormOptions: Partial<DatapointAttributesFormConfig> = {\n    showRedRange: true,\n    showYellowRange: true\n  };\n  formGroup: ReturnType<KpiWidgetConfigComponent['createForm']>;\n  previewConfig: KpiWidgetConfig;\n\n  private destroyRef = inject(DestroyRef);\n  private limits = {\n    fontSizeMax: 72,\n    fontSizeMin: 18,\n    numberOfDecimalPlacesMax: 10,\n    numberOfDecimalPlacesMin: 0\n  } as const;\n\n  constructor(\n    private formBuilder: FormBuilder,\n    private form: NgForm,\n    private widgetConfig: WidgetConfigComponent,\n    private widgetConfigService: WidgetConfigService\n  ) {}\n\n  onBeforeSave(config?: KpiWidgetConfig): boolean | Promise<boolean> | Observable<boolean> {\n    if (this.formGroup.valid) {\n      Object.assign(config, this.formGroup.value);\n      return true;\n    }\n    return false;\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (this.formGroup && changes.config) {\n      this.formGroup.controls.datapoints.patchValue(this.config.datapoints || []);\n    }\n  }\n\n  ngOnInit(): void {\n    if (this.widgetConfig.context?.id) {\n      this.datapointSelectionConfig.contextAsset = this.widgetConfig.context;\n    }\n\n    this.previewConfig = { ...this.config };\n    this.initForm();\n\n    if (this.config?.datapoints) {\n      this.formGroup.patchValue({ datapoints: this.config.datapoints });\n      this.previewActiveDatapoint = this.config.datapoints.find(dp => dp.__active);\n    }\n\n    this.widgetConfigService.currentConfig$\n      .pipe(\n        filter(c => !!c),\n        takeUntilDestroyed(this.destroyRef)\n      )\n      .subscribe(c => {\n        this.previewConfig = { ...this.previewConfig, ...c, ...this.formGroup.value };\n      });\n  }\n\n  private initForm(): void {\n    this.formGroup = this.createForm();\n    this.form.form.addControl('config', this.formGroup);\n    this.formGroup.patchValue(this.config);\n\n    this.formGroup.valueChanges\n      .pipe(debounceTime(100), takeUntilDestroyed(this.destroyRef))\n      .subscribe(formValue => {\n        if (formValue.datapoints) {\n          this.previewActiveDatapoint = formValue.datapoints.find(dp => dp.__active);\n        }\n\n        if (this.formGroup.valid) {\n          this.previewConfig = { ...this.config, ...this.applyLimitsToPreview(formValue) };\n        }\n\n        Object.assign(this.config, formValue);\n      });\n  }\n\n  private applyLimitsToPreview(formValue: Partial<KpiWidgetConfig>): Partial<KpiWidgetConfig> {\n    const result = { ...formValue };\n\n    if (result.numberOfDecimalPlaces !== undefined) {\n      result.numberOfDecimalPlaces = this.clamp(\n        result.numberOfDecimalPlaces,\n        this.limits.numberOfDecimalPlacesMin,\n        this.limits.numberOfDecimalPlacesMax\n      );\n    }\n\n    if (result.fontSize !== undefined) {\n      result.fontSize = this.clamp(\n        result.fontSize,\n        this.limits.fontSizeMin,\n        this.limits.fontSizeMax\n      );\n    }\n\n    return result;\n  }\n\n  private clamp(value: number, min: number, max: number): number {\n    return Math.max(min, Math.min(max, value));\n  }\n\n  private createForm() {\n    return this.formBuilder.group({\n      numberOfDecimalPlaces: [\n        2,\n        [\n          Validators.required,\n          Validators.min(this.limits.numberOfDecimalPlacesMin),\n          Validators.max(this.limits.numberOfDecimalPlacesMax),\n          C8yValidators.integerValidator()\n        ]\n      ],\n      showTimestamp: [true, []],\n      showTrend: [true, []],\n      showIcon: [true, []],\n      icon: ['water', [Validators.required, Validators.minLength(1)]],\n      fontSize: [\n        36,\n        [\n          Validators.required,\n          Validators.min(this.limits.fontSizeMin),\n          Validators.max(this.limits.fontSizeMax)\n        ]\n      ],\n      datapoints: this.formBuilder.control(new Array<KPIDetails>(), [\n        Validators.required,\n        Validators.minLength(1),\n        exactlyASingleDatapointActive()\n      ])\n    });\n  }\n}\n","<form [formGroup]=\"formGroup\">\n  <fieldset class=\"c8y-fieldset\">\n    <legend>{{ 'Layout' | translate }}</legend>\n    <div class=\"d-flex a-i-center gap-8\">\n      <div class=\"form-group form-group-sm m-b-24\">\n        <label translate>Icon</label>\n        <c8y-icon-selector-wrapper\n          [iconSize]=\"16\"\n          name=\"icon\"\n          formControlName=\"icon\"\n        ></c8y-icon-selector-wrapper>\n      </div>\n      <c8y-form-group class=\"form-group-sm m-b-24 flex-grow\">\n        <label\n          [title]=\"'Font size of measurement value (px)' | translate\"\n          translate\n        >\n          Font size of measurement value (px)\n        </label>\n        <input\n          class=\"form-control\"\n          name=\"fontSize\"\n          type=\"number\"\n          formControlName=\"fontSize\"\n          [placeholder]=\"'e.g. {{ example }}' | translate: { example: 36 }\"\n        />\n        <c8y-messages [show]=\"formGroup.controls?.fontSize?.errors\"></c8y-messages>\n      </c8y-form-group>\n    </div>\n  </fieldset>\n\n  <fieldset class=\"c8y-fieldset\">\n    <legend>{{ 'Display' | translate }}</legend>\n    <div class=\"d-flex gap-16 flex-wrap p-t-4 p-b-8 m-b-4\">\n      <c8y-form-group class=\"m-b-0\">\n        <label\n          class=\"c8y-checkbox\"\n          [title]=\"'Show timestamp' | translate\"\n        >\n          <input\n            name=\"showTimestamp\"\n            type=\"checkbox\"\n            formControlName=\"showTimestamp\"\n          />\n          <span></span>\n          <span translate>Show timestamp</span>\n        </label>\n      </c8y-form-group>\n\n      <c8y-form-group class=\"m-b-0\">\n        <label\n          class=\"c8y-checkbox\"\n          [title]=\"'Show icon' | translate\"\n        >\n          <input\n            name=\"showIcon\"\n            type=\"checkbox\"\n            formControlName=\"showIcon\"\n          />\n          <span></span>\n          <span translate>Show icon</span>\n        </label>\n      </c8y-form-group>\n\n      <c8y-form-group class=\"m-b-0\">\n        <label\n          class=\"c8y-checkbox\"\n          [title]=\"'Show trend icon' | translate\"\n        >\n          <input\n            name=\"showTrend\"\n            type=\"checkbox\"\n            formControlName=\"showTrend\"\n          />\n          <span></span>\n          <span translate>Show trend icon</span>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{\n              'Indicates the trend between the last two measurement values.' | translate\n            }}\"\n            placement=\"top\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n          ></button>\n        </label>\n      </c8y-form-group>\n    </div>\n  </fieldset>\n\n  <fieldset class=\"c8y-fieldset\">\n    <legend translate>Number of decimal places</legend>\n    <c8y-form-group class=\"form-group-sm p-t-4\">\n      <input\n        class=\"form-control\"\n        name=\"numberOfDecimalPlaces\"\n        type=\"number\"\n        formControlName=\"numberOfDecimalPlaces\"\n        [placeholder]=\"'e.g. {{ example }}' | translate: { example: 1 }\"\n      />\n      <c8y-messages [show]=\"formGroup.controls?.numberOfDecimalPlaces?.errors\"></c8y-messages>\n    </c8y-form-group>\n  </fieldset>\n</form>\n\n<ng-template #kpiPreview>\n  @if (formGroup && formGroup.value) {\n    @if (formGroup.value.datapoints?.length > 0 && previewActiveDatapoint) {\n      <div style=\"height: 300px\">\n        <c8y-kpi-widget-view [config]=\"previewConfig\"></c8y-kpi-widget-view>\n      </div>\n    } @else {\n      <div class=\"col-md-6 d-col a-i-start j-c-center\">\n        <c8y-ui-empty-state\n          [icon]=\"'c8y-data-points'\"\n          [title]=\"'No data points selected' | translate\"\n          [subtitle]=\"'Select data point to render content' | translate\"\n          [horizontal]=\"false\"\n          data-cy=\"kpi-widget--empty-state-no-data-point-selected\"\n        >\n          <p c8y-guide-docs>\n            <small\n              translate\n              ngNonBindable\n            >\n              Find out more in the\n              <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#kpi\">user documentation</a>.\n            </small>\n          </p>\n        </c8y-ui-empty-state>\n      </div>\n    }\n  }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["mergeObj","merge$"],"mappings":"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"}

package/fesm2022/c8y-ngx-components-widgets-implementations-linear-gauge.mjs

@@ -118,10 +118,10 @@ class LinearGaugeWidgetViewComponent {
             text: msg
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LinearGaugeWidgetViewComponent, deps: [{ token: i3.MeasurementRealtimeService }, { token: i2.ContextDashboardComponent, optional: true }, { token: i3.DynamicComponentComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: LinearGaugeWidgetViewComponent, isStandalone: true, selector: "c8y-linear-gauge-widget-view", inputs: { config: "config" }, providers: [MeasurementRealtimeService], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"p-l-16 p-r-16 p-b-16 fit-h d-flex d-col flex-center\"\n  *ngIf=\"rangeDisplayConfig$ | async as rangeDisplayConfig\"\n  [ngClass]=\"{\n    'p-t-40 j-c-center': rangeDisplayConfig.orientation === 'horizontal',\n  }\"\n>\n  <c8y-range-display [config]=\"rangeDisplayConfig\" [ngClass]=\"{'flex-grow': rangeDisplayConfig.orientation == 'vertical'}\"></c8y-range-display>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RangeDisplayModule }, { kind: "component", type: i3.RangeDisplayComponent, selector: "c8y-range-display", inputs: ["config", "display"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LinearGaugeWidgetViewComponent, deps: [{ token: i3.MeasurementRealtimeService }, { token: i2.ContextDashboardComponent, optional: true }, { token: i3.DynamicComponentComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: LinearGaugeWidgetViewComponent, isStandalone: true, selector: "c8y-linear-gauge-widget-view", inputs: { config: "config" }, providers: [MeasurementRealtimeService], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"p-l-16 p-r-16 p-b-16 fit-h d-flex d-col flex-center\"\n  *ngIf=\"rangeDisplayConfig$ | async as rangeDisplayConfig\"\n  [ngClass]=\"{\n    'p-t-40 j-c-center': rangeDisplayConfig.orientation === 'horizontal',\n  }\"\n>\n  <c8y-range-display [config]=\"rangeDisplayConfig\" [ngClass]=\"{'flex-grow': rangeDisplayConfig.orientation == 'vertical'}\"></c8y-range-display>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RangeDisplayModule }, { kind: "component", type: i3.RangeDisplayComponent, selector: "c8y-range-display", inputs: ["config", "display"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LinearGaugeWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LinearGaugeWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-linear-gauge-widget-view', providers: [MeasurementRealtimeService], standalone: true, imports: [NgIf, NgClass, AsyncPipe, RangeDisplayModule], template: "<div\n  class=\"p-l-16 p-r-16 p-b-16 fit-h d-flex d-col flex-center\"\n  *ngIf=\"rangeDisplayConfig$ | async as rangeDisplayConfig\"\n  [ngClass]=\"{\n    'p-t-40 j-c-center': rangeDisplayConfig.orientation === 'horizontal',\n  }\"\n>\n  <c8y-range-display [config]=\"rangeDisplayConfig\" [ngClass]=\"{'flex-grow': rangeDisplayConfig.orientation == 'vertical'}\"></c8y-range-display>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i3.MeasurementRealtimeService }, { type: i2.ContextDashboardComponent, decorators: [{
@@ -216,10 +216,10 @@ class LinearGaugeWidgetConfigComponent {
             datapoints: this.formBuilder.control(new Array(), [Validators.required])
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LinearGaugeWidgetConfigComponent, deps: [{ token: i1.FormBuilder }, { token: i1.NgForm }, { token: i2.WidgetConfigComponent }, { token: i2.WidgetConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: LinearGaugeWidgetConfigComponent, isStandalone: true, selector: "c8y-linear-gauge-widget-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["linearGaugePreview"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form\n  class=\"no-card-context\"\n  [formGroup]=\"formGroup\"\n>\n  <fieldset class=\"c8y-fieldset\">\n    <legend>{{ 'Decimal places' | translate }}</legend>\n    <c8y-form-group class=\"form-group-sm m-b-16\">\n      <input\n        class=\"form-control\"\n        name=\"fractionSize\"\n        type=\"number\"\n        formControlName=\"fractionSize\"\n        step=\"1\"\n      />\n      <c8y-messages [show]=\"formGroup.controls.fractionSize.errors\"></c8y-messages>\n    </c8y-form-group>\n  </fieldset>\n</form>\n\n<ng-template #linearGaugePreview>\n  @if (formGroup && formGroup.value) {\n    @if (formGroup.value.datapoints?.length > 0 && previewActiveDatapoint) {\n      <div style=\"height: 300px\">\n        @if (previewConfig) {\n          <c8y-linear-gauge-widget-view [config]=\"previewConfig\"></c8y-linear-gauge-widget-view>\n        }\n      </div>\n    } @else {\n      <div class=\"col-md-6 d-col a-i-start j-c-center\">\n        <c8y-ui-empty-state\n          [icon]=\"'c8y-data-points'\"\n          [title]=\"'No data points selected' | translate\"\n          [subtitle]=\"'Select data point to render content' | translate\"\n          [horizontal]=\"false\"\n          data-cy=\"linear-gauge--empty-state-no-data-point-selected\"\n        >\n          <p c8y-guide-docs>\n            <small\n              translate\n              ngNonBindable\n            >\n              Find out more in the\n              <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#linear-gauge\">\n                user documentation</a\n              >.\n            </small>\n          </p>\n        </c8y-ui-empty-state>\n      </div>\n    }\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: DatapointSelectorModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i3.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i3.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: i3.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i3.GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: i3.GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "component", type: LinearGaugeWidgetViewComponent, selector: "c8y-linear-gauge-widget-view", inputs: ["config"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LinearGaugeWidgetConfigComponent, deps: [{ token: i1.FormBuilder }, { token: i1.NgForm }, { token: i2.WidgetConfigComponent }, { token: i2.WidgetConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: LinearGaugeWidgetConfigComponent, isStandalone: true, selector: "c8y-linear-gauge-widget-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["linearGaugePreview"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form\n  class=\"no-card-context\"\n  [formGroup]=\"formGroup\"\n>\n  <fieldset class=\"c8y-fieldset\">\n    <legend>{{ 'Decimal places' | translate }}</legend>\n    <c8y-form-group class=\"form-group-sm m-b-16\">\n      <input\n        class=\"form-control\"\n        name=\"fractionSize\"\n        type=\"number\"\n        formControlName=\"fractionSize\"\n        step=\"1\"\n      />\n      <c8y-messages [show]=\"formGroup.controls.fractionSize.errors\"></c8y-messages>\n    </c8y-form-group>\n  </fieldset>\n</form>\n\n<ng-template #linearGaugePreview>\n  @if (formGroup && formGroup.value) {\n    @if (formGroup.value.datapoints?.length > 0 && previewActiveDatapoint) {\n      <div style=\"height: 300px\">\n        @if (previewConfig) {\n          <c8y-linear-gauge-widget-view [config]=\"previewConfig\"></c8y-linear-gauge-widget-view>\n        }\n      </div>\n    } @else {\n      <div class=\"col-md-6 d-col a-i-start j-c-center\">\n        <c8y-ui-empty-state\n          [icon]=\"'c8y-data-points'\"\n          [title]=\"'No data points selected' | translate\"\n          [subtitle]=\"'Select data point to render content' | translate\"\n          [horizontal]=\"false\"\n          data-cy=\"linear-gauge--empty-state-no-data-point-selected\"\n        >\n          <p c8y-guide-docs>\n            <small\n              translate\n              ngNonBindable\n            >\n              Find out more in the\n              <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#linear-gauge\">\n                user documentation</a\n              >.\n            </small>\n          </p>\n        </c8y-ui-empty-state>\n      </div>\n    }\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: DatapointSelectorModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i3.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i3.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: i3.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i3.GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: i3.GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "component", type: LinearGaugeWidgetViewComponent, selector: "c8y-linear-gauge-widget-view", inputs: ["config"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LinearGaugeWidgetConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LinearGaugeWidgetConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-linear-gauge-widget-config', standalone: true, imports: [
                         DatapointSelectorModule,