npm - @c8y/ngx-components - Versions diffs - 1021.76.3 → 1021.77.2 - Mend

@c8y/ngx-components 1021.76.3 → 1021.77.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (88) hide show

package/fesm2022/c8y-ngx-components-operations-grid-columns.mjs ADDED Viewed

@@ -0,0 +1,214 @@
+import * as i0 from '@angular/core';
+import { Component, inject } from '@angular/core';
+import * as i1 from '@c8y/ngx-components';
+import { CommonModule, BaseColumn, gettext, DeviceStatusModule, C8yTranslatePipe } from '@c8y/ngx-components';
+import * as i3 from 'ngx-bootstrap/tooltip';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import * as i2 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import { InventoryService } from '@c8y/client';
+import * as i2$1 from '@angular/common';
+import { OPERATION_STATUS_OPTIONS_MAP } from '@c8y/ngx-components/operations/shared';
+class CreationTimeCellRendererComponent {
+    constructor(context) {
+        this.context = context;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CreationTimeCellRendererComponent, deps: [{ token: i1.CellRendererContext }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CreationTimeCellRendererComponent, isStandalone: true, selector: "c8y-creation-time-cell-renderer", ngImport: i0, template: `<small class="icon-flex text-muted">
+    <i class="m-r-4" c8yIcon="calendar"></i>
+    {{ context.item.creationTime | c8yDate }}
+  </small>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i1.DatePipe, name: "c8yDate" }, { kind: "ngmodule", type: TooltipModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CreationTimeCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `<small class="icon-flex text-muted">
+    <i class="m-r-4" c8yIcon="calendar"></i>
+    {{ context.item.creationTime | c8yDate }}
+  </small>`,
+                    selector: 'c8y-creation-time-cell-renderer',
+                    standalone: true,
+                    imports: [CommonModule, TooltipModule]
+                }]
+        }], ctorParameters: () => [{ type: i1.CellRendererContext }] });
+class CreationTimeGridColumn extends BaseColumn {
+    constructor(initialColumnConfig) {
+        super(initialColumnConfig);
+        this.name = 'creationTime';
+        this.path = 'creationTime';
+        this.header = gettext('Creation time');
+        this.cellRendererComponent = CreationTimeCellRendererComponent;
+        this.filterable = false;
+        this.sortable = false;
+    }
+}
+class DeviceCellRendererComponent {
+    constructor(context) {
+        this.context = context;
+        this.inventoryService = inject(InventoryService);
+    }
+    async ngOnInit() {
+        this.device = (await this.inventoryService.detail(this.context.item.deviceId))?.data;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DeviceCellRendererComponent, deps: [{ token: i1.CellRendererContext }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DeviceCellRendererComponent, isStandalone: true, selector: "c8y-operation-device-cell-renderer", ngImport: i0, template: `
+    <span class="m-r-4">
+      <device-status [mo]="device || {}"></device-status>
+    </span>
+    <a
+      class="interact"
+      [title]="context.item.deviceName"
+      [routerLink]="['/device', context.item.deviceId, 'device-info']"
+    >
+      {{ context.item.deviceName }}
+    </a>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: DeviceStatusModule }, { kind: "component", type: i1.DeviceStatusComponent, selector: "device-status, c8y-device-status", inputs: ["mo", "size"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DeviceCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <span class="m-r-4">
+      <device-status [mo]="device || {}"></device-status>
+    </span>
+    <a
+      class="interact"
+      [title]="context.item.deviceName"
+      [routerLink]="['/device', context.item.deviceId, 'device-info']"
+    >
+      {{ context.item.deviceName }}
+    </a>
+  `,
+                    selector: 'c8y-operation-device-cell-renderer',
+                    standalone: true,
+                    imports: [CommonModule, RouterModule, DeviceStatusModule]
+                }]
+        }], ctorParameters: () => [{ type: i1.CellRendererContext }] });
+class DeviceGridColumn extends BaseColumn {
+    constructor(initialColumnConfig) {
+        super(initialColumnConfig);
+        this.name = 'deviceName';
+        this.path = 'deviceName';
+        this.header = gettext('Device');
+        this.cellRendererComponent = DeviceCellRendererComponent;
+        this.filterable = false;
+        this.sortable = false;
+    }
+}
+class FailureReasonCellRendererComponent {
+    constructor(context) {
+        this.context = context;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FailureReasonCellRendererComponent, deps: [{ token: i1.CellRendererContext }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FailureReasonCellRendererComponent, isStandalone: true, selector: "c8y-failure-reason-cell-renderer", ngImport: i0, template: ` <div class="d-flex">
+    <span class="text-truncate" #failureReason>
+      {{ context.value | translate }}
+    </span>
+    <button
+      class="btn-help btn-help--sm"
+      [attr.aria-label]="'Help' | translate"
+      [tooltip]="context.value | translate"
+      placement="left"
+      container="body"
+      type="button"
+      *ngIf="failureReason.offsetWidth < failureReason.scrollWidth"
+    >
+      <i [c8yIcon]="'info-circle'"></i>
+    </button>
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FailureReasonCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ` <div class="d-flex">
+    <span class="text-truncate" #failureReason>
+      {{ context.value | translate }}
+    </span>
+    <button
+      class="btn-help btn-help--sm"
+      [attr.aria-label]="'Help' | translate"
+      [tooltip]="context.value | translate"
+      placement="left"
+      container="body"
+      type="button"
+      *ngIf="failureReason.offsetWidth < failureReason.scrollWidth"
+    >
+      <i [c8yIcon]="'info-circle'"></i>
+    </button>
+  </div>`,
+                    selector: 'c8y-failure-reason-cell-renderer',
+                    standalone: true,
+                    imports: [CommonModule, TooltipModule]
+                }]
+        }], ctorParameters: () => [{ type: i1.CellRendererContext }] });
+class FailureReasonGridColumn extends BaseColumn {
+    constructor(initialColumnConfig) {
+        super(initialColumnConfig);
+        this.name = 'failureReason';
+        this.path = 'failureReason';
+        this.header = gettext('Failure reason');
+        this.cellRendererComponent = FailureReasonCellRendererComponent;
+        this.filterable = false;
+        this.sortable = false;
+    }
+}
+class StatusCellRendererComponent {
+    constructor(context) {
+        this.context = context;
+        this.OPERATION_STATUS_OPTIONS_MAP = OPERATION_STATUS_OPTIONS_MAP;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StatusCellRendererComponent, deps: [{ token: i1.CellRendererContext }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StatusCellRendererComponent, isStandalone: true, selector: "c8y-operation-status-cell-renderer", ngImport: i0, template: `
+    <i
+      [c8yIcon]="OPERATION_STATUS_OPTIONS_MAP[context.item.status].icon"
+      style="font-size: 20px"
+      [tooltip]="context.item.status.toString() | translate"
+      container="body"
+      [ngClass]="OPERATION_STATUS_OPTIONS_MAP[context.item.status].styleClass"
+    ></i>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StatusCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <i
+      [c8yIcon]="OPERATION_STATUS_OPTIONS_MAP[context.item.status].icon"
+      style="font-size: 20px"
+      [tooltip]="context.item.status.toString() | translate"
+      container="body"
+      [ngClass]="OPERATION_STATUS_OPTIONS_MAP[context.item.status].styleClass"
+    ></i>
+  `,
+                    selector: 'c8y-operation-status-cell-renderer',
+                    standalone: true,
+                    imports: [CommonModule, RouterModule, C8yTranslatePipe, TooltipModule]
+                }]
+        }], ctorParameters: () => [{ type: i1.CellRendererContext }] });
+class OperationStatusGridColumn extends BaseColumn {
+    constructor(initialColumnConfig) {
+        super(initialColumnConfig);
+        this.name = 'status';
+        this.path = 'status';
+        this.header = gettext('Status');
+        this.cellRendererComponent = StatusCellRendererComponent;
+        this.filterable = false;
+        this.sortable = false;
+        this.gridTrackSize = '76px';
+    }
+}
+/**
+ * Generated bundle index. Do not edit.
+ */
+export { CreationTimeCellRendererComponent, CreationTimeGridColumn, DeviceCellRendererComponent, DeviceGridColumn, FailureReasonCellRendererComponent, FailureReasonGridColumn, OperationStatusGridColumn, StatusCellRendererComponent };
+//# sourceMappingURL=c8y-ngx-components-operations-grid-columns.mjs.map

