@c8y/ngx-components 1023.63.1 → 1023.64.2

package/fesm2022/c8y-ngx-components-datapoints-export-selector.mjs

@@ -1,25 +1,25 @@
 import * as i0 from '@angular/core';
-import { Injectable, Input, Component, EventEmitter, Output, InjectionToken, Inject, HostListener, ViewChild } from '@angular/core';
+import { Injectable, input, output, ChangeDetectionStrategy, Component, InjectionToken, Inject, computed, viewChild } from '@angular/core';
 import * as i2 from '@c8y/client';
-import { gettext } from '@c8y/ngx-components/gettext';
 import * as i1 from '@c8y/ngx-components';
-import { AGGREGATION_VALUES, CoreModule, CommonModule, ModalModule } from '@c8y/ngx-components';
+import { AGGREGATION_VALUES, CoreModule, ModalModule, IconDirective, C8yTranslatePipe, CommonModule } from '@c8y/ngx-components';
+import { gettext } from '@c8y/ngx-components/gettext';
 import * as i3 from '@ngx-translate/core';
 import JSZip from 'jszip';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i3$2 from '@angular/forms';
+import * as i2$1 from '@angular/forms';
 import { FormsModule, FormControl, ReactiveFormsModule } from '@angular/forms';
 import saveAs from 'file-saver';
 import { Subject, debounceTime, merge, takeUntil as takeUntil$1 } from 'rxjs';
-import { A11yModule } from '@angular/cdk/a11y';
+import { AGGREGATION_LABELS, AGGREGATION_VALUES_ARR } from '@c8y/ngx-components/global-context';
 import * as i3$1 from 'ngx-bootstrap/popover';
 import { PopoverModule } from 'ngx-bootstrap/popover';
-import * as i2$1 from '@angular/common';
-import { AGGREGATION_LABELS, AGGREGATION_VALUES_ARR } from '@c8y/ngx-components/global-context';
+import * as i3$2 from '@angular/common';
 import { skip, takeUntil } from 'rxjs/operators';
 import { isNil, isEmpty, isNumber } from 'lodash-es';
+import { A11yModule } from '@angular/cdk/a11y';
 import * as i1$1 from 'ngx-bootstrap/modal';
-import * as i4 from 'ngx-bootstrap/tooltip';
+import * as i3$3 from 'ngx-bootstrap/tooltip';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 const HAS_ERROR = 'has-error';
@@ -464,6 +464,68 @@ class DataFetchingService {
         }
         return seriesData;
     }
+    /**
+     * Fetches snapshot data for list-type exports
+     * Gets the latest measurement for each datapoint within the date range
+     * @param exportConfig - The export configuration with list type
+     * @returns Promise with array of ListExportDatapoint objects
+     */
+    async fetchAndPrepareListExportData(exportConfig) {
+        const { datapointDetails, dateFrom, dateTo } = exportConfig;
+        const dataPromises = datapointDetails.map(async (detail) => {
+            try {
+                // Fetch the latest measurement within the date range
+                const filter = {
+                    dateFrom,
+                    dateTo,
+                    source: detail.source,
+                    valueFragmentSeries: detail.valueFragmentSeries,
+                    valueFragmentType: detail.valueFragmentType,
+                    pageSize: 1, // Only get the most recent measurement
+                    revert: true // Sort by newest first
+                };
+                const { data } = await this.measurementService.list(filter);
+                const measurement = data && data.length > 0 ? data[0] : null;
+                // Extract value and unit from measurement
+                let current = null;
+                let unit;
+                if (measurement) {
+                    const fragment = measurement[detail.valueFragmentType];
+                    if (fragment && fragment[detail.valueFragmentSeries]) {
+                        const seriesData = fragment[detail.valueFragmentSeries];
+                        current = seriesData.value != null ? Number(seriesData.value) : null;
+                        unit = seriesData.unit;
+                    }
+                }
+                // Calculate derived values using target from detail
+                const target = detail.target;
+                const diff = current !== null && current !== undefined && target !== null && target !== undefined
+                    ? current - target
+                    : null;
+                const diffPercent = target !== null && target !== undefined && diff !== null ? (diff / target) * 100 : null;
+                return {
+                    ...detail,
+                    label: detail.label || `${detail.valueFragmentType}.${detail.valueFragmentSeries}`,
+                    target: target ?? null,
+                    current,
+                    diff,
+                    diffPercent,
+                    unit
+                };
+            }
+            catch (error) {
+                return {
+                    ...detail,
+                    label: detail.label || `${detail.valueFragmentType}.${detail.valueFragmentSeries}`,
+                    target: detail.target ?? null,
+                    current: null,
+                    diff: null,
+                    diffPercent: null
+                };
+            }
+        });
+        return Promise.all(dataPromises);
+    }
     /**
      * Fetches and prepares measurement data for preview.
      *
@@ -570,6 +632,24 @@ class DatapointsExportSelectorFileExporterService {
         this.cachedRawExportSeriesData = null;
         this.cachedFlatteredAndSortedSeriesExportData = null;
     }
+    /**
+     * Generates a blob for list-type exports (snapshot data)
+     * @param fileType - The type of file to generate (csv or excel)
+     * @param listData - Array of datapoints with current values
+     * @param columns - Column configuration for export
+     * @param dateRange - Date range for the export header
+     * @returns Promise with Blob or null on error
+     */
+    async getListExportedDataBlob(fileType, listData, columns, dateRange) {
+        try {
+            const blob = await this.datapointsExportSelectorDataProcessingService.generateListExport(fileType, listData, columns, dateRange);
+            return blob;
+        }
+        catch (error) {
+            this.showZipCreationErrorAlert();
+            return null;
+        }
+    }
     showZipCreationErrorAlert() {
         const alertMessage = this.translateService.instant(gettext('Could not create zip file.'));
         this.alertService.danger(alertMessage);
@@ -631,28 +711,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1.AlertService }, { type: DataProcessingService }, { type: i3.TranslateService }] });
 
