@c8y/ngx-components 1021.22.54 → 1021.22.60

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

@@ -3,33 +3,32 @@ import { Injectable, EventEmitter, inject, Component, ChangeDetectionStrategy, I
 import * as i3 from '@angular/forms';
 import { ControlContainer, ReactiveFormsModule, FormControl, Validators } from '@angular/forms';
 import * as i1$1 from '@c8y/ngx-components';
-import { gettext, CoreModule, AGGREGATION_VALUES, AGGREGATION_LABELS, AGGREGATION_VALUES_ARR, IntervalBasedReload, CountdownIntervalComponent, CommonModule as CommonModule$1, CountdownIntervalModule, ListGroupModule, DynamicComponentAlertAggregator, DynamicComponentAlert, DocsModule, DynamicComponentModule, DismissAlertStrategy } from '@c8y/ngx-components';
+import { gettext, CoreModule, AGGREGATION_VALUES, AGGREGATION_LABELS, AGGREGATION_VALUES_ARR, IntervalBasedReload, CountdownIntervalComponent, CommonModule as CommonModule$1, CountdownIntervalModule, ListGroupModule, DynamicComponentAlertAggregator, DynamicComponentAlert, DocsModule, DynamicComponentModule, DismissAlertStrategy, globalAutoRefreshLoading } from '@c8y/ngx-components';
 import * as i4 from '@c8y/ngx-components/context-dashboard';
 import * as i7 from '@c8y/ngx-components/datapoint-selector';
 import { DatapointSelectorModule } from '@c8y/ngx-components/datapoint-selector';
+import * as i2$1 from '@c8y/ngx-components/datapoints-export-selector';
 import { TIME_RANGE_INTERVAL_UNITS_VALUES, dateRangeValidator } from '@c8y/ngx-components/datapoints-export-selector';
+import { INTERVALS, INTERVAL_VALUES } from '@c8y/ngx-components/interval-picker';
 import * as i8 from 'ngx-bootstrap/popover';
 import { PopoverModule } from 'ngx-bootstrap/popover';
-import { Subject, takeUntil, merge, debounceTime } from 'rxjs';
+import { Subject, takeUntil, merge, tap, BehaviorSubject, debounceTime } from 'rxjs';
 import * as i1 from '@c8y/client';
 import { aggregationType } from '@c8y/client';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { INTERVALS } from '@c8y/ngx-components/interval-picker';
 import * as i1$2 from '@ngx-translate/core';
 import * as i4$1 from 'ngx-bootstrap/tooltip';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 const DEFAULT_COUNTDOWN_VALUE = 30_000;
 const DATE_SELECTION_VALUES = {
-    // Will be uncommented in MTM-61920
-    // dashboard_context: 'dashboard_context',
+    dashboard_context: 'dashboard_context',
     config: 'config',
     view_and_config: 'view_and_config'
 };
 const DATE_SELECTION_VALUES_ARR = [
-    // Will be uncommented in MTM-61920
-    // DATE_SELECTION_VALUES.dashboard_context,
+    DATE_SELECTION_VALUES.dashboard_context,
     DATE_SELECTION_VALUES.config,
     DATE_SELECTION_VALUES.view_and_config
 ];
@@ -766,10 +765,8 @@ class DatapointsTableWidgetConfigComponent {
         this.widgetConfig = widgetConfig;
         this.AGGREGATION_LABELS = AGGREGATION_LABELS;
         this.DATE_SELECTION_LABELS = DATE_SELECTION_LABELS;
-        // Will be uncommented in MTM-61920
-        // readonly DEFAULT_DATE_SELECTOR_VALUE = DATE_SELECTION_VALUES.dashboard_context;
-        this.DEFAULT_DATE_SELECTOR_VALUE = DATE_SELECTION_VALUES.config;
-        this.DEFAULT_INTERVAL_VALUE = TIME_RANGE_INTERVAL_UNITS_VALUES.hours;
+        this.DEFAULT_DATE_SELECTOR_VALUE = DATE_SELECTION_VALUES.dashboard_context;
+        this.DEFAULT_INTERVAL_VALUE = INTERVAL_VALUES.hours;
         this.TIME_RANGE_INTERVAL_LABELS = TIME_RANGE_INTERVAL_LABELS;
         this.AGGREGATION_VALUES_ARR = AGGREGATION_VALUES_ARR;
         this.DATE_SELECTION_VALUES_ARR = DATE_SELECTION_VALUES_ARR;
@@ -802,14 +799,11 @@ class DatapointsTableWidgetConfigComponent {
         this.destroy$ = new Subject();
     }
     ngOnInit() {
-        // Condition will be removed in MTM-61920
-        if (this.config.widgetInstanceGlobalTimeContext) {
-            this.config.widgetInstanceGlobalTimeContext = false;
-        }
         if (this.widgetConfig.context?.id) {
             this.datapointSelectionConfig.contextAsset = this.widgetConfig?.context;
         }
-        this.isWidgetLinkedToGlobalTimeContext = this.config.widgetInstanceGlobalTimeContext;
+        this.isWidgetLinkedToGlobalTimeContext =
+            this.config.widgetInstanceGlobalAutoRefreshContext ?? true;
         this.initForm();
         this.handleAutoRefreshToggleChanges();
         this.handleIntervalSelectorChanges();
@@ -826,8 +820,7 @@ class DatapointsTableWidgetConfigComponent {
         if (this.formGroup.value.aggregation === AGGREGATION_VALUES.none ||
             (!this.formGroup.value.aggregation && config.aggregation === AGGREGATION_VALUES.none)) {
             // The 'NONE' aggregation type is not handled by a backend, so it simply needs to be deleted to get data without aggregation.
-            delete this.formGroup.value.aggregation;
-            delete config.aggregation;
+            this.deleteAggregationProperty(config);
         }
         this.updateTimeContext(config, this.formGroup.value.globalDateSelector);
         Object.assign(config, this.formGroup.value);
@@ -839,19 +832,21 @@ class DatapointsTableWidgetConfigComponent {
     }
     updateTimeContext(config, selectedDateContext) {
         switch (selectedDateContext) {
-            // Condition will be removed in MTM-61920
-            // case DATE_SELECTION_VALUES.dashboard_context:
-            //   config.displayDateSelection = false;
-            //   config.widgetInstanceGlobalTimeContext = true;
-            //   break;
+            case DATE_SELECTION_VALUES.dashboard_context:
+                config.displayDateSelection = false;
+                config.widgetInstanceGlobalAutoRefreshContext = true;
+                if (config.aggregation !== 'NONE') {
+                    this.deleteAggregationProperty(config);
+                }
+                break;
             case DATE_SELECTION_VALUES.view_and_config:
                 config.displayDateSelection = true;
-                config.widgetInstanceGlobalTimeContext = false;
+                config.widgetInstanceGlobalAutoRefreshContext = false;
                 break;
             case DATE_SELECTION_VALUES.config:
             default:
                 config.displayDateSelection = false;
-                config.widgetInstanceGlobalTimeContext = false;
+                config.widgetInstanceGlobalAutoRefreshContext = false;
         }
     }
     initForm() {
@@ -865,7 +860,8 @@ class DatapointsTableWidgetConfigComponent {
     }
     createForm() {
         const { dateFrom, dateTo } = this.datapointsTableService.calculateDateRange(this.DEFAULT_INTERVAL_VALUE);
-        const isLegacyWidget = this.config.realtime !== undefined && !this.config.decimalPlaces;
+        const isLegacyWidget = this.config.hasOwnProperty('widgetInstanceGlobalTimeContext') &&
+            !this.config.hasOwnProperty('decimalPlaces');
         return this.formBuilder.group({
             aggregation: new FormControl({
                 value: AGGREGATION_VALUES.none,
@@ -877,7 +873,7 @@ class DatapointsTableWidgetConfigComponent {
                 minOneDatapointActive()
             ]),
             globalDateSelector: new FormControl(isLegacyWidget
-                ? this.determineGlobalDateSelectorValue()
+                ? this.determineGlobalDateSelectorValueForLegacyWidget()
                 : this.DEFAULT_DATE_SELECTOR_VALUE),
             dateFrom: new FormControl(dateFrom),
             dateTo: new FormControl(dateTo),
@@ -898,13 +894,16 @@ class DatapointsTableWidgetConfigComponent {
             })
         }, { validators: dateRangeValidator });
     }
-    determineGlobalDateSelectorValue() {
-        if (this.config.displayDateSelection && !this.config.widgetInstanceGlobalTimeContext) {
-            return DATE_SELECTION_VALUES.view_and_config;
-        }
-        if (!this.config.displayDateSelection && !this.config.widgetInstanceGlobalTimeContext) {
-            return DATE_SELECTION_VALUES.config;
+    determineGlobalDateSelectorValueForLegacyWidget() {
+        const { displayDateSelection, widgetInstanceGlobalAutoRefreshContext } = this.config;
+        // State of widgetInstanceGlobalTimeContext was converted to widgetInstanceGlobalAutoRefreshContext.
+        // That is why it use here in a legacy widget context.
+        if (widgetInstanceGlobalAutoRefreshContext) {
+            return DATE_SELECTION_VALUES.dashboard_context;
         }
+        return displayDateSelection
+            ? DATE_SELECTION_VALUES.view_and_config
+            : DATE_SELECTION_VALUES.config;
     }
     isAutoRefershDisabled() {
         const isInitialWidgetCreation = Object.keys(this.config).length === 1 && this.config['settings'];
@@ -912,9 +911,9 @@ class DatapointsTableWidgetConfigComponent {
             return false;
         }
         const isLegacyWidgetRealtimeNotActive = !this.config.realtime &&
-            !this.config.decimalPlaces &&
-            !this.config.refreshInterval &&
-            !this.config.isAutoRefreshEnabled;
+            !this.config.hasOwnProperty('decimalPlaces') &&
+            !this.config.hasOwnProperty('refreshInterval') &&
+            !this.config.hasOwnProperty('isAutoRefreshEnabled');
         if (isLegacyWidgetRealtimeNotActive) {
             return true;
         }
@@ -1032,14 +1031,13 @@ class DatapointsTableWidgetConfigComponent {
     handleGlobalDateSelectorChanges() {
         this.formGroup.controls.globalDateSelector.valueChanges
             .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
-            // .subscribe((selected: string) => {
-            // Condition will be removed in MTM-61920
-            // if (selected === DATE_SELECTION_VALUES.dashboard_context) {
-            // this.handleDashboardContext();
-            // } else {
-            this.handleNonDashboardContext();
-            // }
+            .subscribe((selected) => {
+            if (selected === DATE_SELECTION_VALUES.dashboard_context) {
+                this.handleDashboardContext();
+            }
+            else {
+                this.handleNonDashboardContext();
+            }
         });
     }
     handleDashboardContext() {
@@ -1054,7 +1052,7 @@ class DatapointsTableWidgetConfigComponent {
         this.setIntervalToCustom(this.formGroup.controls.interval);
     }
     isConfigSavedWithoutDashboardTimeOption() {
-        return !this.config.widgetInstanceGlobalTimeContext;
+        return !this.config.widgetInstanceGlobalAutoRefreshContext;
     }
     updateAggregationIfNecessary() {
         const aggregationControl = this.formGroup.controls.aggregation;
@@ -1090,8 +1088,12 @@ class DatapointsTableWidgetConfigComponent {
             aggregationControl.setValue(newAggregationValue);
         }
     }
+    deleteAggregationProperty(config) {
+        delete this.formGroup.value.aggregation;
+        delete config.aggregation;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsTableWidgetConfigComponent, deps: [{ token: DatapointsTableService }, { token: DatapointsTableConfigService }, { token: i3.FormBuilder }, { token: i3.NgForm }, { token: i4.WidgetConfigComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DatapointsTableWidgetConfigComponent, isStandalone: true, selector: "c8y-datapoints-table-view-config", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"p-l-24 p-r-24\">\n  <form\n    class=\"no-card-context\"\n    [formGroup]=\"formGroup\"\n  >\n    <!-- <datapoints-selector> -->\n    <div class=\"col-md-6\">\n      <div class=\"row\">\n        <!-- global-time-context-selector -->\n        <div class=\"form-group m-b-0 p-b-16 separator-bottom\">\n          <label\n            class=\"d-flex a-i-center p-t-4\"\n            for=\"dateSelection\"\n          >\n            {{ 'Date selection' | translate }}\n            <button\n              class=\"btn-help btn-help--sm\"\n              [attr.aria-label]=\"'Help' | translate\"\n              [popover]=\"popoverTemplate\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n              type=\"button\"\n              [adaptivePosition]=\"true\"\n            ></button>\n          </label>\n          <ng-template #popoverTemplate>\n            <span translate>\n              Choose how to select a date range, the available options are:\n              <ul class=\"m-l-0 p-l-8 m-t-8 m-b-0\">\n                <!-- Will be re-enabled in MTM-61920 -->\n                <!-- <li>\n                  <b>Dashboard time range:</b>\n                  restricts date selection to the global dashboard configuration only\n                </li> -->\n                <li>\n                  <b>Widget configuration:</b>\n                  restricts the date selection only to the widget configuration\n                </li>\n                <li>\n                  <b>Widget and widget configuration:</b>\n                  restricts the date selection to the widget view and widget configuration only\n                </li>\n              </ul>\n            </span>\n          </ng-template>\n          <div class=\"c8y-select-wrapper\">\n            <select\n              class=\"form-control text-12\"\n              [title]=\"'Date selection' | translate\"\n              [attr.aria-label]=\"'Date selection' | translate\"\n              id=\"globalDateSelector\"\n              formControlName=\"globalDateSelector\"\n            >\n              <option\n                *ngFor=\"let dataSelectionValue of DATE_SELECTION_VALUES_ARR\"\n                [ngValue]=\"dataSelectionValue\"\n              >\n                {{ DATE_SELECTION_LABELS[dataSelectionValue] | translate }}\n              </option>\n            </select>\n          </div>\n        </div>\n      </div>\n      <div class=\"row\">\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      </div>\n    </div>\n    <div class=\"col-md-6\">\n      <div class=\"row\">\n        <ng-container *ngIf=\"!isWidgetLinkedToGlobalTimeContext\">\n          <div class=\"col-md-6\">\n            <!-- interval selector -->\n            <fieldset class=\"c8y-fieldset\">\n              <legend class=\"d-flex a-i-center\">\n                {{ 'Auto refresh' | translate }}\n                <button\n                  class=\"btn-help btn-help--sm\"\n                  [attr.aria-label]=\"'Help' | translate\"\n                  [popover]=\"\n                    'Change the state of interval automatic refresh and set the refresh frequency.'\n                      | translate\n                  \"\n                  placement=\"top\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                  type=\"button\"\n                  [adaptivePosition]=\"true\"\n                ></button>\n              </legend>\n              <c8y-form-group class=\"m-b-16 form-group-sm\">\n                <div class=\"d-flex gap-4 m-t-8 m-b-8 a-i-center\">\n                  <label class=\"c8y-switch\">\n                    <input\n                      id=\"refreshToggle\"\n                      name=\"isAutoRefreshEnabled\"\n                      type=\"checkbox\"\n                      formControlName=\"isAutoRefreshEnabled\"\n                      (click)=\"toggleRefreshIntervalControl()\"\n                    />\n                    <span></span>\n                    <span class=\"sr-only\">{{ 'Auto refresh' | translate }}</span>\n                  </label>\n                  <label\n                    class=\"m-b-0\"\n                    for=\"refreshInterval\"\n                  >\n                    {{ 'Interval' | translate }}\n                  </label>\n                  <div class=\"c8y-select-wrapper\">\n                    <select\n                      class=\"form-control text-12\"\n                      [title]=\"'Refresh interval in seconds' | translate\"\n                      id=\"refreshInterval\"\n                      formControlName=\"refreshInterval\"\n                    >\n                      <option\n                        *ngFor=\"let refreshInterval of REFRESH_INTERVAL_VALUES_ARR\"\n                        [ngValue]=\"refreshInterval\"\n                      >\n                        {{ '{{ seconds }} s' | translate: { seconds: refreshInterval / 1000 } }}\n                      </option>\n                    </select>\n                  </div>\n                </div>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </ng-container>\n        <!-- decimal input -->\n        <div class=\"col-md-6\">\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        </div>\n      </div>\n      <!-- aggregation selector -->\n      <ng-container *ngIf=\"!isWidgetLinkedToGlobalTimeContext\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset\">\n              <legend>\n                {{ 'Aggregation' | translate }}\n              </legend>\n              <c8y-form-group class=\"p-t-8\">\n                <div class=\"c8y-select-wrapper\">\n                  <!-- Setting below [attr.disabled] ensures that the control is visually disabled and user interaction is prevented,\n               while still allowing the value to be updated and saved correctly in the form.\n               This solution covers the case where the user enables auto-refresh, in which case aggregation must be set to NONE. -->\n                  <select\n                    class=\"form-control text-12\"\n                    [title]=\"'Aggregation' | translate\"\n                    id=\"aggregation\"\n                    formControlName=\"aggregation\"\n                    [attr.disabled]=\"formGroup.value.isAutoRefreshEnabled ? true : null\"\n                  >\n                    <option\n                      *ngFor=\"let aggregationValue of AGGREGATION_VALUES_ARR\"\n                      [ngValue]=\"aggregationValue\"\n                      [disabled]=\"disabledAggregationOptions[aggregationValue]\"\n                    >\n                      {{ AGGREGATION_LABELS[aggregationValue] | translate }}\n                    </option>\n                  </select>\n                </div>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <!-- time interval selector -->\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset\">\n              <legend>\n                {{ 'Time interval' | translate }}\n              </legend>\n              <c8y-form-group class=\"p-t-8\">\n                <div class=\"c8y-select-wrapper\">\n                  <select\n                    class=\"form-control text-12\"\n                    [title]=\"'Interval' | translate\"\n                    id=\"interval\"\n                    formControlName=\"interval\"\n                  >\n                    <option\n                      *ngFor=\"let intervalValue of INTERVAL_VALUES_ARR\"\n                      [ngValue]=\"intervalValue\"\n                    >\n                      {{ TIME_RANGE_INTERVAL_LABELS[intervalValue] | translate }}\n                    </option>\n                  </select>\n                </div>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n        <!-- date pickers -->\n        <fieldset class=\"c8y-fieldset\">\n          <legend>\n            {{ 'Date range' | translate }}\n          </legend>\n          <c8y-date-range-picker></c8y-date-range-picker>\n        </fieldset>\n      </ng-container>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "pipe", type: i1$1.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i1$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i1$1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i7.DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle"], outputs: ["isValid", "change"] }, { kind: "component", type: DateRangePickerComponent, selector: "c8y-date-range-picker", inputs: ["isEmittingDateChange", "showLabel"], outputs: ["updatedDate"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i8.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DatapointsTableWidgetConfigComponent, isStandalone: true, selector: "c8y-datapoints-table-view-config", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"p-l-24 p-r-24\">\n  <form\n    class=\"no-card-context\"\n    [formGroup]=\"formGroup\"\n  >\n    <!-- <datapoints-selector> -->\n    <div class=\"col-md-6\">\n      <div class=\"row\">\n        <!-- global-time-context-selector -->\n        <div class=\"form-group m-b-0 p-b-16 separator-bottom\">\n          <label\n            class=\"d-flex a-i-center p-t-4\"\n            for=\"dateSelection\"\n          >\n            {{ 'Date selection' | translate }}\n            <button\n              class=\"btn-help btn-help--sm\"\n              [attr.aria-label]=\"'Help' | translate\"\n              [popover]=\"popoverTemplate\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n              type=\"button\"\n              [adaptivePosition]=\"true\"\n            ></button>\n          </label>\n          <ng-template #popoverTemplate>\n            <span translate>\n              Choose how to select a date range, the available options are:\n              <ul class=\"m-l-0 p-l-8 m-t-8 m-b-0\">\n                <li>\n                  <b>Dashboard time range:</b>\n                  restricts date selection to the global dashboard configuration only\n                </li>\n                <li>\n                  <b>Widget configuration:</b>\n                  restricts the date selection only to the widget configuration\n                </li>\n                <li>\n                  <b>Widget and widget configuration:</b>\n                  restricts the date selection to the widget view and widget configuration only\n                </li>\n              </ul>\n            </span>\n          </ng-template>\n          <div class=\"c8y-select-wrapper\">\n            <select\n              class=\"form-control text-12\"\n              [title]=\"'Date selection' | translate\"\n              [attr.aria-label]=\"'Date selection' | translate\"\n              id=\"globalDateSelector\"\n              formControlName=\"globalDateSelector\"\n            >\n              <option\n                *ngFor=\"let dataSelectionValue of DATE_SELECTION_VALUES_ARR\"\n                [ngValue]=\"dataSelectionValue\"\n              >\n                {{ DATE_SELECTION_LABELS[dataSelectionValue] | translate }}\n              </option>\n            </select>\n          </div>\n        </div>\n      </div>\n      <div class=\"row\">\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      </div>\n    </div>\n    <div class=\"col-md-6\">\n      <div class=\"row\">\n        <ng-container *ngIf=\"!isWidgetLinkedToGlobalTimeContext\">\n          <div class=\"col-md-6\">\n            <!-- interval selector -->\n            <fieldset class=\"c8y-fieldset\">\n              <legend class=\"d-flex a-i-center\">\n                {{ 'Auto refresh' | translate }}\n                <button\n                  class=\"btn-help btn-help--sm\"\n                  [attr.aria-label]=\"'Help' | translate\"\n                  [popover]=\"\n                    'Change the state of interval automatic refresh and set the refresh frequency.'\n                      | translate\n                  \"\n                  placement=\"top\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                  type=\"button\"\n                  [adaptivePosition]=\"true\"\n                ></button>\n              </legend>\n              <c8y-form-group class=\"m-b-16 form-group-sm\">\n                <div class=\"d-flex gap-4 m-t-8 m-b-8 a-i-center\">\n                  <label class=\"c8y-switch\">\n                    <input\n                      id=\"refreshToggle\"\n                      name=\"isAutoRefreshEnabled\"\n                      type=\"checkbox\"\n                      formControlName=\"isAutoRefreshEnabled\"\n                      (click)=\"toggleRefreshIntervalControl()\"\n                    />\n                    <span></span>\n                    <span class=\"sr-only\">{{ 'Auto refresh' | translate }}</span>\n                  </label>\n                  <label\n                    class=\"m-b-0\"\n                    for=\"refreshInterval\"\n                  >\n                    {{ 'Interval' | translate }}\n                  </label>\n                  <div class=\"c8y-select-wrapper\">\n                    <select\n                      class=\"form-control text-12\"\n                      [title]=\"'Refresh interval in seconds' | translate\"\n                      id=\"refreshInterval\"\n                      formControlName=\"refreshInterval\"\n                    >\n                      <option\n                        *ngFor=\"let refreshInterval of REFRESH_INTERVAL_VALUES_ARR\"\n                        [ngValue]=\"refreshInterval\"\n                      >\n                        {{ '{{ seconds }} s' | translate: { seconds: refreshInterval / 1000 } }}\n                      </option>\n                    </select>\n                  </div>\n                </div>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </ng-container>\n        <!-- decimal input -->\n        <div class=\"col-md-6\">\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        </div>\n      </div>\n      <!-- aggregation selector -->\n      <div class=\"row\">\n        <ng-container *ngIf=\"!isWidgetLinkedToGlobalTimeContext\">\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset\">\n              <legend>\n                {{ 'Aggregation' | translate }}\n              </legend>\n              <c8y-form-group class=\"p-t-8\">\n                <div class=\"c8y-select-wrapper\">\n                  <!-- Setting below [attr.disabled] ensures that the control is visually disabled and user interaction is prevented,\n               while still allowing the value to be updated and saved correctly in the form.\n               This solution covers the case where the user enables auto-refresh, in which case aggregation must be set to NONE. -->\n                  <select\n                    class=\"form-control text-12\"\n                    [title]=\"'Aggregation' | translate\"\n                    id=\"aggregation\"\n                    formControlName=\"aggregation\"\n                    [attr.disabled]=\"formGroup.value.isAutoRefreshEnabled ? true : null\"\n                  >\n                    <option\n                      *ngFor=\"let aggregationValue of AGGREGATION_VALUES_ARR\"\n                      [ngValue]=\"aggregationValue\"\n                      [disabled]=\"disabledAggregationOptions[aggregationValue]\"\n                    >\n                      {{ AGGREGATION_LABELS[aggregationValue] | translate }}\n                    </option>\n                  </select>\n                </div>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </ng-container>\n        <!-- time interval selector -->\n        <div class=\"col-md-6\">\n          <fieldset class=\"c8y-fieldset\">\n            <legend>\n              {{ 'Time interval' | translate }}\n            </legend>\n            <c8y-form-group class=\"p-t-8\">\n              <div class=\"c8y-select-wrapper\">\n                <select\n                  class=\"form-control text-12\"\n                  [title]=\"'Interval' | translate\"\n                  id=\"interval\"\n                  formControlName=\"interval\"\n                >\n                  <option\n                    *ngFor=\"let intervalValue of INTERVAL_VALUES_ARR\"\n                    [ngValue]=\"intervalValue\"\n                  >\n                    {{ TIME_RANGE_INTERVAL_LABELS[intervalValue] | translate }}\n                  </option>\n                </select>\n              </div>\n            </c8y-form-group>\n          </fieldset>\n        </div>\n      </div>\n      <!-- date pickers -->\n      <fieldset class=\"c8y-fieldset\">\n        <legend>\n          {{ 'Date range' | translate }}\n        </legend>\n        <c8y-date-range-picker></c8y-date-range-picker>\n      </fieldset>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "pipe", type: i1$1.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i1$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i1$1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i7.DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle"], outputs: ["isValid", "change"] }, { kind: "component", type: DateRangePickerComponent, selector: "c8y-date-range-picker", inputs: ["isEmittingDateChange", "showLabel"], outputs: ["updatedDate"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i8.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsTableWidgetConfigComponent, decorators: [{
             type: Component,
@@ -1101,7 +1103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         DateRangePickerComponent,
                         PopoverModule,
                         ReactiveFormsModule
-                    ], template: "<div class=\"p-l-24 p-r-24\">\n  <form\n    class=\"no-card-context\"\n    [formGroup]=\"formGroup\"\n  >\n    <!-- <datapoints-selector> -->\n    <div class=\"col-md-6\">\n      <div class=\"row\">\n        <!-- global-time-context-selector -->\n        <div class=\"form-group m-b-0 p-b-16 separator-bottom\">\n          <label\n            class=\"d-flex a-i-center p-t-4\"\n            for=\"dateSelection\"\n          >\n            {{ 'Date selection' | translate }}\n            <button\n              class=\"btn-help btn-help--sm\"\n              [attr.aria-label]=\"'Help' | translate\"\n              [popover]=\"popoverTemplate\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n              type=\"button\"\n              [adaptivePosition]=\"true\"\n            ></button>\n          </label>\n          <ng-template #popoverTemplate>\n            <span translate>\n              Choose how to select a date range, the available options are:\n              <ul class=\"m-l-0 p-l-8 m-t-8 m-b-0\">\n                <!-- Will be re-enabled in MTM-61920 -->\n                <!-- <li>\n                  <b>Dashboard time range:</b>\n                  restricts date selection to the global dashboard configuration only\n                </li> -->\n                <li>\n                  <b>Widget configuration:</b>\n                  restricts the date selection only to the widget configuration\n                </li>\n                <li>\n                  <b>Widget and widget configuration:</b>\n                  restricts the date selection to the widget view and widget configuration only\n                </li>\n              </ul>\n            </span>\n          </ng-template>\n          <div class=\"c8y-select-wrapper\">\n            <select\n              class=\"form-control text-12\"\n              [title]=\"'Date selection' | translate\"\n              [attr.aria-label]=\"'Date selection' | translate\"\n              id=\"globalDateSelector\"\n              formControlName=\"globalDateSelector\"\n            >\n              <option\n                *ngFor=\"let dataSelectionValue of DATE_SELECTION_VALUES_ARR\"\n                [ngValue]=\"dataSelectionValue\"\n              >\n                {{ DATE_SELECTION_LABELS[dataSelectionValue] | translate }}\n              </option>\n            </select>\n          </div>\n        </div>\n      </div>\n      <div class=\"row\">\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      </div>\n    </div>\n    <div class=\"col-md-6\">\n      <div class=\"row\">\n        <ng-container *ngIf=\"!isWidgetLinkedToGlobalTimeContext\">\n          <div class=\"col-md-6\">\n            <!-- interval selector -->\n            <fieldset class=\"c8y-fieldset\">\n              <legend class=\"d-flex a-i-center\">\n                {{ 'Auto refresh' | translate }}\n                <button\n                  class=\"btn-help btn-help--sm\"\n                  [attr.aria-label]=\"'Help' | translate\"\n                  [popover]=\"\n                    'Change the state of interval automatic refresh and set the refresh frequency.'\n                      | translate\n                  \"\n                  placement=\"top\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                  type=\"button\"\n                  [adaptivePosition]=\"true\"\n                ></button>\n              </legend>\n              <c8y-form-group class=\"m-b-16 form-group-sm\">\n                <div class=\"d-flex gap-4 m-t-8 m-b-8 a-i-center\">\n                  <label class=\"c8y-switch\">\n                    <input\n                      id=\"refreshToggle\"\n                      name=\"isAutoRefreshEnabled\"\n                      type=\"checkbox\"\n                      formControlName=\"isAutoRefreshEnabled\"\n                      (click)=\"toggleRefreshIntervalControl()\"\n                    />\n                    <span></span>\n                    <span class=\"sr-only\">{{ 'Auto refresh' | translate }}</span>\n                  </label>\n                  <label\n                    class=\"m-b-0\"\n                    for=\"refreshInterval\"\n                  >\n                    {{ 'Interval' | translate }}\n                  </label>\n                  <div class=\"c8y-select-wrapper\">\n                    <select\n                      class=\"form-control text-12\"\n                      [title]=\"'Refresh interval in seconds' | translate\"\n                      id=\"refreshInterval\"\n                      formControlName=\"refreshInterval\"\n                    >\n                      <option\n                        *ngFor=\"let refreshInterval of REFRESH_INTERVAL_VALUES_ARR\"\n                        [ngValue]=\"refreshInterval\"\n                      >\n                        {{ '{{ seconds }} s' | translate: { seconds: refreshInterval / 1000 } }}\n                      </option>\n                    </select>\n                  </div>\n                </div>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </ng-container>\n        <!-- decimal input -->\n        <div class=\"col-md-6\">\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        </div>\n      </div>\n      <!-- aggregation selector -->\n      <ng-container *ngIf=\"!isWidgetLinkedToGlobalTimeContext\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset\">\n              <legend>\n                {{ 'Aggregation' | translate }}\n              </legend>\n              <c8y-form-group class=\"p-t-8\">\n                <div class=\"c8y-select-wrapper\">\n                  <!-- Setting below [attr.disabled] ensures that the control is visually disabled and user interaction is prevented,\n               while still allowing the value to be updated and saved correctly in the form.\n               This solution covers the case where the user enables auto-refresh, in which case aggregation must be set to NONE. -->\n                  <select\n                    class=\"form-control text-12\"\n                    [title]=\"'Aggregation' | translate\"\n                    id=\"aggregation\"\n                    formControlName=\"aggregation\"\n                    [attr.disabled]=\"formGroup.value.isAutoRefreshEnabled ? true : null\"\n                  >\n                    <option\n                      *ngFor=\"let aggregationValue of AGGREGATION_VALUES_ARR\"\n                      [ngValue]=\"aggregationValue\"\n                      [disabled]=\"disabledAggregationOptions[aggregationValue]\"\n                    >\n                      {{ AGGREGATION_LABELS[aggregationValue] | translate }}\n                    </option>\n                  </select>\n                </div>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <!-- time interval selector -->\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset\">\n              <legend>\n                {{ 'Time interval' | translate }}\n              </legend>\n              <c8y-form-group class=\"p-t-8\">\n                <div class=\"c8y-select-wrapper\">\n                  <select\n                    class=\"form-control text-12\"\n                    [title]=\"'Interval' | translate\"\n                    id=\"interval\"\n                    formControlName=\"interval\"\n                  >\n                    <option\n                      *ngFor=\"let intervalValue of INTERVAL_VALUES_ARR\"\n                      [ngValue]=\"intervalValue\"\n                    >\n                      {{ TIME_RANGE_INTERVAL_LABELS[intervalValue] | translate }}\n                    </option>\n                  </select>\n                </div>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n        <!-- date pickers -->\n        <fieldset class=\"c8y-fieldset\">\n          <legend>\n            {{ 'Date range' | translate }}\n          </legend>\n          <c8y-date-range-picker></c8y-date-range-picker>\n        </fieldset>\n      </ng-container>\n    </div>\n  </form>\n</div>\n" }]
+                    ], template: "<div class=\"p-l-24 p-r-24\">\n  <form\n    class=\"no-card-context\"\n    [formGroup]=\"formGroup\"\n  >\n    <!-- <datapoints-selector> -->\n    <div class=\"col-md-6\">\n      <div class=\"row\">\n        <!-- global-time-context-selector -->\n        <div class=\"form-group m-b-0 p-b-16 separator-bottom\">\n          <label\n            class=\"d-flex a-i-center p-t-4\"\n            for=\"dateSelection\"\n          >\n            {{ 'Date selection' | translate }}\n            <button\n              class=\"btn-help btn-help--sm\"\n              [attr.aria-label]=\"'Help' | translate\"\n              [popover]=\"popoverTemplate\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n              type=\"button\"\n              [adaptivePosition]=\"true\"\n            ></button>\n          </label>\n          <ng-template #popoverTemplate>\n            <span translate>\n              Choose how to select a date range, the available options are:\n              <ul class=\"m-l-0 p-l-8 m-t-8 m-b-0\">\n                <li>\n                  <b>Dashboard time range:</b>\n                  restricts date selection to the global dashboard configuration only\n                </li>\n                <li>\n                  <b>Widget configuration:</b>\n                  restricts the date selection only to the widget configuration\n                </li>\n                <li>\n                  <b>Widget and widget configuration:</b>\n                  restricts the date selection to the widget view and widget configuration only\n                </li>\n              </ul>\n            </span>\n          </ng-template>\n          <div class=\"c8y-select-wrapper\">\n            <select\n              class=\"form-control text-12\"\n              [title]=\"'Date selection' | translate\"\n              [attr.aria-label]=\"'Date selection' | translate\"\n              id=\"globalDateSelector\"\n              formControlName=\"globalDateSelector\"\n            >\n              <option\n                *ngFor=\"let dataSelectionValue of DATE_SELECTION_VALUES_ARR\"\n                [ngValue]=\"dataSelectionValue\"\n              >\n                {{ DATE_SELECTION_LABELS[dataSelectionValue] | translate }}\n              </option>\n            </select>\n          </div>\n        </div>\n      </div>\n      <div class=\"row\">\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      </div>\n    </div>\n    <div class=\"col-md-6\">\n      <div class=\"row\">\n        <ng-container *ngIf=\"!isWidgetLinkedToGlobalTimeContext\">\n          <div class=\"col-md-6\">\n            <!-- interval selector -->\n            <fieldset class=\"c8y-fieldset\">\n              <legend class=\"d-flex a-i-center\">\n                {{ 'Auto refresh' | translate }}\n                <button\n                  class=\"btn-help btn-help--sm\"\n                  [attr.aria-label]=\"'Help' | translate\"\n                  [popover]=\"\n                    'Change the state of interval automatic refresh and set the refresh frequency.'\n                      | translate\n                  \"\n                  placement=\"top\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                  type=\"button\"\n                  [adaptivePosition]=\"true\"\n                ></button>\n              </legend>\n              <c8y-form-group class=\"m-b-16 form-group-sm\">\n                <div class=\"d-flex gap-4 m-t-8 m-b-8 a-i-center\">\n                  <label class=\"c8y-switch\">\n                    <input\n                      id=\"refreshToggle\"\n                      name=\"isAutoRefreshEnabled\"\n                      type=\"checkbox\"\n                      formControlName=\"isAutoRefreshEnabled\"\n                      (click)=\"toggleRefreshIntervalControl()\"\n                    />\n                    <span></span>\n                    <span class=\"sr-only\">{{ 'Auto refresh' | translate }}</span>\n                  </label>\n                  <label\n                    class=\"m-b-0\"\n                    for=\"refreshInterval\"\n                  >\n                    {{ 'Interval' | translate }}\n                  </label>\n                  <div class=\"c8y-select-wrapper\">\n                    <select\n                      class=\"form-control text-12\"\n                      [title]=\"'Refresh interval in seconds' | translate\"\n                      id=\"refreshInterval\"\n                      formControlName=\"refreshInterval\"\n                    >\n                      <option\n                        *ngFor=\"let refreshInterval of REFRESH_INTERVAL_VALUES_ARR\"\n                        [ngValue]=\"refreshInterval\"\n                      >\n                        {{ '{{ seconds }} s' | translate: { seconds: refreshInterval / 1000 } }}\n                      </option>\n                    </select>\n                  </div>\n                </div>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </ng-container>\n        <!-- decimal input -->\n        <div class=\"col-md-6\">\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        </div>\n      </div>\n      <!-- aggregation selector -->\n      <div class=\"row\">\n        <ng-container *ngIf=\"!isWidgetLinkedToGlobalTimeContext\">\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset\">\n              <legend>\n                {{ 'Aggregation' | translate }}\n              </legend>\n              <c8y-form-group class=\"p-t-8\">\n                <div class=\"c8y-select-wrapper\">\n                  <!-- Setting below [attr.disabled] ensures that the control is visually disabled and user interaction is prevented,\n               while still allowing the value to be updated and saved correctly in the form.\n               This solution covers the case where the user enables auto-refresh, in which case aggregation must be set to NONE. -->\n                  <select\n                    class=\"form-control text-12\"\n                    [title]=\"'Aggregation' | translate\"\n                    id=\"aggregation\"\n                    formControlName=\"aggregation\"\n                    [attr.disabled]=\"formGroup.value.isAutoRefreshEnabled ? true : null\"\n                  >\n                    <option\n                      *ngFor=\"let aggregationValue of AGGREGATION_VALUES_ARR\"\n                      [ngValue]=\"aggregationValue\"\n                      [disabled]=\"disabledAggregationOptions[aggregationValue]\"\n                    >\n                      {{ AGGREGATION_LABELS[aggregationValue] | translate }}\n                    </option>\n                  </select>\n                </div>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </ng-container>\n        <!-- time interval selector -->\n        <div class=\"col-md-6\">\n          <fieldset class=\"c8y-fieldset\">\n            <legend>\n              {{ 'Time interval' | translate }}\n            </legend>\n            <c8y-form-group class=\"p-t-8\">\n              <div class=\"c8y-select-wrapper\">\n                <select\n                  class=\"form-control text-12\"\n                  [title]=\"'Interval' | translate\"\n                  id=\"interval\"\n                  formControlName=\"interval\"\n                >\n                  <option\n                    *ngFor=\"let intervalValue of INTERVAL_VALUES_ARR\"\n                    [ngValue]=\"intervalValue\"\n                  >\n                    {{ TIME_RANGE_INTERVAL_LABELS[intervalValue] | translate }}\n                  </option>\n                </select>\n              </div>\n            </c8y-form-group>\n          </fieldset>\n        </div>\n      </div>\n      <!-- date pickers -->\n      <fieldset class=\"c8y-fieldset\">\n        <legend>\n          {{ 'Date range' | translate }}\n        </legend>\n        <c8y-date-range-picker></c8y-date-range-picker>\n      </fieldset>\n    </div>\n  </form>\n</div>\n" }]
         }], ctorParameters: () => [{ type: DatapointsTableService }, { type: DatapointsTableConfigService }, { type: i3.FormBuilder }, { type: i3.NgForm }, { type: i4.WidgetConfigComponent }], propDecorators: { config: [{
                 type: Input
             }] } });
@@ -1329,11 +1331,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
         }] });
 
 class DatapointsReloadComponent extends IntervalBasedReload {
-    constructor(cdRef, injector, translateService) {
+    constructor(cdRef, translateService, widgetGlobalAutoRefreshService) {
         super();
         this.cdRef = cdRef;
-        this.injector = injector;
         this.translateService = translateService;
+        this.widgetGlobalAutoRefreshService = widgetGlobalAutoRefreshService;
+        /**
+         * @inheritdoc
+         */
+        this.isRefreshDisabled = false;
         /**
          * @inheritdoc
          */
@@ -1342,9 +1348,17 @@ class DatapointsReloadComponent extends IntervalBasedReload {
          * @inheritdoc
          */
         this.manuallyDisabledCountdown = false;
+        this.destroy$ = new Subject();
+    }
+    ngAfterViewInit() {
+        if (this.widgetInstanceGlobalAutoRefreshContext) {
+            this.widgetGlobalAutoRefreshService.countdownActions.countdownEnded$
+                .pipe(takeUntil(this.destroy$), tap(() => this.onCountdownEnded.emit()))
+                .subscribe();
+        }
     }
     ngOnChanges(changes) {
-        if (this.isDisabled && this.isAutoRefreshEnabled) {
+        if (this.isRefreshDisabled && this.isAutoRefreshEnabled) {
             this.isIntervalRefreshToggleOn = false;
             this.disableCountdown();
             return;
@@ -1356,13 +1370,20 @@ class DatapointsReloadComponent extends IntervalBasedReload {
         else {
             if (this.canStartCountdown(changes)) {
                 this.isIntervalRefreshToggleOn = true;
-                this.startCountdown(this.injector);
+                this.startCountdown();
             }
             if (this.canHandleScrolling()) {
                 this.handleScrolling();
             }
         }
     }
+    ngOnDestroy() {
+        if (this.countdownSubscription) {
+            this.countdownSubscription.unsubscribe();
+        }
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
     /**
      * @inheritdoc
      */
@@ -1385,7 +1406,7 @@ class DatapointsReloadComponent extends IntervalBasedReload {
         this.hideCountdown = false;
         // Prevents the countdown from getting stuck on an initial value.
         this.cdRef.detectChanges();
-        this.startCountdown(this.injector);
+        this.startCountdown();
     }
     /**
      * @inheritdoc
@@ -1410,18 +1431,18 @@ class DatapointsReloadComponent extends IntervalBasedReload {
             !this.isScrolling &&
             !this.hideCountdown);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsReloadComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DatapointsReloadComponent, isStandalone: true, selector: "c8y-datapoints-reload", inputs: { isAutoRefreshEnabled: "isAutoRefreshEnabled", isDisabled: "isDisabled", isLoading: "isLoading", isScrolling: "isScrolling", isExportModalOpen: "isExportModalOpen", refreshInterval: "refreshInterval" }, outputs: { onCountdownEnded: "onCountdownEnded" }, viewQueries: [{ propertyName: "countdownIntervalComponent", first: true, predicate: CountdownIntervalComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex a-i-center p-t-4 p-b-4\">\n  <label\n    class=\"m-b-0 m-r-8 text-label-small text-truncate flex-no-shrink\"\n    title=\" {{ 'Auto refresh' | translate }}\"\n    *ngIf=\"refreshInterval && isAutoRefreshEnabled\"\n  >\n    {{ 'Auto refresh' | translate }}\n  </label>\n  <div class=\"input-group\">\n    <label\n      class=\"toggle-countdown\"\n      [class.toggle-countdown-disabled]=\"isDisabled\"\n      [attr.aria-label]=\"toggleCountdownButtonTooltipText\"\n      [tooltip]=\"toggleCountdownButtonTooltipText\"\n      placement=\"bottom\"\n      *ngIf=\"refreshInterval && isAutoRefreshEnabled\"\n      [adaptivePosition]=\"false\"\n      [container]=\"'body'\"\n      [delay]=\"500\"\n    >\n      <input\n        type=\"checkbox\"\n        [checked]=\"isIntervalRefreshToggleOn\"\n        [disabled]=\"isDisabled\"\n        data-cy=\"c8y-data-points-table-widget--interval-toggle-button\"\n        (click)=\"onToggleCountdownButtonState($event)\"\n      />\n\n      <c8y-countdown-interval\n        *ngIf=\"isIntervalRefreshToggleOn\"\n        [countdownInterval]=\"refreshInterval\"\n        (countdownEnded)=\"countdownEnded()\"\n      ></c8y-countdown-interval>\n      <i\n        c8yIcon=\"pause\"\n        *ngIf=\"!isIntervalRefreshToggleOn\"\n      ></i>\n    </label>\n\n    <div class=\"input-group-btn\">\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Refresh' | translate\"\n        [tooltip]=\"'Refresh' | translate\"\n        placement=\"bottom\"\n        type=\"button\"\n        [adaptivePosition]=\"false\"\n        [container]=\"'body'\"\n        [delay]=\"500\"\n        [disabled]=\"isLoading()\"\n        (click)=\"reload()\"\n        data-cy=\"c8y-data-points-table-widget--reload-button\"\n      >\n        <i\n          c8yIcon=\"refresh\"\n          [ngClass]=\"{ 'icon-spin': isLoading() }\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i1$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i1$1.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CountdownIntervalModule }, { kind: "component", type: i1$1.CountdownIntervalComponent, selector: "c8y-countdown-interval", inputs: ["countdownInterval"], outputs: ["countdownEnded"] }, { kind: "ngmodule", type: ListGroupModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsReloadComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.TranslateService }, { token: i1$1.WidgetGlobalAutoRefreshService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DatapointsReloadComponent, isStandalone: true, selector: "c8y-datapoints-reload", inputs: { isAutoRefreshEnabled: "isAutoRefreshEnabled", isRefreshDisabled: "isRefreshDisabled", isLoading: "isLoading", isScrolling: "isScrolling", isExportModalOpen: "isExportModalOpen", refreshInterval: "refreshInterval", widgetInstanceGlobalAutoRefreshContext: "widgetInstanceGlobalAutoRefreshContext" }, outputs: { onCountdownEnded: "onCountdownEnded" }, viewQueries: [{ propertyName: "countdownIntervalComponent", first: true, predicate: CountdownIntervalComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!widgetInstanceGlobalAutoRefreshContext\">\n  <div class=\"a-i-center input-group p-t-4 p-b-4 max-width-fit m-l-auto\">\n    <label\n      class=\"m-b-0 m-r-8 text-label-small text-truncate flex-no-shrink\"\n      title=\" {{ 'Auto refresh' | translate }}\"\n      *ngIf=\"refreshInterval && isAutoRefreshEnabled\"\n    >\n      {{ 'Auto refresh' | translate }}\n    </label>\n    <div class=\"input-group\">\n      <label\n        class=\"toggle-countdown\"\n        [class.toggle-countdown-disabled]=\"isRefreshDisabled\"\n        [attr.aria-label]=\"toggleCountdownButtonTooltipText\"\n        [tooltip]=\"toggleCountdownButtonTooltipText\"\n        placement=\"bottom\"\n        *ngIf=\"refreshInterval && isAutoRefreshEnabled\"\n        [adaptivePosition]=\"false\"\n        [container]=\"'body'\"\n        [delay]=\"500\"\n      >\n        <input\n          type=\"checkbox\"\n          [checked]=\"isIntervalRefreshToggleOn\"\n          [disabled]=\"isRefreshDisabled\"\n          data-cy=\"c8y-data-points-table-widget--interval-toggle-button\"\n          (click)=\"onToggleCountdownButtonState($event)\"\n        />\n\n        <c8y-countdown-interval\n          *ngIf=\"isIntervalRefreshToggleOn\"\n          [countdownInterval]=\"refreshInterval\"\n          (countdownEnded)=\"countdownEnded()\"\n        ></c8y-countdown-interval>\n        <i\n          c8yIcon=\"pause\"\n          *ngIf=\"!isIntervalRefreshToggleOn\"\n        ></i>\n      </label>\n\n      <div class=\"input-group-btn\">\n        <button\n          class=\"btn btn-default\"\n          [attr.aria-label]=\"'Refresh' | translate\"\n          [tooltip]=\"'Refresh' | translate\"\n          placement=\"bottom\"\n          type=\"button\"\n          [adaptivePosition]=\"false\"\n          [container]=\"'body'\"\n          [delay]=\"500\"\n          [disabled]=\"isRefreshDisabled || (isLoading | async)\"\n          (click)=\"reload()\"\n          data-cy=\"c8y-data-points-table-widget--reload-button\"\n        >\n          <i\n            c8yIcon=\"refresh\"\n            [ngClass]=\"{ 'icon-spin': isLoading | async }\"\n          ></i>\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i1$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i1$1.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CountdownIntervalModule }, { kind: "component", type: i1$1.CountdownIntervalComponent, selector: "c8y-countdown-interval", inputs: ["countdownInterval"], outputs: ["countdownEnded"] }, { kind: "ngmodule", type: ListGroupModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsReloadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-datapoints-reload', standalone: true, imports: [CommonModule$1, CountdownIntervalModule, ListGroupModule, TooltipModule], template: "<div class=\"d-flex a-i-center p-t-4 p-b-4\">\n  <label\n    class=\"m-b-0 m-r-8 text-label-small text-truncate flex-no-shrink\"\n    title=\" {{ 'Auto refresh' | translate }}\"\n    *ngIf=\"refreshInterval && isAutoRefreshEnabled\"\n  >\n    {{ 'Auto refresh' | translate }}\n  </label>\n  <div class=\"input-group\">\n    <label\n      class=\"toggle-countdown\"\n      [class.toggle-countdown-disabled]=\"isDisabled\"\n      [attr.aria-label]=\"toggleCountdownButtonTooltipText\"\n      [tooltip]=\"toggleCountdownButtonTooltipText\"\n      placement=\"bottom\"\n      *ngIf=\"refreshInterval && isAutoRefreshEnabled\"\n      [adaptivePosition]=\"false\"\n      [container]=\"'body'\"\n      [delay]=\"500\"\n    >\n      <input\n        type=\"checkbox\"\n        [checked]=\"isIntervalRefreshToggleOn\"\n        [disabled]=\"isDisabled\"\n        data-cy=\"c8y-data-points-table-widget--interval-toggle-button\"\n        (click)=\"onToggleCountdownButtonState($event)\"\n      />\n\n      <c8y-countdown-interval\n        *ngIf=\"isIntervalRefreshToggleOn\"\n        [countdownInterval]=\"refreshInterval\"\n        (countdownEnded)=\"countdownEnded()\"\n      ></c8y-countdown-interval>\n      <i\n        c8yIcon=\"pause\"\n        *ngIf=\"!isIntervalRefreshToggleOn\"\n      ></i>\n    </label>\n\n    <div class=\"input-group-btn\">\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Refresh' | translate\"\n        [tooltip]=\"'Refresh' | translate\"\n        placement=\"bottom\"\n        type=\"button\"\n        [adaptivePosition]=\"false\"\n        [container]=\"'body'\"\n        [delay]=\"500\"\n        [disabled]=\"isLoading()\"\n        (click)=\"reload()\"\n        data-cy=\"c8y-data-points-table-widget--reload-button\"\n      >\n        <i\n          c8yIcon=\"refresh\"\n          [ngClass]=\"{ 'icon-spin': isLoading() }\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i1$2.TranslateService }], propDecorators: { countdownIntervalComponent: [{
+            args: [{ selector: 'c8y-datapoints-reload', standalone: true, imports: [CommonModule$1, CountdownIntervalModule, ListGroupModule, TooltipModule], template: "<ng-container *ngIf=\"!widgetInstanceGlobalAutoRefreshContext\">\n  <div class=\"a-i-center input-group p-t-4 p-b-4 max-width-fit m-l-auto\">\n    <label\n      class=\"m-b-0 m-r-8 text-label-small text-truncate flex-no-shrink\"\n      title=\" {{ 'Auto refresh' | translate }}\"\n      *ngIf=\"refreshInterval && isAutoRefreshEnabled\"\n    >\n      {{ 'Auto refresh' | translate }}\n    </label>\n    <div class=\"input-group\">\n      <label\n        class=\"toggle-countdown\"\n        [class.toggle-countdown-disabled]=\"isRefreshDisabled\"\n        [attr.aria-label]=\"toggleCountdownButtonTooltipText\"\n        [tooltip]=\"toggleCountdownButtonTooltipText\"\n        placement=\"bottom\"\n        *ngIf=\"refreshInterval && isAutoRefreshEnabled\"\n        [adaptivePosition]=\"false\"\n        [container]=\"'body'\"\n        [delay]=\"500\"\n      >\n        <input\n          type=\"checkbox\"\n          [checked]=\"isIntervalRefreshToggleOn\"\n          [disabled]=\"isRefreshDisabled\"\n          data-cy=\"c8y-data-points-table-widget--interval-toggle-button\"\n          (click)=\"onToggleCountdownButtonState($event)\"\n        />\n\n        <c8y-countdown-interval\n          *ngIf=\"isIntervalRefreshToggleOn\"\n          [countdownInterval]=\"refreshInterval\"\n          (countdownEnded)=\"countdownEnded()\"\n        ></c8y-countdown-interval>\n        <i\n          c8yIcon=\"pause\"\n          *ngIf=\"!isIntervalRefreshToggleOn\"\n        ></i>\n      </label>\n\n      <div class=\"input-group-btn\">\n        <button\n          class=\"btn btn-default\"\n          [attr.aria-label]=\"'Refresh' | translate\"\n          [tooltip]=\"'Refresh' | translate\"\n          placement=\"bottom\"\n          type=\"button\"\n          [adaptivePosition]=\"false\"\n          [container]=\"'body'\"\n          [delay]=\"500\"\n          [disabled]=\"isRefreshDisabled || (isLoading | async)\"\n          (click)=\"reload()\"\n          data-cy=\"c8y-data-points-table-widget--reload-button\"\n        >\n          <i\n            c8yIcon=\"refresh\"\n            [ngClass]=\"{ 'icon-spin': isLoading | async }\"\n          ></i>\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-container>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.TranslateService }, { type: i1$1.WidgetGlobalAutoRefreshService }], propDecorators: { countdownIntervalComponent: [{
                 type: ViewChild,
                 args: [CountdownIntervalComponent, { static: false }]
             }], isAutoRefreshEnabled: [{
                 type: Input
-            }], isDisabled: [{
+            }], isRefreshDisabled: [{
                 type: Input
             }], isLoading: [{
                 type: Input
@@ -1431,6 +1452,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 type: Input
             }], refreshInterval: [{
                 type: Input
+            }], widgetInstanceGlobalAutoRefreshContext: [{
+                type: Input
             }], onCountdownEnded: [{
                 type: Output
             }] } });
@@ -1662,7 +1685,7 @@ class DatapointsTableComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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: "<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            <ng-container *ngIf=\"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            </ng-container>\n            <!-- Data points column headers -->\n            <ng-container *ngFor=\"let header of devicesColumnHeaders\">\n              <div\n                class=\"min-width-0\"\n                title=\"{{ header | columnTitle }}\"\n                [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n              >\n                <span class=\"text-medium text-truncate\">{{ header.label }} {{ header.unit }}</span>\n              </div>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<!-- The record list -->\n<ng-container *ngIf=\"!isLoading; else loading\">\n  <ng-container *ngIf=\"!hasNoPermissionsToReadAnyMeasurement; else missingAllPermissions\">\n    <ng-container *ngIf=\"datapointsTableItems.length; else emptyState\">\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: 40;\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                <div\n                  class=\"min-width-0\"\n                  [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                  *ngIf=\"devicesColumnHeaders.length > 1\"\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                <!-- Data point value row cells -->\n                <ng-container *ngFor=\"let row of tableItem.rowItems\">\n                  <ng-container *ngIf=\"row !== null; else emptyRowContent\">\n                    <ng-container [ngSwitch]=\"row.renderType\">\n                      <div\n                        [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                        [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n                        *ngSwitchCase=\"'min'\"\n                        [attr.data-label]=\"row.label\"\n                      >\n                        <div\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n                        >\n                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                        </div>\n                      </div>\n                      <div\n                        class=\"col-md-4\"\n                        [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n                        *ngSwitchCase=\"'max'\"\n                      >\n                        <div\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n                        >\n                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                        </div>\n                      </div>\n                      <div\n                        [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                        *ngSwitchCase=\"'area'\"\n                      >\n                        <span\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n                          [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n                        >\n                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                        </span>\n                        ...\n                        <span\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n                          [ngClass]=\"row.value.max ?? null | applyRangeClass: getRangeValues(row)\"\n                        >\n                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                        </span>\n                      </div>\n                      <div\n                        [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                        *ngSwitchDefault\n                      >\n                        <span\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n                          [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n                        >\n                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                        </span>\n                      </div>\n                    </ng-container>\n                  </ng-container>\n                  <ng-template #emptyRowContent>\n                    <div [c8yDynamicColumn]=\"devicesColumnHeaders.length\"></div>\n                  </ng-template>\n                </ng-container>\n              </div>\n            </c8y-li-body>\n          </c8y-li>\n        </c8y-li-timeline>\n      </c8y-list-group>\n    </ng-container>\n  </ng-container>\n</ng-container>\n<ng-template #loading>\n  <c8y-loading></c8y-loading>\n</ng-template>\n<ng-template #emptyState>\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 translate>\n          Find out more in the\n          <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#data-point-table\">\n            user documentation\n          </a>\n          .\n        </small>\n      </p>\n    </c8y-ui-empty-state>\n  </div>\n</ng-template>\n<ng-template #missingAllPermissions>\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</ng-template>\n", dependencies: [{ kind: "pipe", type: AdjustAggregatedTimeRangePipe, name: "adjustAggregatedTimeRange" }, { kind: "pipe", type: ApplyRangeClassPipe, name: "applyRangeClass" }, { kind: "pipe", type: ColumnTitlePipe, name: "columnTitle" }, { kind: "ngmodule", type: CommonModule$1 }, { kind: "component", type: i1$1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "pipe", type: i1$1.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "directive", type: i1$1.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "pipe", type: i1$1.DatePipe, name: "c8yDate" }, { kind: "component", type: i1$1.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "ngmodule", type: DocsModule }, { kind: "directive", type: i1$1.GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: i1$1.GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: DynamicColumnDirective, selector: "[c8yDynamicColumn]", inputs: ["c8yDynamicColumn"] }, { kind: "ngmodule", type: DynamicComponentModule }, { kind: "component", type: i1$1.DynamicComponentAlertsComponent, selector: "c8y-dynamic-component-alerts", inputs: ["alerts"] }, { kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: i1$1.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i1$1.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i1$1.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i1$1.ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "directive", type: VirtualScrollListenerDirective, selector: "[c8yVirtualScrollListener]", inputs: ["scrollThreshold"], outputs: ["scrolled", "scrolledToTop"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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: "<ng-container *ngIf=\"!hasNoPermissionsToReadAnyMeasurement; else missingAllPermissions\">\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              <ng-container *ngIf=\"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              </ng-container>\n              <!-- Data points column headers -->\n              <ng-container *ngFor=\"let header of devicesColumnHeaders\">\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              </ng-container>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- The record list -->\n  <ng-container *ngIf=\"!isLoading; else loading\">\n    <ng-container *ngIf=\"datapointsTableItems.length; else emptyState\">\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: 40;\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                <div\n                  class=\"min-width-0\"\n                  [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                  *ngIf=\"devicesColumnHeaders.length > 1\"\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                <!-- Data point value row cells -->\n                <ng-container *ngFor=\"let row of tableItem.rowItems\">\n                  <ng-container *ngIf=\"row !== null; else emptyRowContent\">\n                    <ng-container [ngSwitch]=\"row.renderType\">\n                      <div\n                        [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                        [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n                        *ngSwitchCase=\"'min'\"\n                        [attr.data-label]=\"row.label\"\n                      >\n                        <div\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n                        >\n                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                        </div>\n                      </div>\n                      <div\n                        class=\"col-md-4\"\n                        [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n                        *ngSwitchCase=\"'max'\"\n                      >\n                        <div\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n                        >\n                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                        </div>\n                      </div>\n                      <div\n                        [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                        *ngSwitchCase=\"'area'\"\n                      >\n                        <span\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n                          [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n                        >\n                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                        </span>\n                        ...\n                        <span\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n                          [ngClass]=\"row.value.max ?? null | applyRangeClass: getRangeValues(row)\"\n                        >\n                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                        </span>\n                      </div>\n                      <div\n                        [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                        *ngSwitchDefault\n                      >\n                        <span\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n                          [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n                        >\n                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                        </span>\n                      </div>\n                    </ng-container>\n                  </ng-container>\n                  <ng-template #emptyRowContent>\n                    <div [c8yDynamicColumn]=\"devicesColumnHeaders.length\"></div>\n                  </ng-template>\n                </ng-container>\n              </div>\n            </c8y-li-body>\n          </c8y-li>\n        </c8y-li-timeline>\n      </c8y-list-group>\n    </ng-container>\n  </ng-container>\n</ng-container>\n<ng-template #loading>\n  <c8y-loading></c8y-loading>\n</ng-template>\n<ng-template #emptyState>\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 translate>\n          Find out more in the\n          <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#data-point-table\">\n            user documentation\n          </a>\n          .\n        </small>\n      </p>\n    </c8y-ui-empty-state>\n  </div>\n</ng-template>\n<ng-template #missingAllPermissions>\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</ng-template>\n", dependencies: [{ kind: "pipe", type: AdjustAggregatedTimeRangePipe, name: "adjustAggregatedTimeRange" }, { kind: "pipe", type: ApplyRangeClassPipe, name: "applyRangeClass" }, { kind: "pipe", type: ColumnTitlePipe, name: "columnTitle" }, { kind: "ngmodule", type: CommonModule$1 }, { kind: "component", type: i1$1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "pipe", type: i1$1.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "directive", type: i1$1.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "pipe", type: i1$1.DatePipe, name: "c8yDate" }, { kind: "component", type: i1$1.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "ngmodule", type: DocsModule }, { kind: "directive", type: i1$1.GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: i1$1.GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: DynamicColumnDirective, selector: "[c8yDynamicColumn]", inputs: ["c8yDynamicColumn"] }, { kind: "ngmodule", type: DynamicComponentModule }, { kind: "component", type: i1$1.DynamicComponentAlertsComponent, selector: "c8y-dynamic-component-alerts", inputs: ["alerts"] }, { kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: i1$1.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i1$1.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i1$1.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i1$1.ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "directive", type: VirtualScrollListenerDirective, selector: "[c8yVirtualScrollListener]", inputs: ["scrollThreshold"], outputs: ["scrolled", "scrolledToTop"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsTableComponent, decorators: [{
             type: Component,
@@ -1676,7 +1699,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         DynamicComponentModule,
                         ListGroupModule,
                         VirtualScrollListenerDirective
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<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            <ng-container *ngIf=\"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            </ng-container>\n            <!-- Data points column headers -->\n            <ng-container *ngFor=\"let header of devicesColumnHeaders\">\n              <div\n                class=\"min-width-0\"\n                title=\"{{ header | columnTitle }}\"\n                [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n              >\n                <span class=\"text-medium text-truncate\">{{ header.label }} {{ header.unit }}</span>\n              </div>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<!-- The record list -->\n<ng-container *ngIf=\"!isLoading; else loading\">\n  <ng-container *ngIf=\"!hasNoPermissionsToReadAnyMeasurement; else missingAllPermissions\">\n    <ng-container *ngIf=\"datapointsTableItems.length; else emptyState\">\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: 40;\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                <div\n                  class=\"min-width-0\"\n                  [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                  *ngIf=\"devicesColumnHeaders.length > 1\"\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                <!-- Data point value row cells -->\n                <ng-container *ngFor=\"let row of tableItem.rowItems\">\n                  <ng-container *ngIf=\"row !== null; else emptyRowContent\">\n                    <ng-container [ngSwitch]=\"row.renderType\">\n                      <div\n                        [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                        [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n                        *ngSwitchCase=\"'min'\"\n                        [attr.data-label]=\"row.label\"\n                      >\n                        <div\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n                        >\n                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                        </div>\n                      </div>\n                      <div\n                        class=\"col-md-4\"\n                        [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n                        *ngSwitchCase=\"'max'\"\n                      >\n                        <div\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n                        >\n                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                        </div>\n                      </div>\n                      <div\n                        [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                        *ngSwitchCase=\"'area'\"\n                      >\n                        <span\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n                          [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n                        >\n                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                        </span>\n                        ...\n                        <span\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n                          [ngClass]=\"row.value.max ?? null | applyRangeClass: getRangeValues(row)\"\n                        >\n                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                        </span>\n                      </div>\n                      <div\n                        [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                        *ngSwitchDefault\n                      >\n                        <span\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n                          [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n                        >\n                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                        </span>\n                      </div>\n                    </ng-container>\n                  </ng-container>\n                  <ng-template #emptyRowContent>\n                    <div [c8yDynamicColumn]=\"devicesColumnHeaders.length\"></div>\n                  </ng-template>\n                </ng-container>\n              </div>\n            </c8y-li-body>\n          </c8y-li>\n        </c8y-li-timeline>\n      </c8y-list-group>\n    </ng-container>\n  </ng-container>\n</ng-container>\n<ng-template #loading>\n  <c8y-loading></c8y-loading>\n</ng-template>\n<ng-template #emptyState>\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 translate>\n          Find out more in the\n          <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#data-point-table\">\n            user documentation\n          </a>\n          .\n        </small>\n      </p>\n    </c8y-ui-empty-state>\n  </div>\n</ng-template>\n<ng-template #missingAllPermissions>\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</ng-template>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!hasNoPermissionsToReadAnyMeasurement; else missingAllPermissions\">\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              <ng-container *ngIf=\"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              </ng-container>\n              <!-- Data points column headers -->\n              <ng-container *ngFor=\"let header of devicesColumnHeaders\">\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              </ng-container>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- The record list -->\n  <ng-container *ngIf=\"!isLoading; else loading\">\n    <ng-container *ngIf=\"datapointsTableItems.length; else emptyState\">\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: 40;\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                <div\n                  class=\"min-width-0\"\n                  [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                  *ngIf=\"devicesColumnHeaders.length > 1\"\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                <!-- Data point value row cells -->\n                <ng-container *ngFor=\"let row of tableItem.rowItems\">\n                  <ng-container *ngIf=\"row !== null; else emptyRowContent\">\n                    <ng-container [ngSwitch]=\"row.renderType\">\n                      <div\n                        [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                        [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n                        *ngSwitchCase=\"'min'\"\n                        [attr.data-label]=\"row.label\"\n                      >\n                        <div\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n                        >\n                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                        </div>\n                      </div>\n                      <div\n                        class=\"col-md-4\"\n                        [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n                        *ngSwitchCase=\"'max'\"\n                      >\n                        <div\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n                        >\n                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                        </div>\n                      </div>\n                      <div\n                        [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                        *ngSwitchCase=\"'area'\"\n                      >\n                        <span\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n                          [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n                        >\n                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                        </span>\n                        ...\n                        <span\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n                          [ngClass]=\"row.value.max ?? null | applyRangeClass: getRangeValues(row)\"\n                        >\n                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                        </span>\n                      </div>\n                      <div\n                        [c8yDynamicColumn]=\"devicesColumnHeaders.length\"\n                        *ngSwitchDefault\n                      >\n                        <span\n                          class=\"text-truncate\"\n                          title=\"{{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\"\n                          [ngClass]=\"row.value.min ?? null | applyRangeClass: getRangeValues(row)\"\n                        >\n                          {{ row.value.min ?? '' | number: getFractionSize(row.value.min) }}\n                        </span>\n                      </div>\n                    </ng-container>\n                  </ng-container>\n                  <ng-template #emptyRowContent>\n                    <div [c8yDynamicColumn]=\"devicesColumnHeaders.length\"></div>\n                  </ng-template>\n                </ng-container>\n              </div>\n            </c8y-li-body>\n          </c8y-li>\n        </c8y-li-timeline>\n      </c8y-list-group>\n    </ng-container>\n  </ng-container>\n</ng-container>\n<ng-template #loading>\n  <c8y-loading></c8y-loading>\n</ng-template>\n<ng-template #emptyState>\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 translate>\n          Find out more in the\n          <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#data-point-table\">\n            user documentation\n          </a>\n          .\n        </small>\n      </p>\n    </c8y-ui-empty-state>\n  </div>\n</ng-template>\n<ng-template #missingAllPermissions>\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</ng-template>\n" }]
         }], propDecorators: { aggregationType: [{
                 type: Input
             }], datapointsTableItems: [{
@@ -1696,11 +1719,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             }] } });
 
 class DatapointsTableViewWidgetComponent {
-    constructor(datapointsTableConfigService, datapointsTableViewService, formBuilder, translateService) {
+    constructor(alertService, dataFetchingService, datapointsTableConfigService, datapointsTableViewService, formBuilder, translateService, widgetGlobalAutoRefresh) {
+        this.alertService = alertService;
+        this.dataFetchingService = dataFetchingService;
         this.datapointsTableConfigService = datapointsTableConfigService;
         this.datapointsTableViewService = datapointsTableViewService;
         this.formBuilder = formBuilder;
         this.translateService = translateService;
+        this.widgetGlobalAutoRefresh = widgetGlobalAutoRefresh;
         /**
          * Represents the data points where __active property is set to true.
          */
@@ -1710,7 +1736,11 @@ class DatapointsTableViewWidgetComponent {
          * Used to populate the table with data.
          */
         this.datapointsTableItems = [];
-        this.isDisabled = false;
+        /**
+         * Indicates whether refreshing should be enabled or disabled.
+         * It's 'true' when user is not allowed to view a measurements.
+         */
+        this.isRefreshDisabled = false;
         /**
          * Indicates whether the component is in the initial request state
          * where data for a table structure is being prepared.
@@ -1719,9 +1749,12 @@ class DatapointsTableViewWidgetComponent {
         /**
          * Current isLoading state. Indicates whether the data is being loaded.
          */
-        this.isLoading = signal(true);
+        this.isLoading$ = new BehaviorSubject(true);
         this.isExportModalOpen = false;
         this.isScrolling = signal(false);
+        this.TIMEOUT_ERROR_TEXT = gettext('The request is taking longer than usual. We apologize for the inconvenience.');
+        this.SERVER_ERROR_TEXT = gettext('Server error occurred.');
+        this.destroy$ = new Subject();
         this.scrollingSubject$ = new Subject();
         /**
          * Indicates if the alert has already been displayed and can be dismissed.
@@ -1730,19 +1763,27 @@ class DatapointsTableViewWidgetComponent {
         this.isMissingAnyPermissionAlertShown = false;
     }
     async ngOnInit() {
-        // Will be uncommented in MTM-61920
-        // if (this.config.widgetInstanceGlobalTimeContext) {
-        //   this.handleGlobalTimeContextSettings();
-        // }
-        // Condition will be removed in MTM-61920
+        if (this.config.widgetInstanceGlobalAutoRefreshContext) {
+            this.containerClass = 'a-i-center input-group p-t-4 p-b-4 max-width-fit m-l-auto';
+        }
+        /**
+         * Legacy widget used realtime so it must be converted to refresh approach
+         * if it was enabled before migration.
+         */
         if (this.config.widgetInstanceGlobalTimeContext) {
+            this.config.widgetInstanceGlobalAutoRefreshContext = true;
             this.config.widgetInstanceGlobalTimeContext = false;
+            this.config.displaySettings.globalAutoRefreshContext = true;
+        }
+        if (this.config.widgetInstanceGlobalAutoRefreshContext) {
+            this.handleGlobalRefreshLoading();
+            this.handleGlobalTimeContextSettings();
         }
         this.setScrollingSubscription();
         const isLegacyWidgetRealtimeActive = this.config.realtime &&
-            !this.config.decimalPlaces &&
-            !this.config.refreshInterval &&
-            !this.config.isAutoRefreshEnabled;
+            !this.config.hasOwnProperty('decimalPlaces') &&
+            !this.config.hasOwnProperty('refreshInterval') &&
+            !this.config.hasOwnProperty('isAutoRefreshEnabled');
         if (isLegacyWidgetRealtimeActive) {
             this.setDefaultRefreshRelatedProperties();
         }
@@ -1780,6 +1821,8 @@ class DatapointsTableViewWidgetComponent {
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
+        this.destroy$.next();
+        this.destroy$.complete();
     }
     onDateChange(data) {
         if (this.formGroup.invalid) {
@@ -1812,14 +1855,8 @@ class DatapointsTableViewWidgetComponent {
         this.onScrolling(false);
     }
     handleGlobalTimeContextSettings() {
-        this.config.dateFrom = this.datapointsTableViewService.adjustDate(this.config.date[0], 0, false);
-        this.config.dateTo = this.datapointsTableViewService.adjustDate(this.config.date[1], 0, false);
-        if (this.config.realtime) {
-            this.setDefaultRefreshRelatedProperties();
-        }
-        else {
-            this.config.isAutoRefreshEnabled = false;
-        }
+        this.config.dateFrom = this.dataFetchingService.adjustDate(this.config.date[0], 0, false);
+        this.config.dateTo = this.dataFetchingService.adjustDate(this.config.date[1], 0, false);
     }
     /**
      * Sets up the scrolling subscription.
@@ -1836,7 +1873,7 @@ class DatapointsTableViewWidgetComponent {
         this.config.refreshInterval = DEFAULT_COUNTDOWN_VALUE;
     }
     recalculateIntervalToMatchFromNowDate() {
-        if (this.config.widgetInstanceGlobalTimeContext) {
+        if (this.config.widgetInstanceGlobalAutoRefreshContext) {
             return;
         }
         const { dateFrom, dateTo } = this.datapointsTableConfigService.calculateDateRange(this.config.interval);
@@ -1868,7 +1905,7 @@ class DatapointsTableViewWidgetComponent {
      *                       If false, the seconds will be displayed as they are.
      */
     async prepareTableData(roundSeconds = true) {
-        this.isLoading.set(true);
+        this.isLoading$.next(true);
         if (this.isInitialRequest) {
             this.activeDatapoints = this.datapointsTableViewService.filterOutInactiveDatapoints(this.config.datapoints);
             this.hasMultipleDatapoints = this.datapointsTableViewService.hasMultipleDatapoints(this.activeDatapoints);
@@ -1877,6 +1914,9 @@ class DatapointsTableViewWidgetComponent {
         }
         const activeDatapointsIdsWithSeries = this.datapointsTableViewService.groupSeriesByDeviceId(this.activeDatapoints);
         const activeDatapointsSeriesData = await this.getActiveDatapointsSeriesDataMap(activeDatapointsIdsWithSeries, this.config, roundSeconds);
+        if (this.isFailedToFetchSeriesData) {
+            return;
+        }
         this.seriesWithoutPermissionToRead =
             this.datapointsTableViewService.getSeriesWithoutPermissionToRead(activeDatapointsSeriesData, activeDatapointsIdsWithSeries);
         if (!this.isMissingAnyPermissionAlertShown &&
@@ -1892,7 +1932,7 @@ class DatapointsTableViewWidgetComponent {
         const datapointsListItems = this.datapointsTableViewService.mapDatapointsWithValuesToList(this.datapointsWithValues);
         const groupedDatapointsListItems = this.datapointsTableViewService.groupByDateAndDevice(datapointsListItems, this.devicesColumnHeaders);
         this.datapointsTableItems = this.datapointsTableViewService.sortDataByDateDescending(groupedDatapointsListItems);
-        this.isLoading.set(false);
+        this.isLoading$.next(false);
     }
     /**
      * Retrieves the active data points series data and returns it as a map.
@@ -1908,13 +1948,32 @@ class DatapointsTableViewWidgetComponent {
      */
     async getActiveDatapointsSeriesDataMap(datapointsIdsWithSeries, config, roundSeconds) {
         try {
+            this.isFailedToFetchSeriesData = false;
             return await this.datapointsTableViewService.getAllActiveSeriesDataMap(datapointsIdsWithSeries, config, roundSeconds);
         }
         catch (error) {
-            this.isDisabled = true;
-            this.isLoading.set(false);
+            this.isLoading$.next(false);
+            this.handleFetchError(error);
         }
     }
+    handleFetchError(error) {
+        if (error?.message.includes('403')) {
+            this.alerts.setAlertGroupDismissStrategy('warning', DismissAlertStrategy.NONE);
+            this.isRefreshDisabled = true;
+            return;
+        }
+        const isTimeoutError = error?.name === 'TimeoutError';
+        const errorMessage = isTimeoutError
+            ? this.TIMEOUT_ERROR_TEXT
+            : error?.message ?? this.SERVER_ERROR_TEXT;
+        this.alerts.setAlertGroupDismissStrategy('warning', DismissAlertStrategy.TEMPORARY_OR_PERMANENT);
+        this.alerts.addAlerts(new DynamicComponentAlert({
+            type: 'warning',
+            text: errorMessage
+        }));
+        this.isFailedToFetchSeriesData = true;
+        this.alertService.addServerFailure(error);
+    }
     handleMissingAnyPermissionErrorMessage() {
         this.alerts.setAlertGroupDismissStrategy('system', DismissAlertStrategy.TEMPORARY);
         this.alerts.addAlerts(new DynamicComponentAlert({
@@ -1938,11 +1997,16 @@ class DatapointsTableViewWidgetComponent {
       </div>
     `;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsTableViewWidgetComponent, deps: [{ token: DatapointsTableService }, { token: DatapointsTableViewService }, { token: i3.FormBuilder }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DatapointsTableViewWidgetComponent, isStandalone: true, selector: "c8y-datapoints-table-view", inputs: { config: "config" }, host: { classAttribute: "d-col fit-h" }, ngImport: i0, template: "<div class=\"d-flex gap-16 p-l-16 p-r-16 flex-wrap\">\n  <ng-container *ngIf=\"config.displayDateSelection\">\n    <form [formGroup]=\"formGroup\">\n      <c8y-date-range-picker\n        class=\"d-contents\"\n        [isEmittingDateChange]=\"true\"\n        [showLabel]=\"true\"\n        (updatedDate)=\"onDateChange($event)\"\n      ></c8y-date-range-picker>\n    </form>\n  </ng-container>\n  <!-- TODO: temporarily commented out, will be enabled when MTM-59689 is integrated -->\n  <!-- <c8y-datapoints-export-selector\n    class=\"d-contents\"\n    [exportConfig]=\"exportConfig\"\n    (isExportModalOpen)=\"onExportModalOpen($event)\"\n  ></c8y-datapoints-export-selector> -->\n  <!-- TODO: below div is just a temp fix, it will be removed when MTM-59689 is integrated  -->\n  <div class=\"input-group p-t-4 p-b-4 max-width-fit m-l-auto\"></div>\n  <ng-container *ngIf=\"config.datapoints.length > 0\">\n    <c8y-datapoints-reload\n      class=\"d-contents\"\n      [isAutoRefreshEnabled]=\"config.isAutoRefreshEnabled\"\n      [refreshInterval]=\"config.refreshInterval\"\n      [isDisabled]=\"isDisabled\"\n      [isLoading]=\"isLoading\"\n      [isScrolling]=\"isScrolling()\"\n      [isExportModalOpen]=\"isExportModalOpen\"\n      (onCountdownEnded)=\"onCountdownEnded()\"\n    ></c8y-datapoints-reload>\n  </ng-container>\n</div>\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()\"\n    [seriesWithoutPermissionToReadCount]=\"seriesWithoutPermissionToRead?.length\"\n    (isScrolling)=\"onScrolling($event)\"\n  ></c8y-datapoints-table>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: 
+    handleGlobalRefreshLoading() {
+        this.isLoading$
+            .pipe(globalAutoRefreshLoading(this.widgetGlobalAutoRefresh), takeUntil(this.destroy$))
+            .subscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsTableViewWidgetComponent, deps: [{ token: i1$1.AlertService }, { token: i2$1.DataFetchingService }, { token: DatapointsTableService }, { token: DatapointsTableViewService }, { token: i3.FormBuilder }, { token: i1$2.TranslateService }, { token: i1$1.WidgetGlobalAutoRefreshService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DatapointsTableViewWidgetComponent, isStandalone: true, selector: "c8y-datapoints-table-view", inputs: { config: "config" }, host: { classAttribute: "d-col fit-h" }, ngImport: i0, template: "<div class=\"d-flex gap-16 p-l-16 p-r-16 flex-wrap\">\n  <ng-container *ngIf=\"config.displayDateSelection\">\n    <form [formGroup]=\"formGroup\">\n      <c8y-date-range-picker\n        class=\"d-contents\"\n        [isEmittingDateChange]=\"true\"\n        [showLabel]=\"true\"\n        (updatedDate)=\"onDateChange($event)\"\n      ></c8y-date-range-picker>\n    </form>\n  </ng-container>\n  <!-- TODO: temporarily commented out, will be enabled when graft of MTM-59689 is merged: https://github.com/Cumulocity-IoT/cumulocity-ui/pull/8028 -->\n   <!-- <c8y-datapoints-export-selector\n    class=\"d-contents\"\n    [containerClass]=\"containerClass\"\n    [exportConfig]=\"exportConfig\"\n    (isOpen)=\"onExportModalOpen($event)\"\n  ></c8y-datapoints-export-selector> -->\n  <!-- TODO: below div is just a temp fix, it will be removed when MTM-59689 is merged: https://github.com/Cumulocity-IoT/cumulocity-ui/pull/8028   -->\n  <div class=\"input-group p-t-4 p-b-4 max-width-fit m-l-auto\"></div>\n  <ng-container *ngIf=\"config.datapoints.length > 0\">\n    <c8y-datapoints-reload\n      class=\"d-contents\"\n      [isAutoRefreshEnabled]=\"config.isAutoRefreshEnabled\"\n      [refreshInterval]=\"config.refreshInterval\"\n      [isRefreshDisabled]=\"isRefreshDisabled\"\n      [isLoading]=\"isLoading$\"\n      [isScrolling]=\"isScrolling()\"\n      [isExportModalOpen]=\"isExportModalOpen\"\n      [widgetInstanceGlobalAutoRefreshContext]=\"config.widgetInstanceGlobalAutoRefreshContext\"\n      (onCountdownEnded)=\"onCountdownEnded()\"\n    ></c8y-datapoints-reload>\n  </ng-container>\n</div>\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$1 }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "component", type: 
                 // TODO: temporarily commented out, will be enabled when MTM-59689 is integrated
                 // DatapointsExportSelectorComponent,
-                DatapointsReloadComponent, selector: "c8y-datapoints-reload", inputs: ["isAutoRefreshEnabled", "isDisabled", "isLoading", "isScrolling", "isExportModalOpen", "refreshInterval"], outputs: ["onCountdownEnded"] }, { kind: "component", type: DatapointsTableComponent, selector: "c8y-datapoints-table", inputs: ["aggregationType", "datapointsTableItems", "devicesColumnHeaders", "decimalPlaces", "hasMultipleDatapoints", "isLoading", "seriesWithoutPermissionToReadCount"], outputs: ["isScrolling"] }, { kind: "component", type: DateRangePickerComponent, selector: "c8y-date-range-picker", inputs: ["isEmittingDateChange", "showLabel"], outputs: ["updatedDate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
+                DatapointsReloadComponent, selector: "c8y-datapoints-reload", inputs: ["isAutoRefreshEnabled", "isRefreshDisabled", "isLoading", "isScrolling", "isExportModalOpen", "refreshInterval", "widgetInstanceGlobalAutoRefreshContext"], outputs: ["onCountdownEnded"] }, { kind: "component", type: DatapointsTableComponent, selector: "c8y-datapoints-table", inputs: ["aggregationType", "datapointsTableItems", "devicesColumnHeaders", "decimalPlaces", "hasMultipleDatapoints", "isLoading", "seriesWithoutPermissionToReadCount"], outputs: ["isScrolling"] }, { kind: "component", type: DateRangePickerComponent, selector: "c8y-date-range-picker", inputs: ["isEmittingDateChange", "showLabel"], outputs: ["updatedDate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsTableViewWidgetComponent, decorators: [{
             type: Component,
@@ -1954,8 +2018,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         DatapointsTableComponent,
                         DateRangePickerComponent,
                         ReactiveFormsModule
-                    ], template: "<div class=\"d-flex gap-16 p-l-16 p-r-16 flex-wrap\">\n  <ng-container *ngIf=\"config.displayDateSelection\">\n    <form [formGroup]=\"formGroup\">\n      <c8y-date-range-picker\n        class=\"d-contents\"\n        [isEmittingDateChange]=\"true\"\n        [showLabel]=\"true\"\n        (updatedDate)=\"onDateChange($event)\"\n      ></c8y-date-range-picker>\n    </form>\n  </ng-container>\n  <!-- TODO: temporarily commented out, will be enabled when MTM-59689 is integrated -->\n  <!-- <c8y-datapoints-export-selector\n    class=\"d-contents\"\n    [exportConfig]=\"exportConfig\"\n    (isExportModalOpen)=\"onExportModalOpen($event)\"\n  ></c8y-datapoints-export-selector> -->\n  <!-- TODO: below div is just a temp fix, it will be removed when MTM-59689 is integrated  -->\n  <div class=\"input-group p-t-4 p-b-4 max-width-fit m-l-auto\"></div>\n  <ng-container *ngIf=\"config.datapoints.length > 0\">\n    <c8y-datapoints-reload\n      class=\"d-contents\"\n      [isAutoRefreshEnabled]=\"config.isAutoRefreshEnabled\"\n      [refreshInterval]=\"config.refreshInterval\"\n      [isDisabled]=\"isDisabled\"\n      [isLoading]=\"isLoading\"\n      [isScrolling]=\"isScrolling()\"\n      [isExportModalOpen]=\"isExportModalOpen\"\n      (onCountdownEnded)=\"onCountdownEnded()\"\n    ></c8y-datapoints-reload>\n  </ng-container>\n</div>\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()\"\n    [seriesWithoutPermissionToReadCount]=\"seriesWithoutPermissionToRead?.length\"\n    (isScrolling)=\"onScrolling($event)\"\n  ></c8y-datapoints-table>\n</ng-container>\n" }]
-        }], ctorParameters: () => [{ type: DatapointsTableService }, { type: DatapointsTableViewService }, { type: i3.FormBuilder }, { type: i1$2.TranslateService }], propDecorators: { config: [{
+                    ], template: "<div class=\"d-flex gap-16 p-l-16 p-r-16 flex-wrap\">\n  <ng-container *ngIf=\"config.displayDateSelection\">\n    <form [formGroup]=\"formGroup\">\n      <c8y-date-range-picker\n        class=\"d-contents\"\n        [isEmittingDateChange]=\"true\"\n        [showLabel]=\"true\"\n        (updatedDate)=\"onDateChange($event)\"\n      ></c8y-date-range-picker>\n    </form>\n  </ng-container>\n  <!-- TODO: temporarily commented out, will be enabled when graft of MTM-59689 is merged: https://github.com/Cumulocity-IoT/cumulocity-ui/pull/8028 -->\n   <!-- <c8y-datapoints-export-selector\n    class=\"d-contents\"\n    [containerClass]=\"containerClass\"\n    [exportConfig]=\"exportConfig\"\n    (isOpen)=\"onExportModalOpen($event)\"\n  ></c8y-datapoints-export-selector> -->\n  <!-- TODO: below div is just a temp fix, it will be removed when MTM-59689 is merged: https://github.com/Cumulocity-IoT/cumulocity-ui/pull/8028   -->\n  <div class=\"input-group p-t-4 p-b-4 max-width-fit m-l-auto\"></div>\n  <ng-container *ngIf=\"config.datapoints.length > 0\">\n    <c8y-datapoints-reload\n      class=\"d-contents\"\n      [isAutoRefreshEnabled]=\"config.isAutoRefreshEnabled\"\n      [refreshInterval]=\"config.refreshInterval\"\n      [isRefreshDisabled]=\"isRefreshDisabled\"\n      [isLoading]=\"isLoading$\"\n      [isScrolling]=\"isScrolling()\"\n      [isExportModalOpen]=\"isExportModalOpen\"\n      [widgetInstanceGlobalAutoRefreshContext]=\"config.widgetInstanceGlobalAutoRefreshContext\"\n      (onCountdownEnded)=\"onCountdownEnded()\"\n    ></c8y-datapoints-reload>\n  </ng-container>\n</div>\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$1.AlertService }, { type: i2$1.DataFetchingService }, { type: DatapointsTableService }, { type: DatapointsTableViewService }, { type: i3.FormBuilder }, { type: i1$2.TranslateService }, { type: i1$1.WidgetGlobalAutoRefreshService }], propDecorators: { config: [{
                 type: Input
             }] } });