package/fesm2022/c8y-ngx-components-operations-grid-columns.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"c8y-ngx-components-operations-grid-columns.mjs","sources":["../../operations/grid-columns/creation-time.cell-renderer.component.ts","../../operations/grid-columns/creation-time.grid-column.ts","../../operations/grid-columns/device.cell-renderer.component.ts","../../operations/grid-columns/device.grid-column.ts","../../operations/grid-columns/failure-reason.cell-renderer.component.ts","../../operations/grid-columns/failure-reason.grid-column.ts","../../operations/grid-columns/status.cell-renderer.component.ts","../../operations/grid-columns/status.grid-column.ts","../../operations/grid-columns/c8y-ngx-components-operations-grid-columns.ts"],"sourcesContent":["import { Component } from '@angular/core';\nimport { CellRendererContext, CommonModule } from '@c8y/ngx-components';\nimport { TooltipModule } from 'ngx-bootstrap/tooltip';\n\n@Component({\n template: `<small class=\"icon-flex text-muted\">\n <i class=\"m-r-4\" c8yIcon=\"calendar\"></i>\n {{ context.item.creationTime | c8yDate }}\n </small>`,\n selector: 'c8y-creation-time-cell-renderer',\n standalone: true,\n imports: [CommonModule, TooltipModule]\n})\nexport class CreationTimeCellRendererComponent {\n constructor(public context: CellRendererContext) {}\n}\n","import { BaseColumn, ColumnConfig, gettext } from '@c8y/ngx-components';\nimport { CreationTimeCellRendererComponent } from './creation-time.cell-renderer.component';\n\nexport class CreationTimeGridColumn extends BaseColumn {\n constructor(initialColumnConfig?: ColumnConfig) {\n super(initialColumnConfig);\n this.name = 'creationTime';\n this.path = 'creationTime';\n this.header = gettext('Creation time');\n this.cellRendererComponent = CreationTimeCellRendererComponent;\n\n this.filterable = false;\n this.sortable = false;\n }\n}\n","import { Component, inject, OnInit } from '@angular/core';\nimport { RouterModule } from '@angular/router';\nimport { InventoryService } from '@c8y/client';\nimport { CellRendererContext, CommonModule, DeviceStatusModule } from '@c8y/ngx-components';\nimport { IManagedObject } from 'packages/client/lib';\n\n@Component({\n template: `\n <span class=\"m-r-4\">\n <device-status [mo]=\"device || {}\"></device-status>\n </span>\n <a\n class=\"interact\"\n [title]=\"context.item.deviceName\"\n [routerLink]=\"['/device', context.item.deviceId, 'device-info']\"\n >\n {{ context.item.deviceName }}\n </a>\n `,\n selector: 'c8y-operation-device-cell-renderer',\n standalone: true,\n imports: [CommonModule, RouterModule, DeviceStatusModule]\n})\nexport class DeviceCellRendererComponent implements OnInit {\n device: IManagedObject;\n\n private inventoryService = inject(InventoryService);\n\n constructor(public context: CellRendererContext) {}\n\n async ngOnInit() {\n this.device = (await this.inventoryService.detail(this.context.item.deviceId))?.data;\n }\n}\n","import { BaseColumn, ColumnConfig, gettext } from '@c8y/ngx-components';\nimport { DeviceCellRendererComponent } from './device.cell-renderer.component';\n\nexport class DeviceGridColumn extends BaseColumn {\n constructor(initialColumnConfig?: ColumnConfig) {\n super(initialColumnConfig);\n this.name = 'deviceName';\n this.path = 'deviceName';\n this.header = gettext('Device');\n this.cellRendererComponent = DeviceCellRendererComponent;\n\n this.filterable = false;\n this.sortable = false;\n }\n}\n","import { Component } from '@angular/core';\nimport { CellRendererContext, CommonModule } from '@c8y/ngx-components';\nimport { TooltipModule } from 'ngx-bootstrap/tooltip';\n\n@Component({\n template: ` <div class=\"d-flex\">\n <span class=\"text-truncate\" #failureReason>\n {{ context.value | translate }}\n </span>\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n [tooltip]=\"context.value | translate\"\n placement=\"left\"\n container=\"body\"\n type=\"button\"\n *ngIf=\"failureReason.offsetWidth < failureReason.scrollWidth\"\n >\n <i [c8yIcon]=\"'info-circle'\"></i>\n </button>\n </div>`,\n selector: 'c8y-failure-reason-cell-renderer',\n standalone: true,\n imports: [CommonModule, TooltipModule]\n})\nexport class FailureReasonCellRendererComponent {\n constructor(public context: CellRendererContext) {}\n}\n","import { BaseColumn, ColumnConfig, gettext } from '@c8y/ngx-components';\nimport { FailureReasonCellRendererComponent } from './failure-reason.cell-renderer.component';\n\nexport class FailureReasonGridColumn extends BaseColumn {\n constructor(initialColumnConfig?: ColumnConfig) {\n super(initialColumnConfig);\n this.name = 'failureReason';\n this.path = 'failureReason';\n this.header = gettext('Failure reason');\n this.cellRendererComponent = FailureReasonCellRendererComponent;\n\n this.filterable = false;\n this.sortable = false;\n }\n}\n","import { Component } from '@angular/core';\nimport { RouterModule } from '@angular/router';\nimport { C8yTranslatePipe, CellRendererContext, CommonModule } from '@c8y/ngx-components';\nimport {\n OPERATION_STATUS_OPTIONS_MAP,\n OperationStatusOptionsMapShared\n} from '@c8y/ngx-components/operations/shared';\nimport { TooltipModule } from 'ngx-bootstrap/tooltip';\n\n@Component({\n template: `\n <i\n [c8yIcon]=\"OPERATION_STATUS_OPTIONS_MAP[context.item.status].icon\"\n style=\"font-size: 20px\"\n [tooltip]=\"context.item.status.toString() | translate\"\n container=\"body\"\n [ngClass]=\"OPERATION_STATUS_OPTIONS_MAP[context.item.status].styleClass\"\n ></i>\n `,\n selector: 'c8y-operation-status-cell-renderer',\n standalone: true,\n imports: [CommonModule, RouterModule, C8yTranslatePipe, TooltipModule]\n})\nexport class StatusCellRendererComponent {\n OPERATION_STATUS_OPTIONS_MAP: OperationStatusOptionsMapShared = OPERATION_STATUS_OPTIONS_MAP;\n constructor(public context: CellRendererContext) {}\n}\n","import { BaseColumn, ColumnConfig, gettext } from '@c8y/ngx-components';\nimport { StatusCellRendererComponent } from './status.cell-renderer.component';\n\nexport class OperationStatusGridColumn extends BaseColumn {\n constructor(initialColumnConfig?: ColumnConfig) {\n super(initialColumnConfig);\n this.name = 'status';\n this.path = 'status';\n this.header = gettext('Status');\n this.cellRendererComponent = StatusCellRendererComponent;\n\n this.filterable = false;\n this.sortable = false;\n\n this.gridTrackSize = '76px';\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i2"],"mappings":"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"}

