@c8y/ngx-components 1021.49.12 → 1021.51.1

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

@@ -3,24 +3,24 @@ 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_LABELS, AGGREGATION_VALUES_ARR, AGGREGATION_VALUES, IntervalBasedReload, CountdownIntervalComponent, CommonModule as CommonModule$1, CountdownIntervalModule, ListGroupModule, DynamicComponentAlertAggregator, DynamicComponentAlert, DocsModule, DynamicComponentModule, DismissAlertStrategy } from '@c8y/ngx-components';
 import * as i4 from '@c8y/ngx-components/context-dashboard';
-import * as i7 from '@c8y/ngx-components/datapoint-selector';
+import * as i6 from '@c8y/ngx-components/datapoint-selector';
 import { DatapointSelectorModule } from '@c8y/ngx-components/datapoint-selector';
-import { TIME_RANGE_INTERVAL_UNITS_VALUES, dateRangeValidator } from '@c8y/ngx-components/datapoints-export-selector';
-import * as i8 from 'ngx-bootstrap/popover';
+import * as i1 from '@c8y/ngx-components/datapoints-export-selector';
+import { dateRangeValidator, DatapointsExportSelectorComponent } from '@c8y/ngx-components/datapoints-export-selector';
+import { INTERVAL_VALUES } from '@c8y/ngx-components/interval-picker';
+import * as i7 from 'ngx-bootstrap/popover';
 import { PopoverModule } from 'ngx-bootstrap/popover';
 import { Subject, takeUntil, merge, 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 { aggregationType } from '@c8y/client';
 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 DEFAULT_DPT_REFRESH_INTERVAL_VALUE = 30_000;
 const DATE_SELECTION_VALUES = {
     // Will be uncommented in MTM-61920
     // dashboard_context: 'dashboard_context',
@@ -45,12 +45,12 @@ const RENDER_TYPES_LABELS = {
     area: gettext('Area')
 };
 const INTERVAL_VALUES_ARR = [
-    TIME_RANGE_INTERVAL_UNITS_VALUES.minutes,
-    TIME_RANGE_INTERVAL_UNITS_VALUES.hours,
-    TIME_RANGE_INTERVAL_UNITS_VALUES.days,
-    TIME_RANGE_INTERVAL_UNITS_VALUES.weeks,
-    TIME_RANGE_INTERVAL_UNITS_VALUES.months,
-    TIME_RANGE_INTERVAL_UNITS_VALUES.custom
+    INTERVAL_VALUES.minutes,
+    INTERVAL_VALUES.hours,
+    INTERVAL_VALUES.days,
+    INTERVAL_VALUES.weeks,
+    INTERVAL_VALUES.months,
+    INTERVAL_VALUES.custom
 ];
 const TIME_RANGE_INTERVAL_LABELS = {
     minutes: gettext('Last minute'),
@@ -62,1379 +62,1197 @@ const TIME_RANGE_INTERVAL_LABELS = {
 };
 const DURATION_OPTIONS = [
     {
-        id: TIME_RANGE_INTERVAL_UNITS_VALUES.minutes,
+        id: INTERVAL_VALUES.minutes,
         label: TIME_RANGE_INTERVAL_LABELS.minutes,
-        unit: TIME_RANGE_INTERVAL_UNITS_VALUES.minutes,
+        unit: INTERVAL_VALUES.minutes,
         amount: 1
     },
     {
-        id: TIME_RANGE_INTERVAL_UNITS_VALUES.hours,
+        id: INTERVAL_VALUES.hours,
         label: TIME_RANGE_INTERVAL_LABELS.hours,
-        unit: TIME_RANGE_INTERVAL_UNITS_VALUES.hours,
+        unit: INTERVAL_VALUES.hours,
         amount: 1
     },
     {
-        id: TIME_RANGE_INTERVAL_UNITS_VALUES.days,
+        id: INTERVAL_VALUES.days,
         label: TIME_RANGE_INTERVAL_LABELS.days,
-        unit: TIME_RANGE_INTERVAL_UNITS_VALUES.days,
+        unit: INTERVAL_VALUES.days,
         amount: 1
     },
     {
-        id: TIME_RANGE_INTERVAL_UNITS_VALUES.weeks,
+        id: INTERVAL_VALUES.weeks,
         label: TIME_RANGE_INTERVAL_LABELS.weeks,
-        unit: TIME_RANGE_INTERVAL_UNITS_VALUES.weeks,
+        unit: INTERVAL_VALUES.weeks,
         amount: 1
     },
     {
-        id: TIME_RANGE_INTERVAL_UNITS_VALUES.months,
+        id: INTERVAL_VALUES.months,
         label: TIME_RANGE_INTERVAL_LABELS.months,
-        unit: TIME_RANGE_INTERVAL_UNITS_VALUES.months,
+        unit: INTERVAL_VALUES.months,
         amount: 1
     },
-    { id: TIME_RANGE_INTERVAL_UNITS_VALUES.custom, label: TIME_RANGE_INTERVAL_LABELS.custom }
+    { id: INTERVAL_VALUES.custom, label: TIME_RANGE_INTERVAL_LABELS.custom }
 ];
 
-function mapToSourceValueObject([key, value]) {
-    return { key, value };
-}
-class DatapointsTableViewService {
-    constructor(measurementService) {
-        this.measurementService = measurementService;
+class DatapointsTableService {
+    constructor(dataFetchingService) {
+        this.dataFetchingService = dataFetchingService;
     }
-    /**
-     * Filters out inactive data points from the given array.
-     *
-     * @param datapoints - The array of data points to filter.
-     * @returns An array of data points that are active.
-     */
-    filterOutInactiveDatapoints(datapoints) {
-        return datapoints.filter((datapoint) => datapoint.__active);
+    calculateDateRange(interval) {
+        const now = new Date();
+        const nowString = now.toISOString();
+        let dateFrom;
+        switch (interval) {
+            case INTERVAL_VALUES.minutes:
+                dateFrom = this.dataFetchingService.adjustDate(nowString, -1, true);
+                break;
+            case INTERVAL_VALUES.hours:
+                const minutesInAnHourNegative = -60;
+                dateFrom = this.dataFetchingService.adjustDate(nowString, minutesInAnHourNegative, true);
+                break;
+            case INTERVAL_VALUES.days:
+                const minutesInADayNegative = -24 * 60;
+                dateFrom = this.dataFetchingService.adjustDate(nowString, minutesInADayNegative, true);
+                break;
+            case INTERVAL_VALUES.weeks:
+                const minutesInAWeekNegative = -7 * 24 * 60;
+                dateFrom = this.dataFetchingService.adjustDate(nowString, minutesInAWeekNegative, true);
+                break;
+            case INTERVAL_VALUES.months:
+                const oneMonthAgo = new Date(now);
+                oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1);
+                dateFrom = this.dataFetchingService.adjustDate(oneMonthAgo.toISOString(), 0, true);
+                break;
+            default:
+                throw new Error('Invalid time interval');
+        }
+        return {
+            dateFrom: dateFrom,
+            dateTo: this.dataFetchingService.adjustDate(nowString, 0, true)
+        };
     }
-    hasMultipleDatapoints(datapoints) {
-        const ids = datapoints.map(dp => dp.__target.id);
-        return ids.length > 1;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsTableService, deps: [{ token: i1.DataFetchingService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsTableService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsTableService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.DataFetchingService }] });
+
+class DateRangePickerComponent {
+    constructor() {
+        /**
+         * If set to true, the component will be reactive and will emit the updatedDate on every change.
+         * Otherwise, the component will use a non emitting variant of a template.
+         */
+        this.isEmittingDateChange = false;
+        /**
+         * Determines the display of from and to date picker labels.
+         */
+        this.showLabel = true;
+        this.updatedDate = new EventEmitter();
+        this.DATE_FROM = 'dateFrom';
+        this.DATE_TO = 'dateTo';
+        this.FROM_DATE = gettext('From`date`');
+        this.HAS_ERROR = 'has-error';
+        this.INVALID_DATE_TIME = 'invalidDateTime';
+        this.THIS_DATE_IS_INVALID = gettext('This date is invalid.');
+        this.THIS_DATE_IS_AFTER_THE_LAST_ALLOWED_DATE = gettext('This date is after the latest allowed date.');
+        this.THIS_DATE_IS_BEFORE_THE_EARLIEST_ALLOWED_DATE = gettext('This date is before the earliest allowed date.');
+        this.TO_DATE = gettext('To`date`');
+        this.parentContainer = inject(ControlContainer);
     }
-    /**
-     * Returns a map of active data points device IDs with their corresponding series.
-     *
-     * Example output:
-     * ```typescript
-     * new Map([
-     *   [
-     *     "844657202",
-     *     [
-     *       "c8y_Temperature.T"
-     *     ]
-     *   ],
-     *   [
-     *     "32666427",
-     *     [
-     *       "c8y_Battery.Battery"
-     *     ]
-     *   ]
-     * ]);
-     * ```
-     * @param datapoints - An array of data points.
-     * @returns A map where the key is the data point ID and the value is an array of data point series.
-     */
-    groupSeriesByDeviceId(activeDatapoints) {
-        return activeDatapoints.reduce((map, { fragment, series, __target: { id } }) => {
-            const value = `${fragment}.${series}`;
-            const existingValue = map.get(id) ?? [];
-            map.set(id, [...existingValue, value]);
-            return map;
-        }, new Map());
+    onDateFromChange(dateFrom) {
+        this.updatedDate.emit({
+            dateFrom
+        });
     }
-    /**
-     * Retrieves the active data points series data and returns it as a map.
-     *
-     * @param datapointsValuesDataMap - A map of data point sources with their associated series.
-     * @param config - The configuration of the data points table.
-     * @param roundSeconds - Whether to round the seconds or not.
-     *                       If true, the seconds will be rounded to 0.
-     *                       If false, the seconds will be displayed as they are.
-     * @returns A Promise that resolves to a Map object with data point IDs as keys and DataObject as values or undefined when all series has forbidden access.
-     */
-    async getAllActiveSeriesDataMap(datapointsValuesDataMap, config, roundSeconds) {
-        const promises = Array.from(datapointsValuesDataMap).map(async ([source, series]) => {
-            const params = {
-                dateFrom: config.dateFrom,
-                dateTo: config.dateTo,
-                source,
-                series,
-                aggregationType: config.aggregation
-            };
-            // TODO: consider adding a cache mechanism -> MTM-59233
-            const { data, res } = await this.loadSeriesData(params, roundSeconds);
-            return { source, data, res };
+    onDateToChange(dateTo) {
+        this.updatedDate.emit({
+            dateTo
         });
-        const results = await Promise.all(promises);
-        const allSeriesHasForbiddenAccess = results.every(item => item.res?.status === 403);
-        if (allSeriesHasForbiddenAccess) {
-            throw new Error('Access forbidden: All series have a 403 status code');
-        }
-        const filteredResults = this.filterOutElementsWithForbiddenResponses(results);
-        const resultMap = new Map();
-        filteredResults.forEach(result => resultMap.set(result.source, result.data));
-        return resultMap;
     }
-    /**
-     * Asynchronously loads series data based on the provided parameters.
-     *
-     * This method constructs a filter for retrieving series data within a specified date range,
-     * from a specific source, and optionally applying an aggregation type.
-     *
-     * @param params - The parameters for loading series data, including date range, source, series names, and aggregation type.
-     * @param roundSeconds - Indicates whether to round the seconds in the date range to the nearest whole number.
-     * @returns A promise that resolves to series data wrapped in result object.
-     */
-    // TODO: same method as in the datapoints-export-selector service, when integrating with it (MTM-59689), remove this method and use the one from the service
-    async loadSeriesData(params, roundSeconds) {
-        const { dateFrom, dateTo, source, series, aggregationType } = params;
-        const from = this.adjustDate(dateFrom, 0, roundSeconds);
-        const to = this.adjustDate(dateTo, 0, roundSeconds);
-        const filter = {
-            dateFrom: from,
-            dateTo: to,
-            source: source,
-            revert: true
-        };
-        if (aggregationType) {
-            filter.aggregationType = aggregationType;
+    get parentFormGroup() {
+        return this.parentContainer.control;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DateRangePickerComponent, isStandalone: true, selector: "c8y-date-range-picker", inputs: { isEmittingDateChange: "isEmittingDateChange", showLabel: "showLabel" }, outputs: { updatedDate: "updatedDate" }, ngImport: i0, template: "<div class=\"d-flex gap-8 a-i-center flex-wrap\">\n  <c8y-form-group\n    [ngClass]=\"[\n      parentFormGroup?.controls.dateFrom.errors ? HAS_ERROR : '',\n      isEmittingDateChange ? 'd-flex a-i-center gap-4 m-b-0' : ''\n    ]\"\n  >\n    <ng-container *ngIf=\"showLabel\">\n      <label\n        [title]=\"FROM_DATE | translate\"\n        [for]=\"DATE_FROM\"\n      >\n        {{ FROM_DATE | translate }}\n      </label>\n    </ng-container>\n    <c8y-date-time-picker\n      id=\"DATE_FROM\"\n      [maxDate]=\"parentFormGroup?.value.dateTo\"\n      [placeholder]=\"FROM_DATE | translate\"\n      [formControl]=\"parentFormGroup?.controls.dateFrom\"\n      [ngClass]=\"parentFormGroup?.controls.dateFrom.errors ? HAS_ERROR : ''\"\n      (ngModelChange)=\"onDateFromChange($event)\"\n    ></c8y-date-time-picker>\n    <c8y-messages\n      class=\"text-nowrap\"\n      [show]=\"parentFormGroup?.controls.dateFrom.errors\"\n    >\n      <c8y-message\n        name=\"dateAfterRangeMax\"\n        [text]=\"THIS_DATE_IS_AFTER_THE_LAST_ALLOWED_DATE | translate\"\n      ></c8y-message>\n      <c8y-message\n        name=\"INVALID_DATE_TIME\"\n        [text]=\"THIS_DATE_IS_INVALID | translate\"\n      ></c8y-message>\n    </c8y-messages>\n  </c8y-form-group>\n  <c8y-form-group\n    [ngClass]=\"[\n      parentFormGroup?.controls.dateTo.errors ? HAS_ERROR : '',\n      isEmittingDateChange ? 'd-flex a-i-center gap-4 m-b-0' : ''\n    ]\"\n  >\n    <ng-container *ngIf=\"showLabel\">\n      <label\n        [title]=\"TO_DATE | translate\"\n        [for]=\"DATE_TO\"\n      >\n        {{ TO_DATE | translate }}\n      </label>\n    </ng-container>\n    <c8y-date-time-picker\n      id=\"DATE_TO\"\n      [minDate]=\"parentFormGroup?.value.dateFrom\"\n      [placeholder]=\"TO_DATE | translate\"\n      [formControl]=\"parentFormGroup?.controls.dateTo\"\n      [ngClass]=\"parentFormGroup?.controls.dateTo.errors ? HAS_ERROR : ''\"\n      (ngModelChange)=\"onDateToChange($event)\"\n    ></c8y-date-time-picker>\n    <c8y-messages [show]=\"parentFormGroup?.controls.dateTo.errors\">\n      <c8y-message\n        name=\"dateBeforeRangeMin\"\n        [text]=\"THIS_DATE_IS_BEFORE_THE_EARLIEST_ALLOWED_DATE | translate\"\n      ></c8y-message>\n      <c8y-message\n        name=\"INVALID_DATE_TIME\"\n        [text]=\"THIS_DATE_IS_INVALID | translate\"\n      ></c8y-message>\n    </c8y-messages>\n  </c8y-form-group>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { 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: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i1$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i1$1.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i1$1.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i1$1.DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }], viewProviders: [
+            {
+                provide: ControlContainer,
+                useFactory: () => inject(ControlContainer, { skipSelf: true })
+            }
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DateRangePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-date-range-picker', standalone: true, imports: [CoreModule, CommonModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
+                        {
+                            provide: ControlContainer,
+                            useFactory: () => inject(ControlContainer, { skipSelf: true })
+                        }
+                    ], template: "<div class=\"d-flex gap-8 a-i-center flex-wrap\">\n  <c8y-form-group\n    [ngClass]=\"[\n      parentFormGroup?.controls.dateFrom.errors ? HAS_ERROR : '',\n      isEmittingDateChange ? 'd-flex a-i-center gap-4 m-b-0' : ''\n    ]\"\n  >\n    <ng-container *ngIf=\"showLabel\">\n      <label\n        [title]=\"FROM_DATE | translate\"\n        [for]=\"DATE_FROM\"\n      >\n        {{ FROM_DATE | translate }}\n      </label>\n    </ng-container>\n    <c8y-date-time-picker\n      id=\"DATE_FROM\"\n      [maxDate]=\"parentFormGroup?.value.dateTo\"\n      [placeholder]=\"FROM_DATE | translate\"\n      [formControl]=\"parentFormGroup?.controls.dateFrom\"\n      [ngClass]=\"parentFormGroup?.controls.dateFrom.errors ? HAS_ERROR : ''\"\n      (ngModelChange)=\"onDateFromChange($event)\"\n    ></c8y-date-time-picker>\n    <c8y-messages\n      class=\"text-nowrap\"\n      [show]=\"parentFormGroup?.controls.dateFrom.errors\"\n    >\n      <c8y-message\n        name=\"dateAfterRangeMax\"\n        [text]=\"THIS_DATE_IS_AFTER_THE_LAST_ALLOWED_DATE | translate\"\n      ></c8y-message>\n      <c8y-message\n        name=\"INVALID_DATE_TIME\"\n        [text]=\"THIS_DATE_IS_INVALID | translate\"\n      ></c8y-message>\n    </c8y-messages>\n  </c8y-form-group>\n  <c8y-form-group\n    [ngClass]=\"[\n      parentFormGroup?.controls.dateTo.errors ? HAS_ERROR : '',\n      isEmittingDateChange ? 'd-flex a-i-center gap-4 m-b-0' : ''\n    ]\"\n  >\n    <ng-container *ngIf=\"showLabel\">\n      <label\n        [title]=\"TO_DATE | translate\"\n        [for]=\"DATE_TO\"\n      >\n        {{ TO_DATE | translate }}\n      </label>\n    </ng-container>\n    <c8y-date-time-picker\n      id=\"DATE_TO\"\n      [minDate]=\"parentFormGroup?.value.dateFrom\"\n      [placeholder]=\"TO_DATE | translate\"\n      [formControl]=\"parentFormGroup?.controls.dateTo\"\n      [ngClass]=\"parentFormGroup?.controls.dateTo.errors ? HAS_ERROR : ''\"\n      (ngModelChange)=\"onDateToChange($event)\"\n    ></c8y-date-time-picker>\n    <c8y-messages [show]=\"parentFormGroup?.controls.dateTo.errors\">\n      <c8y-message\n        name=\"dateBeforeRangeMin\"\n        [text]=\"THIS_DATE_IS_BEFORE_THE_EARLIEST_ALLOWED_DATE | translate\"\n      ></c8y-message>\n      <c8y-message\n        name=\"INVALID_DATE_TIME\"\n        [text]=\"THIS_DATE_IS_INVALID | translate\"\n      ></c8y-message>\n    </c8y-messages>\n  </c8y-form-group>\n</div>\n" }]
+        }], propDecorators: { isEmittingDateChange: [{
+                type: Input
+            }], showLabel: [{
+                type: Input
+            }], updatedDate: [{
+                type: Output
+            }] } });
+
+function minOneDatapointActive() {
+    return (control) => {
+        const datapoints = control.value;
+        if (!datapoints || !datapoints.length) {
+            return null;
         }
-        // TODO: it is a temporal workaround for a bug in the backend,
-        // where the series with more than one dot are impossible to retrieve:
-        // https://cumulocity.atlassian.net/browse/MTM-59277
-        const hasMoreThanOneDot = series.some(s => s.split('.').length > 2);
-        if (!hasMoreThanOneDot) {
-            filter.series = series;
+        const activeDatapoints = datapoints.filter(datapoint => datapoint.__active);
+        if (activeDatapoints.length >= 1) {
+            return null;
         }
-        return await this.measurementService.listSeries(filter);
+        return { exactlyOneDatapointNeedsToBeActive: true };
+    };
+}
+class DatapointsTableWidgetConfigComponent {
+    constructor(aggregationService, datapointsTableService, formBuilder, form, widgetConfig) {
+        this.aggregationService = aggregationService;
+        this.datapointsTableService = datapointsTableService;
+        this.formBuilder = formBuilder;
+        this.form = form;
+        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 = 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;
+        this.INTERVAL_VALUES_ARR = INTERVAL_VALUES_ARR;
+        this.REFRESH_INTERVAL_VALUES_ARR = REFRESH_INTERVAL_VALUES_ARR;
+        this.datapointSelectionConfig = {};
+        this.disabledAggregationOptions = {};
+        this.defaultFormOptions = {
+            selectableChartLineTypes: [],
+            selectableAxisTypes: [],
+            showRedRange: true,
+            showYellowRange: true
+        };
+        this.decimalLimits = {
+            numberOfDecimalPlacesMin: 0,
+            numberOfDecimalPlacesMax: 10
+        };
+        /**
+         * Indicate when the time interval selector item has been changed programmatically.
+         *
+         * This property is used to track changes in the time interval selector
+         * that are not triggered by direct user interaction, but by the application itself.
+         *
+         * In our case, the date selector and the interval selector are linked.
+         * So, when one of them changes, it affects the other.
+         * For example, selecting "Last hour" in the interval selector should automatically update the date range to the last hour.
+         * But without this flag, changing the date range would also update the interval selector, resulting in "Custom date" being selected.
+         * This happens because the system would interpret the behavior this way.
+         */
+        this.isIntervalSelectorChangedProgrammatically = false;
+        this.destroy$ = new Subject();
     }
-    // TODO: same method as in the datapoints-export-selector service, when integrating with it (MTM-59689), remove this method and use the one from the service
-    // Integration task: MTM-60221
-    // TODO: Compare implementations.
-    /**
-     * Adjusts the given date by adding the specified number of minutes and setting seconds to 0.
-     *
-     * @param date - The date to be adjusted in string format.
-     * @param minutes - The number of minutes to add to the date.
-     * @param roundSeconds - Whether to round the seconds or not.
-     *                       If true, the seconds will be rounded to 0.
-     *                       If false, the seconds will be displayed as they are.
-     * @returns The adjusted date in ISO string format.
-     */
-    adjustDate(date, minutes, roundSeconds = true) {
-        const dateTime = new Date(date);
-        if (isNaN(dateTime.getTime())) {
-            throw new Error('Invalid date');
+    ngOnInit() {
+        // Condition will be removed in MTM-61920
+        if (this.config.widgetInstanceGlobalTimeContext) {
+            this.config.widgetInstanceGlobalTimeContext = false;
         }
-        dateTime.setUTCMinutes(dateTime.getUTCMinutes() + minutes);
-        if (roundSeconds) {
-            dateTime.setUTCSeconds(0, 0);
+        if (this.widgetConfig.context?.id) {
+            this.datapointSelectionConfig.contextAsset = this.widgetConfig?.context;
         }
-        return dateTime.toISOString();
+        this.isWidgetLinkedToGlobalTimeContext = this.config.widgetInstanceGlobalTimeContext;
+        this.initForm();
+        this.handleAutoRefreshToggleChanges();
+        this.handleIntervalSelectorChanges();
+        this.handleDateSelectorChanges();
+        this.handleGlobalDateSelectorChanges();
+        this.updateDisabledAggregationOptions();
     }
-    /**
-     * Creates an array of DatapointsWithValues based on the provided datapoints and datapointsSeriesDataMap.
-     *
-     * Finds an index of a current data point within series object and based on that index filters values array.
-     *
-     * @param datapoints - An array of data points.
-     * @param datapointsSeriesDataMap - A map containing series data for data points.
-     * @returns An array of DatapointsWithValues.
-     */
-    getDatapointsWithValues(datapoints, datapointsSeriesDataMap) {
-        return datapoints.map((dp) => {
-            const seriesData = datapointsSeriesDataMap.get(dp.__target.id);
-            if (!seriesData) {
-                return { ...dp, values: {} };
-            }
-            // Find an index of a corresponding datapoint data, within series object.
-            const datapointSeriesArrayIndex = seriesData.series.findIndex(s => s.name === dp.series && s.type === dp.fragment);
-            const valuesFilteredByDatapointSeriesArrayIndex = Object.fromEntries(Object.entries(seriesData.values).map(([key, arr]) => [
-                key,
-                arr.filter((_, index) => index === datapointSeriesArrayIndex)
-            ]));
-            return {
-                ...dp,
-                seriesUnit: seriesData.series[datapointSeriesArrayIndex]?.unit,
-                values: valuesFilteredByDatapointSeriesArrayIndex
-            };
-        });
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
     }
-    /**
-     * Creates the column headers for the devices in the data points table.
-     *
-     * @param datapointsWithValues - An array of data points.
-     * @returns An array of column headers for the devices.
-     */
-    getColumnHeaders(datapointsWithValues) {
-        return datapointsWithValues.map(({ __target: { name }, label, renderType, unit }) => {
-            return { deviceName: name, label, renderType, unit };
-        });
+    onBeforeSave(config) {
+        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.updateTimeContext(config, this.formGroup.value.globalDateSelector);
+        Object.assign(config, this.formGroup.value);
     }
-    mapDatapointsWithValuesToList(datapointsWithValues) {
-        return datapointsWithValues.flatMap(dp => {
-            if (!dp.values) {
-                return [];
-            }
-            return Object.entries(dp.values).flatMap(([date, valuesArray]) => {
-                const value = this.findMinMaxValues(valuesArray);
-                if (value == null) {
-                    return [];
-                }
-                return [
-                    {
-                        dateAndTime: date,
-                        deviceName: dp.__target.name,
-                        fragment: dp.fragment,
-                        label: dp.label,
-                        redRangeMax: dp.redRangeMax,
-                        redRangeMin: dp.redRangeMin,
-                        renderType: dp.renderType,
-                        series: dp.series,
-                        value: value,
-                        yellowRangeMax: dp.yellowRangeMax,
-                        yellowRangeMin: dp.yellowRangeMin
-                    }
-                ];
-            });
-        });
+    toggleRefreshIntervalControl() {
+        this.formGroup.controls.isAutoRefreshEnabled.value
+            ? this.formGroup.controls.refreshInterval.disable()
+            : this.formGroup.controls.refreshInterval.enable();
     }
-    /**
-     * Finds the overall minimum and maximum values from an array of objects containing 'min' and 'max' properties.
-     *
-     * If the array contains only one object, that object's 'min' and 'max' values will be returned.
-     *
-     * @param valuesArray - An array with objects, where each contains 'min' and 'max' properties.
-     * @returns An object with the smallest 'min' and largest 'max' values found in the array.
-     *
-     * @example
-     * const values = [
-     *   { min: 1, max: 10 }
-     * ];
-     *
-     * const result = findMinMaxValues(values);
-     * // result is { min: 1, max: 10 }
-     */
-    findMinMaxValues(valuesArray) {
-        const validItems = valuesArray.filter((item) => item && item.min != null && item.max != null);
-        if (validItems.length === 0) {
-            return null;
+    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.view_and_config:
+                config.displayDateSelection = true;
+                config.widgetInstanceGlobalTimeContext = false;
+                break;
+            case DATE_SELECTION_VALUES.config:
+            default:
+                config.displayDateSelection = false;
+                config.widgetInstanceGlobalTimeContext = false;
         }
-        const initialValue = { min: validItems[0].min, max: validItems[0].max };
-        return validItems.reduce((acc, item) => ({
-            min: Math.min(acc.min, item.min),
-            max: Math.max(acc.max, item.max)
-        }), initialValue);
     }
-    /**
-     * Groups a list of data points by date and device, based on given references.
-     *
-     * @param dataList - The list of data points to be grouped.
-     * @param references - The column headers that serve as references for grouping.
-     * @returns An array of grouped data points, where each group corresponds to a unique date and device.
-     */
-    groupByDateAndDevice(dataList, references) {
-        const map = this.generateDataPointMap(dataList, references);
-        return this.mergeDatapoints(map);
+    initForm() {
+        this.formGroup = this.createForm();
+        // When the 'NONE' aggregation is removed at the 'onBeforeSave' block,
+        // and a Global Date Context forces widgets auto refresh to be enabled
+        // then, the aggregation selector will be empty on initial load.
+        this.config.aggregation = this.config.aggregation ?? AGGREGATION_VALUES.none;
+        this.form.form.addControl('config', this.formGroup);
+        this.formGroup.patchValue(this.config);
+    }
+    createForm() {
+        const { dateFrom, dateTo } = this.datapointsTableService.calculateDateRange(this.DEFAULT_INTERVAL_VALUE);
+        const isLegacyWidget = this.config.realtime !== undefined && !this.config.decimalPlaces;
+        return this.formBuilder.group({
+            aggregation: new FormControl({
+                value: AGGREGATION_VALUES.none,
+                disabled: !this.isAutoRefershDisabled()
+            }),
+            datapoints: this.formBuilder.control(new Array(), [
+                Validators.required,
+                Validators.minLength(1),
+                minOneDatapointActive()
+            ]),
+            globalDateSelector: new FormControl(this.DEFAULT_DATE_SELECTOR_VALUE),
+            dateFrom: new FormControl(dateFrom),
+            dateTo: new FormControl(dateTo),
+            decimalPlaces: [
+                2,
+                [
+                    Validators.required,
+                    Validators.min(this.decimalLimits.numberOfDecimalPlacesMin),
+                    Validators.max(this.decimalLimits.numberOfDecimalPlacesMax),
+                    Validators.pattern('^[0-9]+$')
+                ]
+            ],
+            interval: new FormControl(this.DEFAULT_INTERVAL_VALUE),
+            isAutoRefreshEnabled: isLegacyWidget ? this.config.realtime : [true],
+            refreshInterval: new FormControl({
+                value: DEFAULT_DPT_REFRESH_INTERVAL_VALUE,
+                disabled: this.isAutoRefershDisabled()
+            })
+        }, { validators: dateRangeValidator });
+    }
+    isAutoRefershDisabled() {
+        const isInitialWidgetCreation = Object.keys(this.config).length === 1 && this.config['settings'];
+        if (isInitialWidgetCreation) {
+            return false;
+        }
+        const isLegacyWidgetRealtimeNotActive = !this.config.realtime &&
+            !this.config.decimalPlaces &&
+            !this.config.refreshInterval &&
+            !this.config.isAutoRefreshEnabled;
+        if (isLegacyWidgetRealtimeNotActive) {
+            return true;
+        }
+        return !this.config.isAutoRefreshEnabled;
     }
     /**
-     * Generates and populates a map with data points.
-     *
-     * This function processes the provided data points and organizes them into a map structure
-     * where each key is a unique combination of date and device identifiers, and the value is an
-     * array of data points (or null values) associated with that key. This structured data is then
-     * used in the data point table to render the data appropriately.
+     * Handles changes to the auto-refresh toggle control and updates the aggregation control accordingly.
      *
-     * @param dataList - The list of data point table items to be processed.
-     * @param columnsHeadersReferences - The list of column headers used to determine the order and structure of the map values.
-     * @returns A map where the key is a datapoint identifier containing the date and device name, and the value is an array of data point table items or null.
+     * This method subscribes to the value changes of the auto-refresh toggle form control.
+     * When auto-refresh is enabled, the aggregation control's value is set to 'none' and the control is
+     * visually disabled (but not programmatically disabled to ensure the value is saved).
+     * When auto-refresh is disabled, the aggregation control is enabled.
      */
-    generateDataPointMap(dataList, columnsHeadersReferences) {
-        // Map to store the data points indexed by a unique identifier.
-        const map = new Map();
-        dataList.forEach(obj => {
-            // Generate a unique identifier for each data point using the date and device name.
-            const dateKey = this.toISOFormat(obj.dateAndTime);
-            const datapointIdentifier = `${dateKey}_${obj.deviceName}`;
-            // Initialize the map entry if it does not exist with a unique identifier.
-            if (!map.has(datapointIdentifier)) {
-                map.set(datapointIdentifier, Array(columnsHeadersReferences.length).fill(null));
+    handleAutoRefreshToggleChanges() {
+        this.formGroup.controls.isAutoRefreshEnabled.valueChanges
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((isAutoRefreshEnabled) => {
+            const aggregationControl = this.formGroup.controls.aggregation;
+            if (isAutoRefreshEnabled) {
+                aggregationControl.setValue(AGGREGATION_VALUES.none);
+                // Do not disable the control programmatically to ensure the value is saved.
             }
-            // Find the index of the reference that matches the current data point.
-            const matchingColumnIndex = columnsHeadersReferences.findIndex(ref => ref.deviceName === obj.deviceName && ref.label === obj.label);
-            // Update the map entry with the data point.
-            const tableItem = map.get(datapointIdentifier);
-            if (tableItem) {
-                tableItem[matchingColumnIndex] = { ...obj };
+            else {
+                aggregationControl.enable();
             }
         });
-        return map;
     }
     /**
-     * Merges the data points from the given map into an array of grouped data point table items.
-     *
-     * @param map - The map containing the data points to be merged.
-     * @returns An array of grouped data point table items.
+     * Handles changes in the interval selector form control.
      */
-    mergeDatapoints(map) {
-        const mergedData = [];
-        map.forEach((values, datapointIdentifier) => {
-            const [dateKey, deviceName] = datapointIdentifier.split('_');
-            const validDataPoint = values.some(item => item && Object.keys(item.value).length > 0);
-            if (validDataPoint) {
-                mergedData.push({
-                    dateAndTime: dateKey,
-                    deviceName: deviceName,
-                    rowItems: values.map(item => (item ? { ...item } : null))
-                });
+    handleIntervalSelectorChanges() {
+        this.formGroup.controls.interval.valueChanges
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((selectedInterval) => {
+            if (selectedInterval === INTERVAL_VALUES.custom) {
+                this.updateDisabledAggregationOptions();
+                return;
             }
+            this.handleNonCustomInterval(selectedInterval);
         });
-        return mergedData;
     }
-    sortDataByDateDescending(data) {
-        return data.sort((a, b) => new Date(b.dateAndTime).getTime() - new Date(a.dateAndTime).getTime());
+    handleNonCustomInterval(selectedInterval) {
+        this.isIntervalSelectorChangedProgrammatically = true;
+        this.updateDateRange(selectedInterval);
+        this.updateDisabledAggregationOptions();
+        this.updateAggregationIfAutoRefreshDisabled(selectedInterval);
     }
-    /**
-     * Prepares the updated time range based on the selected interval.
-     *
-     * In case of a 'custom' interval or no quantity, the original date range is returned.
-     *
-     * @param interval - The selected interval type.
-     * @returns An object containing the `dateFrom` and `dateTo` in ISO string format.
-     */
-    prepareTimeRange(interval, dateFromInput, dateToInput) {
-        if (!interval || interval === TIME_RANGE_INTERVAL_UNITS_VALUES.custom) {
-            return { dateFrom: dateFromInput, dateTo: dateToInput };
-        }
-        const selected = DURATION_OPTIONS.find(selectedDuration => selectedDuration.id === interval);
-        if (!selected?.amount) {
-            return { dateFrom: dateFromInput, dateTo: dateToInput };
-        }
-        const now = new Date();
-        return {
-            dateFrom: this.subtractTime(now, selected.amount, selected.unit).toISOString(),
-            dateTo: now.toISOString()
-        };
+    updateDateRange(selectedInterval) {
+        const dateRange = this.datapointsTableService.calculateDateRange(selectedInterval);
+        this.formGroup.controls.dateTo.setValue(dateRange.dateTo);
+        // MTM-61351
+        // Use requestAnimationFrame to queue the dateFrom update.
+        // This prevents timing issues where rapid setValue calls might
+        // cause the view to go out of sync with form control values,
+        // especially during the first change after initialization.
+        // requestAnimationFrame(() => {
+        /**
+         * Without this requestAnimationFrame or setTimeout, dateFrom won't change to a correct value after first selector change.
+         * When form is saved it saves with a correct value, even without with this fix.
+         * How to reproduce:
+         * 1. set date values to e.g.: 01.05.2024-30.05.2024 and save it
+         * 2. reopen a config and switch interval to last month
+         */
+        // This fix brakes a logic behind disabling non available aggregations.
+        // Form will be still saved with correct date value, only view is out of a sync.
+        this.formGroup.controls.dateFrom.setValue(dateRange.dateFrom);
+        this.isIntervalSelectorChangedProgrammatically = false;
+        // });
+    }
+    updateDisabledAggregationOptions() {
+        this.disabledAggregationOptions = this.aggregationService.getDisabledAggregationOptions(this.formGroup.controls.dateFrom.value, this.formGroup.controls.dateTo.value);
+    }
+    updateAggregationIfAutoRefreshDisabled(selectedInterval) {
+        const isAutoRefreshDisabled = !this.formGroup.controls.isAutoRefreshEnabled.value;
+        if (isAutoRefreshDisabled) {
+            this.setAggregationValue(selectedInterval);
+        }
+    }
+    setAggregationValue(interval) {
+        const aggregationControl = this.formGroup.controls.aggregation;
+        const newAggregationValue = this.aggregationService.determineAggregationValue(interval);
+        aggregationControl.setValue(newAggregationValue);
     }
     /**
-     * Subtracts an amount of time from a given date.
-     *
-     * @param date - The original date.
-     * @param amount - The amount of time units to subtract.
-     * @param unit - The unit of time to subtract (e.g., minutes, hours, days, weeks, months).
-     * @returns A new date with the specified time subtracted.
+     * Handles changes in the date selector form control.
      */
-    subtractTime(date, amount, unit) {
-        const newDate = new Date(date);
-        switch (unit) {
-            case TIME_RANGE_INTERVAL_UNITS_VALUES.minutes:
-                newDate.setUTCMinutes(newDate.getUTCMinutes() - amount);
-                break;
-            case TIME_RANGE_INTERVAL_UNITS_VALUES.hours:
-                newDate.setUTCHours(newDate.getUTCHours() - amount);
-                break;
-            case TIME_RANGE_INTERVAL_UNITS_VALUES.days:
-                newDate.setUTCDate(newDate.getUTCDate() - amount);
-                break;
-            case TIME_RANGE_INTERVAL_UNITS_VALUES.weeks:
-                newDate.setUTCDate(newDate.getUTCDate() - amount * 7);
-                break;
-            case TIME_RANGE_INTERVAL_UNITS_VALUES.months:
-                this.subtractMonthsAndAdjustDay(newDate, amount);
-                break;
-        }
-        return newDate;
+    handleDateSelectorChanges() {
+        merge(this.formGroup.controls.dateFrom.valueChanges, this.formGroup.controls.dateTo.valueChanges)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => this.handleDateChange());
     }
-    getSeriesWithoutPermissionToRead(activeDatapointsSeriesData, activeDatapointsIdsWithSeries) {
-        if (!activeDatapointsSeriesData) {
-            // Returns all activeDatapointsIdsWithSeries entries if activeDatapointsSeriesData is undefined.
-            // It means that the user does not have permission to see any of the selected datapoints data.
-            return Array.from(activeDatapointsIdsWithSeries, mapToSourceValueObject);
+    handleDateChange() {
+        if (this.isIntervalSelectorChangedProgrammatically) {
+            return;
         }
-        const availableSources = new Set(activeDatapointsSeriesData.keys());
-        return Array.from(activeDatapointsIdsWithSeries)
-            .filter(([source]) => !availableSources.has(source))
-            .map(mapToSourceValueObject);
+        const intervalControl = this.formGroup.controls.interval;
+        if (intervalControl.value === INTERVAL_VALUES.custom) {
+            this.handleCustomIntervalDateChange();
+        }
+        else {
+            this.setIntervalToCustom(intervalControl);
+        }
+        this.setToFirstAvailableAggregationOptionIfCurrentAggregationIsDisabled();
+    }
+    handleCustomIntervalDateChange() {
+        this.updateDisabledAggregationOptions();
+    }
+    setIntervalToCustom(intervalControl) {
+        intervalControl.setValue(INTERVAL_VALUES.custom);
     }
     /**
-     * Converts a date string to ISO format.
-     *
-     * @param dateStr - The date string to convert.
-     * @returns The ISO format of the given date string.
+     * Handles changes in the global date selector form control.
      */
-    toISOFormat(dateStr) {
-        return new Date(dateStr).toISOString();
-    }
-    filterOutElementsWithForbiddenResponses(seriesDataWithResponse) {
-        return seriesDataWithResponse.filter(item => {
-            return !(item.res?.status === 403);
+    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();
+            // }
         });
     }
-    subtractMonthsAndAdjustDay(date, monthsToSubtract) {
-        const currentMonth = date.getUTCMonth();
-        const expectedTargetMonth = this.calculateTargetMonth(currentMonth, monthsToSubtract);
-        date.setUTCMonth(currentMonth - monthsToSubtract);
-        const actualMonth = date.getUTCMonth();
-        const dayDoesNotExistInTargetMonth = actualMonth !== expectedTargetMonth;
-        if (dayDoesNotExistInTargetMonth) {
-            this.setToLastDayOfPreviousMonth(date);
+    handleDashboardContext() {
+        this.isWidgetLinkedToGlobalTimeContext = true;
+    }
+    handleNonDashboardContext() {
+        this.isWidgetLinkedToGlobalTimeContext = false;
+        if (this.isConfigSavedWithoutDashboardTimeOption()) {
+            return;
+        }
+        this.updateAggregationIfNecessary();
+        this.setIntervalToCustom(this.formGroup.controls.interval);
+    }
+    isConfigSavedWithoutDashboardTimeOption() {
+        return !this.config.widgetInstanceGlobalTimeContext;
+    }
+    updateAggregationIfNecessary() {
+        const aggregationControl = this.formGroup.controls.aggregation;
+        const isDashboardTimeOptionSetAggregationToNull = !aggregationControl.value;
+        if (isDashboardTimeOptionSetAggregationToNull) {
+            aggregationControl.setValue(AGGREGATION_VALUES.none);
         }
     }
     /**
-     * Calculates the target month number (0-11) after subtracting months from the current month.
-     * Handles negative month numbers by normalizing them to the valid 0-11 range.
+     * Sets the aggregation control to the first available (non-disabled) option if the current option is disabled.
      *
-     * Examples:
-     * - January(0) - 1 month = December(11)
-     * - March(2) - 4 months = November(10)
-     * - December(11) - 1 month = November(10)
+     * This method:
+     * - Retrieves the current value of the aggregation control.
+     * - Checks if the current aggregation option is disabled.
+     * - If the current option is disabled, sets the control to the first available (non-disabled) option based on the following order:
+     *   - If the current value is `DAILY`, it switches to `HOURLY` if it's not disabled, otherwise to `MINUTELY` if `HOURLY` is also disabled.
+     *   - If the current value is `HOURLY`, it switches to `MINUTELY` if it's not disabled.
+     *   - If all options are disabled, it sets the value to `NONE`.
      *
-     * @param currentMonth - Current month (0-11, where 0 is January)
-     * @param monthsToSubtract - Number of months to subtract
-     * @returns Normalized month number in range 0-11
-     */
-    calculateTargetMonth(currentMonth, monthsToSubtract) {
-        return (currentMonth - monthsToSubtract + 12) % 12;
-    }
-    /**
-     * Sets the date to the last day of the previous month.
-     * Using 0 as dateValue makes JavaScript automatically calculate
-     * last day of previous month, per JavaScript Date API behavior.
-     * @param date - Date to modify
+     * The disabled state is stored in the `disabledAggregationOptions` object,
+     * where the key is the aggregation value and the value is a boolean indicating whether the option is disabled.
+     *
+     * The `AGGREGATION_VALUES` object defines the possible aggregation values.
      */
-    setToLastDayOfPreviousMonth(date) {
-        date.setUTCDate(0);
+    setToFirstAvailableAggregationOptionIfCurrentAggregationIsDisabled() {
+        const aggregationControl = this.formGroup.controls.aggregation;
+        const currentValue = aggregationControl.value;
+        const newAggregationValue = this.aggregationService.determineFirstNewAvailableAggregationValue(currentValue, this.disabledAggregationOptions);
+        if (newAggregationValue !== currentValue) {
+            aggregationControl.setValue(newAggregationValue);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsTableViewService, deps: [{ token: i1.MeasurementService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsTableViewService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsTableWidgetConfigComponent, deps: [{ token: i1$1.AggregationService }, { token: DatapointsTableService }, { 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: i6.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: i7.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: DatapointsTableViewService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i1.MeasurementService }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsTableWidgetConfigComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-datapoints-table-view-config', standalone: true, imports: [
+                        CoreModule,
+                        DatapointSelectorModule,
+                        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" }]
+        }], ctorParameters: () => [{ type: i1$1.AggregationService }, { type: DatapointsTableService }, { type: i3.FormBuilder }, { type: i3.NgForm }, { type: i4.WidgetConfigComponent }], propDecorators: { config: [{
+                type: Input
+            }] } });
 
-class DatapointsTableService {
-    constructor(datapointsTableViewService) {
-        this.datapointsTableViewService = datapointsTableViewService;
-    }
-    calculateDateRange(interval) {
-        const now = new Date();
-        const nowString = now.toISOString();
-        let dateFrom;
-        switch (interval) {
-            case TIME_RANGE_INTERVAL_UNITS_VALUES.minutes:
-                dateFrom = this.datapointsTableViewService.adjustDate(nowString, -1, true);
-                break;
-            case TIME_RANGE_INTERVAL_UNITS_VALUES.hours:
-                const minutesInAnHourNegative = -60;
-                dateFrom = this.datapointsTableViewService.adjustDate(nowString, minutesInAnHourNegative, true);
-                break;
-            case TIME_RANGE_INTERVAL_UNITS_VALUES.days:
-                const minutesInADayNegative = -24 * 60;
-                dateFrom = this.datapointsTableViewService.adjustDate(nowString, minutesInADayNegative, true);
-                break;
-            case TIME_RANGE_INTERVAL_UNITS_VALUES.weeks:
-                const minutesInAWeekNegative = -7 * 24 * 60;
-                dateFrom = this.datapointsTableViewService.adjustDate(nowString, minutesInAWeekNegative, true);
-                break;
-            case TIME_RANGE_INTERVAL_UNITS_VALUES.months:
-                const oneMonthAgo = new Date(now);
-                oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1);
-                dateFrom = this.datapointsTableViewService.adjustDate(oneMonthAgo.toISOString(), 0, true);
-                break;
+/**
+ * A pipe that adjusts the aggregated time range based on the aggregation type.
+ *
+ * ```html
+ * '9:00' | adjustAggregatedTimeRange: config.aggregation (e.g.:HOURLY)
+ * ```
+ * The output will be '9:00-10:00'.
+ */
+class AdjustAggregatedTimeRangePipe {
+    /**
+     * Transforms the input time based on the aggregation type.
+     * @param inputTime The input time string.
+     * @param aggregationType The type of aggregation (optional).
+     * @returns The transformed time string.
+     */
+    transform(inputTime, aggregationType$1) {
+        if (!aggregationType$1) {
+            return inputTime;
+        }
+        if (aggregationType$1 === aggregationType.DAILY) {
+            return '';
+        }
+        const date = this.createDateFromInput(inputTime);
+        const isTwelveHoursFormat = this.isTwelveHoursFormat(inputTime);
+        switch (aggregationType$1) {
+            case aggregationType.HOURLY:
+                return this.getHourlyTimeRange(date, isTwelveHoursFormat);
+            case aggregationType.MINUTELY:
+                return this.getMinutelyTimeRange(date, isTwelveHoursFormat);
             default:
-                throw new Error('Invalid time interval');
+                throw new Error('Unsupported aggregation type');
         }
-        return {
-            dateFrom: dateFrom,
-            dateTo: this.datapointsTableViewService.adjustDate(nowString, 0, true)
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsTableService, deps: [{ token: DatapointsTableViewService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsTableService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsTableService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: DatapointsTableViewService }] });
-
-class DateRangePickerComponent {
-    constructor() {
-        /**
-         * If set to true, the component will be reactive and will emit the updatedDate on every change.
-         * Otherwise, the component will use a non emitting variant of a template.
-         */
-        this.isEmittingDateChange = false;
-        /**
-         * Determines the display of from and to date picker labels.
-         */
-        this.showLabel = true;
-        this.updatedDate = new EventEmitter();
-        this.DATE_FROM = 'dateFrom';
-        this.DATE_TO = 'dateTo';
-        this.FROM_DATE = gettext('From`date`');
-        this.HAS_ERROR = 'has-error';
-        this.INVALID_DATE_TIME = 'invalidDateTime';
-        this.THIS_DATE_IS_INVALID = gettext('This date is invalid.');
-        this.THIS_DATE_IS_AFTER_THE_LAST_ALLOWED_DATE = gettext('This date is after the latest allowed date.');
-        this.THIS_DATE_IS_BEFORE_THE_EARLIEST_ALLOWED_DATE = gettext('This date is before the earliest allowed date.');
-        this.TO_DATE = gettext('To`date`');
-        this.parentContainer = inject(ControlContainer);
-    }
-    onDateFromChange(dateFrom) {
-        this.updatedDate.emit({
-            dateFrom
-        });
-    }
-    onDateToChange(dateTo) {
-        this.updatedDate.emit({
-            dateTo
-        });
-    }
-    get parentFormGroup() {
-        return this.parentContainer.control;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DateRangePickerComponent, isStandalone: true, selector: "c8y-date-range-picker", inputs: { isEmittingDateChange: "isEmittingDateChange", showLabel: "showLabel" }, outputs: { updatedDate: "updatedDate" }, ngImport: i0, template: "<div class=\"d-flex gap-8 a-i-center flex-wrap\">\n  <c8y-form-group\n    [ngClass]=\"[\n      parentFormGroup?.controls.dateFrom.errors ? HAS_ERROR : '',\n      isEmittingDateChange ? 'd-flex a-i-center gap-4 m-b-0' : ''\n    ]\"\n  >\n    <ng-container *ngIf=\"showLabel\">\n      <label\n        [title]=\"FROM_DATE | translate\"\n        [for]=\"DATE_FROM\"\n      >\n        {{ FROM_DATE | translate }}\n      </label>\n    </ng-container>\n    <c8y-date-time-picker\n      id=\"DATE_FROM\"\n      [maxDate]=\"parentFormGroup?.value.dateTo\"\n      [placeholder]=\"FROM_DATE | translate\"\n      [formControl]=\"parentFormGroup?.controls.dateFrom\"\n      [ngClass]=\"parentFormGroup?.controls.dateFrom.errors ? HAS_ERROR : ''\"\n      (ngModelChange)=\"onDateFromChange($event)\"\n    ></c8y-date-time-picker>\n    <c8y-messages\n      class=\"text-nowrap\"\n      [show]=\"parentFormGroup?.controls.dateFrom.errors\"\n    >\n      <c8y-message\n        name=\"dateAfterRangeMax\"\n        [text]=\"THIS_DATE_IS_AFTER_THE_LAST_ALLOWED_DATE | translate\"\n      ></c8y-message>\n      <c8y-message\n        name=\"INVALID_DATE_TIME\"\n        [text]=\"THIS_DATE_IS_INVALID | translate\"\n      ></c8y-message>\n    </c8y-messages>\n  </c8y-form-group>\n  <c8y-form-group\n    [ngClass]=\"[\n      parentFormGroup?.controls.dateTo.errors ? HAS_ERROR : '',\n      isEmittingDateChange ? 'd-flex a-i-center gap-4 m-b-0' : ''\n    ]\"\n  >\n    <ng-container *ngIf=\"showLabel\">\n      <label\n        [title]=\"TO_DATE | translate\"\n        [for]=\"DATE_TO\"\n      >\n        {{ TO_DATE | translate }}\n      </label>\n    </ng-container>\n    <c8y-date-time-picker\n      id=\"DATE_TO\"\n      [minDate]=\"parentFormGroup?.value.dateFrom\"\n      [placeholder]=\"TO_DATE | translate\"\n      [formControl]=\"parentFormGroup?.controls.dateTo\"\n      [ngClass]=\"parentFormGroup?.controls.dateTo.errors ? HAS_ERROR : ''\"\n      (ngModelChange)=\"onDateToChange($event)\"\n    ></c8y-date-time-picker>\n    <c8y-messages [show]=\"parentFormGroup?.controls.dateTo.errors\">\n      <c8y-message\n        name=\"dateBeforeRangeMin\"\n        [text]=\"THIS_DATE_IS_BEFORE_THE_EARLIEST_ALLOWED_DATE | translate\"\n      ></c8y-message>\n      <c8y-message\n        name=\"INVALID_DATE_TIME\"\n        [text]=\"THIS_DATE_IS_INVALID | translate\"\n      ></c8y-message>\n    </c8y-messages>\n  </c8y-form-group>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { 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: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i1$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i1$1.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i1$1.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i1$1.DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }], viewProviders: [
-            {
-                provide: ControlContainer,
-                useFactory: () => inject(ControlContainer, { skipSelf: true })
-            }
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DateRangePickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-date-range-picker', standalone: true, imports: [CoreModule, CommonModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
-                        {
-                            provide: ControlContainer,
-                            useFactory: () => inject(ControlContainer, { skipSelf: true })
-                        }
-                    ], template: "<div class=\"d-flex gap-8 a-i-center flex-wrap\">\n  <c8y-form-group\n    [ngClass]=\"[\n      parentFormGroup?.controls.dateFrom.errors ? HAS_ERROR : '',\n      isEmittingDateChange ? 'd-flex a-i-center gap-4 m-b-0' : ''\n    ]\"\n  >\n    <ng-container *ngIf=\"showLabel\">\n      <label\n        [title]=\"FROM_DATE | translate\"\n        [for]=\"DATE_FROM\"\n      >\n        {{ FROM_DATE | translate }}\n      </label>\n    </ng-container>\n    <c8y-date-time-picker\n      id=\"DATE_FROM\"\n      [maxDate]=\"parentFormGroup?.value.dateTo\"\n      [placeholder]=\"FROM_DATE | translate\"\n      [formControl]=\"parentFormGroup?.controls.dateFrom\"\n      [ngClass]=\"parentFormGroup?.controls.dateFrom.errors ? HAS_ERROR : ''\"\n      (ngModelChange)=\"onDateFromChange($event)\"\n    ></c8y-date-time-picker>\n    <c8y-messages\n      class=\"text-nowrap\"\n      [show]=\"parentFormGroup?.controls.dateFrom.errors\"\n    >\n      <c8y-message\n        name=\"dateAfterRangeMax\"\n        [text]=\"THIS_DATE_IS_AFTER_THE_LAST_ALLOWED_DATE | translate\"\n      ></c8y-message>\n      <c8y-message\n        name=\"INVALID_DATE_TIME\"\n        [text]=\"THIS_DATE_IS_INVALID | translate\"\n      ></c8y-message>\n    </c8y-messages>\n  </c8y-form-group>\n  <c8y-form-group\n    [ngClass]=\"[\n      parentFormGroup?.controls.dateTo.errors ? HAS_ERROR : '',\n      isEmittingDateChange ? 'd-flex a-i-center gap-4 m-b-0' : ''\n    ]\"\n  >\n    <ng-container *ngIf=\"showLabel\">\n      <label\n        [title]=\"TO_DATE | translate\"\n        [for]=\"DATE_TO\"\n      >\n        {{ TO_DATE | translate }}\n      </label>\n    </ng-container>\n    <c8y-date-time-picker\n      id=\"DATE_TO\"\n      [minDate]=\"parentFormGroup?.value.dateFrom\"\n      [placeholder]=\"TO_DATE | translate\"\n      [formControl]=\"parentFormGroup?.controls.dateTo\"\n      [ngClass]=\"parentFormGroup?.controls.dateTo.errors ? HAS_ERROR : ''\"\n      (ngModelChange)=\"onDateToChange($event)\"\n    ></c8y-date-time-picker>\n    <c8y-messages [show]=\"parentFormGroup?.controls.dateTo.errors\">\n      <c8y-message\n        name=\"dateBeforeRangeMin\"\n        [text]=\"THIS_DATE_IS_BEFORE_THE_EARLIEST_ALLOWED_DATE | translate\"\n      ></c8y-message>\n      <c8y-message\n        name=\"INVALID_DATE_TIME\"\n        [text]=\"THIS_DATE_IS_INVALID | translate\"\n      ></c8y-message>\n    </c8y-messages>\n  </c8y-form-group>\n</div>\n" }]
-        }], propDecorators: { isEmittingDateChange: [{
-                type: Input
-            }], showLabel: [{
-                type: Input
-            }], updatedDate: [{
-                type: Output
-            }] } });
-
-class DatapointsTableConfigService {
-    /**
-     * Determines the interval between two dates.
-     *
-     * @param dateFrom - The starting date in ISO 8601 string format.
-     * @param dateTo - The ending date in ISO 8601 string format.
-     * @returns The time range interval unit.
-     */
-    // TODO same method is in datapoints export component. Consider moving it to a shared service, or reuse it here
-    // when DPT will be integrating with MTM-59689.
-    // Integration task: MTM-60221
-    // tests are already added in MTM-60217
-    determineInterval(dateFrom, dateTo) {
-        const from = new Date(dateFrom);
-        const to = new Date(dateTo);
-        const differenceInMilliseconds = to.getTime() - from.getTime();
-        const [minutes, hours, days, weeks, months, custom] = INTERVALS;
-        const intervals = [
-            { value: minutes.timespanInMs, id: minutes.id }, // milliseconds in one minute
-            { value: hours.timespanInMs, id: hours.id }, // milliseconds in one hour
-            { value: days.timespanInMs, id: days.id }, // milliseconds in one day
-            { value: weeks.timespanInMs, id: weeks.id }, // milliseconds in one week
-            { value: months.timespanInMs, id: months.id } // approximation for milliseconds in one month
-        ];
-        const interval = intervals.find(interval => differenceInMilliseconds <= interval.value);
-        return interval ? interval.id : custom.id;
     }
     /**
-     * Updates the disabled state of aggregation options based on the current value of the time interval form control.
-     *
-     * This method:
-     * - Retrieves the current date range from the form controls.
-     * - Determines the current time interval based on the date range.
-     * - Sets the disabled state for each aggregation option based on predefined conditions.
-     *
-     * The disabled state is stored in the `disabledAggregationOptions` object,
-     * where the key is the aggregation value and the value is a boolean indicating whether the option should be disabled.
-     *
-     * The `disabledConditions` object defines the conditions under which each aggregation option should be disabled.
-     *
-     * @param dateFrom - The starting date of the range.
-     * @param dateTo - The ending date of the range.
-     * @param aggregationValuesArr - An array of aggregation options.
-     * @returns An object containing the disabled state of each aggregation option.
-     */
-    // TODO similar method is in datapoints export component. Consider moving it to a shared service when DPT will be integrating with MTM-59689.
-    // Integration task: MTM-60221
-    // tests are already added in MTM-60217
-    updateDisabledStateOfAggregationOptionEntries(dateFrom, dateTo, aggregationValuesArr) {
-        const currentInterval = this.determineInterval(dateFrom, dateTo);
-        const disabledConditions = {
-            [AGGREGATION_VALUES.daily]: [
-                TIME_RANGE_INTERVAL_UNITS_VALUES.minutes,
-                TIME_RANGE_INTERVAL_UNITS_VALUES.hours,
-                TIME_RANGE_INTERVAL_UNITS_VALUES.days
-            ],
-            [AGGREGATION_VALUES.hourly]: [
-                TIME_RANGE_INTERVAL_UNITS_VALUES.minutes,
-                TIME_RANGE_INTERVAL_UNITS_VALUES.hours
-            ],
-            [AGGREGATION_VALUES.minutely]: [TIME_RANGE_INTERVAL_UNITS_VALUES.minutes]
-        };
-        const disabledAggregationOptions = {};
-        for (const aggregationValue of aggregationValuesArr) {
-            disabledAggregationOptions[aggregationValue] =
-                disabledConditions[aggregationValue]?.includes(currentInterval) ?? false;
-        }
-        return disabledAggregationOptions;
-    }
-    /**
-     * Determines the new aggregation value based on the current value and disabled options.
-     *
-     * Goal is to switch to the next available aggregation option if the current one is disabled.
-     * - If the current option is disabled, sets the control to the first available (non-disabled) option based on the following order:
-     *   - If the current value is `DAILY`, it switches to `HOURLY` if it's not disabled, otherwise to `MINUTELY` if `HOURLY` is also disabled.
-     *   - If the current value is `HOURLY`, it switches to `MINUTELY` if it's not disabled.
-     *   - If all options are disabled, it sets the value to `NONE`.
-     *
-     * @param currentValue - The current aggregation option.
-     * @param disabledOptions - An object containing disabled options.
-     * @returns The new aggregation option.
+     * Creates a date object from the input time string.
+     * @param inputTime The input time string.
+     * @returns The created Date object.
      */
-    determineNewAggregationValue(currentValue, disabledOptions) {
-        const { daily, hourly, minutely, none } = AGGREGATION_VALUES;
-        if (!disabledOptions[currentValue]) {
-            return currentValue; // Return the current value if it's not disabled
-        }
-        if (currentValue === daily) {
-            return !disabledOptions[hourly] ? hourly : !disabledOptions[minutely] ? minutely : none;
-        }
-        if (currentValue === hourly) {
-            return !disabledOptions[minutely] ? minutely : none;
+    createDateFromInput(inputTime) {
+        const defaultDate = '1970-01-01 ';
+        const isPM = /PM/i.test(inputTime);
+        const cleanedTime = inputTime.replace(/AM|PM/i, '').trim();
+        this.validateTimeFormat(cleanedTime, inputTime);
+        const dateTimeString = `${defaultDate}${cleanedTime}`;
+        const date = new Date(dateTimeString);
+        if (isNaN(date.getTime())) {
+            throw new Error('Invalid input time');
         }
-        return none; // Fallback to 'none' if all else fails
+        return this.adjustForPMTime(date, isPM);
     }
     /**
-     * Determines the aggregation value based on the provided interval.
-     *
-     * @param interval - The time range interval.
-     * @returns The corresponding aggregation value.
+     * Validates if the time string matches the required format and has valid values.
+     * @param time The time string to validate.
+     * @param originalInput The original input string (including AM/PM if present).
+     * @throws Error if the time format is invalid or values are out of range.
      */
-    determineAggregationValue(interval) {
-        const aggregationMap = {
-            [TIME_RANGE_INTERVAL_UNITS_VALUES.minutes]: AGGREGATION_VALUES.none,
-            [TIME_RANGE_INTERVAL_UNITS_VALUES.hours]: AGGREGATION_VALUES.minutely,
-            [TIME_RANGE_INTERVAL_UNITS_VALUES.days]: AGGREGATION_VALUES.hourly
-        };
-        return aggregationMap[interval] || AGGREGATION_VALUES.daily;
+    validateTimeFormat(time, originalInput) {
+        const parts = time.split(':');
+        this.validateTimeParts(parts);
+        const [hoursStr, minutesStr, secondsStr] = parts;
+        this.validateTimeDigits(hoursStr, minutesStr, secondsStr);
+        const { hours, minutes, seconds } = this.parseTimeComponents(hoursStr, minutesStr, secondsStr);
+        this.validateTimeRanges(hours, minutes, seconds);
+        this.validateTimeFormat24Hour(hours, originalInput);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsTableConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsTableConfigService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsTableConfigService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-function minOneDatapointActive() {
-    return (control) => {
-        const datapoints = control.value;
-        if (!datapoints || !datapoints.length) {
-            return null;
-        }
-        const activeDatapoints = datapoints.filter(datapoint => datapoint.__active);
-        if (activeDatapoints.length >= 1) {
-            return null;
+    validateTimeParts(parts) {
+        if (parts.length < 2 || parts.length > 3) {
+            throw new Error('Invalid input time');
         }
-        return { exactlyOneDatapointNeedsToBeActive: true };
-    };
-}
-class DatapointsTableWidgetConfigComponent {
-    constructor(datapointsTableService, datapointsTableConfigService, formBuilder, form, widgetConfig) {
-        this.datapointsTableService = datapointsTableService;
-        this.datapointsTableConfigService = datapointsTableConfigService;
-        this.formBuilder = formBuilder;
-        this.form = form;
-        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.TIME_RANGE_INTERVAL_LABELS = TIME_RANGE_INTERVAL_LABELS;
-        this.AGGREGATION_VALUES_ARR = AGGREGATION_VALUES_ARR;
-        this.DATE_SELECTION_VALUES_ARR = DATE_SELECTION_VALUES_ARR;
-        this.INTERVAL_VALUES_ARR = INTERVAL_VALUES_ARR;
-        this.REFRESH_INTERVAL_VALUES_ARR = REFRESH_INTERVAL_VALUES_ARR;
-        this.datapointSelectionConfig = {};
-        this.disabledAggregationOptions = {};
-        this.defaultFormOptions = {
-            selectableChartLineTypes: [],
-            selectableAxisTypes: [],
-            showRedRange: true,
-            showYellowRange: true
-        };
-        this.decimalLimits = {
-            numberOfDecimalPlacesMin: 0,
-            numberOfDecimalPlacesMax: 10
-        };
-        /**
-         * Indicate when the time interval selector item has been changed programmatically.
-         *
-         * This property is used to track changes in the time interval selector
-         * that are not triggered by direct user interaction, but by the application itself.
-         *
-         * In our case, the date selector and the interval selector are linked.
-         * So, when one of them changes, it affects the other.
-         * For example, selecting "Last hour" in the interval selector should automatically update the date range to the last hour.
-         * But without this flag, changing the date range would also update the interval selector, resulting in "Custom date" being selected.
-         * This happens because the system would interpret the behavior this way.
-         */
-        this.isIntervalSelectorChangedProgrammatically = false;
-        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;
+    validateTimeDigits(hoursStr, minutesStr, secondsStr) {
+        if (!this.isValidNumberString(hoursStr) ||
+            !this.isValidNumberString(minutesStr) ||
+            (secondsStr !== undefined && !this.isValidNumberString(secondsStr))) {
+            throw new Error('Invalid input time');
         }
-        this.isWidgetLinkedToGlobalTimeContext = this.config.widgetInstanceGlobalTimeContext;
-        this.initForm();
-        this.handleAutoRefreshToggleChanges();
-        this.handleIntervalSelectorChanges();
-        this.handleDateSelectorChanges();
-        this.handleGlobalDateSelectorChanges();
-        this.disabledAggregationOptions =
-            this.datapointsTableConfigService.updateDisabledStateOfAggregationOptionEntries(this.formGroup.controls.dateFrom.value, this.formGroup.controls.dateTo.value, AGGREGATION_VALUES_ARR);
     }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
+    parseTimeComponents(hoursStr, minutesStr, secondsStr) {
+        return {
+            hours: Number(hoursStr),
+            minutes: Number(minutesStr),
+            seconds: secondsStr ? Number(secondsStr) : 0
+        };
     }
-    onBeforeSave(config) {
-        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;
+    validateTimeRanges(hours, minutes, seconds) {
+        if (hours > 23 || hours < 0 || minutes > 59 || minutes < 0 || seconds > 59 || seconds < 0) {
+            throw new Error('Invalid input time');
         }
-        this.updateTimeContext(config, this.formGroup.value.globalDateSelector);
-        Object.assign(config, this.formGroup.value);
     }
-    toggleRefreshIntervalControl() {
-        this.formGroup.controls.isAutoRefreshEnabled.value
-            ? this.formGroup.controls.refreshInterval.disable()
-            : this.formGroup.controls.refreshInterval.enable();
-    }
-    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.view_and_config:
-                config.displayDateSelection = true;
-                config.widgetInstanceGlobalTimeContext = false;
-                break;
-            case DATE_SELECTION_VALUES.config:
-            default:
-                config.displayDateSelection = false;
-                config.widgetInstanceGlobalTimeContext = false;
+    validateTimeFormat24Hour(hours, originalInput) {
+        if (hours > 12 && this.hasAmPm(originalInput)) {
+            throw new Error('Invalid input time');
         }
     }
-    initForm() {
-        this.formGroup = this.createForm();
-        // When the 'NONE' aggregation is removed at the 'onBeforeSave' block,
-        // and a Global Date Context forces widgets auto refresh to be enabled
-        // then, the aggregation selector will be empty on initial load.
-        this.config.aggregation = this.config.aggregation ?? AGGREGATION_VALUES.none;
-        this.form.form.addControl('config', this.formGroup);
-        this.formGroup.patchValue(this.config);
+    /**
+     * Checks if string contains only digits and is 1-2 characters long.
+     * @param value String to check
+     * @returns boolean indicating if string is valid
+     */
+    isValidNumberString(value) {
+        return (value.length > 0 &&
+            value.length <= 2 &&
+            value.split('').every(char => char >= '0' && char <= '9'));
     }
-    createForm() {
-        const { dateFrom, dateTo } = this.datapointsTableService.calculateDateRange(this.DEFAULT_INTERVAL_VALUE);
-        const isLegacyWidget = this.config.realtime !== undefined && !this.config.decimalPlaces;
-        return this.formBuilder.group({
-            aggregation: new FormControl({
-                value: AGGREGATION_VALUES.none,
-                disabled: !this.isAutoRefershDisabled()
-            }),
-            datapoints: this.formBuilder.control(new Array(), [
-                Validators.required,
-                Validators.minLength(1),
-                minOneDatapointActive()
-            ]),
-            globalDateSelector: new FormControl(isLegacyWidget
-                ? this.determineGlobalDateSelectorValue()
-                : this.DEFAULT_DATE_SELECTOR_VALUE),
-            dateFrom: new FormControl(dateFrom),
-            dateTo: new FormControl(dateTo),
-            decimalPlaces: [
-                2,
-                [
-                    Validators.required,
-                    Validators.min(this.decimalLimits.numberOfDecimalPlacesMin),
-                    Validators.max(this.decimalLimits.numberOfDecimalPlacesMax),
-                    Validators.pattern('^[0-9]+$')
-                ]
-            ],
-            interval: new FormControl(this.DEFAULT_INTERVAL_VALUE),
-            isAutoRefreshEnabled: isLegacyWidget ? this.config.realtime : [true],
-            refreshInterval: new FormControl({
-                value: DEFAULT_COUNTDOWN_VALUE,
-                disabled: this.isAutoRefershDisabled()
-            })
-        }, { validators: dateRangeValidator });
+    /**
+     * Checks if the input time has AM/PM markers.
+     * @param input The input time string to check.
+     * @returns boolean indicating if the input contains AM/PM.
+     */
+    hasAmPm(input) {
+        return /AM|PM/i.test(input);
     }
-    determineGlobalDateSelectorValue() {
-        if (this.config.displayDateSelection && !this.config.widgetInstanceGlobalTimeContext) {
-            return DATE_SELECTION_VALUES.view_and_config;
+    /**
+     * Adjusts the date for PM times by adding 12 hours when necessary.
+     * @param date The date object to adjust.
+     * @param isPM Boolean indicating if the time is PM.
+     * @returns The adjusted Date object.
+     */
+    adjustForPMTime(date, isPM) {
+        const hours = date.getHours();
+        if (isPM && hours < 12) {
+            date.setHours(hours + 12);
         }
-        if (!this.config.displayDateSelection && !this.config.widgetInstanceGlobalTimeContext) {
-            return DATE_SELECTION_VALUES.config;
+        else if (!isPM && hours === 12) {
+            date.setHours(0);
         }
+        return date;
     }
-    isAutoRefershDisabled() {
-        const isInitialWidgetCreation = Object.keys(this.config).length === 1 && this.config['settings'];
-        if (isInitialWidgetCreation) {
-            return false;
-        }
-        const isLegacyWidgetRealtimeNotActive = !this.config.realtime &&
-            !this.config.decimalPlaces &&
-            !this.config.refreshInterval &&
-            !this.config.isAutoRefreshEnabled;
-        if (isLegacyWidgetRealtimeNotActive) {
-            return true;
-        }
-        return !this.config.isAutoRefreshEnabled;
+    /**
+     * Checks if the input time is in twelve hours format.
+     * @param inputTime The input time string.
+     * @returns True if the input time is in twelve hours format, false otherwise.
+     */
+    isTwelveHoursFormat(inputTime) {
+        return /AM|PM/i.test(inputTime);
     }
     /**
-     * Handles changes to the auto-refresh toggle control and updates the aggregation control accordingly.
-     *
-     * This method subscribes to the value changes of the auto-refresh toggle form control.
-     * When auto-refresh is enabled, the aggregation control's value is set to 'none' and the control is
-     * visually disabled (but not programmatically disabled to ensure the value is saved).
-     * When auto-refresh is disabled, the aggregation control is enabled.
+     * Gets the hourly time range for the given date.
+     * @param date The date object.
+     * @param twelveHoursFormat Indicates whether to use twelve hours format.
+     * @returns The hourly time range string.
      */
-    handleAutoRefreshToggleChanges() {
-        this.formGroup.controls.isAutoRefreshEnabled.valueChanges
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((isAutoRefreshEnabled) => {
-            const aggregationControl = this.formGroup.controls.aggregation;
-            if (isAutoRefreshEnabled) {
-                aggregationControl.setValue(AGGREGATION_VALUES.none);
-                // Do not disable the control programmatically to ensure the value is saved.
-            }
-            else {
-                aggregationControl.enable();
-            }
-        });
+    getHourlyTimeRange(date, twelveHoursFormat) {
+        const nextHour = new Date(date.getTime());
+        nextHour.setHours(date.getHours() + 1);
+        return `${this.formatTime(date, twelveHoursFormat, true)}-${this.formatTime(nextHour, twelveHoursFormat, true)}`;
     }
     /**
-     * Handles changes in the interval selector form control.
+     * Gets the minutely time range for the given date.
+     * @param date The date object.
+     * @param twelveHoursFormat Indicates whether to use twelve hours format.
+     * @returns The minutely time range string.
      */
-    handleIntervalSelectorChanges() {
-        this.formGroup.controls.interval.valueChanges
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((selectedInterval) => {
-            if (selectedInterval === TIME_RANGE_INTERVAL_UNITS_VALUES.custom) {
-                this.updateDisabledAggregationOptions();
-                return;
-            }
-            this.handleNonCustomInterval(selectedInterval);
-        });
+    getMinutelyTimeRange(date, twelveHoursFormat) {
+        const nextMinute = new Date(date.getTime());
+        nextMinute.setMinutes(date.getMinutes() + 1);
+        return `${this.formatTime(date, twelveHoursFormat, false)}-${this.formatTime(nextMinute, twelveHoursFormat, false)}`;
     }
-    handleNonCustomInterval(selectedInterval) {
-        this.isIntervalSelectorChangedProgrammatically = true;
-        this.updateDateRange(selectedInterval);
-        this.updateDisabledAggregationOptions();
-        this.updateAggregationIfAutoRefreshDisabled(selectedInterval);
+    /**
+     * Formats the given date into a time string.
+     * @param date The date to format.
+     * @param usePeriod Indicates whether to include the period (AM/PM) in the formatted time.
+     * @param useHourOnly Indicates whether to include only the hour part in the formatted time.
+     * @returns The formatted time string.
+     */
+    formatTime(date, usePeriod, useHourOnly) {
+        const hours = date.getHours();
+        const minutes = date.getMinutes().toString().padStart(2, '0');
+        if (usePeriod) {
+            const period = hours >= 12 ? 'PM' : 'AM';
+            const formattedHours = hours % 12 === 0 ? 12 : hours % 12;
+            return `${formattedHours}:${useHourOnly ? '00' : minutes} ${period}`;
+        }
+        else {
+            return `${hours.toString().padStart(2, '0')}:${useHourOnly ? '00' : minutes}`;
+        }
     }
-    updateDateRange(selectedInterval) {
-        const dateRange = this.datapointsTableService.calculateDateRange(selectedInterval);
-        this.formGroup.controls.dateTo.setValue(dateRange.dateTo);
-        // MTM-61351
-        // Use requestAnimationFrame to queue the dateFrom update.
-        // This prevents timing issues where rapid setValue calls might
-        // cause the view to go out of sync with form control values,
-        // especially during the first change after initialization.
-        // requestAnimationFrame(() => {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AdjustAggregatedTimeRangePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: AdjustAggregatedTimeRangePipe, isStandalone: true, name: "adjustAggregatedTimeRange" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AdjustAggregatedTimeRangePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'adjustAggregatedTimeRange',
+                    standalone: true
+                }]
+        }] });
+
+/**
+ * Applies CSS classes based on the value's range.
+ */
+class ApplyRangeClassPipe {
+    /**
+     * Transforms the input value based on the specified ranges.
+     *
+     * @param value - Initial value used to determine the CSS class.
+     * @param ranges - An object containing the min and max range values for yellow and red colors.
+     * @returns The CSS class to be applied.
+     */
+    transform(value, ranges) {
+        if (value == null) {
+            return;
+        }
+        if (value >= ranges.yellowRangeMin && value < ranges.yellowRangeMax) {
+            return 'text-warning';
+        }
+        else if (value >= ranges.redRangeMin && value <= ranges.redRangeMax) {
+            return 'text-danger';
+        }
+        return 'default';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplyRangeClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: ApplyRangeClassPipe, isStandalone: true, name: "applyRangeClass" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplyRangeClassPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'applyRangeClass',
+                    standalone: true
+                }]
+        }] });
+
+class DatapointsReloadComponent extends IntervalBasedReload {
+    constructor(cdRef, injector, translateService) {
+        super();
+        this.cdRef = cdRef;
+        this.injector = injector;
+        this.translateService = translateService;
+        /**
+         * @inheritdoc
+         */
+        this.onCountdownEnded = new EventEmitter();
         /**
-         * Without this requestAnimationFrame or setTimeout, dateFrom won't change to a correct value after first selector change.
-         * When form is saved it saves with a correct value, even without with this fix.
-         * How to reproduce:
-         * 1. set date values to e.g.: 01.05.2024-30.05.2024 and save it
-         * 2. reopen a config and switch interval to last month
+         * @inheritdoc
          */
-        // This fix brakes a logic behind disabling non available aggregations.
-        // Form will be still saved with correct date value, only view is out of a sync.
-        this.formGroup.controls.dateFrom.setValue(dateRange.dateFrom);
-        this.isIntervalSelectorChangedProgrammatically = false;
-        // });
-    }
-    updateDisabledAggregationOptions() {
-        this.disabledAggregationOptions =
-            this.datapointsTableConfigService.updateDisabledStateOfAggregationOptionEntries(this.formGroup.controls.dateFrom.value, this.formGroup.controls.dateTo.value, AGGREGATION_VALUES_ARR);
-    }
-    updateAggregationIfAutoRefreshDisabled(selectedInterval) {
-        const isAutoRefreshDisabled = !this.formGroup.controls.isAutoRefreshEnabled.value;
-        if (isAutoRefreshDisabled) {
-            this.setAggregationValue(selectedInterval);
-        }
-    }
-    setAggregationValue(interval) {
-        const aggregationControl = this.formGroup.controls.aggregation;
-        const newAggregationValue = this.datapointsTableConfigService.determineAggregationValue(interval);
-        aggregationControl.setValue(newAggregationValue);
-    }
-    /**
-     * Handles changes in the date selector form control.
-     */
-    handleDateSelectorChanges() {
-        merge(this.formGroup.controls.dateFrom.valueChanges, this.formGroup.controls.dateTo.valueChanges)
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => this.handleDateChange());
+        this.manuallyDisabledCountdown = false;
     }
-    handleDateChange() {
-        if (this.isIntervalSelectorChangedProgrammatically) {
+    ngOnChanges(changes) {
+        if (this.isDisabled && this.isAutoRefreshEnabled) {
+            this.isIntervalRefreshToggleOn = false;
+            this.disableCountdown();
             return;
         }
-        const intervalControl = this.formGroup.controls.interval;
-        if (intervalControl.value === TIME_RANGE_INTERVAL_UNITS_VALUES.custom) {
-            this.handleCustomIntervalDateChange();
+        if (this.isExportModalOpen && this.canDisableCountdownWhenModalIsOpen()) {
+            this.isIntervalRefreshToggleOn = !this.isIntervalRefreshToggleOn;
+            this.disableCountdown();
         }
         else {
-            this.setIntervalToCustom(intervalControl);
+            if (this.canStartCountdown(changes)) {
+                this.isIntervalRefreshToggleOn = true;
+                this.startCountdown(this.injector);
+            }
+            if (this.canHandleScrolling()) {
+                this.handleScrolling();
+            }
         }
-        this.setToFirstAvailableAggregationOptionIfCurrentAggregationIsDisabled();
     }
-    handleCustomIntervalDateChange() {
-        this.updateDisabledAggregationOptions();
+    /**
+     * @inheritdoc
+     */
+    countdownEnded() {
+        /**
+         * @inheritdoc
+         */
+        this.autoRefreshList();
     }
-    setIntervalToCustom(intervalControl) {
-        intervalControl.setValue(TIME_RANGE_INTERVAL_UNITS_VALUES.custom);
+    reload() {
+        /**
+         * @inheritdoc
+         */
+        this.autoRefreshList();
     }
     /**
-     * Handles changes in the global date selector form control.
+     * @inheritdoc
      */
-    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();
-            // }
-        });
-    }
-    handleDashboardContext() {
-        this.isWidgetLinkedToGlobalTimeContext = true;
+    enableCountdown() {
+        this.hideCountdown = false;
+        // Prevents the countdown from getting stuck on an initial value.
+        this.cdRef.detectChanges();
+        this.startCountdown(this.injector);
     }
-    handleNonDashboardContext() {
-        this.isWidgetLinkedToGlobalTimeContext = false;
-        if (this.isConfigSavedWithoutDashboardTimeOption()) {
-            return;
-        }
-        this.updateAggregationIfNecessary();
-        this.setIntervalToCustom(this.formGroup.controls.interval);
+    /**
+     * @inheritdoc
+     */
+    updateCountdownButtonTooltipText() {
+        this.toggleCountdownButtonTooltipText = this.isIntervalRefreshToggleOn
+            ? this.translateService.instant(gettext('Disable auto refresh'))
+            : this.translateService.instant(gettext('Enable auto refresh'));
     }
-    isConfigSavedWithoutDashboardTimeOption() {
-        return !this.config.widgetInstanceGlobalTimeContext;
+    canStartCountdown(changes) {
+        const { isAutoRefreshEnabled, refreshInterval } = changes;
+        return ((isAutoRefreshEnabled || refreshInterval) &&
+            (this.isAutoRefreshEnabled || !!this.refreshInterval));
     }
-    updateAggregationIfNecessary() {
-        const aggregationControl = this.formGroup.controls.aggregation;
-        const isDashboardTimeOptionSetAggregationToNull = !aggregationControl.value;
-        if (isDashboardTimeOptionSetAggregationToNull) {
-            aggregationControl.setValue(AGGREGATION_VALUES.none);
-        }
+    canHandleScrolling() {
+        return !this.manuallyDisabledCountdown && this.isAutoRefreshEnabled;
     }
-    /**
-     * Sets the aggregation control to the first available (non-disabled) option if the current option is disabled.
-     *
-     * This method:
-     * - Retrieves the current value of the aggregation control.
-     * - Checks if the current aggregation option is disabled.
-     * - If the current option is disabled, sets the control to the first available (non-disabled) option based on the following order:
-     *   - If the current value is `DAILY`, it switches to `HOURLY` if it's not disabled, otherwise to `MINUTELY` if `HOURLY` is also disabled.
-     *   - If the current value is `HOURLY`, it switches to `MINUTELY` if it's not disabled.
-     *   - If all options are disabled, it sets the value to `NONE`.
-     *
-     * The disabled state is stored in the `disabledAggregationOptions` object,
-     * where the key is the aggregation value and the value is a boolean indicating whether the option is disabled.
-     *
-     * The `AGGREGATION_VALUES` object defines the possible aggregation values.
-     */
-    // TODO same method is in datapoints export component. Consider moving it to a shared service when DPT will be integrating with MTM-59689.
-    // TODO 'determineNewAggregationValue' will be a shared method.
-    // Integration task: MTM-60221
-    setToFirstAvailableAggregationOptionIfCurrentAggregationIsDisabled() {
-        const aggregationControl = this.formGroup.controls.aggregation;
-        const currentValue = aggregationControl.value;
-        const newAggregationValue = this.datapointsTableConfigService.determineNewAggregationValue(currentValue, this.disabledAggregationOptions);
-        if (newAggregationValue !== currentValue) {
-            aggregationControl.setValue(newAggregationValue);
-        }
+    canDisableCountdownWhenModalIsOpen() {
+        return (this.isAutoRefreshEnabled &&
+            !!this.refreshInterval &&
+            !this.manuallyDisabledCountdown &&
+            !this.isScrolling &&
+            !this.hideCountdown);
     }
-    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.ɵ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=\"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]=\"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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsTableWidgetConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsReloadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-datapoints-table-view-config', standalone: true, imports: [
-                        CoreModule,
-                        DatapointSelectorModule,
-                        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" }]
-        }], ctorParameters: () => [{ type: DatapointsTableService }, { type: DatapointsTableConfigService }, { type: i3.FormBuilder }, { type: i3.NgForm }, { type: i4.WidgetConfigComponent }], propDecorators: { config: [{
+            args: [{ selector: 'c8y-datapoints-reload', standalone: true, imports: [CommonModule$1, CountdownIntervalModule, ListGroupModule, TooltipModule], template: "<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]=\"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: [{
+                type: ViewChild,
+                args: [CountdownIntervalComponent, { static: false }]
+            }], isAutoRefreshEnabled: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], isScrolling: [{
+                type: Input
+            }], isExportModalOpen: [{
+                type: Input
+            }], refreshInterval: [{
                 type: Input
+            }], onCountdownEnded: [{
+                type: Output
             }] } });
 
-/**
- * A pipe that adjusts the aggregated time range based on the aggregation type.
- *
- * ```html
- * '9:00' | adjustAggregatedTimeRange: config.aggregation (e.g.:HOURLY)
- * ```
- * The output will be '9:00-10:00'.
- */
-class AdjustAggregatedTimeRangePipe {
-    /**
-     * Transforms the input time based on the aggregation type.
-     * @param inputTime The input time string.
-     * @param aggregationType The type of aggregation (optional).
-     * @returns The transformed time string.
-     */
-    transform(inputTime, aggregationType$1) {
-        if (!aggregationType$1) {
-            return inputTime;
-        }
-        if (aggregationType$1 === aggregationType.DAILY) {
-            return '';
-        }
-        const date = this.createDateFromInput(inputTime);
-        const isTwelveHoursFormat = this.isTwelveHoursFormat(inputTime);
-        switch (aggregationType$1) {
-            case aggregationType.HOURLY:
-                return this.getHourlyTimeRange(date, isTwelveHoursFormat);
-            case aggregationType.MINUTELY:
-                return this.getMinutelyTimeRange(date, isTwelveHoursFormat);
-            default:
-                throw new Error('Unsupported aggregation type');
-        }
-    }
-    /**
-     * Creates a date object from the input time string.
-     * @param inputTime The input time string.
-     * @returns The created Date object.
-     */
-    createDateFromInput(inputTime) {
-        const defaultDate = '1970-01-01 ';
-        const isPM = /PM/i.test(inputTime);
-        const cleanedTime = inputTime.replace(/AM|PM/i, '').trim();
-        this.validateTimeFormat(cleanedTime, inputTime);
-        const dateTimeString = `${defaultDate}${cleanedTime}`;
-        const date = new Date(dateTimeString);
-        if (isNaN(date.getTime())) {
-            throw new Error('Invalid input time');
-        }
-        return this.adjustForPMTime(date, isPM);
+function mapToSourceValueObject([key, value]) {
+    return { key, value };
+}
+class DatapointsTableViewService {
+    constructor(dataFetchingService) {
+        this.dataFetchingService = dataFetchingService;
     }
     /**
-     * Validates if the time string matches the required format and has valid values.
-     * @param time The time string to validate.
-     * @param originalInput The original input string (including AM/PM if present).
-     * @throws Error if the time format is invalid or values are out of range.
+     * Filters out inactive data points from the given array.
+     *
+     * @param datapoints - The array of data points to filter.
+     * @returns An array of data points that are active.
      */
-    validateTimeFormat(time, originalInput) {
-        const parts = time.split(':');
-        this.validateTimeParts(parts);
-        const [hoursStr, minutesStr, secondsStr] = parts;
-        this.validateTimeDigits(hoursStr, minutesStr, secondsStr);
-        const { hours, minutes, seconds } = this.parseTimeComponents(hoursStr, minutesStr, secondsStr);
-        this.validateTimeRanges(hours, minutes, seconds);
-        this.validateTimeFormat24Hour(hours, originalInput);
-    }
-    validateTimeParts(parts) {
-        if (parts.length < 2 || parts.length > 3) {
-            throw new Error('Invalid input time');
-        }
-    }
-    validateTimeDigits(hoursStr, minutesStr, secondsStr) {
-        if (!this.isValidNumberString(hoursStr) ||
-            !this.isValidNumberString(minutesStr) ||
-            (secondsStr !== undefined && !this.isValidNumberString(secondsStr))) {
-            throw new Error('Invalid input time');
-        }
+    filterOutInactiveDatapoints(datapoints) {
+        return datapoints.filter((datapoint) => datapoint.__active);
     }
-    parseTimeComponents(hoursStr, minutesStr, secondsStr) {
-        return {
-            hours: Number(hoursStr),
-            minutes: Number(minutesStr),
-            seconds: secondsStr ? Number(secondsStr) : 0
-        };
+    hasMultipleDatapoints(datapoints) {
+        const ids = datapoints.map(dp => dp.__target.id);
+        return ids.length > 1;
     }
-    validateTimeRanges(hours, minutes, seconds) {
-        if (hours > 23 || hours < 0 || minutes > 59 || minutes < 0 || seconds > 59 || seconds < 0) {
-            throw new Error('Invalid input time');
-        }
+    /**
+     * Returns a map of active data points device IDs with their corresponding series.
+     *
+     * Example output:
+     * ```typescript
+     * new Map([
+     *   [
+     *     "844657202",
+     *     [
+     *       "c8y_Temperature.T"
+     *     ]
+     *   ],
+     *   [
+     *     "32666427",
+     *     [
+     *       "c8y_Battery.Battery"
+     *     ]
+     *   ]
+     * ]);
+     * ```
+     * @param datapoints - An array of data points.
+     * @returns A map where the key is the data point ID and the value is an array of data point series.
+     */
+    groupSeriesByDeviceId(activeDatapoints) {
+        return activeDatapoints.reduce((map, { fragment, series, __target: { id } }) => {
+            const value = `${fragment}.${series}`;
+            const existingValue = map.get(id) ?? [];
+            map.set(id, [...existingValue, value]);
+            return map;
+        }, new Map());
     }
-    validateTimeFormat24Hour(hours, originalInput) {
-        if (hours > 12 && this.hasAmPm(originalInput)) {
-            throw new Error('Invalid input time');
+    /**
+     * Retrieves the active data points series data and returns it as a map.
+     *
+     * @param datapointsValuesDataMap - A map of data point sources with their associated series.
+     * @param config - The configuration of the data points table.
+     * @param roundSeconds - Whether to round the seconds or not.
+     *                       If true, the seconds will be rounded to 0.
+     *                       If false, the seconds will be displayed as they are.
+     * @returns A Promise that resolves to a Map object with data point IDs as keys and DataObject as values or undefined when all series has forbidden access.
+     */
+    async getAllActiveSeriesDataMap(datapointsValuesDataMap, config, roundSeconds) {
+        const promises = Array.from(datapointsValuesDataMap).map(async ([source, series]) => {
+            const params = {
+                dateFrom: config.dateFrom,
+                dateTo: config.dateTo,
+                source,
+                series,
+                aggregationType: config.aggregation
+            };
+            const { data, res } = await this.dataFetchingService.fetchSeriesData(params, roundSeconds);
+            return { source, data, res };
+        });
+        const results = await Promise.all(promises);
+        const allSeriesHasForbiddenAccess = results.every(item => item.res?.status === 403);
+        if (allSeriesHasForbiddenAccess) {
+            throw new Error('Access forbidden: All series have a 403 status code');
         }
+        const filteredResults = this.filterOutElementsWithForbiddenResponses(results);
+        const resultMap = new Map();
+        filteredResults.forEach(result => resultMap.set(result.source, result.data));
+        return resultMap;
     }
     /**
-     * Checks if string contains only digits and is 1-2 characters long.
-     * @param value String to check
-     * @returns boolean indicating if string is valid
+     * Creates an array of DatapointsWithValues based on the provided datapoints and datapointsSeriesDataMap.
+     *
+     * Finds an index of a current data point within series object and based on that index filters values array.
+     *
+     * @param datapoints - An array of data points.
+     * @param datapointsSeriesDataMap - A map containing series data for data points.
+     * @returns An array of DatapointsWithValues.
      */
-    isValidNumberString(value) {
-        return (value.length > 0 &&
-            value.length <= 2 &&
-            value.split('').every(char => char >= '0' && char <= '9'));
+    getDatapointsWithValues(datapoints, datapointsSeriesDataMap) {
+        return datapoints.map((dp) => {
+            const seriesData = datapointsSeriesDataMap.get(dp.__target.id);
+            if (!seriesData) {
+                return { ...dp, values: {} };
+            }
+            // Find an index of a corresponding datapoint data, within series object.
+            const datapointSeriesArrayIndex = seriesData.series.findIndex(s => s.name === dp.series && s.type === dp.fragment);
+            const valuesFilteredByDatapointSeriesArrayIndex = Object.fromEntries(Object.entries(seriesData.values).map(([key, arr]) => [
+                key,
+                arr.filter((_, index) => index === datapointSeriesArrayIndex)
+            ]));
+            return {
+                ...dp,
+                seriesUnit: seriesData.series[datapointSeriesArrayIndex]?.unit,
+                values: valuesFilteredByDatapointSeriesArrayIndex
+            };
+        });
     }
     /**
-     * Checks if the input time has AM/PM markers.
-     * @param input The input time string to check.
-     * @returns boolean indicating if the input contains AM/PM.
+     * Creates the column headers for the devices in the data points table.
+     *
+     * @param datapointsWithValues - An array of data points.
+     * @returns An array of column headers for the devices.
      */
-    hasAmPm(input) {
-        return /AM|PM/i.test(input);
+    getColumnHeaders(datapointsWithValues) {
+        return datapointsWithValues.map(({ __target: { name }, label, renderType, unit }) => {
+            return { deviceName: name, label, renderType, unit };
+        });
+    }
+    mapDatapointsWithValuesToList(datapointsWithValues) {
+        return datapointsWithValues.flatMap(dp => {
+            if (!dp.values) {
+                return [];
+            }
+            return Object.entries(dp.values).flatMap(([date, valuesArray]) => {
+                const value = this.findMinMaxValues(valuesArray);
+                if (value == null) {
+                    return [];
+                }
+                return [
+                    {
+                        dateAndTime: date,
+                        deviceName: dp.__target.name,
+                        fragment: dp.fragment,
+                        label: dp.label,
+                        redRangeMax: dp.redRangeMax,
+                        redRangeMin: dp.redRangeMin,
+                        renderType: dp.renderType,
+                        series: dp.series,
+                        value: value,
+                        yellowRangeMax: dp.yellowRangeMax,
+                        yellowRangeMin: dp.yellowRangeMin
+                    }
+                ];
+            });
+        });
     }
     /**
-     * Adjusts the date for PM times by adding 12 hours when necessary.
-     * @param date The date object to adjust.
-     * @param isPM Boolean indicating if the time is PM.
-     * @returns The adjusted Date object.
+     * Finds the overall minimum and maximum values from an array of objects containing 'min' and 'max' properties.
+     *
+     * If the array contains only one object, that object's 'min' and 'max' values will be returned.
+     *
+     * @param valuesArray - An array with objects, where each contains 'min' and 'max' properties.
+     * @returns An object with the smallest 'min' and largest 'max' values found in the array.
+     *
+     * @example
+     * const values = [
+     *   { min: 1, max: 10 }
+     * ];
+     *
+     * const result = findMinMaxValues(values);
+     * // result is { min: 1, max: 10 }
      */
-    adjustForPMTime(date, isPM) {
-        const hours = date.getHours();
-        if (isPM && hours < 12) {
-            date.setHours(hours + 12);
-        }
-        else if (!isPM && hours === 12) {
-            date.setHours(0);
+    findMinMaxValues(valuesArray) {
+        const validItems = valuesArray.filter((item) => item && item.min != null && item.max != null);
+        if (validItems.length === 0) {
+            return null;
         }
-        return date;
+        const initialValue = { min: validItems[0].min, max: validItems[0].max };
+        return validItems.reduce((acc, item) => ({
+            min: Math.min(acc.min, item.min),
+            max: Math.max(acc.max, item.max)
+        }), initialValue);
     }
     /**
-     * Checks if the input time is in twelve hours format.
-     * @param inputTime The input time string.
-     * @returns True if the input time is in twelve hours format, false otherwise.
+     * Groups a list of data points by date and device, based on given references.
+     *
+     * @param dataList - The list of data points to be grouped.
+     * @param references - The column headers that serve as references for grouping.
+     * @returns An array of grouped data points, where each group corresponds to a unique date and device.
      */
-    isTwelveHoursFormat(inputTime) {
-        return /AM|PM/i.test(inputTime);
+    groupByDateAndDevice(dataList, references) {
+        const map = this.generateDataPointMap(dataList, references);
+        return this.mergeDatapoints(map);
     }
     /**
-     * Gets the hourly time range for the given date.
-     * @param date The date object.
-     * @param twelveHoursFormat Indicates whether to use twelve hours format.
-     * @returns The hourly time range string.
+     * Generates and populates a map with data points.
+     *
+     * This function processes the provided data points and organizes them into a map structure
+     * where each key is a unique combination of date and device identifiers, and the value is an
+     * array of data points (or null values) associated with that key. This structured data is then
+     * used in the data point table to render the data appropriately.
+     *
+     * @param dataList - The list of data point table items to be processed.
+     * @param columnsHeadersReferences - The list of column headers used to determine the order and structure of the map values.
+     * @returns A map where the key is a datapoint identifier containing the date and device name, and the value is an array of data point table items or null.
      */
-    getHourlyTimeRange(date, twelveHoursFormat) {
-        const nextHour = new Date(date.getTime());
-        nextHour.setHours(date.getHours() + 1);
-        return `${this.formatTime(date, twelveHoursFormat, true)}-${this.formatTime(nextHour, twelveHoursFormat, true)}`;
+    generateDataPointMap(dataList, columnsHeadersReferences) {
+        // Map to store the data points indexed by a unique identifier.
+        const map = new Map();
+        dataList.forEach(obj => {
+            // Generate a unique identifier for each data point using the date and device name.
+            const dateKey = this.toISOFormat(obj.dateAndTime);
+            const datapointIdentifier = `${dateKey}_${obj.deviceName}`;
+            // Initialize the map entry if it does not exist with a unique identifier.
+            if (!map.has(datapointIdentifier)) {
+                map.set(datapointIdentifier, Array(columnsHeadersReferences.length).fill(null));
+            }
+            // Find the index of the reference that matches the current data point.
+            const matchingColumnIndex = columnsHeadersReferences.findIndex(ref => ref.deviceName === obj.deviceName && ref.label === obj.label);
+            // Update the map entry with the data point.
+            const tableItem = map.get(datapointIdentifier);
+            if (tableItem) {
+                tableItem[matchingColumnIndex] = { ...obj };
+            }
+        });
+        return map;
+    }
+    /**
+     * Merges the data points from the given map into an array of grouped data point table items.
+     *
+     * @param map - The map containing the data points to be merged.
+     * @returns An array of grouped data point table items.
+     */
+    mergeDatapoints(map) {
+        const mergedData = [];
+        map.forEach((values, datapointIdentifier) => {
+            const [dateKey, deviceName] = datapointIdentifier.split('_');
+            const validDataPoint = values.some(item => item && Object.keys(item.value).length > 0);
+            if (validDataPoint) {
+                mergedData.push({
+                    dateAndTime: dateKey,
+                    deviceName: deviceName,
+                    rowItems: values.map(item => (item ? { ...item } : null))
+                });
+            }
+        });
+        return mergedData;
     }
-    /**
-     * Gets the minutely time range for the given date.
-     * @param date The date object.
-     * @param twelveHoursFormat Indicates whether to use twelve hours format.
-     * @returns The minutely time range string.
-     */
-    getMinutelyTimeRange(date, twelveHoursFormat) {
-        const nextMinute = new Date(date.getTime());
-        nextMinute.setMinutes(date.getMinutes() + 1);
-        return `${this.formatTime(date, twelveHoursFormat, false)}-${this.formatTime(nextMinute, twelveHoursFormat, false)}`;
+    sortDataByDateDescending(data) {
+        return data.sort((a, b) => new Date(b.dateAndTime).getTime() - new Date(a.dateAndTime).getTime());
     }
     /**
-     * Formats the given date into a time string.
-     * @param date The date to format.
-     * @param usePeriod Indicates whether to include the period (AM/PM) in the formatted time.
-     * @param useHourOnly Indicates whether to include only the hour part in the formatted time.
-     * @returns The formatted time string.
+     * Prepares the updated time range based on the selected interval.
+     *
+     * In case of a 'custom' interval or no quantity, the original date range is returned.
+     *
+     * @param interval - The selected interval type.
+     * @returns An object containing the `dateFrom` and `dateTo` in ISO string format.
      */
-    formatTime(date, usePeriod, useHourOnly) {
-        const hours = date.getHours();
-        const minutes = date.getMinutes().toString().padStart(2, '0');
-        if (usePeriod) {
-            const period = hours >= 12 ? 'PM' : 'AM';
-            const formattedHours = hours % 12 === 0 ? 12 : hours % 12;
-            return `${formattedHours}:${useHourOnly ? '00' : minutes} ${period}`;
+    prepareTimeRange(interval, dateFromInput, dateToInput) {
+        if (!interval || interval === INTERVAL_VALUES.custom) {
+            return { dateFrom: dateFromInput, dateTo: dateToInput };
         }
-        else {
-            return `${hours.toString().padStart(2, '0')}:${useHourOnly ? '00' : minutes}`;
+        const selected = DURATION_OPTIONS.find(selectedDuration => selectedDuration.id === interval);
+        if (!selected?.amount) {
+            return { dateFrom: dateFromInput, dateTo: dateToInput };
         }
+        const now = new Date();
+        return {
+            dateFrom: this.subtractTime(now, selected.amount, selected.unit).toISOString(),
+            dateTo: now.toISOString()
+        };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AdjustAggregatedTimeRangePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: AdjustAggregatedTimeRangePipe, isStandalone: true, name: "adjustAggregatedTimeRange" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AdjustAggregatedTimeRangePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'adjustAggregatedTimeRange',
-                    standalone: true
-                }]
-        }] });
-
-/**
- * Applies CSS classes based on the value's range.
- */
-class ApplyRangeClassPipe {
     /**
-     * Transforms the input value based on the specified ranges.
+     * Subtracts an amount of time from a given date.
      *
-     * @param value - Initial value used to determine the CSS class.
-     * @param ranges - An object containing the min and max range values for yellow and red colors.
-     * @returns The CSS class to be applied.
+     * @param date - The original date.
+     * @param amount - The amount of time units to subtract.
+     * @param unit - The unit of time to subtract (e.g., minutes, hours, days, weeks, months).
+     * @returns A new date with the specified time subtracted.
      */
-    transform(value, ranges) {
-        if (value == null) {
-            return;
-        }
-        if (value >= ranges.yellowRangeMin && value < ranges.yellowRangeMax) {
-            return 'text-warning';
-        }
-        else if (value >= ranges.redRangeMin && value <= ranges.redRangeMax) {
-            return 'text-danger';
+    subtractTime(date, amount, unit) {
+        const newDate = new Date(date);
+        switch (unit) {
+            case INTERVAL_VALUES.minutes:
+                newDate.setUTCMinutes(newDate.getUTCMinutes() - amount);
+                break;
+            case INTERVAL_VALUES.hours:
+                newDate.setUTCHours(newDate.getUTCHours() - amount);
+                break;
+            case INTERVAL_VALUES.days:
+                newDate.setUTCDate(newDate.getUTCDate() - amount);
+                break;
+            case INTERVAL_VALUES.weeks:
+                newDate.setUTCDate(newDate.getUTCDate() - amount * 7);
+                break;
+            case INTERVAL_VALUES.months:
+                this.subtractMonthsAndAdjustDay(newDate, amount);
+                break;
         }
-        return 'default';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplyRangeClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: ApplyRangeClassPipe, isStandalone: true, name: "applyRangeClass" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ApplyRangeClassPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'applyRangeClass',
-                    standalone: true
-                }]
-        }] });
-
-class DatapointsReloadComponent extends IntervalBasedReload {
-    constructor(cdRef, injector, translateService) {
-        super();
-        this.cdRef = cdRef;
-        this.injector = injector;
-        this.translateService = translateService;
-        /**
-         * @inheritdoc
-         */
-        this.onCountdownEnded = new EventEmitter();
-        /**
-         * @inheritdoc
-         */
-        this.manuallyDisabledCountdown = false;
+        return newDate;
     }
-    ngOnChanges(changes) {
-        if (this.isDisabled && this.isAutoRefreshEnabled) {
-            this.isIntervalRefreshToggleOn = false;
-            this.disableCountdown();
-            return;
+    getSeriesWithoutPermissionToRead(activeDatapointsSeriesData, activeDatapointsIdsWithSeries) {
+        if (!activeDatapointsSeriesData) {
+            // Returns all activeDatapointsIdsWithSeries entries if activeDatapointsSeriesData is undefined.
+            // It means that the user does not have permission to see any of the selected datapoints data.
+            return Array.from(activeDatapointsIdsWithSeries, mapToSourceValueObject);
         }
-        if (this.isExportModalOpen && this.canDisableCountdownWhenModalIsOpen()) {
-            this.isIntervalRefreshToggleOn = !this.isIntervalRefreshToggleOn;
-            this.disableCountdown();
+        const availableSources = new Set(activeDatapointsSeriesData.keys());
+        return Array.from(activeDatapointsIdsWithSeries)
+            .filter(([source]) => !availableSources.has(source))
+            .map(mapToSourceValueObject);
+    }
+    hasSecondsAndMillisecondsEqualZero(timeString) {
+        if (!timeString) {
+            return false;
         }
-        else {
-            if (this.canStartCountdown(changes)) {
-                this.isIntervalRefreshToggleOn = true;
-                this.startCountdown(this.injector);
-            }
-            if (this.canHandleScrolling()) {
-                this.handleScrolling();
-            }
+        const date = new Date(timeString);
+        if (isNaN(date.getTime())) {
+            return false;
         }
+        return date.getUTCSeconds() === 0 && date.getUTCMilliseconds() === 0;
     }
     /**
-     * @inheritdoc
+     * Converts a date string to ISO format.
+     *
+     * @param dateStr - The date string to convert.
+     * @returns The ISO format of the given date string.
      */
-    countdownEnded() {
-        /**
-         * @inheritdoc
-         */
-        this.autoRefreshList();
+    toISOFormat(dateStr) {
+        return new Date(dateStr).toISOString();
     }
-    reload() {
-        /**
-         * @inheritdoc
-         */
-        this.autoRefreshList();
+    filterOutElementsWithForbiddenResponses(seriesDataWithResponse) {
+        return seriesDataWithResponse.filter(item => {
+            return !(item.res?.status === 403);
+        });
+    }
+    subtractMonthsAndAdjustDay(date, monthsToSubtract) {
+        const currentMonth = date.getUTCMonth();
+        const expectedTargetMonth = this.calculateTargetMonth(currentMonth, monthsToSubtract);
+        date.setUTCMonth(currentMonth - monthsToSubtract);
+        const actualMonth = date.getUTCMonth();
+        const dayDoesNotExistInTargetMonth = actualMonth !== expectedTargetMonth;
+        if (dayDoesNotExistInTargetMonth) {
+            this.setToLastDayOfPreviousMonth(date);
+        }
     }
     /**
-     * @inheritdoc
+     * Calculates the target month number (0-11) after subtracting months from the current month.
+     * Handles negative month numbers by normalizing them to the valid 0-11 range.
+     *
+     * Examples:
+     * - January(0) - 1 month = December(11)
+     * - March(2) - 4 months = November(10)
+     * - December(11) - 1 month = November(10)
+     *
+     * @param currentMonth - Current month (0-11, where 0 is January)
+     * @param monthsToSubtract - Number of months to subtract
+     * @returns Normalized month number in range 0-11
      */
-    enableCountdown() {
-        this.hideCountdown = false;
-        // Prevents the countdown from getting stuck on an initial value.
-        this.cdRef.detectChanges();
-        this.startCountdown(this.injector);
+    calculateTargetMonth(currentMonth, monthsToSubtract) {
+        return (currentMonth - monthsToSubtract + 12) % 12;
     }
     /**
-     * @inheritdoc
+     * Sets the date to the last day of the previous month.
+     * Using 0 as dateValue makes JavaScript automatically calculate
+     * last day of previous month, per JavaScript Date API behavior.
+     * @param date - Date to modify
      */
-    updateCountdownButtonTooltipText() {
-        this.toggleCountdownButtonTooltipText = this.isIntervalRefreshToggleOn
-            ? this.translateService.instant(gettext('Disable auto refresh'))
-            : this.translateService.instant(gettext('Enable auto refresh'));
-    }
-    canStartCountdown(changes) {
-        const { isAutoRefreshEnabled, refreshInterval } = changes;
-        return ((isAutoRefreshEnabled || refreshInterval) &&
-            (this.isAutoRefreshEnabled || !!this.refreshInterval));
-    }
-    canHandleScrolling() {
-        return !this.manuallyDisabledCountdown && this.isAutoRefreshEnabled;
-    }
-    canDisableCountdownWhenModalIsOpen() {
-        return (this.isAutoRefreshEnabled &&
-            !!this.refreshInterval &&
-            !this.manuallyDisabledCountdown &&
-            !this.isScrolling &&
-            !this.hideCountdown);
+    setToLastDayOfPreviousMonth(date) {
+        date.setUTCDate(0);
     }
-    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: DatapointsTableViewService, deps: [{ token: i1.DataFetchingService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsTableViewService, providedIn: 'root' }); }
 }
-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: [{
-                type: ViewChild,
-                args: [CountdownIntervalComponent, { static: false }]
-            }], isAutoRefreshEnabled: [{
-                type: Input
-            }], isDisabled: [{
-                type: Input
-            }], isLoading: [{
-                type: Input
-            }], isScrolling: [{
-                type: Input
-            }], isExportModalOpen: [{
-                type: Input
-            }], refreshInterval: [{
-                type: Input
-            }], onCountdownEnded: [{
-                type: Output
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsTableViewService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.DataFetchingService }] });
 
 /**
  * Creates a column header title message.
@@ -1697,7 +1515,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             }] } });
 
 class DatapointsTableViewWidgetComponent {
-    constructor(datapointsTableConfigService, datapointsTableViewService, formBuilder, translateService) {
+    constructor(dataFetchingService, datapointsTableConfigService, datapointsTableViewService, formBuilder, translateService) {
+        this.dataFetchingService = dataFetchingService;
         this.datapointsTableConfigService = datapointsTableConfigService;
         this.datapointsTableViewService = datapointsTableViewService;
         this.formBuilder = formBuilder;
@@ -1736,9 +1555,15 @@ class DatapointsTableViewWidgetComponent {
         //   this.handleGlobalTimeContextSettings();
         // }
         // Condition will be removed in MTM-61920
+        // Dashboard context is temporary not supported in the new implementation
         if (this.config.widgetInstanceGlobalTimeContext) {
             this.config.widgetInstanceGlobalTimeContext = false;
         }
+        // Condition will be removed in MTM-61920
+        // Dashboard context is temporary not supported in the new implementation
+        if (this.config['globalDateSelector'] === 'dashboard_context') {
+            this.config['globalDateSelector'] = DATE_SELECTION_VALUES.config;
+        }
         this.setScrollingSubscription();
         const isLegacyWidgetRealtimeActive = this.config.realtime &&
             !this.config.decimalPlaces &&
@@ -1747,35 +1572,24 @@ class DatapointsTableViewWidgetComponent {
         if (isLegacyWidgetRealtimeActive) {
             this.setDefaultRefreshRelatedProperties();
         }
-        if (!this.config.interval) {
-            /**
-             * Fix for legacy widget bug.
-             * When new legacy widget is created and saved
-             * then interval value in a config would stay null until interval is manually changed
-             * and saved again.
-             * Bug was introduced post 1018.0.164 version of UI.
-             */
-            this.config.interval = 'hours';
-        }
-        if (this.config.interval !== TIME_RANGE_INTERVAL_UNITS_VALUES.custom) {
+        if (this.config.interval !== INTERVAL_VALUES.custom) {
             this.recalculateIntervalToMatchFromNowDate();
         }
         if (this.config.displayDateSelection) {
             this.prepareDateRangeForm();
         }
         await this.prepareTableData();
-        // TODO: temporarily commented out, will be enabled when MTM-59689 is integrated
-        // this.exportConfig = {
-        //   aggregation: this.config.aggregation,
-        //   dateFrom: this.config.dateFrom,
-        //   dateTo: this.config.dateTo,
-        //   datapointDetails: this.activeDatapoints.map(({ __target, fragment, series }) => ({
-        //     deviceName: __target.name,
-        //     source: __target.id,
-        //     valueFragmentSeries: series,
-        //     valueFragmentType: fragment
-        //   }))
-        // };
+        this.exportConfig = {
+            aggregation: this.config.aggregation,
+            dateFrom: this.config.dateFrom,
+            dateTo: this.config.dateTo,
+            datapointDetails: this.activeDatapoints.map(({ __target, fragment, series }) => ({
+                deviceName: __target.name,
+                source: __target.id,
+                valueFragmentSeries: series,
+                valueFragmentType: fragment
+            }))
+        };
     }
     ngOnDestroy() {
         if (this.subscription) {
@@ -1793,11 +1607,7 @@ class DatapointsTableViewWidgetComponent {
             this.config.dateTo = data.dateTo;
         }
         this.prepareTableData();
-        // TODO: temporarily commented out, will be enabled when MTM-59689 is integrated
-        // TODO-2: each manual/auto list reload should update exports config date range to sync current state of view with
-        // inital export config
-        // this.exportConfig.dateFrom = this.config.dateFrom;
-        // this.exportConfig.dateTo = this.config.dateTo;
+        this.updateExportConfigDateRange();
     }
     onExportModalOpen(isOpened) {
         this.isExportModalOpen = isOpened;
@@ -1809,12 +1619,13 @@ class DatapointsTableViewWidgetComponent {
         const dateRange = this.datapointsTableViewService.prepareTimeRange(this.config.interval, this.config.dateFrom, this.config.dateTo);
         this.config.dateFrom = dateRange.dateFrom;
         this.config.dateTo = dateRange.dateTo;
+        this.updateExportConfigDateRange();
         await this.prepareTableData(false);
         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);
+        this.config.dateFrom = this.dataFetchingService.adjustDate(this.config.date[0], 0, false);
+        this.config.dateTo = this.dataFetchingService.adjustDate(this.config.date[1], 0, false);
         if (this.config.realtime) {
             this.setDefaultRefreshRelatedProperties();
         }
@@ -1834,7 +1645,7 @@ class DatapointsTableViewWidgetComponent {
     }
     setDefaultRefreshRelatedProperties() {
         this.config.isAutoRefreshEnabled = true;
-        this.config.refreshInterval = DEFAULT_COUNTDOWN_VALUE;
+        this.config.refreshInterval = DEFAULT_DPT_REFRESH_INTERVAL_VALUE;
     }
     recalculateIntervalToMatchFromNowDate() {
         if (this.config.widgetInstanceGlobalTimeContext) {
@@ -1939,24 +1750,35 @@ 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: 
-                // 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"] }] }); }
+    updateExportConfigDateRange() {
+        this.config.dateTo = this.adjustTargetDateBasedOnConditionTime(this.config.dateFrom, this.config.dateTo);
+        this.config.dateFrom = this.adjustTargetDateBasedOnConditionTime(this.config.dateTo, this.config.dateFrom);
+        this.syncExportConfigDates();
+    }
+    adjustTargetDateBasedOnConditionTime(conditionDate, targetDate) {
+        if (this.datapointsTableViewService.hasSecondsAndMillisecondsEqualZero(conditionDate)) {
+            return this.dataFetchingService.adjustDate(targetDate, 0, true);
+        }
+        return targetDate;
+    }
+    syncExportConfigDates() {
+        this.exportConfig.dateFrom = this.config.dateFrom;
+        this.exportConfig.dateTo = this.config.dateTo;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsTableViewWidgetComponent, deps: [{ token: i1.DataFetchingService }, { 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  <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  <c8y-datapoints-export-selector\n    class=\"d-contents\"\n    [exportConfig]=\"exportConfig\"\n    (isOpen)=\"onExportModalOpen($event)\"\n  ></c8y-datapoints-export-selector>\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: DatapointsExportSelectorComponent, selector: "c8y-datapoints-export-selector", inputs: ["exportConfig"], outputs: ["isOpen"] }, { kind: "component", type: 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointsTableViewWidgetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-datapoints-table-view', host: { class: 'd-col fit-h' }, standalone: true, imports: [
                         CommonModule$1,
-                        // TODO: temporarily commented out, will be enabled when MTM-59689 is integrated
-                        // DatapointsExportSelectorComponent,
+                        DatapointsExportSelectorComponent,
                         DatapointsReloadComponent,
                         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  <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  <c8y-datapoints-export-selector\n    class=\"d-contents\"\n    [exportConfig]=\"exportConfig\"\n    (isOpen)=\"onExportModalOpen($event)\"\n  ></c8y-datapoints-export-selector>\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: i1.DataFetchingService }, { type: DatapointsTableService }, { type: DatapointsTableViewService }, { type: i3.FormBuilder }, { type: i1$2.TranslateService }], propDecorators: { config: [{
                 type: Input
             }] } });
 
@@ -1964,5 +1786,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AdjustAggregatedTimeRangePipe, ApplyRangeClassPipe, DATE_SELECTION_LABELS, DATE_SELECTION_VALUES, DATE_SELECTION_VALUES_ARR, DEFAULT_COUNTDOWN_VALUE, DURATION_OPTIONS, DatapointsReloadComponent, DatapointsTableComponent, DatapointsTableViewService, DatapointsTableViewWidgetComponent, DatapointsTableWidgetConfigComponent, INTERVAL_VALUES_ARR, REFRESH_INTERVAL_VALUES_ARR, RENDER_TYPES_LABELS, TIME_RANGE_INTERVAL_LABELS, VirtualScrollListenerDirective, minOneDatapointActive };
+export { AdjustAggregatedTimeRangePipe, ApplyRangeClassPipe, DATE_SELECTION_LABELS, DATE_SELECTION_VALUES, DATE_SELECTION_VALUES_ARR, DEFAULT_DPT_REFRESH_INTERVAL_VALUE, DURATION_OPTIONS, DatapointsReloadComponent, DatapointsTableComponent, DatapointsTableViewService, DatapointsTableViewWidgetComponent, DatapointsTableWidgetConfigComponent, INTERVAL_VALUES_ARR, REFRESH_INTERVAL_VALUES_ARR, RENDER_TYPES_LABELS, TIME_RANGE_INTERVAL_LABELS, VirtualScrollListenerDirective, minOneDatapointActive };
 //# sourceMappingURL=c8y-ngx-components-widgets-implementations-datapoints-table.mjs.map