-class DataPointsExportSelectorPreviewComponent {
-    constructor() {
-        this.MEASUREMENTS_PREVIEW_ITEMS_LIMIT = MEASUREMENTS_PREVIEW_ITEMS_LIMIT;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DataPointsExportSelectorPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: DataPointsExportSelectorPreviewComponent, isStandalone: true, selector: "c8y-datapoints-export-selector-preview", inputs: { hasFetchedDataAnyValuesToExport: "hasFetchedDataAnyValuesToExport", isPreviewLoading: "isPreviewLoading", previewTableData: "previewTableData" }, ngImport: i0, template: "<div class=\"p-t-16 p-l-16 p-r-16 m-b-0\">\n  <div class=\"d-flex a-i-center\">\n    <label\n      class=\"m-b-0 d-flex a-i-center gap-4\"\n      [title]=\"'Preview`of exported file`' | translate\"\n    >\n      {{ 'Preview`of exported file`' | translate }}\n      <button\n        class=\"btn-help\"\n        [attr.aria-label]=\"'Help' | translate\"\n        [popover]=\"popoverPreviewTemplate\"\n        placement=\"right\"\n        triggers=\"focus\"\n        data-cy=\"preview--help\"\n        container=\"body\"\n        type=\"button\"\n        [adaptivePosition]=\"true\"\n      ></button>\n      <ng-template #popoverPreviewTemplate>\n        <span translate>\n          <p>The preview shows the structure of the raw file from a single source.</p>\n          <p>If no data is available, only the column headers are visible.</p>\n          <p>\n            The preview is limited to\n            <b>{{ MEASUREMENTS_PREVIEW_ITEMS_LIMIT }}</b>\n            records.\n          </p>\n        </span>\n      </ng-template>\n    </label>\n  </div>\n  <div\n    class=\"table-responsive\"\n    style=\"min-height: 275px\"\n  >\n    <table class=\"table\">\n      <thead>\n        <tr>\n          <th>{{ 'Time' | translate }}</th>\n          <th>{{ 'Source' | translate }}</th>\n          <th>{{ 'Device name' | translate }}</th>\n          <th>\n            {{ 'Fragment and series' | translate }}\n          </th>\n          <th>{{ 'Value' | translate }}</th>\n          <th>{{ 'Unit' | translate }}</th>\n        </tr>\n      </thead>\n      <ng-container *ngIf=\"hasFetchedDataAnyValuesToExport || isPreviewLoading; else emptyState\">\n        <ng-container *ngIf=\"!isPreviewLoading; else loading\">\n          <tbody>\n            <tr *ngFor=\"let row of previewTableData\">\n              <td>{{ row.time }}</td>\n              <td>{{ row.source }}</td>\n              <td>{{ row.device_name }}</td>\n              <td>\n                {{ row.fragment_series }}\n              </td>\n              <td>{{ row.value }}</td>\n              <td>{{ row.unit }}</td>\n            </tr>\n          </tbody>\n        </ng-container>\n      </ng-container>\n      <ng-template #emptyState>\n        <tbody>\n          <tr>\n            <td colspan=\"8\">\n              <div class=\"d-col a-i-center\">\n                <c8y-ui-empty-state\n                  [icon]=\"'search'\"\n                  [title]=\"'No data available.' | translate\"\n                  [horizontal]=\"true\"\n                  data-cy=\"datapoints-table-list--empty-state\"\n                ></c8y-ui-empty-state>\n              </div>\n            </td>\n          </tr>\n        </tbody>\n      </ng-template>\n      <ng-template #loading>\n        <tbody>\n          <tr>\n            <td colspan=\"8\">\n              <c8y-loading></c8y-loading>\n            </td>\n          </tr>\n        </tbody>\n      </ng-template>\n    </table>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i3$1.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DataPointsExportSelectorPreviewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-datapoints-export-selector-preview', standalone: true, imports: [A11yModule, CoreModule, PopoverModule], template: "<div class=\"p-t-16 p-l-16 p-r-16 m-b-0\">\n  <div class=\"d-flex a-i-center\">\n    <label\n      class=\"m-b-0 d-flex a-i-center gap-4\"\n      [title]=\"'Preview`of exported file`' | translate\"\n    >\n      {{ 'Preview`of exported file`' | translate }}\n      <button\n        class=\"btn-help\"\n        [attr.aria-label]=\"'Help' | translate\"\n        [popover]=\"popoverPreviewTemplate\"\n        placement=\"right\"\n        triggers=\"focus\"\n        data-cy=\"preview--help\"\n        container=\"body\"\n        type=\"button\"\n        [adaptivePosition]=\"true\"\n      ></button>\n      <ng-template #popoverPreviewTemplate>\n        <span translate>\n          <p>The preview shows the structure of the raw file from a single source.</p>\n          <p>If no data is available, only the column headers are visible.</p>\n          <p>\n            The preview is limited to\n            <b>{{ MEASUREMENTS_PREVIEW_ITEMS_LIMIT }}</b>\n            records.\n          </p>\n        </span>\n      </ng-template>\n    </label>\n  </div>\n  <div\n    class=\"table-responsive\"\n    style=\"min-height: 275px\"\n  >\n    <table class=\"table\">\n      <thead>\n        <tr>\n          <th>{{ 'Time' | translate }}</th>\n          <th>{{ 'Source' | translate }}</th>\n          <th>{{ 'Device name' | translate }}</th>\n          <th>\n            {{ 'Fragment and series' | translate }}\n          </th>\n          <th>{{ 'Value' | translate }}</th>\n          <th>{{ 'Unit' | translate }}</th>\n        </tr>\n      </thead>\n      <ng-container *ngIf=\"hasFetchedDataAnyValuesToExport || isPreviewLoading; else emptyState\">\n        <ng-container *ngIf=\"!isPreviewLoading; else loading\">\n          <tbody>\n            <tr *ngFor=\"let row of previewTableData\">\n              <td>{{ row.time }}</td>\n              <td>{{ row.source }}</td>\n              <td>{{ row.device_name }}</td>\n              <td>\n                {{ row.fragment_series }}\n              </td>\n              <td>{{ row.value }}</td>\n              <td>{{ row.unit }}</td>\n            </tr>\n          </tbody>\n        </ng-container>\n      </ng-container>\n      <ng-template #emptyState>\n        <tbody>\n          <tr>\n            <td colspan=\"8\">\n              <div class=\"d-col a-i-center\">\n                <c8y-ui-empty-state\n                  [icon]=\"'search'\"\n                  [title]=\"'No data available.' | translate\"\n                  [horizontal]=\"true\"\n                  data-cy=\"datapoints-table-list--empty-state\"\n                ></c8y-ui-empty-state>\n              </div>\n            </td>\n          </tr>\n        </tbody>\n      </ng-template>\n      <ng-template #loading>\n        <tbody>\n          <tr>\n            <td colspan=\"8\">\n              <c8y-loading></c8y-loading>\n            </td>\n          </tr>\n        </tbody>\n      </ng-template>\n    </table>\n  </div>\n</div>\n" }]
-        }], propDecorators: { hasFetchedDataAnyValuesToExport: [{
-                type: Input
-            }], isPreviewLoading: [{
-                type: Input
-            }], previewTableData: [{
-                type: Input
-            }] } });
-
 class DataPointsExportSelectorDataScopeComponent {
     constructor() {
-        this.onAggregationChange = new EventEmitter();
-        this.onExportTypeChange = new EventEmitter();
+        this.disabledAggregationOptions = input.required(...(ngDevMode ? [{ debugName: "disabledAggregationOptions" }] : []));
+        this.formGroup = input.required(...(ngDevMode ? [{ debugName: "formGroup" }] : []));
+        this.onAggregationChange = output();
+        this.onExportTypeChange = output();
         this.AGGREGATION_LABELS = AGGREGATION_LABELS;
         this.AGGREGATION_VALUES_ARR = AGGREGATION_VALUES_ARR;
         this.EXPORT_MODE_LABELS = EXPORT_MODE_LABELS;
@@ -665,41 +729,31 @@ class DataPointsExportSelectorDataScopeComponent {
         this.onExportTypeChange.emit(exportType);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DataPointsExportSelectorDataScopeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: DataPointsExportSelectorDataScopeComponent, isStandalone: true, selector: "c8y-datapoints-export-selector-data-scope", inputs: { disabledAggregationOptions: "disabledAggregationOptions", formGroup: "formGroup" }, outputs: { onAggregationChange: "onAggregationChange", onExportTypeChange: "onExportTypeChange" }, ngImport: i0, template: "<fieldset class=\"c8y-fieldset\">\n  <legend class=\"d-flex a-i-center\">\n    {{ 'Data scope' | translate }}\n    <button\n      class=\"btn-help\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"popoverDataScopeTemplate\"\n      placement=\"right\"\n      triggers=\"focus\"\n      container=\"body\"\n      type=\"button\"\n      data-cy=\"data-scope--help\"\n      [adaptivePosition]=\"true\"\n    ></button>\n    <ng-template #popoverDataScopeTemplate>\n      <p\n        class=\"m-b-8\"\n        translate\n      >\n        Choose export type from available options:\n      </p>\n      <p><strong translate>Compact</strong></p>\n      <ul class=\"p-l-16\">\n        <li translate>Up to 5,000 records per data point or data retention limit</li>\n        <li translate>Single merged file for all data</li>\n        <li translate>No preview available</li>\n        <li translate>Optional data aggregation supported</li>\n      </ul>\n      <p><strong translate>Full</strong></p>\n      <ul class=\"p-l-16\">\n        <li translate>Up to 1,000,000 records per data point or data retention limit</li>\n        <li translate>Email delivery if exceeds 50,000 records</li>\n        <li translate>Separate files for each data point in ZIP format</li>\n        <li translate>Preview available</li>\n        <li translate>No data aggregation</li>\n      </ul>\n    </ng-template>\n  </legend>\n  <c8y-form-group class=\"m-b-8\">\n    <label>\n      {{ 'Export mode' | translate }}\n    </label>\n    <div\n      class=\"c8y-select-wrapper\"\n      [formGroup]=\"formGroup\"\n      data-cy=\"data-scope--export-selector\"\n    >\n      <select\n        class=\"form-control text-12\"\n        [title]=\"'Export mode' | translate\"\n        id=\"exportMode\"\n        formControlName=\"exportMode\"\n        (ngModelChange)=\"emitExportTypeChange($event)\"\n      >\n        <option\n          *ngFor=\"let exportModeValue of EXPORT_MODE_VALUES_ARR\"\n          [ngValue]=\"exportModeValue\"\n        >\n          {{ EXPORT_MODE_LABELS[exportModeValue] | translate }}\n        </option>\n      </select>\n    </div>\n  </c8y-form-group>\n  <c8y-form-group class=\"m-b-8\">\n    <label>\n      {{ 'Aggregation' | translate }}\n    </label>\n    <div\n      class=\"c8y-select-wrapper\"\n      [formGroup]=\"formGroup\"\n      data-cy=\"data-scope--aggregation-selector\"\n    >\n      <select\n        class=\"form-control text-12\"\n        [title]=\"'Aggregation' | translate\"\n        id=\"aggregation\"\n        formControlName=\"aggregation\"\n        (ngModelChange)=\"emitAggregationChange($event)\"\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", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i3$1.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DataPointsExportSelectorDataScopeComponent, isStandalone: true, selector: "c8y-datapoints-export-selector-data-scope", inputs: { disabledAggregationOptions: { classPropertyName: "disabledAggregationOptions", publicName: "disabledAggregationOptions", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onAggregationChange: "onAggregationChange", onExportTypeChange: "onExportTypeChange" }, ngImport: i0, template: "<fieldset class=\"c8y-fieldset\">\n  <legend class=\"d-flex a-i-center\">\n    {{ 'Data scope' | translate }}\n    <button\n      class=\"btn-help\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"popoverDataScopeTemplate\"\n      placement=\"right\"\n      triggers=\"focus\"\n      container=\"body\"\n      type=\"button\"\n      data-cy=\"data-scope--help\"\n      [adaptivePosition]=\"true\"\n    ></button>\n    <ng-template #popoverDataScopeTemplate>\n      <p\n        class=\"m-b-8\"\n        translate\n      >\n        Choose export type from available options:\n      </p>\n      <p><strong translate>Compact</strong></p>\n      <ul class=\"p-l-16\">\n        <li translate>Up to 5,000 records per data point or data retention limit</li>\n        <li translate>Single merged file for all data</li>\n        <li translate>No preview available</li>\n        <li translate>Optional data aggregation supported</li>\n      </ul>\n      <p><strong translate>Full</strong></p>\n      <ul class=\"p-l-16\">\n        <li translate>Up to 1,000,000 records per data point or data retention limit</li>\n        <li translate>Email delivery if exceeds 50,000 records</li>\n        <li translate>Separate files for each data point in ZIP format</li>\n        <li translate>Preview available</li>\n        <li translate>No data aggregation</li>\n      </ul>\n    </ng-template>\n  </legend>\n  <c8y-form-group class=\"m-b-8\">\n    <label>\n      {{ 'Export mode' | translate }}\n    </label>\n    <div\n      class=\"c8y-select-wrapper\"\n      [formGroup]=\"formGroup()\"\n      data-cy=\"data-scope--export-selector\"\n    >\n      <select\n        class=\"form-control text-12\"\n        [title]=\"'Export mode' | translate\"\n        id=\"exportMode\"\n        formControlName=\"exportMode\"\n        (ngModelChange)=\"emitExportTypeChange($event)\"\n      >\n        @for (exportModeValue of EXPORT_MODE_VALUES_ARR; track exportModeValue) {\n          <option [ngValue]=\"exportModeValue\">\n            {{ EXPORT_MODE_LABELS[exportModeValue] | translate }}\n          </option>\n        }\n      </select>\n    </div>\n  </c8y-form-group>\n  <c8y-form-group class=\"m-b-8\">\n    <label>\n      {{ 'Aggregation' | translate }}\n    </label>\n    <div\n      class=\"c8y-select-wrapper\"\n      [formGroup]=\"formGroup()\"\n      data-cy=\"data-scope--aggregation-selector\"\n    >\n      <select\n        class=\"form-control text-12\"\n        [title]=\"'Aggregation' | translate\"\n        id=\"aggregation\"\n        formControlName=\"aggregation\"\n        (ngModelChange)=\"emitAggregationChange($event)\"\n      >\n        @for (aggregationValue of AGGREGATION_VALUES_ARR; track aggregationValue) {\n          <option\n            [ngValue]=\"aggregationValue\"\n            [disabled]=\"disabledAggregationOptions()[aggregationValue]\"\n          >\n            {{ AGGREGATION_LABELS[aggregationValue] | translate }}\n          </option>\n        }\n      </select>\n    </div>\n  </c8y-form-group>\n</fieldset>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i3$1.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DataPointsExportSelectorDataScopeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-datapoints-export-selector-data-scope', standalone: true, imports: [CoreModule, FormsModule, PopoverModule], template: "<fieldset class=\"c8y-fieldset\">\n  <legend class=\"d-flex a-i-center\">\n    {{ 'Data scope' | translate }}\n    <button\n      class=\"btn-help\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"popoverDataScopeTemplate\"\n      placement=\"right\"\n      triggers=\"focus\"\n      container=\"body\"\n      type=\"button\"\n      data-cy=\"data-scope--help\"\n      [adaptivePosition]=\"true\"\n    ></button>\n    <ng-template #popoverDataScopeTemplate>\n      <p\n        class=\"m-b-8\"\n        translate\n      >\n        Choose export type from available options:\n      </p>\n      <p><strong translate>Compact</strong></p>\n      <ul class=\"p-l-16\">\n        <li translate>Up to 5,000 records per data point or data retention limit</li>\n        <li translate>Single merged file for all data</li>\n        <li translate>No preview available</li>\n        <li translate>Optional data aggregation supported</li>\n      </ul>\n      <p><strong translate>Full</strong></p>\n      <ul class=\"p-l-16\">\n        <li translate>Up to 1,000,000 records per data point or data retention limit</li>\n        <li translate>Email delivery if exceeds 50,000 records</li>\n        <li translate>Separate files for each data point in ZIP format</li>\n        <li translate>Preview available</li>\n        <li translate>No data aggregation</li>\n      </ul>\n    </ng-template>\n  </legend>\n  <c8y-form-group class=\"m-b-8\">\n    <label>\n      {{ 'Export mode' | translate }}\n    </label>\n    <div\n      class=\"c8y-select-wrapper\"\n      [formGroup]=\"formGroup\"\n      data-cy=\"data-scope--export-selector\"\n    >\n      <select\n        class=\"form-control text-12\"\n        [title]=\"'Export mode' | translate\"\n        id=\"exportMode\"\n        formControlName=\"exportMode\"\n        (ngModelChange)=\"emitExportTypeChange($event)\"\n      >\n        <option\n          *ngFor=\"let exportModeValue of EXPORT_MODE_VALUES_ARR\"\n          [ngValue]=\"exportModeValue\"\n        >\n          {{ EXPORT_MODE_LABELS[exportModeValue] | translate }}\n        </option>\n      </select>\n    </div>\n  </c8y-form-group>\n  <c8y-form-group class=\"m-b-8\">\n    <label>\n      {{ 'Aggregation' | translate }}\n    </label>\n    <div\n      class=\"c8y-select-wrapper\"\n      [formGroup]=\"formGroup\"\n      data-cy=\"data-scope--aggregation-selector\"\n    >\n      <select\n        class=\"form-control text-12\"\n        [title]=\"'Aggregation' | translate\"\n        id=\"aggregation\"\n        formControlName=\"aggregation\"\n        (ngModelChange)=\"emitAggregationChange($event)\"\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" }]
-        }], propDecorators: { disabledAggregationOptions: [{
-                type: Input
-            }], formGroup: [{
-                type: Input
-            }], onAggregationChange: [{
-                type: Output
-            }], onExportTypeChange: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'c8y-datapoints-export-selector-data-scope', imports: [CoreModule, FormsModule, PopoverModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fieldset class=\"c8y-fieldset\">\n  <legend class=\"d-flex a-i-center\">\n    {{ 'Data scope' | translate }}\n    <button\n      class=\"btn-help\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"popoverDataScopeTemplate\"\n      placement=\"right\"\n      triggers=\"focus\"\n      container=\"body\"\n      type=\"button\"\n      data-cy=\"data-scope--help\"\n      [adaptivePosition]=\"true\"\n    ></button>\n    <ng-template #popoverDataScopeTemplate>\n      <p\n        class=\"m-b-8\"\n        translate\n      >\n        Choose export type from available options:\n      </p>\n      <p><strong translate>Compact</strong></p>\n      <ul class=\"p-l-16\">\n        <li translate>Up to 5,000 records per data point or data retention limit</li>\n        <li translate>Single merged file for all data</li>\n        <li translate>No preview available</li>\n        <li translate>Optional data aggregation supported</li>\n      </ul>\n      <p><strong translate>Full</strong></p>\n      <ul class=\"p-l-16\">\n        <li translate>Up to 1,000,000 records per data point or data retention limit</li>\n        <li translate>Email delivery if exceeds 50,000 records</li>\n        <li translate>Separate files for each data point in ZIP format</li>\n        <li translate>Preview available</li>\n        <li translate>No data aggregation</li>\n      </ul>\n    </ng-template>\n  </legend>\n  <c8y-form-group class=\"m-b-8\">\n    <label>\n      {{ 'Export mode' | translate }}\n    </label>\n    <div\n      class=\"c8y-select-wrapper\"\n      [formGroup]=\"formGroup()\"\n      data-cy=\"data-scope--export-selector\"\n    >\n      <select\n        class=\"form-control text-12\"\n        [title]=\"'Export mode' | translate\"\n        id=\"exportMode\"\n        formControlName=\"exportMode\"\n        (ngModelChange)=\"emitExportTypeChange($event)\"\n      >\n        @for (exportModeValue of EXPORT_MODE_VALUES_ARR; track exportModeValue) {\n          <option [ngValue]=\"exportModeValue\">\n            {{ EXPORT_MODE_LABELS[exportModeValue] | translate }}\n          </option>\n        }\n      </select>\n    </div>\n  </c8y-form-group>\n  <c8y-form-group class=\"m-b-8\">\n    <label>\n      {{ 'Aggregation' | translate }}\n    </label>\n    <div\n      class=\"c8y-select-wrapper\"\n      [formGroup]=\"formGroup()\"\n      data-cy=\"data-scope--aggregation-selector\"\n    >\n      <select\n        class=\"form-control text-12\"\n        [title]=\"'Aggregation' | translate\"\n        id=\"aggregation\"\n        formControlName=\"aggregation\"\n        (ngModelChange)=\"emitAggregationChange($event)\"\n      >\n        @for (aggregationValue of AGGREGATION_VALUES_ARR; track aggregationValue) {\n          <option\n            [ngValue]=\"aggregationValue\"\n            [disabled]=\"disabledAggregationOptions()[aggregationValue]\"\n          >\n            {{ AGGREGATION_LABELS[aggregationValue] | translate }}\n          </option>\n        }\n      </select>\n    </div>\n  </c8y-form-group>\n</fieldset>\n" }]
+        }], propDecorators: { disabledAggregationOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledAggregationOptions", required: true }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], onAggregationChange: [{ type: i0.Output, args: ["onAggregationChange"] }], onExportTypeChange: [{ type: i0.Output, args: ["onExportTypeChange"] }] } });
 
 class DataPointsExportSelectorFileTypesComponent {
     constructor() {
-        this.dynamicFilesTypeMetadata = {};
+        this.dynamicFilesTypeMetadata = input({}, ...(ngDevMode ? [{ debugName: "dynamicFilesTypeMetadata" }] : []));
+        this.formGroup = input.required(...(ngDevMode ? [{ debugName: "formGroup" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DataPointsExportSelectorFileTypesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: DataPointsExportSelectorFileTypesComponent, isStandalone: true, selector: "c8y-datapoints-export-selector-file-types", inputs: { dynamicFilesTypeMetadata: "dynamicFilesTypeMetadata", formGroup: "formGroup" }, ngImport: i0, template: "<fieldset class=\"c8y-fieldset\">\n  <legend class=\"d-flex a-i-center\">{{ 'File types' | translate }}</legend>\n  <div [formGroup]=\"formGroup\">\n    <div formGroupName=\"fileTypes\">\n      <c8y-form-group\n        class=\"m-b-8\"\n        *ngFor=\"let item of dynamicFilesTypeMetadata | keyvalue\"\n      >\n        <label\n          class=\"c8y-checkbox m-t-0\"\n          title=\"{{ item.value.title }}\"\n        >\n          <input\n            type=\"checkbox\"\n            formControlName=\"{{ item.key }}\"\n          />\n          <span></span>\n          <i\n            class=\"m-l-8 m-r-4\"\n            c8yIcon=\"{{ item.value.icon }}\"\n          ></i>\n          <span>{{ item.value.label | translate }}</span>\n        </label>\n      </c8y-form-group>\n    </div>\n  </div>\n</fieldset>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2$1.KeyValuePipe, name: "keyvalue" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DataPointsExportSelectorFileTypesComponent, isStandalone: true, selector: "c8y-datapoints-export-selector-file-types", inputs: { dynamicFilesTypeMetadata: { classPropertyName: "dynamicFilesTypeMetadata", publicName: "dynamicFilesTypeMetadata", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<fieldset class=\"c8y-fieldset\">\n  <legend class=\"d-flex a-i-center\">{{ 'File types' | translate }}</legend>\n  <div [formGroup]=\"formGroup()\">\n    <div formGroupName=\"fileTypes\">\n      @for (item of dynamicFilesTypeMetadata() | keyvalue; track item.key) {\n        <c8y-form-group class=\"m-b-8\">\n          <label\n            class=\"c8y-checkbox m-t-0\"\n            title=\"{{ item.value.title }}\"\n          >\n            <input\n              type=\"checkbox\"\n              formControlName=\"{{ item.key }}\"\n            />\n            <span></span>\n            <i\n              class=\"m-l-8 m-r-4\"\n              c8yIcon=\"{{ item.value.icon }}\"\n            ></i>\n            <span>{{ item.value.label | translate }}</span>\n          </label>\n        </c8y-form-group>\n      }\n    </div>\n  </div>\n</fieldset>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$2.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DataPointsExportSelectorFileTypesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-datapoints-export-selector-file-types', standalone: true, imports: [CoreModule, FormsModule], template: "<fieldset class=\"c8y-fieldset\">\n  <legend class=\"d-flex a-i-center\">{{ 'File types' | translate }}</legend>\n  <div [formGroup]=\"formGroup\">\n    <div formGroupName=\"fileTypes\">\n      <c8y-form-group\n        class=\"m-b-8\"\n        *ngFor=\"let item of dynamicFilesTypeMetadata | keyvalue\"\n      >\n        <label\n          class=\"c8y-checkbox m-t-0\"\n          title=\"{{ item.value.title }}\"\n        >\n          <input\n            type=\"checkbox\"\n            formControlName=\"{{ item.key }}\"\n          />\n          <span></span>\n          <i\n            class=\"m-l-8 m-r-4\"\n            c8yIcon=\"{{ item.value.icon }}\"\n          ></i>\n          <span>{{ item.value.label | translate }}</span>\n        </label>\n      </c8y-form-group>\n    </div>\n  </div>\n</fieldset>\n" }]
-        }], propDecorators: { dynamicFilesTypeMetadata: [{
-                type: Input
-            }], formGroup: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'c8y-datapoints-export-selector-file-types', imports: [CoreModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fieldset class=\"c8y-fieldset\">\n  <legend class=\"d-flex a-i-center\">{{ 'File types' | translate }}</legend>\n  <div [formGroup]=\"formGroup()\">\n    <div formGroupName=\"fileTypes\">\n      @for (item of dynamicFilesTypeMetadata() | keyvalue; track item.key) {\n        <c8y-form-group class=\"m-b-8\">\n          <label\n            class=\"c8y-checkbox m-t-0\"\n            title=\"{{ item.value.title }}\"\n          >\n            <input\n              type=\"checkbox\"\n              formControlName=\"{{ item.key }}\"\n            />\n            <span></span>\n            <i\n              class=\"m-l-8 m-r-4\"\n              c8yIcon=\"{{ item.value.icon }}\"\n            ></i>\n            <span>{{ item.value.label | translate }}</span>\n          </label>\n        </c8y-form-group>\n      }\n    </div>\n  </div>\n</fieldset>\n" }]
+        }], propDecorators: { dynamicFilesTypeMetadata: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicFilesTypeMetadata", required: false }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }] } });
 
 class DataPointsExportSelectorTimeRangeComponent {
     constructor() {
-        this.onDateFromChange = new EventEmitter();
-        this.onDateToChange = new EventEmitter();
+        this.formGroup = input.required(...(ngDevMode ? [{ debugName: "formGroup" }] : []));
+        this.onDateFromChange = output();
+        this.onDateToChange = output();
         this.destroy$ = new Subject();
         this.DATE_FROM = 'dateFrom';
         this.DATE_TO = 'dateTo';
@@ -712,14 +766,15 @@ class DataPointsExportSelectorTimeRangeComponent {
         this.TO_DATE = gettext('To`date`');
     }
     ngOnInit() {
-        if (this.formGroup?.controls?.dateFrom) {
-            this.formGroup.controls.dateFrom.valueChanges
+        const fg = this.formGroup();
+        if (fg?.controls?.dateFrom) {
+            fg.controls.dateFrom.valueChanges
                 // Skip the first value emitted by the observable to avoid overriding the initial value while form is being created
                 .pipe(skip(1), takeUntil(this.destroy$))
                 .subscribe((updatedDate) => this.onDateFromChange.emit(updatedDate));
         }
-        if (this.formGroup?.controls?.dateTo) {
-            this.formGroup.controls.dateTo.valueChanges
+        if (fg?.controls?.dateTo) {
+            fg.controls.dateTo.valueChanges
                 // Skip the first value emitted by the observable to avoid overriding the initial value while form is being created
                 .pipe(skip(1), takeUntil(this.destroy$))
                 .subscribe((updatedDate) => this.onDateToChange.emit(updatedDate));
@@ -730,18 +785,12 @@ class DataPointsExportSelectorTimeRangeComponent {
         this.destroy$.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DataPointsExportSelectorTimeRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: DataPointsExportSelectorTimeRangeComponent, isStandalone: true, selector: "c8y-datapoints-export-selector-time-range", inputs: { formGroup: "formGroup" }, outputs: { onDateFromChange: "onDateFromChange", onDateToChange: "onDateToChange" }, ngImport: i0, template: "<fieldset class=\"c8y-fieldset\">\n  <legend>{{ 'Time range' | translate }}</legend>\n  <c8y-form-group\n    class=\"m-b-8\"\n    [ngClass]=\"formGroup.controls.dateFrom.errors ? HAS_ERROR : ''\"\n  >\n    <label\n      [title]=\"FROM_DATE | translate\"\n      [for]=\"DATE_FROM\"\n    >\n      {{ FROM_DATE | translate }}\n    </label>\n    <div>\n      <c8y-date-time-picker\n        id=\"DATE_FROM\"\n        [maxDate]=\"formGroup.value.dateTo\"\n        [placeholder]=\"FROM_DATE | translate\"\n        [formControl]=\"formGroup.controls.dateFrom\"\n        [ngClass]=\"formGroup.controls.dateFrom.errors ? HAS_ERROR : ''\"\n      ></c8y-date-time-picker>\n      <c8y-messages [show]=\"formGroup.controls.dateFrom.errors\">\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    </div>\n  </c8y-form-group>\n  <c8y-form-group\n    class=\"m-b-8\"\n    [ngClass]=\"formGroup.controls.dateTo.errors ? HAS_ERROR : ''\"\n  >\n    <label\n      [title]=\"TO_DATE | translate\"\n      [for]=\"DATE_TO\"\n    >\n      {{ TO_DATE | translate }}\n    </label>\n    <div>\n      <c8y-date-time-picker\n        id=\"DATE_TO\"\n        [minDate]=\"formGroup.value.dateFrom\"\n        [placeholder]=\"TO_DATE | translate\"\n        [formControl]=\"formGroup.controls.dateTo\"\n        [ngClass]=\"formGroup.controls.dateTo.errors ? HAS_ERROR : ''\"\n      ></c8y-date-time-picker>\n      <c8y-messages [show]=\"formGroup.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    </div>\n  </c8y-form-group>\n</fieldset>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i1.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i1.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i1.DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.18", type: DataPointsExportSelectorTimeRangeComponent, isStandalone: true, selector: "c8y-datapoints-export-selector-time-range", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onDateFromChange: "onDateFromChange", onDateToChange: "onDateToChange" }, ngImport: i0, template: "<fieldset class=\"c8y-fieldset\">\n  <legend>{{ 'Time range' | translate }}</legend>\n  <c8y-form-group\n    class=\"m-b-8 d-flex gap-4 a-i-center\"\n    [class]=\"formGroup().controls.dateFrom.errors ? HAS_ERROR : ''\"\n  >\n    <label\n      class=\"m-b-0\"\n      style=\"min-width: 120px\"\n      [title]=\"FROM_DATE | translate\"\n      [for]=\"DATE_FROM\"\n    >\n      {{ FROM_DATE | translate }}\n    </label>\n    <div>\n      <c8y-date-time-picker\n        [class]=\"formGroup().controls.dateFrom.errors ? HAS_ERROR : ''\"\n        id=\"DATE_FROM\"\n        [maxDate]=\"formGroup().controls.dateTo.value ?? ''\"\n        [placeholder]=\"FROM_DATE | translate\"\n        [formControl]=\"formGroup().controls.dateFrom\"\n      ></c8y-date-time-picker>\n      <c8y-messages [show]=\"formGroup().controls.dateFrom.errors ?? {}\">\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    </div>\n  </c8y-form-group>\n  <c8y-form-group\n    class=\"m-b-8 d-flex gap-4 a-i-center\"\n    [class]=\"formGroup().controls.dateTo.errors ? HAS_ERROR : ''\"\n  >\n    <label\n      class=\"m-b-0\"\n      style=\"min-width: 120px\"\n      [title]=\"TO_DATE | translate\"\n      [for]=\"DATE_TO\"\n    >\n      {{ TO_DATE | translate }}\n    </label>\n    <div>\n      <c8y-date-time-picker\n        [class]=\"formGroup().controls.dateTo.errors ? HAS_ERROR : ''\"\n        id=\"DATE_TO\"\n        [minDate]=\"formGroup().controls.dateFrom.value ?? ''\"\n        [placeholder]=\"TO_DATE | translate\"\n        [formControl]=\"formGroup().controls.dateTo\"\n      ></c8y-date-time-picker>\n      <c8y-messages [show]=\"formGroup().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    </div>\n  </c8y-form-group>\n</fieldset>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i1.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i1.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i1.DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DataPointsExportSelectorTimeRangeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-datapoints-export-selector-time-range', standalone: true, imports: [CoreModule, FormsModule], template: "<fieldset class=\"c8y-fieldset\">\n  <legend>{{ 'Time range' | translate }}</legend>\n  <c8y-form-group\n    class=\"m-b-8\"\n    [ngClass]=\"formGroup.controls.dateFrom.errors ? HAS_ERROR : ''\"\n  >\n    <label\n      [title]=\"FROM_DATE | translate\"\n      [for]=\"DATE_FROM\"\n    >\n      {{ FROM_DATE | translate }}\n    </label>\n    <div>\n      <c8y-date-time-picker\n        id=\"DATE_FROM\"\n        [maxDate]=\"formGroup.value.dateTo\"\n        [placeholder]=\"FROM_DATE | translate\"\n        [formControl]=\"formGroup.controls.dateFrom\"\n        [ngClass]=\"formGroup.controls.dateFrom.errors ? HAS_ERROR : ''\"\n      ></c8y-date-time-picker>\n      <c8y-messages [show]=\"formGroup.controls.dateFrom.errors\">\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    </div>\n  </c8y-form-group>\n  <c8y-form-group\n    class=\"m-b-8\"\n    [ngClass]=\"formGroup.controls.dateTo.errors ? HAS_ERROR : ''\"\n  >\n    <label\n      [title]=\"TO_DATE | translate\"\n      [for]=\"DATE_TO\"\n    >\n      {{ TO_DATE | translate }}\n    </label>\n    <div>\n      <c8y-date-time-picker\n        id=\"DATE_TO\"\n        [minDate]=\"formGroup.value.dateFrom\"\n        [placeholder]=\"TO_DATE | translate\"\n        [formControl]=\"formGroup.controls.dateTo\"\n        [ngClass]=\"formGroup.controls.dateTo.errors ? HAS_ERROR : ''\"\n      ></c8y-date-time-picker>\n      <c8y-messages [show]=\"formGroup.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    </div>\n  </c8y-form-group>\n</fieldset>\n" }]
-        }], propDecorators: { formGroup: [{
-                type: Input
-            }], onDateFromChange: [{
-                type: Output
-            }], onDateToChange: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'c8y-datapoints-export-selector-time-range', imports: [CoreModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fieldset class=\"c8y-fieldset\">\n  <legend>{{ 'Time range' | translate }}</legend>\n  <c8y-form-group\n    class=\"m-b-8 d-flex gap-4 a-i-center\"\n    [class]=\"formGroup().controls.dateFrom.errors ? HAS_ERROR : ''\"\n  >\n    <label\n      class=\"m-b-0\"\n      style=\"min-width: 120px\"\n      [title]=\"FROM_DATE | translate\"\n      [for]=\"DATE_FROM\"\n    >\n      {{ FROM_DATE | translate }}\n    </label>\n    <div>\n      <c8y-date-time-picker\n        [class]=\"formGroup().controls.dateFrom.errors ? HAS_ERROR : ''\"\n        id=\"DATE_FROM\"\n        [maxDate]=\"formGroup().controls.dateTo.value ?? ''\"\n        [placeholder]=\"FROM_DATE | translate\"\n        [formControl]=\"formGroup().controls.dateFrom\"\n      ></c8y-date-time-picker>\n      <c8y-messages [show]=\"formGroup().controls.dateFrom.errors ?? {}\">\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    </div>\n  </c8y-form-group>\n  <c8y-form-group\n    class=\"m-b-8 d-flex gap-4 a-i-center\"\n    [class]=\"formGroup().controls.dateTo.errors ? HAS_ERROR : ''\"\n  >\n    <label\n      class=\"m-b-0\"\n      style=\"min-width: 120px\"\n      [title]=\"TO_DATE | translate\"\n      [for]=\"DATE_TO\"\n    >\n      {{ TO_DATE | translate }}\n    </label>\n    <div>\n      <c8y-date-time-picker\n        [class]=\"formGroup().controls.dateTo.errors ? HAS_ERROR : ''\"\n        id=\"DATE_TO\"\n        [minDate]=\"formGroup().controls.dateFrom.value ?? ''\"\n        [placeholder]=\"TO_DATE | translate\"\n        [formControl]=\"formGroup().controls.dateTo\"\n      ></c8y-date-time-picker>\n      <c8y-messages [show]=\"formGroup().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    </div>\n  </c8y-form-group>\n</fieldset>\n" }]
+        }], propDecorators: { formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], onDateFromChange: [{ type: i0.Output, args: ["onDateFromChange"] }], onDateToChange: [{ type: i0.Output, args: ["onDateToChange"] }] } });
 
 class CSVDataTransformer {
     transformToMergedFormat(exportData) {
@@ -819,6 +868,41 @@ class CSVGenerator {
         const csvContent = rows.map(row => row.join(',')).join('\n');
         return instance.fileCreator.createFile(csvContent, CSVGenerator.getMimeType());
     }
+    /**
+     * Converts list-type datapoints to CSV format
+     * @param listData - Array of datapoints with current values
+     * @param columns - Column configuration specifying which columns to include and their order
+     * @returns Promise with CSV Blob
+     */
+    static async convertToListCSV(listData, columns) {
+        const instance = CSVGenerator.getInstance();
+        const sortedColumns = columns.sort((a, b) => a.order - b.order);
+        const headers = sortedColumns.map(col => col.label);
+        const columnMapping = {
+            kpi: 'label',
+            target: 'target',
+            current: 'current',
+            diff: 'diff',
+            diffPercentage: 'diffPercent',
+            asset: 'deviceName'
+        };
+        const dataRows = listData.map(datapoint => {
+            return sortedColumns.map(col => {
+                const propKey = columnMapping[col.id];
+                const value = datapoint[propKey];
+                if (value === null || value === undefined) {
+                    return '';
+                }
+                if (typeof value === 'number') {
+                    return value.toFixed(2);
+                }
+                return String(value);
+            });
+        });
+        const allRows = [headers, ...dataRows];
+        const csvContent = allRows.map(row => row.join(',')).join('\n');
+        return instance.fileCreator.createFile(csvContent, CSVGenerator.getMimeType());
+    }
     static getInstance() {
         if (!CSVGenerator.instance) {
             CSVGenerator.instance = new CSVGenerator();
@@ -856,12 +940,18 @@ const CSVGeneratorAdapter = {
     getFileExtension: CSVGenerator.getFileExtension.bind(CSVGenerator),
     getMimeType: CSVGenerator.getMimeType.bind(CSVGenerator),
     generateMerged: CSVGenerator.convertToMergedCSV.bind(CSVGenerator),
+    generateList: CSVGenerator.convertToListCSV.bind(CSVGenerator),
     getType: CSVGenerator.getType.bind(CSVGenerator),
     getTitle: CSVGenerator.getTitle.bind(CSVGenerator),
     getZipName: CSVGenerator.getZipName.bind(CSVGenerator),
     getAcceptType: CSVGenerator.getAcceptType.bind(CSVGenerator)
 };
 
+var csvGenerator = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    CSVGeneratorAdapter: CSVGeneratorAdapter
+});
+
 // Utility functions
 class XmlUtils {
     static escapeXml(unsafe) {
@@ -1080,6 +1170,40 @@ class ExcelGenerator {
         ];
         return instance.createExcelFile(rows, mergedExportDetails);
     }
+    /**
+     * Converts list-type datapoints to Excel format
+     * @param listData - Array of datapoints with current values
+     * @param columns - Column configuration specifying which columns to include and their order
+     * @returns Promise with Excel Blob
+     */
+    static async convertToListExcel(listData, columns) {
+        const instance = ExcelGenerator.getInstance();
+        const sortedColumns = columns.sort((a, b) => a.order - b.order);
+        const headers = sortedColumns.map(col => col.label);
+        const columnMapping = {
+            kpi: 'label',
+            target: 'target',
+            current: 'current',
+            diff: 'diff',
+            diffPercentage: 'diffPercent',
+            asset: 'deviceName'
+        };
+        const dataRows = listData.map(datapoint => {
+            return sortedColumns.map(col => {
+                const propKey = columnMapping[col.id];
+                const value = datapoint[propKey];
+                if (value === null || value === undefined) {
+                    return '';
+                }
+                if (typeof value === 'number') {
+                    return value.toFixed(2);
+                }
+                return String(value);
+            });
+        });
+        const allRows = [headers, ...dataRows];
+        return instance.createExcelFile(allRows);
+    }
     static getInstance() {
         if (!ExcelGenerator.instance) {
             ExcelGenerator.instance = new ExcelGenerator();
@@ -1134,12 +1258,19 @@ const ExcelGeneratorAdapter = {
     getFileExtension: ExcelGenerator.getFileExtension.bind(ExcelGenerator),
     getMimeType: ExcelGenerator.getMimeType.bind(ExcelGenerator),
     generateMerged: ExcelGenerator.convertToMergedExcel.bind(ExcelGenerator),
+    generateList: ExcelGenerator.convertToListExcel.bind(ExcelGenerator),
     getType: ExcelGenerator.getType.bind(ExcelGenerator),
     getTitle: ExcelGenerator.getTitle.bind(ExcelGenerator),
     getZipName: ExcelGenerator.getZipName.bind(ExcelGenerator),
     getAcceptType: ExcelGenerator.getAcceptType.bind(ExcelGenerator)
 };
 
+var excelGenerator = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ExcelDataTransformer: ExcelDataTransformer,
+    ExcelGeneratorAdapter: ExcelGeneratorAdapter
+});
+
 const FILE_GENERATORS = new InjectionToken('FILE_GENERATORS', {
     providedIn: 'root',
     factory: () => [ExcelGeneratorAdapter, CSVGeneratorAdapter]
@@ -1165,15 +1296,28 @@ const dateRangeValidator = (control) => {
     return null;
 };
 class DatapointsExportSelectorFileExporterComponent {
-    constructor(aggregationService, datapointsExportModalService, datapointsExportSelectorFileExporterService, dataFetchingService, formBuilder, generators, gainsightService) {
+    get isPreviewLoading() {
+        return this._isPreviewLoading;
+    }
+    set isPreviewLoading(value) {
+        if (this._isPreviewLoading !== value) {
+            this._isPreviewLoading = value;
+            this.previewLoadingChange.emit(value);
+        }
+    }
+    constructor(aggregationService, cdr, datapointsExportModalService, datapointsExportSelectorFileExporterService, dataFetchingService, formBuilder, generators, gainsightService) {
         this.aggregationService = aggregationService;
+        this.cdr = cdr;
         this.datapointsExportModalService = datapointsExportModalService;
         this.datapointsExportSelectorFileExporterService = datapointsExportSelectorFileExporterService;
         this.dataFetchingService = dataFetchingService;
         this.formBuilder = formBuilder;
         this.generators = generators;
         this.gainsightService = gainsightService;
-        this.onDownloadButtonStateChange = new EventEmitter();
+        this.exportConfig = input.required(...(ngDevMode ? [{ debugName: "exportConfig" }] : []));
+        this.onDownloadButtonStateChange = output();
+        this.previewAvailabilityChange = output();
+        this.previewLoadingChange = output();
         /**
          * Represents aggregation selector options that are disabled.
          * This state is determined based on the current date range.
@@ -1190,13 +1334,24 @@ class DatapointsExportSelectorFileExporterComponent {
          */
         this.hasFetchedDataAnyValuesToExport = false;
         this.hasPermissionToReadAnyMeasurements = false;
-        this.isPreviewLoading = true;
+        this.isCheckingPermissions = true;
+        this._isPreviewLoading = true;
         /**
          * Indicates whether the full or compact type of export is selected.
          * Full type of export is based on measurement API data.
          * Compact type of export is based on series API data.
          */
         this.isFullTypeOfExport = false;
+        /**
+         * Indicates whether list-type export is selected.
+         * List type of export is a snapshot of current datapoints values.
+         */
+        this.isListTypeOfExport = false;
+        /**
+         * Indicates whether the Data Scope component should be visible.
+         * Hidden for list-type exports, visible for table-type exports.
+         */
+        this.isDataScopeVisible = true;
         /**
          * Indicates whether the aggregation value was changed programmatically.
          * It prevents a case where fetching may be triggered twice when export type is changed.
@@ -1236,25 +1391,36 @@ class DatapointsExportSelectorFileExporterComponent {
         });
     }
     async ngOnInit() {
-        const sourcesPermittedToRead = await this.dataFetchingService.getSourcesWithPermissionsToRead(this.exportConfig.datapointDetails);
+        this.isListTypeOfExport = this.exportConfig().exportType === 'latestWithDetails';
+        this.isDataScopeVisible = !this.isListTypeOfExport;
+        this.emitPreviewAvailability();
+        const sourcesPermittedToRead = await this.dataFetchingService.getSourcesWithPermissionsToRead(this.exportConfig().datapointDetails);
+        this.isCheckingPermissions = false;
+        this.cdr.markForCheck();
         if (sourcesPermittedToRead.length === 0) {
             return;
         }
-        if (sourcesPermittedToRead.length !== this.exportConfig.datapointDetails.length) {
-            this.exportConfig.datapointDetails = this.exportConfig.datapointDetails.filter(dataPoint => sourcesPermittedToRead.includes(String(dataPoint.source)));
+        if (sourcesPermittedToRead.length !== this.exportConfig().datapointDetails.length) {
+            this.exportConfig().datapointDetails = this.exportConfig().datapointDetails.filter(dataPoint => sourcesPermittedToRead.includes(String(dataPoint.source)));
         }
         this.hasPermissionToReadAnyMeasurements = true;
         this.storeInitialChangeableConfig();
         this.fileTypeSelectionState = this.getInitialSelection(this.dynamicFilesTypeMetadata, [0]);
         this.formGroup = this.createForm();
-        this.dataToExport = await this.dataFetchingService.fetchAndPrepareDataToExport(this.exportConfig, this.isFullTypeOfExport);
+        this.isPreviewLoading = true;
+        if (this.isListTypeOfExport) {
+            await this.loadListExportData();
+        }
+        else {
+            await this.loadTableExportData();
+            this.handleExportModeChanges();
+        }
         this.handleDateSelectorChanges();
-        this.determineShowingPreviewOrEmptyState();
-        this.handleExportModeChanges();
         this.handleFileTypeSelectionChanges();
         this.handleFormValidationChanges();
         this.updateFileTypeControl();
         this.updateDisabledAggregationOptions();
+        this.cdr.markForCheck();
     }
     ngOnDestroy() {
         this.destroy$.next();
@@ -1278,6 +1444,9 @@ class DatapointsExportSelectorFileExporterComponent {
         return fileExports.filter(f => this.fileTypeSelectionState[f.fileType] === true);
     }
     async exportFile(fileType) {
+        if (this.isListTypeOfExport) {
+            return await this.exportListFile(fileType);
+        }
         return this.isFullTypeOfExport
             ? await this.exportMeasurementFile(fileType)
             : await this.exportSeriesFile(fileType);
@@ -1296,9 +1465,13 @@ class DatapointsExportSelectorFileExporterComponent {
             if (shouldShowAlert) {
                 this.dataFetchingService.showSendViaEmailInfoAlert(fileType, this.datapointsExceedingBrowserDownloadLimit);
             }
-            this.isFullTypeOfExport
-                ? saveAs(blob, measurementsZipFileName)
-                : saveAs(blob, blob[SERIES_DATA_MERGED_FILE_NAME]);
+            // Full export uses zip filename, compact and list exports use blob's attached filename
+            if (this.isFullTypeOfExport) {
+                saveAs(blob, measurementsZipFileName);
+            }
+            else {
+                saveAs(blob, blob[SERIES_DATA_MERGED_FILE_NAME]);
+            }
         }
     }
     /**
@@ -1315,7 +1488,7 @@ class DatapointsExportSelectorFileExporterComponent {
      */
     async exportMeasurementFile(fileType) {
         const { acceptType, extension } = this.datapointsExportModalService.fileTypesConfigs[fileType];
-        const updatedExportConfig = this.excludeDatapointsThatExceedsApiLimit(this.exportConfig);
+        const updatedExportConfig = this.excludeDatapointsThatExceedsApiLimit(this.exportConfig());
         const dataToExport = await this.dataFetchingService.fetchMeasurementDataFilesAndPairWithSourceDetails(acceptType, updatedExportConfig);
         const isAllUndefined = dataToExport.every(data => data === undefined);
         if (isAllUndefined) {
@@ -1342,32 +1515,47 @@ class DatapointsExportSelectorFileExporterComponent {
      */
     async exportSeriesFile(fileType) {
         const mergedExportDetails = {
-            aggregation: this.exportConfig.aggregation,
-            dateFrom: this.exportConfig.dateFrom,
-            dateTo: this.exportConfig.dateTo
+            aggregation: this.exportConfig().aggregation,
+            dateFrom: this.exportConfig().dateFrom,
+            dateTo: this.exportConfig().dateTo
         };
         return this.datapointsExportSelectorFileExporterService.getSeriesExportedDataBlob(fileType, this.dataToExport, mergedExportDetails);
     }
+    /**
+     * Exports list-type data (snapshot of datapoints with current values)
+     * @param fileType - The type of file to export (csv or excel)
+     * @returns Promise resolving to a Blob with the exported file
+     */
+    async exportListFile(fileType) {
+        const listData = await this.dataFetchingService.fetchAndPrepareListExportData(this.exportConfig());
+        const columns = this.exportConfig().columns || [];
+        const dateRange = {
+            dateFrom: this.exportConfig().dateFrom,
+            dateTo: this.exportConfig().dateTo
+        };
+        return this.datapointsExportSelectorFileExporterService.getListExportedDataBlob(fileType, listData, columns, dateRange);
+    }
     async onAggregationChange(newAggregation) {
-        const currentAggregation = this.exportConfig.aggregation ?? AGGREGATION_VALUES.none;
+        const currentAggregation = this.exportConfig().aggregation ?? AGGREGATION_VALUES.none;
         if (currentAggregation === newAggregation) {
             return;
         }
-        this.exportConfig.aggregation = newAggregation;
+        this.exportConfig().aggregation = newAggregation;
         if (this.isAggregationChangedProgrammatically) {
             return;
         }
         await this.loadExportData();
         this.updateDownloadButtonState();
+        this.cdr.markForCheck();
     }
     onDateFromChange(updatedDate) {
-        this.update(updatedDate, this.exportConfig.dateTo);
+        this.update(updatedDate, this.exportConfig().dateTo);
     }
     onDateToChange(updatedDate) {
-        this.update(this.exportConfig.dateFrom, updatedDate);
+        this.update(this.exportConfig().dateFrom, updatedDate);
     }
     async updateDateAndFetchData(dateType, dateInfo) {
-        this.exportConfig[dateType] = dateInfo.date;
+        this.exportConfig()[dateType] = dateInfo.date;
         if (!dateInfo.shouldFetchData) {
             return;
         }
@@ -1378,6 +1566,7 @@ class DatapointsExportSelectorFileExporterComponent {
         else {
             this.updateDownloadButtonState();
         }
+        this.cdr.markForCheck();
     }
     async onExportTypeChange(exportType) {
         if (exportType === EXPORT_MODE_VALUES.full) {
@@ -1385,24 +1574,39 @@ class DatapointsExportSelectorFileExporterComponent {
             this.formGroup.controls.aggregation.setValue(AGGREGATION_VALUES.none);
             this.isAggregationChangedProgrammatically = false;
             this.isFullTypeOfExport = true;
+            this.emitPreviewAvailability();
             await this.loadExportData();
             await this.determineIfMeasurementResponseWillBeProcessedByBackend();
+            this.cdr.markForCheck();
             return;
         }
         this.resetFullExportRelatedProperties();
         this.isFullTypeOfExport = false;
+        this.emitPreviewAvailability();
         await this.loadExportData();
         this.updateDisabledAggregationOptions();
         this.updateDownloadButtonState();
+        this.cdr.markForCheck();
+    }
+    /**
+     * Prepares preview for list-type exports
+     * @param listData - Array of list datapoints
+     */
+    prepareListPreview(listData) {
+        const columns = this.exportConfig().columns || [];
+        this.previewTableData = this.datapointsExportModalService.transformListDataToPreview(listData, columns);
+        this.isPreviewLoading = false;
     }
     updateDisabledAggregationOptions() {
         this.disabledAggregationOptions = this.aggregationService.getDisabledAggregationOptions(this.formGroup.controls.dateFrom.value, this.formGroup.controls.dateTo.value);
     }
     createForm() {
         return this.formBuilder.group({
-            dateFrom: new FormControl(this.exportConfig.dateFrom),
-            dateTo: new FormControl(this.exportConfig.dateTo),
-            aggregation: new FormControl(this.exportConfig.aggregation ? this.exportConfig.aggregation : AGGREGATION_VALUES.none),
+            dateFrom: new FormControl(this.exportConfig().dateFrom),
+            dateTo: new FormControl(this.exportConfig().dateTo),
+            aggregation: new FormControl(this.exportConfig().aggregation
+                ? this.exportConfig().aggregation
+                : AGGREGATION_VALUES.none),
             exportMode: new FormControl(EXPORT_MODE_VALUES.compact),
             fileTypes: this.formBuilder.group(this.generators.reduce((a, c) => {
                 a[c.getType()] = false;
@@ -1493,12 +1697,12 @@ class DatapointsExportSelectorFileExporterComponent {
     async determineIfMeasurementResponseWillBeProcessedByBackend() {
         this.isPreviewLoading = true;
         this.datapointsExceedingBrowserDownloadLimit =
-            await this.dataFetchingService.getDatapointsExceedingLimit(this.exportConfig);
+            await this.dataFetchingService.getDatapointsExceedingLimit(this.exportConfig());
         const { browserDownloadableCount, emailDeliverableCount, nonRetrievableCount } = this.calculateDatapointCounts();
         this.hasNoExportableData =
             browserDownloadableCount === 0 && emailDeliverableCount === 0 && nonRetrievableCount > 0;
         if (this.datapointsExceedingBrowserDownloadLimit.length > 0 && !this.hasNoExportableData) {
-            this.limitExceededMessage = this.dataFetchingService.getLimitExceededMessage(this.hasNoExportableData, emailDeliverableCount, browserDownloadableCount, nonRetrievableCount, this.exportConfig.datapointDetails.length);
+            this.limitExceededMessage = this.dataFetchingService.getLimitExceededMessage(this.hasNoExportableData, emailDeliverableCount, browserDownloadableCount, nonRetrievableCount, this.exportConfig().datapointDetails.length);
         }
         if (this.datapointsExceedingBrowserDownloadLimit.length > 0 && this.hasNoExportableData) {
             this.limitExceededMessage = this.dataFetchingService.getLimitExceededMessage(this.hasNoExportableData);
@@ -1511,7 +1715,7 @@ class DatapointsExportSelectorFileExporterComponent {
         this.dataPointsExceedingOneMillionLimit = this.datapointsExceedingBrowserDownloadLimit.filter(datapointsExceedingBrowserDownloadLimit => datapointsExceedingBrowserDownloadLimit.totalElements > RECORD_API_LIMIT);
         const nonRetrievableCount = this.dataPointsExceedingOneMillionLimit.length;
         const emailDeliverableCount = this.datapointsExceedingBrowserDownloadLimit.length - nonRetrievableCount;
-        const browserDownloadableCount = this.exportConfig.datapointDetails.length - emailDeliverableCount - nonRetrievableCount;
+        const browserDownloadableCount = this.exportConfig().datapointDetails.length - emailDeliverableCount - nonRetrievableCount;
         return {
             browserDownloadableCount,
             emailDeliverableCount,
@@ -1519,19 +1723,19 @@ class DatapointsExportSelectorFileExporterComponent {
         };
     }
     storeInitialChangeableConfig() {
-        this.initialDateFrom = this.exportConfig.dateFrom;
-        this.initialDateTo = this.exportConfig.dateTo;
-        this.initialDatapointDetails = this.exportConfig.datapointDetails;
+        this.initialDateFrom = this.exportConfig().dateFrom;
+        this.initialDateTo = this.exportConfig().dateTo;
+        this.initialDatapointDetails = this.exportConfig().datapointDetails;
         if (!this.isFullTypeOfExport) {
-            this.initialAggregation = this.exportConfig.aggregation;
+            this.initialAggregation = this.exportConfig().aggregation;
         }
     }
     loadInitialChangeableConfig() {
-        this.exportConfig.dateFrom = this.initialDateFrom;
-        this.exportConfig.dateTo = this.initialDateTo;
-        this.exportConfig.datapointDetails = this.initialDatapointDetails;
+        this.exportConfig().dateFrom = this.initialDateFrom;
+        this.exportConfig().dateTo = this.initialDateTo;
+        this.exportConfig().datapointDetails = this.initialDatapointDetails;
         if (!this.isFullTypeOfExport) {
-            this.exportConfig.aggregation = this.initialAggregation;
+            this.exportConfig().aggregation = this.initialAggregation;
         }
     }
     async loadExportData() {
@@ -1540,7 +1744,25 @@ class DatapointsExportSelectorFileExporterComponent {
         }
         this.isPreviewLoading = true;
         this.onDownloadButtonStateChange.emit(false);
-        this.dataToExport = await this.dataFetchingService.fetchAndPrepareDataToExport(this.exportConfig, this.isFullTypeOfExport);
+        if (this.isListTypeOfExport) {
+            await this.loadListExportData();
+        }
+        else {
+            await this.loadTableExportData();
+        }
+    }
+    async loadListExportData() {
+        const listData = await this.dataFetchingService.fetchAndPrepareListExportData(this.exportConfig());
+        this.hasFetchedDataAnyValuesToExport = listData.length > 0;
+        if (this.hasFetchedDataAnyValuesToExport) {
+            this.prepareListPreview(listData);
+        }
+        else {
+            this.isPreviewLoading = false;
+        }
+    }
+    async loadTableExportData() {
+        this.dataToExport = await this.dataFetchingService.fetchAndPrepareDataToExport(this.exportConfig(), this.isFullTypeOfExport);
         this.determineShowingPreviewOrEmptyState();
     }
     updateDownloadButtonState() {
@@ -1550,6 +1772,9 @@ class DatapointsExportSelectorFileExporterComponent {
             !this.hasNoExportableData;
         this.onDownloadButtonStateChange.emit(canEnableDownloadButton);
     }
+    emitPreviewAvailability() {
+        this.previewAvailabilityChange.emit(this.isFullTypeOfExport || this.isListTypeOfExport);
+    }
     resetFullExportRelatedProperties() {
         this.hasNoExportableData = false;
         this.datapointsExceedingBrowserDownloadLimit = [];
@@ -1615,31 +1840,26 @@ class DatapointsExportSelectorFileExporterComponent {
             this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_DATAPOINTS_EXPORT_SELECTOR.EVENTS.EXPORT_SELECTOR, {
                 ...commonEventData,
                 selectedExportType: PRODUCT_EXPERIENCE_DATAPOINTS_EXPORT_SELECTOR.EXPORT_CONFIG.COMPACT_EXPORT_TYPE,
-                selectedAggregation: this.exportConfig.aggregation ?? AGGREGATION_VALUES.none
+                selectedAggregation: this.exportConfig().aggregation ?? AGGREGATION_VALUES.none
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatapointsExportSelectorFileExporterComponent, deps: [{ token: i1.AggregationService }, { token: DataProcessingService }, { token: DatapointsExportSelectorFileExporterService }, { token: DataFetchingService }, { token: i3$2.FormBuilder }, { token: FILE_GENERATORS }, { token: i1.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: DatapointsExportSelectorFileExporterComponent, isStandalone: true, selector: "c8y-datapoints-export-selector-file-exporter", inputs: { exportConfig: "exportConfig" }, outputs: { onDownloadButtonStateChange: "onDownloadButtonStateChange" }, ngImport: i0, template: "<div class=\"p-b-16\">\n  <ng-container *ngIf=\"hasPermissionToReadAnyMeasurements; else hasNoRoleToReadAnyMeasurements\">\n    <div class=\"p-16 text-center separator-bottom sticky-top bg-component\">\n      <p class=\"text-medium text-16\">\n        {{ 'Configure export' | translate }}\n      </p>\n    </div>\n    <div\n      class=\"p-t-24 p-r-16 p-l-16 gap-8 p-b-16 flex-wrap\"\n      [ngClass]=\"{ 'separator-bottom': isFullTypeOfExport }\"\n    >\n      <div class=\"row\">\n        <div class=\"col-md-4\">\n          <c8y-datapoints-export-selector-time-range\n            *ngIf=\"this.hasPermissionToReadAnyMeasurements\"\n            [formGroup]=\"formGroup\"\n            (onDateFromChange)=\"onDateFromChange($event)\"\n            (onDateToChange)=\"onDateToChange($event)\"\n          ></c8y-datapoints-export-selector-time-range>\n        </div>\n        <div class=\"col-md-4\">\n          <c8y-datapoints-export-selector-data-scope\n            *ngIf=\"this.hasPermissionToReadAnyMeasurements\"\n            [disabledAggregationOptions]=\"disabledAggregationOptions\"\n            [formGroup]=\"formGroup\"\n            (onAggregationChange)=\"onAggregationChange($event)\"\n            (onExportTypeChange)=\"onExportTypeChange($event)\"\n          ></c8y-datapoints-export-selector-data-scope>\n        </div>\n        <div class=\"col-md-4\">\n          <c8y-datapoints-export-selector-file-types\n            *ngIf=\"this.hasPermissionToReadAnyMeasurements\"\n            [dynamicFilesTypeMetadata]=\"dynamicFilesTypeMetadata\"\n            [formGroup]=\"formGroup\"\n          ></c8y-datapoints-export-selector-file-types>\n        </div>\n      </div>\n    </div>\n    <ng-container\n      *ngIf=\"!isFullTypeOfExport && !hasFetchedDataAnyValuesToExport && !isPreviewLoading\"\n    >\n      <div class=\"p-t-24 p-r-16 p-l-16 p-b-16 d-flex\">\n        <div\n          class=\"alert alert-warning center-block\"\n          role=\"alert\"\n          data-cy=\"file-exporter--no-data-available\"\n          translate\n        >\n          No data available.\n        </div>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"datapointsExceedingBrowserDownloadLimit.length > 0\">\n      <div class=\"p-t-24 p-r-16 p-l-16 p-b-16 separator-bottom d-flex\">\n        <div\n          [class]=\"\n            hasNoExportableData\n              ? 'alert alert-warning center-block'\n              : 'alert alert-info center-block'\n          \"\n          role=\"alert\"\n          [attr.data-cy]=\"\n            hasNoExportableData\n              ? 'file-exporter--over-one-million-message'\n              : 'file-exporter--over-50k-message'\n          \"\n          [innerHTML]=\"limitExceededMessage\"\n        ></div>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"isFullTypeOfExport\">\n      <c8y-datapoints-export-selector-preview\n        *ngIf=\"this.hasPermissionToReadAnyMeasurements\"\n        [hasFetchedDataAnyValuesToExport]=\"hasFetchedDataAnyValuesToExport\"\n        [isPreviewLoading]=\"isPreviewLoading\"\n        [previewTableData]=\"previewTableData\"\n      ></c8y-datapoints-export-selector-preview>\n    </ng-container>\n  </ng-container>\n  <ng-template #hasNoRoleToReadAnyMeasurements>\n    <div class=\"p-t-24 p-r-16 p-l-16 p-b-16 d-flex\">\n      <div\n        class=\"alert alert-info center-block\"\n        role=\"alert\"\n        translate\n      >\n        <p>To export data, you must meet at least one of these criteria:</p>\n        <ul>\n          <li>\n            Have\n            <b>READ permission for \"Measurements\" permission type</b>\n            (either as a global role or for the specific source)\n          </li>\n          <li>\n            Be the\n            <b>owner of the source</b>\n            you want to export data from\n          </li>\n        </ul>\n        <p>Don't meet these requirements? Contact your system administrator for assistance.</p>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DataPointsExportSelectorDataScopeComponent, selector: "c8y-datapoints-export-selector-data-scope", inputs: ["disabledAggregationOptions", "formGroup"], outputs: ["onAggregationChange", "onExportTypeChange"] }, { kind: "component", type: DataPointsExportSelectorFileTypesComponent, selector: "c8y-datapoints-export-selector-file-types", inputs: ["dynamicFilesTypeMetadata", "formGroup"] }, { kind: "component", type: DataPointsExportSelectorPreviewComponent, selector: "c8y-datapoints-export-selector-preview", inputs: ["hasFetchedDataAnyValuesToExport", "isPreviewLoading", "previewTableData"] }, { kind: "component", type: DataPointsExportSelectorTimeRangeComponent, selector: "c8y-datapoints-export-selector-time-range", inputs: ["formGroup"], outputs: ["onDateFromChange", "onDateToChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatapointsExportSelectorFileExporterComponent, deps: [{ token: i1.AggregationService }, { token: i0.ChangeDetectorRef }, { token: DataProcessingService }, { token: DatapointsExportSelectorFileExporterService }, { token: DataFetchingService }, { token: i2$1.FormBuilder }, { token: FILE_GENERATORS }, { token: i1.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DatapointsExportSelectorFileExporterComponent, isStandalone: true, selector: "c8y-datapoints-export-selector-file-exporter", inputs: { exportConfig: { classPropertyName: "exportConfig", publicName: "exportConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onDownloadButtonStateChange: "onDownloadButtonStateChange", previewAvailabilityChange: "previewAvailabilityChange", previewLoadingChange: "previewLoadingChange" }, ngImport: i0, template: "<div class=\"p-b-16\">\n  @if (isCheckingPermissions) {\n    <div class=\"p-t-24 p-r-16 p-l-16 p-b-16 d-flex j-c-center\">\n      <c8y-loading></c8y-loading>\n    </div>\n  } @else if (hasPermissionToReadAnyMeasurements) {\n    <div class=\"p-16 text-center separator-bottom sticky-top bg-component\">\n      <p class=\"text-medium text-16\">\n        {{ 'Configure export' | translate }}\n      </p>\n    </div>\n    <div\n      class=\"p-r-24 p-l-24 gap-8 p-b-16\"\n      [class.separator-bottom]=\"isFullTypeOfExport\"\n    >\n      <c8y-datapoints-export-selector-time-range\n        [formGroup]=\"formGroup\"\n        (onDateFromChange)=\"onDateFromChange($event)\"\n        (onDateToChange)=\"onDateToChange($event)\"\n      ></c8y-datapoints-export-selector-time-range>\n      @if (isDataScopeVisible) {\n        <c8y-datapoints-export-selector-data-scope\n          [disabledAggregationOptions]=\"disabledAggregationOptions\"\n          [formGroup]=\"formGroup\"\n          (onAggregationChange)=\"onAggregationChange($event)\"\n          (onExportTypeChange)=\"onExportTypeChange($event)\"\n        ></c8y-datapoints-export-selector-data-scope>\n      }\n      <c8y-datapoints-export-selector-file-types\n        [dynamicFilesTypeMetadata]=\"dynamicFilesTypeMetadata\"\n        [formGroup]=\"formGroup\"\n      ></c8y-datapoints-export-selector-file-types>\n    </div>\n    @if (\n      !isFullTypeOfExport &&\n      !hasFetchedDataAnyValuesToExport &&\n      !isPreviewLoading &&\n      !isListTypeOfExport\n    ) {\n      <div class=\"p-t-24 p-r-16 p-l-16 p-b-16 d-flex\">\n        <div\n          class=\"alert alert-warning center-block\"\n          role=\"alert\"\n          data-cy=\"file-exporter--no-data-available\"\n          translate\n        >\n          No data available.\n        </div>\n      </div>\n    }\n    @if (datapointsExceedingBrowserDownloadLimit.length > 0) {\n      <div class=\"p-t-24 p-r-16 p-l-16 p-b-16 separator-bottom d-flex\">\n        <div\n          [class]=\"\n            hasNoExportableData\n              ? 'alert alert-warning center-block'\n              : 'alert alert-info center-block'\n          \"\n          role=\"alert\"\n          [attr.data-cy]=\"\n            hasNoExportableData\n              ? 'file-exporter--over-one-million-message'\n              : 'file-exporter--over-50k-message'\n          \"\n          [innerHTML]=\"limitExceededMessage\"\n        ></div>\n      </div>\n    }\n  } @else {\n    <div class=\"p-t-24 p-r-16 p-l-16 p-b-16 d-flex\">\n      <div\n        class=\"alert alert-info center-block\"\n        role=\"alert\"\n        translate\n      >\n        <p>To export data, you must meet at least one of these criteria:</p>\n        <ul>\n          <li>\n            Have\n            <b>READ permission for \"Measurements\" permission type</b>\n            (either as a global role or for the specific source)\n          </li>\n          <li>\n            Be the\n            <b>owner of the source</b>\n            you want to export data from\n          </li>\n        </ul>\n        <p>Don't meet these requirements? Contact your system administrator for assistance.</p>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i1.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DataPointsExportSelectorDataScopeComponent, selector: "c8y-datapoints-export-selector-data-scope", inputs: ["disabledAggregationOptions", "formGroup"], outputs: ["onAggregationChange", "onExportTypeChange"] }, { kind: "component", type: DataPointsExportSelectorFileTypesComponent, selector: "c8y-datapoints-export-selector-file-types", inputs: ["dynamicFilesTypeMetadata", "formGroup"] }, { kind: "component", type: DataPointsExportSelectorTimeRangeComponent, selector: "c8y-datapoints-export-selector-time-range", inputs: ["formGroup"], outputs: ["onDateFromChange", "onDateToChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatapointsExportSelectorFileExporterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-datapoints-export-selector-file-exporter', standalone: true, imports: [
+            args: [{ selector: 'c8y-datapoints-export-selector-file-exporter', imports: [
                         CoreModule,
                         DataPointsExportSelectorDataScopeComponent,
                         DataPointsExportSelectorFileTypesComponent,
-                        DataPointsExportSelectorPreviewComponent,
                         DataPointsExportSelectorTimeRangeComponent,
                         ReactiveFormsModule
-                    ], template: "<div class=\"p-b-16\">\n  <ng-container *ngIf=\"hasPermissionToReadAnyMeasurements; else hasNoRoleToReadAnyMeasurements\">\n    <div class=\"p-16 text-center separator-bottom sticky-top bg-component\">\n      <p class=\"text-medium text-16\">\n        {{ 'Configure export' | translate }}\n      </p>\n    </div>\n    <div\n      class=\"p-t-24 p-r-16 p-l-16 gap-8 p-b-16 flex-wrap\"\n      [ngClass]=\"{ 'separator-bottom': isFullTypeOfExport }\"\n    >\n      <div class=\"row\">\n        <div class=\"col-md-4\">\n          <c8y-datapoints-export-selector-time-range\n            *ngIf=\"this.hasPermissionToReadAnyMeasurements\"\n            [formGroup]=\"formGroup\"\n            (onDateFromChange)=\"onDateFromChange($event)\"\n            (onDateToChange)=\"onDateToChange($event)\"\n          ></c8y-datapoints-export-selector-time-range>\n        </div>\n        <div class=\"col-md-4\">\n          <c8y-datapoints-export-selector-data-scope\n            *ngIf=\"this.hasPermissionToReadAnyMeasurements\"\n            [disabledAggregationOptions]=\"disabledAggregationOptions\"\n            [formGroup]=\"formGroup\"\n            (onAggregationChange)=\"onAggregationChange($event)\"\n            (onExportTypeChange)=\"onExportTypeChange($event)\"\n          ></c8y-datapoints-export-selector-data-scope>\n        </div>\n        <div class=\"col-md-4\">\n          <c8y-datapoints-export-selector-file-types\n            *ngIf=\"this.hasPermissionToReadAnyMeasurements\"\n            [dynamicFilesTypeMetadata]=\"dynamicFilesTypeMetadata\"\n            [formGroup]=\"formGroup\"\n          ></c8y-datapoints-export-selector-file-types>\n        </div>\n      </div>\n    </div>\n    <ng-container\n      *ngIf=\"!isFullTypeOfExport && !hasFetchedDataAnyValuesToExport && !isPreviewLoading\"\n    >\n      <div class=\"p-t-24 p-r-16 p-l-16 p-b-16 d-flex\">\n        <div\n          class=\"alert alert-warning center-block\"\n          role=\"alert\"\n          data-cy=\"file-exporter--no-data-available\"\n          translate\n        >\n          No data available.\n        </div>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"datapointsExceedingBrowserDownloadLimit.length > 0\">\n      <div class=\"p-t-24 p-r-16 p-l-16 p-b-16 separator-bottom d-flex\">\n        <div\n          [class]=\"\n            hasNoExportableData\n              ? 'alert alert-warning center-block'\n              : 'alert alert-info center-block'\n          \"\n          role=\"alert\"\n          [attr.data-cy]=\"\n            hasNoExportableData\n              ? 'file-exporter--over-one-million-message'\n              : 'file-exporter--over-50k-message'\n          \"\n          [innerHTML]=\"limitExceededMessage\"\n        ></div>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"isFullTypeOfExport\">\n      <c8y-datapoints-export-selector-preview\n        *ngIf=\"this.hasPermissionToReadAnyMeasurements\"\n        [hasFetchedDataAnyValuesToExport]=\"hasFetchedDataAnyValuesToExport\"\n        [isPreviewLoading]=\"isPreviewLoading\"\n        [previewTableData]=\"previewTableData\"\n      ></c8y-datapoints-export-selector-preview>\n    </ng-container>\n  </ng-container>\n  <ng-template #hasNoRoleToReadAnyMeasurements>\n    <div class=\"p-t-24 p-r-16 p-l-16 p-b-16 d-flex\">\n      <div\n        class=\"alert alert-info center-block\"\n        role=\"alert\"\n        translate\n      >\n        <p>To export data, you must meet at least one of these criteria:</p>\n        <ul>\n          <li>\n            Have\n            <b>READ permission for \"Measurements\" permission type</b>\n            (either as a global role or for the specific source)\n          </li>\n          <li>\n            Be the\n            <b>owner of the source</b>\n            you want to export data from\n          </li>\n        </ul>\n        <p>Don't meet these requirements? Contact your system administrator for assistance.</p>\n      </div>\n    </div>\n  </ng-template>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.AggregationService }, { type: DataProcessingService }, { type: DatapointsExportSelectorFileExporterService }, { type: DataFetchingService }, { type: i3$2.FormBuilder }, { type: undefined, decorators: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"p-b-16\">\n  @if (isCheckingPermissions) {\n    <div class=\"p-t-24 p-r-16 p-l-16 p-b-16 d-flex j-c-center\">\n      <c8y-loading></c8y-loading>\n    </div>\n  } @else if (hasPermissionToReadAnyMeasurements) {\n    <div class=\"p-16 text-center separator-bottom sticky-top bg-component\">\n      <p class=\"text-medium text-16\">\n        {{ 'Configure export' | translate }}\n      </p>\n    </div>\n    <div\n      class=\"p-r-24 p-l-24 gap-8 p-b-16\"\n      [class.separator-bottom]=\"isFullTypeOfExport\"\n    >\n      <c8y-datapoints-export-selector-time-range\n        [formGroup]=\"formGroup\"\n        (onDateFromChange)=\"onDateFromChange($event)\"\n        (onDateToChange)=\"onDateToChange($event)\"\n      ></c8y-datapoints-export-selector-time-range>\n      @if (isDataScopeVisible) {\n        <c8y-datapoints-export-selector-data-scope\n          [disabledAggregationOptions]=\"disabledAggregationOptions\"\n          [formGroup]=\"formGroup\"\n          (onAggregationChange)=\"onAggregationChange($event)\"\n          (onExportTypeChange)=\"onExportTypeChange($event)\"\n        ></c8y-datapoints-export-selector-data-scope>\n      }\n      <c8y-datapoints-export-selector-file-types\n        [dynamicFilesTypeMetadata]=\"dynamicFilesTypeMetadata\"\n        [formGroup]=\"formGroup\"\n      ></c8y-datapoints-export-selector-file-types>\n    </div>\n    @if (\n      !isFullTypeOfExport &&\n      !hasFetchedDataAnyValuesToExport &&\n      !isPreviewLoading &&\n      !isListTypeOfExport\n    ) {\n      <div class=\"p-t-24 p-r-16 p-l-16 p-b-16 d-flex\">\n        <div\n          class=\"alert alert-warning center-block\"\n          role=\"alert\"\n          data-cy=\"file-exporter--no-data-available\"\n          translate\n        >\n          No data available.\n        </div>\n      </div>\n    }\n    @if (datapointsExceedingBrowserDownloadLimit.length > 0) {\n      <div class=\"p-t-24 p-r-16 p-l-16 p-b-16 separator-bottom d-flex\">\n        <div\n          [class]=\"\n            hasNoExportableData\n              ? 'alert alert-warning center-block'\n              : 'alert alert-info center-block'\n          \"\n          role=\"alert\"\n          [attr.data-cy]=\"\n            hasNoExportableData\n              ? 'file-exporter--over-one-million-message'\n              : 'file-exporter--over-50k-message'\n          \"\n          [innerHTML]=\"limitExceededMessage\"\n        ></div>\n      </div>\n    }\n  } @else {\n    <div class=\"p-t-24 p-r-16 p-l-16 p-b-16 d-flex\">\n      <div\n        class=\"alert alert-info center-block\"\n        role=\"alert\"\n        translate\n      >\n        <p>To export data, you must meet at least one of these criteria:</p>\n        <ul>\n          <li>\n            Have\n            <b>READ permission for \"Measurements\" permission type</b>\n            (either as a global role or for the specific source)\n          </li>\n          <li>\n            Be the\n            <b>owner of the source</b>\n            you want to export data from\n          </li>\n        </ul>\n        <p>Don't meet these requirements? Contact your system administrator for assistance.</p>\n      </div>\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.AggregationService }, { type: i0.ChangeDetectorRef }, { type: DataProcessingService }, { type: DatapointsExportSelectorFileExporterService }, { type: DataFetchingService }, { type: i2$1.FormBuilder }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [FILE_GENERATORS]
-                }] }, { type: i1.GainsightService }], propDecorators: { exportConfig: [{
-                type: Input
-            }], onDownloadButtonStateChange: [{
-                type: Output
-            }] } });
+                }] }, { type: i1.GainsightService }], propDecorators: { exportConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportConfig", required: true }] }], onDownloadButtonStateChange: [{ type: i0.Output, args: ["onDownloadButtonStateChange"] }], previewAvailabilityChange: [{ type: i0.Output, args: ["previewAvailabilityChange"] }], previewLoadingChange: [{ type: i0.Output, args: ["previewLoadingChange"] }] } });
 
 class DataProcessingService {
     constructor(fileGenerators, utils) {
@@ -1692,6 +1912,17 @@ class DataProcessingService {
         const exportData = this.processDataToExport(data);
         return exportData.slice(0, MEASUREMENTS_PREVIEW_ITEMS_LIMIT);
     }
+    /**
+     * Transforms list export data into a structured format for preview.
+     *
+     * @param listData - Array of list datapoints with snapshot values
+     * @param columns - Column configuration for ordering
+     * @returns Provides an array of up to 5 ExportData elements for preview
+     */
+    transformListDataToPreview(listData, columns) {
+        const exportData = this.processListDataToExport(listData, columns);
+        return exportData.slice(0, MEASUREMENTS_PREVIEW_ITEMS_LIMIT);
+    }
     /**
      * Processes a single dataToExport and transforms it into an array of ExportData.
      *
@@ -1806,6 +2037,77 @@ class DataProcessingService {
     createFileName(source, fragmentSeries, fileExtension) {
         return `${source}_${fragmentSeries}.${fileExtension}`;
     }
+    /**
+     * Generates list export blob (CSV or Excel) for snapshot data
+     * @param fileType - Type of file (csv or excel)
+     * @param listData - Array of datapoints with current values
+     * @param columns - Column configuration
+     * @param dateRange - Date range for filename generation
+     * @returns Promise with Blob containing the exported file
+     */
+    async generateListExport(fileType, listData, columns, dateRange) {
+        const fileTypeConfig = this.fileTypesConfigs[fileType];
+        let blobContent;
+        if (fileType === 'csv') {
+            const module = await Promise.resolve().then(function () { return csvGenerator; });
+            blobContent = await module.CSVGeneratorAdapter.generateList(listData, columns);
+        }
+        else if (fileType === 'excel') {
+            const module = await Promise.resolve().then(function () { return excelGenerator; });
+            blobContent = await module.ExcelGeneratorAdapter.generateList(listData, columns);
+        }
+        else {
+            throw new Error(`Unsupported file type for list export: ${fileType}`);
+        }
+        const fileName = `${this.utils.getFormattedDateRange(dateRange.dateFrom, dateRange.dateTo)}.${fileTypeConfig.extension}`;
+        const blob = new Blob([blobContent], { type: fileTypeConfig.mimeType });
+        Object.defineProperty(blob, SERIES_DATA_MERGED_FILE_NAME, {
+            value: fileName,
+            writable: false,
+            enumerable: false,
+            configurable: true
+        });
+        return blob;
+    }
+    /**
+     * Processes list datapoints and transforms them into an array of ExportData.
+     *
+     * @param listData - Array of list datapoints with snapshot values
+     * @param columns - Column configuration for ordering
+     * @returns An array of ExportData representing the processed list datapoints
+     */
+    processListDataToExport(listData, columns) {
+        const sortedColumns = columns.sort((a, b) => a.order - b.order);
+        const columnMapping = {
+            kpi: 'label',
+            target: 'target',
+            current: 'current',
+            diff: 'diff',
+            diffPercentage: 'diffPercent',
+            asset: 'deviceName'
+        };
+        return listData.map(datapoint => {
+            const values = sortedColumns.map(col => {
+                const propKey = columnMapping[col.id];
+                const value = datapoint[propKey];
+                if (value === null || value === undefined) {
+                    return '';
+                }
+                if (typeof value === 'number') {
+                    return value.toFixed(2);
+                }
+                return String(value);
+            });
+            return {
+                device_name: datapoint.deviceName || '',
+                source: datapoint.source,
+                fragment_series: values.join(' | '),
+                value: datapoint.current,
+                unit: datapoint.unit || null,
+                time: null
+            };
+        });
+    }
     /**
      * Generates a zip blob using the provided zip object.
      *
@@ -1841,17 +2143,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     args: [FILE_GENERATORS]
                 }] }, { type: UtilsService }] });
 
-class DatapointsExportSelectorModalComponent {
+class DataPointsExportSelectorPreviewComponent {
+    constructor() {
+        this.columns = input(...(ngDevMode ? [undefined, { debugName: "columns" }] : []));
+        this.hasFetchedDataAnyValuesToExport = input(...(ngDevMode ? [undefined, { debugName: "hasFetchedDataAnyValuesToExport" }] : []));
+        this.isPreviewLoading = input(...(ngDevMode ? [undefined, { debugName: "isPreviewLoading" }] : []));
+        this.previewTableData = input(...(ngDevMode ? [undefined, { debugName: "previewTableData" }] : []));
+        this.MEASUREMENTS_PREVIEW_ITEMS_LIMIT = MEASUREMENTS_PREVIEW_ITEMS_LIMIT;
+        this.isListPreview = computed(() => {
+            const cols = this.columns();
+            return !!cols && cols.length > 0;
+        }, ...(ngDevMode ? [{ debugName: "isListPreview" }] : []));
+        this.listHeaders = computed(() => {
+            if (!this.isListPreview()) {
+                return [];
+            }
+            return [...this.columns()].sort((a, b) => a.order - b.order).map(col => col.label);
+        }, ...(ngDevMode ? [{ debugName: "listHeaders" }] : []));
+        this.previewRows = computed(() => {
+            const data = this.previewTableData();
+            if (!data) {
+                return [];
+            }
+            return data.map(row => ({
+                ...row,
+                rowValues: row.fragment_series ? row.fragment_series.split(' | ') : []
+            }));
+        }, ...(ngDevMode ? [{ debugName: "previewRows" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DataPointsExportSelectorPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DataPointsExportSelectorPreviewComponent, isStandalone: true, selector: "c8y-datapoints-export-selector-preview", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, hasFetchedDataAnyValuesToExport: { classPropertyName: "hasFetchedDataAnyValuesToExport", publicName: "hasFetchedDataAnyValuesToExport", isSignal: true, isRequired: false, transformFunction: null }, isPreviewLoading: { classPropertyName: "isPreviewLoading", publicName: "isPreviewLoading", isSignal: true, isRequired: false, transformFunction: null }, previewTableData: { classPropertyName: "previewTableData", publicName: "previewTableData", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"p-t-16 p-l-16 p-r-16 m-b-0\">\n  <div class=\"d-flex a-i-center\">\n    <label\n      class=\"m-b-0 d-flex a-i-center gap-4\"\n      [title]=\"'Preview`of exported file`' | translate\"\n    >\n      {{ 'Preview`of exported file`' | translate }}\n      <button\n        class=\"btn-help\"\n        [attr.aria-label]=\"'Help' | translate\"\n        [popover]=\"isListPreview() ? popoverListPreviewTemplate : popoverTablePreviewTemplate\"\n        placement=\"right\"\n        triggers=\"focus\"\n        container=\"body\"\n        type=\"button\"\n        data-cy=\"preview--help\"\n        [adaptivePosition]=\"true\"\n      ></button>\n      <ng-template #popoverTablePreviewTemplate>\n        <p translate>The preview shows the structure of the raw file from a single source.</p>\n        <p translate>If no data is available, only the column headers are visible.</p>\n        <p>\n          {{ 'The preview is limited to' | translate }}\n          <b>{{ MEASUREMENTS_PREVIEW_ITEMS_LIMIT }}</b>\n          {{ 'records.' | translate }}\n        </p>\n      </ng-template>\n      <ng-template #popoverListPreviewTemplate>\n        <p translate>The preview shows the structure of the raw file from all sources.</p>\n        <p>\n          {{ 'The preview is limited to' | translate }}\n          <b>{{ MEASUREMENTS_PREVIEW_ITEMS_LIMIT }}</b>\n          {{ 'records.' | translate }}\n        </p>\n      </ng-template>\n    </label>\n  </div>\n  <div\n    class=\"table-responsive\"\n    style=\"min-height: 275px\"\n  >\n    @if (isListPreview()) {\n      <table class=\"table\">\n        <thead>\n          <tr>\n            @for (header of listHeaders(); track header) {\n              <th>{{ header | translate }}</th>\n            }\n          </tr>\n        </thead>\n        @if (hasFetchedDataAnyValuesToExport() || isPreviewLoading()) {\n          @if (!isPreviewLoading()) {\n            <tbody>\n              @for (row of previewRows(); track row.source) {\n                <tr>\n                  @for (value of row.rowValues; track $index) {\n                    <td>{{ value }}</td>\n                  }\n                </tr>\n              }\n            </tbody>\n          } @else {\n            <tbody>\n              <tr>\n                <td [attr.colspan]=\"listHeaders().length\">\n                  <c8y-loading></c8y-loading>\n                </td>\n              </tr>\n            </tbody>\n          }\n        } @else {\n          <tbody>\n            <tr>\n              <td [attr.colspan]=\"listHeaders().length\">\n                <div class=\"d-col a-i-center\">\n                  <c8y-ui-empty-state\n                    [icon]=\"'search'\"\n                    [title]=\"'No data available.' | translate\"\n                    [horizontal]=\"true\"\n                    data-cy=\"datapoints-table-list--empty-state\"\n                  ></c8y-ui-empty-state>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        }\n      </table>\n    } @else {\n      <table class=\"table\">\n        <thead>\n          <tr>\n            <th>{{ 'Time' | translate }}</th>\n            <th>{{ 'Source' | translate }}</th>\n            <th>{{ 'Device name' | translate }}</th>\n            <th>\n              {{ 'Fragment and series' | translate }}\n            </th>\n            <th>{{ 'Value' | translate }}</th>\n            <th>{{ 'Unit' | translate }}</th>\n          </tr>\n        </thead>\n        @if (hasFetchedDataAnyValuesToExport() || isPreviewLoading()) {\n          @if (!isPreviewLoading()) {\n            <tbody>\n              @for (row of previewTableData(); track row.source) {\n                <tr>\n                  <td>{{ row.time }}</td>\n                  <td>{{ row.source }}</td>\n                  <td>{{ row.device_name }}</td>\n                  <td>\n                    {{ row.fragment_series }}\n                  </td>\n                  <td>{{ row.value }}</td>\n                  <td>{{ row.unit }}</td>\n                </tr>\n              }\n            </tbody>\n          } @else {\n            <tbody>\n              <tr>\n                <td colspan=\"8\">\n                  <c8y-loading></c8y-loading>\n                </td>\n              </tr>\n            </tbody>\n          }\n        } @else {\n          <tbody>\n            <tr>\n              <td colspan=\"8\">\n                <div class=\"d-col a-i-center\">\n                  <c8y-ui-empty-state\n                    [icon]=\"'search'\"\n                    [title]=\"'No data available.' | translate\"\n                    [horizontal]=\"true\"\n                    data-cy=\"datapoints-table-list--empty-state\"\n                  ></c8y-ui-empty-state>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        }\n      </table>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i1.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i3$1.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DataPointsExportSelectorPreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-datapoints-export-selector-preview', imports: [A11yModule, CoreModule, PopoverModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"p-t-16 p-l-16 p-r-16 m-b-0\">\n  <div class=\"d-flex a-i-center\">\n    <label\n      class=\"m-b-0 d-flex a-i-center gap-4\"\n      [title]=\"'Preview`of exported file`' | translate\"\n    >\n      {{ 'Preview`of exported file`' | translate }}\n      <button\n        class=\"btn-help\"\n        [attr.aria-label]=\"'Help' | translate\"\n        [popover]=\"isListPreview() ? popoverListPreviewTemplate : popoverTablePreviewTemplate\"\n        placement=\"right\"\n        triggers=\"focus\"\n        container=\"body\"\n        type=\"button\"\n        data-cy=\"preview--help\"\n        [adaptivePosition]=\"true\"\n      ></button>\n      <ng-template #popoverTablePreviewTemplate>\n        <p translate>The preview shows the structure of the raw file from a single source.</p>\n        <p translate>If no data is available, only the column headers are visible.</p>\n        <p>\n          {{ 'The preview is limited to' | translate }}\n          <b>{{ MEASUREMENTS_PREVIEW_ITEMS_LIMIT }}</b>\n          {{ 'records.' | translate }}\n        </p>\n      </ng-template>\n      <ng-template #popoverListPreviewTemplate>\n        <p translate>The preview shows the structure of the raw file from all sources.</p>\n        <p>\n          {{ 'The preview is limited to' | translate }}\n          <b>{{ MEASUREMENTS_PREVIEW_ITEMS_LIMIT }}</b>\n          {{ 'records.' | translate }}\n        </p>\n      </ng-template>\n    </label>\n  </div>\n  <div\n    class=\"table-responsive\"\n    style=\"min-height: 275px\"\n  >\n    @if (isListPreview()) {\n      <table class=\"table\">\n        <thead>\n          <tr>\n            @for (header of listHeaders(); track header) {\n              <th>{{ header | translate }}</th>\n            }\n          </tr>\n        </thead>\n        @if (hasFetchedDataAnyValuesToExport() || isPreviewLoading()) {\n          @if (!isPreviewLoading()) {\n            <tbody>\n              @for (row of previewRows(); track row.source) {\n                <tr>\n                  @for (value of row.rowValues; track $index) {\n                    <td>{{ value }}</td>\n                  }\n                </tr>\n              }\n            </tbody>\n          } @else {\n            <tbody>\n              <tr>\n                <td [attr.colspan]=\"listHeaders().length\">\n                  <c8y-loading></c8y-loading>\n                </td>\n              </tr>\n            </tbody>\n          }\n        } @else {\n          <tbody>\n            <tr>\n              <td [attr.colspan]=\"listHeaders().length\">\n                <div class=\"d-col a-i-center\">\n                  <c8y-ui-empty-state\n                    [icon]=\"'search'\"\n                    [title]=\"'No data available.' | translate\"\n                    [horizontal]=\"true\"\n                    data-cy=\"datapoints-table-list--empty-state\"\n                  ></c8y-ui-empty-state>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        }\n      </table>\n    } @else {\n      <table class=\"table\">\n        <thead>\n          <tr>\n            <th>{{ 'Time' | translate }}</th>\n            <th>{{ 'Source' | translate }}</th>\n            <th>{{ 'Device name' | translate }}</th>\n            <th>\n              {{ 'Fragment and series' | translate }}\n            </th>\n            <th>{{ 'Value' | translate }}</th>\n            <th>{{ 'Unit' | translate }}</th>\n          </tr>\n        </thead>\n        @if (hasFetchedDataAnyValuesToExport() || isPreviewLoading()) {\n          @if (!isPreviewLoading()) {\n            <tbody>\n              @for (row of previewTableData(); track row.source) {\n                <tr>\n                  <td>{{ row.time }}</td>\n                  <td>{{ row.source }}</td>\n                  <td>{{ row.device_name }}</td>\n                  <td>\n                    {{ row.fragment_series }}\n                  </td>\n                  <td>{{ row.value }}</td>\n                  <td>{{ row.unit }}</td>\n                </tr>\n              }\n            </tbody>\n          } @else {\n            <tbody>\n              <tr>\n                <td colspan=\"8\">\n                  <c8y-loading></c8y-loading>\n                </td>\n              </tr>\n            </tbody>\n          }\n        } @else {\n          <tbody>\n            <tr>\n              <td colspan=\"8\">\n                <div class=\"d-col a-i-center\">\n                  <c8y-ui-empty-state\n                    [icon]=\"'search'\"\n                    [title]=\"'No data available.' | translate\"\n                    [horizontal]=\"true\"\n                    data-cy=\"datapoints-table-list--empty-state\"\n                  ></c8y-ui-empty-state>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        }\n      </table>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], hasFetchedDataAnyValuesToExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasFetchedDataAnyValuesToExport", required: false }] }], isPreviewLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPreviewLoading", required: false }] }], previewTableData: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewTableData", required: false }] }] } });
+
+class DatapointsExportSelectorPreviewModalComponent {
     constructor(bsModalRef) {
         this.bsModalRef = bsModalRef;
+        this.labels = { cancel: gettext('Close') };
+    }
+    close() {
+        this.bsModalRef.hide();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatapointsExportSelectorPreviewModalComponent, deps: [{ token: i1$1.BsModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: DatapointsExportSelectorPreviewModalComponent, isStandalone: true, selector: "c8y-datapoints-export-selector-preview-modal", host: { listeners: { "document:keydown.escape": "close()" } }, ngImport: i0, template: `
+    <c8y-modal
+      [title]="'Export preview' | translate"
+      [labels]="labels"
+      [headerClasses]="'dialog-header'"
+      (onDismiss)="close()"
+    >
+      <c8y-datapoints-export-selector-preview
+        [hasFetchedDataAnyValuesToExport]="hasFetchedDataAnyValuesToExport"
+        [isPreviewLoading]="isPreviewLoading"
+        [previewTableData]="previewTableData"
+        [columns]="columns"
+      ></c8y-datapoints-export-selector-preview>
+    </c8y-modal>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "component", type: i1.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: DataPointsExportSelectorPreviewComponent, selector: "c8y-datapoints-export-selector-preview", inputs: ["columns", "hasFetchedDataAnyValuesToExport", "isPreviewLoading", "previewTableData"] }, { kind: "ngmodule", type: ModalModule }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatapointsExportSelectorPreviewModalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'c8y-datapoints-export-selector-preview-modal',
+                    template: `
+    <c8y-modal
+      [title]="'Export preview' | translate"
+      [labels]="labels"
+      [headerClasses]="'dialog-header'"
+      (onDismiss)="close()"
+    >
+      <c8y-datapoints-export-selector-preview
+        [hasFetchedDataAnyValuesToExport]="hasFetchedDataAnyValuesToExport"
+        [isPreviewLoading]="isPreviewLoading"
+        [previewTableData]="previewTableData"
+        [columns]="columns"
+      ></c8y-datapoints-export-selector-preview>
+    </c8y-modal>
+  `,
+                    imports: [CoreModule, DataPointsExportSelectorPreviewComponent, ModalModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '(document:keydown.escape)': 'close()'
+                    }
+                }]
+        }], ctorParameters: () => [{ type: i1$1.BsModalRef }] });
+
+class DatapointsExportSelectorModalComponent {
+    constructor(bsModalRef, bsModalService) {
+        this.bsModalRef = bsModalRef;
+        this.bsModalService = bsModalService;
+        this.fileExporter = viewChild(DatapointsExportSelectorFileExporterComponent, ...(ngDevMode ? [{ debugName: "fileExporter" }] : []));
         this.isDownloadEnabled = false;
+        this.isPreviewAvailable = false;
+        this.isPreviewLoading = true;
         this.labels = { ok: gettext('Download'), cancel: gettext('Cancel') };
         this.result = new Promise(resolve => {
             this._close = resolve;
         });
+        this.isPreviewModalOpen = false;
     }
     handleKeyboardEvent(event) {
-        if (event.key === 'Escape') {
+        if (event.key === 'Escape' && !this.isPreviewModalOpen) {
             this.dismiss();
         }
     }
@@ -1860,46 +2255,89 @@ class DatapointsExportSelectorModalComponent {
         this.bsModalRef.hide();
     }
     async exportAndDownload() {
-        await this.datapointsExportSelectorFileExporterComponent.exportAndDownload();
+        await this.fileExporter().exportAndDownload();
         this.dismiss();
     }
+    openPreviewModal() {
+        const exporter = this.fileExporter();
+        const initialState = {
+            columns: this.exportConfig.columns,
+            hasFetchedDataAnyValuesToExport: exporter.hasFetchedDataAnyValuesToExport,
+            isPreviewLoading: exporter.isPreviewLoading,
+            previewTableData: exporter.previewTableData
+        };
+        const previewModalRef = this.bsModalService.show(DatapointsExportSelectorPreviewModalComponent, {
+            class: 'modal-lg',
+            ariaDescribedby: 'modal-body',
+            ariaLabelledBy: 'modal-title',
+            initialState
+        });
+        this.isPreviewModalOpen = true;
+        previewModalRef.onHidden.subscribe(() => {
+            this.isPreviewModalOpen = false;
+        });
+    }
     changeDownloadButtonState(isEnabled) {
         this.isDownloadEnabled = isEnabled;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatapointsExportSelectorModalComponent, deps: [{ token: i1$1.BsModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: DatapointsExportSelectorModalComponent, isStandalone: true, selector: "c8y-datapoints-export-selector-modal", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "datapointsExportSelectorFileExporterComponent", first: true, predicate: DatapointsExportSelectorFileExporterComponent, descendants: true }], ngImport: i0, template: "<c8y-modal\n  [title]=\"'Generate export' | translate\"\n  [labels]=\"labels\"\n  [disabled]=\"!isDownloadEnabled\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"dismiss()\"\n  (onClose)=\"exportAndDownload()\"\n>\n  <ng-container c8y-modal-title>\n    <span [c8yIcon]=\"'data-export'\"></span>\n  </ng-container>\n  <c8y-datapoints-export-selector-file-exporter\n    [exportConfig]=\"exportConfig\"\n    (onDownloadButtonStateChange)=\"changeDownloadButtonState($event)\"\n  ></c8y-datapoints-export-selector-file-exporter>\n</c8y-modal>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: DatapointsExportSelectorFileExporterComponent, selector: "c8y-datapoints-export-selector-file-exporter", inputs: ["exportConfig"], outputs: ["onDownloadButtonStateChange"] }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i1.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
+    changePreviewAvailability(isAvailable) {
+        this.isPreviewAvailable = isAvailable;
+    }
+    changePreviewLoading(isLoading) {
+        this.isPreviewLoading = isLoading;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatapointsExportSelectorModalComponent, deps: [{ token: i1$1.BsModalRef }, { token: i1$1.BsModalService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DatapointsExportSelectorModalComponent, isStandalone: true, selector: "c8y-datapoints-export-selector-modal", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "fileExporter", first: true, predicate: DatapointsExportSelectorFileExporterComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<c8y-modal\n  [title]=\"'Generate export' | translate\"\n  [labels]=\"labels\"\n  [disabled]=\"!isDownloadEnabled\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"dismiss()\"\n  (onClose)=\"exportAndDownload()\"\n>\n  <ng-container c8y-modal-title>\n    <span [c8yIcon]=\"'data-export'\"></span>\n  </ng-container>\n  <c8y-datapoints-export-selector-file-exporter\n    [exportConfig]=\"exportConfig\"\n    (onDownloadButtonStateChange)=\"changeDownloadButtonState($event)\"\n    (previewAvailabilityChange)=\"changePreviewAvailability($event)\"\n    (previewLoadingChange)=\"changePreviewLoading($event)\"\n  ></c8y-datapoints-export-selector-file-exporter>\n  @if (isPreviewAvailable) {\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Show preview' | translate }}\"\n      type=\"button\"\n      c8y-modal-footer\n      [disabled]=\"isPreviewLoading || !isDownloadEnabled\"\n      (click)=\"openPreviewModal()\"\n    >\n      <i [c8yIcon]=\"'eye'\"></i>\n      {{ 'Show preview' | translate }}\n    </button>\n  }\n</c8y-modal>\n", dependencies: [{ kind: "component", type: DatapointsExportSelectorFileExporterComponent, selector: "c8y-datapoints-export-selector-file-exporter", inputs: ["exportConfig"], outputs: ["onDownloadButtonStateChange", "previewAvailabilityChange", "previewLoadingChange"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i1.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatapointsExportSelectorModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-datapoints-export-selector-modal', standalone: true, imports: [CommonModule, DatapointsExportSelectorFileExporterComponent, ModalModule], template: "<c8y-modal\n  [title]=\"'Generate export' | translate\"\n  [labels]=\"labels\"\n  [disabled]=\"!isDownloadEnabled\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"dismiss()\"\n  (onClose)=\"exportAndDownload()\"\n>\n  <ng-container c8y-modal-title>\n    <span [c8yIcon]=\"'data-export'\"></span>\n  </ng-container>\n  <c8y-datapoints-export-selector-file-exporter\n    [exportConfig]=\"exportConfig\"\n    (onDownloadButtonStateChange)=\"changeDownloadButtonState($event)\"\n  ></c8y-datapoints-export-selector-file-exporter>\n</c8y-modal>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.BsModalRef }], propDecorators: { datapointsExportSelectorFileExporterComponent: [{
-                type: ViewChild,
-                args: [DatapointsExportSelectorFileExporterComponent, { static: false }]
-            }], handleKeyboardEvent: [{
-                type: HostListener,
-                args: ['document:keydown', ['$event']]
-            }] } });
+            args: [{ selector: 'c8y-datapoints-export-selector-modal', imports: [
+                        C8yTranslatePipe,
+                        DatapointsExportSelectorFileExporterComponent,
+                        IconDirective,
+                        ModalModule
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '(document:keydown)': 'handleKeyboardEvent($event)'
+                    }, template: "<c8y-modal\n  [title]=\"'Generate export' | translate\"\n  [labels]=\"labels\"\n  [disabled]=\"!isDownloadEnabled\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"dismiss()\"\n  (onClose)=\"exportAndDownload()\"\n>\n  <ng-container c8y-modal-title>\n    <span [c8yIcon]=\"'data-export'\"></span>\n  </ng-container>\n  <c8y-datapoints-export-selector-file-exporter\n    [exportConfig]=\"exportConfig\"\n    (onDownloadButtonStateChange)=\"changeDownloadButtonState($event)\"\n    (previewAvailabilityChange)=\"changePreviewAvailability($event)\"\n    (previewLoadingChange)=\"changePreviewLoading($event)\"\n  ></c8y-datapoints-export-selector-file-exporter>\n  @if (isPreviewAvailable) {\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Show preview' | translate }}\"\n      type=\"button\"\n      c8y-modal-footer\n      [disabled]=\"isPreviewLoading || !isDownloadEnabled\"\n      (click)=\"openPreviewModal()\"\n    >\n      <i [c8yIcon]=\"'eye'\"></i>\n      {{ 'Show preview' | translate }}\n    </button>\n  }\n</c8y-modal>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.BsModalRef }, { type: i1$1.BsModalService }], propDecorators: { fileExporter: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DatapointsExportSelectorFileExporterComponent), { isSignal: true }] }] } });
 
 class DatapointsExportSelectorComponent {
     constructor(bsModalService, gainsightService) {
         this.bsModalService = bsModalService;
         this.gainsightService = gainsightService;
-        this.displayMode = 'default';
-        this.isOpen = new EventEmitter();
+        this.displayMode = input('default', ...(ngDevMode ? [{ debugName: "displayMode" }] : []));
+        /**
+         * CSS class for the container element.
+         * Defaults to 'd-flex p-t-4 p-b-4' if not provided.
+         */
+        this.containerClass = input(...(ngDevMode ? [undefined, { debugName: "containerClass" }] : []));
+        /**
+         * Configuration for the export selector modal.
+         */
+        this.exportConfig = input(...(ngDevMode ? [undefined, { debugName: "exportConfig" }] : []));
+        this.isOpen = output();
         this.DEFAULT_CSS_STYLE = 'd-flex';
+        /**
+         * Check if export button should be disabled
+         * Disabled when: no config provided or no datapoints configured
+         */
+        this.isExportDisabled = computed(() => {
+            const config = this.exportConfig();
+            return !config?.datapointDetails || config.datapointDetails.length === 0;
+        }, ...(ngDevMode ? [{ debugName: "isExportDisabled" }] : []));
     }
     async openExportModal() {
         this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_DATAPOINTS_EXPORT_SELECTOR.EVENTS.EXPORT_SELECTOR, {
             action: PRODUCT_EXPERIENCE_DATAPOINTS_EXPORT_SELECTOR.ACTIONS.OPEN_MODAL,
             component: PRODUCT_EXPERIENCE_DATAPOINTS_EXPORT_SELECTOR.COMPONENTS.DATAPOINTS_EXPORT_SELECTOR
         });
-        const exportConfig = this.exportConfig;
+        const exportConfig = this.exportConfig();
         const initialState = {
             exportConfig
         };
         this.isOpen.emit(true);
         const modalRef = this.bsModalService.show(DatapointsExportSelectorModalComponent, {
-            class: 'modal-lg',
+            class: 'modal-sm',
             ariaDescribedby: 'modal-body',
             ariaLabelledBy: 'modal-title',
             initialState,
@@ -1909,20 +2347,12 @@ class DatapointsExportSelectorComponent {
         this.isOpen.emit(await modalRef.result);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatapointsExportSelectorComponent, deps: [{ token: i1$1.BsModalService }, { token: i1.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DatapointsExportSelectorComponent, isStandalone: true, selector: "c8y-datapoints-export-selector", inputs: { displayMode: "displayMode", containerClass: "containerClass", exportConfig: "exportConfig" }, outputs: { isOpen: "isOpen" }, ngImport: i0, template: "@switch (displayMode) {\n  @case ('default') {\n    @if (containerClass != 'd-contents') {\n      <div [ngClass]=\"containerClass || DEFAULT_CSS_STYLE\">\n        <button\n          class=\"btn btn-default btn-sm\"\n          [attr.aria-label]=\"'Generate export' | translate\"\n          tooltip=\"{{ 'Generate export' | translate }}\"\n          container=\"body\"\n          type=\"button\"\n          data-cy=\"datapoints-export-selector--open-export-button\"\n          (click)=\"openExportModal()\"\n          [adaptivePosition]=\"false\"\n          [disabled]=\"!exportConfig\"\n          [delay]=\"500\"\n        >\n          <i\n            class=\"icon-14\"\n            c8yIcon=\"data-export\"\n          ></i>\n        </button>\n      </div>\n    } @else {\n      <button\n        class=\"btn btn-link\"\n        type=\"button\"\n        (click)=\"openExportModal()\"\n        [disabled]=\"!exportConfig\"\n      >\n        <i c8yIcon=\"data-export\"></i>\n        {{ 'Generate export' | translate }}\n      </button>\n    }\n  }\n  @case ('icon-only') {\n    <button\n      class=\"btn btn-icon\"\n      [attr.aria-label]=\"'Generate export' | translate\"\n      tooltip=\"{{ 'Generate export' | translate }}\"\n      container=\"body\"\n      type=\"button\"\n      data-cy=\"datapoints-export-selector--open-export-button\"\n      (click)=\"openExportModal()\"\n      [adaptivePosition]=\"false\"\n      [disabled]=\"!exportConfig\"\n      [delay]=\"500\"\n    >\n      <i\n        class=\"icon-14\"\n        c8yIcon=\"data-export\"\n      ></i>\n    </button>\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DatapointsExportSelectorComponent, isStandalone: true, selector: "c8y-datapoints-export-selector", inputs: { displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: true, isRequired: false, transformFunction: null }, exportConfig: { classPropertyName: "exportConfig", publicName: "exportConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpen" }, ngImport: i0, template: "@switch (displayMode()) {\n  @case ('default') {\n    @if (containerClass() !== 'd-contents') {\n      <div [class]=\"containerClass() || DEFAULT_CSS_STYLE\">\n        <button\n          class=\"btn btn-default btn-sm\"\n          [attr.aria-label]=\"'Generate export' | translate\"\n          tooltip=\"{{ 'Generate export' | translate }}\"\n          container=\"body\"\n          type=\"button\"\n          data-cy=\"datapoints-export-selector--open-export-button\"\n          (click)=\"openExportModal()\"\n          [adaptivePosition]=\"false\"\n          [disabled]=\"isExportDisabled()\"\n          [delay]=\"500\"\n        >\n          <i\n            class=\"icon-14\"\n            c8yIcon=\"data-export\"\n          ></i>\n        </button>\n      </div>\n    } @else {\n      <button\n        class=\"btn btn-link\"\n        type=\"button\"\n        (click)=\"openExportModal()\"\n        [disabled]=\"isExportDisabled()\"\n      >\n        <i c8yIcon=\"data-export\"></i>\n        {{ 'Generate export' | translate }}\n      </button>\n    }\n  }\n  @case ('icon-only') {\n    <button\n      class=\"btn btn-icon\"\n      [attr.aria-label]=\"'Generate export' | translate\"\n      tooltip=\"{{ 'Generate export' | translate }}\"\n      container=\"body\"\n      type=\"button\"\n      data-cy=\"datapoints-export-selector--open-export-button\"\n      (click)=\"openExportModal()\"\n      [adaptivePosition]=\"false\"\n      [disabled]=\"!exportConfig()\"\n      [delay]=\"500\"\n    >\n      <i\n        class=\"icon-14\"\n        c8yIcon=\"data-export\"\n      ></i>\n    </button>\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3$3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatapointsExportSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-datapoints-export-selector', standalone: true, imports: [CommonModule, TooltipModule], template: "@switch (displayMode) {\n  @case ('default') {\n    @if (containerClass != 'd-contents') {\n      <div [ngClass]=\"containerClass || DEFAULT_CSS_STYLE\">\n        <button\n          class=\"btn btn-default btn-sm\"\n          [attr.aria-label]=\"'Generate export' | translate\"\n          tooltip=\"{{ 'Generate export' | translate }}\"\n          container=\"body\"\n          type=\"button\"\n          data-cy=\"datapoints-export-selector--open-export-button\"\n          (click)=\"openExportModal()\"\n          [adaptivePosition]=\"false\"\n          [disabled]=\"!exportConfig\"\n          [delay]=\"500\"\n        >\n          <i\n            class=\"icon-14\"\n            c8yIcon=\"data-export\"\n          ></i>\n        </button>\n      </div>\n    } @else {\n      <button\n        class=\"btn btn-link\"\n        type=\"button\"\n        (click)=\"openExportModal()\"\n        [disabled]=\"!exportConfig\"\n      >\n        <i c8yIcon=\"data-export\"></i>\n        {{ 'Generate export' | translate }}\n      </button>\n    }\n  }\n  @case ('icon-only') {\n    <button\n      class=\"btn btn-icon\"\n      [attr.aria-label]=\"'Generate export' | translate\"\n      tooltip=\"{{ 'Generate export' | translate }}\"\n      container=\"body\"\n      type=\"button\"\n      data-cy=\"datapoints-export-selector--open-export-button\"\n      (click)=\"openExportModal()\"\n      [adaptivePosition]=\"false\"\n      [disabled]=\"!exportConfig\"\n      [delay]=\"500\"\n    >\n      <i\n        class=\"icon-14\"\n        c8yIcon=\"data-export\"\n      ></i>\n    </button>\n  }\n}\n" }]
-        }], ctorParameters: () => [{ type: i1$1.BsModalService }, { type: i1.GainsightService }], propDecorators: { displayMode: [{
-                type: Input
-            }], containerClass: [{
-                type: Input
-            }], exportConfig: [{
-                type: Input
-            }], isOpen: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'c8y-datapoints-export-selector', imports: [CommonModule, TooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (displayMode()) {\n  @case ('default') {\n    @if (containerClass() !== 'd-contents') {\n      <div [class]=\"containerClass() || DEFAULT_CSS_STYLE\">\n        <button\n          class=\"btn btn-default btn-sm\"\n          [attr.aria-label]=\"'Generate export' | translate\"\n          tooltip=\"{{ 'Generate export' | translate }}\"\n          container=\"body\"\n          type=\"button\"\n          data-cy=\"datapoints-export-selector--open-export-button\"\n          (click)=\"openExportModal()\"\n          [adaptivePosition]=\"false\"\n          [disabled]=\"isExportDisabled()\"\n          [delay]=\"500\"\n        >\n          <i\n            class=\"icon-14\"\n            c8yIcon=\"data-export\"\n          ></i>\n        </button>\n      </div>\n    } @else {\n      <button\n        class=\"btn btn-link\"\n        type=\"button\"\n        (click)=\"openExportModal()\"\n        [disabled]=\"isExportDisabled()\"\n      >\n        <i c8yIcon=\"data-export\"></i>\n        {{ 'Generate export' | translate }}\n      </button>\n    }\n  }\n  @case ('icon-only') {\n    <button\n      class=\"btn btn-icon\"\n      [attr.aria-label]=\"'Generate export' | translate\"\n      tooltip=\"{{ 'Generate export' | translate }}\"\n      container=\"body\"\n      type=\"button\"\n      data-cy=\"datapoints-export-selector--open-export-button\"\n      (click)=\"openExportModal()\"\n      [adaptivePosition]=\"false\"\n      [disabled]=\"!exportConfig()\"\n      [delay]=\"500\"\n    >\n      <i\n        class=\"icon-14\"\n        c8yIcon=\"data-export\"\n      ></i>\n    </button>\n  }\n}\n" }]
+        }], ctorParameters: () => [{ type: i1$1.BsModalService }, { type: i1.GainsightService }], propDecorators: { displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], containerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerClass", required: false }] }], exportConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportConfig", required: false }] }], isOpen: [{ type: i0.Output, args: ["isOpen"] }] } });
 
 /**
  * Generated bundle index. Do not edit.