@c8y/ngx-components 1023.12.0 → 1023.14.2

package/datapoint-explorer/index.d.ts

@@ -1,5 +1,7 @@
 import { Observable } from 'rxjs';
 import * as i0 from '@angular/core';
+import { IManagedObject } from '@c8y/client';
+import { DatapointsGraphWidgetConfig } from '@c8y/ngx-components/echart';
 
 declare function canActivateDatapointExplorer(): Observable<boolean>;
 declare class DatapointExplorerModule {
@@ -8,5 +10,80 @@ declare class DatapointExplorerModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<DatapointExplorerModule>;
 }
 
-export { DatapointExplorerModule, canActivateDatapointExplorer };
+interface DataExplorerUrlConfig {
+    datapoints?: BaseDatapointConfig[];
+    alarmsEventsConfigs?: BaseAlarmEventConfig[];
+    dateFrom?: Date | string | null;
+    dateTo?: Date | string | null;
+    [key: string]: any;
+}
+interface BaseDatapointConfig {
+    fragment: string;
+    series: string;
+    __target?: {
+        id?: string;
+        [key: string]: any;
+    };
+    __template?: string;
+    [key: string]: any;
+}
+interface BaseAlarmEventConfig {
+    timelineType: string;
+    label: string;
+    filters: {
+        type: string;
+        [key: string]: any;
+    };
+    __target?: {
+        id?: string;
+        [key: string]: any;
+    };
+    [key: string]: any;
+}
+
+declare class DataExplorerService {
+    private readonly inventory;
+    private readonly contextDashboardService;
+    private readonly workspaceConfigurationService;
+    private readonly moChunkLoader;
+    private readonly datapointSyncService;
+    private readonly router;
+    private readonly maxNumberOfManagedObjectsPerRequest;
+    fetchReportDashboard(reportId: string): Promise<IManagedObject>;
+    fetchContextDashboard(dashboardId: string, contextAsset: IManagedObject): Promise<IManagedObject>;
+    loadManagedObjectsInChunks(uniqIds: string[]): Promise<{
+        result: IManagedObject[];
+        errors: any[];
+    }>;
+    /**
+     * 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: DataExplorerUrlConfig, label: string, id: string): void;
+    /**
+     * 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: DataExplorerUrlConfig, label: string, id: string): string;
+    processAlarmEventConfigs(config: DatapointsGraphWidgetConfig): void;
+    processDatapoints(config: DatapointsGraphWidgetConfig): void;
+    /**
+     * Generates a color from a fixed palette based on the index.
+     * Used to assign colors to alarm/event configs in the UI.
+     */
+    generateColor(index: number): string;
+    loadAndAssignManagedObjects(config: DatapointsGraphWidgetConfig, uniqueIds: string[]): Promise<void>;
+    private loadAChunkOfManagedObjects;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DataExplorerService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DataExplorerService>;
+}
+
+export { DataExplorerService, DatapointExplorerModule, canActivateDatapointExplorer };
 //# sourceMappingURL=index.d.ts.map

package/datapoint-explorer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sources":["../../datapoint-explorer/datapoint-explorer.module.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAYA,iBAAA,4BAAA,IAAA,UAAA;AAKA,cAAA,uBAAA;;;;AAkDuC;;;;"}
+{"version":3,"file":"index.d.ts","sources":["../../datapoint-explorer/datapoint-explorer.module.ts","../../datapoint-explorer/view/datapoint-explorer.model.ts","../../datapoint-explorer/view/datapoint-explorer.service.ts"],"sourcesContent":[null,null,null],"names":[],"mappings":";;;;;AAYA;AAKA;;;;AAkDuC;;;ACvDrC;AACA;AACA;AACA;AAGA;AACD;;;;AAKC;;AAEE;;;AAIF;AACD;;;;AAMC;;AAEE;;AAGF;;AAEE;;AAEF;AACD;;AClCD;AAIE;AACA;AACA;AACA;AACA;AACA;AACA;;AAWM;AAUA;;;;AAUN;;;;;;AAMG;AACH;AAKA;;;;;;;AAOG;AACH;AAQA;AAWA;AAiBA;;;AAGG;AACH;AAMM;;;;AAuBP;;"}

package/datapoint-explorer/view/index.d.ts

@@ -1,15 +1,15 @@
 import * as i0 from '@angular/core';
 import { WritableSignal, ElementRef } from '@angular/core';
 import { DatapointsGraphWidgetConfig } from '@c8y/ngx-components/echart';
+import { TimeContext, TimeContextComponent } from '@c8y/ngx-components/time-context';
 import { FormGroup } from '@angular/forms';
-import { IIdentified, aggregationType } from '@c8y/client';
+import { IIdentified, aggregationType, IManagedObject } from '@c8y/client';
 import { DynamicComponentAlertAggregator } from '@c8y/ngx-components';
 import { SelectedDatapoint } from '@c8y/ngx-components/alarm-event-selector';
 import { KPIDetails, DatapointAttributesFormConfig } from '@c8y/ngx-components/datapoint-selector';
 import { ExportConfig } from '@c8y/ngx-components/datapoints-export-selector';
 import { DatapointsGraphWidgetConfig as DatapointsGraphWidgetConfig$1, AlarmDetailsExtended, EventDetailsExtended, DatapointsGraphKPIDetails, CHART_VIEW_CONTEXT, TimeContextProps, AlarmOrEventExtended } from '@c8y/ngx-components/echart/models';
 import { Interval } from '@c8y/ngx-components/interval-picker';