package/fesm2022/c8y-ngx-components-widgets-implementations-datapoints-graph.mjs CHANGED Viewed

@@ -192,6 +192,7 @@ class DatapointsGraphWidgetConfigComponent {
             displayMarkedLine: [true, []],
             displayMarkedPoint: [true, []],
             mergeMatchingDatapoints: [true, []],
+            forceMergeDatapoints: [false, []],
             showLabelAndUnit: [true, []],
             displayDateSelection: [false, []],
             displayAggregationSelection: [false, []],
@@ -221,7 +222,7 @@ class DatapointsGraphWidgetConfigComponent {
             (this.config?.datapoints?.filter(dp => dp.__active)?.length || 0) > 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatapointsGraphWidgetConfigComponent, deps: [{ token: i1.WidgetConfigComponent, optional: true }, { token: i1.ContextDashboardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DatapointsGraphWidgetConfigComponent, isStandalone: true, selector: "c8y-datapoints-graph-widget-config", inputs: { config: "config" }, host: { classAttribute: "d-contents" }, providers: [ChartEventsService, ChartAlarmsService], ngImport: i0, template: "<div class=\"no-card-context d-flex-md fit-h--md\">\n  <div class=\"col-md-5 bg-level-1 conf-col inner-scroll p-l-0\">\n    <div class=\"p-l-24\">\n      <form [formGroup]=\"formGroup\">\n        <c8y-datapoint-selection-list\n          class=\"bg-level-1 separator-bottom d-block\"\n          name=\"datapoints\"\n          [minActiveCount]=\"1\"\n          [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n          [config]=\"datapointSelectionConfig\"\n          formControlName=\"datapoints\"\n        ></c8y-datapoint-selection-list>\n\n        <c8y-alarm-event-selection-list\n          class=\"bg-level-1 separator-bottom d-block\"\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      </form>\n    </div>\n  </div>\n\n  <div class=\"col-md-7 sticky-top p-t-8 inner-scroll widget-preview\">\n    <div class=\"p-r-24 d-col fit-h\">\n      <div class=\"form-group p-t-8 form-group-sm d-flex a-i-center m-b-8\">\n        <div class=\"d-flex a-i-center m-r-4\">\n          <label\n            class=\"m-b-0\"\n            translate\n          >\n            Date selection\n          </label>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"dateSelectionHelpTemplate\"\n            placement=\"bottom\"\n            triggers=\"focus\"\n            container=\"body\"\n            [adaptivePosition]=\"false\"\n          ></button>\n        </div>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control input-sm\"\n            [ngModel]=\"dateSelection\"\n            (ngModelChange)=\"dateSelectionChange($event)\"\n            [ngModelOptions]=\"{ standalone: true }\"\n          >\n            <option\n              title=\"{{ 'Dashboard time range' | translate }}\"\n              [value]=\"DATE_SELECTION.DASHBOARD_CONTEXT\"\n            >\n              {{ 'Dashboard time range' | translate }}\n            </option>\n            <option\n              title=\"{{ 'Widget configuration' | translate }}\"\n              [value]=\"DATE_SELECTION.CONFIG\"\n            >\n              {{ 'Widget configuration' | translate }}\n            </option>\n          </select>\n          <span></span>\n        </div>\n      </div>\n      <label class=\"text-12\">{{ 'Options' | translate }}</label>\n      <c8y-time-context\n        *ngIf=\"\n          dateSelection === DATE_SELECTION.CONFIG &&\n          formGroup.get('displayDateSelection').value === true\n        \"\n        [changedDateContext]=\"timeProps\"\n        [controlsAvailable]=\"{\n          realtime: true,\n          timeRange: config?.displayDateSelection,\n          interval: config?.displayDateSelection,\n          aggregation: config?.displayAggregationSelection\n        }\"\n        (contextChange)=\"timePropsChanged($event)\"\n      ></c8y-time-context>\n      <c8y-charts\n        class=\"d-block p-relative\"\n        *ngIf=\"activeDatapointsExists\"\n        [config]=\"config\"\n        [alerts]=\"alerts\"\n        (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n        (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n      ></c8y-charts>\n\n      <c8y-ui-empty-state\n        class=\"d-block m-t-24\"\n        [icon]=\"'search'\"\n        [title]=\"'No data points selected' | translate\"\n        [subtitle]=\"'Select data point to render chart' | translate\"\n        *ngIf=\"!activeDatapointsExists\"\n      ></c8y-ui-empty-state>\n\n      <form\n        class=\"d-block p-t-8\"\n        [formGroup]=\"formGroup\"\n      >\n        <label>{{ 'Display options' | translate }}</label>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Axis' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\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            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Alarms & events' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show vertical line on every occurrence' | 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            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show icon when triggered' | translate\"\n            >\n              <input\n                name=\"displayMarkedPoint\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedPoint\"\n              />\n              <span></span>\n              <span translate>Show icon when triggered</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"alarmsOrEventsHaveNoMatchingDps\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-warning\"\n                  c8yIcon=\"exclamation-triangle\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Chart' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Enable date selection in the widget view.' | translate\"\n            >\n              <input\n                name=\"displayDateSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayDateSelection\"\n              />\n              <span></span>\n              <span translate>Date selection in the widget view.</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"dateSelection === DATE_SELECTION.DASHBOARD_CONTEXT\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Aggregation selection' | translate\"\n            >\n              <input\n                name=\"displayAggregationSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayAggregationSelection\"\n              />\n              <span></span>\n              <span translate>Aggregation selection</span>\n            </label>\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          </c8y-form-group>\n        </fieldset>\n      </form>\n    </div>\n  </div>\n</div>\n<ng-template #dateSelectionHelpTemplate>\n  <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.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: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled"] }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i7.DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle"], outputs: ["isValid", "change"] }, { kind: "ngmodule", type: AlarmEventSelectorModule }, { kind: "component", type: i8.AlarmEventSelectionListComponent, selector: "c8y-alarm-event-selection-list", inputs: ["timelineType", "canRemove", "canEdit", "canDragAndDrop", "title", "addButtonLabel", "hideSource", "inline", "activeToggleAsSwitch", "omitProperties", "datapoints", "config"] }, { kind: "component", type: TimeContextComponent, selector: "c8y-time-context", inputs: ["changedDateContext", "controlsAvailable", "context"], outputs: ["contextChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DatapointsGraphWidgetConfigComponent, isStandalone: true, selector: "c8y-datapoints-graph-widget-config", inputs: { config: "config" }, host: { classAttribute: "d-contents" }, providers: [ChartEventsService, ChartAlarmsService], ngImport: i0, template: "<div class=\"no-card-context d-flex-md fit-h--md\">\n  <div class=\"col-md-5 bg-level-1 conf-col inner-scroll p-l-0\">\n    <div class=\"p-l-24\">\n      <form [formGroup]=\"formGroup\">\n        <c8y-datapoint-selection-list\n          class=\"bg-level-1 separator-bottom d-block\"\n          name=\"datapoints\"\n          [minActiveCount]=\"1\"\n          [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n          [config]=\"datapointSelectionConfig\"\n          formControlName=\"datapoints\"\n        ></c8y-datapoint-selection-list>\n\n        <c8y-alarm-event-selection-list\n          class=\"bg-level-1 separator-bottom d-block\"\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      </form>\n    </div>\n  </div>\n\n  <div class=\"col-md-7 sticky-top p-t-8 inner-scroll widget-preview\">\n    <div class=\"p-r-24 d-col fit-h\">\n      <div class=\"form-group p-t-8 form-group-sm d-flex a-i-center m-b-8\">\n        <div class=\"d-flex a-i-center m-r-4\">\n          <label\n            class=\"m-b-0\"\n            translate\n          >\n            Date selection\n          </label>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"dateSelectionHelpTemplate\"\n            placement=\"bottom\"\n            triggers=\"focus\"\n            container=\"body\"\n            [adaptivePosition]=\"false\"\n          ></button>\n        </div>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control input-sm\"\n            [ngModel]=\"dateSelection\"\n            (ngModelChange)=\"dateSelectionChange($event)\"\n            [ngModelOptions]=\"{ standalone: true }\"\n          >\n            <option\n              title=\"{{ 'Dashboard time range' | translate }}\"\n              [value]=\"DATE_SELECTION.DASHBOARD_CONTEXT\"\n            >\n              {{ 'Dashboard time range' | translate }}\n            </option>\n            <option\n              title=\"{{ 'Widget configuration' | translate }}\"\n              [value]=\"DATE_SELECTION.CONFIG\"\n            >\n              {{ 'Widget configuration' | translate }}\n            </option>\n          </select>\n          <span></span>\n        </div>\n      </div>\n      <label class=\"text-12\">{{ 'Options' | translate }}</label>\n      <c8y-time-context\n        *ngIf=\"\n          dateSelection === DATE_SELECTION.CONFIG &&\n          formGroup.get('displayDateSelection').value === true\n        \"\n        [changedDateContext]=\"timeProps\"\n        [controlsAvailable]=\"{\n          realtime: true,\n          timeRange: config?.displayDateSelection,\n          interval: config?.displayDateSelection,\n          aggregation: config?.displayAggregationSelection\n        }\"\n        (contextChange)=\"timePropsChanged($event)\"\n      ></c8y-time-context>\n      <c8y-charts\n        class=\"d-block p-relative\"\n        *ngIf=\"activeDatapointsExists\"\n        [config]=\"config\"\n        [alerts]=\"alerts\"\n        (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n        (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n      ></c8y-charts>\n\n      <c8y-ui-empty-state\n        class=\"d-block m-t-24\"\n        [icon]=\"'search'\"\n        [title]=\"'No data points selected' | translate\"\n        [subtitle]=\"'Select data point to render chart' | translate\"\n        *ngIf=\"!activeDatapointsExists\"\n      ></c8y-ui-empty-state>\n\n      <form\n        class=\"d-block p-t-8\"\n        [formGroup]=\"formGroup\"\n      >\n        <label>{{ 'Display options' | translate }}</label>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Axis' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Y-axis helper lines' | translate\"\n            >\n              <input\n                name=\"yAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"yAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>Y-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'X-axis helper lines' | translate\"\n            >\n              <input\n                name=\"xAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"xAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>X-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Merge matching data points into single axis' | translate\"\n            >\n              <input\n                name=\"mergeMatchingDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"mergeMatchingDatapoints\"\n              />\n              <span></span>\n              <span translate>Merge matching data points into single axis</span>\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Force merge all data points into single axis' | translate\"\n            >\n              <input\n                name=\"forceMergeDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"forceMergeDatapoints\"\n              />\n              <span></span>\n              <span translate>Force merge all datapoints into a single axis</span>\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Alarms & events' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show vertical line on every occurrence' | 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            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show icon when triggered' | translate\"\n            >\n              <input\n                name=\"displayMarkedPoint\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedPoint\"\n              />\n              <span></span>\n              <span translate>Show icon when triggered</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"alarmsOrEventsHaveNoMatchingDps\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-warning\"\n                  c8yIcon=\"exclamation-triangle\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Chart' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Enable date selection in the widget view.' | translate\"\n            >\n              <input\n                name=\"displayDateSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayDateSelection\"\n              />\n              <span></span>\n              <span translate>Date selection in the widget view.</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"dateSelection === DATE_SELECTION.DASHBOARD_CONTEXT\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Aggregation selection' | translate\"\n            >\n              <input\n                name=\"displayAggregationSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayAggregationSelection\"\n              />\n              <span></span>\n              <span translate>Aggregation selection</span>\n            </label>\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          </c8y-form-group>\n        </fieldset>\n      </form>\n    </div>\n  </div>\n</div>\n<ng-template #dateSelectionHelpTemplate>\n  <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.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: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled"] }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i7.DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle"], outputs: ["isValid", "change"] }, { kind: "ngmodule", type: AlarmEventSelectorModule }, { kind: "component", type: i8.AlarmEventSelectionListComponent, selector: "c8y-alarm-event-selection-list", inputs: ["timelineType", "canRemove", "canEdit", "canDragAndDrop", "title", "addButtonLabel", "hideSource", "inline", "activeToggleAsSwitch", "omitProperties", "datapoints", "config"] }, { kind: "component", type: TimeContextComponent, selector: "c8y-time-context", inputs: ["changedDateContext", "controlsAvailable", "context"], outputs: ["contextChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatapointsGraphWidgetConfigComponent, decorators: [{
             type: Component,
@@ -235,7 +236,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         DatapointSelectorModule,
                         AlarmEventSelectorModule,
                         TimeContextComponent
-                    ], providers: [ChartEventsService, ChartAlarmsService], template: "<div class=\"no-card-context d-flex-md fit-h--md\">\n  <div class=\"col-md-5 bg-level-1 conf-col inner-scroll p-l-0\">\n    <div class=\"p-l-24\">\n      <form [formGroup]=\"formGroup\">\n        <c8y-datapoint-selection-list\n          class=\"bg-level-1 separator-bottom d-block\"\n          name=\"datapoints\"\n          [minActiveCount]=\"1\"\n          [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n          [config]=\"datapointSelectionConfig\"\n          formControlName=\"datapoints\"\n        ></c8y-datapoint-selection-list>\n\n        <c8y-alarm-event-selection-list\n          class=\"bg-level-1 separator-bottom d-block\"\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      </form>\n    </div>\n  </div>\n\n  <div class=\"col-md-7 sticky-top p-t-8 inner-scroll widget-preview\">\n    <div class=\"p-r-24 d-col fit-h\">\n      <div class=\"form-group p-t-8 form-group-sm d-flex a-i-center m-b-8\">\n        <div class=\"d-flex a-i-center m-r-4\">\n          <label\n            class=\"m-b-0\"\n            translate\n          >\n            Date selection\n          </label>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"dateSelectionHelpTemplate\"\n            placement=\"bottom\"\n            triggers=\"focus\"\n            container=\"body\"\n            [adaptivePosition]=\"false\"\n          ></button>\n        </div>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control input-sm\"\n            [ngModel]=\"dateSelection\"\n            (ngModelChange)=\"dateSelectionChange($event)\"\n            [ngModelOptions]=\"{ standalone: true }\"\n          >\n            <option\n              title=\"{{ 'Dashboard time range' | translate }}\"\n              [value]=\"DATE_SELECTION.DASHBOARD_CONTEXT\"\n            >\n              {{ 'Dashboard time range' | translate }}\n            </option>\n            <option\n              title=\"{{ 'Widget configuration' | translate }}\"\n              [value]=\"DATE_SELECTION.CONFIG\"\n            >\n              {{ 'Widget configuration' | translate }}\n            </option>\n          </select>\n          <span></span>\n        </div>\n      </div>\n      <label class=\"text-12\">{{ 'Options' | translate }}</label>\n      <c8y-time-context\n        *ngIf=\"\n          dateSelection === DATE_SELECTION.CONFIG &&\n          formGroup.get('displayDateSelection').value === true\n        \"\n        [changedDateContext]=\"timeProps\"\n        [controlsAvailable]=\"{\n          realtime: true,\n          timeRange: config?.displayDateSelection,\n          interval: config?.displayDateSelection,\n          aggregation: config?.displayAggregationSelection\n        }\"\n        (contextChange)=\"timePropsChanged($event)\"\n      ></c8y-time-context>\n      <c8y-charts\n        class=\"d-block p-relative\"\n        *ngIf=\"activeDatapointsExists\"\n        [config]=\"config\"\n        [alerts]=\"alerts\"\n        (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n        (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n      ></c8y-charts>\n\n      <c8y-ui-empty-state\n        class=\"d-block m-t-24\"\n        [icon]=\"'search'\"\n        [title]=\"'No data points selected' | translate\"\n        [subtitle]=\"'Select data point to render chart' | translate\"\n        *ngIf=\"!activeDatapointsExists\"\n      ></c8y-ui-empty-state>\n\n      <form\n        class=\"d-block p-t-8\"\n        [formGroup]=\"formGroup\"\n      >\n        <label>{{ 'Display options' | translate }}</label>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Axis' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\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            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Alarms & events' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show vertical line on every occurrence' | 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            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show icon when triggered' | translate\"\n            >\n              <input\n                name=\"displayMarkedPoint\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedPoint\"\n              />\n              <span></span>\n              <span translate>Show icon when triggered</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"alarmsOrEventsHaveNoMatchingDps\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-warning\"\n                  c8yIcon=\"exclamation-triangle\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Chart' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Enable date selection in the widget view.' | translate\"\n            >\n              <input\n                name=\"displayDateSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayDateSelection\"\n              />\n              <span></span>\n              <span translate>Date selection in the widget view.</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"dateSelection === DATE_SELECTION.DASHBOARD_CONTEXT\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Aggregation selection' | translate\"\n            >\n              <input\n                name=\"displayAggregationSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayAggregationSelection\"\n              />\n              <span></span>\n              <span translate>Aggregation selection</span>\n            </label>\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          </c8y-form-group>\n        </fieldset>\n      </form>\n    </div>\n  </div>\n</div>\n<ng-template #dateSelectionHelpTemplate>\n  <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n" }]
+                    ], providers: [ChartEventsService, ChartAlarmsService], template: "<div class=\"no-card-context d-flex-md fit-h--md\">\n  <div class=\"col-md-5 bg-level-1 conf-col inner-scroll p-l-0\">\n    <div class=\"p-l-24\">\n      <form [formGroup]=\"formGroup\">\n        <c8y-datapoint-selection-list\n          class=\"bg-level-1 separator-bottom d-block\"\n          name=\"datapoints\"\n          [minActiveCount]=\"1\"\n          [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n          [config]=\"datapointSelectionConfig\"\n          formControlName=\"datapoints\"\n        ></c8y-datapoint-selection-list>\n\n        <c8y-alarm-event-selection-list\n          class=\"bg-level-1 separator-bottom d-block\"\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      </form>\n    </div>\n  </div>\n\n  <div class=\"col-md-7 sticky-top p-t-8 inner-scroll widget-preview\">\n    <div class=\"p-r-24 d-col fit-h\">\n      <div class=\"form-group p-t-8 form-group-sm d-flex a-i-center m-b-8\">\n        <div class=\"d-flex a-i-center m-r-4\">\n          <label\n            class=\"m-b-0\"\n            translate\n          >\n            Date selection\n          </label>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"dateSelectionHelpTemplate\"\n            placement=\"bottom\"\n            triggers=\"focus\"\n            container=\"body\"\n            [adaptivePosition]=\"false\"\n          ></button>\n        </div>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control input-sm\"\n            [ngModel]=\"dateSelection\"\n            (ngModelChange)=\"dateSelectionChange($event)\"\n            [ngModelOptions]=\"{ standalone: true }\"\n          >\n            <option\n              title=\"{{ 'Dashboard time range' | translate }}\"\n              [value]=\"DATE_SELECTION.DASHBOARD_CONTEXT\"\n            >\n              {{ 'Dashboard time range' | translate }}\n            </option>\n            <option\n              title=\"{{ 'Widget configuration' | translate }}\"\n              [value]=\"DATE_SELECTION.CONFIG\"\n            >\n              {{ 'Widget configuration' | translate }}\n            </option>\n          </select>\n          <span></span>\n        </div>\n      </div>\n      <label class=\"text-12\">{{ 'Options' | translate }}</label>\n      <c8y-time-context\n        *ngIf=\"\n          dateSelection === DATE_SELECTION.CONFIG &&\n          formGroup.get('displayDateSelection').value === true\n        \"\n        [changedDateContext]=\"timeProps\"\n        [controlsAvailable]=\"{\n          realtime: true,\n          timeRange: config?.displayDateSelection,\n          interval: config?.displayDateSelection,\n          aggregation: config?.displayAggregationSelection\n        }\"\n        (contextChange)=\"timePropsChanged($event)\"\n      ></c8y-time-context>\n      <c8y-charts\n        class=\"d-block p-relative\"\n        *ngIf=\"activeDatapointsExists\"\n        [config]=\"config\"\n        [alerts]=\"alerts\"\n        (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n        (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n      ></c8y-charts>\n\n      <c8y-ui-empty-state\n        class=\"d-block m-t-24\"\n        [icon]=\"'search'\"\n        [title]=\"'No data points selected' | translate\"\n        [subtitle]=\"'Select data point to render chart' | translate\"\n        *ngIf=\"!activeDatapointsExists\"\n      ></c8y-ui-empty-state>\n\n      <form\n        class=\"d-block p-t-8\"\n        [formGroup]=\"formGroup\"\n      >\n        <label>{{ 'Display options' | translate }}</label>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Axis' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Y-axis helper lines' | translate\"\n            >\n              <input\n                name=\"yAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"yAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>Y-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'X-axis helper lines' | translate\"\n            >\n              <input\n                name=\"xAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"xAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>X-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Merge matching data points into single axis' | translate\"\n            >\n              <input\n                name=\"mergeMatchingDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"mergeMatchingDatapoints\"\n              />\n              <span></span>\n              <span translate>Merge matching data points into single axis</span>\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Force merge all data points into single axis' | translate\"\n            >\n              <input\n                name=\"forceMergeDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"forceMergeDatapoints\"\n              />\n              <span></span>\n              <span translate>Force merge all datapoints into a single axis</span>\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Alarms & events' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show vertical line on every occurrence' | 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            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show icon when triggered' | translate\"\n            >\n              <input\n                name=\"displayMarkedPoint\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedPoint\"\n              />\n              <span></span>\n              <span translate>Show icon when triggered</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"alarmsOrEventsHaveNoMatchingDps\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-warning\"\n                  c8yIcon=\"exclamation-triangle\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Chart' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Enable date selection in the widget view.' | translate\"\n            >\n              <input\n                name=\"displayDateSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayDateSelection\"\n              />\n              <span></span>\n              <span translate>Date selection in the widget view.</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"dateSelection === DATE_SELECTION.DASHBOARD_CONTEXT\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Aggregation selection' | translate\"\n            >\n              <input\n                name=\"displayAggregationSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayAggregationSelection\"\n              />\n              <span></span>\n              <span translate>Aggregation selection</span>\n            </label>\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          </c8y-form-group>\n        </fieldset>\n      </form>\n    </div>\n  </div>\n</div>\n<ng-template #dateSelectionHelpTemplate>\n  <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1.WidgetConfigComponent, decorators: [{
                     type: Optional
                 }] }, { type: i1.ContextDashboardComponent, decorators: [{