@c8y/ngx-components 1024.1.8 → 1024.5.1

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

@@ -2,39 +2,39 @@ import * as i0 from '@angular/core';
 import { Injectable, signal, inject, EventEmitter, Output, Input, Component, DestroyRef, ViewChild, ChangeDetectionStrategy } from '@angular/core';
 import { compressToEncodedURIComponent, decompressFromEncodedURIComponent } from 'lz-string';
 import * as i2 from '@c8y/ngx-components';
-import { AlertService, MOChunkLoaderService, DatapointSyncService, ContextRouteService, ClipboardService, ViewContext, CoreModule, DynamicComponentAlertAggregator, Permissions, GainsightService, CommonModule, FormsModule as FormsModule$1, ResizableGridComponent, WidgetTimeContextDateRangeService, IconDirective } from '@c8y/ngx-components';
+import { AlertService, MOChunkLoaderService, DatapointSyncService, ContextRouteService, ClipboardService, ViewContext, CoreModule, InputGroupEditableComponent, DynamicComponentAlertAggregator, Permissions, GainsightService, CommonModule, FormsModule as FormsModule$1, ResizableGridComponent, WidgetTimeContextDateRangeService, IconDirective } from '@c8y/ngx-components';
 import { gettext } from '@c8y/ngx-components/gettext';
-import * as i5 from '@angular/cdk/a11y';
+import * as i4 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i2$1 from '@angular/forms';
-import { FormBuilder, FormsModule, ReactiveFormsModule, FormControl, FormGroup, Validators } from '@angular/forms';
+import { Validators, FormBuilder, FormsModule, ReactiveFormsModule, FormControl, FormGroup } from '@angular/forms';
 import { Router, ActivatedRoute, NavigationStart } from '@angular/router';
 import { InventoryService, MeasurementService } from '@c8y/client';
 import * as i4$1 from '@c8y/ngx-components/alarm-event-selector';
 import { AlarmEventSelectorModule } from '@c8y/ngx-components/alarm-event-selector';
 import * as i1 from '@c8y/ngx-components/context-dashboard';
 import { ContextDashboardService, ContextDashboardType, ContextDashboardModule } from '@c8y/ngx-components/context-dashboard';
-import * as i3$1 from '@c8y/ngx-components/datapoint-selector';
+import * as i3$2 from '@c8y/ngx-components/datapoint-selector';
 import { DatapointSelectorModule } from '@c8y/ngx-components/datapoint-selector';
 import { DatapointsExportSelectorComponent } from '@c8y/ngx-components/datapoints-export-selector';
 import { CHART_VIEW_CONTEXT, PRODUCT_EXPERIENCE_DATA_EXPLORER_AND_GRAPH } from '@c8y/ngx-components/echart/models';
 import { ChartHelpersService, ChartsComponent, ChartEventsService, ChartAlarmsService } from '@c8y/ngx-components/echart';
-import * as i4 from 'ngx-bootstrap/dropdown';
+import * as i3 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import * as i7 from 'ngx-bootstrap/collapse';
 import { CollapseModule } from 'ngx-bootstrap/collapse';
-import * as i6 from 'ngx-bootstrap/tooltip';
+import * as i5 from 'ngx-bootstrap/tooltip';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
-import * as i6$1 from 'ngx-bootstrap/popover';
+import * as i6 from 'ngx-bootstrap/popover';
 import { PopoverModule } from 'ngx-bootstrap/popover';
 import { INTERVALS } from '@c8y/ngx-components/interval-picker';
 import { TimeContextComponent } from '@c8y/ngx-components/time-context';
 import { BsModalService } from 'ngx-bootstrap/modal';
 import { firstValueFrom, merge, of, fromEvent, map as map$1, startWith, filter, take } from 'rxjs';
-import * as i3 from '@angular/common';
 import { ReportDashboardModule, ReportDashboardService } from '@c8y/ngx-components/report-dashboard';
 import { map } from 'rxjs/operators';
