@c8y/ngx-components 1022.6.1 → 1022.9.2

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { inject, Component, Injectable, signal, EventEmitter, Output, Input, DestroyRef, ViewChild } from '@angular/core';
-import * as i1 from '@c8y/ngx-components';
+import * as i2 from '@c8y/ngx-components';
 import { gettext, CoreModule, ContextRouteService, ClipboardService, ViewContext, AlertService, Permissions, CommonModule, FormsModule as FormsModule$1 } from '@c8y/ngx-components';
 import * as i5$1 from '@c8y/ngx-components/alarm-event-selector';
 import { AlarmEventSelectorModule } from '@c8y/ngx-components/alarm-event-selector';
@@ -18,12 +18,12 @@ import { PopoverModule } from 'ngx-bootstrap/popover';
 import { BsModalService } from 'ngx-bootstrap/modal';
 import * as i5 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
-import { merge, of } from 'rxjs';
+import { merge, of, firstValueFrom } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { ReportDashboardService, ReportDashboardModule } from '@c8y/ngx-components/report-dashboard';
 import * as i3$1 from '@angular/common';
-import * as i1$1 from '@c8y/ngx-components/context-dashboard';
-import { ContextDashboardService } from '@c8y/ngx-components/context-dashboard';
+import * as i1 from '@c8y/ngx-components/context-dashboard';
+import { ContextDashboardService, ContextDashboardType, ContextDashboardModule } from '@c8y/ngx-components/context-dashboard';
 import { DatapointsExportSelectorComponent } from '@c8y/ngx-components/datapoints-export-selector';
 import { InventoryService } from '@c8y/client';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -60,11 +60,11 @@ class SendAsWidgetToReportModal {
         return new FormGroup(controls);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SendAsWidgetToReportModal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SendAsWidgetToReportModal, isStandalone: true, selector: "c8y-apply-branding-to-app-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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "component", type: i1.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: i1.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i1.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i1.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i1.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "ngmodule", type: ReportDashboardModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.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: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { 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 }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SendAsWidgetToReportModal, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-apply-branding-to-app-modal', standalone: true, imports: [ReactiveFormsModule, CoreModule, ReportDashboardModule], 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" }]