-import { TimeContext, TimeContextComponent } from '@c8y/ngx-components/time-context';
 import { Observable } from 'rxjs';
 
 declare class NameGeneratorService {
@@ -24,27 +24,118 @@ interface WorkspaceConfiguration {
     config: DatapointsGraphWidgetConfig;
 }
 
+interface Settings {
+    hideWorkspaceConfig?: boolean;
+    hideExportSelector?: boolean;
+    hideWidgetActions?: boolean;
+    timeContext?: TimeContext;
+    defaultConfigurationId?: string;
+}
+interface DataExplorerUrlConfig {
+    datapoints?: BaseDatapointConfig[];
+    alarmsEventsConfigs?: BaseAlarmEventConfig[];
+    dateFrom?: Date | string | null;
+    dateTo?: Date | string | null;
+    [key: string]: any;
+}
+interface BaseDatapointConfig {
+    fragment: string;
+    series: string;
+    __target?: {
+        id?: string;
+        [key: string]: any;
+    };
+    __template?: string;
+    [key: string]: any;
+}
+interface BaseAlarmEventConfig {
+    timelineType: string;
+    label: string;
+    filters: {
+        type: string;
+        [key: string]: any;
+    };
+    __target?: {
+        id?: string;
+        [key: string]: any;
+    };
+    [key: string]: any;
+}
+declare const DATA_EXPLORER_BASE_CONFIG: DatapointsGraphWidgetConfig;
+declare const REVERSE_KEY_MAP: {
+    d: string;
+    a: string;
+    f: string;
+    s: string;
+    t: string;
+    m: string;
+    l: string;
+    r: string;
+    y: string;
+    df: string;
+    dt: string;
+    ac: string;
+    c: string;
+    i: string;
+    tp: string;
+};
+declare const KEY_MAP: {
+    [k: string]: string;
+};
+
 declare class WorkspaceConfigurationService {
     private readonly baseKey;
     private readonly baseDefaultKey;
     contextIdSignal: WritableSignal<number | string | null>;
+    private readonly alertService;
     get LOCAL_STORAGE_KEY(): string;
     get LOCAL_STORAGE_DEFAULT_ID_KEY(): string;
+    /**
+     * Generates a full datapoint explorer link from a bare config
+     */
+    generateExplorerLink(config: Partial<DatapointsGraphWidgetConfig> | DataExplorerUrlConfig, label: string, id: string): string;
+    /** Load workspace configs from localStorage  */
     getConfigurations(): WorkspaceConfiguration[];
     getDefaultConfigurationId(): string | null;
+    /** Save workspace configs in localStorage */
     saveConfigurations(configurations: WorkspaceConfiguration[], id: string): void;
+    /**
+     *
+     * @param urlConfig - configuration from the URL, either compressed string or already decoded object
+     * @returns
+     */
+    getConfigurationFromUrl(urlConfig: DatapointsGraphWidgetConfig | string): DatapointsGraphWidgetConfig;
+    /**
+     * 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: DatapointsGraphWidgetConfig): string;
+    /**
+     * Decode a config from the URL:
+     * - Decompress
+     * - Expand keys
+     * - Merge with base config
+     */
+    decodeConfig(urlConfig: string): Partial<DatapointsGraphWidgetConfig>;
+    /** Minify keys recursively using KEY_MAP */
+    private minifyKeys;
+    /** Expand keys recursively using REVERSE_KEY_MAP */
+    private expandKeys;
+    /**
+     * Remove properties from `config` that match `base` so only changed values remain.
+     */
+    private removeDefaults;
+    /**
+     * Cleans up __target objects to only keep id and name and remove the rest.
+     */
+    private cleanUpTargetObject;
     static ɵfac: i0.ɵɵFactoryDeclaration<WorkspaceConfigurationService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<WorkspaceConfigurationService>;
 }
 
-interface Settings {
-    hideWorkspaceConfig?: boolean;
-    hideExportSelector?: boolean;
-    hideWidgetActions?: boolean;
-    timeContext?: TimeContext;
-    defaultConfigurationId?: string;
-}
-
 declare class DatapointExplorerComponent {
     #private;
     settings$: Observable<Settings>;
@@ -82,11 +173,11 @@ declare class DatapointExplorerComponent {
     private readonly contextRouteService;
     private readonly chartHelpersService;
     private readonly gainsightService;
-    private readonly widgetTimeContextDateRangeService;
+    private readonly datapointSyncService;
     constructor();
     ngOnInit(): void;
     onTimeContextChange(timeProps: TimeContextProps): void;
-    onConfigurationChange(config: DatapointsGraphWidgetConfig$1): void;
+    onConfigurationChange(config: DatapointsGraphWidgetConfig$1): Promise<void>;
     onSliderZoom(timeProps: {
         dateFrom: Date;
         dateTo: Date;
@@ -100,6 +191,7 @@ declare class DatapointExplorerComponent {
     createNewReportWithWidget(): Promise<void>;
     sendAsWidgetToReport(): Promise<void>;
     sendAsWidgetToDashboard(): Promise<void>;
+    private isActualDate;
     private isAlarm;
     private isEvent;
     private hasActiveAlarms;
@@ -112,6 +204,50 @@ declare class DatapointExplorerComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<DatapointExplorerComponent, "c8y-datapoint-explorer", never, {}, {}, never, never, true, never>;
 }
 
-export { DatapointExplorerComponent, NameGeneratorService, WorkspaceConfigurationService };
-export type { Settings, WorkspaceConfiguration };
+declare class DataExplorerService {
+    private readonly inventory;
+    private readonly contextDashboardService;
+    private readonly workspaceConfigurationService;
+    private readonly moChunkLoader;
+    private readonly datapointSyncService;
+    private readonly router;
+    private readonly maxNumberOfManagedObjectsPerRequest;
+    fetchReportDashboard(reportId: string): Promise<IManagedObject>;
+    fetchContextDashboard(dashboardId: string, contextAsset: IManagedObject): Promise<IManagedObject>;
+    loadManagedObjectsInChunks(uniqIds: string[]): Promise<{
+        result: IManagedObject[];
+        errors: any[];
+    }>;
+    /**
+     * 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: DataExplorerUrlConfig, label: string, id: string): void;
+    /**
+     * 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: DataExplorerUrlConfig, label: string, id: string): string;
+    processAlarmEventConfigs(config: DatapointsGraphWidgetConfig): void;
+    processDatapoints(config: DatapointsGraphWidgetConfig): void;
+    /**
+     * Generates a color from a fixed palette based on the index.
+     * Used to assign colors to alarm/event configs in the UI.
+     */
+    generateColor(index: number): string;
+    loadAndAssignManagedObjects(config: DatapointsGraphWidgetConfig, uniqueIds: string[]): Promise<void>;
+    private loadAChunkOfManagedObjects;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DataExplorerService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DataExplorerService>;
+}
+
+export { DATA_EXPLORER_BASE_CONFIG, DataExplorerService, DatapointExplorerComponent, KEY_MAP, NameGeneratorService, REVERSE_KEY_MAP, WorkspaceConfigurationService };
+export type { BaseAlarmEventConfig, BaseDatapointConfig, DataExplorerUrlConfig, Settings, WorkspaceConfiguration };
 //# sourceMappingURL=index.d.ts.map

package/datapoint-explorer/view/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sources":["../../../datapoint-explorer/view/configuration/name-generator.service.ts","../../../datapoint-explorer/view/configuration/workspace-configuration.model.ts","../../../datapoint-explorer/view/configuration/workspace-configuration.service.ts","../../../datapoint-explorer/view/datapoint-explorer.model.ts","../../../datapoint-explorer/view/datapoint-explorer.component.ts"],"sourcesContent":[null,null,null,null,null],"names":[],"mappings":";;;;;;;;;;;;;;AAGA;AAIE;;;AAOD;;;;;;ACRA;;ACHD;AAIE;AACA;;;;;;;;;AA0BD;;;;;;;;AC1BA;;ACwDD;;AA4BE;;;;;AAKA;;;AAGA;;;;AAIA;AACA;AACA;AACA;AACA;;;AAGE;;AAEA;;AAEF;AAIA;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAOA;AA8CA;AA4CA;;;;AAyDwD;AAA2B;AAsDnF;AAMA;AAMA;AASA;AAIA;AAQM;AAuBA;AA8BA;AAmCN;AAIA;AAIA;AAIA;AAUA;AAsBA;AAWA;AAUA;;;AAyBD;;;"}
+{"version":3,"file":"index.d.ts","sources":["../../../datapoint-explorer/view/configuration/name-generator.service.ts","../../../datapoint-explorer/view/configuration/workspace-configuration.model.ts","../../../datapoint-explorer/view/datapoint-explorer.model.ts","../../../datapoint-explorer/view/configuration/workspace-configuration.service.ts","../../../datapoint-explorer/view/datapoint-explorer.component.ts","../../../datapoint-explorer/view/datapoint-explorer.service.ts"],"sourcesContent":[null,null,null,null,null,null],"names":[],"mappings":";;;;;;;;;;;;;;AAGA;AAIE;;;AAOD;;;;;;ACRA;;;;;;;;ACGA;;AAGC;AACA;AACA;AACA;AAGA;AACD;;;;AAKC;;AAEE;;;AAIF;AACD;;;;AAMC;;AAEE;;AAGF;;AAEE;;AAEF;AACD;AAED;AAsBA;;;;;;;;;;;;;;;;;AAkBA;;;;AC1EA;AAIE;AACA;;AAGA;;;AAYA;;AAEG;AACH;;;;;;AAyCA;;;;AAIG;AACH;AAYA;;;;;;AAMG;AACH;AAOA;;;;;AAKG;;;AAiBH;;AAeA;AAcA;;AAEG;AACH;AAcA;;AAEG;AACH;;;AAiCD;;ACrJD;;AA4BE;;;;;AAKA;;;AAGA;;;;AAIA;AACA;AACA;AACA;AACA;;;AAGE;;AAEA;;AAEF;AAIA;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAOA;AA8CA;;;;;AAkHwD;AAA2B;AAsDnF;AAMA;AAMA;AASA;AAIA;AAQM;AAuBA;AA8BA;AAmCN;AAOA;AAIA;AAIA;AAIA;AAUA;AAsBA;AAWA;AAUA;;;AAyBD;;AChjBD;AAIE;AACA;AACA;AACA;AACA;AACA;AACA;;AAWM;AAUA;;;;AAUN;;;;;;AAMG;AACH;AAKA;;;;;;;AAOG;AACH;AAQA;AAWA;AAiBA;;;AAGG;AACH;AAMM;;;;AAuBP;;;"}

package/echart/index.d.ts

@@ -21,6 +21,7 @@ type DatapointsGraphWidgetConfig = {
     aggregatedDatapoint?: DatapointsGraphKPIDetails;
     alarmsEventsConfigs?: AlarmOrEventExtended[];
     datapoints?: DatapointsGraphKPIDetails[] | null;
+    dataPointLegendDisplay?: string | null;
     date?: DateTimeContext;
     dateFrom?: Date | string | null;
     dateTo?: Date | string | null;
@@ -86,6 +87,11 @@ type DpValuesItem = {
     time: number;
     values: DataPointValues[];
 };
+interface LegendDisplayOptionItem {
+    value: string;
+    label: string;
+}
+declare const LEGEND_DISPLAY_OPTIONS: LegendDisplayOptionItem[];
 interface MarkPointData {
     coord: [string, number | DataPointValues | null];
     name: string;
@@ -161,6 +167,10 @@ declare const SEVERITY_LABELS: {
     readonly WARNING: "WARNING";
 };
 type SeverityType = keyof typeof Severity;
+interface SelectableDatapoint {
+    type: 'ALARM' | 'DATAPOINT' | 'EVENT';
+    original: KPIDetails | AlarmDetailsExtended | EventDetailsExtended;
+}
 
 /**
  * @param typeOfSeries is used for formatter to distinguish between events/alarms series
@@ -361,6 +371,6 @@ declare class SelectAggregatedDatapointComponent implements OnChanges {
     static ɵcmp: i0.ɵɵComponentDeclaration<SelectAggregatedDatapointComponent, "c8y-select-aggregated-datapoint", never, { "activeDatapoints": { "alias": "activeDatapoints"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
 }
 
-export { CHART_VIEW_CONTEXT, ChartAlarmsService, ChartEventsService, ChartHelpersService, ChartsComponent, DATE_SELECTION_EXTENDED, ICONS_MAP, PRODUCT_EXPERIENCE_DATA_EXPLORER_AND_GRAPH, REALTIME_TEXTS, SEVERITY_LABELS, SelectAggregatedDatapointComponent };
-export type { AlarmDetailsExtended, AlarmOrEventExtended, CustomSeriesOptions, DatapointAxisType, DatapointChartRenderType, DatapointLineType, DatapointRealtimeMeasurements, DatapointsGraphKPIDetails, DatapointsGraphWidgetConfig, DatapointsGraphWidgetTimeProps, DateString, DpValuesItem, DpWithValues, EchartsCustomOptions, EchartsSeriesOptions, EventDetailsExtended, GraphDisplayOptions, MarkLineData, MarkPointData, MeasurementSeries, SeriesDatapointInfo, SeriesValue, SeverityType, TimeContextProps, YAxisOptions, customSeriesMarkLineData, customSeriesMarkPointData };
+export { CHART_VIEW_CONTEXT, ChartAlarmsService, ChartEventsService, ChartHelpersService, ChartsComponent, DATE_SELECTION_EXTENDED, ICONS_MAP, LEGEND_DISPLAY_OPTIONS, PRODUCT_EXPERIENCE_DATA_EXPLORER_AND_GRAPH, REALTIME_TEXTS, SEVERITY_LABELS, SelectAggregatedDatapointComponent };
+export type { AlarmDetailsExtended, AlarmOrEventExtended, CustomSeriesOptions, DatapointAxisType, DatapointChartRenderType, DatapointLineType, DatapointRealtimeMeasurements, DatapointsGraphKPIDetails, DatapointsGraphWidgetConfig, DatapointsGraphWidgetTimeProps, DateString, DpValuesItem, DpWithValues, EchartsCustomOptions, EchartsSeriesOptions, EventDetailsExtended, GraphDisplayOptions, LegendDisplayOptionItem, MarkLineData, MarkPointData, MeasurementSeries, SelectableDatapoint, SeriesDatapointInfo, SeriesValue, SeverityType, TimeContextProps, YAxisOptions, customSeriesMarkLineData, customSeriesMarkPointData };
 //# sourceMappingURL=index.d.ts.map

package/echart/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sources":["../../echart/models/datapoints-graph-widget.model.ts","../../echart/models/chart.model.ts","../../echart/models/svg-icons.model.ts","../../echart/charts.component.ts","../../echart/services/chart-alarms.service.ts","../../echart/services/chart-events.service.ts","../../echart/services/chart-helpers.service.ts","../../echart/select-aggregated-datapoint/select-aggregated-datapoint.component.ts"],"sourcesContent":[null,null,null,null,null,null,null,null],"names":[],"mappings":";;;;;;;;;;;;;;AAmBM;;;;AAKA;AACJ;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;;;;AAKA;;AAEA;AACA;AACA;AACA;;;AAGA;;;;;;;;AASI;;;;;;;;;AASJ;;AAGI;;AAEJ;AACA;;AAGI;;;AAIN;;AAEG;;AAGG;AAIN;AACE;AACA;AACD;AAED;AACM;;AAEL;AAED;;;;AAIM;;;;;;;;AASJ;;;;;AAGD;;AAGC;;AAEA;;AAEE;;AAEF;;;AACD;;;;;;;AAQC;AACA;AACD;AAEK;AACA;AAEA;AAEA;AAEN;;;;AAKA;;;;;;;;;;;;;AAcM;AACA;AAEA;;;;AAKA;;;;;;;;;;AAWL;AAED;;;;;;;;ACjLA;;;;;;AAMG;AACH;AACE;;;;AAIA;;;AACD;;;AAIA;;;AAIA;AAEK;AACA;AACJ;AACE;AACD;AACF;;AAGC;AACA;AACD;AAED;AACE;AACA;AACA;AACD;;AC3CD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AAED;;;;;;;;;;;ACyDA;AA4BE;;AAEA;;;;;;;;;;;;AAYK;AACK;AAGA;AACA;AACA;AACA;AACA;AACA;;AAEV;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAyCA;;;;;AA8GuB;;;AAA4B;AAiDnD;AAOA;AAIA;AAgBA;AA6BA;AAWA;;;AAGG;AACH;AAcA;;;AAGG;AACH;AAmBA;AAeA;AA0BA;;AA8DA;;;AA0MA;AA6CA;AA0CA;AAkBA;AAWA;AAYA;;;AA6BD;;ACh4BD;AAEc;AAAQ;AAEpB;;;;;AAKG;AACG;;;AAqCP;;AC/CD;AAEc;AAAQ;AAEpB;;;;;AAKG;AACG;;;AAuBP;;AChCD;AAEE;;;;AAIG;;;;;;;;;;;AAcH;AAcA;;;AAGD;;ACtBD;;AAqBW;AACC;AAEV;;AAGA;;;AAiBA;;;AAgBD;;;"}
+{"version":3,"file":"index.d.ts","sources":["../../echart/models/datapoints-graph-widget.model.ts","../../echart/models/chart.model.ts","../../echart/models/svg-icons.model.ts","../../echart/charts.component.ts","../../echart/services/chart-alarms.service.ts","../../echart/services/chart-events.service.ts","../../echart/services/chart-helpers.service.ts","../../echart/select-aggregated-datapoint/select-aggregated-datapoint.component.ts"],"sourcesContent":[null,null,null,null,null,null,null,null],"names":[],"mappings":";;;;;;;;;;;;;;AAmBM;;;;AAKA;AACJ;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;AAKA;;AAEA;AACA;AACA;AACA;;;AAGA;;;;;;;;AASI;;;;;;;;;AASJ;;AAGI;;AAEJ;AACA;;AAGI;;;AAIN;;AAEG;;AAGG;AAIN;AACE;AACA;AACD;AAED;AACM;;AAEL;AAED;;;;AAIM;;;;;;;AAQL;AAED;;;;;AAUE;;;;;AAGD;;AAGC;;AAEA;;AAEE;;AAEF;;;AACD;;;;;;;AAQC;AACA;AACD;AAEK;AACA;AAEA;AAEA;AAEN;;;;AAKA;;;;;;;;;;;;;AAcM;AACA;AAEA;;;;AAKA;;;;;;;;;;AAWL;AAED;;;;;;;;AAUE;AACA;AACD;;ACzMD;;;;;;AAMG;AACH;AACE;;;;AAIA;;;AACD;;;AAIA;;;AAIA;AAEK;AACA;AACJ;AACE;AACD;AACF;;AAGC;AACA;AACD;AAED;AACE;AACA;AACA;AACD;;AC3CD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AAED;;;;;;;;;;;ACyDA;AA4BE;;AAEA;;;;;;;;;;;;AAYK;AACK;AAGA;AACA;AACA;AACA;AACA;AACA;;AAEV;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAyCA;;;;;AA8GuB;;;AAA4B;AAiDnD;AAOA;AAIA;AAgBA;AA6BA;AAWA;;;AAGG;AACH;AAcA;;;AAGG;AACH;AAmBA;AAeA;AA0BA;;AA8DA;;;AA0MA;AA6CA;AA0CA;AAkBA;AAWA;AAYA;;;AA6BD;;ACh4BD;AAEc;AAAQ;AAEpB;;;;;AAKG;AACG;;;AAqCP;;AC/CD;AAEc;AAAQ;AAEpB;;;;;AAKG;AACG;;;AAuBP;;AChCD;AAEE;;;;AAIG;;;;;;;;;;;AAcH;AAcA;;;AAGD;;ACtBD;;AAqBW;AACC;AAEV;;AAGA;;;AAiBA;;;AAgBD;;;"}

package/echart/models/index.d.ts

@@ -15,6 +15,7 @@ type DatapointsGraphWidgetConfig = {
     aggregatedDatapoint?: DatapointsGraphKPIDetails;
     alarmsEventsConfigs?: AlarmOrEventExtended[];
     datapoints?: DatapointsGraphKPIDetails[] | null;
+    dataPointLegendDisplay?: string | null;
     date?: DateTimeContext;
     dateFrom?: Date | string | null;
     dateTo?: Date | string | null;
@@ -80,6 +81,11 @@ type DpValuesItem = {
     time: number;
     values: DataPointValues[];
 };
+interface LegendDisplayOptionItem {
+    value: string;
+    label: string;
+}
+declare const LEGEND_DISPLAY_OPTIONS: LegendDisplayOptionItem[];
 interface MarkPointData {
     coord: [string, number | DataPointValues | null];
     name: string;
@@ -155,6 +161,10 @@ declare const SEVERITY_LABELS: {
     readonly WARNING: "WARNING";
 };
 type SeverityType = keyof typeof Severity;
+interface SelectableDatapoint {
+    type: 'ALARM' | 'DATAPOINT' | 'EVENT';
+    original: KPIDetails | AlarmDetailsExtended | EventDetailsExtended;
+}
 
 /**
  * @param typeOfSeries is used for formatter to distinguish between events/alarms series
@@ -215,6 +225,6 @@ declare const ICONS_MAP: {
     WARNING: ICONS;
 };
 
-export { CHART_VIEW_CONTEXT, DATE_SELECTION_EXTENDED, ICONS_MAP, PRODUCT_EXPERIENCE_DATA_EXPLORER_AND_GRAPH, REALTIME_TEXTS, SEVERITY_LABELS };
-export type { AlarmDetailsExtended, AlarmOrEventExtended, CustomSeriesOptions, DatapointAxisType, DatapointChartRenderType, DatapointLineType, DatapointRealtimeMeasurements, DatapointsGraphKPIDetails, DatapointsGraphWidgetConfig, DatapointsGraphWidgetTimeProps, DateString, DpValuesItem, DpWithValues, EchartsCustomOptions, EchartsSeriesOptions, EventDetailsExtended, GraphDisplayOptions, MarkLineData, MarkPointData, MeasurementSeries, SeriesDatapointInfo, SeriesValue, SeverityType, TimeContextProps, YAxisOptions, customSeriesMarkLineData, customSeriesMarkPointData };
+export { CHART_VIEW_CONTEXT, DATE_SELECTION_EXTENDED, ICONS_MAP, LEGEND_DISPLAY_OPTIONS, PRODUCT_EXPERIENCE_DATA_EXPLORER_AND_GRAPH, REALTIME_TEXTS, SEVERITY_LABELS };
+export type { AlarmDetailsExtended, AlarmOrEventExtended, CustomSeriesOptions, DatapointAxisType, DatapointChartRenderType, DatapointLineType, DatapointRealtimeMeasurements, DatapointsGraphKPIDetails, DatapointsGraphWidgetConfig, DatapointsGraphWidgetTimeProps, DateString, DpValuesItem, DpWithValues, EchartsCustomOptions, EchartsSeriesOptions, EventDetailsExtended, GraphDisplayOptions, LegendDisplayOptionItem, MarkLineData, MarkPointData, MeasurementSeries, SelectableDatapoint, SeriesDatapointInfo, SeriesValue, SeverityType, TimeContextProps, YAxisOptions, customSeriesMarkLineData, customSeriesMarkPointData };
 //# sourceMappingURL=index.d.ts.map

package/echart/models/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sources":["../../../echart/models/datapoints-graph-widget.model.ts","../../../echart/models/chart.model.ts","../../../echart/models/svg-icons.model.ts"],"sourcesContent":[null,null,null],"names":[],"mappings":";;;;;;;;AAmBM;;;;AAKA;AACJ;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;;;;AAKA;;AAEA;AACA;AACA;AACA;;;AAGA;;;;;;;;AASI;;;;;;;;;AASJ;;AAGI;;AAEJ;AACA;;AAGI;;;AAIN;;AAEG;;AAGG;AAIN;AACE;AACA;AACD;AAED;AACM;;AAEL;AAED;;;;AAIM;;;;;;;;AASJ;;;;;AAGD;;AAGC;;AAEA;;AAEE;;AAEF;;;AACD;;;;;;;AAQC;AACA;AACD;AAEK;AACA;AAEA;AAEA;AAEN;;;;AAKA;;;;;;;;;;;;;AAcM;AACA;AAEA;;;;AAKA;;;;;;;;;;AAWL;AAED;;;;;;;;ACjLA;;;;;;AAMG;AACH;AACE;;;;AAIA;;;AACD;;;AAIA;;;AAIA;AAEK;AACA;AACJ;AACE;AACD;AACF;;AAGC;AACA;AACD;AAED;AACE;AACA;AACA;AACD;;AC3CD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AAED;;;;;;;;;;;;"}
+{"version":3,"file":"index.d.ts","sources":["../../../echart/models/datapoints-graph-widget.model.ts","../../../echart/models/chart.model.ts","../../../echart/models/svg-icons.model.ts"],"sourcesContent":[null,null,null],"names":[],"mappings":";;;;;;;;AAmBM;;;;AAKA;AACJ;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;AAKA;;AAEA;AACA;AACA;AACA;;;AAGA;;;;;;;;AASI;;;;;;;;;AASJ;;AAGI;;AAEJ;AACA;;AAGI;;;AAIN;;AAEG;;AAGG;AAIN;AACE;AACA;AACD;AAED;AACM;;AAEL;AAED;;;;AAIM;;;;;;;AAQL;AAED;;;;;AAUE;;;;;AAGD;;AAGC;;AAEA;;AAEE;;AAEF;;;AACD;;;;;;;AAQC;AACA;AACD;AAEK;AACA;AAEA;AAEA;AAEN;;;;AAKA;;;;;;;;;;;;;AAcM;AACA;AAEA;;;;AAKA;;;;;;;;;;AAWL;AAED;;;;;;;;AAUE;AACA;AACD;;ACzMD;;;;;;AAMG;AACH;AACE;;;;AAIA;;;AACD;;;AAIA;;;AAIA;AAEK;AACA;AACJ;AACE;AACD;AACF;;AAGC;AACA;AACD;AAED;AACE;AACA;AACA;AACD;;AC3CD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AAED;;;;;;;;;;;;"}

package/fesm2022/c8y-ngx-components-alarms.mjs

@@ -1527,7 +1527,7 @@ class AlarmsFilterComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmsFilterComponent, deps: [{ token: i1$2.FormBuilder }, { token: AlarmsViewService }, { token: i3.AlertService }, { token: i1.Router }, { token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AlarmsFilterComponent, isStandalone: true, selector: "c8y-alarms-filter", inputs: { contextSourceId: "contextSourceId" }, outputs: { onFilterApplied: "onFilterApplied" }, viewQueries: [{ propertyName: "filtersDropdown", first: true, predicate: ["filtersDropdown"], descendants: true }], ngImport: i0, template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by severity' | translate }}\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\" style=\"min-width: 104px; padding-top: 0; padding-bottom: 0;\">\n        <ng-container *ngIf=\"chips.length !== severitiesList.length; else allAlarms\">\n          <span\n            class=\"tag tag--info chip\"\n            [attr.data-cy]=\"'c8y-alarms-filter--chip-' + chip\"\n            *ngFor=\"let chip of chips\"\n          >\n           <button\n             class=\"btn btn-xs btn-clean text-10\"\n             title=\"{{ 'Remove' | translate }}\"\n             type=\"button\"\n             data-cy=\"c8y-alarms-filter--remove-chip\"\n             c8yProductExperience\n             [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n             [actionData]=\"{\n                component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARMS_FILTER,\n                action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.REMOVE_CHIP_FILTER,\n                filterValues: {\n                  severities: formGroup.value,\n                  showCleared: showCleared\n                }\n              }\"\n             (click)=\"deselectChip(chip); $event.stopPropagation()\"\n           >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            <i\n              class=\"status stroked-icon icon-12\"\n              [attr.data-cy]=\"'c8y-alarms-filter--icon-' + chip\"\n              [c8yIcon]=\"chip | AlarmSeverityToIcon\"\n              [ngClass]=\"chip | lowercase\"\n            ></i>\n            {{ SEVERITY_LABELS[chip] | translate }}\n          </span>\n        </ng-container>\n        <ng-template #allAlarms>\n          <span class=\"text-truncate\" title=\"{{ 'All severities' | translate }}\">\n            {{ 'All severities' | translate }}\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"input-group-btn input-group-btn--last\">\n        <button\n          class=\"btn-default btn btn--caret\"\n          title=\"{{ chips | AlarmSeveritiesToTitle }}\"\n          data-cy=\"c8y-alarms-filter\"\n          dropdownToggle\n          (click)=\"resetForm()\"\n        >\n          <i class=\"caret\"></i>\n        </button>\n      </div>\n    </div>\n    <ul\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      *dropdownMenu\n    >\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center sticky-top separator-bottom\">\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"'All' | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            data-cy=\"c8y-alarms-filter--all\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (ngModelChange)=\"allChanged($event)\"\n            [ngModel]=\"isEachCheckboxSelected$ | async\"\n            [indeterminate]=\"isIndeterminate$ | async\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"'bell'\"\n          ></i>\n          <span class=\"m-l-8\">{{ 'All' | translate }}</span>\n        </label>\n      </li>\n      <li\n        class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center\"\n        *ngFor=\"let severity of severitiesList\"\n      >\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"SEVERITY_LABELS[severity] | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            [attr.data-cy]=\"'c8y-alarms-filter--' + severity\"\n            [formControlName]=\"severity\"\n            [value]=\"severity\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"severity | AlarmSeverityToIcon\"\n            [ngClass]=\"severity | lowercase\"\n          ></i>\n          <span class=\"m-l-8\">{{ SEVERITY_LABELS[severity] | translate }}</span>\n        </label>\n        <!-- badge -->\n        <div\n          class=\"badge badge-info m-l-auto\"\n          *ngIf=\"alarmCounts[severity] || alarmCounts[severity] === 0\"\n        >\n          <i\n            class=\"icon-spin\"\n            [c8yIcon]=\"'circle-o-notch'\"\n            *ngIf=\"countLoading\"\n          ></i>\n          <span\n            *ngIf=\"!countLoading\"\n            [attr.data-cy]=\"'c8y-alarms-filter--' + severity + '-badge'\"\n          >\n            {{ alarmCounts[severity] < 99 ? alarmCounts[severity] : '99+' }}\n          </span>\n        </div>\n      </li>\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center separator-top\">\n        <label\n          class=\"c8y-switch\"\n          [attr.aria-label]=\"'Show cleared alarms' | translate\"\n          [attr.data-cy]=\"'c8y-alarms-filter--cleared'\"\n        >\n          <input\n            type=\"checkbox\"\n            #showClearedCheckbox\n            [ngModelOptions]=\"{ standalone: true }\"\n            [(ngModel)]=\"showCleared\"\n            (click)=\"markSeveritiesAsTouched(); updateAlarmsCount(showClearedCheckbox.checked)\"\n          />\n          <span></span>\n          <span\n            class=\"text-truncate\"\n            title=\"{{ 'Show cleared alarms' | translate }}\"\n          >\n            {{ 'Show cleared alarms' | translate }}\n          </span>\n        </label>\n      </li>\n\n      <div class=\"p-16 d-flex sticky-bottom separator-top\">\n        <button\n          data-cy=\"c8y-alarms-filter--apply\"\n          class=\"btn btn-primary btn-sm flex-grow\"\n          c8yProductExperience\n          [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n          [actionData]=\"{\n            component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARMS_FILTER,\n            action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.APPLY_FILTER,\n            filterValues: {\n              severities: formGroup.value,\n              showCleared: showCleared\n            }\n          }\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          (click)=\"applyFilters(false); closeDropdown()\"\n          [disabled]=\"shouldDisableApplyButton$ | async\"\n        >\n          {{ 'Apply' | translate }}\n        </button>\n      </div>\n    </ul>\n  </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: AlarmSeverityToIconPipe, name: "AlarmSeverityToIcon" }, { kind: "pipe", type: AlarmSeveritiesToTitlePipe, name: "AlarmSeveritiesToTitle" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AlarmsFilterComponent, isStandalone: true, selector: "c8y-alarms-filter", inputs: { contextSourceId: "contextSourceId" }, outputs: { onFilterApplied: "onFilterApplied" }, viewQueries: [{ propertyName: "filtersDropdown", first: true, predicate: ["filtersDropdown"], descendants: true }], ngImport: i0, template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by severity' | translate }}\"\n    container=\"body\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div\n        class=\"form-control d-flex a-i-center inner-scroll\"\n        style=\"min-width: 104px; padding-top: 0; padding-bottom: 0\"\n      >\n        @if (chips.length !== severitiesList.length) {\n          @for (chip of chips; track chip) {\n            <span\n              class=\"tag tag--info chip\"\n              [attr.data-cy]=\"'c8y-alarms-filter--chip-' + chip\"\n            >\n              <button\n                class=\"btn btn-xs btn-clean text-10\"\n                title=\"{{ 'Remove' | translate }}\"\n                type=\"button\"\n                data-cy=\"c8y-alarms-filter--remove-chip\"\n                c8yProductExperience\n                [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n                [actionData]=\"{\n                  component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARMS_FILTER,\n                  action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.REMOVE_CHIP_FILTER,\n                  filterValues: {\n                    severities: formGroup.value,\n                    showCleared: showCleared\n                  }\n                }\"\n                (click)=\"deselectChip(chip); $event.stopPropagation()\"\n              >\n                <i c8yIcon=\"times\"></i>\n              </button>\n              <i\n                class=\"status stroked-icon icon-12\"\n                [c8yIcon]=\"chip | AlarmSeverityToIcon\"\n                [attr.data-cy]=\"'c8y-alarms-filter--icon-' + chip\"\n                [ngClass]=\"chip | lowercase\"\n              ></i>\n              {{ SEVERITY_LABELS[chip] | translate }}\n            </span>\n          }\n        } @else {\n          <span\n            class=\"text-truncate\"\n            title=\"{{ 'All severities' | translate }}\"\n          >\n            {{ 'All severities' | translate }}\n          </span>\n        }\n      </div>\n      <div class=\"input-group-btn input-group-btn--last\">\n        <button\n          class=\"btn-default btn btn--caret\"\n          title=\"{{ chips | AlarmSeveritiesToTitle }}\"\n          data-cy=\"c8y-alarms-filter\"\n          dropdownToggle\n          (click)=\"resetForm()\"\n        >\n          <i class=\"caret\"></i>\n        </button>\n      </div>\n    </div>\n    <ul\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      *dropdownMenu\n    >\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center sticky-top separator-bottom\">\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"'All' | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            data-cy=\"c8y-alarms-filter--all\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (ngModelChange)=\"allChanged($event)\"\n            [ngModel]=\"isEachCheckboxSelected$ | async\"\n            [indeterminate]=\"isIndeterminate$ | async\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"'bell'\"\n          ></i>\n          <span class=\"m-l-8\">{{ 'All' | translate }}</span>\n        </label>\n      </li>\n      @for (severity of severitiesList; track severity) {\n        <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center\">\n          <label\n            class=\"c8y-checkbox d-flex a-i-center\"\n            [title]=\"SEVERITY_LABELS[severity] | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [attr.data-cy]=\"'c8y-alarms-filter--' + severity\"\n              [formControlName]=\"severity\"\n              [value]=\"severity\"\n              (click)=\"markSeveritiesAsTouched()\"\n            />\n            <span></span>\n            <i\n              class=\"status stroked-icon m-l-8 icon-20\"\n              [c8yIcon]=\"severity | AlarmSeverityToIcon\"\n              [ngClass]=\"severity | lowercase\"\n            ></i>\n            <span class=\"m-l-8\">{{ SEVERITY_LABELS[severity] | translate }}</span>\n          </label>\n          <!-- badge -->\n          @if (alarmCounts[severity] || alarmCounts[severity] === 0) {\n            <div class=\"badge badge-info m-l-auto\">\n              @if (countLoading) {\n                <i\n                  class=\"icon-spin\"\n                  [c8yIcon]=\"'circle-o-notch'\"\n                ></i>\n              }\n              @if (!countLoading) {\n                <span [attr.data-cy]=\"'c8y-alarms-filter--' + severity + '-badge'\">\n                  {{ alarmCounts[severity] < 99 ? alarmCounts[severity] : '99+' }}\n                </span>\n              }\n            </div>\n          }\n        </li>\n      }\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center separator-top\">\n        <label\n          class=\"c8y-switch\"\n          [attr.aria-label]=\"'Show cleared alarms' | translate\"\n          [attr.data-cy]=\"'c8y-alarms-filter--cleared'\"\n        >\n          <input\n            type=\"checkbox\"\n            #showClearedCheckbox\n            [ngModelOptions]=\"{ standalone: true }\"\n            [(ngModel)]=\"showCleared\"\n            (click)=\"markSeveritiesAsTouched(); updateAlarmsCount(showClearedCheckbox.checked)\"\n          />\n          <span></span>\n          <span\n            class=\"text-truncate\"\n            title=\"{{ 'Show cleared alarms' | translate }}\"\n          >\n            {{ 'Show cleared alarms' | translate }}\n          </span>\n        </label>\n      </li>\n      <li class=\"p-16 d-flex sticky-bottom separator-top\">\n        <button\n          class=\"btn btn-primary btn-sm flex-grow\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          data-cy=\"c8y-alarms-filter--apply\"\n          c8yProductExperience\n          [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n          [actionData]=\"{\n            component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARMS_FILTER,\n            action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.APPLY_FILTER,\n            filterValues: {\n              severities: formGroup.value,\n              showCleared: showCleared\n            }\n          }\"\n          (click)=\"applyFilters(false); closeDropdown()\"\n          [disabled]=\"shouldDisableApplyButton$ | async\"\n        >\n          {{ 'Apply' | translate }}\n        </button>\n      </li>\n    </ul>\n  </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: AlarmSeverityToIconPipe, name: "AlarmSeverityToIcon" }, { kind: "pipe", type: AlarmSeveritiesToTitlePipe, name: "AlarmSeveritiesToTitle" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmsFilterComponent, decorators: [{
             type: Component,
@@ -1549,7 +1549,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         LowerCasePipe,
                         AlarmSeverityToIconPipe,
                         AlarmSeveritiesToTitlePipe
-                    ], template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by severity' | translate }}\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\" style=\"min-width: 104px; padding-top: 0; padding-bottom: 0;\">\n        <ng-container *ngIf=\"chips.length !== severitiesList.length; else allAlarms\">\n          <span\n            class=\"tag tag--info chip\"\n            [attr.data-cy]=\"'c8y-alarms-filter--chip-' + chip\"\n            *ngFor=\"let chip of chips\"\n          >\n           <button\n             class=\"btn btn-xs btn-clean text-10\"\n             title=\"{{ 'Remove' | translate }}\"\n             type=\"button\"\n             data-cy=\"c8y-alarms-filter--remove-chip\"\n             c8yProductExperience\n             [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n             [actionData]=\"{\n                component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARMS_FILTER,\n                action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.REMOVE_CHIP_FILTER,\n                filterValues: {\n                  severities: formGroup.value,\n                  showCleared: showCleared\n                }\n              }\"\n             (click)=\"deselectChip(chip); $event.stopPropagation()\"\n           >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            <i\n              class=\"status stroked-icon icon-12\"\n              [attr.data-cy]=\"'c8y-alarms-filter--icon-' + chip\"\n              [c8yIcon]=\"chip | AlarmSeverityToIcon\"\n              [ngClass]=\"chip | lowercase\"\n            ></i>\n            {{ SEVERITY_LABELS[chip] | translate }}\n          </span>\n        </ng-container>\n        <ng-template #allAlarms>\n          <span class=\"text-truncate\" title=\"{{ 'All severities' | translate }}\">\n            {{ 'All severities' | translate }}\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"input-group-btn input-group-btn--last\">\n        <button\n          class=\"btn-default btn btn--caret\"\n          title=\"{{ chips | AlarmSeveritiesToTitle }}\"\n          data-cy=\"c8y-alarms-filter\"\n          dropdownToggle\n          (click)=\"resetForm()\"\n        >\n          <i class=\"caret\"></i>\n        </button>\n      </div>\n    </div>\n    <ul\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      *dropdownMenu\n    >\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center sticky-top separator-bottom\">\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"'All' | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            data-cy=\"c8y-alarms-filter--all\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (ngModelChange)=\"allChanged($event)\"\n            [ngModel]=\"isEachCheckboxSelected$ | async\"\n            [indeterminate]=\"isIndeterminate$ | async\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"'bell'\"\n          ></i>\n          <span class=\"m-l-8\">{{ 'All' | translate }}</span>\n        </label>\n      </li>\n      <li\n        class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center\"\n        *ngFor=\"let severity of severitiesList\"\n      >\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"SEVERITY_LABELS[severity] | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            [attr.data-cy]=\"'c8y-alarms-filter--' + severity\"\n            [formControlName]=\"severity\"\n            [value]=\"severity\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"severity | AlarmSeverityToIcon\"\n            [ngClass]=\"severity | lowercase\"\n          ></i>\n          <span class=\"m-l-8\">{{ SEVERITY_LABELS[severity] | translate }}</span>\n        </label>\n        <!-- badge -->\n        <div\n          class=\"badge badge-info m-l-auto\"\n          *ngIf=\"alarmCounts[severity] || alarmCounts[severity] === 0\"\n        >\n          <i\n            class=\"icon-spin\"\n            [c8yIcon]=\"'circle-o-notch'\"\n            *ngIf=\"countLoading\"\n          ></i>\n          <span\n            *ngIf=\"!countLoading\"\n            [attr.data-cy]=\"'c8y-alarms-filter--' + severity + '-badge'\"\n          >\n            {{ alarmCounts[severity] < 99 ? alarmCounts[severity] : '99+' }}\n          </span>\n        </div>\n      </li>\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center separator-top\">\n        <label\n          class=\"c8y-switch\"\n          [attr.aria-label]=\"'Show cleared alarms' | translate\"\n          [attr.data-cy]=\"'c8y-alarms-filter--cleared'\"\n        >\n          <input\n            type=\"checkbox\"\n            #showClearedCheckbox\n            [ngModelOptions]=\"{ standalone: true }\"\n            [(ngModel)]=\"showCleared\"\n            (click)=\"markSeveritiesAsTouched(); updateAlarmsCount(showClearedCheckbox.checked)\"\n          />\n          <span></span>\n          <span\n            class=\"text-truncate\"\n            title=\"{{ 'Show cleared alarms' | translate }}\"\n          >\n            {{ 'Show cleared alarms' | translate }}\n          </span>\n        </label>\n      </li>\n\n      <div class=\"p-16 d-flex sticky-bottom separator-top\">\n        <button\n          data-cy=\"c8y-alarms-filter--apply\"\n          class=\"btn btn-primary btn-sm flex-grow\"\n          c8yProductExperience\n          [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n          [actionData]=\"{\n            component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARMS_FILTER,\n            action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.APPLY_FILTER,\n            filterValues: {\n              severities: formGroup.value,\n              showCleared: showCleared\n            }\n          }\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          (click)=\"applyFilters(false); closeDropdown()\"\n          [disabled]=\"shouldDisableApplyButton$ | async\"\n        >\n          {{ 'Apply' | translate }}\n        </button>\n      </div>\n    </ul>\n  </div>\n</form>\n" }]
+                    ], template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by severity' | translate }}\"\n    container=\"body\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div\n        class=\"form-control d-flex a-i-center inner-scroll\"\n        style=\"min-width: 104px; padding-top: 0; padding-bottom: 0\"\n      >\n        @if (chips.length !== severitiesList.length) {\n          @for (chip of chips; track chip) {\n            <span\n              class=\"tag tag--info chip\"\n              [attr.data-cy]=\"'c8y-alarms-filter--chip-' + chip\"\n            >\n              <button\n                class=\"btn btn-xs btn-clean text-10\"\n                title=\"{{ 'Remove' | translate }}\"\n                type=\"button\"\n                data-cy=\"c8y-alarms-filter--remove-chip\"\n                c8yProductExperience\n                [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n                [actionData]=\"{\n                  component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARMS_FILTER,\n                  action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.REMOVE_CHIP_FILTER,\n                  filterValues: {\n                    severities: formGroup.value,\n                    showCleared: showCleared\n                  }\n                }\"\n                (click)=\"deselectChip(chip); $event.stopPropagation()\"\n              >\n                <i c8yIcon=\"times\"></i>\n              </button>\n              <i\n                class=\"status stroked-icon icon-12\"\n                [c8yIcon]=\"chip | AlarmSeverityToIcon\"\n                [attr.data-cy]=\"'c8y-alarms-filter--icon-' + chip\"\n                [ngClass]=\"chip | lowercase\"\n              ></i>\n              {{ SEVERITY_LABELS[chip] | translate }}\n            </span>\n          }\n        } @else {\n          <span\n            class=\"text-truncate\"\n            title=\"{{ 'All severities' | translate }}\"\n          >\n            {{ 'All severities' | translate }}\n          </span>\n        }\n      </div>\n      <div class=\"input-group-btn input-group-btn--last\">\n        <button\n          class=\"btn-default btn btn--caret\"\n          title=\"{{ chips | AlarmSeveritiesToTitle }}\"\n          data-cy=\"c8y-alarms-filter\"\n          dropdownToggle\n          (click)=\"resetForm()\"\n        >\n          <i class=\"caret\"></i>\n        </button>\n      </div>\n    </div>\n    <ul\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      *dropdownMenu\n    >\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center sticky-top separator-bottom\">\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"'All' | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            data-cy=\"c8y-alarms-filter--all\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (ngModelChange)=\"allChanged($event)\"\n            [ngModel]=\"isEachCheckboxSelected$ | async\"\n            [indeterminate]=\"isIndeterminate$ | async\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"'bell'\"\n          ></i>\n          <span class=\"m-l-8\">{{ 'All' | translate }}</span>\n        </label>\n      </li>\n      @for (severity of severitiesList; track severity) {\n        <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center\">\n          <label\n            class=\"c8y-checkbox d-flex a-i-center\"\n            [title]=\"SEVERITY_LABELS[severity] | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [attr.data-cy]=\"'c8y-alarms-filter--' + severity\"\n              [formControlName]=\"severity\"\n              [value]=\"severity\"\n              (click)=\"markSeveritiesAsTouched()\"\n            />\n            <span></span>\n            <i\n              class=\"status stroked-icon m-l-8 icon-20\"\n              [c8yIcon]=\"severity | AlarmSeverityToIcon\"\n              [ngClass]=\"severity | lowercase\"\n            ></i>\n            <span class=\"m-l-8\">{{ SEVERITY_LABELS[severity] | translate }}</span>\n          </label>\n          <!-- badge -->\n          @if (alarmCounts[severity] || alarmCounts[severity] === 0) {\n            <div class=\"badge badge-info m-l-auto\">\n              @if (countLoading) {\n                <i\n                  class=\"icon-spin\"\n                  [c8yIcon]=\"'circle-o-notch'\"\n                ></i>\n              }\n              @if (!countLoading) {\n                <span [attr.data-cy]=\"'c8y-alarms-filter--' + severity + '-badge'\">\n                  {{ alarmCounts[severity] < 99 ? alarmCounts[severity] : '99+' }}\n                </span>\n              }\n            </div>\n          }\n        </li>\n      }\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center separator-top\">\n        <label\n          class=\"c8y-switch\"\n          [attr.aria-label]=\"'Show cleared alarms' | translate\"\n          [attr.data-cy]=\"'c8y-alarms-filter--cleared'\"\n        >\n          <input\n            type=\"checkbox\"\n            #showClearedCheckbox\n            [ngModelOptions]=\"{ standalone: true }\"\n            [(ngModel)]=\"showCleared\"\n            (click)=\"markSeveritiesAsTouched(); updateAlarmsCount(showClearedCheckbox.checked)\"\n          />\n          <span></span>\n          <span\n            class=\"text-truncate\"\n            title=\"{{ 'Show cleared alarms' | translate }}\"\n          >\n            {{ 'Show cleared alarms' | translate }}\n          </span>\n        </label>\n      </li>\n      <li class=\"p-16 d-flex sticky-bottom separator-top\">\n        <button\n          class=\"btn btn-primary btn-sm flex-grow\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          data-cy=\"c8y-alarms-filter--apply\"\n          c8yProductExperience\n          [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n          [actionData]=\"{\n            component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARMS_FILTER,\n            action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.APPLY_FILTER,\n            filterValues: {\n              severities: formGroup.value,\n              showCleared: showCleared\n            }\n          }\"\n          (click)=\"applyFilters(false); closeDropdown()\"\n          [disabled]=\"shouldDisableApplyButton$ | async\"\n        >\n          {{ 'Apply' | translate }}\n        </button>\n      </li>\n    </ul>\n  </div>\n</form>\n" }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: AlarmsViewService }, { type: i3.AlertService }, { type: i1.Router }, { type: i1.ActivatedRoute }], propDecorators: { contextSourceId: [{
                 type: Input
             }], onFilterApplied: [{