@c8y/ngx-components 1023.59.1 → 1023.61.2

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

@@ -1,23 +1,24 @@
 import * as i0 from '@angular/core';
-import { Injectable, Pipe, EventEmitter, Output, Input, Directive, ChangeDetectionStrategy, Component, signal, ViewChild, Optional } from '@angular/core';
-import * as i1$3 from '@angular/forms';
-import { ReactiveFormsModule, Validators } from '@angular/forms';
+import { Injectable, Pipe, EventEmitter, Output, Input, Directive, ChangeDetectionStrategy, Component, signal, ViewChild, Optional, inject, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i2$1 from '@angular/forms';
+import { ReactiveFormsModule, FormBuilder, NgForm, Validators } from '@angular/forms';
 import * as i1$2 from '@c8y/ngx-components';
 import { DynamicComponentAlertAggregator, DynamicComponentAlert, CommonModule, DocsModule, DynamicComponentModule, ListGroupModule, DismissAlertStrategy, CoreModule } from '@c8y/ngx-components';
-import * as i2$1 from '@c8y/ngx-components/context-dashboard';
-import * as i4 from '@c8y/ngx-components/datapoint-selector';
+import * as i4 from '@c8y/ngx-components/context-dashboard';
+import { WidgetConfigComponent, WidgetConfigService } from '@c8y/ngx-components/context-dashboard';
 import { DatapointSelectorModule } from '@c8y/ngx-components/datapoint-selector';
 import * as i5 from '@c8y/ngx-components/global-context';
 import { REFRESH_OPTION, GlobalContextWidgetWrapperComponent, AGGREGATION_LABELS, AGGREGATION_VALUES_ARR } from '@c8y/ngx-components/global-context';
 import { INTERVAL_VALUES } from '@c8y/ngx-components/interval-picker';
 import { PopoverModule } from 'ngx-bootstrap/popover';
-import { BehaviorSubject, Subject, debounceTime } from 'rxjs';
-import { skip, distinctUntilChanged, takeUntil, debounceTime as debounceTime$1 } from 'rxjs/operators';
+import { auditTime, debounceTime as debounceTime$1 } from 'rxjs/operators';
 import { gettext } from '@c8y/ngx-components/gettext';
 import * as i1 from '@c8y/ngx-components/datapoints-export-selector';
 import { DatapointsExportSelectorComponent } from '@c8y/ngx-components/datapoints-export-selector';
 import * as i1$1 from '@ngx-translate/core';
-import { merge, isEqual } from 'lodash-es';
+import { merge } from 'lodash-es';
+import { BehaviorSubject, Subject, debounceTime } from 'rxjs';
 import { aggregationType } from '@c8y/client';
 import * as i2 from '@angular/common';
 
@@ -462,10 +463,10 @@ class DatapointsTableViewService {
     setToLastDayOfPreviousMonth(date) {
         date.setUTCDate(0);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointsTableViewService, deps: [{ token: i1.DataFetchingService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointsTableViewService, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointsTableViewService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DatapointsTableViewService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -649,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.16", ngImport: i0, type: AdjustAggregatedTimeRangePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AdjustAggregatedTimeRangePipe, isStandalone: true, name: "adjustAggregatedTimeRange" }); }
+    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" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdjustAggregatedTimeRangePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AdjustAggregatedTimeRangePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'adjustAggregatedTimeRange',
@@ -683,10 +684,10 @@ class ApplyRangeClassPipe {
         }
         return 'default';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ApplyRangeClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: ApplyRangeClassPipe, isStandalone: true, name: "applyRangeClass" }); }
+    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" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ApplyRangeClassPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ApplyRangeClassPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'applyRangeClass',
@@ -723,10 +724,10 @@ class ColumnTitlePipe {
         }
         return `${label} ${unit} (${renderType})`.trim();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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.16", ngImport: i0, type: ColumnTitlePipe, isStandalone: true, name: "columnTitle" }); }
+    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" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ColumnTitlePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ColumnTitlePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'columnTitle',
@@ -790,10 +791,10 @@ class VirtualScrollListenerDirective {
             this.ngZone.run(() => this.scrolledToTop.emit());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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.16", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: VirtualScrollListenerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: VirtualScrollListenerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c8yVirtualScrollListener]',
@@ -834,10 +835,10 @@ class DynamicColumnDirective {
             this.renderer.addClass(this.el.nativeElement, className);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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.16", type: DynamicColumnDirective, isStandalone: true, selector: "[c8yDynamicColumn]", inputs: { numberOfColumns: ["c8yDynamicColumn", "numberOfColumns"] }, ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicColumnDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DynamicColumnDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[c8yDynamicColumn]',
@@ -918,10 +919,10 @@ class DatapointsTableComponent {
             type: 'system'
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointsTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointsTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DatapointsTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-datapoints-table', host: { class: 'd-col flex-grow' }, standalone: true, imports: [
                         AdjustAggregatedTimeRangePipe,
@@ -1234,10 +1235,10 @@ class DatapointsTableViewWidgetComponent {
             datapoint.__target = { name, id };
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointsTableViewWidgetComponent, deps: [{ token: i1$2.AlertService }, { token: DatapointsTableViewService }, { token: i1$1.TranslateService }, { token: i2$1.ContextDashboardComponent, optional: true }, { token: i5.WidgetConfigMigrationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", 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.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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointsTableViewWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DatapointsTableViewWidgetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-datapoints-table-view', host: { class: 'd-col fit-h' }, standalone: true, imports: [
                         CommonModule,
@@ -1246,7 +1247,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         ReactiveFormsModule,
                         GlobalContextWidgetWrapperComponent
                     ], 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" }]
-        }], ctorParameters: () => [{ type: i1$2.AlertService }, { type: DatapointsTableViewService }, { type: i1$1.TranslateService }, { type: i2$1.ContextDashboardComponent, decorators: [{
+        }], ctorParameters: () => [{ type: i1$2.AlertService }, { type: DatapointsTableViewService }, { type: i1$1.TranslateService }, { type: i4.ContextDashboardComponent, decorators: [{
                     type: Optional
                 }] }, { type: i5.WidgetConfigMigrationService }], propDecorators: { globalContextWidgetWrapperComponent: [{
                 type: ViewChild,
@@ -1257,33 +1258,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }] } });
 
-function minOneDatapointActive() {
-    return (control) => {
-        const datapoints = control.value;
-        if (!datapoints || !datapoints.length) {
-            return null;
-        }
-        const activeDatapoints = datapoints.filter(datapoint => datapoint.__active);
-        if (activeDatapoints.length >= 1) {
-            return null;
-        }
-        return { exactlyOneDatapointNeedsToBeActive: true };
-    };
-}
+const DEFAULT_DECIMAL_PLACES = 2;
+const MIN_DECIMAL_PLACES = 0;
+const MAX_DECIMAL_PLACES = 10;
 class DatapointsTableWidgetConfigComponent {
-    set previewMapSet(template) {
-        if (template) {
-            this.widgetConfigService.setPreview(template);
-            return;
-        }
-        this.widgetConfigService.setPreview(null);
-    }
-    constructor(form, formBuilder, widgetConfig, widgetConfigService) {
-        this.form = form;
-        this.formBuilder = formBuilder;
-        this.widgetConfig = widgetConfig;
-        this.widgetConfigService = widgetConfigService;
-        this.composedConfig = null;
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.formBuilder = inject(FormBuilder);
+        this.parentForm = inject(NgForm, { optional: true });
+        this.widgetConfig = inject(WidgetConfigComponent);
+        this.widgetConfigService = inject(WidgetConfigService);
         this.AGGREGATION_LABELS = AGGREGATION_LABELS;
         this.DATE_SELECTION_LABELS = DATE_SELECTION_LABELS;
         this.DEFAULT_DATE_SELECTOR_VALUE = DATE_SELECTION_VALUES.dashboard_context;
@@ -1301,88 +1285,65 @@ class DatapointsTableWidgetConfigComponent {
             showRedRange: true,
             showYellowRange: true
         };
-        this.decimalLimits = {
-            numberOfDecimalPlacesMin: 0,
-            numberOfDecimalPlacesMax: 10
-        };
-        this.destroy$ = new Subject();
         this.widgetControls = {
             presets: ['defaultWithAggregation']
         };
+        /**
+         * Debounced config for preview to prevent multiple series requests on initial load.
+         * Uses auditTime to batch rapid emissions (e.g., from initConfig + GlobalContext processing).
+         * Without it the preview may request data multiple times unnecessarily.
+         */
+        this.previewConfig$ = this.widgetConfigService.currentConfig$.pipe(auditTime(350));
+        this.DATAPOINTS_TABLE_CONTROL_NAME = 'datapointsTableControl';
+    }
+    set previewMapSet(template) {
+        this.widgetConfigService.setPreview(template ?? null);
     }
     ngOnInit() {
         if (this.widgetConfig.context?.id) {
             this.datapointSelectionConfig.contextAsset = this.widgetConfig?.context;
         }
-        this.composedConfig = { ...this.composedConfig, ...structuredClone(this.config) };
         this.initForm();
     }
     ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
+        this.parentForm.form.removeControl(this.DATAPOINTS_TABLE_CONTROL_NAME);
     }
     onBeforeSave(config) {
-        Object.assign(config, this.composedConfig);
-        return true;
-    }
-    ngOnChanges(changes) {
-        if (changes.config?.currentValue) {
-            const { dateTimeContext, refreshInterval, isAutoRefreshEnabled, aggregation, displayMode, refreshOption } = changes.config.currentValue;
-            this.composedConfig = {
-                ...this.composedConfig,
-                dateTimeContext,
-                refreshInterval,
-                isAutoRefreshEnabled,
-                aggregation,
-                displayMode,
-                refreshOption
-            };
+        if (this.formGroup.valid) {
+            Object.assign(config, this.formGroup.value);
+            return true;
         }
+        return false;
     }
     initForm() {
         this.formGroup = this.createForm();
-        if (!('aggregation' in this.config) || this.config.aggregation === undefined) {
-            this.config.aggregation = null;
-        }
-        this.form.form.addControl('config', this.formGroup);
-        this.formGroup.patchValue(this.config, { emitEvent: false });
+        this.parentForm.form.addControl(this.DATAPOINTS_TABLE_CONTROL_NAME, this.formGroup);
+        this.subscribeToFormChanges();
+    }
+    subscribeToFormChanges() {
         this.formGroup.valueChanges
-            .pipe(skip(1), distinctUntilChanged((prev, curr) => isEqual(prev, curr)), takeUntil(this.destroy$), debounceTime$1(300))
-            .subscribe((formValue) => {
-            const decimalPlaces = formValue.decimalPlaces;
-            const { numberOfDecimalPlacesMin, numberOfDecimalPlacesMax } = this.decimalLimits;
-            if (typeof decimalPlaces === 'number' &&
-                (decimalPlaces < numberOfDecimalPlacesMin || decimalPlaces > numberOfDecimalPlacesMax)) {
-                return;
-            }
-            this.composedConfig = { ...this.composedConfig, ...formValue };
-            if (formValue.datapoints?.length > 0) {
-                this.previewActiveDatapoint = formValue.datapoints.find(dp => dp.__active);
-            }
+            .pipe(debounceTime$1(150), takeUntilDestroyed(this.destroyRef))
+            .subscribe(formValue => {
+            this.widgetConfigService.updateConfig(formValue);
         });
     }
     createForm() {
         return this.formBuilder.group({
-            datapoints: this.formBuilder.control(this.config?.datapoints ?? [], [
-                Validators.required,
-                Validators.minLength(1),
-                minOneDatapointActive()
-            ]),
             decimalPlaces: [
-                this.config?.decimalPlaces ?? 2,
+                this.config.decimalPlaces ?? DEFAULT_DECIMAL_PLACES,
                 [
                     Validators.required,
-                    Validators.min(this.decimalLimits.numberOfDecimalPlacesMin),
-                    Validators.max(this.decimalLimits.numberOfDecimalPlacesMax),
+                    Validators.min(MIN_DECIMAL_PLACES),
+                    Validators.max(MAX_DECIMAL_PLACES),
                     Validators.pattern('^[0-9]+$')
                 ]
             ]
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointsTableWidgetConfigComponent, deps: [{ token: i1$3.NgForm }, { token: i1$3.FormBuilder }, { token: i2$1.WidgetConfigComponent }, { token: i2$1.WidgetConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DatapointsTableWidgetConfigComponent, isStandalone: true, selector: "c8y-datapoints-table-view-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["datapointsTablePreview"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"p-l-24 p-r-24\">\n  @if (formGroup) {\n    <form\n      class=\"no-card-context\"\n      [formGroup]=\"formGroup\"\n    >\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      <c8y-datapoint-selection-list\n        class=\"bg-inherit separator-top p-t-16 d-block\"\n        listTitle=\"{{ 'Data points' | translate }}\"\n        name=\"datapoints\"\n        [defaultFormOptions]=\"defaultFormOptions\"\n        [config]=\"datapointSelectionConfig\"\n        [minActiveCount]=\"1\"\n        formControlName=\"datapoints\"\n      ></c8y-datapoint-selection-list>\n    </form>\n  }\n</div>\n\n<ng-template #datapointsTablePreview>\n  @if (formGroup && formGroup.value && formGroup.value.datapoints?.length > 0) {\n    <c8y-global-context-widget-wrapper\n      [widgetControls]=\"widgetControls\"\n      [displayMode]=\"'preview'\"\n      [config]=\"composedConfig\"\n    ></c8y-global-context-widget-wrapper>\n    @if (composedConfig) {\n      <c8y-datapoints-table-view\n        [config]=\"composedConfig\"\n        [isInPreviewMode]=\"true\"\n      ></c8y-datapoints-table-view>\n    }\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: 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: "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: 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: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i4.DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle"], outputs: ["isValid", "change"] }, { 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" }] }); }
+    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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointsTableWidgetConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DatapointsTableWidgetConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-datapoints-table-view-config', standalone: true, imports: [
                         CoreModule,
@@ -1391,8 +1352,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         GlobalContextWidgetWrapperComponent,
                         PopoverModule,
                         ReactiveFormsModule
-                    ], template: "<div class=\"p-l-24 p-r-24\">\n  @if (formGroup) {\n    <form\n      class=\"no-card-context\"\n      [formGroup]=\"formGroup\"\n    >\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      <c8y-datapoint-selection-list\n        class=\"bg-inherit separator-top p-t-16 d-block\"\n        listTitle=\"{{ 'Data points' | translate }}\"\n        name=\"datapoints\"\n        [defaultFormOptions]=\"defaultFormOptions\"\n        [config]=\"datapointSelectionConfig\"\n        [minActiveCount]=\"1\"\n        formControlName=\"datapoints\"\n      ></c8y-datapoint-selection-list>\n    </form>\n  }\n</div>\n\n<ng-template #datapointsTablePreview>\n  @if (formGroup && formGroup.value && formGroup.value.datapoints?.length > 0) {\n    <c8y-global-context-widget-wrapper\n      [widgetControls]=\"widgetControls\"\n      [displayMode]=\"'preview'\"\n      [config]=\"composedConfig\"\n    ></c8y-global-context-widget-wrapper>\n    @if (composedConfig) {\n      <c8y-datapoints-table-view\n        [config]=\"composedConfig\"\n        [isInPreviewMode]=\"true\"\n      ></c8y-datapoints-table-view>\n    }\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" }]
-        }], ctorParameters: () => [{ type: i1$3.NgForm }, { type: i1$3.FormBuilder }, { type: i2$1.WidgetConfigComponent }, { type: i2$1.WidgetConfigService }], propDecorators: { previewMapSet: [{
+                    ], 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" }]
+        }], propDecorators: { previewMapSet: [{
                 type: ViewChild,
                 args: ['datapointsTablePreview']
             }], config: [{
@@ -1403,5 +1364,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AdjustAggregatedTimeRangePipe, ApplyRangeClassPipe, DATE_SELECTION_LABELS, DATE_SELECTION_VALUES, DATE_SELECTION_VALUES_ARR, DEFAULT_DPT_REFRESH_INTERVAL_VALUE, DURATION_OPTIONS, DatapointsTableComponent, DatapointsTableViewService, DatapointsTableViewWidgetComponent, DatapointsTableWidgetConfigComponent, INTERVAL_VALUES_ARR, REFRESH_INTERVAL_VALUES_ARR, RENDER_TYPES_LABELS, TIME_RANGE_INTERVAL_LABELS, VirtualScrollListenerDirective, minOneDatapointActive };
+export { AdjustAggregatedTimeRangePipe, ApplyRangeClassPipe, DATE_SELECTION_LABELS, DATE_SELECTION_VALUES, DATE_SELECTION_VALUES_ARR, DEFAULT_DPT_REFRESH_INTERVAL_VALUE, DURATION_OPTIONS, DatapointsTableComponent, DatapointsTableViewService, DatapointsTableViewWidgetComponent, DatapointsTableWidgetConfigComponent, INTERVAL_VALUES_ARR, REFRESH_INTERVAL_VALUES_ARR, RENDER_TYPES_LABELS, TIME_RANGE_INTERVAL_LABELS, VirtualScrollListenerDirective };
 //# sourceMappingURL=c8y-ngx-components-widgets-implementations-datapoints-table.mjs.map