+            args: [{ selector: 'c8y-send-as-widget-to-report-modal', standalone: true, imports: [ReactiveFormsModule, CoreModule, ReportDashboardModule], 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" }]
         }] });
 
 class CreateNewReportModalComponent {
@@ -114,17 +114,18 @@ class CreateNewReportModalComponent {
     cancel() {
         this._reject();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CreateNewReportModalComponent, deps: [{ token: i1$1.ContextDashboardService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i1.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i1.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: ReportDashboardModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CreateNewReportModalComponent, deps: [{ token: i1.ContextDashboardService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { 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.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 }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", 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$1.ContextDashboardService }] });
+        }], ctorParameters: () => [{ type: i1.ContextDashboardService }] });
 
 class DataExplorerService {
     constructor() {
         this.inventory = inject(InventoryService);
+        this.contextDashboardService = inject(ContextDashboardService);
     }
     async fetchReportDashboard(reportId) {
         return (await this.inventory.list({
@@ -132,6 +133,12 @@ class DataExplorerService {
             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: "19.2.14", ngImport: i0, type: DataExplorerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DataExplorerService, providedIn: 'root' }); }
 }
@@ -407,7 +414,7 @@ class WorkspaceConfigComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WorkspaceConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: WorkspaceConfigComponent, isStandalone: true, selector: "c8y-workspace-config", inputs: { updatedConfig: "updatedConfig" }, outputs: { onConfigurationChange: "onConfigurationChange" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"dropdown\"\n  #actionbar_dropdown=\"bs-dropdown\"\n  [cdkTrapFocus]=\"actionbar_dropdown.isOpen\"\n  dropdown\n  [insideClick]=\"true\"\n>\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              [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                  />\n                </label>\n              </div>\n              <div class=\"flex-nogrow d-flex gap-8\">\n                <button\n                  class=\"btn-dot btn\"\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\"\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", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i1.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i1.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i1.ListItemRadioComponent, selector: "c8y-list-item-radio, c8y-li-radio", inputs: ["selected", "name", "disabled", "value"], outputs: ["onSelect"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: WorkspaceConfigComponent, isStandalone: true, selector: "c8y-workspace-config", inputs: { updatedConfig: "updatedConfig" }, outputs: { onConfigurationChange: "onConfigurationChange" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"dropdown\"\n  #actionbar_dropdown=\"bs-dropdown\"\n  [cdkTrapFocus]=\"actionbar_dropdown.isOpen\"\n  dropdown\n  [insideClick]=\"true\"\n>\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              [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                  />\n                </label>\n              </div>\n              <div class=\"flex-nogrow d-flex gap-8\">\n                <button\n                  class=\"btn-dot btn\"\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\"\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", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WorkspaceConfigComponent, decorators: [{
             type: Component,
@@ -418,6 +425,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }] } });
 
+class SendAsWidgetToDashboardModal {
+    constructor() {
+        this.dashboards = [];
+        this.result = new Promise((resolve, reject) => {
+            this._resolve = resolve;
+            this._reject = reject;
+        });
+        this.labels = { cancel: gettext('Cancel'), ok: gettext('Send') };
+        this.contextDashboardService = inject(ContextDashboardService);
+    }
+    async ngOnInit() {
+        const context = this.contextAsset.c8y_IsDevice
+            ? ContextDashboardType.Device
+            : ContextDashboardType.Group;
+        this.dashboards = (await this.contextDashboardService.getContextDashboards(this.contextAsset, [
+            context
+        ])).data;
+        if (this.dashboards.length > 0) {
+            this.form = this.initForm();
+        }
+        this.numberOfSelectedDashboards$ = merge(this.form.valueChanges, of(this.form.value)).pipe(map(value => Object.values(value).filter(Boolean).length));
+    }
+    save() {
+        this._resolve(this.form.value);
+    }
+    cancel() {
+        this._reject();
+    }
+    initForm() {
+        const controls = this.dashboards.reduce((acc, dashboard) => ({
+            ...acc,
+            [dashboard.id]: new FormControl(false)
+        }), {});
+        return new FormGroup(controls);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SendAsWidgetToDashboardModal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.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: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { 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 }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SendAsWidgetToDashboardModal, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-send-as-widget-to-dashboard-modal', standalone: true, imports: [ReactiveFormsModule, CoreModule, ContextDashboardModule], 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" }]
+        }], propDecorators: { contextAsset: [{
+                type: Input
+            }] } });
+
 class DatapointExplorerComponent {
     #destroyRef;
     constructor() {
@@ -505,38 +557,51 @@ class DatapointExplorerComponent {
     updateTimeRangeOnRealtime(timeRange) {
         this.formGroup.patchValue(timeRange, { emitEvent: false });
     }
-    createNewReportWithWidget() {
+    updateAlarmsAndEvents(alarmsEventsConfigs) {
+        this.alarms = alarmsEventsConfigs.filter(this.isAlarm);
+        this.events = alarmsEventsConfigs.filter(this.isEvent);
+        this.hasAtLeastOneAlarmActive = this.hasActiveAlarms(this.alarms);
+    }
+    handleDatapointOutOfSync(dpOutOfSync) {
+        const key = (dp) => dp.__target?.id + dp.fragment + dp.series;
+        const dpMatch = this.config.datapoints?.find(dp => key(dp) === key(dpOutOfSync));
+        if (!dpMatch) {
+            return;
+        }
+        this.datapointsOutOfSync.set(dpMatch, true);
+    }
+    async createNewReportWithWidget() {
         const modal = this.bsModalService.show(CreateNewReportModalComponent, {
             ignoreBackdropClick: true,
             keyboard: false,
             class: 'modal-sm'
         });
         const content = modal.content;
-        content.result
-            .then(async (report) => {
+        try {
+            const report = await content.result;
             const reportDashboard = await this.dataExplorerService.fetchReportDashboard(report.id);
             const widget = this.createWidgetConfig();
             reportDashboard.c8y_Dashboard.children = { [widget.id]: widget };
             await this.contextDashboardService.update(reportDashboard);
             this.alertService.success(gettext('Report and widget created.'));
-        })
-            .catch(e => {
+        }
+        catch (e) {
             if (e) {
                 this.alertService.danger(gettext('Failed to create report and widget.'));
                 this.alertService.addServerFailure(e);
             }
             // else: modal was closed
-        });
+        }
     }
-    sendAsWidgetToReport() {
+    async sendAsWidgetToReport() {
         const modal = this.bsModalService.show(SendAsWidgetToReportModal, {
             ignoreBackdropClick: true,
             keyboard: false,
             class: 'modal-sm'
         });
         const content = modal.content;
-        content.result
-            .then(async (reports) => {
+        try {
+            const reports = await content.result;
             const selectedReports = Object.entries(reports).filter(([, value]) => value);
             const reportPromises = selectedReports.map(async ([reportId]) => {
                 const reportDashboard = await this.dataExplorerService.fetchReportDashboard(reportId);
@@ -547,27 +612,45 @@ class DatapointExplorerComponent {
             });
             await Promise.all(reportPromises);
             this.alertService.success(gettext('Widget created.'));
-        })
-            .catch(e => {
+        }
+        catch (e) {
             if (e) {
                 this.alertService.danger(gettext('Failed to create widget.'));
                 this.alertService.addServerFailure(e);
             }
             // else: modal was closed
-        });
-    }
-    updateAlarmsAndEvents(alarmsEventsConfigs) {
-        this.alarms = alarmsEventsConfigs.filter(this.isAlarm);
-        this.events = alarmsEventsConfigs.filter(this.isEvent);
-        this.hasAtLeastOneAlarmActive = this.hasActiveAlarms(this.alarms);
+        }
     }
-    handleDatapointOutOfSync(dpOutOfSync) {
-        const key = (dp) => dp.__target?.id + dp.fragment + dp.series;
-        const dpMatch = this.config.datapoints?.find(dp => key(dp) === key(dpOutOfSync));
-        if (!dpMatch) {
-            return;
+    async sendAsWidgetToDashboard() {
+        const modal = this.bsModalService.show(SendAsWidgetToDashboardModal, {
+            ignoreBackdropClick: true,
+            keyboard: false,
+            class: 'modal-sm',
+            initialState: {
+                contextAsset: this.contextAsset
+            }
+        });
+        const content = modal.content;
+        try {
+            const dashboards = await content.result;
+            const selectedDashboards = Object.entries(dashboards).filter(([, value]) => value);
+            const dashboardPromises = selectedDashboards.map(async ([dashboardId]) => {
+                const dashboard = await this.dataExplorerService.fetchContextDashboard(dashboardId, this.contextAsset);
+                const widget = this.createWidgetConfig();
+                const children = dashboard.c8y_Dashboard.children || {};
+                dashboard.c8y_Dashboard.children = { ...children, [widget.id]: widget };
+                await this.contextDashboardService.update(dashboard);
+            });
+            await Promise.all(dashboardPromises);
+            this.alertService.success(gettext('Widget created.'));
+        }
+        catch (e) {
+            if (e) {
+                this.alertService.danger(gettext('Failed to create widget.'));
+                this.alertService.addServerFailure(e);
+            }
+            // else: modal was closed
         }
-        this.datapointsOutOfSync.set(dpMatch, true);
     }
     isAlarm(item) {
         return item.timelineType === 'ALARM';
@@ -617,11 +700,10 @@ class DatapointExplorerComponent {
     }
     createWidgetConfig() {
         return {
-            name: 'Data points graph 2',
-            title: gettext('Data points graph 2'),
-            id: String(Math.random()).substr(2),
+            name: gettext('Data points graph'),
+            title: gettext('Data points'),
             _width: 24,
-            _height: 5,
+            _height: 12,
             config: this.config
         };
     }
@@ -648,7 +730,7 @@ class DatapointExplorerComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DatapointExplorerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DatapointExplorerComponent, isStandalone: true, selector: "c8y-datapoint-explorer", providers: [ChartEventsService, ChartAlarmsService], viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true }], ngImport: i0, template: "<c8y-title>{{ 'Data explorer' | translate }}</c8y-title>\n\n<c8y-time-context\n  (contextChange)=\"onTimeContextChange($event)\"\n  [changedDateContext]=\"timeProps\"\n></c8y-time-context>\n\n<c8y-action-bar-item [placement]=\"'left'\">\n  <c8y-workspace-config\n    [updatedConfig]=\"config\"\n    (onConfigurationChange)=\"onConfigurationChange($event)\"\n  ></c8y-workspace-config>\n</c8y-action-bar-item>\n\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<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<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      (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n      (configChangeOnZoomOut)=\"onSliderZoom($event)\"\n      (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n      (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n      (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n    ></c8y-charts>\n    <form\n      class=\"m-l-48 m-r-48\"\n      [formGroup]=\"formGroup\"\n    >\n      <div class=\"d-grid-md 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: i1.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i1.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: 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", "context"], outputs: ["contextChange"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled"] }, { 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"], outputs: ["onConfigurationChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DatapointExplorerComponent, isStandalone: true, selector: "c8y-datapoint-explorer", providers: [ChartEventsService, ChartAlarmsService], viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true }], ngImport: i0, template: "<c8y-title>{{ 'Data explorer' | translate }}</c8y-title>\n\n<c8y-time-context\n  (contextChange)=\"onTimeContextChange($event)\"\n  [changedDateContext]=\"timeProps\"\n></c8y-time-context>\n\n<c8y-action-bar-item [placement]=\"'left'\">\n  <c8y-workspace-config\n    [updatedConfig]=\"config\"\n    (onConfigurationChange)=\"onConfigurationChange($event)\"\n  ></c8y-workspace-config>\n</c8y-action-bar-item>\n\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<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<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      (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n      (configChangeOnZoomOut)=\"onSliderZoom($event)\"\n      (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n      (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n      (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n    ></c8y-charts>\n    <form\n      class=\"m-l-48 m-r-48\"\n      [formGroup]=\"formGroup\"\n    >\n      <div class=\"d-grid-md 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: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: 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", "context"], outputs: ["contextChange"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled"] }, { 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"], outputs: ["onConfigurationChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DatapointExplorerComponent, decorators: [{
             type: Component,
@@ -666,7 +748,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         A11yModule,
                         DatapointsExportSelectorComponent,
                         WorkspaceConfigComponent
-                    ], providers: [ChartEventsService, ChartAlarmsService], template: "<c8y-title>{{ 'Data explorer' | translate }}</c8y-title>\n\n<c8y-time-context\n  (contextChange)=\"onTimeContextChange($event)\"\n  [changedDateContext]=\"timeProps\"\n></c8y-time-context>\n\n<c8y-action-bar-item [placement]=\"'left'\">\n  <c8y-workspace-config\n    [updatedConfig]=\"config\"\n    (onConfigurationChange)=\"onConfigurationChange($event)\"\n  ></c8y-workspace-config>\n</c8y-action-bar-item>\n\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<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<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      (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n      (configChangeOnZoomOut)=\"onSliderZoom($event)\"\n      (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n      (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n      (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n    ></c8y-charts>\n    <form\n      class=\"m-l-48 m-r-48\"\n      [formGroup]=\"formGroup\"\n    >\n      <div class=\"d-grid-md 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" }]
+                    ], providers: [ChartEventsService, ChartAlarmsService], template: "<c8y-title>{{ 'Data explorer' | translate }}</c8y-title>\n\n<c8y-time-context\n  (contextChange)=\"onTimeContextChange($event)\"\n  [changedDateContext]=\"timeProps\"\n></c8y-time-context>\n\n<c8y-action-bar-item [placement]=\"'left'\">\n  <c8y-workspace-config\n    [updatedConfig]=\"config\"\n    (onConfigurationChange)=\"onConfigurationChange($event)\"\n  ></c8y-workspace-config>\n</c8y-action-bar-item>\n\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<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<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      (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n      (configChangeOnZoomOut)=\"onSliderZoom($event)\"\n      (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n      (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n      (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n    ></c8y-charts>\n    <form\n      class=\"m-l-48 m-r-48\"\n      [formGroup]=\"formGroup\"\n    >\n      <div class=\"d-grid-md 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" }]
         }], ctorParameters: () => [], propDecorators: { chart: [{
                 type: ViewChild,
                 args: ['chart']