+import * as i3$1 from '@angular/common';
 
 const adjectives = [
     'caffeinated',
@@ -453,6 +453,7 @@ class WorkspaceConfigComponent {
         this.shouldCleanParams = false;
         this.activeConfigTooltip = gettext('Active configuration cannot be removed');
         this.removeConfigTooltip = gettext('Remove configuration');
+        this.labelValidators = [Validators.required];
         this.formBuilder = inject(FormBuilder);
         this.workspaceConfigurationService = inject(WorkspaceConfigurationService);
         this.contextRouteService = inject(ContextRouteService);
@@ -650,11 +651,19 @@ class WorkspaceConfigComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: WorkspaceConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: WorkspaceConfigComponent, isStandalone: true, selector: "c8y-workspace-config", inputs: { updatedConfig: "updatedConfig", silent: "silent", defaultConfigurationId: "defaultConfigurationId" }, outputs: { onConfigurationChange: "onConfigurationChange" }, usesOnChanges: true, ngImport: i0, template: "@if (!silent) {\n  <div\n    class=\"dropdown\"\n    #actionbar_dropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"actionbar_dropdown.isOpen\"\n    dropdown\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n      attr.aria-label=\"{{ currentConfiguration?.label }}\"\n      tooltip=\"{{ 'Selected configuration' | translate }}\"\n      placement=\"top\"\n      container=\"body\"\n      data-cy=\"current-configuration-dropdown-button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      dropdownToggle\n    >\n      <i\n        class=\"m-r-4\"\n        c8yIcon=\"list\"\n      ></i>\n      <div class=\"d-col text-left fit-w\">\n        <span class=\"text-12\">\n          {{ 'Configuration' | translate }}\n        </span>\n        <span class=\"text-10 text-muted text-truncate\">\n          {{ currentConfiguration?.label }}\n        </span>\n      </div>\n      <span class=\"caret m-r-16 m-l-4\"></span>\n    </button>\n    <div\n      class=\"dropdown-menu dropdown-menu-wide dropdown-menu-action-bar\"\n      *dropdownMenu\n    >\n      <div class=\"sticky-top separator-bottom p-t-8 p-b-8 p-l-16 p-r-16\">\n        <p>\n          <strong>{{ 'Data explorer configurations' | translate }}</strong>\n        </p>\n        <p>\n          <small>{{ 'Easily switch and manage configurations.' | translate }}</small>\n        </p>\n      </div>\n      <c8y-list-group class=\"no-border-last\">\n        <form [formGroup]=\"configurationsFormGroup\">\n          <div formArrayName=\"configurations\">\n            @for (\n              configuration of configurationsFormGroup.controls.configurations['controls'];\n              track $index\n            ) {\n              <c8y-li\n                class=\"p-0\"\n                [dense]=\"true\"\n              >\n                <c8y-li-radio\n                  style=\"min-height: 48px\"\n                  [selected]=\"configuration.value.id === currentConfiguration.id\"\n                  (onSelect)=\"changeConfiguration($event, configuration.value)\"\n                ></c8y-li-radio>\n\n                <div class=\"d-flex a-i-center gap-8\">\n                  <div\n                    class=\"min-width-0\"\n                    [formGroupName]=\"$index\"\n                  >\n                    <label\n                      class=\"editable\"\n                      [ngClass]=\"{\n                        updated:\n                          configuration.controls.label.touched && configuration.controls.label.dirty\n                      }\"\n                    >\n                      <input\n                        class=\"form-control\"\n                        [style.width.ch]=\"configuration.value.label || 25\"\n                        [attr.aria-label]=\"'Configuration label' | translate\"\n                        placeholder=\"{{ 'Configuration 1' | translate }}\"\n                        type=\"text\"\n                        autocomplete=\"off\"\n                        required\n                        formControlName=\"label\"\n                        (blur)=\"updateConfigurationLabel(configuration.value)\"\n                        (keydown.enter)=\"\n                          $event.preventDefault(); updateConfigurationLabel(configuration.value)\n                        \"\n                      />\n                    </label>\n                  </div>\n\n                  <div class=\"flex-nogrow d-flex gap-8\">\n                    <button\n                      class=\"btn-dot btn m-0\"\n                      [attr.aria-label]=\"'Duplicate configuration' | translate\"\n                      tooltip=\"{{ 'Duplicate configuration' | translate }}\"\n                      placement=\"left\"\n                      (click)=\"addConfig(configuration.value.config)\"\n                      [delay]=\"500\"\n                    >\n                      <i c8yIcon=\"copy\"></i>\n                    </button>\n\n                    <button\n                      class=\"btn-dot btn btn-dot--danger\"\n                      [attr.aria-label]=\"'Remove configurations' | translate\"\n                      tooltip=\"{{\n                        (configuration.value.id === currentConfiguration.id\n                          ? activeConfigTooltip\n                          : removeConfigTooltip\n                        ) | translate\n                      }}\"\n                      placement=\"left\"\n                      [delay]=\"500\"\n                      (click)=\"$event.stopPropagation(); deleteConfiguration(configuration.value)\"\n                      [disabled]=\"configuration.value.id === currentConfiguration.id\"\n                    >\n                      <i c8yIcon=\"minus-circle\"></i>\n                    </button>\n                  </div>\n                </div>\n              </c8y-li>\n            }\n          </div>\n        </form>\n      </c8y-list-group>\n      <div class=\"sticky-bottom separator-top\">\n        <div class=\"d-flex p-l-16 p-r-16 p-t-8 p-b-8\">\n          <button\n            class=\"btn btn-danger btn-sm flex-grow m-r-4\"\n            (click)=\"clearAll()\"\n            [disabled]=\"configurations.length < 2\"\n          >\n            <i [c8yIcon]=\"'delete'\"></i>\n            {{ 'Delete all configurations' | translate }}\n          </button>\n          <button\n            class=\"btn btn-default btn-sm flex-grow\"\n            type=\"button\"\n            (click)=\"addConfig()\"\n          >\n            <i [c8yIcon]=\"'add-circle-outline'\"></i>\n            {{ 'Add configuration' | translate }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemRadioComponent, selector: "c8y-list-item-radio, c8y-li-radio", inputs: ["selected", "name", "disabled", "value"], outputs: ["onSelect"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i4.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i4.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i4.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: WorkspaceConfigComponent, isStandalone: true, selector: "c8y-workspace-config", inputs: { updatedConfig: "updatedConfig", silent: "silent", defaultConfigurationId: "defaultConfigurationId" }, outputs: { onConfigurationChange: "onConfigurationChange" }, usesOnChanges: true, ngImport: i0, template: "@if (!silent) {\n  <div\n    class=\"dropdown\"\n    #actionbar_dropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"actionbar_dropdown.isOpen\"\n    dropdown\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n      style=\"max-width: 240px\"\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-8\"\n        c8yIcon=\"list\"\n      ></i>\n      <div class=\"d-col text-left fit-w min-width-0\">\n        <span class=\"text-muted fit-w text-10 l-h-1\">\n          {{ 'Configuration' | translate }}\n        </span>\n        <span class=\"text-bold text-12 fit-w l-h-1 text-truncate\">\n          {{ currentConfiguration?.label }}\n        </span>\n      </div>\n      <span class=\"caret m-r-16 m-l-4 flex-no-shrink\"></span>\n    </button>\n    <div\n      class=\"dropdown-menu dropdown-menu-wide dropdown-menu-action-bar\"\n      *dropdownMenu\n    >\n      <div class=\"sticky-top separator-bottom p-t-8 p-b-8 p-l-16 p-r-16\">\n        <p>\n          <strong>{{ 'Data explorer configurations' | translate }}</strong>\n        </p>\n        <p>\n          <small>{{ 'Easily switch and manage configurations.' | translate }}</small>\n        </p>\n      </div>\n      <c8y-list-group class=\"no-border-last\">\n        <form [formGroup]=\"configurationsFormGroup\">\n          <div formArrayName=\"configurations\">\n            @for (\n              configuration of configurationsFormGroup.controls.configurations['controls'];\n              track $index\n            ) {\n              <c8y-li\n                class=\"p-0\"\n                [dense]=\"true\"\n              >\n                <c8y-li-radio\n                  style=\"min-height: 48px\"\n                  [selected]=\"configuration.value.id === currentConfiguration.id\"\n                  (onSelect)=\"changeConfiguration($event, configuration.value)\"\n                ></c8y-li-radio>\n\n                <div class=\"d-flex a-i-center gap-8\">\n                  <div\n                    class=\"min-width-0 flex-grow\"\n                    [formGroupName]=\"$index\"\n                  >\n                    <c8y-input-group-editable\n                      formGroupClass=\"m-b-0\"\n                      size=\"sm\"\n                      [ariaLabel]=\"'Configuration label' | translate\"\n                      [placeholder]=\"'Configuration 1' | translate\"\n                      formControlName=\"label\"\n                      [validators]=\"labelValidators\"\n                      (save)=\"updateConfigurationLabel({ ...configuration.value, label: $event })\"\n                    ></c8y-input-group-editable>\n                  </div>\n\n                  <div class=\"m-l-auto flex-nogrow d-flex gap-8\">\n                    <button\n                      class=\"btn-dot btn m-0\"\n                      [attr.aria-label]=\"'Duplicate configuration' | translate\"\n                      tooltip=\"{{ 'Duplicate configuration' | translate }}\"\n                      placement=\"left\"\n                      (click)=\"addConfig(configuration.value.config)\"\n                      [delay]=\"500\"\n                    >\n                      <i c8yIcon=\"copy\"></i>\n                    </button>\n\n                    <button\n                      class=\"btn-dot btn btn-dot--danger\"\n                      [attr.aria-label]=\"'Remove configurations' | translate\"\n                      tooltip=\"{{\n                        (configuration.value.id === currentConfiguration.id\n                          ? activeConfigTooltip\n                          : removeConfigTooltip\n                        ) | translate\n                      }}\"\n                      placement=\"left\"\n                      [delay]=\"500\"\n                      (click)=\"$event.stopPropagation(); deleteConfiguration(configuration.value)\"\n                      [disabled]=\"configuration.value.id === currentConfiguration.id\"\n                    >\n                      <i c8yIcon=\"minus-circle\"></i>\n                    </button>\n                  </div>\n                </div>\n              </c8y-li>\n            }\n          </div>\n        </form>\n      </c8y-list-group>\n      <div class=\"sticky-bottom separator-top\">\n        <div class=\"d-flex p-l-16 p-r-16 p-t-8 p-b-8\">\n          <button\n            class=\"btn btn-danger btn-sm flex-grow m-r-4\"\n            (click)=\"clearAll()\"\n            [disabled]=\"configurations.length < 2\"\n          >\n            <i [c8yIcon]=\"'delete'\"></i>\n            {{ 'Delete all configurations' | translate }}\n          </button>\n          <button\n            class=\"btn btn-default btn-sm flex-grow\"\n            type=\"button\"\n            (click)=\"addConfig()\"\n          >\n            <i [c8yIcon]=\"'add-circle-outline'\"></i>\n            {{ 'Add configuration' | translate }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.InputGroupEditableComponent, selector: "c8y-input-group-editable", inputs: ["ariaLabel", "name", "size", "placeholder", "multiline", "maxHeight", "maxLength", "noSaveButton", "formGroupClass", "validators", "asyncValidators", "autocomplete"], outputs: ["save", "cancel"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemRadioComponent, selector: "c8y-list-item-radio, c8y-li-radio", inputs: ["selected", "name", "disabled", "value"], outputs: ["onSelect"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i3.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: ReactiveFormsModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: WorkspaceConfigComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-workspace-config', standalone: true, imports: [CoreModule, BsDropdownModule, FormsModule, A11yModule, TooltipModule], template: "@if (!silent) {\n  <div\n    class=\"dropdown\"\n    #actionbar_dropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"actionbar_dropdown.isOpen\"\n    dropdown\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n      attr.aria-label=\"{{ currentConfiguration?.label }}\"\n      tooltip=\"{{ 'Selected configuration' | translate }}\"\n      placement=\"top\"\n      container=\"body\"\n      data-cy=\"current-configuration-dropdown-button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      dropdownToggle\n    >\n      <i\n        class=\"m-r-4\"\n        c8yIcon=\"list\"\n      ></i>\n      <div class=\"d-col text-left fit-w\">\n        <span class=\"text-12\">\n          {{ 'Configuration' | translate }}\n        </span>\n        <span class=\"text-10 text-muted text-truncate\">\n          {{ currentConfiguration?.label }}\n        </span>\n      </div>\n      <span class=\"caret m-r-16 m-l-4\"></span>\n    </button>\n    <div\n      class=\"dropdown-menu dropdown-menu-wide dropdown-menu-action-bar\"\n      *dropdownMenu\n    >\n      <div class=\"sticky-top separator-bottom p-t-8 p-b-8 p-l-16 p-r-16\">\n        <p>\n          <strong>{{ 'Data explorer configurations' | translate }}</strong>\n        </p>\n        <p>\n          <small>{{ 'Easily switch and manage configurations.' | translate }}</small>\n        </p>\n      </div>\n      <c8y-list-group class=\"no-border-last\">\n        <form [formGroup]=\"configurationsFormGroup\">\n          <div formArrayName=\"configurations\">\n            @for (\n              configuration of configurationsFormGroup.controls.configurations['controls'];\n              track $index\n            ) {\n              <c8y-li\n                class=\"p-0\"\n                [dense]=\"true\"\n              >\n                <c8y-li-radio\n                  style=\"min-height: 48px\"\n                  [selected]=\"configuration.value.id === currentConfiguration.id\"\n                  (onSelect)=\"changeConfiguration($event, configuration.value)\"\n                ></c8y-li-radio>\n\n                <div class=\"d-flex a-i-center gap-8\">\n                  <div\n                    class=\"min-width-0\"\n                    [formGroupName]=\"$index\"\n                  >\n                    <label\n                      class=\"editable\"\n                      [ngClass]=\"{\n                        updated:\n                          configuration.controls.label.touched && configuration.controls.label.dirty\n                      }\"\n                    >\n                      <input\n                        class=\"form-control\"\n                        [style.width.ch]=\"configuration.value.label || 25\"\n                        [attr.aria-label]=\"'Configuration label' | translate\"\n                        placeholder=\"{{ 'Configuration 1' | translate }}\"\n                        type=\"text\"\n                        autocomplete=\"off\"\n                        required\n                        formControlName=\"label\"\n                        (blur)=\"updateConfigurationLabel(configuration.value)\"\n                        (keydown.enter)=\"\n                          $event.preventDefault(); updateConfigurationLabel(configuration.value)\n                        \"\n                      />\n                    </label>\n                  </div>\n\n                  <div class=\"flex-nogrow d-flex gap-8\">\n                    <button\n                      class=\"btn-dot btn m-0\"\n                      [attr.aria-label]=\"'Duplicate configuration' | translate\"\n                      tooltip=\"{{ 'Duplicate configuration' | translate }}\"\n                      placement=\"left\"\n                      (click)=\"addConfig(configuration.value.config)\"\n                      [delay]=\"500\"\n                    >\n                      <i c8yIcon=\"copy\"></i>\n                    </button>\n\n                    <button\n                      class=\"btn-dot btn btn-dot--danger\"\n                      [attr.aria-label]=\"'Remove configurations' | translate\"\n                      tooltip=\"{{\n                        (configuration.value.id === currentConfiguration.id\n                          ? activeConfigTooltip\n                          : removeConfigTooltip\n                        ) | translate\n                      }}\"\n                      placement=\"left\"\n                      [delay]=\"500\"\n                      (click)=\"$event.stopPropagation(); deleteConfiguration(configuration.value)\"\n                      [disabled]=\"configuration.value.id === currentConfiguration.id\"\n                    >\n                      <i c8yIcon=\"minus-circle\"></i>\n                    </button>\n                  </div>\n                </div>\n              </c8y-li>\n            }\n          </div>\n        </form>\n      </c8y-list-group>\n      <div class=\"sticky-bottom separator-top\">\n        <div class=\"d-flex p-l-16 p-r-16 p-t-8 p-b-8\">\n          <button\n            class=\"btn btn-danger btn-sm flex-grow m-r-4\"\n            (click)=\"clearAll()\"\n            [disabled]=\"configurations.length < 2\"\n          >\n            <i [c8yIcon]=\"'delete'\"></i>\n            {{ 'Delete all configurations' | translate }}\n          </button>\n          <button\n            class=\"btn btn-default btn-sm flex-grow\"\n            type=\"button\"\n            (click)=\"addConfig()\"\n          >\n            <i [c8yIcon]=\"'add-circle-outline'\"></i>\n            {{ 'Add configuration' | translate }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n" }]
+            args: [{ selector: 'c8y-workspace-config', standalone: true, imports: [
+                        CoreModule,
+                        BsDropdownModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        A11yModule,
+                        TooltipModule,
+                        InputGroupEditableComponent
+                    ], template: "@if (!silent) {\n  <div\n    class=\"dropdown\"\n    #actionbar_dropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"actionbar_dropdown.isOpen\"\n    dropdown\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n      style=\"max-width: 240px\"\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-8\"\n        c8yIcon=\"list\"\n      ></i>\n      <div class=\"d-col text-left fit-w min-width-0\">\n        <span class=\"text-muted fit-w text-10 l-h-1\">\n          {{ 'Configuration' | translate }}\n        </span>\n        <span class=\"text-bold text-12 fit-w l-h-1 text-truncate\">\n          {{ currentConfiguration?.label }}\n        </span>\n      </div>\n      <span class=\"caret m-r-16 m-l-4 flex-no-shrink\"></span>\n    </button>\n    <div\n      class=\"dropdown-menu dropdown-menu-wide dropdown-menu-action-bar\"\n      *dropdownMenu\n    >\n      <div class=\"sticky-top separator-bottom p-t-8 p-b-8 p-l-16 p-r-16\">\n        <p>\n          <strong>{{ 'Data explorer configurations' | translate }}</strong>\n        </p>\n        <p>\n          <small>{{ 'Easily switch and manage configurations.' | translate }}</small>\n        </p>\n      </div>\n      <c8y-list-group class=\"no-border-last\">\n        <form [formGroup]=\"configurationsFormGroup\">\n          <div formArrayName=\"configurations\">\n            @for (\n              configuration of configurationsFormGroup.controls.configurations['controls'];\n              track $index\n            ) {\n              <c8y-li\n                class=\"p-0\"\n                [dense]=\"true\"\n              >\n                <c8y-li-radio\n                  style=\"min-height: 48px\"\n                  [selected]=\"configuration.value.id === currentConfiguration.id\"\n                  (onSelect)=\"changeConfiguration($event, configuration.value)\"\n                ></c8y-li-radio>\n\n                <div class=\"d-flex a-i-center gap-8\">\n                  <div\n                    class=\"min-width-0 flex-grow\"\n                    [formGroupName]=\"$index\"\n                  >\n                    <c8y-input-group-editable\n                      formGroupClass=\"m-b-0\"\n                      size=\"sm\"\n                      [ariaLabel]=\"'Configuration label' | translate\"\n                      [placeholder]=\"'Configuration 1' | translate\"\n                      formControlName=\"label\"\n                      [validators]=\"labelValidators\"\n                      (save)=\"updateConfigurationLabel({ ...configuration.value, label: $event })\"\n                    ></c8y-input-group-editable>\n                  </div>\n\n                  <div class=\"m-l-auto flex-nogrow d-flex gap-8\">\n                    <button\n                      class=\"btn-dot btn m-0\"\n                      [attr.aria-label]=\"'Duplicate configuration' | translate\"\n                      tooltip=\"{{ 'Duplicate configuration' | translate }}\"\n                      placement=\"left\"\n                      (click)=\"addConfig(configuration.value.config)\"\n                      [delay]=\"500\"\n                    >\n                      <i c8yIcon=\"copy\"></i>\n                    </button>\n\n                    <button\n                      class=\"btn-dot btn btn-dot--danger\"\n                      [attr.aria-label]=\"'Remove configurations' | translate\"\n                      tooltip=\"{{\n                        (configuration.value.id === currentConfiguration.id\n                          ? activeConfigTooltip\n                          : removeConfigTooltip\n                        ) | translate\n                      }}\"\n                      placement=\"left\"\n                      [delay]=\"500\"\n                      (click)=\"$event.stopPropagation(); deleteConfiguration(configuration.value)\"\n                      [disabled]=\"configuration.value.id === currentConfiguration.id\"\n                    >\n                      <i c8yIcon=\"minus-circle\"></i>\n                    </button>\n                  </div>\n                </div>\n              </c8y-li>\n            }\n          </div>\n        </form>\n      </c8y-list-group>\n      <div class=\"sticky-bottom separator-top\">\n        <div class=\"d-flex p-l-16 p-r-16 p-t-8 p-b-8\">\n          <button\n            class=\"btn btn-danger btn-sm flex-grow m-r-4\"\n            (click)=\"clearAll()\"\n            [disabled]=\"configurations.length < 2\"\n          >\n            <i [c8yIcon]=\"'delete'\"></i>\n            {{ 'Delete all configurations' | translate }}\n          </button>\n          <button\n            class=\"btn btn-default btn-sm flex-grow\"\n            type=\"button\"\n            (click)=\"addConfig()\"\n          >\n            <i [c8yIcon]=\"'add-circle-outline'\"></i>\n            {{ 'Add configuration' | translate }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n" }]
         }], propDecorators: { updatedConfig: [{
                 type: Input
             }], silent: [{
@@ -758,7 +767,7 @@ class SendAsWidgetToDashboardModal {
         return new FormGroup(controls);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SendAsWidgetToDashboardModal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: SendAsWidgetToDashboardModal, isStandalone: true, selector: "c8y-send-as-widget-to-dashboard-modal", inputs: { contextAsset: "contextAsset" }, ngImport: i0, template: "<c8y-modal\n  [title]=\"'Send as widget to dashboards' | translate\"\n  [disabled]=\"!form || form.invalid\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"cancel()\"\n  (onClose)=\"save()\"\n  [labels]=\"labels\"\n>\n  <ng-container c8y-modal-title>\n    <span c8yIcon=\"th\"></span>\n  </ng-container>\n\n  <c8y-list-group\n    class=\"m-b-0 no-border-last\"\n    *ngIf=\"form\"\n    [formGroup]=\"form\"\n  >\n    <c8y-li>\n      <p\n        class=\"text-center text-medium\"\n        *ngIf=\"numberOfSelectedDashboards$ | async as numberOfDashboards; else noSelectedDashboards\"\n        translate\n        [translateParams]=\"{ numberOfDashboards: numberOfDashboards }\"\n        ngNonBindable\n      >\n        {{ numberOfDashboards }} dashboards selected for widget\n      </p>\n      <ng-template #noSelectedDashboards>\n        <p\n          class=\"text-center text-medium\"\n          translate\n        >\n          Select one or more dashboards to send the Data points graph widget with the current\n          configuration\n        </p>\n      </ng-template>\n    </c8y-li>\n    <c8y-li *ngFor=\"let dashboard of dashboards\">\n      <c8y-li-checkbox\n        [attr.data-cy]=\"'branding-apply-branding-to-app-checkbox-' + dashboard.id\"\n        [formControlName]=\"dashboard.id\"\n      ></c8y-li-checkbox>\n      <c8y-li-icon class=\"p-l-0\">\n        <i c8yIcon=\"{{ dashboard.icon }}\"></i>\n      </c8y-li-icon>\n      <div\n        class=\"text-truncate\"\n        title=\"{{ dashboard.name }}\"\n      >\n        {{ dashboard.name }}\n      </div>\n    </c8y-li>\n  </c8y-list-group>\n\n  <c8y-ui-empty-state\n    [icon]=\"'th'\"\n    [title]=\"'There are no dashboards defined.' | translate\"\n    [subtitle]=\"'Add a dashboard first.' | translate\"\n    *ngIf=\"dashboards.length === 0\"\n  ></c8y-ui-empty-state>\n</c8y-modal>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "ngmodule", type: ContextDashboardModule }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: SendAsWidgetToDashboardModal, isStandalone: true, selector: "c8y-send-as-widget-to-dashboard-modal", inputs: { contextAsset: "contextAsset" }, ngImport: i0, template: "<c8y-modal\n  [title]=\"'Send as widget to dashboards' | translate\"\n  [disabled]=\"!form || form.invalid\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"cancel()\"\n  (onClose)=\"save()\"\n  [labels]=\"labels\"\n>\n  <ng-container c8y-modal-title>\n    <span c8yIcon=\"th\"></span>\n  </ng-container>\n\n  <c8y-list-group\n    class=\"m-b-0 no-border-last\"\n    *ngIf=\"form\"\n    [formGroup]=\"form\"\n  >\n    <c8y-li>\n      <p\n        class=\"text-center text-medium\"\n        *ngIf=\"numberOfSelectedDashboards$ | async as numberOfDashboards; else noSelectedDashboards\"\n        translate\n        [translateParams]=\"{ numberOfDashboards: numberOfDashboards }\"\n        ngNonBindable\n      >\n        {{ numberOfDashboards }} dashboards selected for widget\n      </p>\n      <ng-template #noSelectedDashboards>\n        <p\n          class=\"text-center text-medium\"\n          translate\n        >\n          Select one or more dashboards to send the Data points graph widget with the current\n          configuration\n        </p>\n      </ng-template>\n    </c8y-li>\n    <c8y-li *ngFor=\"let dashboard of dashboards\">\n      <c8y-li-checkbox\n        [attr.data-cy]=\"'branding-apply-branding-to-app-checkbox-' + dashboard.id\"\n        [formControlName]=\"dashboard.id\"\n      ></c8y-li-checkbox>\n      <c8y-li-icon class=\"p-l-0\">\n        <i c8yIcon=\"{{ dashboard.icon }}\"></i>\n      </c8y-li-icon>\n      <div\n        class=\"text-truncate\"\n        title=\"{{ dashboard.name }}\"\n      >\n        {{ dashboard.name }}\n      </div>\n    </c8y-li>\n  </c8y-list-group>\n\n  <c8y-ui-empty-state\n    [icon]=\"'th'\"\n    [title]=\"'There are no dashboards defined.' | translate\"\n    [subtitle]=\"'Add a dashboard first.' | translate\"\n    *ngIf=\"dashboards.length === 0\"\n  ></c8y-ui-empty-state>\n</c8y-modal>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "ngmodule", type: ContextDashboardModule }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SendAsWidgetToDashboardModal, decorators: [{
             type: Component,
@@ -798,7 +807,7 @@ class SendAsWidgetToReportModal {
         return new FormGroup(controls);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SendAsWidgetToReportModal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: SendAsWidgetToReportModal, isStandalone: true, selector: "c8y-send-as-widget-to-report-modal", ngImport: i0, template: "<c8y-modal\n  [title]=\"'Send as widget to reports' | translate\"\n  [disabled]=\"!form || form.invalid\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"cancel()\"\n  (onClose)=\"save()\"\n  [labels]=\"labels\"\n>\n  <ng-container c8y-modal-title>\n    <span c8yIcon=\"c8y-reports\"></span>\n  </ng-container>\n\n  <c8y-list-group\n    class=\"m-b-0 no-border-last\"\n    *ngIf=\"form\"\n    [formGroup]=\"form\"\n  >\n    <c8y-li>\n      <p\n        class=\"text-center text-medium\"\n        *ngIf=\"numberOfSelectedReports$ | async as numberOfReports; else noSelectedReports\"\n        translate\n        [translateParams]=\"{ numberOfReports: numberOfReports }\"\n        ngNonBindable\n      >\n        {{ numberOfReports }} reports selected for widget\n      </p>\n      <ng-template #noSelectedReports>\n        <p\n          class=\"text-center text-medium\"\n          translate\n        >\n          Select one or more reports to send the Data points graph widget with the current configuration\n        </p>\n      </ng-template>\n    </c8y-li>\n    <c8y-li *ngFor=\"let report of reports\">\n      <c8y-li-checkbox\n        [attr.data-cy]=\"'branding-apply-branding-to-app-checkbox-' + report.id\"\n        [formControlName]=\"report.id\"\n      ></c8y-li-checkbox>\n      <c8y-li-icon class=\"p-l-0\">\n        <i c8yIcon=\"{{ report.icon }}\"></i>\n      </c8y-li-icon>\n      <div class=\"text-truncate\" title=\"{{report.name}}\">{{ report.name }}</div>\n    </c8y-li>\n  </c8y-list-group>\n\n  <c8y-ui-empty-state\n    [icon]=\"'c8y-reports'\"\n    [title]=\"'There are no reports defined.' | translate\"\n    [subtitle]=\"'Add a report first.' | translate\"\n    *ngIf=\"reports.length === 0\"\n  ></c8y-ui-empty-state>\n</c8y-modal>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "ngmodule", type: ReportDashboardModule }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: SendAsWidgetToReportModal, isStandalone: true, selector: "c8y-send-as-widget-to-report-modal", ngImport: i0, template: "<c8y-modal\n  [title]=\"'Send as widget to reports' | translate\"\n  [disabled]=\"!form || form.invalid\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"cancel()\"\n  (onClose)=\"save()\"\n  [labels]=\"labels\"\n>\n  <ng-container c8y-modal-title>\n    <span c8yIcon=\"c8y-reports\"></span>\n  </ng-container>\n\n  <c8y-list-group\n    class=\"m-b-0 no-border-last\"\n    *ngIf=\"form\"\n    [formGroup]=\"form\"\n  >\n    <c8y-li>\n      <p\n        class=\"text-center text-medium\"\n        *ngIf=\"numberOfSelectedReports$ | async as numberOfReports; else noSelectedReports\"\n        translate\n        [translateParams]=\"{ numberOfReports: numberOfReports }\"\n        ngNonBindable\n      >\n        {{ numberOfReports }} reports selected for widget\n      </p>\n      <ng-template #noSelectedReports>\n        <p\n          class=\"text-center text-medium\"\n          translate\n        >\n          Select one or more reports to send the Data points graph widget with the current configuration\n        </p>\n      </ng-template>\n    </c8y-li>\n    <c8y-li *ngFor=\"let report of reports\">\n      <c8y-li-checkbox\n        [attr.data-cy]=\"'branding-apply-branding-to-app-checkbox-' + report.id\"\n        [formControlName]=\"report.id\"\n      ></c8y-li-checkbox>\n      <c8y-li-icon class=\"p-l-0\">\n        <i c8yIcon=\"{{ report.icon }}\"></i>\n      </c8y-li-icon>\n      <div class=\"text-truncate\" title=\"{{report.name}}\">{{ report.name }}</div>\n    </c8y-li>\n  </c8y-list-group>\n\n  <c8y-ui-empty-state\n    [icon]=\"'c8y-reports'\"\n    [title]=\"'There are no reports defined.' | translate\"\n    [subtitle]=\"'Add a report first.' | translate\"\n    *ngIf=\"reports.length === 0\"\n  ></c8y-ui-empty-state>\n</c8y-modal>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "ngmodule", type: ReportDashboardModule }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SendAsWidgetToReportModal, decorators: [{
             type: Component,
@@ -830,6 +839,7 @@ class DatapointExplorerComponent {
         };
         /** Flag to skip onTimeContextChange during zoom handling */
         this.isHandlingZoom = false;
+        this.isMigrated = false;
         this.chartViewContext = CHART_VIEW_CONTEXT.DATAPOINT_EXPLORER;
         this.TIME_PICKER_CONFIG = {
             showMinutes: true,
@@ -869,15 +879,24 @@ class DatapointExplorerComponent {
                 dateTo: new Date(this.config.dateTo),
                 interval: (this.config.interval === 'none' ? null : this.config.interval),
                 realtime: this.config.realtime,
-                aggregation: this.config.aggregation
+                aggregation: this.config.aggregation,
+                autoAggregation: this.config.autoAggregation ?? null
             };
         }
+        // If datapoints already exist in config, run migration check immediately so
+        // showAdvancedChartOptions reflects the correct state on first render.
+        const existingDatapoints = this.config.datapoints || [];
+        if (existingDatapoints.length > 0) {
+            this.detectTimeSeriesMigration(existingDatapoints[0]).then(isMigrated => {
+                this.isMigrated = isMigrated;
+                this.updateAdvancedChartOptions();
+            });
+        }
         this.formGroup.controls.datapoints.valueChanges
             .pipe(takeUntilDestroyed(this.#destroyRef), filter(value => value.length > 0), take(1))
             .subscribe(async (value) => {
-            const isMigrated = await this.detectTimeSeriesMigration(value[0]);
-            this.datapointSelectDefaultFormOptions.showAdvancedChartOptions = isMigrated;
-            this.formGroup.patchValue({ showAdvancedChartOptions: isMigrated }, { emitEvent: false });
+            this.isMigrated = await this.detectTimeSeriesMigration(value[0]);
+            this.updateAdvancedChartOptions();
         });
         this.formGroup.valueChanges
             .pipe(takeUntilDestroyed(this.#destroyRef))
@@ -908,7 +927,8 @@ class DatapointExplorerComponent {
                 realtime: timeProps.realtime,
                 isAutoRefreshEnabled: timeProps.realtime,
                 refreshInterval: 5000,
-                aggregation: timeProps.realtime ? null : timeProps.aggregation || null
+                aggregation: timeProps.realtime ? null : timeProps.aggregation || null,
+                autoAggregation: timeProps.realtime ? null : timeProps.autoAggregation || null
             });
         }
         if (timeProps.realtime) {
@@ -924,23 +944,28 @@ class DatapointExplorerComponent {
                 dateTo: new Date(timeProps.currentDateContextToDate),
                 interval: timeProps.currentDateContextInterval,
                 realtime: timeProps.realtime,
-                aggregation: timeProps.aggregation
+                aggregation: timeProps.aggregation,
+                autoAggregation: null
             };
+            this.updateAdvancedChartOptions();
             return;
         }
         this.formGroup.patchValue({
             dateFrom: timeProps.currentDateContextFromDate,
             dateTo: timeProps.currentDateContextToDate,
             interval: timeProps.currentDateContextInterval,
-            aggregation: timeProps.aggregation || null
+            aggregation: timeProps.autoAggregation ? null : timeProps.aggregation || null,
+            autoAggregation: timeProps.autoAggregation || null
         });
         this.timeProps = {
             dateFrom: new Date(timeProps.currentDateContextFromDate),
             dateTo: new Date(timeProps.currentDateContextToDate),
             interval: timeProps.currentDateContextInterval,
             realtime: timeProps.realtime,
-            aggregation: timeProps.aggregation
+            aggregation: timeProps.autoAggregation ? null : timeProps.aggregation || null,
+            autoAggregation: timeProps.autoAggregation || null
         };
+        this.updateAdvancedChartOptions();
     }
     async onConfigurationChange(config) {
         const uniqueIds = this.datapointSyncService.getManagedObjectIds(config.datapoints || []);
@@ -967,7 +992,8 @@ class DatapointExplorerComponent {
             dateTo,
             interval: config?.interval,
             realtime: config?.realtime,
-            aggregation: config?.realtime ? null : config?.aggregation
+            aggregation: config?.realtime ? null : config?.aggregation,
+            autoAggregation: config?.realtime ? null : (config?.autoAggregation ?? null)
         };
         this.alarms = config.alarmsEventsConfigs.filter(ae => ae.timelineType === 'ALARM');
         this.events = config.alarmsEventsConfigs.filter(ae => ae.timelineType === 'EVENT');
@@ -1003,7 +1029,9 @@ class DatapointExplorerComponent {
             dateFrom: new Date(timeProps.dateFrom.getTime()),
             dateTo: new Date(timeProps.dateTo.getTime()),
             interval: 'custom',
-            realtime: false
+            realtime: false,
+            aggregation: this.formGroup.value.autoAggregation ? null : this.formGroup.value.aggregation,
+            autoAggregation: this.formGroup.value.autoAggregation ?? null
         };
         // Sync timeContext state
         if (this.timeContext) {
@@ -1016,7 +1044,9 @@ class DatapointExplorerComponent {
                 currentDateContextInterval: 'custom',
                 realtime: false
             }, { emitEvent: false });
-            this.timeContext.form.controls.aggregation.enable();
+            if (!this.formGroup.value.autoAggregation) {
+                this.timeContext.form.controls.aggregation.enable();
+            }
         }
         this.isHandlingZoom = false;
     }
@@ -1173,6 +1203,15 @@ class DatapointExplorerComponent {
             doc.webkitFullscreenElement ||
             doc.msFullscreenElement);
     }
+    updateAdvancedChartOptions() {
+        const hasAggregation = !!(this.timeProps?.aggregation || this.timeProps?.autoAggregation);
+        const showAdvancedChartOptions = this.isMigrated && hasAggregation;
+        this.datapointSelectDefaultFormOptions = {
+            ...this.datapointSelectDefaultFormOptions,
+            showAdvancedChartOptions
+        };
+        this.formGroup.patchValue({ showAdvancedChartOptions });
+    }
     /**
      * DEPRECATED: to be removed when there is another way to identify time series migration.
      * This method checks if the tenant is migrated to time series by making a call to measurement detail endpoint.
@@ -1264,6 +1303,7 @@ class DatapointExplorerComponent {
             dateTo: [this.config.dateTo || null],
             interval: [this.config.interval || 'hours'],
             aggregation: [this.config.aggregation || null],
+            autoAggregation: [this.config.autoAggregation || null],
             realtime: [this.config.realtime || false],
             isAutoRefreshEnabled: [this.config.isAutoRefreshEnabled || false],
             refreshInterval: [this.config.refreshInterval || 5000],
@@ -1288,7 +1328,7 @@ class DatapointExplorerComponent {
             ChartAlarmsService,
             ChartHelpersService,
             WidgetTimeContextDateRangeService
-        ], viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true }, { propertyName: "timeContext", first: true, predicate: ["timeContext"], descendants: true }], ngImport: i0, template: "<c8y-title>{{ 'Data explorer' | translate }}</c8y-title>\n\n<c8y-time-context\n  #timeContext\n  (contextChange)=\"onTimeContextChange($event)\"\n  [changedDateContext]=\"timeProps\"\n  [timeContext]=\"(settings$ | async)?.timeContext\"\n  [timePickerConfig]=\"TIME_PICKER_CONFIG\"\n></c8y-time-context>\n\n<c8y-action-bar-item [placement]=\"'left'\">\n  <c8y-workspace-config\n    [updatedConfig]=\"config\"\n    [silent]=\"(settings$ | async)?.hideWorkspaceConfig\"\n    (onConfigurationChange)=\"onConfigurationChange($event)\"\n  ></c8y-workspace-config>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"-5000\"\n  itemClass=\"pull-right\"\n>\n  <button\n    class=\"btn btn-link\"\n    [attr.aria-label]=\"'Full screen' | translate\"\n    [tooltip]=\"\n      ((inFullScreen$ | async)\n        ? fullScreenToggleTooltipText.exit\n        : fullScreenToggleTooltipText.enter\n      ) | translate\n    \"\n    placement=\"left\"\n    container=\"body\"\n    type=\"button\"\n    [delay]=\"500\"\n    (click)=\"toggleFullscreen()\"\n    data-cy=\"datapoint-explorer--full-screen\"\n  >\n    <i\n      [c8yIcon]=\"(inFullScreen$ | async) ? 'compress' : 'expand'\"\n      aria-hidden=\"true\"\n    ></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visibile-lg-inline\">\n      {{\n        ((inFullScreen$ | async)\n          ? fullScreenToggleTooltipText.exit\n          : fullScreenToggleTooltipText.enter\n        ) | translate\n      }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n@if (!(settings$ | async)?.hideExportSelector) {\n  <c8y-action-bar-item [placement]=\"'right'\">\n    <c8y-datapoints-export-selector\n      [exportConfig]=\"exportConfig\"\n      [containerClass]=\"'d-contents'\"\n    ></c8y-datapoints-export-selector>\n  </c8y-action-bar-item>\n}\n\n@if (!(settings$ | async)?.hideWidgetActions) {\n  @if (contextAsset) {\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Send as widget to dashboard' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"sendAsWidgetToDashboard()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i\n          c8yIcon=\"th\"\n          aria-hidden=\"true\"\n        ></i>\n        <span>{{ 'Send as widget to dashboard' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  } @else {\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        title=\"{{ 'Send as widget to report' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"sendAsWidgetToReport()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i\n          c8yIcon=\"c8y-reports\"\n          aria-hidden=\"true\"\n        ></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\n          c8yIcon=\"c8y-reports\"\n          aria-hidden=\"true\"\n        ></i>\n        <span>{{ 'Create a new report with widget' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  }\n}\n\n<c8y-resizable-grid\n  class=\"content-fullpage\"\n  [leftColumnWidth]=\"'calc(100% - 360px)'\"\n  [collapseThreshold]=\"360\"\n  [trackId]=\"'datapoint-explorer'\"\n>\n  <div\n    class=\"d-col gap-16 inner-scroll\"\n    left-pane\n  >\n    <c8y-charts\n      class=\"flex-grow data-point-explorer\"\n      style=\"min-height: 340px\"\n      #chart\n      [config]=\"config\"\n      [alerts]=\"alerts\"\n      [chartViewContext]=\"chartViewContext\"\n      (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n      (configChangeOnZoomOut)=\"onSliderZoom($event)\"\n      (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n      (datapointBackInSync)=\"handleDatapointBackInSync($event)\"\n      (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n      (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n      (updateActiveDatapoints)=\"updateActiveDatapoints($event)\"\n      (updateAggregatedSliderDatapoint)=\"updateAggregatedSliderDatapoint($event)\"\n    ></c8y-charts>\n    <form\n      class=\"flex-shrink p-16 p-r-16 p-relative\"\n      [class.bg-level-1]=\"showSettings\"\n      [class.p-b-0]=\"!showSettings\"\n      style=\"z-index: 1\"\n      [formGroup]=\"formGroup\"\n    >\n      <button\n        class=\"legend form-block center btn-clean m-b-0 m-t-0\"\n        aria-controls=\"chart-settings-panel\"\n        [attr.aria-expanded]=\"showSettings\"\n        (click)=\"showSettings = !showSettings; triggerResize()\"\n      >\n        <i\n          class=\"m-r-4\"\n          [c8yIcon]=\"'combo-chart'\"\n          aria-hidden=\"true\"\n        ></i>\n        <span>\n          {{ 'Display settings' | translate }}\n        </span>\n        <i\n          class=\"m-l-4\"\n          [c8yIcon]=\"showSettings ? 'chevron-up' : 'chevron-down'\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n      <div\n        class=\"collapse bg-level-1\"\n        id=\"chart-settings-panel\"\n        [collapse]=\"!showSettings\"\n        [isAnimated]=\"true\"\n      >\n        <div class=\"bg-level-1 responsive-grid-table-wrapper--600\">\n          <div\n            class=\"responsive-grid-table responsive-grid-table--padded responsive-grid-table__body\"\n          >\n            <div class=\"col-5 d-col a-s-start p-b-0\">\n              <fieldset class=\"c8y-fieldset form-group-sm m-t-md-0 p-b-8\">\n                <legend>{{ 'Alarms & events' | translate }}</legend>\n                <label\n                  class=\"c8y-checkbox\"\n                  [title]=\"'Show vertical line when alarm occurs' | translate\"\n                >\n                  <input\n                    name=\"displayMarkedLine\"\n                    type=\"checkbox\"\n                    formControlName=\"displayMarkedLine\"\n                  />\n                  <span></span>\n                  <span translate>Show vertical line on every occurrence</span>\n                </label>\n\n                <label\n                  class=\"c8y-checkbox\"\n                  [title]=\"'Show icon when alarm or event occurs' | translate\"\n                >\n                  <input\n                    name=\"displayMarkedPoint\"\n                    type=\"checkbox\"\n                    formControlName=\"displayMarkedPoint\"\n                  />\n                  <span></span>\n                  <span>\n                    {{\n                      'Show icon when triggered`When alarms and events occur the icon will be shown`'\n                        | translate\n                    }}\n                  </span>\n                  @if (alarmsOrEventsHaveNoMatchingDps) {\n                    <button\n                      class=\"btn-dot m-l-4\"\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                      [popover]=\"\n                        'Some alarms or events have no matching data points. No icons will be shown for them.'\n                          | translate\n                      \"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                      (click)=\"$event.stopPropagation()\"\n                    >\n                      <i\n                        class=\"text-warning\"\n                        c8yIcon=\"warning\"\n                      ></i>\n                    </button>\n                  }\n                </label>\n              </fieldset>\n\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                <label\n                  class=\"c8y-checkbox\"\n                  [title]=\"'Show smooth lines' | translate\"\n                >\n                  <input\n                    name=\"smoothLines\"\n                    type=\"checkbox\"\n                    formControlName=\"smoothLines\"\n                  />\n                  <span></span>\n                  <span translate>Show smooth lines</span>\n                </label>\n              </fieldset>\n            </div>\n            <div class=\"col-7 a-s-start p-b-0\">\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-help\"\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                    [popover]=\"\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                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                    (click)=\"$event.stopPropagation()\"\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-help\"\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                    [popover]=\"\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                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></button>\n                </label>\n                <label\n                  class=\"c8y-checkbox\"\n                  [title]=\"'Set Y-axis start to 0' | translate\"\n                >\n                  <input\n                    name=\"setYaxisStartToZero\"\n                    type=\"checkbox\"\n                    formControlName=\"setYaxisStartToZero\"\n                  />\n                  <span></span>\n                  <span translate>Set Y-axis start to 0</span>\n                  <button\n                    class=\"btn-help\"\n                    [attr.aria-label]=\"\n                      'Sets the Y-axis minimum to 0 for all data points with positive values. If any data point includes negative values, the axis may still extend below 0. Explicitly configured minimum and maximum values take precedence over this option.'\n                        | translate\n                    \"\n                    [popover]=\"\n                      'Sets the Y-axis minimum to 0 for all data points with positive values. If any data point includes negative values, the axis may still extend below 0. Explicitly configured minimum and maximum values take precedence over this option.'\n                        | translate\n                    \"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></button>\n                </label>\n              </fieldset>\n            </div>\n          </div>\n        </div>\n      </div>\n    </form>\n  </div>\n  <div\n    class=\"inner-scroll bg-level-1\"\n    right-pane\n  >\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</c8y-resizable-grid>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i3$1.DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle", "removeTitle"], outputs: ["isValid", "change"] }, { kind: "ngmodule", type: AlarmEventSelectorModule }, { kind: "component", type: i4$1.AlarmEventSelectionListComponent, selector: "c8y-alarm-event-selection-list", inputs: ["timelineType", "canRemove", "canEdit", "canDragAndDrop", "title", "addButtonLabel", "hideSource", "inline", "activeToggleAsSwitch", "omitProperties", "datapoints", "config"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i6$1.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i7.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: TimeContextComponent, selector: "c8y-time-context", inputs: ["changedDateContext", "controlsAvailable", "timeContext", "timePickerConfig", "context"], outputs: ["contextChange"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts", "chartViewContext"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "datapointBackInSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled", "finishLoading", "updateActiveDatapoints", "updateAggregatedSliderDatapoint"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: DatapointsExportSelectorComponent, selector: "c8y-datapoints-export-selector", inputs: ["displayMode", "containerClass", "exportConfig"], outputs: ["isOpen"] }, { kind: "component", type: WorkspaceConfigComponent, selector: "c8y-workspace-config", inputs: ["updatedConfig", "silent", "defaultConfigurationId"], outputs: ["onConfigurationChange"] }, { kind: "component", type: ResizableGridComponent, selector: "c8y-resizable-grid", inputs: ["leftColumnWidth", "trackId", "collapseThreshold", "collapsible"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true }, { propertyName: "timeContext", first: true, predicate: ["timeContext"], descendants: true }], ngImport: i0, template: "<c8y-title>{{ 'Data explorer' | translate }}</c8y-title>\n\n<c8y-time-context\n  #timeContext\n  (contextChange)=\"onTimeContextChange($event)\"\n  [changedDateContext]=\"timeProps\"\n  [timeContext]=\"(settings$ | async)?.timeContext\"\n  [enableAutoAggregation]=\"true\"\n  [timePickerConfig]=\"TIME_PICKER_CONFIG\"\n></c8y-time-context>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <c8y-workspace-config\n    [updatedConfig]=\"config\"\n    [silent]=\"(settings$ | async)?.hideWorkspaceConfig\"\n    (onConfigurationChange)=\"onConfigurationChange($event)\"\n  ></c8y-workspace-config>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"-5000\"\n  itemClass=\"pull-right\"\n>\n  <button\n    class=\"btn btn-link\"\n    [attr.aria-label]=\"'Full screen' | translate\"\n    [tooltip]=\"\n      ((inFullScreen$ | async)\n        ? fullScreenToggleTooltipText.exit\n        : fullScreenToggleTooltipText.enter\n      ) | translate\n    \"\n    placement=\"left\"\n    container=\"body\"\n    type=\"button\"\n    [delay]=\"500\"\n    (click)=\"toggleFullscreen()\"\n    data-cy=\"datapoint-explorer--full-screen\"\n  >\n    <i\n      [c8yIcon]=\"(inFullScreen$ | async) ? 'compress' : 'expand'\"\n      aria-hidden=\"true\"\n    ></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visibile-lg-inline\">\n      {{\n        ((inFullScreen$ | async)\n          ? fullScreenToggleTooltipText.exit\n          : fullScreenToggleTooltipText.enter\n        ) | translate\n      }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n@if (!(settings$ | async)?.hideExportSelector) {\n  <c8y-action-bar-item [placement]=\"'right'\">\n    <c8y-datapoints-export-selector\n      [exportConfig]=\"exportConfig\"\n      [containerClass]=\"'d-contents'\"\n    ></c8y-datapoints-export-selector>\n  </c8y-action-bar-item>\n}\n\n@if (!(settings$ | async)?.hideWidgetActions) {\n  @if (contextAsset) {\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Send as widget to dashboard' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"sendAsWidgetToDashboard()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i\n          c8yIcon=\"th\"\n          aria-hidden=\"true\"\n        ></i>\n        <span>{{ 'Send as widget to dashboard' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  } @else {\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        title=\"{{ 'Send as widget to report' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"sendAsWidgetToReport()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i\n          c8yIcon=\"c8y-reports\"\n          aria-hidden=\"true\"\n        ></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\n          c8yIcon=\"c8y-reports\"\n          aria-hidden=\"true\"\n        ></i>\n        <span>{{ 'Create a new report with widget' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  }\n}\n\n<c8y-resizable-grid\n  class=\"content-fullpage\"\n  [leftColumnWidth]=\"'calc(100% - 360px)'\"\n  [collapseThreshold]=\"360\"\n  [trackId]=\"'datapoint-explorer'\"\n>\n  <div\n    class=\"d-col gap-16 inner-scroll\"\n    left-pane\n  >\n    <c8y-charts\n      class=\"flex-grow data-point-explorer\"\n      style=\"min-height: 340px\"\n      #chart\n      [config]=\"config\"\n      [alerts]=\"alerts\"\n      [chartViewContext]=\"chartViewContext\"\n      (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n      (configChangeOnZoomOut)=\"onSliderZoom($event)\"\n      (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n      (datapointBackInSync)=\"handleDatapointBackInSync($event)\"\n      (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n      (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n      (updateActiveDatapoints)=\"updateActiveDatapoints($event)\"\n      (updateAggregatedSliderDatapoint)=\"updateAggregatedSliderDatapoint($event)\"\n    ></c8y-charts>\n    <form\n      class=\"flex-shrink p-16 p-r-16 p-relative\"\n      [class.bg-level-1]=\"showSettings\"\n      [class.p-b-0]=\"!showSettings\"\n      style=\"z-index: 1\"\n      [formGroup]=\"formGroup\"\n    >\n      <button\n        class=\"legend form-block center btn-clean m-b-0 m-t-0\"\n        aria-controls=\"chart-settings-panel\"\n        [attr.aria-expanded]=\"showSettings\"\n        (click)=\"showSettings = !showSettings; triggerResize()\"\n      >\n        <i\n          class=\"m-r-4\"\n          [c8yIcon]=\"'combo-chart'\"\n          aria-hidden=\"true\"\n        ></i>\n        <span>\n          {{ 'Display settings' | translate }}\n        </span>\n        <i\n          class=\"m-l-4\"\n          [c8yIcon]=\"showSettings ? 'chevron-up' : 'chevron-down'\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n      <div\n        class=\"collapse bg-level-1\"\n        id=\"chart-settings-panel\"\n        [collapse]=\"!showSettings\"\n        [isAnimated]=\"true\"\n      >\n        <div class=\"bg-level-1 responsive-grid-table-wrapper--600\">\n          <div\n            class=\"responsive-grid-table responsive-grid-table--padded responsive-grid-table__body\"\n          >\n            <div class=\"col-5 d-col a-s-start p-b-0\">\n              <fieldset class=\"c8y-fieldset form-group-sm m-t-md-0 p-b-8\">\n                <legend>{{ 'Alarms & events' | translate }}</legend>\n                <label\n                  class=\"c8y-checkbox\"\n                  [title]=\"'Show vertical line when alarm occurs' | translate\"\n                >\n                  <input\n                    name=\"displayMarkedLine\"\n                    type=\"checkbox\"\n                    formControlName=\"displayMarkedLine\"\n                  />\n                  <span></span>\n                  <span translate>Show vertical line on every occurrence</span>\n                </label>\n\n                <label\n                  class=\"c8y-checkbox\"\n                  [title]=\"'Show icon when alarm or event occurs' | translate\"\n                >\n                  <input\n                    name=\"displayMarkedPoint\"\n                    type=\"checkbox\"\n                    formControlName=\"displayMarkedPoint\"\n                  />\n                  <span></span>\n                  <span>\n                    {{\n                      'Show icon when triggered`When alarms and events occur the icon will be shown`'\n                        | translate\n                    }}\n                  </span>\n                  @if (alarmsOrEventsHaveNoMatchingDps) {\n                    <button\n                      class=\"btn-dot m-l-4\"\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                      [popover]=\"\n                        'Some alarms or events have no matching data points. No icons will be shown for them.'\n                          | translate\n                      \"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                      (click)=\"$event.stopPropagation()\"\n                    >\n                      <i\n                        class=\"text-warning\"\n                        c8yIcon=\"warning\"\n                      ></i>\n                    </button>\n                  }\n                </label>\n              </fieldset>\n\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                <label\n                  class=\"c8y-checkbox\"\n                  [title]=\"'Show smooth lines' | translate\"\n                >\n                  <input\n                    name=\"smoothLines\"\n                    type=\"checkbox\"\n                    formControlName=\"smoothLines\"\n                  />\n                  <span></span>\n                  <span translate>Show smooth lines</span>\n                </label>\n              </fieldset>\n            </div>\n            <div class=\"col-7 a-s-start p-b-0\">\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-help\"\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                    [popover]=\"\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                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                    (click)=\"$event.stopPropagation()\"\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-help\"\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                    [popover]=\"\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                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></button>\n                </label>\n                <label\n                  class=\"c8y-checkbox\"\n                  [title]=\"'Set Y-axis start to 0' | translate\"\n                >\n                  <input\n                    name=\"setYaxisStartToZero\"\n                    type=\"checkbox\"\n                    formControlName=\"setYaxisStartToZero\"\n                  />\n                  <span></span>\n                  <span translate>Set Y-axis start to 0</span>\n                  <button\n                    class=\"btn-help\"\n                    [attr.aria-label]=\"\n                      'Sets the Y-axis minimum to 0 for all data points with positive values. If any data point includes negative values, the axis may still extend below 0. Explicitly configured minimum and maximum values take precedence over this option.'\n                        | translate\n                    \"\n                    [popover]=\"\n                      'Sets the Y-axis minimum to 0 for all data points with positive values. If any data point includes negative values, the axis may still extend below 0. Explicitly configured minimum and maximum values take precedence over this option.'\n                        | translate\n                    \"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></button>\n                </label>\n              </fieldset>\n            </div>\n          </div>\n        </div>\n      </div>\n    </form>\n  </div>\n  <div\n    class=\"inner-scroll bg-level-1\"\n    right-pane\n  >\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</c8y-resizable-grid>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i3$2.DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle", "removeTitle"], outputs: ["isValid", "change"] }, { kind: "ngmodule", type: AlarmEventSelectorModule }, { kind: "component", type: i4$1.AlarmEventSelectionListComponent, selector: "c8y-alarm-event-selection-list", inputs: ["timelineType", "canRemove", "canEdit", "canDragAndDrop", "title", "addButtonLabel", "hideSource", "inline", "activeToggleAsSwitch", "omitProperties", "datapoints", "config"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.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: "directive", type: i6.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i7.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: TimeContextComponent, selector: "c8y-time-context", inputs: ["changedDateContext", "controlsAvailable", "timeContext", "timePickerConfig", "enableAutoAggregation", "context"], outputs: ["contextChange"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts", "chartViewContext"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "datapointBackInSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled", "finishLoading", "updateActiveDatapoints", "updateAggregatedSliderDatapoint", "duplicateAggregationsDetected"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: DatapointsExportSelectorComponent, selector: "c8y-datapoints-export-selector", inputs: ["displayMode", "containerClass", "exportConfig"], outputs: ["isOpen"] }, { kind: "component", type: WorkspaceConfigComponent, selector: "c8y-workspace-config", inputs: ["updatedConfig", "silent", "defaultConfigurationId"], outputs: ["onConfigurationChange"] }, { kind: "component", type: ResizableGridComponent, selector: "c8y-resizable-grid", inputs: ["leftColumnWidth", "trackId", "collapseThreshold", "collapsible"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointExplorerComponent, decorators: [{
             type: Component,
@@ -1314,7 +1354,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         ChartAlarmsService,
                         ChartHelpersService,
                         WidgetTimeContextDateRangeService
-                    ], template: "<c8y-title>{{ 'Data explorer' | translate }}</c8y-title>\n\n<c8y-time-context\n  #timeContext\n  (contextChange)=\"onTimeContextChange($event)\"\n  [changedDateContext]=\"timeProps\"\n  [timeContext]=\"(settings$ | async)?.timeContext\"\n  [timePickerConfig]=\"TIME_PICKER_CONFIG\"\n></c8y-time-context>\n\n<c8y-action-bar-item [placement]=\"'left'\">\n  <c8y-workspace-config\n    [updatedConfig]=\"config\"\n    [silent]=\"(settings$ | async)?.hideWorkspaceConfig\"\n    (onConfigurationChange)=\"onConfigurationChange($event)\"\n  ></c8y-workspace-config>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"-5000\"\n  itemClass=\"pull-right\"\n>\n  <button\n    class=\"btn btn-link\"\n    [attr.aria-label]=\"'Full screen' | translate\"\n    [tooltip]=\"\n      ((inFullScreen$ | async)\n        ? fullScreenToggleTooltipText.exit\n        : fullScreenToggleTooltipText.enter\n      ) | translate\n    \"\n    placement=\"left\"\n    container=\"body\"\n    type=\"button\"\n    [delay]=\"500\"\n    (click)=\"toggleFullscreen()\"\n    data-cy=\"datapoint-explorer--full-screen\"\n  >\n    <i\n      [c8yIcon]=\"(inFullScreen$ | async) ? 'compress' : 'expand'\"\n      aria-hidden=\"true\"\n    ></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visibile-lg-inline\">\n      {{\n        ((inFullScreen$ | async)\n          ? fullScreenToggleTooltipText.exit\n          : fullScreenToggleTooltipText.enter\n        ) | translate\n      }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n@if (!(settings$ | async)?.hideExportSelector) {\n  <c8y-action-bar-item [placement]=\"'right'\">\n    <c8y-datapoints-export-selector\n      [exportConfig]=\"exportConfig\"\n      [containerClass]=\"'d-contents'\"\n    ></c8y-datapoints-export-selector>\n  </c8y-action-bar-item>\n}\n\n@if (!(settings$ | async)?.hideWidgetActions) {\n  @if (contextAsset) {\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Send as widget to dashboard' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"sendAsWidgetToDashboard()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i\n          c8yIcon=\"th\"\n          aria-hidden=\"true\"\n        ></i>\n        <span>{{ 'Send as widget to dashboard' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  } @else {\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        title=\"{{ 'Send as widget to report' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"sendAsWidgetToReport()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i\n          c8yIcon=\"c8y-reports\"\n          aria-hidden=\"true\"\n        ></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\n          c8yIcon=\"c8y-reports\"\n          aria-hidden=\"true\"\n        ></i>\n        <span>{{ 'Create a new report with widget' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  }\n}\n\n<c8y-resizable-grid\n  class=\"content-fullpage\"\n  [leftColumnWidth]=\"'calc(100% - 360px)'\"\n  [collapseThreshold]=\"360\"\n  [trackId]=\"'datapoint-explorer'\"\n>\n  <div\n    class=\"d-col gap-16 inner-scroll\"\n    left-pane\n  >\n    <c8y-charts\n      class=\"flex-grow data-point-explorer\"\n      style=\"min-height: 340px\"\n      #chart\n      [config]=\"config\"\n      [alerts]=\"alerts\"\n      [chartViewContext]=\"chartViewContext\"\n      (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n      (configChangeOnZoomOut)=\"onSliderZoom($event)\"\n      (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n      (datapointBackInSync)=\"handleDatapointBackInSync($event)\"\n      (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n      (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n      (updateActiveDatapoints)=\"updateActiveDatapoints($event)\"\n      (updateAggregatedSliderDatapoint)=\"updateAggregatedSliderDatapoint($event)\"\n    ></c8y-charts>\n    <form\n      class=\"flex-shrink p-16 p-r-16 p-relative\"\n      [class.bg-level-1]=\"showSettings\"\n      [class.p-b-0]=\"!showSettings\"\n      style=\"z-index: 1\"\n      [formGroup]=\"formGroup\"\n    >\n      <button\n        class=\"legend form-block center btn-clean m-b-0 m-t-0\"\n        aria-controls=\"chart-settings-panel\"\n        [attr.aria-expanded]=\"showSettings\"\n        (click)=\"showSettings = !showSettings; triggerResize()\"\n      >\n        <i\n          class=\"m-r-4\"\n          [c8yIcon]=\"'combo-chart'\"\n          aria-hidden=\"true\"\n        ></i>\n        <span>\n          {{ 'Display settings' | translate }}\n        </span>\n        <i\n          class=\"m-l-4\"\n          [c8yIcon]=\"showSettings ? 'chevron-up' : 'chevron-down'\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n      <div\n        class=\"collapse bg-level-1\"\n        id=\"chart-settings-panel\"\n        [collapse]=\"!showSettings\"\n        [isAnimated]=\"true\"\n      >\n        <div class=\"bg-level-1 responsive-grid-table-wrapper--600\">\n          <div\n            class=\"responsive-grid-table responsive-grid-table--padded responsive-grid-table__body\"\n          >\n            <div class=\"col-5 d-col a-s-start p-b-0\">\n              <fieldset class=\"c8y-fieldset form-group-sm m-t-md-0 p-b-8\">\n                <legend>{{ 'Alarms & events' | translate }}</legend>\n                <label\n                  class=\"c8y-checkbox\"\n                  [title]=\"'Show vertical line when alarm occurs' | translate\"\n                >\n                  <input\n                    name=\"displayMarkedLine\"\n                    type=\"checkbox\"\n                    formControlName=\"displayMarkedLine\"\n                  />\n                  <span></span>\n                  <span translate>Show vertical line on every occurrence</span>\n                </label>\n\n                <label\n                  class=\"c8y-checkbox\"\n                  [title]=\"'Show icon when alarm or event occurs' | translate\"\n                >\n                  <input\n                    name=\"displayMarkedPoint\"\n                    type=\"checkbox\"\n                    formControlName=\"displayMarkedPoint\"\n                  />\n                  <span></span>\n                  <span>\n                    {{\n                      'Show icon when triggered`When alarms and events occur the icon will be shown`'\n                        | translate\n                    }}\n                  </span>\n                  @if (alarmsOrEventsHaveNoMatchingDps) {\n                    <button\n                      class=\"btn-dot m-l-4\"\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                      [popover]=\"\n                        'Some alarms or events have no matching data points. No icons will be shown for them.'\n                          | translate\n                      \"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                      (click)=\"$event.stopPropagation()\"\n                    >\n                      <i\n                        class=\"text-warning\"\n                        c8yIcon=\"warning\"\n                      ></i>\n                    </button>\n                  }\n                </label>\n              </fieldset>\n\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                <label\n                  class=\"c8y-checkbox\"\n                  [title]=\"'Show smooth lines' | translate\"\n                >\n                  <input\n                    name=\"smoothLines\"\n                    type=\"checkbox\"\n                    formControlName=\"smoothLines\"\n                  />\n                  <span></span>\n                  <span translate>Show smooth lines</span>\n                </label>\n              </fieldset>\n            </div>\n            <div class=\"col-7 a-s-start p-b-0\">\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-help\"\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                    [popover]=\"\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                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                    (click)=\"$event.stopPropagation()\"\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-help\"\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                    [popover]=\"\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                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></button>\n                </label>\n                <label\n                  class=\"c8y-checkbox\"\n                  [title]=\"'Set Y-axis start to 0' | translate\"\n                >\n                  <input\n                    name=\"setYaxisStartToZero\"\n                    type=\"checkbox\"\n                    formControlName=\"setYaxisStartToZero\"\n                  />\n                  <span></span>\n                  <span translate>Set Y-axis start to 0</span>\n                  <button\n                    class=\"btn-help\"\n                    [attr.aria-label]=\"\n                      'Sets the Y-axis minimum to 0 for all data points with positive values. If any data point includes negative values, the axis may still extend below 0. Explicitly configured minimum and maximum values take precedence over this option.'\n                        | translate\n                    \"\n                    [popover]=\"\n                      'Sets the Y-axis minimum to 0 for all data points with positive values. If any data point includes negative values, the axis may still extend below 0. Explicitly configured minimum and maximum values take precedence over this option.'\n                        | translate\n                    \"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></button>\n                </label>\n              </fieldset>\n            </div>\n          </div>\n        </div>\n      </div>\n    </form>\n  </div>\n  <div\n    class=\"inner-scroll bg-level-1\"\n    right-pane\n  >\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</c8y-resizable-grid>\n" }]
+                    ], template: "<c8y-title>{{ 'Data explorer' | translate }}</c8y-title>\n\n<c8y-time-context\n  #timeContext\n  (contextChange)=\"onTimeContextChange($event)\"\n  [changedDateContext]=\"timeProps\"\n  [timeContext]=\"(settings$ | async)?.timeContext\"\n  [enableAutoAggregation]=\"true\"\n  [timePickerConfig]=\"TIME_PICKER_CONFIG\"\n></c8y-time-context>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <c8y-workspace-config\n    [updatedConfig]=\"config\"\n    [silent]=\"(settings$ | async)?.hideWorkspaceConfig\"\n    (onConfigurationChange)=\"onConfigurationChange($event)\"\n  ></c8y-workspace-config>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"-5000\"\n  itemClass=\"pull-right\"\n>\n  <button\n    class=\"btn btn-link\"\n    [attr.aria-label]=\"'Full screen' | translate\"\n    [tooltip]=\"\n      ((inFullScreen$ | async)\n        ? fullScreenToggleTooltipText.exit\n        : fullScreenToggleTooltipText.enter\n      ) | translate\n    \"\n    placement=\"left\"\n    container=\"body\"\n    type=\"button\"\n    [delay]=\"500\"\n    (click)=\"toggleFullscreen()\"\n    data-cy=\"datapoint-explorer--full-screen\"\n  >\n    <i\n      [c8yIcon]=\"(inFullScreen$ | async) ? 'compress' : 'expand'\"\n      aria-hidden=\"true\"\n    ></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visibile-lg-inline\">\n      {{\n        ((inFullScreen$ | async)\n          ? fullScreenToggleTooltipText.exit\n          : fullScreenToggleTooltipText.enter\n        ) | translate\n      }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n@if (!(settings$ | async)?.hideExportSelector) {\n  <c8y-action-bar-item [placement]=\"'right'\">\n    <c8y-datapoints-export-selector\n      [exportConfig]=\"exportConfig\"\n      [containerClass]=\"'d-contents'\"\n    ></c8y-datapoints-export-selector>\n  </c8y-action-bar-item>\n}\n\n@if (!(settings$ | async)?.hideWidgetActions) {\n  @if (contextAsset) {\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Send as widget to dashboard' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"sendAsWidgetToDashboard()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i\n          c8yIcon=\"th\"\n          aria-hidden=\"true\"\n        ></i>\n        <span>{{ 'Send as widget to dashboard' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  } @else {\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        title=\"{{ 'Send as widget to report' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"sendAsWidgetToReport()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i\n          c8yIcon=\"c8y-reports\"\n          aria-hidden=\"true\"\n        ></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\n          c8yIcon=\"c8y-reports\"\n          aria-hidden=\"true\"\n        ></i>\n        <span>{{ 'Create a new report with widget' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  }\n}\n\n<c8y-resizable-grid\n  class=\"content-fullpage\"\n  [leftColumnWidth]=\"'calc(100% - 360px)'\"\n  [collapseThreshold]=\"360\"\n  [trackId]=\"'datapoint-explorer'\"\n>\n  <div\n    class=\"d-col gap-16 inner-scroll\"\n    left-pane\n  >\n    <c8y-charts\n      class=\"flex-grow data-point-explorer\"\n      style=\"min-height: 340px\"\n      #chart\n      [config]=\"config\"\n      [alerts]=\"alerts\"\n      [chartViewContext]=\"chartViewContext\"\n      (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n      (configChangeOnZoomOut)=\"onSliderZoom($event)\"\n      (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n      (datapointBackInSync)=\"handleDatapointBackInSync($event)\"\n      (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n      (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n      (updateActiveDatapoints)=\"updateActiveDatapoints($event)\"\n      (updateAggregatedSliderDatapoint)=\"updateAggregatedSliderDatapoint($event)\"\n    ></c8y-charts>\n    <form\n      class=\"flex-shrink p-16 p-r-16 p-relative\"\n      [class.bg-level-1]=\"showSettings\"\n      [class.p-b-0]=\"!showSettings\"\n      style=\"z-index: 1\"\n      [formGroup]=\"formGroup\"\n    >\n      <button\n        class=\"legend form-block center btn-clean m-b-0 m-t-0\"\n        aria-controls=\"chart-settings-panel\"\n        [attr.aria-expanded]=\"showSettings\"\n        (click)=\"showSettings = !showSettings; triggerResize()\"\n      >\n        <i\n          class=\"m-r-4\"\n          [c8yIcon]=\"'combo-chart'\"\n          aria-hidden=\"true\"\n        ></i>\n        <span>\n          {{ 'Display settings' | translate }}\n        </span>\n        <i\n          class=\"m-l-4\"\n          [c8yIcon]=\"showSettings ? 'chevron-up' : 'chevron-down'\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n      <div\n        class=\"collapse bg-level-1\"\n        id=\"chart-settings-panel\"\n        [collapse]=\"!showSettings\"\n        [isAnimated]=\"true\"\n      >\n        <div class=\"bg-level-1 responsive-grid-table-wrapper--600\">\n          <div\n            class=\"responsive-grid-table responsive-grid-table--padded responsive-grid-table__body\"\n          >\n            <div class=\"col-5 d-col a-s-start p-b-0\">\n              <fieldset class=\"c8y-fieldset form-group-sm m-t-md-0 p-b-8\">\n                <legend>{{ 'Alarms & events' | translate }}</legend>\n                <label\n                  class=\"c8y-checkbox\"\n                  [title]=\"'Show vertical line when alarm occurs' | translate\"\n                >\n                  <input\n                    name=\"displayMarkedLine\"\n                    type=\"checkbox\"\n                    formControlName=\"displayMarkedLine\"\n                  />\n                  <span></span>\n                  <span translate>Show vertical line on every occurrence</span>\n                </label>\n\n                <label\n                  class=\"c8y-checkbox\"\n                  [title]=\"'Show icon when alarm or event occurs' | translate\"\n                >\n                  <input\n                    name=\"displayMarkedPoint\"\n                    type=\"checkbox\"\n                    formControlName=\"displayMarkedPoint\"\n                  />\n                  <span></span>\n                  <span>\n                    {{\n                      'Show icon when triggered`When alarms and events occur the icon will be shown`'\n                        | translate\n                    }}\n                  </span>\n                  @if (alarmsOrEventsHaveNoMatchingDps) {\n                    <button\n                      class=\"btn-dot m-l-4\"\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                      [popover]=\"\n                        'Some alarms or events have no matching data points. No icons will be shown for them.'\n                          | translate\n                      \"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                      (click)=\"$event.stopPropagation()\"\n                    >\n                      <i\n                        class=\"text-warning\"\n                        c8yIcon=\"warning\"\n                      ></i>\n                    </button>\n                  }\n                </label>\n              </fieldset>\n\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                <label\n                  class=\"c8y-checkbox\"\n                  [title]=\"'Show smooth lines' | translate\"\n                >\n                  <input\n                    name=\"smoothLines\"\n                    type=\"checkbox\"\n                    formControlName=\"smoothLines\"\n                  />\n                  <span></span>\n                  <span translate>Show smooth lines</span>\n                </label>\n              </fieldset>\n            </div>\n            <div class=\"col-7 a-s-start p-b-0\">\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-help\"\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                    [popover]=\"\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                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                    (click)=\"$event.stopPropagation()\"\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-help\"\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                    [popover]=\"\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                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></button>\n                </label>\n                <label\n                  class=\"c8y-checkbox\"\n                  [title]=\"'Set Y-axis start to 0' | translate\"\n                >\n                  <input\n                    name=\"setYaxisStartToZero\"\n                    type=\"checkbox\"\n                    formControlName=\"setYaxisStartToZero\"\n                  />\n                  <span></span>\n                  <span translate>Set Y-axis start to 0</span>\n                  <button\n                    class=\"btn-help\"\n                    [attr.aria-label]=\"\n                      'Sets the Y-axis minimum to 0 for all data points with positive values. If any data point includes negative values, the axis may still extend below 0. Explicitly configured minimum and maximum values take precedence over this option.'\n                        | translate\n                    \"\n                    [popover]=\"\n                      'Sets the Y-axis minimum to 0 for all data points with positive values. If any data point includes negative values, the axis may still extend below 0. Explicitly configured minimum and maximum values take precedence over this option.'\n                        | translate\n                    \"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></button>\n                </label>\n              </fieldset>\n            </div>\n          </div>\n        </div>\n      </div>\n    </form>\n  </div>\n  <div\n    class=\"inner-scroll bg-level-1\"\n    right-pane\n  >\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</c8y-resizable-grid>\n" }]
         }], ctorParameters: () => [], propDecorators: { chart: [{
                 type: ViewChild,
                 args: ['chart']