@c8y/ngx-components 1023.12.0 → 1023.14.8

package/fesm2022/c8y-ngx-components-datapoint-explorer-view.mjs

@@ -1,21 +1,22 @@
 import * as i0 from '@angular/core';
-import { Injectable, signal, EventEmitter, inject, Output, Input, Component, DestroyRef, ViewChild } from '@angular/core';
+import { Injectable, signal, inject, EventEmitter, Output, Input, Component, DestroyRef, ViewChild } from '@angular/core';
+import { compressToEncodedURIComponent, decompressFromEncodedURIComponent } from 'lz-string';
+import * as i2 from '@c8y/ngx-components';
+import { AlertService, MOChunkLoaderService, DatapointSyncService, ContextRouteService, ClipboardService, ViewContext, CoreModule, Permissions, GainsightService, CommonModule, FormsModule as FormsModule$1, WidgetTimeContextDateRangeService, IconDirective } from '@c8y/ngx-components';
+import { gettext } from '@c8y/ngx-components/gettext';
 import * as i5 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i3$1 from '@angular/forms';
+import * as i2$1 from '@angular/forms';
 import { FormBuilder, FormsModule, ReactiveFormsModule, FormControl, FormGroup, Validators } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
-import * as i2 from '@c8y/ngx-components';
-import { ContextRouteService, ClipboardService, ViewContext, CoreModule, AlertService, Permissions, GainsightService, WidgetTimeContextDateRangeService, CommonModule, FormsModule as FormsModule$1, IconDirective } from '@c8y/ngx-components';
-import * as i5$1 from '@c8y/ngx-components/alarm-event-selector';
+import { Router, ActivatedRoute, NavigationStart } from '@angular/router';
+import * as i4$1 from '@c8y/ngx-components/alarm-event-selector';
 import { AlarmEventSelectorModule } from '@c8y/ngx-components/alarm-event-selector';
 import * as i1 from '@c8y/ngx-components/context-dashboard';
 import { ContextDashboardService, ContextDashboardType, ContextDashboardModule } from '@c8y/ngx-components/context-dashboard';
-import * as i4$1 from '@c8y/ngx-components/datapoint-selector';
+import * as i3$1 from '@c8y/ngx-components/datapoint-selector';
 import { DatapointSelectorModule } from '@c8y/ngx-components/datapoint-selector';
 import { DatapointsExportSelectorComponent } from '@c8y/ngx-components/datapoints-export-selector';
-import { gettext } from '@c8y/ngx-components/gettext';
 import { CHART_VIEW_CONTEXT, PRODUCT_EXPERIENCE_DATA_EXPLORER_AND_GRAPH } from '@c8y/ngx-components/echart/models';
 import { ChartHelpersService, ChartsComponent, ChartEventsService, ChartAlarmsService } from '@c8y/ngx-components/echart';
 import * as i4 from 'ngx-bootstrap/dropdown';
@@ -27,9 +28,9 @@ import { INTERVALS } from '@c8y/ngx-components/interval-picker';
 import { TimeContextComponent } from '@c8y/ngx-components/time-context';
 import { BsModalService } from 'ngx-bootstrap/modal';
 import { firstValueFrom, merge, of, map as map$1 } from 'rxjs';
+import { InventoryService } from '@c8y/client';
 import * as i3 from '@angular/common';
 import { ReportDashboardModule, ReportDashboardService } from '@c8y/ngx-components/report-dashboard';
-import { InventoryService } from '@c8y/client';
 import { map } from 'rxjs/operators';
 
 const adjectives = [
@@ -114,11 +115,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 }]
         }] });
 
+const DATA_EXPLORER_BASE_CONFIG = {
+    datapoints: [],
+    alarmsEventsConfigs: [],
+    dateFrom: null,
+    dateTo: null,
+    interval: 'hours',
+    aggregation: null,
+    realtime: false,
+    isAutoRefreshEnabled: false,
+    refreshInterval: 0,
+    displayMarkedLine: true,
+    displayMarkedPoint: true,
+    mergeMatchingDatapoints: false,
+    forceMergeDatapoints: false,
+    showLabelAndUnit: true,
+    showSlider: true,
+    displayDateSelection: false,
+    yAxisSplitLines: false,
+    xAxisSplitLines: false,
+    numberOfDecimalPlaces: 2
+};
+const REVERSE_KEY_MAP = {
+    d: 'datapoints',
+    a: 'alarmsEventsConfigs',
+    f: 'fragment',
+    s: 'series',
+    t: '__target',
+    m: '__template',
+    l: 'label',
+    r: 'filters',
+    y: 'timelineType',
+    df: 'dateFrom',
+    dt: 'dateTo',
+    ac: '__active',
+    c: 'color',
+    i: 'id',
+    tp: 'type'
+};
+const KEY_MAP = Object.fromEntries(Object.entries(REVERSE_KEY_MAP).map(([shortKey, longKey]) => [longKey, shortKey]));
+
 class WorkspaceConfigurationService {
     constructor() {
         this.baseKey = 'c8y-configs';
         this.baseDefaultKey = 'c8y-default-config-id';
         this.contextIdSignal = signal(null, ...(ngDevMode ? [{ debugName: "contextIdSignal" }] : []));
+        this.alertService = inject(AlertService);
     }
     get LOCAL_STORAGE_KEY() {
         const id = this.contextIdSignal();
@@ -128,17 +170,159 @@ class WorkspaceConfigurationService {
         const id = this.contextIdSignal();
         return id !== null ? `${this.baseDefaultKey}-${id}` : this.baseDefaultKey;
     }
+    /**
+     * Generates a full datapoint explorer link from a bare config
+     */
+    generateExplorerLink(config, label, id) {
+        const diffed = this.removeDefaults(config);
+        const minified = this.minifyKeys(diffed);
+        const compressed = compressToEncodedURIComponent(JSON.stringify(minified));
+        const url = `/datapointexplorer-v2?id=${id}&label=${encodeURIComponent(label)}&config=${compressed}`;
+        return url;
+    }
+    /** Load workspace configs from localStorage  */
     getConfigurations() {
         const configurations = localStorage.getItem(this.LOCAL_STORAGE_KEY);
-        return configurations ? JSON.parse(configurations) : [];
+        if (configurations) {
+            const parsedConfigs = JSON.parse(configurations);
+            return parsedConfigs.map(workspaceConfig => {
+                if (typeof workspaceConfig.config === 'string') {
+                    return {
+                        ...workspaceConfig,
+                        config: this.decodeConfig(workspaceConfig.config)
+                    };
+                }
+                return workspaceConfig;
+            });
+        }
+        return [];
     }
     getDefaultConfigurationId() {
         return localStorage.getItem(this.LOCAL_STORAGE_DEFAULT_ID_KEY);
     }
+    /** Save workspace configs in localStorage */
     saveConfigurations(configurations, id) {
         localStorage.setItem(this.LOCAL_STORAGE_KEY, JSON.stringify(configurations));
         localStorage.setItem(this.LOCAL_STORAGE_DEFAULT_ID_KEY, id);
     }
+    /**
+     *
+     * @param urlConfig - configuration from the URL, either compressed string or already decoded object
+     * @returns
+     */
+    getConfigurationFromUrl(urlConfig) {
+        if (typeof urlConfig === 'string') {
+            const decodedConfig = this.decodeConfig(urlConfig);
+            const expandedConfig = this.expandKeys(decodedConfig);
+            return expandedConfig;
+        }
+        return this.expandKeys(urlConfig);
+    }
+    /**
+     * Encode a config for the URL:
+     * - Cleanup the __target objects to contain only name and id
+     * - Remove default values (diff from base)
+     * - Minify keys
+     * - Compress with lz-string
+     */
+    encodeConfig(config) {
+        const normalized = this.cleanUpTargetObject(config);
+        const diffed = this.removeDefaults(normalized);
+        const minified = this.minifyKeys(diffed);
+        return compressToEncodedURIComponent(JSON.stringify(minified));
+    }
+    /**
+     * Decode a config from the URL:
+     * - Decompress
+     * - Expand keys
+     * - Merge with base config
+     */
+    decodeConfig(urlConfig) {
+        if (!urlConfig)
+            return null;
+        try {
+            const decompressed = decompressFromEncodedURIComponent(urlConfig);
+            if (!decompressed)
+                return null;
+            const parsed = JSON.parse(decompressed);
+            const expanded = this.expandKeys(parsed);
+            return { ...DATA_EXPLORER_BASE_CONFIG, ...expanded };
+        }
+        catch {
+            this.alertService.danger(gettext('The decoded configuration is invalid and could not be loaded.'));
+        }
+    }
+    /** Minify keys recursively using KEY_MAP */
+    minifyKeys(config) {
+        if (Array.isArray(config))
+            return config.map(object => this.minifyKeys(object));
+        if (config !== Object(config))
+            return config;
+        return Object.fromEntries(Object.entries(config).map(([originalKey, originalValue]) => [
+            KEY_MAP[originalKey] || originalKey,
+            this.minifyKeys(originalValue)
+        ]));
+    }
+    /** Expand keys recursively using REVERSE_KEY_MAP */
+    expandKeys(config) {
+        if (Array.isArray(config))
+            return config.map(o => this.expandKeys(o));
+        if (config !== Object(config))
+            return config;
+        return Object.fromEntries(Object.entries(config).map(([originalKey, originalValue]) => [
+            REVERSE_KEY_MAP[originalKey] || originalKey,
+            this.expandKeys(originalValue)
+        ]));
+    }
+    /**
+     * Remove properties from `config` that match `base` so only changed values remain.
+     */
+    removeDefaults(config) {
+        const result = {};
+        for (const key in config) {
+            if (!(key in DATA_EXPLORER_BASE_CONFIG) || DATA_EXPLORER_BASE_CONFIG[key] !== config[key]) {
+                result[key] = config[key];
+            }
+        }
+        return result;
+    }
+    /**
+     * Cleans up __target objects to only keep id and name and remove the rest.
+     */
+    cleanUpTargetObject(config) {
+        const configCopy = { ...config };
+        // Cleanup the datapoints array
+        if (Array.isArray(configCopy.datapoints)) {
+            configCopy.datapoints = configCopy.datapoints.map((dp) => {
+                if (dp && typeof dp === 'object' && dp.__target && typeof dp.__target === 'object') {
+                    const { id, name } = dp.__target;
+                    const target = {};
+                    if (id !== undefined)
+                        target.id = id;
+                    if (name !== undefined)
+                        target.name = name;
+                    return { ...dp, __target: target };
+                }
+                return dp;
+            });
+        }
+        // Cleanup the alarmEventsConfig array
+        if (Array.isArray(configCopy.alarmsEventsConfigs)) {
+            configCopy.alarmsEventsConfigs = configCopy.alarmsEventsConfigs.map((a) => {
+                if (a && typeof a === 'object' && a.__target && typeof a.__target === 'object') {
+                    const { id, name } = a.__target;
+                    const target = {};
+                    if (id !== undefined)
+                        target.id = id;
+                    if (name !== undefined)
+                        target.name = name;
+                    return { ...a, __target: target };
+                }
+                return a;
+            });
+        }
+        return configCopy;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WorkspaceConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WorkspaceConfigurationService, providedIn: 'root' }); }
 }
@@ -149,11 +333,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 }]
         }] });
 
