@c8y/ngx-components 1023.61.0 → 1023.61.12

package/fesm2022/c8y-ngx-components-widgets-implementations-datapoints-table.mjs

@@ -463,10 +463,10 @@ class DatapointsTableViewService {
     setToLastDayOfPreviousMonth(date) {
         date.setUTCDate(0);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DatapointsTableViewService, deps: [{ token: i1.DataFetchingService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DatapointsTableViewService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatapointsTableViewService, deps: [{ token: i1.DataFetchingService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatapointsTableViewService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DatapointsTableViewService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatapointsTableViewService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -650,10 +650,10 @@ class AdjustAggregatedTimeRangePipe {
             return `${hours.toString().padStart(2, '0')}:${useHourOnly ? '00' : minutes}`;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AdjustAggregatedTimeRangePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: AdjustAggregatedTimeRangePipe, isStandalone: true, name: "adjustAggregatedTimeRange" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AdjustAggregatedTimeRangePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: AdjustAggregatedTimeRangePipe, isStandalone: true, name: "adjustAggregatedTimeRange" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AdjustAggregatedTimeRangePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AdjustAggregatedTimeRangePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'adjustAggregatedTimeRange',
@@ -684,10 +684,10 @@ class ApplyRangeClassPipe {
         }
         return 'default';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ApplyRangeClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: ApplyRangeClassPipe, isStandalone: true, name: "applyRangeClass" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ApplyRangeClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: ApplyRangeClassPipe, isStandalone: true, name: "applyRangeClass" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ApplyRangeClassPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ApplyRangeClassPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'applyRangeClass',
@@ -724,10 +724,10 @@ class ColumnTitlePipe {
         }
         return `${label} ${unit} (${renderType})`.trim();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ColumnTitlePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: ColumnTitlePipe, isStandalone: true, name: "columnTitle" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ColumnTitlePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: ColumnTitlePipe, isStandalone: true, name: "columnTitle" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ColumnTitlePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ColumnTitlePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'columnTitle',
@@ -791,10 +791,10 @@ class VirtualScrollListenerDirective {
             this.ngZone.run(() => this.scrolledToTop.emit());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: VirtualScrollListenerDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: VirtualScrollListenerDirective, isStandalone: true, selector: "[c8yVirtualScrollListener]", inputs: { scrollThreshold: "scrollThreshold" }, outputs: { scrolled: "scrolled", scrolledToTop: "scrolledToTop" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: VirtualScrollListenerDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: VirtualScrollListenerDirective, isStandalone: true, selector: "[c8yVirtualScrollListener]", inputs: { scrollThreshold: "scrollThreshold" }, outputs: { scrolled: "scrolled", scrolledToTop: "scrolledToTop" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: VirtualScrollListenerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: VirtualScrollListenerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c8yVirtualScrollListener]',
@@ -835,10 +835,10 @@ class DynamicColumnDirective {
             this.renderer.addClass(this.el.nativeElement, className);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DynamicColumnDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: DynamicColumnDirective, isStandalone: true, selector: "[c8yDynamicColumn]", inputs: { numberOfColumns: ["c8yDynamicColumn", "numberOfColumns"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DynamicColumnDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DynamicColumnDirective, isStandalone: true, selector: "[c8yDynamicColumn]", inputs: { numberOfColumns: ["c8yDynamicColumn", "numberOfColumns"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DynamicColumnDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DynamicColumnDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c8yDynamicColumn]',
@@ -919,10 +919,10 @@ class DatapointsTableComponent {
             type: 'system'
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DatapointsTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: DatapointsTableComponent, isStandalone: true, selector: "c8y-datapoints-table", inputs: { aggregationType: "aggregationType", datapointsTableItems: "datapointsTableItems", devicesColumnHeaders: "devicesColumnHeaders", decimalPlaces: "decimalPlaces", hasMultipleDatapoints: "hasMultipleDatapoints", isLoading: "isLoading", seriesWithoutPermissionToReadCount: "seriesWithoutPermissionToReadCount" }, outputs: { isScrolling: "isScrolling" }, host: { classAttribute: "d-col flex-grow" }, usesOnChanges: true, ngImport: i0, template: "@if (!hasNoPermissionsToReadAnyMeasurement) {\n  <div class=\"c8y-cq-440\">\n    <div\n      class=\"hidden-xs c8y-list__item c8y-list--timeline hidden-cq\"\n      [ngClass]=\"{ 'separator-top-bottom': devicesColumnHeaders.length > 0 }\"\n    >\n      <div class=\"d-flex container-fluid\">\n        <div class=\"c8y-list--timeline__item__date\"></div>\n        <div class=\"c8y-list__item__block flex-grow min-width-0\">\n          <div class=\"c8y-list__item__body\">\n            <div class=\"d-flex row\">\n              @if (hasMultipleDatapoints) {\n                <div\n                  class=\"min-width-0\"\n                  [title]=\"'Device' | translate\"\n                  [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                >\n                  <span class=\"text-medium text-truncate\">\n                    {{ 'Device' | translate }}\n                  </span>\n                </div>\n              }\n              <!-- Data points column headers -->\n              @for (header of devicesColumnHeaders; track header) {\n                <div\n                  class=\"min-width-0\"\n                  title=\"{{ header | columnTitle }}\"\n                  [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                >\n                  <span class=\"text-medium text-truncate\">\n                    {{ header.label }} {{ header.unit }}\n                  </span>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- The record list -->\n  @if (!isLoading) {\n    @if (datapointsTableItems.length) {\n      <c8y-list-group\n        class=\"p-t-8 flex-grow c8y-cq-440\"\n        c8yVirtualScrollListener\n        (scrolled)=\"onListScrolled()\"\n        (scrolledToTop)=\"onListScrolledToTop()\"\n      >\n        <c8y-li-timeline\n          *c8yFor=\"\n            let tableItem of { data: datapointsTableItems, res: null };\n            enableVirtualScroll: true;\n            virtualScrollElementSize: 48;\n            virtualScrollStrategy: 'fixed'\n          \"\n        >\n          {{ tableItem.dateAndTime | c8yDate: 'mediumDate' }}\n          {{\n            tableItem.dateAndTime\n              | c8yDate: 'mediumTime'\n              | adjustAggregatedTimeRange: aggregationType\n          }}\n          <c8y-li>\n            <c8y-li-body>\n              <div class=\"d-flex row\">\n                @if (devicesColumnHeaders.length > 1) {\n                  <div\n                    class=\"min-width-0\"\n                    [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                    [attr.data-label]=\"'Device' | translate\"\n                  >\n                    <div\n                      class=\"text-truncate\"\n                      title=\"{{ tableItem.deviceName }}\"\n                    >\n                      {{ tableItem.deviceName }}\n                    </div>\n                  </div>\n                }\n                <!-- Data point value row cells -->\n\n                @for (row of tableItem.rowItems; track row) {\n                  @if (row !== null) {\n                    @switch (row.renderType) {\n                      @case ('min') {\n                        <div\n                          [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                          [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n                          [attr.data-label]=\"row.label\"\n                          data-cy=\"c8y-datapoints-table--value-min\"\n                        >\n                          <div\n                            class=\"text-truncate\"\n                            title=\"{{\n                              row.value.min ?? '' | number: getFractionSize(row.value.min)\n                            }}\"\n                          >\n                            {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                          </div>\n                        </div>\n                      }\n                      @case ('max') {\n                        <div\n                          class=\"col-md-4\"\n                          [ngClass]=\"row.value.max ?? null | applyRangeClass: getRangeValues(row)\"\n                          data-cy=\"c8y-datapoints-table--value-max\"\n                        >\n                          <div\n                            class=\"text-truncate\"\n                            title=\"{{\n                              row.value.max ?? '' | number: getFractionSize(row.value.max)\n                            }}\"\n                          >\n                            {{ row.value.max ?? '' | number: getFractionSize(row.value.max) }}\n                          </div>\n                        </div>\n                      }\n                      @case ('area') {\n                        <div\n                          [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                          data-cy=\"c8y-datapoints-table--value-minmax\"\n                        >\n                          <span\n                            class=\"text-truncate\"\n                            title=\"{{\n                              row.value.min ?? '' | number: getFractionSize(row.value.min)\n                            }}\"\n                            [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n                            data-cy=\"c8y-datapoints-table--value-minmax-min\"\n                          >\n                            {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                          </span>\n                          ...\n                          <span\n                            class=\"text-truncate\"\n                            title=\"{{\n                              row.value.max ?? '' | number: getFractionSize(row.value.max)\n                            }}\"\n                            [ngClass]=\"row.value.max ?? null | applyRangeClass: getRangeValues(row)\"\n                            data-cy=\"c8y-datapoints-table--value-minmax-max\"\n                          >\n                            {{ row.value.max ?? '' | number: getFractionSize(row.value.max) }}\n                          </span>\n                        </div>\n                      }\n                      @default {\n                        <div [c8yDynamicColumn]=\"devicesColumnHeaders.length\">\n                          <span\n                            class=\"text-truncate\"\n                            title=\"{{\n                              row.value.min ?? '' | number: getFractionSize(row.value.min)\n                            }}\"\n                            [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n                          >\n                            {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                          </span>\n                        </div>\n                      }\n                    }\n                  } @else {\n                    <div [c8yDynamicColumn]=\"devicesColumnHeaders.length\"></div>\n                  }\n                }\n              </div>\n            </c8y-li-body>\n          </c8y-li>\n        </c8y-li-timeline>\n      </c8y-list-group>\n    } @else {\n      <div class=\"p-relative p-l-24\">\n        <c8y-ui-empty-state\n          [icon]=\"'c8y-alert-idle'\"\n          [title]=\"'No data to display.' | translate\"\n          [horizontal]=\"true\"\n          data-cy=\"datapoints-table-list--empty-state\"\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/#data-point-table\">\n                user documentation</a\n              >.\n            </small>\n          </p>\n        </c8y-ui-empty-state>\n      </div>\n    }\n  } @else {\n    <c8y-loading></c8y-loading>\n  }\n} @else {\n  <div class=\"p-t-24 p-r-16 p-l-16 p-b-16 d-flex\">\n    <div class=\"center-block\">\n      <c8y-dynamic-component-alerts\n        [alerts]=\"missingAllPermissionsAlert\"\n      ></c8y-dynamic-component-alerts>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: i1$2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i1$2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i1$2.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "ngmodule", type: DocsModule }, { kind: "directive", type: i1$2.GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: i1$2.GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: DynamicColumnDirective, selector: "[c8yDynamicColumn]", inputs: ["c8yDynamicColumn"] }, { kind: "ngmodule", type: DynamicComponentModule }, { kind: "component", type: i1$2.DynamicComponentAlertsComponent, selector: "c8y-dynamic-component-alerts", inputs: ["alerts"] }, { kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: i1$2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i1$2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i1$2.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i1$2.ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "directive", type: VirtualScrollListenerDirective, selector: "[c8yVirtualScrollListener]", inputs: ["scrollThreshold"], outputs: ["scrolled", "scrolledToTop"] }, { kind: "pipe", type: AdjustAggregatedTimeRangePipe, name: "adjustAggregatedTimeRange" }, { kind: "pipe", type: ApplyRangeClassPipe, name: "applyRangeClass" }, { kind: "pipe", type: ColumnTitlePipe, name: "columnTitle" }, { kind: "pipe", type: i1$2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$2.DatePipe, name: "c8yDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatapointsTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DatapointsTableComponent, isStandalone: true, selector: "c8y-datapoints-table", inputs: { aggregationType: "aggregationType", datapointsTableItems: "datapointsTableItems", devicesColumnHeaders: "devicesColumnHeaders", decimalPlaces: "decimalPlaces", hasMultipleDatapoints: "hasMultipleDatapoints", isLoading: "isLoading", seriesWithoutPermissionToReadCount: "seriesWithoutPermissionToReadCount" }, outputs: { isScrolling: "isScrolling" }, host: { classAttribute: "d-col flex-grow" }, usesOnChanges: true, ngImport: i0, template: "@if (!hasNoPermissionsToReadAnyMeasurement) {\n  <div class=\"c8y-cq-440\">\n    <div\n      class=\"hidden-xs c8y-list__item c8y-list--timeline hidden-cq\"\n      [ngClass]=\"{ 'separator-top-bottom': devicesColumnHeaders.length > 0 }\"\n    >\n      <div class=\"d-flex container-fluid\">\n        <div class=\"c8y-list--timeline__item__date\"></div>\n        <div class=\"c8y-list__item__block flex-grow min-width-0\">\n          <div class=\"c8y-list__item__body\">\n            <div class=\"d-flex row\">\n              @if (hasMultipleDatapoints) {\n                <div\n                  class=\"min-width-0\"\n                  [title]=\"'Device' | translate\"\n                  [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                >\n                  <span class=\"text-medium text-truncate\">\n                    {{ 'Device' | translate }}\n                  </span>\n                </div>\n              }\n              <!-- Data points column headers -->\n              @for (header of devicesColumnHeaders; track header) {\n                <div\n                  class=\"min-width-0\"\n                  title=\"{{ header | columnTitle }}\"\n                  [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                >\n                  <span class=\"text-medium text-truncate\">\n                    {{ header.label }} {{ header.unit }}\n                  </span>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- The record list -->\n  @if (!isLoading) {\n    @if (datapointsTableItems.length) {\n      <c8y-list-group\n        class=\"p-t-8 flex-grow c8y-cq-440\"\n        c8yVirtualScrollListener\n        (scrolled)=\"onListScrolled()\"\n        (scrolledToTop)=\"onListScrolledToTop()\"\n      >\n        <c8y-li-timeline\n          *c8yFor=\"\n            let tableItem of { data: datapointsTableItems, res: null };\n            enableVirtualScroll: true;\n            virtualScrollElementSize: 48;\n            virtualScrollStrategy: 'fixed'\n          \"\n        >\n          {{ tableItem.dateAndTime | c8yDate: 'mediumDate' }}\n          {{\n            tableItem.dateAndTime\n              | c8yDate: 'mediumTime'\n              | adjustAggregatedTimeRange: aggregationType\n          }}\n          <c8y-li>\n            <c8y-li-body>\n              <div class=\"d-flex row\">\n                @if (devicesColumnHeaders.length > 1) {\n                  <div\n                    class=\"min-width-0\"\n                    [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                    [attr.data-label]=\"'Device' | translate\"\n                  >\n                    <div\n                      class=\"text-truncate\"\n                      title=\"{{ tableItem.deviceName }}\"\n                    >\n                      {{ tableItem.deviceName }}\n                    </div>\n                  </div>\n                }\n                <!-- Data point value row cells -->\n\n                @for (row of tableItem.rowItems; track row) {\n                  @if (row !== null) {\n                    @switch (row.renderType) {\n                      @case ('min') {\n                        <div\n                          [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                          [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n                          [attr.data-label]=\"row.label\"\n                          data-cy=\"c8y-datapoints-table--value-min\"\n                        >\n                          <div\n                            class=\"text-truncate\"\n                            title=\"{{\n                              row.value.min ?? '' | number: getFractionSize(row.value.min)\n                            }}\"\n                          >\n                            {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                          </div>\n                        </div>\n                      }\n                      @case ('max') {\n                        <div\n                          class=\"col-md-4\"\n                          [ngClass]=\"row.value.max ?? null | applyRangeClass: getRangeValues(row)\"\n                          data-cy=\"c8y-datapoints-table--value-max\"\n                        >\n                          <div\n                            class=\"text-truncate\"\n                            title=\"{{\n                              row.value.max ?? '' | number: getFractionSize(row.value.max)\n                            }}\"\n                          >\n                            {{ row.value.max ?? '' | number: getFractionSize(row.value.max) }}\n                          </div>\n                        </div>\n                      }\n                      @case ('area') {\n                        <div\n                          [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                          data-cy=\"c8y-datapoints-table--value-minmax\"\n                        >\n                          <span\n                            class=\"text-truncate\"\n                            title=\"{{\n                              row.value.min ?? '' | number: getFractionSize(row.value.min)\n                            }}\"\n                            [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n                            data-cy=\"c8y-datapoints-table--value-minmax-min\"\n                          >\n                            {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                          </span>\n                          ...\n                          <span\n                            class=\"text-truncate\"\n                            title=\"{{\n                              row.value.max ?? '' | number: getFractionSize(row.value.max)\n                            }}\"\n                            [ngClass]=\"row.value.max ?? null | applyRangeClass: getRangeValues(row)\"\n                            data-cy=\"c8y-datapoints-table--value-minmax-max\"\n                          >\n                            {{ row.value.max ?? '' | number: getFractionSize(row.value.max) }}\n                          </span>\n                        </div>\n                      }\n                      @default {\n                        <div [c8yDynamicColumn]=\"devicesColumnHeaders.length\">\n                          <span\n                            class=\"text-truncate\"\n                            title=\"{{\n                              row.value.min ?? '' | number: getFractionSize(row.value.min)\n                            }}\"\n                            [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n                          >\n                            {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                          </span>\n                        </div>\n                      }\n                    }\n                  } @else {\n                    <div [c8yDynamicColumn]=\"devicesColumnHeaders.length\"></div>\n                  }\n                }\n              </div>\n            </c8y-li-body>\n          </c8y-li>\n        </c8y-li-timeline>\n      </c8y-list-group>\n    } @else {\n      <div class=\"p-relative p-l-24\">\n        <c8y-ui-empty-state\n          [icon]=\"'c8y-alert-idle'\"\n          [title]=\"'No data to display.' | translate\"\n          [horizontal]=\"true\"\n          data-cy=\"datapoints-table-list--empty-state\"\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/#data-point-table\">\n                user documentation</a\n              >.\n            </small>\n          </p>\n        </c8y-ui-empty-state>\n      </div>\n    }\n  } @else {\n    <c8y-loading></c8y-loading>\n  }\n} @else {\n  <div class=\"p-t-24 p-r-16 p-l-16 p-b-16 d-flex\">\n    <div class=\"center-block\">\n      <c8y-dynamic-component-alerts\n        [alerts]=\"missingAllPermissionsAlert\"\n      ></c8y-dynamic-component-alerts>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: i1$2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i1$2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i1$2.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "ngmodule", type: DocsModule }, { kind: "directive", type: i1$2.GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: i1$2.GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: DynamicColumnDirective, selector: "[c8yDynamicColumn]", inputs: ["c8yDynamicColumn"] }, { kind: "ngmodule", type: DynamicComponentModule }, { kind: "component", type: i1$2.DynamicComponentAlertsComponent, selector: "c8y-dynamic-component-alerts", inputs: ["alerts"] }, { kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: i1$2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i1$2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i1$2.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i1$2.ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "directive", type: VirtualScrollListenerDirective, selector: "[c8yVirtualScrollListener]", inputs: ["scrollThreshold"], outputs: ["scrolled", "scrolledToTop"] }, { kind: "pipe", type: AdjustAggregatedTimeRangePipe, name: "adjustAggregatedTimeRange" }, { kind: "pipe", type: ApplyRangeClassPipe, name: "applyRangeClass" }, { kind: "pipe", type: ColumnTitlePipe, name: "columnTitle" }, { kind: "pipe", type: i1$2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$2.DatePipe, name: "c8yDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DatapointsTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatapointsTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-datapoints-table', host: { class: 'd-col flex-grow' }, standalone: true, imports: [
                         AdjustAggregatedTimeRangePipe,
@@ -1235,10 +1235,10 @@ class DatapointsTableViewWidgetComponent {
             datapoint.__target = { name, id };
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DatapointsTableViewWidgetComponent, deps: [{ token: i1$2.AlertService }, { token: DatapointsTableViewService }, { token: i1$1.TranslateService }, { token: i4.ContextDashboardComponent, optional: true }, { token: i5.WidgetConfigMigrationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: DatapointsTableViewWidgetComponent, isStandalone: true, selector: "c8y-datapoints-table-view", inputs: { config: "config", isInPreviewMode: "isInPreviewMode" }, host: { classAttribute: "d-col fit-h" }, viewQueries: [{ propertyName: "globalContextWidgetWrapperComponent", first: true, predicate: GlobalContextWidgetWrapperComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isInPreviewMode\">\n  <div class=\"d-flex gap-16 p-r-16 inner-scroll h-auto min-width-0\">\n    <c8y-global-context-widget-wrapper\n      *ngIf=\"widgetControls\"\n      [widgetControls]=\"widgetControls\"\n      [displayMode]=\"'inline'\"\n      [isLoading]=\"isLoading$ | async\"\n      [config]=\"config\"\n      (globalContextChange)=\"onGlobalContextChange($event)\"\n    ></c8y-global-context-widget-wrapper>\n    <ng-container *ngIf=\"config.datapoints.length > 0\"></ng-container>\n    <c8y-datapoints-export-selector\n      class=\"m-l-auto p-b-8\"\n      [containerClass]=\"containerClass\"\n      [exportConfig]=\"exportConfig\"\n      (isOpen)=\"onExportModalOpen($event)\"\n    ></c8y-datapoints-export-selector>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"devicesColumnHeaders\">\n  <c8y-datapoints-table\n    [aggregationType]=\"config.aggregation\"\n    [datapointsTableItems]=\"datapointsTableItems\"\n    [decimalPlaces]=\"config.decimalPlaces\"\n    [devicesColumnHeaders]=\"devicesColumnHeaders\"\n    [hasMultipleDatapoints]=\"hasMultipleDatapoints\"\n    [isLoading]=\"isLoading$ | async\"\n    [seriesWithoutPermissionToReadCount]=\"seriesWithoutPermissionToRead?.length\"\n    (isScrolling)=\"onScrolling($event)\"\n  ></c8y-datapoints-table>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DatapointsExportSelectorComponent, selector: "c8y-datapoints-export-selector", inputs: ["displayMode", "containerClass", "exportConfig"], outputs: ["isOpen"] }, { kind: "component", type: DatapointsTableComponent, selector: "c8y-datapoints-table", inputs: ["aggregationType", "datapointsTableItems", "devicesColumnHeaders", "decimalPlaces", "hasMultipleDatapoints", "isLoading", "seriesWithoutPermissionToReadCount"], outputs: ["isScrolling"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatapointsTableViewWidgetComponent, deps: [{ token: i1$2.AlertService }, { token: DatapointsTableViewService }, { token: i1$1.TranslateService }, { token: i4.ContextDashboardComponent, optional: true }, { token: i5.WidgetConfigMigrationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: DatapointsTableViewWidgetComponent, isStandalone: true, selector: "c8y-datapoints-table-view", inputs: { config: "config", isInPreviewMode: "isInPreviewMode" }, host: { classAttribute: "d-col fit-h" }, viewQueries: [{ propertyName: "globalContextWidgetWrapperComponent", first: true, predicate: GlobalContextWidgetWrapperComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isInPreviewMode\">\n  <div class=\"d-flex gap-16 p-r-16 inner-scroll h-auto min-width-0\">\n    <c8y-global-context-widget-wrapper\n      *ngIf=\"widgetControls\"\n      [widgetControls]=\"widgetControls\"\n      [displayMode]=\"'inline'\"\n      [isLoading]=\"isLoading$ | async\"\n      [config]=\"config\"\n      (globalContextChange)=\"onGlobalContextChange($event)\"\n    ></c8y-global-context-widget-wrapper>\n    <ng-container *ngIf=\"config.datapoints.length > 0\"></ng-container>\n    <c8y-datapoints-export-selector\n      class=\"m-l-auto p-b-8\"\n      [containerClass]=\"containerClass\"\n      [exportConfig]=\"exportConfig\"\n      (isOpen)=\"onExportModalOpen($event)\"\n    ></c8y-datapoints-export-selector>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"devicesColumnHeaders\">\n  <c8y-datapoints-table\n    [aggregationType]=\"config.aggregation\"\n    [datapointsTableItems]=\"datapointsTableItems\"\n    [decimalPlaces]=\"config.decimalPlaces\"\n    [devicesColumnHeaders]=\"devicesColumnHeaders\"\n    [hasMultipleDatapoints]=\"hasMultipleDatapoints\"\n    [isLoading]=\"isLoading$ | async\"\n    [seriesWithoutPermissionToReadCount]=\"seriesWithoutPermissionToRead?.length\"\n    (isScrolling)=\"onScrolling($event)\"\n  ></c8y-datapoints-table>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DatapointsExportSelectorComponent, selector: "c8y-datapoints-export-selector", inputs: ["displayMode", "containerClass", "exportConfig"], outputs: ["isOpen"] }, { kind: "component", type: DatapointsTableComponent, selector: "c8y-datapoints-table", inputs: ["aggregationType", "datapointsTableItems", "devicesColumnHeaders", "decimalPlaces", "hasMultipleDatapoints", "isLoading", "seriesWithoutPermissionToReadCount"], outputs: ["isScrolling"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DatapointsTableViewWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatapointsTableViewWidgetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-datapoints-table-view', host: { class: 'd-col fit-h' }, standalone: true, imports: [
                         CommonModule,
@@ -1340,10 +1340,10 @@ class DatapointsTableWidgetConfigComponent {
             ]
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DatapointsTableWidgetConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: DatapointsTableWidgetConfigComponent, isStandalone: true, selector: "c8y-datapoints-table-view-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["datapointsTablePreview"], descendants: true }], ngImport: i0, template: "<div class=\"p-l-24 p-r-24\">\n  @if (formGroup) {\n    <form [formGroup]=\"formGroup\">\n      <fieldset class=\"c8y-fieldset\">\n        <legend>\n          {{ 'Decimal places' | translate }}\n        </legend>\n        <c8y-form-group class=\"p-t-8\">\n          <input\n            class=\"form-control\"\n            name=\"decimalPlaces\"\n            type=\"number\"\n            formControlName=\"decimalPlaces\"\n            step=\"1\"\n          />\n        </c8y-form-group>\n      </fieldset>\n    </form>\n  }\n</div>\n\n<ng-template #datapointsTablePreview>\n  @let previewConfig = previewConfig$ | async;\n\n  @if (previewConfig?.datapoints?.length > 0) {\n    <c8y-global-context-widget-wrapper\n      [widgetControls]=\"widgetControls\"\n      [displayMode]=\"'preview'\"\n      [config]=\"previewConfig\"\n    ></c8y-global-context-widget-wrapper>\n    <c8y-datapoints-table-view\n      [config]=\"previewConfig\"\n      [isInPreviewMode]=\"true\"\n    ></c8y-datapoints-table-view>\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=\"datapoints-table-list--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/#data-point-table\">\n              user documentation</a\n            >.\n          </small>\n        </p>\n      </c8y-ui-empty-state>\n    </div>\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "component", type: i1$2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i1$2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$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: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i1$2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i1$2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i1$2.GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: i1$2.GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: DatapointsTableViewWidgetComponent, selector: "c8y-datapoints-table-view", inputs: ["config", "isInPreviewMode"] }, { kind: "component", type: GlobalContextWidgetWrapperComponent, selector: "c8y-global-context-widget-wrapper", inputs: ["isLoading", "displayMode", "widgetControls", "controlLinks", "dashboardChildForLegacy", "config", "disableRefreshEmits"], outputs: ["globalContextChange"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1$2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatapointsTableWidgetConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DatapointsTableWidgetConfigComponent, isStandalone: true, selector: "c8y-datapoints-table-view-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["datapointsTablePreview"], descendants: true }], ngImport: i0, template: "<div class=\"p-l-24 p-r-24\">\n  @if (formGroup) {\n    <form [formGroup]=\"formGroup\">\n      <fieldset class=\"c8y-fieldset\">\n        <legend>\n          {{ 'Decimal places' | translate }}\n        </legend>\n        <c8y-form-group class=\"p-t-8\">\n          <input\n            class=\"form-control\"\n            name=\"decimalPlaces\"\n            type=\"number\"\n            formControlName=\"decimalPlaces\"\n            step=\"1\"\n          />\n        </c8y-form-group>\n      </fieldset>\n    </form>\n  }\n</div>\n\n<ng-template #datapointsTablePreview>\n  @let previewConfig = previewConfig$ | async;\n\n  @if (previewConfig?.datapoints?.length > 0) {\n    <c8y-global-context-widget-wrapper\n      [widgetControls]=\"widgetControls\"\n      [displayMode]=\"'preview'\"\n      [config]=\"previewConfig\"\n    ></c8y-global-context-widget-wrapper>\n    <c8y-datapoints-table-view\n      [config]=\"previewConfig\"\n      [isInPreviewMode]=\"true\"\n    ></c8y-datapoints-table-view>\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=\"datapoints-table-list--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/#data-point-table\">\n              user documentation</a\n            >.\n          </small>\n        </p>\n      </c8y-ui-empty-state>\n    </div>\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "component", type: i1$2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i1$2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$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: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i1$2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i1$2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i1$2.GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: i1$2.GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: DatapointsTableViewWidgetComponent, selector: "c8y-datapoints-table-view", inputs: ["config", "isInPreviewMode"] }, { kind: "component", type: GlobalContextWidgetWrapperComponent, selector: "c8y-global-context-widget-wrapper", inputs: ["isLoading", "displayMode", "widgetControls", "controlLinks", "dashboardChildForLegacy", "config", "disableRefreshEmits"], outputs: ["globalContextChange"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1$2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DatapointsTableWidgetConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatapointsTableWidgetConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-datapoints-table-view-config', standalone: true, imports: [
                         CoreModule,

package/fesm2022/c8y-ngx-components-widgets-implementations-device-control-message.mjs

@@ -72,10 +72,10 @@ class DeviceControlMessageWidgetViewComponent {
             this.alert.addServerFailure(e);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DeviceControlMessageWidgetViewComponent, deps: [{ token: i1.AlertService }, { token: i2.OperationService }, { token: i3.TranslateService }, { token: i4.ContextDashboardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: DeviceControlMessageWidgetViewComponent, isStandalone: true, selector: "c8y-device-control-message-widget-view", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"operationSupportedByDevice$ | async\" class=\"input-group p-16\">\n  <input\n    type=\"text\"\n    class=\"form-control\"\n    data-cy=\"c8y-device-control-message-widget-view--message-textbox\"\n    [(ngModel)]=\"messageToBeSent\"\n    placeholder=\"{{ 'Message' | translate }}\"\n  />\n  <span class=\"input-group-btn\">\n    <button\n      title=\"{{ 'Send' | translate }}\"\n      class=\"btn btn-primary\"\n      data-cy=\"c8y-device-control-message-widget-view--send-button\"\n      (click)=\"sendMessage()\"\n      [disabled]=\"!messageToBeSent\"\n      translate\n    >\n      Send\n    </button>\n  </span>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DeviceControlMessageWidgetViewComponent, deps: [{ token: i1.AlertService }, { token: i2.OperationService }, { token: i3.TranslateService }, { token: i4.ContextDashboardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: DeviceControlMessageWidgetViewComponent, isStandalone: true, selector: "c8y-device-control-message-widget-view", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"operationSupportedByDevice$ | async\" class=\"input-group p-16\">\n  <input\n    type=\"text\"\n    class=\"form-control\"\n    data-cy=\"c8y-device-control-message-widget-view--message-textbox\"\n    [(ngModel)]=\"messageToBeSent\"\n    placeholder=\"{{ 'Message' | translate }}\"\n  />\n  <span class=\"input-group-btn\">\n    <button\n      title=\"{{ 'Send' | translate }}\"\n      class=\"btn btn-primary\"\n      data-cy=\"c8y-device-control-message-widget-view--send-button\"\n      (click)=\"sendMessage()\"\n      [disabled]=\"!messageToBeSent\"\n      translate\n    >\n      Send\n    </button>\n  </span>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DeviceControlMessageWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DeviceControlMessageWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-device-control-message-widget-view', standalone: true, imports: [CoreModule, ReactiveFormsModule], template: "<div *ngIf=\"operationSupportedByDevice$ | async\" class=\"input-group p-16\">\n  <input\n    type=\"text\"\n    class=\"form-control\"\n    data-cy=\"c8y-device-control-message-widget-view--message-textbox\"\n    [(ngModel)]=\"messageToBeSent\"\n    placeholder=\"{{ 'Message' | translate }}\"\n  />\n  <span class=\"input-group-btn\">\n    <button\n      title=\"{{ 'Send' | translate }}\"\n      class=\"btn btn-primary\"\n      data-cy=\"c8y-device-control-message-widget-view--send-button\"\n      (click)=\"sendMessage()\"\n      [disabled]=\"!messageToBeSent\"\n      translate\n    >\n      Send\n    </button>\n  </span>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.AlertService }, { type: i2.OperationService }, { type: i3.TranslateService }, { type: i4.ContextDashboardComponent, decorators: [{