@c8y/ngx-components 1023.76.0 → 1023.77.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.18", 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.18", ngImport: i0, type: InfoGaugeCurrentMeasurementPipe, isStandalone: true, name: "infoGaugeCurrentMeasurement" }); }
+    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" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: InfoGaugeCurrentMeasurementPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", 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.18", ngImport: i0, type: RadialGaugeService, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: RadialGaugeService, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: RadialGaugeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", 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.18", ngImport: i0, type: RadialGaugeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", 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.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: [
             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.18", ngImport: i0, type: RadialGaugeViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", 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.18", 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.18", 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.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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: InfoGaugeWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", 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.18", ngImport: i0, type: PresetPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", 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.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: [
             {
                 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.18", ngImport: i0, type: PresetPreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", 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.18", 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.18", 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\n  class=\"fit-h\"\n  [formGroup]=\"formGroup\"\n>\n  @if (isInfoGauge) {\n    <div class=\"m-l-16 m-r-16\">\n      <c8y-form-group class=\"p-t-8\">\n        <label translate>Decimal places</label>\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      @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    </div>\n  } @else {\n    <c8y-form-group class=\"p-t-8 p-r-16 p-l-16\">\n      <label translate>Decimal places</label>\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\n    <div class=\"form-group p-r-16 p-l-16 m-b-0\">\n      <legend>\n        {{ 'Presets' | translate }}\n      </legend>\n      <c8y-preset-preview\n        formControlName=\"gaugePresetId\"\n        [ALL_GAUGE_PRESETS]=\"ALL_GAUGE_PRESETS\"\n        (onPresetChange)=\"onRadioPresetChange($event)\"\n      ></c8y-preset-preview>\n    </div>\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: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { 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.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\n  class=\"fit-h\"\n  [formGroup]=\"formGroup\"\n>\n  @if (isInfoGauge) {\n    <div class=\"m-l-16 m-r-16\">\n      <c8y-form-group class=\"p-t-8\">\n        <label translate>Decimal places</label>\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      @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    </div>\n  } @else {\n    <c8y-form-group class=\"p-t-8 p-r-16 p-l-16\">\n      <label translate>Decimal places</label>\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\n    <div class=\"form-group p-r-16 p-l-16 m-b-0\">\n      <legend>\n        {{ 'Presets' | translate }}\n      </legend>\n      <c8y-preset-preview\n        formControlName=\"gaugePresetId\"\n        [ALL_GAUGE_PRESETS]=\"ALL_GAUGE_PRESETS\"\n        (onPresetChange)=\"onRadioPresetChange($event)\"\n      ></c8y-preset-preview>\n    </div>\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: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { 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.18", ngImport: i0, type: InfoGaugeWidgetConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", 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

@@ -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.18", ngImport: i0, type: KpiWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: KpiWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", 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.18", 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.18", 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-16\">\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-16 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\n          [show]=\"formGroup.controls?.fontSize?.touched && formGroup?.controls?.fontSize?.errors\"\n        ></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\">\n      <c8y-form-group class=\"m-b-8\">\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-8\">\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-8\">\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=\"right\"\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 m-b-20\">\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\n        [show]=\"\n          formGroup.controls?.numberOfDecimalPlaces?.touched &&\n          formGroup?.controls?.numberOfDecimalPlaces?.errors\n        \"\n      ></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.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-16\">\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-16 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\n          [show]=\"formGroup.controls?.fontSize?.touched && formGroup?.controls?.fontSize?.errors\"\n        ></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\">\n      <c8y-form-group class=\"m-b-8\">\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-8\">\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-8\">\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=\"right\"\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 m-b-20\">\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\n        [show]=\"\n          formGroup.controls?.numberOfDecimalPlaces?.touched &&\n          formGroup?.controls?.numberOfDecimalPlaces?.errors\n        \"\n      ></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.18", ngImport: i0, type: KpiWidgetConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: KpiWidgetConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-kpi-widget-config', standalone: true, imports: [
                         ReactiveFormsModule,

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.18", 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.18", 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.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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LinearGaugeWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", 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.18", 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.18", 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 translate>Decimal places</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.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 translate>Decimal places</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.18", ngImport: i0, type: LinearGaugeWidgetConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LinearGaugeWidgetConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-linear-gauge-widget-config', standalone: true, imports: [
                         DatapointSelectorModule,

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

@@ -45,10 +45,10 @@ class MapEventInfoComponent {
         this.event = data[0];
         this.loading = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapEventInfoComponent, deps: [{ token: i1.EventService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MapEventInfoComponent, isStandalone: true, selector: "c8y-map-event-info", inputs: { asset: "asset" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"text-muted text-10 p-t-4 p-b-4\">\n  <span translate>Last position update:</span>\n  <br />\n  <c8y-loading *ngIf=\"loading\"></c8y-loading>\n  <ng-container *ngIf=\"!loading\">\n    <i *ngIf=\"!event\" translate>No information found</i>\n    <ng-container *ngIf=\"event\">\n      <i>{{ event.time | c8yDate }}</i>\n      <ng-content></ng-content>\n    </ng-container>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapEventInfoComponent, deps: [{ token: i1.EventService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MapEventInfoComponent, isStandalone: true, selector: "c8y-map-event-info", inputs: { asset: "asset" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"text-muted text-10 p-t-4 p-b-4\">\n  <span translate>Last position update:</span>\n  <br />\n  <c8y-loading *ngIf=\"loading\"></c8y-loading>\n  <ng-container *ngIf=\"!loading\">\n    <i *ngIf=\"!event\" translate>No information found</i>\n    <ng-container *ngIf=\"event\">\n      <i>{{ event.time | c8yDate }}</i>\n      <ng-content></ng-content>\n    </ng-container>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapEventInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapEventInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-map-event-info', standalone: true, imports: [CommonModule, C8yTranslateDirective, DatePipe, LoadingComponent], template: "<div class=\"text-muted text-10 p-t-4 p-b-4\">\n  <span translate>Last position update:</span>\n  <br />\n  <c8y-loading *ngIf=\"loading\"></c8y-loading>\n  <ng-container *ngIf=\"!loading\">\n    <i *ngIf=\"!event\" translate>No information found</i>\n    <ng-container *ngIf=\"event\">\n      <i>{{ event.time | c8yDate }}</i>\n      <ng-content></ng-content>\n    </ng-container>\n  </ng-container>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.EventService }], propDecorators: { asset: [{
@@ -242,10 +242,10 @@ class MapWidgetConfigComponent {
         });
         this.previewMap.addMarkerToMap(this.centerIcon);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapWidgetConfigComponent, deps: [{ token: i4.MapService }, { token: i2$1.AlertService }, { token: i3.TranslateService }, { token: MAP_DEFAULT_CONFIG }, { token: i4$1.WidgetConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: MapWidgetConfigComponent, isStandalone: true, selector: "c8y-map-widget-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "previewMap", first: true, predicate: MapComponent, descendants: true }, { propertyName: "previewMapSet", first: true, predicate: ["previewMap"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (formConfig) {\n  <fieldset class=\"c8y-fieldset\">\n    <legend>{{ 'Map' | translate }}</legend>\n    <div class=\"row tight-grid\">\n      <div class=\"col-xs-3\">\n        <c8y-form-group class=\"m-b-16 text-center form-group-sm\">\n          <label translate>Marker icon</label>\n          <c8y-icon-selector-wrapper\n            [canRemoveIcon]=\"true\"\n            [iconSize]=\"16\"\n            [selectedIcon]=\"formConfig.icon\"\n            (onSelect)=\"selectIcon($event)\"\n          ></c8y-icon-selector-wrapper>\n        </c8y-form-group>\n      </div>\n      <div [ngClass]=\"{ 'col-xs-6': !isPositionedDevice(), 'col-xs-9': isPositionedDevice() }\">\n        <div class=\"form-group form-group-sm\">\n          <label translate>Zoom level</label>\n          <c8y-range\n            class=\"label-bottom\"\n            name=\"zoomLevel\"\n            #range\n            [(ngModel)]=\"formConfig.zoomLevel\"\n            (change)=\"zoomLevelChanged()\"\n          >\n            <input\n              type=\"range\"\n              min=\"0\"\n              max=\"18\"\n              step=\"1\"\n              [disabled]=\"!isPositionedDevice() && formConfig.autoFitToBounds\"\n            />\n          </c8y-range>\n        </div>\n      </div>\n      @if (!isPositionedDevice()) {\n        <div class=\"col-xs-3\">\n          <c8y-form-group class=\"m-b-16 text-center form-group-sm\">\n            <label translate>Fit to bounds</label>\n            <div class=\"m-t-4 d-flex j-c-center\">\n              <label class=\"c8y-switch c8y-switch--inline\">\n                <input\n                  name=\"autoFitToBounds\"\n                  type=\"checkbox\"\n                  [(ngModel)]=\"formConfig.autoFitToBounds\"\n                  (ngModelChange)=\"fitToBound()\"\n                />\n                <span></span>\n              </label>\n              <button\n                class=\"btn-help\"\n                aria-label=\"Help content\"\n                [popover]=\"\n                  'If enabled, the zoom level and center bound is always adjusted to fit all assets within the map view.'\n                    | translate\n                \"\n                placement=\"top\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </div>\n          </c8y-form-group>\n        </div>\n      }\n    </div>\n    <c8y-form-group class=\"form-group-sm\">\n      <label translate>Center bound</label>\n      <div class=\"input-group input-group-sm\">\n        <input\n          class=\"form-control\"\n          placeholder=\"{{ 'lat.`latitude`' | translate }}\"\n          name=\"centerLat\"\n          type=\"number\"\n          required\n          [(ngModel)]=\"formConfig.center[0]\"\n          (change)=\"changeCenter()\"\n          (keydown.enter)=\"changeCenterOnEnterKey($event)\"\n          min=\"-90\"\n          max=\"90\"\n          step=\"0.1\"\n          [disabled]=\"!isPositionedDevice() && formConfig.autoFitToBounds\"\n        />\n        <input\n          class=\"form-control\"\n          placeholder=\"{{ 'lng.`longitude`' | translate }}\"\n          name=\"centerLng\"\n          type=\"number\"\n          required\n          min=\"-180\"\n          max=\"180\"\n          [(ngModel)]=\"formConfig.center[1]\"\n          (change)=\"changeCenter()\"\n          (keydown.enter)=\"changeCenterOnEnterKey($event)\"\n          min=\"-180\"\n          max=\"180\"\n          step=\"0.1\"\n          [disabled]=\"!isPositionedDevice() && formConfig.autoFitToBounds\"\n        />\n        <div class=\"input-group-btn\">\n          <button\n            class=\"btn btn-default\"\n            [attr.aria-label]=\"'Use your location' | translate\"\n            [tooltip]=\"'Use your location' | translate\"\n            placement=\"top\"\n            container=\"body\"\n            (click)=\"useOwnPosition()\"\n            [disabled]=\"!isPositionedDevice() && formConfig.autoFitToBounds\"\n          >\n            <i\n              class=\"icon-14\"\n              c8yIcon=\"location-arrow\"\n            ></i>\n          </button>\n        </div>\n        <div class=\"input-group-btn\">\n          @if (canAutoCenter()) {\n            <button\n              class=\"btn btn-default\"\n              [attr.aria-label]=\"'Use selected asset location' | translate\"\n              [tooltip]=\"'Use selected asset location' | translate\"\n              placement=\"top\"\n              container=\"body\"\n              (click)=\"centerToAsset()\"\n              [disabled]=\"!isPositionedDevice() && formConfig.autoFitToBounds\"\n            >\n              <i\n                class=\"icon-14\"\n                c8yIcon=\"location\"\n              ></i>\n            </button>\n          } @else {\n            <button\n              class=\"btn btn-default\"\n              [attr.aria-label]=\"'Fit to assets bounds' | translate\"\n              [tooltip]=\"'Fit to assets bounds' | translate\"\n              placement=\"top\"\n              container=\"body\"\n              (click)=\"fitToBounds()\"\n              [disabled]=\"!isPositionedDevice() && formConfig.autoFitToBounds\"\n            >\n              <i\n                class=\"icon-14\"\n                c8yIcon=\"waypoint-map\"\n              ></i>\n            </button>\n          }\n        </div>\n      </div>\n\n      @if (!formConfig.autoFitToBounds) {\n        <c8y-messages\n          [helpMessage]=\"'Drag the map to the desired position' | translate\"\n        ></c8y-messages>\n      }\n    </c8y-form-group>\n  </fieldset>\n\n  @if (isPositionedDevice()) {\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Follow' | translate }}</legend>\n      <div class=\"row tight-grid d-flex a-i-center\">\n        <div class=\"col-xs-12\">\n          <div class=\"form-group form-group-sm m-b-16\">\n            <label class=\"c8y-switch c8y-switch--inline\">\n              <input\n                name=\"follow\"\n                type=\"checkbox\"\n                [(ngModel)]=\"formConfig.follow\"\n              />\n              <span></span>\n              <span\n                class=\"text-12\"\n                translate\n              >\n                Follow selected\n              </span>\n            </label>\n          </div>\n        </div>\n      </div>\n    </fieldset>\n  }\n}\n\n<ng-template #previewMap>\n  <div style=\"width: 100%; height: 100%\">\n    @if (config.mapConfig) {\n      <c8y-map\n        [assets]=\"assets()\"\n        [config]=\"config.mapConfig\"\n        (onMove)=\"onPreviewMapMove($event)\"\n        (onZoomStart)=\"onPreviewZoomStart()\"\n        (onZoomEnd)=\"onPreviewZoomEnd($event)\"\n        (onInit)=\"previewMapInit($event)\"\n      ></c8y-map>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.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: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i6.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i2$1.MinValidationDirective, selector: "[min]", inputs: ["min"] }, { kind: "directive", type: i2$1.MaxValidationDirective, selector: "[max]", inputs: ["max"] }, { kind: "component", type: i2$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i2$1.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: i2$1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i2$1.RangeDirective, selector: "input[type=\"range\"]" }, { kind: "component", type: i2$1.RangeComponent, selector: "c8y-range", inputs: ["valueDisplayMode"] }, { kind: "ngmodule", type: IconSelectorModule }, { kind: "component", type: i7.IconSelectorWrapperComponent, selector: "c8y-icon-selector-wrapper", inputs: ["canRemoveIcon", "selectedIcon", "iconSize"], outputs: ["onSelect"] }, { kind: "ngmodule", type: MapModule }, { kind: "component", type: i4.MapComponent, selector: "c8y-map", inputs: ["config", "assets", "polyline$", "polylineOptions"], outputs: ["onRealtimeUpdate", "onMove", "onMoveEnd", "onZoomStart", "onZoomEnd", "onMap", "onInit"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapWidgetConfigComponent, deps: [{ token: i4.MapService }, { token: i2$1.AlertService }, { token: i3.TranslateService }, { token: MAP_DEFAULT_CONFIG }, { token: i4$1.WidgetConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: MapWidgetConfigComponent, isStandalone: true, selector: "c8y-map-widget-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "previewMap", first: true, predicate: MapComponent, descendants: true }, { propertyName: "previewMapSet", first: true, predicate: ["previewMap"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (formConfig) {\n  <fieldset class=\"c8y-fieldset\">\n    <legend>{{ 'Map' | translate }}</legend>\n    <div class=\"row tight-grid\">\n      <div class=\"col-xs-3\">\n        <c8y-form-group class=\"m-b-16 text-center form-group-sm\">\n          <label translate>Marker icon</label>\n          <c8y-icon-selector-wrapper\n            [canRemoveIcon]=\"true\"\n            [iconSize]=\"16\"\n            [selectedIcon]=\"formConfig.icon\"\n            (onSelect)=\"selectIcon($event)\"\n          ></c8y-icon-selector-wrapper>\n        </c8y-form-group>\n      </div>\n      <div [ngClass]=\"{ 'col-xs-6': !isPositionedDevice(), 'col-xs-9': isPositionedDevice() }\">\n        <div class=\"form-group form-group-sm\">\n          <label translate>Zoom level</label>\n          <c8y-range\n            class=\"label-bottom\"\n            name=\"zoomLevel\"\n            #range\n            [(ngModel)]=\"formConfig.zoomLevel\"\n            (change)=\"zoomLevelChanged()\"\n          >\n            <input\n              type=\"range\"\n              min=\"0\"\n              max=\"18\"\n              step=\"1\"\n              [disabled]=\"!isPositionedDevice() && formConfig.autoFitToBounds\"\n            />\n          </c8y-range>\n        </div>\n      </div>\n      @if (!isPositionedDevice()) {\n        <div class=\"col-xs-3\">\n          <c8y-form-group class=\"m-b-16 text-center form-group-sm\">\n            <label translate>Fit to bounds</label>\n            <div class=\"m-t-4 d-flex j-c-center\">\n              <label class=\"c8y-switch c8y-switch--inline\">\n                <input\n                  name=\"autoFitToBounds\"\n                  type=\"checkbox\"\n                  [(ngModel)]=\"formConfig.autoFitToBounds\"\n                  (ngModelChange)=\"fitToBound()\"\n                />\n                <span></span>\n              </label>\n              <button\n                class=\"btn-help\"\n                aria-label=\"Help content\"\n                [popover]=\"\n                  'If enabled, the zoom level and center bound is always adjusted to fit all assets within the map view.'\n                    | translate\n                \"\n                placement=\"top\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </div>\n          </c8y-form-group>\n        </div>\n      }\n    </div>\n    <c8y-form-group class=\"form-group-sm\">\n      <label translate>Center bound</label>\n      <div class=\"input-group input-group-sm\">\n        <input\n          class=\"form-control\"\n          placeholder=\"{{ 'lat.`latitude`' | translate }}\"\n          name=\"centerLat\"\n          type=\"number\"\n          required\n          [(ngModel)]=\"formConfig.center[0]\"\n          (change)=\"changeCenter()\"\n          (keydown.enter)=\"changeCenterOnEnterKey($event)\"\n          min=\"-90\"\n          max=\"90\"\n          step=\"0.1\"\n          [disabled]=\"!isPositionedDevice() && formConfig.autoFitToBounds\"\n        />\n        <input\n          class=\"form-control\"\n          placeholder=\"{{ 'lng.`longitude`' | translate }}\"\n          name=\"centerLng\"\n          type=\"number\"\n          required\n          min=\"-180\"\n          max=\"180\"\n          [(ngModel)]=\"formConfig.center[1]\"\n          (change)=\"changeCenter()\"\n          (keydown.enter)=\"changeCenterOnEnterKey($event)\"\n          min=\"-180\"\n          max=\"180\"\n          step=\"0.1\"\n          [disabled]=\"!isPositionedDevice() && formConfig.autoFitToBounds\"\n        />\n        <div class=\"input-group-btn\">\n          <button\n            class=\"btn btn-default\"\n            [attr.aria-label]=\"'Use your location' | translate\"\n            [tooltip]=\"'Use your location' | translate\"\n            placement=\"top\"\n            container=\"body\"\n            (click)=\"useOwnPosition()\"\n            [disabled]=\"!isPositionedDevice() && formConfig.autoFitToBounds\"\n          >\n            <i\n              class=\"icon-14\"\n              c8yIcon=\"location-arrow\"\n            ></i>\n          </button>\n        </div>\n        <div class=\"input-group-btn\">\n          @if (canAutoCenter()) {\n            <button\n              class=\"btn btn-default\"\n              [attr.aria-label]=\"'Use selected asset location' | translate\"\n              [tooltip]=\"'Use selected asset location' | translate\"\n              placement=\"top\"\n              container=\"body\"\n              (click)=\"centerToAsset()\"\n              [disabled]=\"!isPositionedDevice() && formConfig.autoFitToBounds\"\n            >\n              <i\n                class=\"icon-14\"\n                c8yIcon=\"location\"\n              ></i>\n            </button>\n          } @else {\n            <button\n              class=\"btn btn-default\"\n              [attr.aria-label]=\"'Fit to assets bounds' | translate\"\n              [tooltip]=\"'Fit to assets bounds' | translate\"\n              placement=\"top\"\n              container=\"body\"\n              (click)=\"fitToBounds()\"\n              [disabled]=\"!isPositionedDevice() && formConfig.autoFitToBounds\"\n            >\n              <i\n                class=\"icon-14\"\n                c8yIcon=\"waypoint-map\"\n              ></i>\n            </button>\n          }\n        </div>\n      </div>\n\n      @if (!formConfig.autoFitToBounds) {\n        <c8y-messages\n          [helpMessage]=\"'Drag the map to the desired position' | translate\"\n        ></c8y-messages>\n      }\n    </c8y-form-group>\n  </fieldset>\n\n  @if (isPositionedDevice()) {\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Follow' | translate }}</legend>\n      <div class=\"row tight-grid d-flex a-i-center\">\n        <div class=\"col-xs-12\">\n          <div class=\"form-group form-group-sm m-b-16\">\n            <label class=\"c8y-switch c8y-switch--inline\">\n              <input\n                name=\"follow\"\n                type=\"checkbox\"\n                [(ngModel)]=\"formConfig.follow\"\n              />\n              <span></span>\n              <span\n                class=\"text-12\"\n                translate\n              >\n                Follow selected\n              </span>\n            </label>\n          </div>\n        </div>\n      </div>\n    </fieldset>\n  }\n}\n\n<ng-template #previewMap>\n  <div style=\"width: 100%; height: 100%\">\n    @if (config.mapConfig) {\n      <c8y-map\n        [assets]=\"assets()\"\n        [config]=\"config.mapConfig\"\n        (onMove)=\"onPreviewMapMove($event)\"\n        (onZoomStart)=\"onPreviewZoomStart()\"\n        (onZoomEnd)=\"onPreviewZoomEnd($event)\"\n        (onInit)=\"previewMapInit($event)\"\n      ></c8y-map>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.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: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i6.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i2$1.MinValidationDirective, selector: "[min]", inputs: ["min"] }, { kind: "directive", type: i2$1.MaxValidationDirective, selector: "[max]", inputs: ["max"] }, { kind: "component", type: i2$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i2$1.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: i2$1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i2$1.RangeDirective, selector: "input[type=\"range\"]" }, { kind: "component", type: i2$1.RangeComponent, selector: "c8y-range", inputs: ["valueDisplayMode"] }, { kind: "ngmodule", type: IconSelectorModule }, { kind: "component", type: i7.IconSelectorWrapperComponent, selector: "c8y-icon-selector-wrapper", inputs: ["canRemoveIcon", "selectedIcon", "iconSize"], outputs: ["onSelect"] }, { kind: "ngmodule", type: MapModule }, { kind: "component", type: i4.MapComponent, selector: "c8y-map", inputs: ["config", "assets", "polyline$", "polylineOptions"], outputs: ["onRealtimeUpdate", "onMove", "onMoveEnd", "onZoomStart", "onZoomEnd", "onMap", "onInit"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapWidgetConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapWidgetConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-map-widget-config', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: true, imports: [
                         CommonModule,
@@ -412,10 +412,10 @@ class MapWidgetComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapWidgetComponent, deps: [{ token: i2$1.DashboardChildComponent }, { token: i4$1.ContextDashboardComponent, optional: true }, { token: i1.InventoryService }, { token: i4.MapService }, { token: i2$1.WidgetsDashboardComponent, optional: true }, { token: i2$1.DynamicComponentService }, { token: i5.WidgetConfigMigrationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: MapWidgetComponent, isStandalone: true, selector: "c8y-map-widget", inputs: { config: "config" }, viewQueries: [{ propertyName: "clusterMap", first: true, predicate: ClusterMapComponent, descendants: true }], ngImport: i0, template: "@if (mapConfig) {\n  <c8y-map-status\n    [clusterMap]=\"mapWidget\"\n    [(config)]=\"mapConfig\"\n    (onUnfollow)=\"stopFollow()\"\n    (fitAssetsToBounds)=\"fitToBounds()\"\n    [assets]=\"assets\"\n    [buttonsConfig]=\"{\n      autoRefresh: { show: false },\n      refresh: { show: false },\n      realtime: { show: false },\n      fitToBounds: { show: true }\n    }\"\n  >\n    @if (controls) {\n      <c8y-global-context-widget-wrapper\n        [widgetControls]=\"controls\"\n        [config]=\"config\"\n        [isLoading]=\"mapWidget.isLoading$ | async\"\n        (globalContextChange)=\"onGlobalContext($event)\"\n      ></c8y-global-context-widget-wrapper>\n    }\n  </c8y-map-status>\n\n  <c8y-cluster-map\n    #mapWidget\n    [rootNode]=\"rootNode\"\n    [config]=\"mapConfig\"\n    [asset]=\"assets\"\n  >\n    <div\n      class=\"map-marker\"\n      *c8yMapPopup=\"let context\"\n    >\n      <a\n        class=\"text-truncate deviceLink text-12\"\n        routerLink=\"{{ context | assetLink }}\"\n      >\n        @if (context.name) {\n          <strong>{{ context.name }}</strong>\n        } @else {\n          <strong\n            ngNonBindable\n            translate\n            [translateParams]=\"{ id: context.id }\"\n          >\n            Device {{ id }}\n          </strong>\n        }\n      </a>\n      <c8y-map-event-info [asset]=\"context\">\n        @if (!mapConfig.follow) {\n          <button\n            class=\"btn btn-default btn-xs btn-block m-t-8\"\n            [title]=\"'Activate realtime on this asset and follow it if it moves' | translate\"\n            type=\"button\"\n            (click)=\"startFollow(context)\"\n            translate\n          >\n            Follow\n          </button>\n        } @else {\n          <button\n            class=\"btn btn-default btn-xs btn-block m-t-8\"\n            [title]=\"'Stop following this asset.' | translate\"\n            type=\"button\"\n            (click)=\"stopFollow()\"\n            translate\n          >\n            Unfollow\n          </button>\n        }\n      </c8y-map-event-info>\n    </div>\n  </c8y-cluster-map>\n}\n", dependencies: [{ kind: "component", type: MapEventInfoComponent, selector: "c8y-map-event-info", inputs: ["asset"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "ngmodule", type: IconSelectorModule }, { kind: "ngmodule", type: MapModule }, { kind: "component", type: i4.MapStatusComponent, selector: "c8y-map-status", inputs: ["config", "assets", "clusterMap", "buttonsConfig"], outputs: ["configChange", "onUnfollow", "fitAssetsToBounds"] }, { kind: "component", type: i4.ClusterMapComponent, selector: "c8y-cluster-map", inputs: ["config", "rootNode", "asset", "showClusterColor"], outputs: ["mapChange"] }, { kind: "directive", type: i4.MapPopupDirective, selector: "[c8yMapPopup]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: GlobalContextWidgetWrapperComponent, selector: "c8y-global-context-widget-wrapper", inputs: ["isLoading", "displayMode", "widgetControls", "controlLinks", "dashboardChildForLegacy", "config", "disableRefreshEmits"], outputs: ["globalContextChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2$1.AssetLinkPipe, name: "assetLink" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapWidgetComponent, deps: [{ token: i2$1.DashboardChildComponent }, { token: i4$1.ContextDashboardComponent, optional: true }, { token: i1.InventoryService }, { token: i4.MapService }, { token: i2$1.WidgetsDashboardComponent, optional: true }, { token: i2$1.DynamicComponentService }, { token: i5.WidgetConfigMigrationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: MapWidgetComponent, isStandalone: true, selector: "c8y-map-widget", inputs: { config: "config" }, viewQueries: [{ propertyName: "clusterMap", first: true, predicate: ClusterMapComponent, descendants: true }], ngImport: i0, template: "@if (mapConfig) {\n  <c8y-map-status\n    [clusterMap]=\"mapWidget\"\n    [(config)]=\"mapConfig\"\n    (onUnfollow)=\"stopFollow()\"\n    (fitAssetsToBounds)=\"fitToBounds()\"\n    [assets]=\"assets\"\n    [buttonsConfig]=\"{\n      autoRefresh: { show: false },\n      refresh: { show: false },\n      realtime: { show: false },\n      fitToBounds: { show: true }\n    }\"\n  >\n    @if (controls) {\n      <c8y-global-context-widget-wrapper\n        [widgetControls]=\"controls\"\n        [config]=\"config\"\n        [isLoading]=\"mapWidget.isLoading$ | async\"\n        (globalContextChange)=\"onGlobalContext($event)\"\n      ></c8y-global-context-widget-wrapper>\n    }\n  </c8y-map-status>\n\n  <c8y-cluster-map\n    #mapWidget\n    [rootNode]=\"rootNode\"\n    [config]=\"mapConfig\"\n    [asset]=\"assets\"\n  >\n    <div\n      class=\"map-marker\"\n      *c8yMapPopup=\"let context\"\n    >\n      <a\n        class=\"text-truncate deviceLink text-12\"\n        routerLink=\"{{ context | assetLink }}\"\n      >\n        @if (context.name) {\n          <strong>{{ context.name }}</strong>\n        } @else {\n          <strong\n            ngNonBindable\n            translate\n            [translateParams]=\"{ id: context.id }\"\n          >\n            Device {{ id }}\n          </strong>\n        }\n      </a>\n      <c8y-map-event-info [asset]=\"context\">\n        @if (!mapConfig.follow) {\n          <button\n            class=\"btn btn-default btn-xs btn-block m-t-8\"\n            [title]=\"'Activate realtime on this asset and follow it if it moves' | translate\"\n            type=\"button\"\n            (click)=\"startFollow(context)\"\n            translate\n          >\n            Follow\n          </button>\n        } @else {\n          <button\n            class=\"btn btn-default btn-xs btn-block m-t-8\"\n            [title]=\"'Stop following this asset.' | translate\"\n            type=\"button\"\n            (click)=\"stopFollow()\"\n            translate\n          >\n            Unfollow\n          </button>\n        }\n      </c8y-map-event-info>\n    </div>\n  </c8y-cluster-map>\n}\n", dependencies: [{ kind: "component", type: MapEventInfoComponent, selector: "c8y-map-event-info", inputs: ["asset"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i2$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "ngmodule", type: IconSelectorModule }, { kind: "ngmodule", type: MapModule }, { kind: "component", type: i4.MapStatusComponent, selector: "c8y-map-status", inputs: ["config", "assets", "clusterMap", "buttonsConfig"], outputs: ["configChange", "onUnfollow", "fitAssetsToBounds"] }, { kind: "component", type: i4.ClusterMapComponent, selector: "c8y-cluster-map", inputs: ["config", "rootNode", "asset", "showClusterColor"], outputs: ["mapChange"] }, { kind: "directive", type: i4.MapPopupDirective, selector: "[c8yMapPopup]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: GlobalContextWidgetWrapperComponent, selector: "c8y-global-context-widget-wrapper", inputs: ["isLoading", "displayMode", "widgetControls", "controlLinks", "dashboardChildForLegacy", "config", "disableRefreshEmits"], outputs: ["globalContextChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2$1.AssetLinkPipe, name: "assetLink" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MapWidgetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-map-widget', standalone: true, imports: [
                         MapEventInfoComponent,

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

@@ -109,10 +109,10 @@ class MarkdownWidgetService {
             req.send();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MarkdownWidgetService, deps: [{ token: i1.FilesService }, { token: i2.InventoryService }, { token: i2.InventoryBinaryService }, { token: i1.AlertService }, { token: i3.TranslateService }, { token: i2.FetchClient }, { token: i1.AppStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MarkdownWidgetService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MarkdownWidgetService, deps: [{ token: i1.FilesService }, { token: i2.InventoryService }, { token: i2.InventoryBinaryService }, { token: i1.AlertService }, { token: i3.TranslateService }, { token: i2.FetchClient }, { token: i1.AppStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MarkdownWidgetService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MarkdownWidgetService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MarkdownWidgetService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.FilesService }, { type: i2.InventoryService }, { type: i2.InventoryBinaryService }, { type: i1.AlertService }, { type: i3.TranslateService }, { type: i2.FetchClient }, { type: i1.AppStateService }] });
@@ -311,10 +311,10 @@ class MarkdownWidgetConfigComponent {
             control.setErrors(Object.keys(rest).length ? rest : null);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MarkdownWidgetConfigComponent, deps: [{ token: i1$1.FormBuilder }, { token: i1$1.NgForm }, { token: i1.AlertService }, { token: MarkdownWidgetService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: MarkdownWidgetConfigComponent, isStandalone: true, selector: "c8y-markdown-widget-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "markdownPreviewTemplate", first: true, predicate: ["markdownPreview"], descendants: true }], ngImport: i0, template: "<fieldset class=\"c8y-fieldset\">\n  <legend>{{ 'Source' | translate }}</legend>\n  <form [formGroup]=\"formGroup\">\n    <div class=\"form-group\">\n      <label\n        class=\"c8y-radio radio-inline\"\n        title=\"{{ 'Write Markdown' | translate }}\"\n      >\n        <input\n          name=\"uploadChoice\"\n          type=\"radio\"\n          [value]=\"MarkdownSourceType.WRITE\"\n          formControlName=\"uploadChoice\"\n          (change)=\"onChange(MarkdownSourceType.WRITE)\"\n        />\n        <span></span>\n        <span>{{ 'Write Markdown' | translate }}</span>\n      </label>\n      <label\n        class=\"c8y-radio radio-inline m-l-8\"\n        title=\"{{ 'Upload a binary' | translate }}\"\n      >\n        <input\n          name=\"uploadChoice\"\n          type=\"radio\"\n          [value]=\"MarkdownSourceType.UPLOAD\"\n          formControlName=\"uploadChoice\"\n          (change)=\"onChange(MarkdownSourceType.UPLOAD)\"\n        />\n        <span></span>\n        <span>{{ 'Upload a binary' | translate }}</span>\n      </label>\n      <label\n        class=\"c8y-radio radio-inline m-l-8\"\n        title=\"{{ 'Provide a file path' | translate }}\"\n      >\n        <input\n          name=\"uploadChoice\"\n          type=\"radio\"\n          [value]=\"MarkdownSourceType.URL\"\n          formControlName=\"uploadChoice\"\n          (change)=\"onChange(MarkdownSourceType.URL)\"\n        />\n        <span></span>\n        <span>{{ 'Provide a file path' | translate }}</span>\n      </label>\n    </div>\n    @switch (uploadChoice) {\n      @case (MarkdownSourceType.WRITE) {\n        <c8y-editor\n          class=\"d-block\"\n          style=\"height: 300px\"\n          [ngModel]=\"editorContent\"\n          (ngModelChange)=\"onEditorChange($event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          [editorOptions]=\"{\n            language: 'markdown',\n            tabSize: 2,\n            insertSpaces: true,\n            minimap: { enabled: false },\n            wordWrap: 'on'\n          }\"\n        ></c8y-editor>\n      }\n      @case (MarkdownSourceType.UPLOAD) {\n        <c8y-form-group class=\"m-b-24\">\n          <c8y-drop-area\n            class=\"drop-area-sm\"\n            [title]=\"'Drop file or click to browse' | translate\"\n            formControlName=\"droppedFile\"\n            [maxAllowedFiles]=\"1\"\n            [accept]=\"'md'\"\n          ></c8y-drop-area>\n        </c8y-form-group>\n      }\n      @case (MarkdownSourceType.URL) {\n        <c8y-form-group class=\"m-b-24\">\n          <div class=\"input-group\">\n            <span class=\"input-group-addon\">\n              <i c8yIcon=\"globe\"></i>\n            </span>\n            <input\n              class=\"form-control\"\n              placeholder=\"{{ 'e.g.' | translate }} http://example.com/binary.zip\"\n              type=\"text\"\n              formControlName=\"contentUrl\"\n            />\n          </div>\n        </c8y-form-group>\n      }\n    }\n  </form>\n</fieldset>\n\n<ng-template #markdownPreview>\n  @if (previewMarkdown$ | async; as previewMarkdown) {\n    <div\n      class=\"p-16 p-t-0 markdown-content fit-h overflow-auto\"\n      [innerHTML]=\"previewMarkdown | markdownToHtml | async\"\n    ></div>\n  } @else {\n    <div class=\"fit-h d-flex d-col j-c-center a-i-center\">\n      <c8y-ui-empty-state\n        [icon]=\"'file-text'\"\n        [title]=\"'No content to preview' | translate\"\n        [subtitle]=\"\n          'Write Markdown, upload a file, or provide a URL to see the preview' | translate\n        \"\n        [horizontal]=\"false\"\n      ></c8y-ui-empty-state>\n    </div>\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: EditorComponent, selector: "c8y-editor", inputs: ["editorOptions", "theme"], outputs: ["editorInit"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: MarkdownToHtmlPipe, name: "markdownToHtml" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MarkdownWidgetConfigComponent, deps: [{ token: i1$1.FormBuilder }, { token: i1$1.NgForm }, { token: i1.AlertService }, { token: MarkdownWidgetService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: MarkdownWidgetConfigComponent, isStandalone: true, selector: "c8y-markdown-widget-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "markdownPreviewTemplate", first: true, predicate: ["markdownPreview"], descendants: true }], ngImport: i0, template: "<fieldset class=\"c8y-fieldset\">\n  <legend>{{ 'Source' | translate }}</legend>\n  <form [formGroup]=\"formGroup\">\n    <div class=\"form-group\">\n      <label\n        class=\"c8y-radio radio-inline\"\n        title=\"{{ 'Write Markdown' | translate }}\"\n      >\n        <input\n          name=\"uploadChoice\"\n          type=\"radio\"\n          [value]=\"MarkdownSourceType.WRITE\"\n          formControlName=\"uploadChoice\"\n          (change)=\"onChange(MarkdownSourceType.WRITE)\"\n        />\n        <span></span>\n        <span>{{ 'Write Markdown' | translate }}</span>\n      </label>\n      <label\n        class=\"c8y-radio radio-inline m-l-8\"\n        title=\"{{ 'Upload a binary' | translate }}\"\n      >\n        <input\n          name=\"uploadChoice\"\n          type=\"radio\"\n          [value]=\"MarkdownSourceType.UPLOAD\"\n          formControlName=\"uploadChoice\"\n          (change)=\"onChange(MarkdownSourceType.UPLOAD)\"\n        />\n        <span></span>\n        <span>{{ 'Upload a binary' | translate }}</span>\n      </label>\n      <label\n        class=\"c8y-radio radio-inline m-l-8\"\n        title=\"{{ 'Provide a file path' | translate }}\"\n      >\n        <input\n          name=\"uploadChoice\"\n          type=\"radio\"\n          [value]=\"MarkdownSourceType.URL\"\n          formControlName=\"uploadChoice\"\n          (change)=\"onChange(MarkdownSourceType.URL)\"\n        />\n        <span></span>\n        <span>{{ 'Provide a file path' | translate }}</span>\n      </label>\n    </div>\n    @switch (uploadChoice) {\n      @case (MarkdownSourceType.WRITE) {\n        <c8y-editor\n          class=\"d-block\"\n          style=\"height: 300px\"\n          [ngModel]=\"editorContent\"\n          (ngModelChange)=\"onEditorChange($event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          [editorOptions]=\"{\n            language: 'markdown',\n            tabSize: 2,\n            insertSpaces: true,\n            minimap: { enabled: false },\n            wordWrap: 'on'\n          }\"\n        ></c8y-editor>\n      }\n      @case (MarkdownSourceType.UPLOAD) {\n        <c8y-form-group class=\"m-b-24\">\n          <c8y-drop-area\n            class=\"drop-area-sm\"\n            [title]=\"'Drop file or click to browse' | translate\"\n            formControlName=\"droppedFile\"\n            [maxAllowedFiles]=\"1\"\n            [accept]=\"'md'\"\n          ></c8y-drop-area>\n        </c8y-form-group>\n      }\n      @case (MarkdownSourceType.URL) {\n        <c8y-form-group class=\"m-b-24\">\n          <div class=\"input-group\">\n            <span class=\"input-group-addon\">\n              <i c8yIcon=\"globe\"></i>\n            </span>\n            <input\n              class=\"form-control\"\n              placeholder=\"{{ 'e.g.' | translate }} http://example.com/binary.zip\"\n              type=\"text\"\n              formControlName=\"contentUrl\"\n            />\n          </div>\n        </c8y-form-group>\n      }\n    }\n  </form>\n</fieldset>\n\n<ng-template #markdownPreview>\n  @if (previewMarkdown$ | async; as previewMarkdown) {\n    <div\n      class=\"p-16 p-t-0 markdown-content fit-h overflow-auto\"\n      [innerHTML]=\"previewMarkdown | markdownToHtml | async\"\n    ></div>\n  } @else {\n    <div class=\"fit-h d-flex d-col j-c-center a-i-center\">\n      <c8y-ui-empty-state\n        [icon]=\"'file-text'\"\n        [title]=\"'No content to preview' | translate\"\n        [subtitle]=\"\n          'Write Markdown, upload a file, or provide a URL to see the preview' | translate\n        \"\n        [horizontal]=\"false\"\n      ></c8y-ui-empty-state>\n    </div>\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: EditorComponent, selector: "c8y-editor", inputs: ["editorOptions", "theme"], outputs: ["editorInit"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: MarkdownToHtmlPipe, name: "markdownToHtml" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MarkdownWidgetConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MarkdownWidgetConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-markdown-widget-config', standalone: true, imports: [
                         ReactiveFormsModule,
@@ -351,10 +351,10 @@ class MarkdownWidgetViewComponent {
             this.markdown = await this.markdownWidgetService.getContentFromUrl(this.config.contentUrl);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MarkdownWidgetViewComponent, deps: [{ token: MarkdownWidgetService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: MarkdownWidgetViewComponent, isStandalone: true, selector: "c8y-markdown-widget-view", inputs: { config: "config" }, ngImport: i0, template: "<div id=\"helpContent\" class=\"p-16 p-t-0 markdown-content\" [innerHTML]=\"markdown | markdownToHtml | async\"></div>\n", dependencies: [{ kind: "pipe", type: MarkdownToHtmlPipe, name: "markdownToHtml" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MarkdownWidgetViewComponent, deps: [{ token: MarkdownWidgetService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MarkdownWidgetViewComponent, isStandalone: true, selector: "c8y-markdown-widget-view", inputs: { config: "config" }, ngImport: i0, template: "<div id=\"helpContent\" class=\"p-16 p-t-0 markdown-content\" [innerHTML]=\"markdown | markdownToHtml | async\"></div>\n", dependencies: [{ kind: "pipe", type: MarkdownToHtmlPipe, name: "markdownToHtml" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MarkdownWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MarkdownWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-markdown-widget-view', standalone: true, imports: [MarkdownToHtmlPipe, AsyncPipe], template: "<div id=\"helpContent\" class=\"p-16 p-t-0 markdown-content\" [innerHTML]=\"markdown | markdownToHtml | async\"></div>\n" }]
         }], ctorParameters: () => [{ type: MarkdownWidgetService }], propDecorators: { config: [{