+class DataExplorerService {
+    constructor() {
+        this.inventory = inject(InventoryService);
+        this.contextDashboardService = inject(ContextDashboardService);
+        this.workspaceConfigurationService = inject(WorkspaceConfigurationService);
+        this.moChunkLoader = inject(MOChunkLoaderService);
+        this.datapointSyncService = inject(DatapointSyncService);
+        this.router = inject(Router);
+        this.maxNumberOfManagedObjectsPerRequest = 50;
+    }
+    async fetchReportDashboard(reportId) {
+        return (await this.inventory.list({
+            pageSize: 1,
+            query: `has('c8y_Dashboard!name!report_${reportId}')`
+        })).data[0];
+    }
+    async fetchContextDashboard(dashboardId, contextAsset) {
+        const context = contextAsset.c8y_isDevice
+            ? ContextDashboardType.Device
+            : ContextDashboardType.Group;
+        return firstValueFrom(this.contextDashboardService.getDashboard$(dashboardId, [context]));
+    }
+    async loadManagedObjectsInChunks(uniqIds) {
+        const { results, errors } = await this.moChunkLoader.processInChunks(uniqIds, this.maxNumberOfManagedObjectsPerRequest, ids => this.loadAChunkOfManagedObjects(ids));
+        return { result: results, errors };
+    }
+    /**
+     * Navigate to datapoint explorer with given config.
+     * The goal of this method is to navigate to the data explorer with a provided config from any other application.
+     * @param config Configuration to use
+     * @param label Label to be displayed for the configuration
+     * @param id ID for the configuration
+     */
+    navigateToDataExplorer(config, label, id) {
+        const url = this.getUrlForConfig(config, label, id);
+        this.router.navigateByUrl(url);
+    }
+    /**
+     * Generate a URL for the datapoint explorer with the given config.
+     * The goal of this method is to generate a shareable link to the data explorer.
+     * @param config Configuration to use
+     * @param label Label to be displayed for the configuration
+     * @param id ID for the configuration
+     * @returns The generated URL
+     */
+    getUrlForConfig(config, label, id) {
+        return this.workspaceConfigurationService.generateExplorerLink(config, label, id);
+    }
+    processAlarmEventConfigs(config) {
+        const firstTarget = config.alarmsEventsConfigs.find(ae => ae.__target)?.__target;
+        config.alarmsEventsConfigs = config.alarmsEventsConfigs.map((ae, index) => {
+            if (ae.__active === undefined)
+                ae.__active = true;
+            if (!ae.__target && firstTarget)
+                ae.__target = firstTarget;
+            if (!ae.color)
+                ae.color = this.generateColor(index);
+            return ae;
+        });
+    }
+    processDatapoints(config) {
+        const firstTarget = config.datapoints.find(dp => dp.__target)?.__target;
+        config.datapoints = config.datapoints.map((dp, index) => {
+            // Default __active
+            if (dp.__active === undefined)
+                dp.__active = true;
+            if (!dp.__target && firstTarget)
+                dp.__target = firstTarget;
+            if (!dp.color && !dp.__template)
+                dp.color = this.generateColor(index);
+            if (!dp.label)
+                dp.label = `${dp.fragment} -> ${dp.series}`;
+            return dp;
+        });
+    }
+    /**
+     * Generates a color from a fixed palette based on the index.
+     * Used to assign colors to alarm/event configs in the UI.
+     */
+    generateColor(index) {
+        // Simple palette, can expand
+        const palette = ['#c87d33', '#8c145f', '#8cd7fd', '#59a036', '#fb00ff', '#8d4c22', '#fbb2d7'];
+        return palette[index % palette.length];
+    }
+    async loadAndAssignManagedObjects(config, uniqueIds) {
+        const managedObjectsResult = await this.loadManagedObjectsInChunks([...uniqueIds]);
+        const managedObjects = managedObjectsResult.result;
+        const errors = managedObjectsResult.errors;
+        config.datapoints = this.datapointSyncService.assignUpdatedValues(config.datapoints, managedObjects, errors);
+    }
+    async loadAChunkOfManagedObjects(uniqIds) {
+        return this.moChunkLoader.loadAChunkOfManagedObjectsBase(uniqIds, this.inventory, this.maxNumberOfManagedObjectsPerRequest, id => this.moChunkLoader.getStatusDetails(id));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DataExplorerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DataExplorerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DataExplorerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class WorkspaceConfigComponent {
     constructor() {
         this.silent = false;
         this.onConfigurationChange = new EventEmitter();
         this.configurations = [];
+        this.navigationSubscription = null;
+        this.shouldCleanParams = false;
         this.activeConfigTooltip = gettext('Active configuration cannot be removed');
         this.removeConfigTooltip = gettext('Remove configuration');
         this.formBuilder = inject(FormBuilder);
@@ -163,22 +452,38 @@ class WorkspaceConfigComponent {
         this.activatedRoute = inject(ActivatedRoute);
         this.router = inject(Router);
         this.nameGeneratorService = inject(NameGeneratorService);
+        this.datapointSyncService = inject(DatapointSyncService);
+        this.dataExplorerService = inject(DataExplorerService);
     }
     ngOnInit() {
         this.initializeContextSourceId();
         this.initializeConfigurations();
         this.initWorkspaceForm();
+        this.subscribeToRouterEvents();
     }
     ngOnChanges(changes) {
         if (changes.updatedConfig && !changes.updatedConfig.firstChange) {
             this.updateConfigurations();
         }
     }
-    addConfig(duplicatedConfig) {
+    ngOnDestroy() {
+        if (this.shouldCleanParams) {
+            this.router.navigate([], {
+                queryParams: {
+                    config: null,
+                    id: null,
+                    label: null
+                },
+                queryParamsHandling: 'merge'
+            });
+        }
+        this.navigationSubscription?.unsubscribe();
+    }
+    addConfig(duplicatedConfig, id, label) {
         const name = this.nameGeneratorService.generateName();
         const workspace = {
-            id: new Date().toISOString(),
-            label: name,
+            id: id || new Date().toISOString(),
+            label: label || name,
             config: { datapoints: [], alarmsEventsConfigs: [] }
         };
         if (duplicatedConfig) {
@@ -192,6 +497,9 @@ class WorkspaceConfigComponent {
         if (!selected) {
             return;
         }
+        if (this.currentConfiguration?.id === configuration.id) {
+            return;
+        }
         this.currentConfiguration = configuration;
         localStorage.setItem(this.workspaceConfigurationService.LOCAL_STORAGE_DEFAULT_ID_KEY, this.currentConfiguration.id);
         this.onConfigurationChange.emit(configuration.config);
@@ -216,20 +524,31 @@ class WorkspaceConfigComponent {
     async shareConfig(configuration) {
         await this.clipboardService.writeText(JSON.stringify(configuration.config));
     }
-    addConfigFromUrl(queryParams) {
-        this.addConfig();
-        const config = JSON.parse(queryParams.config);
+    async addConfigFromUrl(queryParams) {
+        const id = queryParams.id || new Date().toISOString();
+        const label = queryParams.label || this.nameGeneratorService.generateName();
+        const config = this.workspaceConfigurationService.getConfigurationFromUrl(queryParams.config || {});
+        this.addConfig(config, id, label);
+        if (config.datapoints?.length) {
+            this.dataExplorerService.processDatapoints(config);
+        }
+        const uniqueIds = this.datapointSyncService.getManagedObjectIds(config.datapoints || []);
+        if (uniqueIds.length) {
+            await this.dataExplorerService.loadAndAssignManagedObjects(config, uniqueIds);
+        }
+        if (config.alarmsEventsConfigs?.length) {
+            this.dataExplorerService.processAlarmEventConfigs(config);
+        }
         this.onConfigurationChange.emit(config);
     }
     updateConfigurations() {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { dateFrom, dateTo, dateTimeContext, ...restConfig } = this.updatedConfig;
-        this.currentConfiguration.config = restConfig;
+        const config = { ...this.updatedConfig };
+        this.currentConfiguration.config = config;
         this.configurations = this.configurations.map(currentConfig => currentConfig.id === this.currentConfiguration.id ? this.currentConfiguration : currentConfig);
         const queryParams = {
-            configId: this.currentConfiguration.id,
+            id: this.currentConfiguration.id,
             label: this.currentConfiguration.label,
-            config: JSON.stringify(restConfig)
+            config: this.workspaceConfigurationService.encodeConfig(config)
         };
         this.workspaceConfigurationService.saveConfigurations(this.configurations, this.currentConfiguration.id);
         const control = this.configurationsFormGroup.controls['configurations'];
@@ -255,13 +574,13 @@ class WorkspaceConfigComponent {
             this.currentConfiguration =
                 this.configurations.find(c => c.id === defaultId) || this.configurations[0];
             this.onConfigurationChange.emit(this.currentConfiguration.config);
-            if (queryParams?.configId && !this.configurations.find(c => c.id === queryParams.configId)) {
+            if (queryParams?.id && !this.configurations.find(c => c.id === queryParams.id)) {
                 this.addConfigFromUrl(queryParams);
             }
-            else if (queryParams?.configId &&
-                this.configurations.find(c => c.id === queryParams.configId) &&
-                this.currentConfiguration.id !== queryParams.configId) {
-                this.currentConfiguration = this.configurations.find(c => c.id === queryParams.configId);
+            else if (queryParams?.id &&
+                this.configurations.find(c => c.id === queryParams.id) &&
+                this.currentConfiguration.id !== queryParams.id) {
+                this.currentConfiguration = this.configurations.find(c => c.id === queryParams.id);
                 this.changeConfiguration(true, this.currentConfiguration);
             }
         }
@@ -292,6 +611,25 @@ class WorkspaceConfigComponent {
             id: [workspace.id]
         });
     }
+    /**
+     * Subscribe to router events to clean query params when navigating away, but only when navigating between group or device context
+     * Otherwise it breaks GC.
+     */
+    subscribeToRouterEvents() {
+        this.navigationSubscription = this.router.events.subscribe(event => {
+            if (event instanceof NavigationStart) {
+                const urlTree = this.router.parseUrl(event.url);
+                if (urlTree.queryParams['config'] ||
+                    urlTree.queryParams['id'] ||
+                    urlTree.queryParams['label']) {
+                    this.shouldCleanParams = true;
+                }
+                else {
+                    this.shouldCleanParams = false;
+                }
+            }
+        });
+    }
     initializeContextSourceId() {
         const routeContext = this.contextRouteService.getContextData(this.activatedRoute);
         if (!routeContext) {
@@ -304,11 +642,11 @@ class WorkspaceConfigComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WorkspaceConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: WorkspaceConfigComponent, isStandalone: true, selector: "c8y-workspace-config", inputs: { updatedConfig: "updatedConfig", silent: "silent", defaultConfigurationId: "defaultConfigurationId" }, outputs: { onConfigurationChange: "onConfigurationChange" }, usesOnChanges: true, ngImport: i0, template: "@if (!silent) {\n  <div\n    class=\"dropdown\"\n    #actionbar_dropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"actionbar_dropdown.isOpen\"\n    dropdown\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n      attr.aria-label=\"{{ currentConfiguration?.label }}\"\n      tooltip=\"{{ 'Selected configuration' | translate }}\"\n      placement=\"top\"\n      container=\"body\"\n      data-cy=\"current-configuration-dropdown-button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      dropdownToggle\n    >\n      <i\n        class=\"m-r-4\"\n        c8yIcon=\"list\"\n      ></i>\n      <div class=\"d-col text-left fit-w\">\n        <span class=\"text-12\">\n          {{ 'Configuration' | translate }}\n        </span>\n        <span class=\"text-10 text-muted text-truncate\">\n          {{ currentConfiguration?.label }}\n        </span>\n      </div>\n      <span class=\"caret m-r-16 m-l-4\"></span>\n    </button>\n    <div\n      class=\"dropdown-menu dropdown-menu-wide dropdown-menu-action-bar\"\n      *dropdownMenu\n    >\n      <div class=\"sticky-top separator-bottom p-t-8 p-b-8 p-l-16 p-r-16\">\n        <p>\n          <strong>{{ 'Data explorer configurations' | translate }}</strong>\n        </p>\n        <p>\n          <small>{{ 'Easily switch and manage configurations.' | translate }}</small>\n        </p>\n      </div>\n      <c8y-list-group class=\"no-border-last\">\n        <form [formGroup]=\"configurationsFormGroup\">\n          <div formArrayName=\"configurations\">\n            <c8y-li\n              class=\"p-0\"\n              *ngFor=\"\n                let configuration of configurationsFormGroup.controls.configurations['controls'];\n                let i = index\n              \"\n              [dense]=\"true\"\n            >\n              <c8y-li-radio\n                style=\"min-height: 48px\"\n                [selected]=\"configuration.value.id === currentConfiguration.id\"\n                (onSelect)=\"changeConfiguration($event, configuration.value)\"\n              ></c8y-li-radio>\n              <div class=\"d-flex a-i-center gap-8\">\n                <div\n                  class=\"flex-grow min-width-0\"\n                  [formGroupName]=\"i\"\n                >\n                  <label\n                    class=\"editable\"\n                    [ngClass]=\"{\n                      updated:\n                        configuration.controls.label.touched && configuration.controls.label.dirty\n                    }\"\n                  >\n                    <input\n                      class=\"form-control\"\n                      [style.width.ch]=\"configuration.value.label || 25\"\n                      [attr.aria-label]=\"'Configuration label' | translate\"\n                      placeholder=\"{{ 'Configuration 1' | translate }}\"\n                      type=\"text\"\n                      autocomplete=\"off\"\n                      required\n                      formControlName=\"label\"\n                      (blur)=\"updateConfigurationLabel(configuration.value)\"\n                      (keydown.enter)=\"\n                        $event.preventDefault(); updateConfigurationLabel(configuration.value)\n                      \"\n                    />\n                  </label>\n                </div>\n                <div class=\"flex-nogrow d-flex gap-8\">\n                  <button\n                    class=\"btn-dot btn m-0\"\n                    [attr.aria-label]=\"'Duplicate configuration' | translate\"\n                    tooltip=\"{{ 'Duplicate configuration' | translate }}\"\n                    placement=\"left\"\n                    (click)=\"addConfig(configuration.value.config)\"\n                    [delay]=\"500\"\n                  >\n                    <i c8yIcon=\"copy\"></i>\n                  </button>\n\n                  <button\n                    class=\"btn-dot btn btn-dot--danger\"\n                    [attr.aria-label]=\"'Remove configurations' | translate\"\n                    tooltip=\"{{\n                      (configuration.value.id === currentConfiguration.id\n                        ? activeConfigTooltip\n                        : removeConfigTooltip\n                      ) | translate\n                    }}\"\n                    placement=\"left\"\n                    [delay]=\"500\"\n                    (click)=\"$event.stopPropagation(); deleteConfiguration(configuration.value)\"\n                    [disabled]=\"configuration.value.id === currentConfiguration.id\"\n                  >\n                    <i c8yIcon=\"minus-circle\"></i>\n                  </button>\n                </div>\n              </div>\n            </c8y-li>\n          </div>\n        </form>\n      </c8y-list-group>\n      <div class=\"sticky-bottom separator-top\">\n        <div class=\"d-flex p-l-16 p-r-16 p-t-8 p-b-8\">\n          <button\n            class=\"btn btn-danger btn-sm flex-grow m-r-4\"\n            (click)=\"clearAll()\"\n            [disabled]=\"configurations.length < 2\"\n          >\n            <i [c8yIcon]=\"'delete'\"></i>\n            {{ 'Delete all configurations' | translate }}\n          </button>\n          <button\n            class=\"btn btn-default btn-sm flex-grow\"\n            type=\"button\"\n            (click)=\"addConfig()\"\n          >\n            <i [c8yIcon]=\"'add-circle-outline'\"></i>\n            {{ 'Add configuration' | translate }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemRadioComponent, selector: "c8y-list-item-radio, c8y-li-radio", inputs: ["selected", "name", "disabled", "value"], outputs: ["onSelect"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i4.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i4.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i4.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6.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: i2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: WorkspaceConfigComponent, isStandalone: true, selector: "c8y-workspace-config", inputs: { updatedConfig: "updatedConfig", silent: "silent", defaultConfigurationId: "defaultConfigurationId" }, outputs: { onConfigurationChange: "onConfigurationChange" }, usesOnChanges: true, ngImport: i0, template: "@if (!silent) {\n  <div\n    class=\"dropdown\"\n    #actionbar_dropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"actionbar_dropdown.isOpen\"\n    dropdown\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n      attr.aria-label=\"{{ currentConfiguration?.label }}\"\n      tooltip=\"{{ 'Selected configuration' | translate }}\"\n      placement=\"top\"\n      container=\"body\"\n      data-cy=\"current-configuration-dropdown-button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      dropdownToggle\n    >\n      <i\n        class=\"m-r-4\"\n        c8yIcon=\"list\"\n      ></i>\n      <div class=\"d-col text-left fit-w\">\n        <span class=\"text-12\">\n          {{ 'Configuration' | translate }}\n        </span>\n        <span class=\"text-10 text-muted text-truncate\">\n          {{ currentConfiguration?.label }}\n        </span>\n      </div>\n      <span class=\"caret m-r-16 m-l-4\"></span>\n    </button>\n    <div\n      class=\"dropdown-menu dropdown-menu-wide dropdown-menu-action-bar\"\n      *dropdownMenu\n    >\n      <div class=\"sticky-top separator-bottom p-t-8 p-b-8 p-l-16 p-r-16\">\n        <p>\n          <strong>{{ 'Data explorer configurations' | translate }}</strong>\n        </p>\n        <p>\n          <small>{{ 'Easily switch and manage configurations.' | translate }}</small>\n        </p>\n      </div>\n      <c8y-list-group class=\"no-border-last\">\n        <form [formGroup]=\"configurationsFormGroup\">\n          <div formArrayName=\"configurations\">\n            @for (\n              configuration of configurationsFormGroup.controls.configurations['controls'];\n              track $index\n            ) {\n              <c8y-li\n                class=\"p-0\"\n                [dense]=\"true\"\n              >\n                <c8y-li-radio\n                  style=\"min-height: 48px\"\n                  [selected]=\"configuration.value.id === currentConfiguration.id\"\n                  (onSelect)=\"changeConfiguration($event, configuration.value)\"\n                ></c8y-li-radio>\n\n                <div class=\"d-flex a-i-center gap-8\">\n                  <div\n                    class=\"min-width-0\"\n                    [formGroupName]=\"$index\"\n                  >\n                    <label\n                      class=\"editable\"\n                      [ngClass]=\"{\n                        updated:\n                          configuration.controls.label.touched && configuration.controls.label.dirty\n                      }\"\n                    >\n                      <input\n                        class=\"form-control\"\n                        [style.width.ch]=\"configuration.value.label || 25\"\n                        [attr.aria-label]=\"'Configuration label' | translate\"\n                        placeholder=\"{{ 'Configuration 1' | translate }}\"\n                        type=\"text\"\n                        autocomplete=\"off\"\n                        required\n                        formControlName=\"label\"\n                        (blur)=\"updateConfigurationLabel(configuration.value)\"\n                        (keydown.enter)=\"\n                          $event.preventDefault(); updateConfigurationLabel(configuration.value)\n                        \"\n                      />\n                    </label>\n                  </div>\n\n                  <div class=\"flex-nogrow d-flex gap-8\">\n                    <button\n                      class=\"btn-dot btn m-0\"\n                      [attr.aria-label]=\"'Duplicate configuration' | translate\"\n                      tooltip=\"{{ 'Duplicate configuration' | translate }}\"\n                      placement=\"left\"\n                      (click)=\"addConfig(configuration.value.config)\"\n                      [delay]=\"500\"\n                    >\n                      <i c8yIcon=\"copy\"></i>\n                    </button>\n\n                    <button\n                      class=\"btn-dot btn btn-dot--danger\"\n                      [attr.aria-label]=\"'Remove configurations' | translate\"\n                      tooltip=\"{{\n                        (configuration.value.id === currentConfiguration.id\n                          ? activeConfigTooltip\n                          : removeConfigTooltip\n                        ) | translate\n                      }}\"\n                      placement=\"left\"\n                      [delay]=\"500\"\n                      (click)=\"$event.stopPropagation(); deleteConfiguration(configuration.value)\"\n                      [disabled]=\"configuration.value.id === currentConfiguration.id\"\n                    >\n                      <i c8yIcon=\"minus-circle\"></i>\n                    </button>\n                  </div>\n                </div>\n              </c8y-li>\n            }\n          </div>\n        </form>\n      </c8y-list-group>\n      <div class=\"sticky-bottom separator-top\">\n        <div class=\"d-flex p-l-16 p-r-16 p-t-8 p-b-8\">\n          <button\n            class=\"btn btn-danger btn-sm flex-grow m-r-4\"\n            (click)=\"clearAll()\"\n            [disabled]=\"configurations.length < 2\"\n          >\n            <i [c8yIcon]=\"'delete'\"></i>\n            {{ 'Delete all configurations' | translate }}\n          </button>\n          <button\n            class=\"btn btn-default btn-sm flex-grow\"\n            type=\"button\"\n            (click)=\"addConfig()\"\n          >\n            <i [c8yIcon]=\"'add-circle-outline'\"></i>\n            {{ 'Add configuration' | translate }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemRadioComponent, selector: "c8y-list-item-radio, c8y-li-radio", inputs: ["selected", "name", "disabled", "value"], outputs: ["onSelect"] }, { 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: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i4.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i4.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i4.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6.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: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WorkspaceConfigComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-workspace-config', standalone: true, imports: [CoreModule, BsDropdownModule, FormsModule, A11yModule, TooltipModule], template: "@if (!silent) {\n  <div\n    class=\"dropdown\"\n    #actionbar_dropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"actionbar_dropdown.isOpen\"\n    dropdown\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n      attr.aria-label=\"{{ currentConfiguration?.label }}\"\n      tooltip=\"{{ 'Selected configuration' | translate }}\"\n      placement=\"top\"\n      container=\"body\"\n      data-cy=\"current-configuration-dropdown-button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      dropdownToggle\n    >\n      <i\n        class=\"m-r-4\"\n        c8yIcon=\"list\"\n      ></i>\n      <div class=\"d-col text-left fit-w\">\n        <span class=\"text-12\">\n          {{ 'Configuration' | translate }}\n        </span>\n        <span class=\"text-10 text-muted text-truncate\">\n          {{ currentConfiguration?.label }}\n        </span>\n      </div>\n      <span class=\"caret m-r-16 m-l-4\"></span>\n    </button>\n    <div\n      class=\"dropdown-menu dropdown-menu-wide dropdown-menu-action-bar\"\n      *dropdownMenu\n    >\n      <div class=\"sticky-top separator-bottom p-t-8 p-b-8 p-l-16 p-r-16\">\n        <p>\n          <strong>{{ 'Data explorer configurations' | translate }}</strong>\n        </p>\n        <p>\n          <small>{{ 'Easily switch and manage configurations.' | translate }}</small>\n        </p>\n      </div>\n      <c8y-list-group class=\"no-border-last\">\n        <form [formGroup]=\"configurationsFormGroup\">\n          <div formArrayName=\"configurations\">\n            <c8y-li\n              class=\"p-0\"\n              *ngFor=\"\n                let configuration of configurationsFormGroup.controls.configurations['controls'];\n                let i = index\n              \"\n              [dense]=\"true\"\n            >\n              <c8y-li-radio\n                style=\"min-height: 48px\"\n                [selected]=\"configuration.value.id === currentConfiguration.id\"\n                (onSelect)=\"changeConfiguration($event, configuration.value)\"\n              ></c8y-li-radio>\n              <div class=\"d-flex a-i-center gap-8\">\n                <div\n                  class=\"flex-grow min-width-0\"\n                  [formGroupName]=\"i\"\n                >\n                  <label\n                    class=\"editable\"\n                    [ngClass]=\"{\n                      updated:\n                        configuration.controls.label.touched && configuration.controls.label.dirty\n                    }\"\n                  >\n                    <input\n                      class=\"form-control\"\n                      [style.width.ch]=\"configuration.value.label || 25\"\n                      [attr.aria-label]=\"'Configuration label' | translate\"\n                      placeholder=\"{{ 'Configuration 1' | translate }}\"\n                      type=\"text\"\n                      autocomplete=\"off\"\n                      required\n                      formControlName=\"label\"\n                      (blur)=\"updateConfigurationLabel(configuration.value)\"\n                      (keydown.enter)=\"\n                        $event.preventDefault(); updateConfigurationLabel(configuration.value)\n                      \"\n                    />\n                  </label>\n                </div>\n                <div class=\"flex-nogrow d-flex gap-8\">\n                  <button\n                    class=\"btn-dot btn m-0\"\n                    [attr.aria-label]=\"'Duplicate configuration' | translate\"\n                    tooltip=\"{{ 'Duplicate configuration' | translate }}\"\n                    placement=\"left\"\n                    (click)=\"addConfig(configuration.value.config)\"\n                    [delay]=\"500\"\n                  >\n                    <i c8yIcon=\"copy\"></i>\n                  </button>\n\n                  <button\n                    class=\"btn-dot btn btn-dot--danger\"\n                    [attr.aria-label]=\"'Remove configurations' | translate\"\n                    tooltip=\"{{\n                      (configuration.value.id === currentConfiguration.id\n                        ? activeConfigTooltip\n                        : removeConfigTooltip\n                      ) | translate\n                    }}\"\n                    placement=\"left\"\n                    [delay]=\"500\"\n                    (click)=\"$event.stopPropagation(); deleteConfiguration(configuration.value)\"\n                    [disabled]=\"configuration.value.id === currentConfiguration.id\"\n                  >\n                    <i c8yIcon=\"minus-circle\"></i>\n                  </button>\n                </div>\n              </div>\n            </c8y-li>\n          </div>\n        </form>\n      </c8y-list-group>\n      <div class=\"sticky-bottom separator-top\">\n        <div class=\"d-flex p-l-16 p-r-16 p-t-8 p-b-8\">\n          <button\n            class=\"btn btn-danger btn-sm flex-grow m-r-4\"\n            (click)=\"clearAll()\"\n            [disabled]=\"configurations.length < 2\"\n          >\n            <i [c8yIcon]=\"'delete'\"></i>\n            {{ 'Delete all configurations' | translate }}\n          </button>\n          <button\n            class=\"btn btn-default btn-sm flex-grow\"\n            type=\"button\"\n            (click)=\"addConfig()\"\n          >\n            <i [c8yIcon]=\"'add-circle-outline'\"></i>\n            {{ 'Add configuration' | translate }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n" }]
+            args: [{ selector: 'c8y-workspace-config', standalone: true, imports: [CoreModule, BsDropdownModule, FormsModule, A11yModule, TooltipModule], template: "@if (!silent) {\n  <div\n    class=\"dropdown\"\n    #actionbar_dropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"actionbar_dropdown.isOpen\"\n    dropdown\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n      attr.aria-label=\"{{ currentConfiguration?.label }}\"\n      tooltip=\"{{ 'Selected configuration' | translate }}\"\n      placement=\"top\"\n      container=\"body\"\n      data-cy=\"current-configuration-dropdown-button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      dropdownToggle\n    >\n      <i\n        class=\"m-r-4\"\n        c8yIcon=\"list\"\n      ></i>\n      <div class=\"d-col text-left fit-w\">\n        <span class=\"text-12\">\n          {{ 'Configuration' | translate }}\n        </span>\n        <span class=\"text-10 text-muted text-truncate\">\n          {{ currentConfiguration?.label }}\n        </span>\n      </div>\n      <span class=\"caret m-r-16 m-l-4\"></span>\n    </button>\n    <div\n      class=\"dropdown-menu dropdown-menu-wide dropdown-menu-action-bar\"\n      *dropdownMenu\n    >\n      <div class=\"sticky-top separator-bottom p-t-8 p-b-8 p-l-16 p-r-16\">\n        <p>\n          <strong>{{ 'Data explorer configurations' | translate }}</strong>\n        </p>\n        <p>\n          <small>{{ 'Easily switch and manage configurations.' | translate }}</small>\n        </p>\n      </div>\n      <c8y-list-group class=\"no-border-last\">\n        <form [formGroup]=\"configurationsFormGroup\">\n          <div formArrayName=\"configurations\">\n            @for (\n              configuration of configurationsFormGroup.controls.configurations['controls'];\n              track $index\n            ) {\n              <c8y-li\n                class=\"p-0\"\n                [dense]=\"true\"\n              >\n                <c8y-li-radio\n                  style=\"min-height: 48px\"\n                  [selected]=\"configuration.value.id === currentConfiguration.id\"\n                  (onSelect)=\"changeConfiguration($event, configuration.value)\"\n                ></c8y-li-radio>\n\n                <div class=\"d-flex a-i-center gap-8\">\n                  <div\n                    class=\"min-width-0\"\n                    [formGroupName]=\"$index\"\n                  >\n                    <label\n                      class=\"editable\"\n                      [ngClass]=\"{\n                        updated:\n                          configuration.controls.label.touched && configuration.controls.label.dirty\n                      }\"\n                    >\n                      <input\n                        class=\"form-control\"\n                        [style.width.ch]=\"configuration.value.label || 25\"\n                        [attr.aria-label]=\"'Configuration label' | translate\"\n                        placeholder=\"{{ 'Configuration 1' | translate }}\"\n                        type=\"text\"\n                        autocomplete=\"off\"\n                        required\n                        formControlName=\"label\"\n                        (blur)=\"updateConfigurationLabel(configuration.value)\"\n                        (keydown.enter)=\"\n                          $event.preventDefault(); updateConfigurationLabel(configuration.value)\n                        \"\n                      />\n                    </label>\n                  </div>\n\n                  <div class=\"flex-nogrow d-flex gap-8\">\n                    <button\n                      class=\"btn-dot btn m-0\"\n                      [attr.aria-label]=\"'Duplicate configuration' | translate\"\n                      tooltip=\"{{ 'Duplicate configuration' | translate }}\"\n                      placement=\"left\"\n                      (click)=\"addConfig(configuration.value.config)\"\n                      [delay]=\"500\"\n                    >\n                      <i c8yIcon=\"copy\"></i>\n                    </button>\n\n                    <button\n                      class=\"btn-dot btn btn-dot--danger\"\n                      [attr.aria-label]=\"'Remove configurations' | translate\"\n                      tooltip=\"{{\n                        (configuration.value.id === currentConfiguration.id\n                          ? activeConfigTooltip\n                          : removeConfigTooltip\n                        ) | translate\n                      }}\"\n                      placement=\"left\"\n                      [delay]=\"500\"\n                      (click)=\"$event.stopPropagation(); deleteConfiguration(configuration.value)\"\n                      [disabled]=\"configuration.value.id === currentConfiguration.id\"\n                    >\n                      <i c8yIcon=\"minus-circle\"></i>\n                    </button>\n                  </div>\n                </div>\n              </c8y-li>\n            }\n          </div>\n        </form>\n      </c8y-list-group>\n      <div class=\"sticky-bottom separator-top\">\n        <div class=\"d-flex p-l-16 p-r-16 p-t-8 p-b-8\">\n          <button\n            class=\"btn btn-danger btn-sm flex-grow m-r-4\"\n            (click)=\"clearAll()\"\n            [disabled]=\"configurations.length < 2\"\n          >\n            <i [c8yIcon]=\"'delete'\"></i>\n            {{ 'Delete all configurations' | translate }}\n          </button>\n          <button\n            class=\"btn btn-default btn-sm flex-grow\"\n            type=\"button\"\n            (click)=\"addConfig()\"\n          >\n            <i [c8yIcon]=\"'add-circle-outline'\"></i>\n            {{ 'Add configuration' | translate }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n" }]
         }], propDecorators: { updatedConfig: [{
                 type: Input
             }], silent: [{
@@ -369,40 +707,13 @@ class CreateNewReportModalComponent {
         this._reject();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CreateNewReportModalComponent, deps: [{ token: i1.ContextDashboardService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CreateNewReportModalComponent, isStandalone: true, selector: "c8y-create-new-report-modal", ngImport: i0, template: "<c8y-modal\n  [title]=\"'Create new report with widget' | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  [disabled]=\"reportName === ''\"\n  (onDismiss)=\"cancel()\"\n  (onClose)=\"save()\"\n  [labels]=\"labels\"\n>\n  <ng-container c8y-modal-title>\n    <span c8yIcon=\"c8y-reports\"></span>\n  </ng-container>\n\n  <p class=\"text-center bg-component text-balance sticky-top p-l-24 p-r-24 p-t-8 p-b-8 separator-bottom\">\n   {{' Create a new report with the Data points graph widget using the current configuration.' | translate}}\n  </p>\n  <div class=\"p-24 p-t-8\">\n    <c8y-form-group>\n      <label\n        for=\"reportName\"\n        translate\n        >\n        Report name\n      </label>\n      <input\n        class=\"form-control\"\n        id=\"reportName\"\n        placeholder=\"{{ 'e.g. My data point Report' }}\"\n        name=\"name\"\n        type=\"text\"\n        autocomplete=\"off\"\n        required\n        [(ngModel)]=\"reportName\"\n      />\n      <c8y-messages></c8y-messages>\n    </c8y-form-group>\n  </div>\n</c8y-modal>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i2.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: ReportDashboardModule }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CreateNewReportModalComponent, isStandalone: true, selector: "c8y-create-new-report-modal", ngImport: i0, template: "<c8y-modal\n  [title]=\"'Create new report with widget' | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  [disabled]=\"reportName === ''\"\n  (onDismiss)=\"cancel()\"\n  (onClose)=\"save()\"\n  [labels]=\"labels\"\n>\n  <ng-container c8y-modal-title>\n    <span c8yIcon=\"c8y-reports\"></span>\n  </ng-container>\n\n  <p class=\"text-center bg-component text-balance sticky-top p-l-24 p-r-24 p-t-8 p-b-8 separator-bottom\">\n   {{' Create a new report with the Data points graph widget using the current configuration.' | translate}}\n  </p>\n  <div class=\"p-24 p-t-8\">\n    <c8y-form-group>\n      <label\n        for=\"reportName\"\n        translate\n        >\n        Report name\n      </label>\n      <input\n        class=\"form-control\"\n        id=\"reportName\"\n        placeholder=\"{{ 'e.g. My data point Report' }}\"\n        name=\"name\"\n        type=\"text\"\n        autocomplete=\"off\"\n        required\n        [(ngModel)]=\"reportName\"\n      />\n      <c8y-messages></c8y-messages>\n    </c8y-form-group>\n  </div>\n</c8y-modal>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i2.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: ReportDashboardModule }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CreateNewReportModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-create-new-report-modal', standalone: true, imports: [ReactiveFormsModule, CoreModule, ReportDashboardModule], template: "<c8y-modal\n  [title]=\"'Create new report with widget' | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  [disabled]=\"reportName === ''\"\n  (onDismiss)=\"cancel()\"\n  (onClose)=\"save()\"\n  [labels]=\"labels\"\n>\n  <ng-container c8y-modal-title>\n    <span c8yIcon=\"c8y-reports\"></span>\n  </ng-container>\n\n  <p class=\"text-center bg-component text-balance sticky-top p-l-24 p-r-24 p-t-8 p-b-8 separator-bottom\">\n   {{' Create a new report with the Data points graph widget using the current configuration.' | translate}}\n  </p>\n  <div class=\"p-24 p-t-8\">\n    <c8y-form-group>\n      <label\n        for=\"reportName\"\n        translate\n        >\n        Report name\n      </label>\n      <input\n        class=\"form-control\"\n        id=\"reportName\"\n        placeholder=\"{{ 'e.g. My data point Report' }}\"\n        name=\"name\"\n        type=\"text\"\n        autocomplete=\"off\"\n        required\n        [(ngModel)]=\"reportName\"\n      />\n      <c8y-messages></c8y-messages>\n    </c8y-form-group>\n  </div>\n</c8y-modal>\n" }]
         }], ctorParameters: () => [{ type: i1.ContextDashboardService }] });
 
-class DataExplorerService {
-    constructor() {
-        this.inventory = inject(InventoryService);
-        this.contextDashboardService = inject(ContextDashboardService);
-    }
-    async fetchReportDashboard(reportId) {
-        return (await this.inventory.list({
-            pageSize: 1,
-            query: `has('c8y_Dashboard!name!report_${reportId}')`
-        })).data[0];
-    }
-    async fetchContextDashboard(dashboardId, contextAsset) {
-        const context = contextAsset.c8y_isDevice
-            ? ContextDashboardType.Device
-            : ContextDashboardType.Group;
-        return firstValueFrom(this.contextDashboardService.getDashboard$(dashboardId, [context]));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DataExplorerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DataExplorerService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DataExplorerService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
 class SendAsWidgetToDashboardModal {
     constructor() {
         this.dashboards = [];
@@ -439,7 +750,7 @@ class SendAsWidgetToDashboardModal {
         return new FormGroup(controls);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SendAsWidgetToDashboardModal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SendAsWidgetToDashboardModal, isStandalone: true, selector: "c8y-send-as-widget-to-dashboard-modal", inputs: { contextAsset: "contextAsset" }, ngImport: i0, template: "<c8y-modal\n  [title]=\"'Send as widget to dashboards' | translate\"\n  [disabled]=\"!form || form.invalid\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"cancel()\"\n  (onClose)=\"save()\"\n  [labels]=\"labels\"\n>\n  <ng-container c8y-modal-title>\n    <span c8yIcon=\"th\"></span>\n  </ng-container>\n\n  <c8y-list-group\n    class=\"m-b-0 no-border-last\"\n    *ngIf=\"form\"\n    [formGroup]=\"form\"\n  >\n    <c8y-li>\n      <p\n        class=\"text-center text-medium\"\n        *ngIf=\"numberOfSelectedDashboards$ | async as numberOfDashboards; else noSelectedDashboards\"\n        translate\n        [translateParams]=\"{ numberOfDashboards: numberOfDashboards }\"\n        ngNonBindable\n      >\n        {{ numberOfDashboards }} dashboards selected for widget\n      </p>\n      <ng-template #noSelectedDashboards>\n        <p\n          class=\"text-center text-medium\"\n          translate\n        >\n          Select one or more dashboards to send the Data points graph widget with the current\n          configuration\n        </p>\n      </ng-template>\n    </c8y-li>\n    <c8y-li *ngFor=\"let dashboard of dashboards\">\n      <c8y-li-checkbox\n        [attr.data-cy]=\"'branding-apply-branding-to-app-checkbox-' + dashboard.id\"\n        [formControlName]=\"dashboard.id\"\n      ></c8y-li-checkbox>\n      <c8y-li-icon class=\"p-l-0\">\n        <i c8yIcon=\"{{ dashboard.icon }}\"></i>\n      </c8y-li-icon>\n      <div\n        class=\"text-truncate\"\n        title=\"{{ dashboard.name }}\"\n      >\n        {{ dashboard.name }}\n      </div>\n    </c8y-li>\n  </c8y-list-group>\n\n  <c8y-ui-empty-state\n    [icon]=\"'th'\"\n    [title]=\"'There are no dashboards defined.' | translate\"\n    [subtitle]=\"'Add a dashboard first.' | translate\"\n    *ngIf=\"dashboards.length === 0\"\n  ></c8y-ui-empty-state>\n</c8y-modal>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "ngmodule", type: ContextDashboardModule }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SendAsWidgetToDashboardModal, isStandalone: true, selector: "c8y-send-as-widget-to-dashboard-modal", inputs: { contextAsset: "contextAsset" }, ngImport: i0, template: "<c8y-modal\n  [title]=\"'Send as widget to dashboards' | translate\"\n  [disabled]=\"!form || form.invalid\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"cancel()\"\n  (onClose)=\"save()\"\n  [labels]=\"labels\"\n>\n  <ng-container c8y-modal-title>\n    <span c8yIcon=\"th\"></span>\n  </ng-container>\n\n  <c8y-list-group\n    class=\"m-b-0 no-border-last\"\n    *ngIf=\"form\"\n    [formGroup]=\"form\"\n  >\n    <c8y-li>\n      <p\n        class=\"text-center text-medium\"\n        *ngIf=\"numberOfSelectedDashboards$ | async as numberOfDashboards; else noSelectedDashboards\"\n        translate\n        [translateParams]=\"{ numberOfDashboards: numberOfDashboards }\"\n        ngNonBindable\n      >\n        {{ numberOfDashboards }} dashboards selected for widget\n      </p>\n      <ng-template #noSelectedDashboards>\n        <p\n          class=\"text-center text-medium\"\n          translate\n        >\n          Select one or more dashboards to send the Data points graph widget with the current\n          configuration\n        </p>\n      </ng-template>\n    </c8y-li>\n    <c8y-li *ngFor=\"let dashboard of dashboards\">\n      <c8y-li-checkbox\n        [attr.data-cy]=\"'branding-apply-branding-to-app-checkbox-' + dashboard.id\"\n        [formControlName]=\"dashboard.id\"\n      ></c8y-li-checkbox>\n      <c8y-li-icon class=\"p-l-0\">\n        <i c8yIcon=\"{{ dashboard.icon }}\"></i>\n      </c8y-li-icon>\n      <div\n        class=\"text-truncate\"\n        title=\"{{ dashboard.name }}\"\n      >\n        {{ dashboard.name }}\n      </div>\n    </c8y-li>\n  </c8y-list-group>\n\n  <c8y-ui-empty-state\n    [icon]=\"'th'\"\n    [title]=\"'There are no dashboards defined.' | translate\"\n    [subtitle]=\"'Add a dashboard first.' | translate\"\n    *ngIf=\"dashboards.length === 0\"\n  ></c8y-ui-empty-state>\n</c8y-modal>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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: "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: CoreModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "ngmodule", type: ContextDashboardModule }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SendAsWidgetToDashboardModal, decorators: [{
             type: Component,
@@ -479,7 +790,7 @@ class SendAsWidgetToReportModal {
         return new FormGroup(controls);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SendAsWidgetToReportModal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SendAsWidgetToReportModal, isStandalone: true, selector: "c8y-send-as-widget-to-report-modal", ngImport: i0, template: "<c8y-modal\n  [title]=\"'Send as widget to reports' | translate\"\n  [disabled]=\"!form || form.invalid\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"cancel()\"\n  (onClose)=\"save()\"\n  [labels]=\"labels\"\n>\n  <ng-container c8y-modal-title>\n    <span c8yIcon=\"c8y-reports\"></span>\n  </ng-container>\n\n  <c8y-list-group\n    class=\"m-b-0 no-border-last\"\n    *ngIf=\"form\"\n    [formGroup]=\"form\"\n  >\n    <c8y-li>\n      <p\n        class=\"text-center text-medium\"\n        *ngIf=\"numberOfSelectedReports$ | async as numberOfReports; else noSelectedReports\"\n        translate\n        [translateParams]=\"{ numberOfReports: numberOfReports }\"\n        ngNonBindable\n      >\n        {{ numberOfReports }} reports selected for widget\n      </p>\n      <ng-template #noSelectedReports>\n        <p\n          class=\"text-center text-medium\"\n          translate\n        >\n          Select one or more reports to send the Data points graph widget with the current configuration\n        </p>\n      </ng-template>\n    </c8y-li>\n    <c8y-li *ngFor=\"let report of reports\">\n      <c8y-li-checkbox\n        [attr.data-cy]=\"'branding-apply-branding-to-app-checkbox-' + report.id\"\n        [formControlName]=\"report.id\"\n      ></c8y-li-checkbox>\n      <c8y-li-icon class=\"p-l-0\">\n        <i c8yIcon=\"{{ report.icon }}\"></i>\n      </c8y-li-icon>\n      <div class=\"text-truncate\" title=\"{{report.name}}\">{{ report.name }}</div>\n    </c8y-li>\n  </c8y-list-group>\n\n  <c8y-ui-empty-state\n    [icon]=\"'c8y-reports'\"\n    [title]=\"'There are no reports defined.' | translate\"\n    [subtitle]=\"'Add a report first.' | translate\"\n    *ngIf=\"reports.length === 0\"\n  ></c8y-ui-empty-state>\n</c8y-modal>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "ngmodule", type: ReportDashboardModule }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SendAsWidgetToReportModal, isStandalone: true, selector: "c8y-send-as-widget-to-report-modal", ngImport: i0, template: "<c8y-modal\n  [title]=\"'Send as widget to reports' | translate\"\n  [disabled]=\"!form || form.invalid\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"cancel()\"\n  (onClose)=\"save()\"\n  [labels]=\"labels\"\n>\n  <ng-container c8y-modal-title>\n    <span c8yIcon=\"c8y-reports\"></span>\n  </ng-container>\n\n  <c8y-list-group\n    class=\"m-b-0 no-border-last\"\n    *ngIf=\"form\"\n    [formGroup]=\"form\"\n  >\n    <c8y-li>\n      <p\n        class=\"text-center text-medium\"\n        *ngIf=\"numberOfSelectedReports$ | async as numberOfReports; else noSelectedReports\"\n        translate\n        [translateParams]=\"{ numberOfReports: numberOfReports }\"\n        ngNonBindable\n      >\n        {{ numberOfReports }} reports selected for widget\n      </p>\n      <ng-template #noSelectedReports>\n        <p\n          class=\"text-center text-medium\"\n          translate\n        >\n          Select one or more reports to send the Data points graph widget with the current configuration\n        </p>\n      </ng-template>\n    </c8y-li>\n    <c8y-li *ngFor=\"let report of reports\">\n      <c8y-li-checkbox\n        [attr.data-cy]=\"'branding-apply-branding-to-app-checkbox-' + report.id\"\n        [formControlName]=\"report.id\"\n      ></c8y-li-checkbox>\n      <c8y-li-icon class=\"p-l-0\">\n        <i c8yIcon=\"{{ report.icon }}\"></i>\n      </c8y-li-icon>\n      <div class=\"text-truncate\" title=\"{{report.name}}\">{{ report.name }}</div>\n    </c8y-li>\n  </c8y-list-group>\n\n  <c8y-ui-empty-state\n    [icon]=\"'c8y-reports'\"\n    [title]=\"'There are no reports defined.' | translate\"\n    [subtitle]=\"'Add a report first.' | translate\"\n    *ngIf=\"reports.length === 0\"\n  ></c8y-ui-empty-state>\n</c8y-modal>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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: "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: CoreModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "ngmodule", type: ReportDashboardModule }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SendAsWidgetToReportModal, decorators: [{
             type: Component,
@@ -514,7 +825,7 @@ class DatapointExplorerComponent {
         this.contextRouteService = inject(ContextRouteService);
         this.chartHelpersService = inject(ChartHelpersService);
         this.gainsightService = inject(GainsightService);
-        this.widgetTimeContextDateRangeService = inject(WidgetTimeContextDateRangeService);
+        this.datapointSyncService = inject(DatapointSyncService);
         this.formGroup = this.initForm();
         this.settings$ = this.activatedRoute.data.pipe(map$1(data => data.settings));
     }
@@ -596,9 +907,16 @@ class DatapointExplorerComponent {
             aggregation: timeProps.aggregation
         };
     }
-    onConfigurationChange(config) {
+    async onConfigurationChange(config) {
+        const uniqueIds = this.datapointSyncService.getManagedObjectIds(config.datapoints || []);
+        if (uniqueIds.length) {
+            const managedObjectsResult = await this.dataExplorerService.loadManagedObjectsInChunks(uniqueIds);
+            const managedObjects = managedObjectsResult.result;
+            const errors = managedObjectsResult.errors;
+            config.datapoints = this.datapointSyncService.assignUpdatedValues(config.datapoints, managedObjects, errors);
+        }
         // Calculate date range based on interval if not provided
-        const hasExplicitDates = config.dateFrom && config.dateTo;
+        const hasExplicitDates = this.isActualDate(config.dateFrom) && this.isActualDate(config.dateTo);
         let dateFrom, dateTo;
         if (hasExplicitDates) {
             dateFrom = new Date(config.dateFrom);
@@ -793,6 +1111,12 @@ class DatapointExplorerComponent {
             // else: modal was closed
         }
     }
+    isActualDate(val) {
+        if (!val)
+            return false;
+        const date = new Date(val);
+        return date instanceof Date && !isNaN(date.getTime());
+    }
     isAlarm(item) {
         return item.timelineType === 'ALARM';
     }
@@ -879,7 +1203,7 @@ class DatapointExplorerComponent {
             ChartAlarmsService,
             ChartHelpersService,
             WidgetTimeContextDateRangeService
-        ], viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true }, { propertyName: "timeContext", first: true, predicate: ["timeContext"], descendants: true }], ngImport: i0, template: "<c8y-title>{{ 'Data explorer' | translate }}</c8y-title>\n\n<c8y-time-context\n  #timeContext\n  (contextChange)=\"onTimeContextChange($event)\"\n  [changedDateContext]=\"timeProps\"\n  [timeContext]=\"(settings$ | async)?.timeContext\"\n></c8y-time-context>\n\n<c8y-action-bar-item [placement]=\"'left'\">\n  <c8y-workspace-config\n    [updatedConfig]=\"config\"\n    [silent]=\"(settings$ | async)?.hideWorkspaceConfig\"\n    (onConfigurationChange)=\"onConfigurationChange($event)\"\n  ></c8y-workspace-config>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  *ngIf=\"!(settings$ | async)?.hideExportSelector\"\n  [placement]=\"'right'\"\n>\n  <c8y-datapoints-export-selector\n    [exportConfig]=\"exportConfig\"\n    [containerClass]=\"'d-contents'\"\n  ></c8y-datapoints-export-selector>\n</c8y-action-bar-item>\n\n@if (!(settings$ | async)?.hideWidgetActions) {\n  <ng-container *ngIf=\"contextAsset\">\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Send as widget to dashboard' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"sendAsWidgetToDashboard()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i c8yIcon=\"th\"></i>\n        <span>{{ 'Send as widget to dashboard' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  </ng-container>\n\n  <ng-container *ngIf=\"!contextAsset\">\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        title=\"{{ 'Send as widget to report' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"sendAsWidgetToReport()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i c8yIcon=\"c8y-reports\"></i>\n        <span>{{ 'Send as widget to report' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        title=\"{{ 'Create a new report with widget' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"createNewReportWithWidget()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i c8yIcon=\"c8y-reports\"></i>\n        <span>{{ 'Create a new report with widget' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  </ng-container>\n}\n\n<div class=\"content-fullpage d-grid grid__col--auto-360 gap-24\">\n  <div class=\"d-col gap-16\">\n    <c8y-charts\n      class=\"flex-grow data-point-explorer\"\n      #chart\n      [config]=\"config\"\n      [alerts]=\"alerts\"\n      [chartViewContext]=\"chartViewContext\"\n      (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n      (configChangeOnZoomOut)=\"onSliderZoom($event)\"\n      (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n      (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n      (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n      (updateActiveDatapoints)=\"updateActiveDatapoints($event)\"\n      (updateAggregatedSliderDatapoint)=\"updateAggregatedSliderDatapoint($event)\"\n    ></c8y-charts>\n    <form\n      class=\"m-l-48 m-r-48\"\n      [formGroup]=\"formGroup\"\n    >\n      <div class=\"d-grid-lg grid__col--4-4-4 gap-16\">\n        <fieldset class=\"c8y-fieldset form-group-sm m-t-md-0 p-b-8\">\n          <legend>{{ 'Axis' | translate }}</legend>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Y-axis helper lines' | translate\"\n          >\n            <input\n              name=\"yAxisSplitLines\"\n              type=\"checkbox\"\n              formControlName=\"yAxisSplitLines\"\n            />\n            <span></span>\n            <span translate>Y-axis helper lines</span>\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'X-axis helper lines' | translate\"\n          >\n            <input\n              name=\"xAxisSplitLines\"\n              type=\"checkbox\"\n              formControlName=\"xAxisSplitLines\"\n            />\n            <span></span>\n            <span translate>X-axis helper lines</span>\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Merge matching data points into single axis' | translate\"\n          >\n            <input\n              name=\"mergeMatchingDatapoints\"\n              type=\"checkbox\"\n              formControlName=\"mergeMatchingDatapoints\"\n            />\n            <span></span>\n            <span translate>Merge matching data points into single axis</span>\n            <button\n              class=\"btn-dot m-l-8\"\n              [attr.aria-label]=\"\n                'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                  | translate\n              \"\n              [tooltip]=\"\n                'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                  | translate\n              \"\n              container=\"body\"\n              type=\"button\"\n              (click)=\"$event.stopPropagation()\"\n              [adaptivePosition]=\"false\"\n            >\n              <i\n                class=\"text-info\"\n                c8yIcon=\"info\"\n              ></i>\n            </button>\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Force merge all data points into single axis' | translate\"\n          >\n            <input\n              name=\"forceMergeDatapoints\"\n              type=\"checkbox\"\n              formControlName=\"forceMergeDatapoints\"\n            />\n            <span></span>\n            <span translate>Force merge all data points into single axis</span>\n            <button\n              class=\"btn-dot m-l-8\"\n              [attr.aria-label]=\"\n                'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                  | translate\n              \"\n              [tooltip]=\"\n                'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                  | translate\n              \"\n              container=\"body\"\n              type=\"button\"\n              (click)=\"$event.stopPropagation()\"\n              [adaptivePosition]=\"false\"\n            >\n              <i\n                class=\"text-info\"\n                c8yIcon=\"info\"\n              ></i>\n            </button>\n          </label>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset form-group-sm m-t-md-0 p-b-8\">\n          <legend>{{ 'Alarms & events' | translate }}</legend>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Show vertical line when alarm occurs' | translate\"\n          >\n            <input\n              name=\"displayMarkedLine\"\n              type=\"checkbox\"\n              formControlName=\"displayMarkedLine\"\n            />\n            <span></span>\n            <span translate>Show vertical line on every occurrence</span>\n          </label>\n\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Show icon when alarm or event occurs' | translate\"\n          >\n            <input\n              name=\"displayMarkedPoint\"\n              type=\"checkbox\"\n              formControlName=\"displayMarkedPoint\"\n            />\n            <span></span>\n            <span>\n              {{\n                'Show icon when triggered`When alarms and events occur the icon will be shown`'\n                  | translate\n              }}\n            </span>\n            <button\n              class=\"btn-dot m-l-8\"\n              [attr.aria-label]=\"\n                'Some alarms or events have no matching data points. No icons will be shown for them.'\n                  | translate\n              \"\n              [tooltip]=\"\n                'Some alarms or events have no matching data points. No icons will be shown for them.'\n                  | translate\n              \"\n              container=\"body\"\n              type=\"button\"\n              *ngIf=\"alarmsOrEventsHaveNoMatchingDps\"\n              (click)=\"$event.stopPropagation()\"\n              [adaptivePosition]=\"false\"\n            >\n              <i\n                class=\"text-info\"\n                c8yIcon=\"info\"\n              ></i>\n            </button>\n          </label>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset form-group-sm m-t-md-0 p-b-8\">\n          <legend>{{ 'Chart' | translate }}</legend>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Show labels and units' | translate\"\n          >\n            <input\n              name=\"showLabelAndUnit\"\n              type=\"checkbox\"\n              formControlName=\"showLabelAndUnit\"\n            />\n            <span></span>\n            <span translate>Display labels and units on Y-axis</span>\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Show slider' | translate\"\n          >\n            <input\n              name=\"showSlider\"\n              type=\"checkbox\"\n              formControlName=\"showSlider\"\n            />\n            <span></span>\n            <span translate>Show slider</span>\n          </label>\n        </fieldset>\n      </div>\n    </form>\n  </div>\n  <div class=\"card inner-scroll bg-level-1\">\n    <form\n      class=\"bg-inherit\"\n      [formGroup]=\"formGroup\"\n    >\n      <c8y-datapoint-selection-list\n        class=\"bg-inherit separator-top d-block\"\n        name=\"datapoints\"\n        [minActiveCount]=\"0\"\n        [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n        [config]=\"{ contextAsset: contextAsset }\"\n        formControlName=\"datapoints\"\n        [allowDragAndDrop]=\"true\"\n      ></c8y-datapoint-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"bg-inherit\"\n        name=\"alarms\"\n        formControlName=\"alarms\"\n        [timelineType]=\"'ALARM'\"\n        [datapoints]=\"config.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"bg-inherit\"\n        name=\"events\"\n        formControlName=\"events\"\n        [timelineType]=\"'EVENT'\"\n        [datapoints]=\"config.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <div class=\"p-l-16 p-r-16 form-group p-b-16\">\n        <label\n          [title]=\"'Number of decimal places' | translate\"\n          translate\n        >\n          Number of decimal places\n        </label>\n        <input\n          class=\"form-control\"\n          name=\"numberOfDecimalPlaces\"\n          type=\"number\"\n          formControlName=\"numberOfDecimalPlaces\"\n          [placeholder]=\"'e.g. {{ example }}' | translate: { example: 1 }\"\n        />\n        <c8y-messages\n          [show]=\"\n            formGroup.controls?.numberOfDecimalPlaces?.touched &&\n            formGroup?.controls?.numberOfDecimalPlaces?.errors\n          \"\n        ></c8y-messages>\n      </div>\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i4$1.DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle"], outputs: ["isValid", "change"] }, { kind: "ngmodule", type: AlarmEventSelectorModule }, { kind: "component", type: i5$1.AlarmEventSelectionListComponent, selector: "c8y-alarm-event-selection-list", inputs: ["timelineType", "canRemove", "canEdit", "canDragAndDrop", "title", "addButtonLabel", "hideSource", "inline", "activeToggleAsSwitch", "omitProperties", "datapoints", "config"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6.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: "ngmodule", type: PopoverModule }, { kind: "component", type: TimeContextComponent, selector: "c8y-time-context", inputs: ["changedDateContext", "controlsAvailable", "timeContext", "context"], outputs: ["contextChange"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts", "chartViewContext"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled", "finishLoading", "updateActiveDatapoints", "updateAggregatedSliderDatapoint"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: DatapointsExportSelectorComponent, selector: "c8y-datapoints-export-selector", inputs: ["containerClass", "exportConfig"], outputs: ["isOpen"] }, { kind: "component", type: WorkspaceConfigComponent, selector: "c8y-workspace-config", inputs: ["updatedConfig", "silent", "defaultConfigurationId"], outputs: ["onConfigurationChange"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
+        ], viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true }, { propertyName: "timeContext", first: true, predicate: ["timeContext"], descendants: true }], ngImport: i0, template: "<c8y-title>{{ 'Data explorer' | translate }}</c8y-title>\n\n<c8y-time-context\n  #timeContext\n  (contextChange)=\"onTimeContextChange($event)\"\n  [changedDateContext]=\"timeProps\"\n  [timeContext]=\"(settings$ | async)?.timeContext\"\n></c8y-time-context>\n\n<c8y-action-bar-item [placement]=\"'left'\">\n  <c8y-workspace-config\n    [updatedConfig]=\"config\"\n    [silent]=\"(settings$ | async)?.hideWorkspaceConfig\"\n    (onConfigurationChange)=\"onConfigurationChange($event)\"\n  ></c8y-workspace-config>\n</c8y-action-bar-item>\n\n@if (!(settings$ | async)?.hideExportSelector) {\n  <c8y-action-bar-item [placement]=\"'right'\">\n    <c8y-datapoints-export-selector\n      [exportConfig]=\"exportConfig\"\n      [containerClass]=\"'d-contents'\"\n    ></c8y-datapoints-export-selector>\n  </c8y-action-bar-item>\n}\n\n@if (!(settings$ | async)?.hideWidgetActions) {\n  @if (contextAsset) {\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Send as widget to dashboard' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"sendAsWidgetToDashboard()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i c8yIcon=\"th\"></i>\n        <span>{{ 'Send as widget to dashboard' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  } @else {\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        title=\"{{ 'Send as widget to report' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"sendAsWidgetToReport()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i c8yIcon=\"c8y-reports\"></i>\n        <span>{{ 'Send as widget to report' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        title=\"{{ 'Create a new report with widget' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"createNewReportWithWidget()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i c8yIcon=\"c8y-reports\"></i>\n        <span>{{ 'Create a new report with widget' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  }\n}\n\n<div class=\"content-fullpage d-grid grid__col--auto-360 gap-24\">\n  <div class=\"d-col gap-16\">\n    <c8y-charts\n      class=\"flex-grow data-point-explorer\"\n      #chart\n      [config]=\"config\"\n      [alerts]=\"alerts\"\n      [chartViewContext]=\"chartViewContext\"\n      (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n      (configChangeOnZoomOut)=\"onSliderZoom($event)\"\n      (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n      (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n      (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n      (updateActiveDatapoints)=\"updateActiveDatapoints($event)\"\n      (updateAggregatedSliderDatapoint)=\"updateAggregatedSliderDatapoint($event)\"\n    ></c8y-charts>\n    <form\n      class=\"m-l-48 m-r-48\"\n      [formGroup]=\"formGroup\"\n    >\n      <div class=\"d-grid-lg grid__col--4-4-4 gap-16\">\n        <fieldset class=\"c8y-fieldset form-group-sm m-t-md-0 p-b-8\">\n          <legend>{{ 'Axis' | translate }}</legend>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Y-axis helper lines' | translate\"\n          >\n            <input\n              name=\"yAxisSplitLines\"\n              type=\"checkbox\"\n              formControlName=\"yAxisSplitLines\"\n            />\n            <span></span>\n            <span translate>Y-axis helper lines</span>\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'X-axis helper lines' | translate\"\n          >\n            <input\n              name=\"xAxisSplitLines\"\n              type=\"checkbox\"\n              formControlName=\"xAxisSplitLines\"\n            />\n            <span></span>\n            <span translate>X-axis helper lines</span>\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Merge matching data points into single axis' | translate\"\n          >\n            <input\n              name=\"mergeMatchingDatapoints\"\n              type=\"checkbox\"\n              formControlName=\"mergeMatchingDatapoints\"\n            />\n            <span></span>\n            <span translate>Merge matching data points into single axis</span>\n            <button\n              class=\"btn-dot m-l-8\"\n              [attr.aria-label]=\"\n                'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                  | translate\n              \"\n              [tooltip]=\"\n                'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                  | translate\n              \"\n              container=\"body\"\n              type=\"button\"\n              (click)=\"$event.stopPropagation()\"\n              [adaptivePosition]=\"false\"\n            >\n              <i\n                class=\"text-info\"\n                c8yIcon=\"info\"\n              ></i>\n            </button>\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Force merge all data points into single axis' | translate\"\n          >\n            <input\n              name=\"forceMergeDatapoints\"\n              type=\"checkbox\"\n              formControlName=\"forceMergeDatapoints\"\n            />\n            <span></span>\n            <span translate>Force merge all data points into single axis</span>\n            <button\n              class=\"btn-dot m-l-8\"\n              [attr.aria-label]=\"\n                'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                  | translate\n              \"\n              [tooltip]=\"\n                'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                  | translate\n              \"\n              container=\"body\"\n              type=\"button\"\n              (click)=\"$event.stopPropagation()\"\n              [adaptivePosition]=\"false\"\n            >\n              <i\n                class=\"text-info\"\n                c8yIcon=\"info\"\n              ></i>\n            </button>\n          </label>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset form-group-sm m-t-md-0 p-b-8\">\n          <legend>{{ 'Alarms & events' | translate }}</legend>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Show vertical line when alarm occurs' | translate\"\n          >\n            <input\n              name=\"displayMarkedLine\"\n              type=\"checkbox\"\n              formControlName=\"displayMarkedLine\"\n            />\n            <span></span>\n            <span translate>Show vertical line on every occurrence</span>\n          </label>\n\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Show icon when alarm or event occurs' | translate\"\n          >\n            <input\n              name=\"displayMarkedPoint\"\n              type=\"checkbox\"\n              formControlName=\"displayMarkedPoint\"\n            />\n            <span></span>\n            <span>\n              {{\n                'Show icon when triggered`When alarms and events occur the icon will be shown`'\n                  | translate\n              }}\n            </span>\n            @if (alarmsOrEventsHaveNoMatchingDps) {\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            }\n          </label>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset form-group-sm m-t-md-0 p-b-8\">\n          <legend>{{ 'Chart' | translate }}</legend>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Show labels and units' | translate\"\n          >\n            <input\n              name=\"showLabelAndUnit\"\n              type=\"checkbox\"\n              formControlName=\"showLabelAndUnit\"\n            />\n            <span></span>\n            <span translate>Display labels and units on Y-axis</span>\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Show slider' | translate\"\n          >\n            <input\n              name=\"showSlider\"\n              type=\"checkbox\"\n              formControlName=\"showSlider\"\n            />\n            <span></span>\n            <span translate>Show slider</span>\n          </label>\n        </fieldset>\n      </div>\n    </form>\n  </div>\n  <div class=\"card inner-scroll bg-level-1\">\n    <form\n      class=\"bg-inherit\"\n      [formGroup]=\"formGroup\"\n    >\n      <c8y-datapoint-selection-list\n        class=\"bg-inherit separator-top d-block\"\n        name=\"datapoints\"\n        [minActiveCount]=\"0\"\n        [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n        [config]=\"{ contextAsset: contextAsset }\"\n        formControlName=\"datapoints\"\n        [allowDragAndDrop]=\"true\"\n      ></c8y-datapoint-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"bg-inherit\"\n        name=\"alarms\"\n        formControlName=\"alarms\"\n        [timelineType]=\"'ALARM'\"\n        [datapoints]=\"config.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"bg-inherit\"\n        name=\"events\"\n        formControlName=\"events\"\n        [timelineType]=\"'EVENT'\"\n        [datapoints]=\"config.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <div class=\"p-l-16 p-r-16 form-group p-b-16\">\n        <label\n          [title]=\"'Number of decimal places' | translate\"\n          translate\n        >\n          Number of decimal places\n        </label>\n        <input\n          class=\"form-control\"\n          name=\"numberOfDecimalPlaces\"\n          type=\"number\"\n          formControlName=\"numberOfDecimalPlaces\"\n          [placeholder]=\"'e.g. {{ example }}' | translate: { example: 1 }\"\n        />\n        <c8y-messages\n          [show]=\"\n            formGroup.controls?.numberOfDecimalPlaces?.touched &&\n            formGroup?.controls?.numberOfDecimalPlaces?.errors\n          \"\n        ></c8y-messages>\n      </div>\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.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: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i2.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: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i3$1.DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle"], outputs: ["isValid", "change"] }, { kind: "ngmodule", type: AlarmEventSelectorModule }, { kind: "component", type: i4$1.AlarmEventSelectionListComponent, selector: "c8y-alarm-event-selection-list", inputs: ["timelineType", "canRemove", "canEdit", "canDragAndDrop", "title", "addButtonLabel", "hideSource", "inline", "activeToggleAsSwitch", "omitProperties", "datapoints", "config"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6.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: "ngmodule", type: PopoverModule }, { kind: "component", type: TimeContextComponent, selector: "c8y-time-context", inputs: ["changedDateContext", "controlsAvailable", "timeContext", "context"], outputs: ["contextChange"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts", "chartViewContext"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled", "finishLoading", "updateActiveDatapoints", "updateAggregatedSliderDatapoint"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: DatapointsExportSelectorComponent, selector: "c8y-datapoints-export-selector", inputs: ["containerClass", "exportConfig"], outputs: ["isOpen"] }, { kind: "component", type: WorkspaceConfigComponent, selector: "c8y-workspace-config", inputs: ["updatedConfig", "silent", "defaultConfigurationId"], outputs: ["onConfigurationChange"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointExplorerComponent, decorators: [{
             type: Component,
@@ -903,7 +1227,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         ChartAlarmsService,
                         ChartHelpersService,
                         WidgetTimeContextDateRangeService
-                    ], template: "<c8y-title>{{ 'Data explorer' | translate }}</c8y-title>\n\n<c8y-time-context\n  #timeContext\n  (contextChange)=\"onTimeContextChange($event)\"\n  [changedDateContext]=\"timeProps\"\n  [timeContext]=\"(settings$ | async)?.timeContext\"\n></c8y-time-context>\n\n<c8y-action-bar-item [placement]=\"'left'\">\n  <c8y-workspace-config\n    [updatedConfig]=\"config\"\n    [silent]=\"(settings$ | async)?.hideWorkspaceConfig\"\n    (onConfigurationChange)=\"onConfigurationChange($event)\"\n  ></c8y-workspace-config>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  *ngIf=\"!(settings$ | async)?.hideExportSelector\"\n  [placement]=\"'right'\"\n>\n  <c8y-datapoints-export-selector\n    [exportConfig]=\"exportConfig\"\n    [containerClass]=\"'d-contents'\"\n  ></c8y-datapoints-export-selector>\n</c8y-action-bar-item>\n\n@if (!(settings$ | async)?.hideWidgetActions) {\n  <ng-container *ngIf=\"contextAsset\">\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Send as widget to dashboard' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"sendAsWidgetToDashboard()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i c8yIcon=\"th\"></i>\n        <span>{{ 'Send as widget to dashboard' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  </ng-container>\n\n  <ng-container *ngIf=\"!contextAsset\">\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        title=\"{{ 'Send as widget to report' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"sendAsWidgetToReport()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i c8yIcon=\"c8y-reports\"></i>\n        <span>{{ 'Send as widget to report' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        title=\"{{ 'Create a new report with widget' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"createNewReportWithWidget()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i c8yIcon=\"c8y-reports\"></i>\n        <span>{{ 'Create a new report with widget' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  </ng-container>\n}\n\n<div class=\"content-fullpage d-grid grid__col--auto-360 gap-24\">\n  <div class=\"d-col gap-16\">\n    <c8y-charts\n      class=\"flex-grow data-point-explorer\"\n      #chart\n      [config]=\"config\"\n      [alerts]=\"alerts\"\n      [chartViewContext]=\"chartViewContext\"\n      (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n      (configChangeOnZoomOut)=\"onSliderZoom($event)\"\n      (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n      (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n      (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n      (updateActiveDatapoints)=\"updateActiveDatapoints($event)\"\n      (updateAggregatedSliderDatapoint)=\"updateAggregatedSliderDatapoint($event)\"\n    ></c8y-charts>\n    <form\n      class=\"m-l-48 m-r-48\"\n      [formGroup]=\"formGroup\"\n    >\n      <div class=\"d-grid-lg grid__col--4-4-4 gap-16\">\n        <fieldset class=\"c8y-fieldset form-group-sm m-t-md-0 p-b-8\">\n          <legend>{{ 'Axis' | translate }}</legend>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Y-axis helper lines' | translate\"\n          >\n            <input\n              name=\"yAxisSplitLines\"\n              type=\"checkbox\"\n              formControlName=\"yAxisSplitLines\"\n            />\n            <span></span>\n            <span translate>Y-axis helper lines</span>\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'X-axis helper lines' | translate\"\n          >\n            <input\n              name=\"xAxisSplitLines\"\n              type=\"checkbox\"\n              formControlName=\"xAxisSplitLines\"\n            />\n            <span></span>\n            <span translate>X-axis helper lines</span>\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Merge matching data points into single axis' | translate\"\n          >\n            <input\n              name=\"mergeMatchingDatapoints\"\n              type=\"checkbox\"\n              formControlName=\"mergeMatchingDatapoints\"\n            />\n            <span></span>\n            <span translate>Merge matching data points into single axis</span>\n            <button\n              class=\"btn-dot m-l-8\"\n              [attr.aria-label]=\"\n                'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                  | translate\n              \"\n              [tooltip]=\"\n                'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                  | translate\n              \"\n              container=\"body\"\n              type=\"button\"\n              (click)=\"$event.stopPropagation()\"\n              [adaptivePosition]=\"false\"\n            >\n              <i\n                class=\"text-info\"\n                c8yIcon=\"info\"\n              ></i>\n            </button>\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Force merge all data points into single axis' | translate\"\n          >\n            <input\n              name=\"forceMergeDatapoints\"\n              type=\"checkbox\"\n              formControlName=\"forceMergeDatapoints\"\n            />\n            <span></span>\n            <span translate>Force merge all data points into single axis</span>\n            <button\n              class=\"btn-dot m-l-8\"\n              [attr.aria-label]=\"\n                'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                  | translate\n              \"\n              [tooltip]=\"\n                'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                  | translate\n              \"\n              container=\"body\"\n              type=\"button\"\n              (click)=\"$event.stopPropagation()\"\n              [adaptivePosition]=\"false\"\n            >\n              <i\n                class=\"text-info\"\n                c8yIcon=\"info\"\n              ></i>\n            </button>\n          </label>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset form-group-sm m-t-md-0 p-b-8\">\n          <legend>{{ 'Alarms & events' | translate }}</legend>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Show vertical line when alarm occurs' | translate\"\n          >\n            <input\n              name=\"displayMarkedLine\"\n              type=\"checkbox\"\n              formControlName=\"displayMarkedLine\"\n            />\n            <span></span>\n            <span translate>Show vertical line on every occurrence</span>\n          </label>\n\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Show icon when alarm or event occurs' | translate\"\n          >\n            <input\n              name=\"displayMarkedPoint\"\n              type=\"checkbox\"\n              formControlName=\"displayMarkedPoint\"\n            />\n            <span></span>\n            <span>\n              {{\n                'Show icon when triggered`When alarms and events occur the icon will be shown`'\n                  | translate\n              }}\n            </span>\n            <button\n              class=\"btn-dot m-l-8\"\n              [attr.aria-label]=\"\n                'Some alarms or events have no matching data points. No icons will be shown for them.'\n                  | translate\n              \"\n              [tooltip]=\"\n                'Some alarms or events have no matching data points. No icons will be shown for them.'\n                  | translate\n              \"\n              container=\"body\"\n              type=\"button\"\n              *ngIf=\"alarmsOrEventsHaveNoMatchingDps\"\n              (click)=\"$event.stopPropagation()\"\n              [adaptivePosition]=\"false\"\n            >\n              <i\n                class=\"text-info\"\n                c8yIcon=\"info\"\n              ></i>\n            </button>\n          </label>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset form-group-sm m-t-md-0 p-b-8\">\n          <legend>{{ 'Chart' | translate }}</legend>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Show labels and units' | translate\"\n          >\n            <input\n              name=\"showLabelAndUnit\"\n              type=\"checkbox\"\n              formControlName=\"showLabelAndUnit\"\n            />\n            <span></span>\n            <span translate>Display labels and units on Y-axis</span>\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Show slider' | translate\"\n          >\n            <input\n              name=\"showSlider\"\n              type=\"checkbox\"\n              formControlName=\"showSlider\"\n            />\n            <span></span>\n            <span translate>Show slider</span>\n          </label>\n        </fieldset>\n      </div>\n    </form>\n  </div>\n  <div class=\"card inner-scroll bg-level-1\">\n    <form\n      class=\"bg-inherit\"\n      [formGroup]=\"formGroup\"\n    >\n      <c8y-datapoint-selection-list\n        class=\"bg-inherit separator-top d-block\"\n        name=\"datapoints\"\n        [minActiveCount]=\"0\"\n        [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n        [config]=\"{ contextAsset: contextAsset }\"\n        formControlName=\"datapoints\"\n        [allowDragAndDrop]=\"true\"\n      ></c8y-datapoint-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"bg-inherit\"\n        name=\"alarms\"\n        formControlName=\"alarms\"\n        [timelineType]=\"'ALARM'\"\n        [datapoints]=\"config.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"bg-inherit\"\n        name=\"events\"\n        formControlName=\"events\"\n        [timelineType]=\"'EVENT'\"\n        [datapoints]=\"config.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <div class=\"p-l-16 p-r-16 form-group p-b-16\">\n        <label\n          [title]=\"'Number of decimal places' | translate\"\n          translate\n        >\n          Number of decimal places\n        </label>\n        <input\n          class=\"form-control\"\n          name=\"numberOfDecimalPlaces\"\n          type=\"number\"\n          formControlName=\"numberOfDecimalPlaces\"\n          [placeholder]=\"'e.g. {{ example }}' | translate: { example: 1 }\"\n        />\n        <c8y-messages\n          [show]=\"\n            formGroup.controls?.numberOfDecimalPlaces?.touched &&\n            formGroup?.controls?.numberOfDecimalPlaces?.errors\n          \"\n        ></c8y-messages>\n      </div>\n    </form>\n  </div>\n</div>\n" }]
+                    ], template: "<c8y-title>{{ 'Data explorer' | translate }}</c8y-title>\n\n<c8y-time-context\n  #timeContext\n  (contextChange)=\"onTimeContextChange($event)\"\n  [changedDateContext]=\"timeProps\"\n  [timeContext]=\"(settings$ | async)?.timeContext\"\n></c8y-time-context>\n\n<c8y-action-bar-item [placement]=\"'left'\">\n  <c8y-workspace-config\n    [updatedConfig]=\"config\"\n    [silent]=\"(settings$ | async)?.hideWorkspaceConfig\"\n    (onConfigurationChange)=\"onConfigurationChange($event)\"\n  ></c8y-workspace-config>\n</c8y-action-bar-item>\n\n@if (!(settings$ | async)?.hideExportSelector) {\n  <c8y-action-bar-item [placement]=\"'right'\">\n    <c8y-datapoints-export-selector\n      [exportConfig]=\"exportConfig\"\n      [containerClass]=\"'d-contents'\"\n    ></c8y-datapoints-export-selector>\n  </c8y-action-bar-item>\n}\n\n@if (!(settings$ | async)?.hideWidgetActions) {\n  @if (contextAsset) {\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Send as widget to dashboard' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"sendAsWidgetToDashboard()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i c8yIcon=\"th\"></i>\n        <span>{{ 'Send as widget to dashboard' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  } @else {\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        title=\"{{ 'Send as widget to report' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"sendAsWidgetToReport()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i c8yIcon=\"c8y-reports\"></i>\n        <span>{{ 'Send as widget to report' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        title=\"{{ 'Create a new report with widget' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"createNewReportWithWidget()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i c8yIcon=\"c8y-reports\"></i>\n        <span>{{ 'Create a new report with widget' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  }\n}\n\n<div class=\"content-fullpage d-grid grid__col--auto-360 gap-24\">\n  <div class=\"d-col gap-16\">\n    <c8y-charts\n      class=\"flex-grow data-point-explorer\"\n      #chart\n      [config]=\"config\"\n      [alerts]=\"alerts\"\n      [chartViewContext]=\"chartViewContext\"\n      (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n      (configChangeOnZoomOut)=\"onSliderZoom($event)\"\n      (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n      (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n      (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n      (updateActiveDatapoints)=\"updateActiveDatapoints($event)\"\n      (updateAggregatedSliderDatapoint)=\"updateAggregatedSliderDatapoint($event)\"\n    ></c8y-charts>\n    <form\n      class=\"m-l-48 m-r-48\"\n      [formGroup]=\"formGroup\"\n    >\n      <div class=\"d-grid-lg grid__col--4-4-4 gap-16\">\n        <fieldset class=\"c8y-fieldset form-group-sm m-t-md-0 p-b-8\">\n          <legend>{{ 'Axis' | translate }}</legend>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Y-axis helper lines' | translate\"\n          >\n            <input\n              name=\"yAxisSplitLines\"\n              type=\"checkbox\"\n              formControlName=\"yAxisSplitLines\"\n            />\n            <span></span>\n            <span translate>Y-axis helper lines</span>\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'X-axis helper lines' | translate\"\n          >\n            <input\n              name=\"xAxisSplitLines\"\n              type=\"checkbox\"\n              formControlName=\"xAxisSplitLines\"\n            />\n            <span></span>\n            <span translate>X-axis helper lines</span>\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Merge matching data points into single axis' | translate\"\n          >\n            <input\n              name=\"mergeMatchingDatapoints\"\n              type=\"checkbox\"\n              formControlName=\"mergeMatchingDatapoints\"\n            />\n            <span></span>\n            <span translate>Merge matching data points into single axis</span>\n            <button\n              class=\"btn-dot m-l-8\"\n              [attr.aria-label]=\"\n                'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                  | translate\n              \"\n              [tooltip]=\"\n                'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                  | translate\n              \"\n              container=\"body\"\n              type=\"button\"\n              (click)=\"$event.stopPropagation()\"\n              [adaptivePosition]=\"false\"\n            >\n              <i\n                class=\"text-info\"\n                c8yIcon=\"info\"\n              ></i>\n            </button>\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Force merge all data points into single axis' | translate\"\n          >\n            <input\n              name=\"forceMergeDatapoints\"\n              type=\"checkbox\"\n              formControlName=\"forceMergeDatapoints\"\n            />\n            <span></span>\n            <span translate>Force merge all data points into single axis</span>\n            <button\n              class=\"btn-dot m-l-8\"\n              [attr.aria-label]=\"\n                'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                  | translate\n              \"\n              [tooltip]=\"\n                'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                  | translate\n              \"\n              container=\"body\"\n              type=\"button\"\n              (click)=\"$event.stopPropagation()\"\n              [adaptivePosition]=\"false\"\n            >\n              <i\n                class=\"text-info\"\n                c8yIcon=\"info\"\n              ></i>\n            </button>\n          </label>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset form-group-sm m-t-md-0 p-b-8\">\n          <legend>{{ 'Alarms & events' | translate }}</legend>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Show vertical line when alarm occurs' | translate\"\n          >\n            <input\n              name=\"displayMarkedLine\"\n              type=\"checkbox\"\n              formControlName=\"displayMarkedLine\"\n            />\n            <span></span>\n            <span translate>Show vertical line on every occurrence</span>\n          </label>\n\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Show icon when alarm or event occurs' | translate\"\n          >\n            <input\n              name=\"displayMarkedPoint\"\n              type=\"checkbox\"\n              formControlName=\"displayMarkedPoint\"\n            />\n            <span></span>\n            <span>\n              {{\n                'Show icon when triggered`When alarms and events occur the icon will be shown`'\n                  | translate\n              }}\n            </span>\n            @if (alarmsOrEventsHaveNoMatchingDps) {\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            }\n          </label>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset form-group-sm m-t-md-0 p-b-8\">\n          <legend>{{ 'Chart' | translate }}</legend>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Show labels and units' | translate\"\n          >\n            <input\n              name=\"showLabelAndUnit\"\n              type=\"checkbox\"\n              formControlName=\"showLabelAndUnit\"\n            />\n            <span></span>\n            <span translate>Display labels and units on Y-axis</span>\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Show slider' | translate\"\n          >\n            <input\n              name=\"showSlider\"\n              type=\"checkbox\"\n              formControlName=\"showSlider\"\n            />\n            <span></span>\n            <span translate>Show slider</span>\n          </label>\n        </fieldset>\n      </div>\n    </form>\n  </div>\n  <div class=\"card inner-scroll bg-level-1\">\n    <form\n      class=\"bg-inherit\"\n      [formGroup]=\"formGroup\"\n    >\n      <c8y-datapoint-selection-list\n        class=\"bg-inherit separator-top d-block\"\n        name=\"datapoints\"\n        [minActiveCount]=\"0\"\n        [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n        [config]=\"{ contextAsset: contextAsset }\"\n        formControlName=\"datapoints\"\n        [allowDragAndDrop]=\"true\"\n      ></c8y-datapoint-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"bg-inherit\"\n        name=\"alarms\"\n        formControlName=\"alarms\"\n        [timelineType]=\"'ALARM'\"\n        [datapoints]=\"config.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"bg-inherit\"\n        name=\"events\"\n        formControlName=\"events\"\n        [timelineType]=\"'EVENT'\"\n        [datapoints]=\"config.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <div class=\"p-l-16 p-r-16 form-group p-b-16\">\n        <label\n          [title]=\"'Number of decimal places' | translate\"\n          translate\n        >\n          Number of decimal places\n        </label>\n        <input\n          class=\"form-control\"\n          name=\"numberOfDecimalPlaces\"\n          type=\"number\"\n          formControlName=\"numberOfDecimalPlaces\"\n          [placeholder]=\"'e.g. {{ example }}' | translate: { example: 1 }\"\n        />\n        <c8y-messages\n          [show]=\"\n            formGroup.controls?.numberOfDecimalPlaces?.touched &&\n            formGroup?.controls?.numberOfDecimalPlaces?.errors\n          \"\n        ></c8y-messages>\n      </div>\n    </form>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { chart: [{
                 type: ViewChild,
                 args: ['chart']
@@ -916,5 +1240,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DatapointExplorerComponent, NameGeneratorService, WorkspaceConfigurationService };
+export { DATA_EXPLORER_BASE_CONFIG, DataExplorerService, DatapointExplorerComponent, KEY_MAP, NameGeneratorService, REVERSE_KEY_MAP, WorkspaceConfigurationService };
 //# sourceMappingURL=c8y-ngx-components-datapoint-explorer-view.mjs.map