@c8y/ngx-components 1024.1.6 → 1024.2.4

package/fesm2022/c8y-ngx-components-datapoint-selector.mjs

@@ -1,27 +1,29 @@
 import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i0 from '@angular/core';
-import { Injectable, forwardRef, Input, Component, EventEmitter, ContentChild, Output, Pipe, Optional, NgModule, signal, computed, inject, DestroyRef } from '@angular/core';
-import * as i2$1 from '@c8y/ngx-components';
-import { C8yValidators, C8yTranslateDirective, FormGroupComponent, RequiredInputPlaceholderDirective, MessagesComponent, MessageDirective, C8yTranslatePipe, MAX_PAGE_SIZE, IconDirective, ListItemComponent, ListItemDragHandleComponent, ListItemCheckboxComponent, HighlightComponent, ListItemActionComponent, ListItemCollapseComponent, TypeaheadComponent, ForOfDirective, ListItemIconComponent, EmptyStateComponent, LoadingComponent, ListGroupComponent, CoreModule, FormsModule as FormsModule$1 } from '@c8y/ngx-components';
+import { Input, ChangeDetectionStrategy, Component, Injectable, inject, DestroyRef, forwardRef, EventEmitter, ContentChild, Output, Pipe, Optional, NgModule, signal, computed } from '@angular/core';
+import * as i2 from '@c8y/ngx-components';
+import { C8yTranslateDirective, C8yTranslatePipe, C8yValidators, FormGroupComponent, RequiredInputPlaceholderDirective, MessagesComponent, MessageDirective, MAX_PAGE_SIZE, IconDirective, ListItemComponent, ListItemDragHandleComponent, ListItemCheckboxComponent, HighlightComponent, ListItemActionComponent, ListItemCollapseComponent, TypeaheadComponent, ForOfDirective, ListItemIconComponent, EmptyStateComponent, LoadingComponent, ListGroupComponent, CoreModule, FormsModule as FormsModule$1 } from '@c8y/ngx-components';
 import { MillerViewComponent, AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
 import { CollapseModule } from 'ngx-bootstrap/collapse';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
-import * as i1$1 from 'ngx-bootstrap/modal';
+import * as i1$2 from 'ngx-bootstrap/modal';
 import { ModalModule } from 'ngx-bootstrap/modal';
+import * as i5 from 'ngx-bootstrap/popover';
 import { PopoverDirective, PopoverModule } from 'ngx-bootstrap/popover';
 import { TooltipDirective, TooltipModule } from 'ngx-bootstrap/tooltip';
-import * as i2 from '@angular/forms';
-import { Validators, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, NgForm, ControlContainer } from '@angular/forms';
-import { map, take, filter, startWith, tap, switchMap, shareReplay, distinctUntilChanged, debounceTime } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/forms';
+import { ReactiveFormsModule, Validators, FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, NgForm, ControlContainer } from '@angular/forms';
 import { gettext } from '@c8y/ngx-components/gettext';
+import { map, take, filter, startWith, tap, switchMap, shareReplay, distinctUntilChanged, debounceTime } from 'rxjs/operators';
 import { NgClass, NgTemplateOutlet, KeyValuePipe, AsyncPipe, NgIf, NgFor } from '@angular/common';
+import chroma from 'chroma-js';
 import * as i4 from '@c8y/ngx-components/context-dashboard';
 import { WidgetConfigService, WidgetConfigComponent, ContextDashboardComponent, WidgetConfigFeedbackComponent } from '@c8y/ngx-components/context-dashboard';
 import { pipe, BehaviorSubject, from, combineLatest, filter as filter$1, take as take$1, map as map$1, switchMap as switchMap$1 } from 'rxjs';
-import * as i1 from '@c8y/client';
+import * as i1$1 from '@c8y/client';
 import { MeasurementService } from '@c8y/client';
 import { sortBy, get, uniq } from 'lodash-es';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 const AXIS_TYPES = [
     { val: null, text: gettext('Auto') },
@@ -30,6 +32,8 @@ const AXIS_TYPES = [
 ];
 const CHART_LINE_TYPES = [
     { val: 'line', text: gettext('Line') },
+    { val: 'dashed', text: gettext('Dashed line') },
+    { val: 'dotted', text: gettext('Dotted line') },
     { val: 'points', text: gettext('Points') },
     { val: 'linePoints', text: gettext('Line and points') },
     { val: 'bars', text: gettext('Bars') },
@@ -37,13 +41,65 @@ const CHART_LINE_TYPES = [
     { val: 'step-after', text: gettext('Step after') }
 ];
 const CHART_RENDER_TYPES = [
+    { val: 'avg', text: gettext('Average') },
     { val: 'min', text: gettext('Minimum') },
     { val: 'max', text: gettext('Maximum') },
     { val: 'area', text: gettext('Minimum and maximum') },
-    { val: 'avg', text: gettext('Average') },
     { val: 'count', text: gettext('Count') },
     { val: 'sum', text: gettext('Sum') }
 ];
+const DATA_POINT_VALUE_TYPES = ['avg', 'min', 'max'];
+const DATA_POINT_TOTAL_TYPES = ['count', 'sum'];
+const DEFAULT_RENDER_TYPE_LINE_TYPES = {
+    avg: 'line',
+    min: 'dashed',
+    max: 'dotted',
+    count: 'bars',
+    sum: 'bars'
+};
+
+class DatapointChartAdvancedOptionsComponent {
+    constructor() {
+        this.defaultColors = {};
+        this.renderAsBandDisabledTooltip = gettext('Both minimum and maximum must be enabled to use this option.');
+        this.CHART_LINE_TYPES = Array.from(CHART_LINE_TYPES);
+        this.AXIS_TYPES = Array.from(AXIS_TYPES);
+        this.DATA_POINT_VALUE_TYPES = DATA_POINT_VALUE_TYPES;
+        this.DATA_POINT_TOTAL_TYPES = DATA_POINT_TOTAL_TYPES;
+    }
+    getConfigColor(rtKey) {
+        const configColor = this.chartFormGroup?.get('renderTypeConfigs')
+            ?.get(rtKey)
+            ?.get('color')?.value;
+        return configColor || this.defaultColors[rtKey];
+    }
+    setConfigColor(rtKey, color) {
+        this.chartFormGroup?.get('renderTypeConfigs')
+            ?.get(rtKey)
+            ?.get('color')
+            ?.setValue(color);
+    }
+    getRenderTypeLabel(rtKey) {
+        const found = CHART_RENDER_TYPES.find(rt => rt.val === rtKey);
+        return found?.text || rtKey;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointChartAdvancedOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DatapointChartAdvancedOptionsComponent, isStandalone: true, selector: "c8y-datapoint-chart-advanced-options", inputs: { chartFormGroup: "chartFormGroup", defaultColors: "defaultColors" }, ngImport: i0, template: "<ng-container [formGroup]=\"chartFormGroup\">\n  <fieldset class=\"c8y-fieldset\">\n    <legend>\n      {{ 'Data point values' | translate }}\n      <button\n        class=\"btn-help btn-help--sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{\n          'Statistics that describe the spread of values within each time bucket. These share the same unit and scale as the original measurement'\n            | translate\n        }}\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n      ></button>\n    </legend>\n    <div class=\"table-responsive\">\n      <table class=\"table table-condensed m-b-0 bg-inherit\">\n        <thead>\n          <tr>\n            <th translate>Display</th>\n            <th translate>Range min</th>\n            <th translate>Range max</th>\n            <th translate>Chart type</th>\n            <th translate>Y-axis</th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container formGroupName=\"renderTypeConfigs\">\n            @for (rtKey of DATA_POINT_VALUE_TYPES; track rtKey) {\n              @let configColor = getConfigColor(rtKey);\n              <ng-container [formGroupName]=\"rtKey\">\n                <tr>\n                  <td class=\"text-no-wrap\">\n                    <div class=\"d-inline-flex a-i-center\">\n                      <label class=\"c8y-checkbox c8y-checkbox--inline m-b-0 m-r-4\">\n                        <input\n                          type=\"checkbox\"\n                          formControlName=\"enabled\"\n                        />\n                        <span></span>\n                        <span></span>\n                      </label>\n                      <div\n                        class=\"c8y-colorpicker m-r-4\"\n                        (click)=\"$event.stopPropagation()\"\n                      >\n                        <input\n                          [attr.aria-label]=\"rtKey + ' color'\"\n                          type=\"color\"\n                          [value]=\"configColor\"\n                          (input)=\"setConfigColor(rtKey, $any($event.target).value)\"\n                          (click)=\"$event.stopPropagation()\"\n                        />\n                        <span [style.background-color]=\"configColor\"></span>\n                      </div>\n                      <span>{{ getRenderTypeLabel(rtKey) | translate }}</span>\n                    </div>\n                  </td>\n                  <td>\n                    <input\n                      class=\"form-control input-sm\"\n                      type=\"number\"\n                      formControlName=\"rangeMin\"\n                      [placeholder]=\"'e.g. {{ example }}' | translate: { example: 0 }\"\n                    />\n                  </td>\n                  <td>\n                    <input\n                      class=\"form-control input-sm\"\n                      type=\"number\"\n                      formControlName=\"rangeMax\"\n                      [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n                    />\n                  </td>\n                  <td>\n                    <div class=\"c8y-select-wrapper\">\n                      <select\n                        class=\"form-control input-sm\"\n                        formControlName=\"lineType\"\n                      >\n                        @for (type of CHART_LINE_TYPES; track type.val) {\n                          <option [ngValue]=\"type.val\">{{ type.text | translate }}</option>\n                        }\n                      </select>\n                    </div>\n                  </td>\n                  <td>\n                    <div class=\"c8y-select-wrapper\">\n                      <select\n                        class=\"form-control input-sm\"\n                        formControlName=\"yAxisType\"\n                      >\n                        @for (type of AXIS_TYPES; track type.val) {\n                          <option [ngValue]=\"type.val\">{{ type.text | translate }}</option>\n                        }\n                      </select>\n                    </div>\n                  </td>\n                </tr>\n              </ng-container>\n            }\n          </ng-container>\n          <tr>\n            <td colspan=\"5\">\n              <div\n                class=\"d-flex a-i-center\"\n                [tooltip]=\"\n                  chartFormGroup?.get('renderAsBand')?.disabled\n                    ? (renderAsBandDisabledTooltip | translate)\n                    : null\n                \"\n                container=\"body\"\n              >\n                <label\n                  class=\"c8y-checkbox m-b-0 m-r-4\"\n                  [class.disabled]=\"chartFormGroup?.get('renderAsBand')?.disabled\"\n                >\n                  <input\n                    [attr.aria-label]=\"'Render as band' | translate\"\n                    type=\"checkbox\"\n                    formControlName=\"renderAsBand\"\n                  />\n                  <span></span>\n                </label>\n                <div\n                  class=\"c8y-colorpicker m-l-8 m-r-4\"\n                  [class.invisible]=\"!chartFormGroup?.get('renderAsBand')?.value\"\n                  (click)=\"$event.stopPropagation()\"\n                >\n                  <input\n                    [attr.aria-label]=\"'Band color' | translate\"\n                    type=\"color\"\n                    [value]=\"chartFormGroup?.get('bandColor')?.value || defaultColors['avg']\"\n                    (input)=\"chartFormGroup?.get('bandColor')?.setValue($any($event.target).value)\"\n                    (click)=\"$event.stopPropagation()\"\n                  />\n                  <span\n                    [style.background-color]=\"\n                      chartFormGroup?.get('bandColor')?.value || defaultColors['avg']\n                    \"\n                  ></span>\n                </div>\n                <span class=\"text-12\">\n                  {{ 'Render as band' | translate }}\n                  <small class=\"text-muted\">\n                    <em> &mdash; {{ 'replaces min/max lines with a shaded area' | translate }} </em>\n                  </small>\n                </span>\n              </div>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </fieldset>\n\n  <fieldset class=\"c8y-fieldset\">\n    <legend>\n      {{ 'Data point totals' | translate }}\n      <button\n        class=\"btn-help btn-help--sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{\n          'Metrics that quantify the time bucket itself \u2014 how many readings the bucket captured, or their totals. These typically use a different scale.'\n            | translate\n        }}\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n      ></button>\n    </legend>\n    <ng-container formGroupName=\"renderTypeConfigs\">\n      <div class=\"table-responsive\">\n        <table class=\"table table-condensed m-b-0 bg-inherit\">\n          <thead>\n            <tr>\n              <th translate>Display</th>\n              <th translate>Range min</th>\n              <th translate>Range max</th>\n              <th translate>Chart type</th>\n              <th translate>Y-axis</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (rtKey of DATA_POINT_TOTAL_TYPES; track rtKey) {\n              @let configColor = getConfigColor(rtKey);\n              <ng-container [formGroupName]=\"rtKey\">\n                <tr>\n                  <td class=\"text-no-wrap\">\n                    <div class=\"d-inline-flex a-i-center\">\n                      <label class=\"c8y-checkbox c8y-checkbox--inline m-b-0 m-r-4\">\n                        <input\n                          type=\"checkbox\"\n                          formControlName=\"enabled\"\n                        />\n                        <span></span>\n                        <span></span>\n                      </label>\n                      <div\n                        class=\"c8y-colorpicker m-r-4\"\n                        (click)=\"$event.stopPropagation()\"\n                      >\n                        <input\n                          [attr.aria-label]=\"rtKey + ' color'\"\n                          type=\"color\"\n                          [value]=\"configColor\"\n                          (input)=\"setConfigColor(rtKey, $any($event.target).value)\"\n                          (click)=\"$event.stopPropagation()\"\n                        />\n                        <span [style.background-color]=\"configColor\"></span>\n                      </div>\n                      <span>{{ getRenderTypeLabel(rtKey) | translate }}</span>\n                    </div>\n                  </td>\n                  <td>\n                    <input\n                      class=\"form-control input-sm\"\n                      type=\"number\"\n                      formControlName=\"rangeMin\"\n                      [placeholder]=\"'e.g. {{ example }}' | translate: { example: 0 }\"\n                    />\n                  </td>\n                  <td>\n                    <input\n                      class=\"form-control input-sm\"\n                      type=\"number\"\n                      formControlName=\"rangeMax\"\n                      [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n                    />\n                  </td>\n                  <td>\n                    <div class=\"c8y-select-wrapper\">\n                      <select\n                        class=\"form-control input-sm\"\n                        formControlName=\"lineType\"\n                      >\n                        @for (type of CHART_LINE_TYPES; track type.val) {\n                          <option [ngValue]=\"type.val\">{{ type.text | translate }}</option>\n                        }\n                      </select>\n                    </div>\n                  </td>\n                  <td>\n                    <div class=\"c8y-select-wrapper\">\n                      <select\n                        class=\"form-control input-sm\"\n                        formControlName=\"yAxisType\"\n                      >\n                        @for (type of AXIS_TYPES; track type.val) {\n                          <option [ngValue]=\"type.val\">{{ type.text | translate }}</option>\n                        }\n                      </select>\n                    </div>\n                  </td>\n                </tr>\n              </ng-container>\n            }\n          </tbody>\n        </table>\n      </div>\n    </ng-container>\n  </fieldset>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: 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: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointChartAdvancedOptionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-datapoint-chart-advanced-options', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        ReactiveFormsModule,
+                        C8yTranslateDirective,
+                        C8yTranslatePipe,
+                        PopoverDirective,
+                        TooltipDirective
+                    ], template: "<ng-container [formGroup]=\"chartFormGroup\">\n  <fieldset class=\"c8y-fieldset\">\n    <legend>\n      {{ 'Data point values' | translate }}\n      <button\n        class=\"btn-help btn-help--sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{\n          'Statistics that describe the spread of values within each time bucket. These share the same unit and scale as the original measurement'\n            | translate\n        }}\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n      ></button>\n    </legend>\n    <div class=\"table-responsive\">\n      <table class=\"table table-condensed m-b-0 bg-inherit\">\n        <thead>\n          <tr>\n            <th translate>Display</th>\n            <th translate>Range min</th>\n            <th translate>Range max</th>\n            <th translate>Chart type</th>\n            <th translate>Y-axis</th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container formGroupName=\"renderTypeConfigs\">\n            @for (rtKey of DATA_POINT_VALUE_TYPES; track rtKey) {\n              @let configColor = getConfigColor(rtKey);\n              <ng-container [formGroupName]=\"rtKey\">\n                <tr>\n                  <td class=\"text-no-wrap\">\n                    <div class=\"d-inline-flex a-i-center\">\n                      <label class=\"c8y-checkbox c8y-checkbox--inline m-b-0 m-r-4\">\n                        <input\n                          type=\"checkbox\"\n                          formControlName=\"enabled\"\n                        />\n                        <span></span>\n                        <span></span>\n                      </label>\n                      <div\n                        class=\"c8y-colorpicker m-r-4\"\n                        (click)=\"$event.stopPropagation()\"\n                      >\n                        <input\n                          [attr.aria-label]=\"rtKey + ' color'\"\n                          type=\"color\"\n                          [value]=\"configColor\"\n                          (input)=\"setConfigColor(rtKey, $any($event.target).value)\"\n                          (click)=\"$event.stopPropagation()\"\n                        />\n                        <span [style.background-color]=\"configColor\"></span>\n                      </div>\n                      <span>{{ getRenderTypeLabel(rtKey) | translate }}</span>\n                    </div>\n                  </td>\n                  <td>\n                    <input\n                      class=\"form-control input-sm\"\n                      type=\"number\"\n                      formControlName=\"rangeMin\"\n                      [placeholder]=\"'e.g. {{ example }}' | translate: { example: 0 }\"\n                    />\n                  </td>\n                  <td>\n                    <input\n                      class=\"form-control input-sm\"\n                      type=\"number\"\n                      formControlName=\"rangeMax\"\n                      [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n                    />\n                  </td>\n                  <td>\n                    <div class=\"c8y-select-wrapper\">\n                      <select\n                        class=\"form-control input-sm\"\n                        formControlName=\"lineType\"\n                      >\n                        @for (type of CHART_LINE_TYPES; track type.val) {\n                          <option [ngValue]=\"type.val\">{{ type.text | translate }}</option>\n                        }\n                      </select>\n                    </div>\n                  </td>\n                  <td>\n                    <div class=\"c8y-select-wrapper\">\n                      <select\n                        class=\"form-control input-sm\"\n                        formControlName=\"yAxisType\"\n                      >\n                        @for (type of AXIS_TYPES; track type.val) {\n                          <option [ngValue]=\"type.val\">{{ type.text | translate }}</option>\n                        }\n                      </select>\n                    </div>\n                  </td>\n                </tr>\n              </ng-container>\n            }\n          </ng-container>\n          <tr>\n            <td colspan=\"5\">\n              <div\n                class=\"d-flex a-i-center\"\n                [tooltip]=\"\n                  chartFormGroup?.get('renderAsBand')?.disabled\n                    ? (renderAsBandDisabledTooltip | translate)\n                    : null\n                \"\n                container=\"body\"\n              >\n                <label\n                  class=\"c8y-checkbox m-b-0 m-r-4\"\n                  [class.disabled]=\"chartFormGroup?.get('renderAsBand')?.disabled\"\n                >\n                  <input\n                    [attr.aria-label]=\"'Render as band' | translate\"\n                    type=\"checkbox\"\n                    formControlName=\"renderAsBand\"\n                  />\n                  <span></span>\n                </label>\n                <div\n                  class=\"c8y-colorpicker m-l-8 m-r-4\"\n                  [class.invisible]=\"!chartFormGroup?.get('renderAsBand')?.value\"\n                  (click)=\"$event.stopPropagation()\"\n                >\n                  <input\n                    [attr.aria-label]=\"'Band color' | translate\"\n                    type=\"color\"\n                    [value]=\"chartFormGroup?.get('bandColor')?.value || defaultColors['avg']\"\n                    (input)=\"chartFormGroup?.get('bandColor')?.setValue($any($event.target).value)\"\n                    (click)=\"$event.stopPropagation()\"\n                  />\n                  <span\n                    [style.background-color]=\"\n                      chartFormGroup?.get('bandColor')?.value || defaultColors['avg']\n                    \"\n                  ></span>\n                </div>\n                <span class=\"text-12\">\n                  {{ 'Render as band' | translate }}\n                  <small class=\"text-muted\">\n                    <em> &mdash; {{ 'replaces min/max lines with a shaded area' | translate }} </em>\n                  </small>\n                </span>\n              </div>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </fieldset>\n\n  <fieldset class=\"c8y-fieldset\">\n    <legend>\n      {{ 'Data point totals' | translate }}\n      <button\n        class=\"btn-help btn-help--sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{\n          'Metrics that quantify the time bucket itself \u2014 how many readings the bucket captured, or their totals. These typically use a different scale.'\n            | translate\n        }}\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n      ></button>\n    </legend>\n    <ng-container formGroupName=\"renderTypeConfigs\">\n      <div class=\"table-responsive\">\n        <table class=\"table table-condensed m-b-0 bg-inherit\">\n          <thead>\n            <tr>\n              <th translate>Display</th>\n              <th translate>Range min</th>\n              <th translate>Range max</th>\n              <th translate>Chart type</th>\n              <th translate>Y-axis</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (rtKey of DATA_POINT_TOTAL_TYPES; track rtKey) {\n              @let configColor = getConfigColor(rtKey);\n              <ng-container [formGroupName]=\"rtKey\">\n                <tr>\n                  <td class=\"text-no-wrap\">\n                    <div class=\"d-inline-flex a-i-center\">\n                      <label class=\"c8y-checkbox c8y-checkbox--inline m-b-0 m-r-4\">\n                        <input\n                          type=\"checkbox\"\n                          formControlName=\"enabled\"\n                        />\n                        <span></span>\n                        <span></span>\n                      </label>\n                      <div\n                        class=\"c8y-colorpicker m-r-4\"\n                        (click)=\"$event.stopPropagation()\"\n                      >\n                        <input\n                          [attr.aria-label]=\"rtKey + ' color'\"\n                          type=\"color\"\n                          [value]=\"configColor\"\n                          (input)=\"setConfigColor(rtKey, $any($event.target).value)\"\n                          (click)=\"$event.stopPropagation()\"\n                        />\n                        <span [style.background-color]=\"configColor\"></span>\n                      </div>\n                      <span>{{ getRenderTypeLabel(rtKey) | translate }}</span>\n                    </div>\n                  </td>\n                  <td>\n                    <input\n                      class=\"form-control input-sm\"\n                      type=\"number\"\n                      formControlName=\"rangeMin\"\n                      [placeholder]=\"'e.g. {{ example }}' | translate: { example: 0 }\"\n                    />\n                  </td>\n                  <td>\n                    <input\n                      class=\"form-control input-sm\"\n                      type=\"number\"\n                      formControlName=\"rangeMax\"\n                      [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n                    />\n                  </td>\n                  <td>\n                    <div class=\"c8y-select-wrapper\">\n                      <select\n                        class=\"form-control input-sm\"\n                        formControlName=\"lineType\"\n                      >\n                        @for (type of CHART_LINE_TYPES; track type.val) {\n                          <option [ngValue]=\"type.val\">{{ type.text | translate }}</option>\n                        }\n                      </select>\n                    </div>\n                  </td>\n                  <td>\n                    <div class=\"c8y-select-wrapper\">\n                      <select\n                        class=\"form-control input-sm\"\n                        formControlName=\"yAxisType\"\n                      >\n                        @for (type of AXIS_TYPES; track type.val) {\n                          <option [ngValue]=\"type.val\">{{ type.text | translate }}</option>\n                        }\n                      </select>\n                    </div>\n                  </td>\n                </tr>\n              </ng-container>\n            }\n          </tbody>\n        </table>\n      </div>\n    </ng-container>\n  </fieldset>\n</ng-container>\n" }]
+        }], propDecorators: { chartFormGroup: [{
+                type: Input
+            }], defaultColors: [{
+                type: Input
+            }] } });
 
 class DatapointAttributesFormValidationService {
     constructor(formBuilder) {
@@ -98,7 +154,12 @@ class DatapointAttributesFormValidationService {
             redRangeMax: redRange?.max,
             yellowRangeMin: yellowRange?.min,
             yellowRangeMax: yellowRange?.max,
-            renderType: showChart ? chart?.renderType : display?.renderType,
+            renderType: showChart ? this.deriveRenderTypeFromConfigs(chart) : display?.renderType,
+            renderTypes: showChart ? this.deriveRenderTypesFromConfigs(chart) : undefined,
+            renderTypeColors: showChart ? this.deriveRenderTypeColorsFromConfigs(chart) : undefined,
+            renderAsBand: showChart ? chart?.renderAsBand : undefined,
+            bandColor: showChart ? chart?.bandColor : undefined,
+            renderTypeConfigs: showChart ? chart?.renderTypeConfigs : undefined,
             lineType: chart?.lineType,
             yAxisType: chart?.yAxisType
         };
@@ -108,7 +169,7 @@ class DatapointAttributesFormValidationService {
         if (!backendDataStructure) {
             return {};
         }
-        const { __active, __target, __template, color, label, description, fragment, series, min, max, unit, target, redRangeMin, redRangeMax, yellowRangeMin, yellowRangeMax, renderType, lineType, yAxisType } = backendDataStructure;
+        const { __active, __target, __template, color, label, description, fragment, series, min, max, unit, target, redRangeMin, redRangeMax, yellowRangeMin, yellowRangeMax, renderType, renderTypes, lineType, yAxisType } = backendDataStructure;
         const obj = {
             __active,
             __target,
@@ -132,7 +193,18 @@ class DatapointAttributesFormValidationService {
                 min: this.convertStringToNumber(yellowRangeMin),
                 max: this.convertStringToNumber(yellowRangeMax)
             },
-            chart: renderType || lineType || yAxisType ? { renderType, lineType, yAxisType } : undefined,
+            chart: renderType || lineType || yAxisType
+                ? {
+                    renderType,
+                    renderTypes: renderTypes || null,
+                    renderTypeColors: backendDataStructure.renderTypeColors || null,
+                    renderAsBand: backendDataStructure.renderAsBand || false,
+                    bandColor: backendDataStructure.bandColor || null,
+                    renderTypeConfigs: this.buildRenderTypeConfigs(backendDataStructure),
+                    lineType,
+                    yAxisType
+                }
+                : undefined,
             display: renderType ? { renderType } : undefined
         };
         return obj;
@@ -185,8 +257,30 @@ class DatapointAttributesFormValidationService {
     getChartFormGroup() {
         return this.formBuilder.group({
             renderType: [CHART_RENDER_TYPES[0].val, []],
+            renderTypes: [null, []],
+            renderTypeColors: [null, []],
+            renderAsBand: [false, []],
+            bandColor: [null, []],
             lineType: [CHART_LINE_TYPES[0].val, []],
-            yAxisType: [AXIS_TYPES[0].val, []]
+            yAxisType: [AXIS_TYPES[0].val, []],
+            renderTypeConfigs: this.getRenderTypeConfigsFormGroup()
+        });
+    }
+    getRenderTypeConfigsFormGroup() {
+        const group = {};
+        for (const rt of CHART_RENDER_TYPES) {
+            group[rt.val] = this.getRenderTypeConfigFormGroup(rt.val === 'avg', DEFAULT_RENDER_TYPE_LINE_TYPES[rt.val] || 'line');
+        }
+        return this.formBuilder.group(group);
+    }
+    getRenderTypeConfigFormGroup(enabled, lineType) {
+        return this.formBuilder.group({
+            enabled: [enabled, []],
+            color: [null, []],
+            rangeMin: [null, []],
+            rangeMax: [null, []],
+            lineType: [lineType, []],
+            yAxisType: [null, []]
         });
     }
     getDisplayFormGroup() {
@@ -213,14 +307,84 @@ class DatapointAttributesFormValidationService {
             return possibleString;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointAttributesFormValidationService, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /**
+     * Derives the primary `renderType` from `renderTypeConfigs`.
+     * Returns the first enabled type, or falls back to `chart.renderType`.
+     */
+    deriveRenderTypeFromConfigs(chart) {
+        const configs = chart?.renderTypeConfigs;
+        if (!configs) {
+            return chart?.renderType;
+        }
+        const firstEnabled = Object.keys(configs).find(key => configs[key]?.enabled);
+        return firstEnabled || chart?.renderType || 'avg';
+    }
+    /**
+     * Builds `renderTypeConfigs` from backend data, supporting both new format (already has configs)
+     * and legacy format (only has renderType/renderTypes/renderTypeColors).
+     */
+    buildRenderTypeConfigs(backend) {
+        if (backend.renderTypeConfigs) {
+            return backend.renderTypeConfigs;
+        }
+        // Reconstruct from legacy renderTypes / renderType / renderTypeColors
+        const enabledTypes = backend.renderTypes?.length
+            ? backend.renderTypes
+            : backend.renderType
+                ? [backend.renderType]
+                : ['avg'];
+        const colors = backend.renderTypeColors || {};
+        const configs = {};
+        for (const rt of CHART_RENDER_TYPES) {
+            configs[rt.val] = {
+                enabled: enabledTypes.includes(rt.val),
+                color: colors[rt.val] || null,
+                rangeMin: null,
+                rangeMax: null,
+                lineType: DEFAULT_RENDER_TYPE_LINE_TYPES[rt.val] || 'line',
+                yAxisType: null
+            };
+        }
+        return configs;
+    }
+    /**
+     * Derives the `renderTypes` array from `renderTypeConfigs`.
+     * If configs exist, returns enabled types; otherwise falls back to `chart.renderTypes`.
+     */
+    deriveRenderTypesFromConfigs(chart) {
+        const configs = chart?.renderTypeConfigs;
+        if (!configs) {
+            return chart?.renderTypes || null;
+        }
+        const enabled = Object.keys(configs).filter(key => configs[key]?.enabled);
+        return enabled.length ? enabled : null;
+    }
+    /**
+     * Derives the `renderTypeColors` map from `renderTypeConfigs`.
+     * If configs exist, builds a color map from types that have a custom color set.
+     */
+    deriveRenderTypeColorsFromConfigs(chart) {
+        const configs = chart?.renderTypeConfigs;
+        if (!configs) {
+            return chart?.renderTypeColors || null;
+        }
+        const colors = {};
+        for (const key of Object.keys(configs)) {
+            if (configs[key]?.enabled && configs[key]?.color) {
+                colors[key] = configs[key].color;
+            }
+        }
+        return Object.keys(colors).length ? colors : null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointAttributesFormValidationService, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointAttributesFormValidationService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointAttributesFormValidationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i2.FormBuilder }] });
+        }], ctorParameters: () => [{ type: i1.FormBuilder }] });
 
+const DEFAULT_DATAPOINT_COLOR = '#1776bf';
 class DatapointAttributesFormComponent {
     constructor(formValidations) {
         this.formValidations = formValidations;
@@ -241,6 +405,7 @@ class DatapointAttributesFormComponent {
         this.CHART_LINE_TYPES = Array.from(CHART_LINE_TYPES);
         this.AXIS_TYPES = Array.from(AXIS_TYPES);
         this.DEFAULT_RENDER_TYPES = ['min', 'max', 'area'];
+        this.destroyRef = inject(DestroyRef);
         this.customValidationErrorMessages = {};
         this.shouldForceInitialValidation = true;
         this.formGroup = this.formValidations.getDefaultFormGroup();
@@ -249,6 +414,8 @@ class DatapointAttributesFormComponent {
     ngOnInit() {
         this.initializeFormVisibility();
         this.filterChartTypes();
+        this.syncLastEnabledRenderType();
+        this.syncRenderAsBandWithMinMax();
     }
     ngOnChanges(changes) {
         if (changes.showAdvancedChartOptions) {
@@ -273,6 +440,7 @@ class DatapointAttributesFormComponent {
                 emitEvent: false
             });
         }
+        this.updateRenderAsBandState();
         if (this.shouldForceInitialValidation) {
             queueMicrotask(() => {
                 this.formGroup.updateValueAndValidity();
@@ -292,7 +460,105 @@ class DatapointAttributesFormComponent {
         if (this.formGroup?.disabled === isDisabled) {
             return;
         }
-        isDisabled ? this.formGroup.disable() : this.formGroup.enable();
+        if (isDisabled) {
+            this.formGroup.disable();
+        }
+        else {
+            this.formGroup.enable();
+        }
+    }
+    /** Precomputed default shade colors for each render type, passed to the advanced options component. */
+    get renderTypeDefaultColors() {
+        const result = {};
+        for (const rt of CHART_RENDER_TYPES) {
+            if (rt.val !== 'area') {
+                result[rt.val] = this.getRenderTypeColor(rt.val);
+            }
+        }
+        return result;
+    }
+    /** Get the current custom color for a specific render type, or an auto-generated shade of the main color. */
+    getRenderTypeColor(renderType) {
+        const colors = this.chart?.get('renderTypeColors')?.value;
+        if (colors?.[renderType]) {
+            return colors[renderType];
+        }
+        const baseColor = this.formGroup?.get('color')?.value || DEFAULT_DATAPOINT_COLOR;
+        return this.getRenderTypeColorFromBase(baseColor, renderType);
+    }
+    /**
+     * Generates a shade of `baseColor` for the given render type using luminance offsets
+     * matching the Cumulocity brand palette: avg = base, min/count darker, max/sum lighter.
+     */
+    getRenderTypeColorFromBase(baseColor, renderType) {
+        const SHADE_OFFSETS = { count: -2, min: -1, avg: 0, max: 1, sum: 2 };
+        const offset = SHADE_OFFSETS[renderType];
+        if (offset === undefined || offset === 0) {
+            return baseColor;
+        }
+        try {
+            const referenceShades = [
+                '#134158',
+                '#1C5569',
+                '#058192', // primary color
+                '#22A6AA',
+                '#3CC1B7',
+                '#8ADBD5',
+                '#C5EDEA',
+                '#EBF9F8'
+            ];
+            // Calculate the luminance of the reference shades
+            const referenceLuminances = referenceShades.map(color => chroma(color).luminance());
+            const targetIndex = 2 + offset;
+            if (targetIndex < 0 || targetIndex >= referenceLuminances.length) {
+                return baseColor;
+            }
+            const luminanceDelta = referenceLuminances[targetIndex] - referenceLuminances[2];
+            const targetLuminance = Math.max(0, Math.min(1, chroma(baseColor).luminance() + luminanceDelta));
+            return chroma(baseColor).luminance(targetLuminance).hex();
+        }
+        catch {
+            return baseColor;
+        }
+    }
+    syncLastEnabledRenderType() {
+        const renderTypeConfigs = this.chart?.get('renderTypeConfigs');
+        if (!renderTypeConfigs)
+            return;
+        const allKeys = [...DATA_POINT_VALUE_TYPES, ...DATA_POINT_TOTAL_TYPES];
+        allKeys.forEach(key => {
+            renderTypeConfigs
+                .get(`${key}.enabled`)
+                ?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe((enabled) => {
+                if (!enabled && allKeys.every(k => !renderTypeConfigs.get(`${k}.enabled`)?.value)) {
+                    renderTypeConfigs.get(`${key}.enabled`)?.setValue(true);
+                }
+            });
+        });
+    }
+    syncRenderAsBandWithMinMax() {
+        const renderTypeConfigs = this.chart?.get('renderTypeConfigs');
+        if (!renderTypeConfigs)
+            return;
+        renderTypeConfigs.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.updateRenderAsBandState());
+    }
+    updateRenderAsBandState() {
+        const renderTypeConfigs = this.chart?.get('renderTypeConfigs');
+        const renderAsBand = this.chart?.get('renderAsBand');
+        if (!renderTypeConfigs || !renderAsBand)
+            return;
+        const canUseBand = renderTypeConfigs.get('min.enabled')?.value && renderTypeConfigs.get('max.enabled')?.value;
+        if (!canUseBand) {
+            if (renderAsBand.value)
+                renderAsBand.setValue(false, { emitEvent: true });
+            renderAsBand.disable({ emitEvent: false });
+        }
+        else {
+            renderAsBand.enable({ emitEvent: false });
+        }
     }
     setSubForms() {
         if (!this.formGroup) {
@@ -350,7 +616,7 @@ class DatapointAttributesFormComponent {
                 useExisting: forwardRef(() => DatapointAttributesFormComponent),
                 multi: true
             }
-        ], usesOnChanges: true, ngImport: i0, template: "<div [formGroup]=\"formGroup\">\n  @if (!rawValue?.__template || showFormIfTemplateWasSelected) {\n    @if (formGroup.controls?.label || formGroup.controls?.unit || formGroup.controls?.target) {\n      <fieldset class=\"c8y-fieldset\">\n        <legend translate>Details</legend>\n        <div class=\"row\">\n          @if (formGroup.controls?.label) {\n            <div class=\"col-md-6\">\n              <c8y-form-group class=\"form-group-sm\">\n                <label translate>Label</label>\n                <input\n                  class=\"form-control\"\n                  name=\"label\"\n                  formControlName=\"label\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'Temperature' }\"\n                />\n                <c8y-messages\n                  [show]=\"formGroup.controls.label.touched && formGroup.controls.label.errors\"\n                >\n                  @for (item of customValidationErrorMessages['label'] | keyvalue; track item.key) {\n                    <c8y-message\n                      [name]=\"item.key\"\n                      [text]=\"item.value\"\n                    ></c8y-message>\n                  }\n                </c8y-messages>\n              </c8y-form-group>\n            </div>\n          }\n          @if (formGroup.controls?.unit) {\n            <div class=\"col-md-6\">\n              <c8y-form-group class=\"form-group-sm\">\n                <label translate>Unit</label>\n                <input\n                  class=\"form-control\"\n                  name=\"unit\"\n                  formControlName=\"unit\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: '\u00BAC' }\"\n                />\n                <c8y-messages\n                  [show]=\"formGroup.controls.unit.touched && formGroup.controls.unit.errors\"\n                >\n                  @for (item of customValidationErrorMessages['unit'] | keyvalue; track item.key) {\n                    <c8y-message\n                      [name]=\"item.key\"\n                      [text]=\"item.value\"\n                    ></c8y-message>\n                  }\n                </c8y-messages>\n              </c8y-form-group>\n            </div>\n          }\n          @if (formGroup.controls?.target && showTarget) {\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                class=\"form-group-sm\"\n                [ngClass]=\"{\n                  'has-error':\n                    (range?.touched || formGroup.controls.target.touched) &&\n                    formGroup.controls?.target?.errors\n                }\"\n              >\n                <label translate>Target</label>\n                <input\n                  class=\"form-control\"\n                  name=\"target\"\n                  type=\"number\"\n                  formControlName=\"target\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 25 }\"\n                />\n                <c8y-messages\n                  [show]=\"\n                    (range?.touched || formGroup.controls.target.touched) &&\n                    formGroup.controls.target.errors\n                  \"\n                >\n                  @for (\n                    item of customValidationErrorMessages['target'] | keyvalue;\n                    track item.key\n                  ) {\n                    <c8y-message\n                      [name]=\"item.key\"\n                      [text]=\"item.value\"\n                    ></c8y-message>\n                  }\n                </c8y-messages>\n              </c8y-form-group>\n            </div>\n          }\n        </div>\n      </fieldset>\n    }\n    @if (range && showRange) {\n      <fieldset class=\"c8y-fieldset\">\n        <legend translate>Range</legend>\n        <div\n          class=\"row\"\n          formGroupName=\"range\"\n        >\n          <div class=\"col-md-6\">\n            <c8y-form-group\n              class=\"form-group-sm\"\n              [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.min?.errors }\"\n            >\n              <label translate>Min</label>\n              <input\n                class=\"form-control\"\n                name=\"min\"\n                type=\"number\"\n                formControlName=\"min\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 0 }\"\n              />\n              <c8y-messages [show]=\"range?.touched && range.controls?.min?.errors\"></c8y-messages>\n            </c8y-form-group>\n          </div>\n          <div class=\"col-md-6\">\n            <c8y-form-group\n              class=\"form-group-sm\"\n              [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.max?.errors }\"\n            >\n              <label translate>Max</label>\n              <input\n                class=\"form-control\"\n                name=\"max\"\n                type=\"number\"\n                formControlName=\"max\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n              />\n              <c8y-messages [show]=\"range?.touched && range.controls?.max?.errors\">\n                @for (item of customValidationErrorMessages['max'] | keyvalue; track item.key) {\n                  <c8y-message\n                    [name]=\"item.key\"\n                    [text]=\"item.value\"\n                  ></c8y-message>\n                }\n              </c8y-messages>\n            </c8y-form-group>\n          </div>\n        </div>\n      </fieldset>\n    }\n    @if (yellowRange && showYellowRange) {\n      <fieldset\n        class=\"c8y-fieldset\"\n        formGroupName=\"yellowRange\"\n      >\n        <legend translate>Yellow range</legend>\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <c8y-form-group\n              class=\"form-group-sm\"\n              [ngClass]=\"{\n                'has-error':\n                  (range?.touched || yellowRange?.touched) && yellowRange?.controls?.min?.errors\n              }\"\n            >\n              <label translate>Min</label>\n              <input\n                class=\"form-control\"\n                name=\"min\"\n                type=\"number\"\n                formControlName=\"min\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 50 }\"\n              />\n              <c8y-messages\n                [show]=\"\n                  (range?.touched || yellowRange?.touched) && yellowRange.controls?.min?.errors\n                \"\n              ></c8y-messages>\n            </c8y-form-group>\n          </div>\n\n          <div class=\"col-md-6\">\n            <c8y-form-group\n              class=\"form-group-sm\"\n              [ngClass]=\"{\n                'has-error':\n                  (range?.touched || yellowRange?.touched) && yellowRange?.controls?.max?.errors\n              }\"\n            >\n              <label translate>Max</label>\n              <input\n                class=\"form-control\"\n                name=\"max\"\n                type=\"number\"\n                formControlName=\"max\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n              />\n              <c8y-messages\n                [show]=\"\n                  (range?.touched || yellowRange?.touched) && yellowRange.controls?.max?.errors\n                \"\n              ></c8y-messages>\n            </c8y-form-group>\n          </div>\n        </div>\n      </fieldset>\n    }\n    @if (redRange && showRedRange) {\n      <fieldset\n        class=\"c8y-fieldset\"\n        formGroupName=\"redRange\"\n      >\n        <legend translate>Red range</legend>\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <c8y-form-group\n              class=\"form-group-sm\"\n              [ngClass]=\"{\n                'has-error':\n                  (range?.touched || redRange?.touched) && redRange?.controls?.min?.errors\n              }\"\n            >\n              <label translate>Min</label>\n              <input\n                class=\"form-control\"\n                name=\"min\"\n                type=\"number\"\n                formControlName=\"min\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n              />\n              <c8y-messages\n                [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.min?.errors\"\n              ></c8y-messages>\n            </c8y-form-group>\n          </div>\n\n          <div class=\"col-md-6\">\n            <c8y-form-group\n              class=\"form-group-sm\"\n              [ngClass]=\"{\n                'has-error':\n                  (range?.touched || redRange?.touched) && redRange?.controls?.max?.errors\n              }\"\n            >\n              <label translate>Max</label>\n              <input\n                class=\"form-control\"\n                name=\"max\"\n                type=\"number\"\n                formControlName=\"max\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n              />\n              <c8y-messages\n                [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.max?.errors\"\n              ></c8y-messages>\n            </c8y-form-group>\n          </div>\n        </div>\n      </fieldset>\n    }\n  }\n\n  @if (showChartForm) {\n    <fieldset\n      class=\"c8y-fieldset\"\n      formGroupName=\"chart\"\n    >\n      <legend translate>Chart</legend>\n      <div class=\"tight-grid\">\n        @if (selectableChartRenderTypes?.length !== 0) {\n          <div class=\"col-xs-6 col-sm-4\">\n            <c8y-form-group class=\"form-group-sm\">\n              <ng-container *ngTemplateOutlet=\"displayHelpButton\"></ng-container>\n              <div class=\"c8y-select-wrapper\">\n                <select\n                  class=\"form-control\"\n                  formControlName=\"renderType\"\n                >\n                  @for (type of CHART_RENDER_TYPES; track type.val) {\n                    <option [ngValue]=\"type.val\">\n                      {{ type.text | translate }}\n                    </option>\n                  }\n                </select>\n              </div>\n            </c8y-form-group>\n          </div>\n        }\n        @if (selectableChartLineTypes?.length !== 0) {\n          <div class=\"col-xs-6 col-sm-4\">\n            <c8y-form-group class=\"form-group-sm\">\n              <label\n                for=\"chartType\"\n                translate\n              >\n                Chart type\n              </label>\n              <div class=\"c8y-select-wrapper\">\n                <select\n                  class=\"form-control\"\n                  formControlName=\"lineType\"\n                >\n                  @for (type of CHART_LINE_TYPES; track type.val) {\n                    <option [ngValue]=\"type.val\">\n                      {{ type.text | translate }}\n                    </option>\n                  }\n                </select>\n                <span></span>\n              </div>\n            </c8y-form-group>\n          </div>\n        }\n        @if (selectableAxisTypes?.length !== 0) {\n          <div class=\"col-xs-6 col-sm-4\">\n            <c8y-form-group class=\"form-group-sm\">\n              <label\n                for=\"yAxis\"\n                translate\n              >\n                Y-axis\n              </label>\n              <div class=\"c8y-select-wrapper\">\n                <select\n                  class=\"form-control\"\n                  formControlName=\"yAxisType\"\n                >\n                  @for (type of AXIS_TYPES; track type.val) {\n                    <option [ngValue]=\"type.val\">\n                      {{ type.text | translate }}\n                    </option>\n                  }\n                </select>\n                <span></span>\n              </div>\n            </c8y-form-group>\n          </div>\n        }\n      </div>\n    </fieldset>\n  }\n  @if (showOnlyDisplayForm) {\n    <fieldset\n      class=\"c8y-fieldset\"\n      formGroupName=\"display\"\n    >\n      <legend>\n        <ng-container *ngTemplateOutlet=\"displayHelpButton\"></ng-container>\n      </legend>\n      <div class=\"tight-grid\">\n        <div class=\"col-xs-6 col-sm-4\">\n          <c8y-form-group class=\"form-group-sm m-b-16\">\n            <div class=\"c8y-select-wrapper\">\n              <select\n                class=\"form-control\"\n                formControlName=\"renderType\"\n              >\n                @for (type of CHART_RENDER_TYPES; track type.val) {\n                  <option [ngValue]=\"type.val\">\n                    {{ type.text | translate }}\n                  </option>\n                }\n              </select>\n            </div>\n          </c8y-form-group>\n        </div>\n      </div>\n    </fieldset>\n  }\n</div>\n\n<ng-template #displayHelpButton>\n  <label>\n    {{ 'Display' | translate }}\n    <button\n      class=\"btn-help btn-help--sm\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{ 'Value displayed when data is aggregated' | translate }}\"\n      placement=\"right\"\n      triggers=\"focus\"\n      type=\"button\"\n    ></button>\n  </label>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
+        ], usesOnChanges: true, ngImport: i0, template: "<div [formGroup]=\"formGroup\">\n  @if (!rawValue?.__template || showFormIfTemplateWasSelected) {\n    @if (formGroup.controls?.label || formGroup.controls?.unit || formGroup.controls?.target) {\n      <fieldset class=\"c8y-fieldset\">\n        <legend translate>Details</legend>\n        <div class=\"row\">\n          @if (formGroup.controls?.label) {\n            <div class=\"col-md-6\">\n              <c8y-form-group class=\"form-group-sm\">\n                <label translate>Label</label>\n                <input\n                  class=\"form-control\"\n                  name=\"label\"\n                  formControlName=\"label\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'Temperature' }\"\n                />\n                <c8y-messages\n                  [show]=\"formGroup.controls.label.touched && formGroup.controls.label.errors\"\n                >\n                  @for (item of customValidationErrorMessages['label'] | keyvalue; track item.key) {\n                    <c8y-message\n                      [name]=\"item.key\"\n                      [text]=\"item.value\"\n                    ></c8y-message>\n                  }\n                </c8y-messages>\n              </c8y-form-group>\n            </div>\n          }\n          @if (formGroup.controls?.unit) {\n            <div class=\"col-md-6\">\n              <c8y-form-group class=\"form-group-sm\">\n                <label translate>Unit</label>\n                <input\n                  class=\"form-control\"\n                  name=\"unit\"\n                  formControlName=\"unit\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: '\u00BAC' }\"\n                />\n                <c8y-messages\n                  [show]=\"formGroup.controls.unit.touched && formGroup.controls.unit.errors\"\n                >\n                  @for (item of customValidationErrorMessages['unit'] | keyvalue; track item.key) {\n                    <c8y-message\n                      [name]=\"item.key\"\n                      [text]=\"item.value\"\n                    ></c8y-message>\n                  }\n                </c8y-messages>\n              </c8y-form-group>\n            </div>\n          }\n          @if (formGroup.controls?.target && showTarget) {\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                class=\"form-group-sm\"\n                [ngClass]=\"{\n                  'has-error':\n                    (range?.touched || formGroup.controls.target.touched) &&\n                    formGroup.controls?.target?.errors\n                }\"\n              >\n                <label translate>Target</label>\n                <input\n                  class=\"form-control\"\n                  name=\"target\"\n                  type=\"number\"\n                  formControlName=\"target\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 25 }\"\n                />\n                <c8y-messages\n                  [show]=\"\n                    (range?.touched || formGroup.controls.target.touched) &&\n                    formGroup.controls.target.errors\n                  \"\n                >\n                  @for (\n                    item of customValidationErrorMessages['target'] | keyvalue;\n                    track item.key\n                  ) {\n                    <c8y-message\n                      [name]=\"item.key\"\n                      [text]=\"item.value\"\n                    ></c8y-message>\n                  }\n                </c8y-messages>\n              </c8y-form-group>\n            </div>\n          }\n        </div>\n      </fieldset>\n    }\n    @if (range && showRange) {\n      <fieldset class=\"c8y-fieldset\">\n        <legend translate>Range</legend>\n        <div\n          class=\"row\"\n          formGroupName=\"range\"\n        >\n          <div class=\"col-md-6\">\n            <c8y-form-group\n              class=\"form-group-sm\"\n              [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.min?.errors }\"\n            >\n              <label translate>Min</label>\n              <input\n                class=\"form-control\"\n                name=\"min\"\n                type=\"number\"\n                formControlName=\"min\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 0 }\"\n              />\n              <c8y-messages [show]=\"range?.touched && range.controls?.min?.errors\"></c8y-messages>\n            </c8y-form-group>\n          </div>\n          <div class=\"col-md-6\">\n            <c8y-form-group\n              class=\"form-group-sm\"\n              [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.max?.errors }\"\n            >\n              <label translate>Max</label>\n              <input\n                class=\"form-control\"\n                name=\"max\"\n                type=\"number\"\n                formControlName=\"max\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n              />\n              <c8y-messages [show]=\"range?.touched && range.controls?.max?.errors\">\n                @for (item of customValidationErrorMessages['max'] | keyvalue; track item.key) {\n                  <c8y-message\n                    [name]=\"item.key\"\n                    [text]=\"item.value\"\n                  ></c8y-message>\n                }\n              </c8y-messages>\n            </c8y-form-group>\n          </div>\n        </div>\n      </fieldset>\n    }\n    @if (yellowRange && showYellowRange) {\n      <fieldset\n        class=\"c8y-fieldset\"\n        formGroupName=\"yellowRange\"\n      >\n        <legend translate>Yellow range</legend>\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <c8y-form-group\n              class=\"form-group-sm\"\n              [ngClass]=\"{\n                'has-error':\n                  (range?.touched || yellowRange?.touched) && yellowRange?.controls?.min?.errors\n              }\"\n            >\n              <label translate>Min</label>\n              <input\n                class=\"form-control\"\n                name=\"min\"\n                type=\"number\"\n                formControlName=\"min\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 50 }\"\n              />\n              <c8y-messages\n                [show]=\"\n                  (range?.touched || yellowRange?.touched) && yellowRange.controls?.min?.errors\n                \"\n              ></c8y-messages>\n            </c8y-form-group>\n          </div>\n\n          <div class=\"col-md-6\">\n            <c8y-form-group\n              class=\"form-group-sm\"\n              [ngClass]=\"{\n                'has-error':\n                  (range?.touched || yellowRange?.touched) && yellowRange?.controls?.max?.errors\n              }\"\n            >\n              <label translate>Max</label>\n              <input\n                class=\"form-control\"\n                name=\"max\"\n                type=\"number\"\n                formControlName=\"max\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n              />\n              <c8y-messages\n                [show]=\"\n                  (range?.touched || yellowRange?.touched) && yellowRange.controls?.max?.errors\n                \"\n              ></c8y-messages>\n            </c8y-form-group>\n          </div>\n        </div>\n      </fieldset>\n    }\n    @if (redRange && showRedRange) {\n      <fieldset\n        class=\"c8y-fieldset\"\n        formGroupName=\"redRange\"\n      >\n        <legend translate>Red range</legend>\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <c8y-form-group\n              class=\"form-group-sm\"\n              [ngClass]=\"{\n                'has-error':\n                  (range?.touched || redRange?.touched) && redRange?.controls?.min?.errors\n              }\"\n            >\n              <label translate>Min</label>\n              <input\n                class=\"form-control\"\n                name=\"min\"\n                type=\"number\"\n                formControlName=\"min\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n              />\n              <c8y-messages\n                [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.min?.errors\"\n              ></c8y-messages>\n            </c8y-form-group>\n          </div>\n\n          <div class=\"col-md-6\">\n            <c8y-form-group\n              class=\"form-group-sm\"\n              [ngClass]=\"{\n                'has-error':\n                  (range?.touched || redRange?.touched) && redRange?.controls?.max?.errors\n              }\"\n            >\n              <label translate>Max</label>\n              <input\n                class=\"form-control\"\n                name=\"max\"\n                type=\"number\"\n                formControlName=\"max\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n              />\n              <c8y-messages\n                [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.max?.errors\"\n              ></c8y-messages>\n            </c8y-form-group>\n          </div>\n        </div>\n      </fieldset>\n    }\n  }\n\n  @if (showChartForm && showAdvancedChartOptions) {\n    <c8y-datapoint-chart-advanced-options\n      [chartFormGroup]=\"chart\"\n      [defaultColors]=\"renderTypeDefaultColors\"\n    ></c8y-datapoint-chart-advanced-options>\n  }\n  @if (showChartForm) {\n    <fieldset\n      class=\"c8y-fieldset\"\n      formGroupName=\"chart\"\n    >\n      <legend translate>Chart</legend>\n      <div class=\"tight-grid\">\n        @if (!showAdvancedChartOptions && selectableChartRenderTypes?.length !== 0) {\n          <div class=\"col-xs-6 col-sm-4\">\n            <c8y-form-group class=\"form-group-sm\">\n              <ng-container *ngTemplateOutlet=\"displayHelpButton\"></ng-container>\n              <div class=\"c8y-select-wrapper\">\n                <select\n                  class=\"form-control\"\n                  formControlName=\"renderType\"\n                >\n                  @for (type of CHART_RENDER_TYPES; track type.val) {\n                    <option [ngValue]=\"type.val\">\n                      {{ type.text | translate }}\n                    </option>\n                  }\n                </select>\n              </div>\n            </c8y-form-group>\n          </div>\n        }\n        @if (selectableChartLineTypes?.length !== 0) {\n          <div class=\"col-xs-6 col-sm-4\">\n            <c8y-form-group class=\"form-group-sm\">\n              <label\n                for=\"chartType\"\n                translate\n              >\n                Chart type\n              </label>\n              <div class=\"c8y-select-wrapper\">\n                <select\n                  class=\"form-control\"\n                  formControlName=\"lineType\"\n                >\n                  @for (type of CHART_LINE_TYPES; track type.val) {\n                    <option [ngValue]=\"type.val\">\n                      {{ type.text | translate }}\n                    </option>\n                  }\n                </select>\n                <span></span>\n              </div>\n            </c8y-form-group>\n          </div>\n        }\n        @if (selectableAxisTypes?.length !== 0) {\n          <div class=\"col-xs-6 col-sm-4\">\n            <c8y-form-group class=\"form-group-sm\">\n              <label\n                for=\"yAxis\"\n                translate\n              >\n                Y-axis\n              </label>\n              <div class=\"c8y-select-wrapper\">\n                <select\n                  class=\"form-control\"\n                  formControlName=\"yAxisType\"\n                >\n                  @for (type of AXIS_TYPES; track type.val) {\n                    <option [ngValue]=\"type.val\">\n                      {{ type.text | translate }}\n                    </option>\n                  }\n                </select>\n                <span></span>\n              </div>\n            </c8y-form-group>\n          </div>\n        }\n      </div>\n    </fieldset>\n  }\n  @if (showOnlyDisplayForm) {\n    <fieldset\n      class=\"c8y-fieldset\"\n      formGroupName=\"display\"\n    >\n      <legend>\n        <ng-container *ngTemplateOutlet=\"displayHelpButton\"></ng-container>\n      </legend>\n      <div class=\"tight-grid\">\n        <div class=\"col-xs-6 col-sm-4\">\n          <c8y-form-group class=\"form-group-sm m-b-16\">\n            <div class=\"c8y-select-wrapper\">\n              <select\n                class=\"form-control\"\n                formControlName=\"renderType\"\n              >\n                @for (type of CHART_RENDER_TYPES; track type.val) {\n                  <option [ngValue]=\"type.val\">\n                    {{ type.text | translate }}\n                  </option>\n                }\n              </select>\n            </div>\n          </c8y-form-group>\n        </div>\n      </div>\n    </fieldset>\n  }\n</div>\n\n<ng-template #displayHelpButton>\n  <label>\n    {{ 'Display' | translate }}\n    <button\n      class=\"btn-help btn-help--sm\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{ 'Value displayed when data is aggregated' | translate }}\"\n      placement=\"right\"\n      triggers=\"focus\"\n      type=\"button\"\n    ></button>\n  </label>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: 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: DatapointChartAdvancedOptionsComponent, selector: "c8y-datapoint-chart-advanced-options", inputs: ["chartFormGroup", "defaultColors"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointAttributesFormComponent, decorators: [{
             type: Component,
@@ -377,8 +643,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         NgTemplateOutlet,
                         PopoverDirective,
                         C8yTranslatePipe,
+                        DatapointChartAdvancedOptionsComponent,
                         KeyValuePipe
-                    ], template: "<div [formGroup]=\"formGroup\">\n  @if (!rawValue?.__template || showFormIfTemplateWasSelected) {\n    @if (formGroup.controls?.label || formGroup.controls?.unit || formGroup.controls?.target) {\n      <fieldset class=\"c8y-fieldset\">\n        <legend translate>Details</legend>\n        <div class=\"row\">\n          @if (formGroup.controls?.label) {\n            <div class=\"col-md-6\">\n              <c8y-form-group class=\"form-group-sm\">\n                <label translate>Label</label>\n                <input\n                  class=\"form-control\"\n                  name=\"label\"\n                  formControlName=\"label\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'Temperature' }\"\n                />\n                <c8y-messages\n                  [show]=\"formGroup.controls.label.touched && formGroup.controls.label.errors\"\n                >\n                  @for (item of customValidationErrorMessages['label'] | keyvalue; track item.key) {\n                    <c8y-message\n                      [name]=\"item.key\"\n                      [text]=\"item.value\"\n                    ></c8y-message>\n                  }\n                </c8y-messages>\n              </c8y-form-group>\n            </div>\n          }\n          @if (formGroup.controls?.unit) {\n            <div class=\"col-md-6\">\n              <c8y-form-group class=\"form-group-sm\">\n                <label translate>Unit</label>\n                <input\n                  class=\"form-control\"\n                  name=\"unit\"\n                  formControlName=\"unit\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: '\u00BAC' }\"\n                />\n                <c8y-messages\n                  [show]=\"formGroup.controls.unit.touched && formGroup.controls.unit.errors\"\n                >\n                  @for (item of customValidationErrorMessages['unit'] | keyvalue; track item.key) {\n                    <c8y-message\n                      [name]=\"item.key\"\n                      [text]=\"item.value\"\n                    ></c8y-message>\n                  }\n                </c8y-messages>\n              </c8y-form-group>\n            </div>\n          }\n          @if (formGroup.controls?.target && showTarget) {\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                class=\"form-group-sm\"\n                [ngClass]=\"{\n                  'has-error':\n                    (range?.touched || formGroup.controls.target.touched) &&\n                    formGroup.controls?.target?.errors\n                }\"\n              >\n                <label translate>Target</label>\n                <input\n                  class=\"form-control\"\n                  name=\"target\"\n                  type=\"number\"\n                  formControlName=\"target\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 25 }\"\n                />\n                <c8y-messages\n                  [show]=\"\n                    (range?.touched || formGroup.controls.target.touched) &&\n                    formGroup.controls.target.errors\n                  \"\n                >\n                  @for (\n                    item of customValidationErrorMessages['target'] | keyvalue;\n                    track item.key\n                  ) {\n                    <c8y-message\n                      [name]=\"item.key\"\n                      [text]=\"item.value\"\n                    ></c8y-message>\n                  }\n                </c8y-messages>\n              </c8y-form-group>\n            </div>\n          }\n        </div>\n      </fieldset>\n    }\n    @if (range && showRange) {\n      <fieldset class=\"c8y-fieldset\">\n        <legend translate>Range</legend>\n        <div\n          class=\"row\"\n          formGroupName=\"range\"\n        >\n          <div class=\"col-md-6\">\n            <c8y-form-group\n              class=\"form-group-sm\"\n              [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.min?.errors }\"\n            >\n              <label translate>Min</label>\n              <input\n                class=\"form-control\"\n                name=\"min\"\n                type=\"number\"\n                formControlName=\"min\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 0 }\"\n              />\n              <c8y-messages [show]=\"range?.touched && range.controls?.min?.errors\"></c8y-messages>\n            </c8y-form-group>\n          </div>\n          <div class=\"col-md-6\">\n            <c8y-form-group\n              class=\"form-group-sm\"\n              [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.max?.errors }\"\n            >\n              <label translate>Max</label>\n              <input\n                class=\"form-control\"\n                name=\"max\"\n                type=\"number\"\n                formControlName=\"max\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n              />\n              <c8y-messages [show]=\"range?.touched && range.controls?.max?.errors\">\n                @for (item of customValidationErrorMessages['max'] | keyvalue; track item.key) {\n                  <c8y-message\n                    [name]=\"item.key\"\n                    [text]=\"item.value\"\n                  ></c8y-message>\n                }\n              </c8y-messages>\n            </c8y-form-group>\n          </div>\n        </div>\n      </fieldset>\n    }\n    @if (yellowRange && showYellowRange) {\n      <fieldset\n        class=\"c8y-fieldset\"\n        formGroupName=\"yellowRange\"\n      >\n        <legend translate>Yellow range</legend>\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <c8y-form-group\n              class=\"form-group-sm\"\n              [ngClass]=\"{\n                'has-error':\n                  (range?.touched || yellowRange?.touched) && yellowRange?.controls?.min?.errors\n              }\"\n            >\n              <label translate>Min</label>\n              <input\n                class=\"form-control\"\n                name=\"min\"\n                type=\"number\"\n                formControlName=\"min\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 50 }\"\n              />\n              <c8y-messages\n                [show]=\"\n                  (range?.touched || yellowRange?.touched) && yellowRange.controls?.min?.errors\n                \"\n              ></c8y-messages>\n            </c8y-form-group>\n          </div>\n\n          <div class=\"col-md-6\">\n            <c8y-form-group\n              class=\"form-group-sm\"\n              [ngClass]=\"{\n                'has-error':\n                  (range?.touched || yellowRange?.touched) && yellowRange?.controls?.max?.errors\n              }\"\n            >\n              <label translate>Max</label>\n              <input\n                class=\"form-control\"\n                name=\"max\"\n                type=\"number\"\n                formControlName=\"max\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n              />\n              <c8y-messages\n                [show]=\"\n                  (range?.touched || yellowRange?.touched) && yellowRange.controls?.max?.errors\n                \"\n              ></c8y-messages>\n            </c8y-form-group>\n          </div>\n        </div>\n      </fieldset>\n    }\n    @if (redRange && showRedRange) {\n      <fieldset\n        class=\"c8y-fieldset\"\n        formGroupName=\"redRange\"\n      >\n        <legend translate>Red range</legend>\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <c8y-form-group\n              class=\"form-group-sm\"\n              [ngClass]=\"{\n                'has-error':\n                  (range?.touched || redRange?.touched) && redRange?.controls?.min?.errors\n              }\"\n            >\n              <label translate>Min</label>\n              <input\n                class=\"form-control\"\n                name=\"min\"\n                type=\"number\"\n                formControlName=\"min\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n              />\n              <c8y-messages\n                [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.min?.errors\"\n              ></c8y-messages>\n            </c8y-form-group>\n          </div>\n\n          <div class=\"col-md-6\">\n            <c8y-form-group\n              class=\"form-group-sm\"\n              [ngClass]=\"{\n                'has-error':\n                  (range?.touched || redRange?.touched) && redRange?.controls?.max?.errors\n              }\"\n            >\n              <label translate>Max</label>\n              <input\n                class=\"form-control\"\n                name=\"max\"\n                type=\"number\"\n                formControlName=\"max\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n              />\n              <c8y-messages\n                [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.max?.errors\"\n              ></c8y-messages>\n            </c8y-form-group>\n          </div>\n        </div>\n      </fieldset>\n    }\n  }\n\n  @if (showChartForm) {\n    <fieldset\n      class=\"c8y-fieldset\"\n      formGroupName=\"chart\"\n    >\n      <legend translate>Chart</legend>\n      <div class=\"tight-grid\">\n        @if (selectableChartRenderTypes?.length !== 0) {\n          <div class=\"col-xs-6 col-sm-4\">\n            <c8y-form-group class=\"form-group-sm\">\n              <ng-container *ngTemplateOutlet=\"displayHelpButton\"></ng-container>\n              <div class=\"c8y-select-wrapper\">\n                <select\n                  class=\"form-control\"\n                  formControlName=\"renderType\"\n                >\n                  @for (type of CHART_RENDER_TYPES; track type.val) {\n                    <option [ngValue]=\"type.val\">\n                      {{ type.text | translate }}\n                    </option>\n                  }\n                </select>\n              </div>\n            </c8y-form-group>\n          </div>\n        }\n        @if (selectableChartLineTypes?.length !== 0) {\n          <div class=\"col-xs-6 col-sm-4\">\n            <c8y-form-group class=\"form-group-sm\">\n              <label\n                for=\"chartType\"\n                translate\n              >\n                Chart type\n              </label>\n              <div class=\"c8y-select-wrapper\">\n                <select\n                  class=\"form-control\"\n                  formControlName=\"lineType\"\n                >\n                  @for (type of CHART_LINE_TYPES; track type.val) {\n                    <option [ngValue]=\"type.val\">\n                      {{ type.text | translate }}\n                    </option>\n                  }\n                </select>\n                <span></span>\n              </div>\n            </c8y-form-group>\n          </div>\n        }\n        @if (selectableAxisTypes?.length !== 0) {\n          <div class=\"col-xs-6 col-sm-4\">\n            <c8y-form-group class=\"form-group-sm\">\n              <label\n                for=\"yAxis\"\n                translate\n              >\n                Y-axis\n              </label>\n              <div class=\"c8y-select-wrapper\">\n                <select\n                  class=\"form-control\"\n                  formControlName=\"yAxisType\"\n                >\n                  @for (type of AXIS_TYPES; track type.val) {\n                    <option [ngValue]=\"type.val\">\n                      {{ type.text | translate }}\n                    </option>\n                  }\n                </select>\n                <span></span>\n              </div>\n            </c8y-form-group>\n          </div>\n        }\n      </div>\n    </fieldset>\n  }\n  @if (showOnlyDisplayForm) {\n    <fieldset\n      class=\"c8y-fieldset\"\n      formGroupName=\"display\"\n    >\n      <legend>\n        <ng-container *ngTemplateOutlet=\"displayHelpButton\"></ng-container>\n      </legend>\n      <div class=\"tight-grid\">\n        <div class=\"col-xs-6 col-sm-4\">\n          <c8y-form-group class=\"form-group-sm m-b-16\">\n            <div class=\"c8y-select-wrapper\">\n              <select\n                class=\"form-control\"\n                formControlName=\"renderType\"\n              >\n                @for (type of CHART_RENDER_TYPES; track type.val) {\n                  <option [ngValue]=\"type.val\">\n                    {{ type.text | translate }}\n                  </option>\n                }\n              </select>\n            </div>\n          </c8y-form-group>\n        </div>\n      </div>\n    </fieldset>\n  }\n</div>\n\n<ng-template #displayHelpButton>\n  <label>\n    {{ 'Display' | translate }}\n    <button\n      class=\"btn-help btn-help--sm\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{ 'Value displayed when data is aggregated' | translate }}\"\n      placement=\"right\"\n      triggers=\"focus\"\n      type=\"button\"\n    ></button>\n  </label>\n</ng-template>\n" }]
+                    ], template: "<div [formGroup]=\"formGroup\">\n  @if (!rawValue?.__template || showFormIfTemplateWasSelected) {\n    @if (formGroup.controls?.label || formGroup.controls?.unit || formGroup.controls?.target) {\n      <fieldset class=\"c8y-fieldset\">\n        <legend translate>Details</legend>\n        <div class=\"row\">\n          @if (formGroup.controls?.label) {\n            <div class=\"col-md-6\">\n              <c8y-form-group class=\"form-group-sm\">\n                <label translate>Label</label>\n                <input\n                  class=\"form-control\"\n                  name=\"label\"\n                  formControlName=\"label\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'Temperature' }\"\n                />\n                <c8y-messages\n                  [show]=\"formGroup.controls.label.touched && formGroup.controls.label.errors\"\n                >\n                  @for (item of customValidationErrorMessages['label'] | keyvalue; track item.key) {\n                    <c8y-message\n                      [name]=\"item.key\"\n                      [text]=\"item.value\"\n                    ></c8y-message>\n                  }\n                </c8y-messages>\n              </c8y-form-group>\n            </div>\n          }\n          @if (formGroup.controls?.unit) {\n            <div class=\"col-md-6\">\n              <c8y-form-group class=\"form-group-sm\">\n                <label translate>Unit</label>\n                <input\n                  class=\"form-control\"\n                  name=\"unit\"\n                  formControlName=\"unit\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: '\u00BAC' }\"\n                />\n                <c8y-messages\n                  [show]=\"formGroup.controls.unit.touched && formGroup.controls.unit.errors\"\n                >\n                  @for (item of customValidationErrorMessages['unit'] | keyvalue; track item.key) {\n                    <c8y-message\n                      [name]=\"item.key\"\n                      [text]=\"item.value\"\n                    ></c8y-message>\n                  }\n                </c8y-messages>\n              </c8y-form-group>\n            </div>\n          }\n          @if (formGroup.controls?.target && showTarget) {\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                class=\"form-group-sm\"\n                [ngClass]=\"{\n                  'has-error':\n                    (range?.touched || formGroup.controls.target.touched) &&\n                    formGroup.controls?.target?.errors\n                }\"\n              >\n                <label translate>Target</label>\n                <input\n                  class=\"form-control\"\n                  name=\"target\"\n                  type=\"number\"\n                  formControlName=\"target\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 25 }\"\n                />\n                <c8y-messages\n                  [show]=\"\n                    (range?.touched || formGroup.controls.target.touched) &&\n                    formGroup.controls.target.errors\n                  \"\n                >\n                  @for (\n                    item of customValidationErrorMessages['target'] | keyvalue;\n                    track item.key\n                  ) {\n                    <c8y-message\n                      [name]=\"item.key\"\n                      [text]=\"item.value\"\n                    ></c8y-message>\n                  }\n                </c8y-messages>\n              </c8y-form-group>\n            </div>\n          }\n        </div>\n      </fieldset>\n    }\n    @if (range && showRange) {\n      <fieldset class=\"c8y-fieldset\">\n        <legend translate>Range</legend>\n        <div\n          class=\"row\"\n          formGroupName=\"range\"\n        >\n          <div class=\"col-md-6\">\n            <c8y-form-group\n              class=\"form-group-sm\"\n              [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.min?.errors }\"\n            >\n              <label translate>Min</label>\n              <input\n                class=\"form-control\"\n                name=\"min\"\n                type=\"number\"\n                formControlName=\"min\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 0 }\"\n              />\n              <c8y-messages [show]=\"range?.touched && range.controls?.min?.errors\"></c8y-messages>\n            </c8y-form-group>\n          </div>\n          <div class=\"col-md-6\">\n            <c8y-form-group\n              class=\"form-group-sm\"\n              [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.max?.errors }\"\n            >\n              <label translate>Max</label>\n              <input\n                class=\"form-control\"\n                name=\"max\"\n                type=\"number\"\n                formControlName=\"max\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n              />\n              <c8y-messages [show]=\"range?.touched && range.controls?.max?.errors\">\n                @for (item of customValidationErrorMessages['max'] | keyvalue; track item.key) {\n                  <c8y-message\n                    [name]=\"item.key\"\n                    [text]=\"item.value\"\n                  ></c8y-message>\n                }\n              </c8y-messages>\n            </c8y-form-group>\n          </div>\n        </div>\n      </fieldset>\n    }\n    @if (yellowRange && showYellowRange) {\n      <fieldset\n        class=\"c8y-fieldset\"\n        formGroupName=\"yellowRange\"\n      >\n        <legend translate>Yellow range</legend>\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <c8y-form-group\n              class=\"form-group-sm\"\n              [ngClass]=\"{\n                'has-error':\n                  (range?.touched || yellowRange?.touched) && yellowRange?.controls?.min?.errors\n              }\"\n            >\n              <label translate>Min</label>\n              <input\n                class=\"form-control\"\n                name=\"min\"\n                type=\"number\"\n                formControlName=\"min\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 50 }\"\n              />\n              <c8y-messages\n                [show]=\"\n                  (range?.touched || yellowRange?.touched) && yellowRange.controls?.min?.errors\n                \"\n              ></c8y-messages>\n            </c8y-form-group>\n          </div>\n\n          <div class=\"col-md-6\">\n            <c8y-form-group\n              class=\"form-group-sm\"\n              [ngClass]=\"{\n                'has-error':\n                  (range?.touched || yellowRange?.touched) && yellowRange?.controls?.max?.errors\n              }\"\n            >\n              <label translate>Max</label>\n              <input\n                class=\"form-control\"\n                name=\"max\"\n                type=\"number\"\n                formControlName=\"max\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n              />\n              <c8y-messages\n                [show]=\"\n                  (range?.touched || yellowRange?.touched) && yellowRange.controls?.max?.errors\n                \"\n              ></c8y-messages>\n            </c8y-form-group>\n          </div>\n        </div>\n      </fieldset>\n    }\n    @if (redRange && showRedRange) {\n      <fieldset\n        class=\"c8y-fieldset\"\n        formGroupName=\"redRange\"\n      >\n        <legend translate>Red range</legend>\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <c8y-form-group\n              class=\"form-group-sm\"\n              [ngClass]=\"{\n                'has-error':\n                  (range?.touched || redRange?.touched) && redRange?.controls?.min?.errors\n              }\"\n            >\n              <label translate>Min</label>\n              <input\n                class=\"form-control\"\n                name=\"min\"\n                type=\"number\"\n                formControlName=\"min\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n              />\n              <c8y-messages\n                [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.min?.errors\"\n              ></c8y-messages>\n            </c8y-form-group>\n          </div>\n\n          <div class=\"col-md-6\">\n            <c8y-form-group\n              class=\"form-group-sm\"\n              [ngClass]=\"{\n                'has-error':\n                  (range?.touched || redRange?.touched) && redRange?.controls?.max?.errors\n              }\"\n            >\n              <label translate>Max</label>\n              <input\n                class=\"form-control\"\n                name=\"max\"\n                type=\"number\"\n                formControlName=\"max\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n              />\n              <c8y-messages\n                [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.max?.errors\"\n              ></c8y-messages>\n            </c8y-form-group>\n          </div>\n        </div>\n      </fieldset>\n    }\n  }\n\n  @if (showChartForm && showAdvancedChartOptions) {\n    <c8y-datapoint-chart-advanced-options\n      [chartFormGroup]=\"chart\"\n      [defaultColors]=\"renderTypeDefaultColors\"\n    ></c8y-datapoint-chart-advanced-options>\n  }\n  @if (showChartForm) {\n    <fieldset\n      class=\"c8y-fieldset\"\n      formGroupName=\"chart\"\n    >\n      <legend translate>Chart</legend>\n      <div class=\"tight-grid\">\n        @if (!showAdvancedChartOptions && selectableChartRenderTypes?.length !== 0) {\n          <div class=\"col-xs-6 col-sm-4\">\n            <c8y-form-group class=\"form-group-sm\">\n              <ng-container *ngTemplateOutlet=\"displayHelpButton\"></ng-container>\n              <div class=\"c8y-select-wrapper\">\n                <select\n                  class=\"form-control\"\n                  formControlName=\"renderType\"\n                >\n                  @for (type of CHART_RENDER_TYPES; track type.val) {\n                    <option [ngValue]=\"type.val\">\n                      {{ type.text | translate }}\n                    </option>\n                  }\n                </select>\n              </div>\n            </c8y-form-group>\n          </div>\n        }\n        @if (selectableChartLineTypes?.length !== 0) {\n          <div class=\"col-xs-6 col-sm-4\">\n            <c8y-form-group class=\"form-group-sm\">\n              <label\n                for=\"chartType\"\n                translate\n              >\n                Chart type\n              </label>\n              <div class=\"c8y-select-wrapper\">\n                <select\n                  class=\"form-control\"\n                  formControlName=\"lineType\"\n                >\n                  @for (type of CHART_LINE_TYPES; track type.val) {\n                    <option [ngValue]=\"type.val\">\n                      {{ type.text | translate }}\n                    </option>\n                  }\n                </select>\n                <span></span>\n              </div>\n            </c8y-form-group>\n          </div>\n        }\n        @if (selectableAxisTypes?.length !== 0) {\n          <div class=\"col-xs-6 col-sm-4\">\n            <c8y-form-group class=\"form-group-sm\">\n              <label\n                for=\"yAxis\"\n                translate\n              >\n                Y-axis\n              </label>\n              <div class=\"c8y-select-wrapper\">\n                <select\n                  class=\"form-control\"\n                  formControlName=\"yAxisType\"\n                >\n                  @for (type of AXIS_TYPES; track type.val) {\n                    <option [ngValue]=\"type.val\">\n                      {{ type.text | translate }}\n                    </option>\n                  }\n                </select>\n                <span></span>\n              </div>\n            </c8y-form-group>\n          </div>\n        }\n      </div>\n    </fieldset>\n  }\n  @if (showOnlyDisplayForm) {\n    <fieldset\n      class=\"c8y-fieldset\"\n      formGroupName=\"display\"\n    >\n      <legend>\n        <ng-container *ngTemplateOutlet=\"displayHelpButton\"></ng-container>\n      </legend>\n      <div class=\"tight-grid\">\n        <div class=\"col-xs-6 col-sm-4\">\n          <c8y-form-group class=\"form-group-sm m-b-16\">\n            <div class=\"c8y-select-wrapper\">\n              <select\n                class=\"form-control\"\n                formControlName=\"renderType\"\n              >\n                @for (type of CHART_RENDER_TYPES; track type.val) {\n                  <option [ngValue]=\"type.val\">\n                    {{ type.text | translate }}\n                  </option>\n                }\n              </select>\n            </div>\n          </c8y-form-group>\n        </div>\n      </div>\n    </fieldset>\n  }\n</div>\n\n<ng-template #displayHelpButton>\n  <label>\n    {{ 'Display' | translate }}\n    <button\n      class=\"btn-help btn-help--sm\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{ 'Value displayed when data is aggregated' | translate }}\"\n      placement=\"right\"\n      triggers=\"focus\"\n      type=\"button\"\n    ></button>\n  </label>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: DatapointAttributesFormValidationService }], propDecorators: { selectableChartRenderTypes: [{
                 type: Input
             }], selectableChartLineTypes: [{
@@ -607,13 +874,13 @@ class DatapointLibraryService {
             return [];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointLibraryService, deps: [{ token: i1.InventoryService }, { token: i2$1.AppStateService }, { token: i1.MeasurementService }, { token: i2$1.ColorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointLibraryService, deps: [{ token: i1$1.InventoryService }, { token: i2.AppStateService }, { token: i1$1.MeasurementService }, { token: i2.ColorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointLibraryService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointLibraryService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1.InventoryService }, { type: i2$1.AppStateService }, { type: i1.MeasurementService }, { type: i2$1.ColorService }] });
+        }], ctorParameters: () => [{ type: i1$1.InventoryService }, { type: i2.AppStateService }, { type: i1$1.MeasurementService }, { type: i2.ColorService }] });
 
 class DatapointTemplatePopoverComponent {
     constructor() {
@@ -800,7 +1067,7 @@ class DatapointSelectorListItemComponent {
         delete obj.details;
         return obj;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointSelectorListItemComponent, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointSelectorListItemComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DatapointSelectorListItemComponent, isStandalone: true, selector: "c8y-datapoint-selector-list-item", inputs: { defaultFormOptions: "defaultFormOptions", isSelected: "isSelected", isCollapsed: "isCollapsed", addButtonType: "addButtonType", editable: "editable", showActiveToggle: "showActiveToggle", activeToggleDisabled: "activeToggleDisabled", showOptions: "showOptions", datapointLibraryEntries: "datapointLibraryEntries", actions: "actions", optionToRemove: "optionToRemove", hasUnlinkTemplateOption: "hasUnlinkTemplateOption", colorPickerDisabled: "colorPickerDisabled", disableTypeaheadIfSelected: "disableTypeaheadIfSelected", highlightText: "highlightText" }, outputs: { added: "added", removed: "removed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -812,7 +1079,7 @@ class DatapointSelectorListItemComponent {
                 useExisting: forwardRef(() => DatapointSelectorListItemComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "dragHandle", first: true, predicate: ListItemDragHandleComponent, descendants: true }], ngImport: i0, template: "<c8y-li\n  class=\"c8y-list__item__collapse--container-small\"\n  [formGroup]=\"formGroup\"\n  #li\n>\n  <c8y-li-drag-handle><ng-content select=\"c8y-li-drag-handle\"></ng-content></c8y-li-drag-handle>\n  @if (showActiveToggle) {\n    <c8y-li-checkbox\n      class=\"a-s-center p-r-0\"\n      [displayAsSwitch]=\"true\"\n      formControlName=\"__active\"\n      (click)=\"$event.stopPropagation()\"\n    ></c8y-li-checkbox>\n  }\n\n  <div class=\"d-flex a-i-center\">\n    <div\n      class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-16\"\n      [title]=\"'Change color' | translate\"\n    >\n      <div class=\"c8y-colorpicker\">\n        <input\n          [attr.aria-label]=\"'Color' | translate\"\n          type=\"color\"\n          formControlName=\"color\"\n          (click)=\"$event.stopPropagation()\"\n        />\n        <span [style.background-color]=\"formGroup.value.color\"></span>\n      </div>\n    </div>\n    <button\n      class=\"btn-clean data-point-label text-truncate\"\n      [attr.aria-expanded]=\"!li.collapsed\"\n      type=\"button\"\n      (click)=\"li.collapsed = !li.collapsed\"\n    >\n      <span\n        class=\"text-truncate\"\n        [title]=\"formGroup.value.details?.label\"\n      >\n        <c8y-highlight\n          [text]=\"formGroup.value.details?.label\"\n          [pattern]=\"highlightText\"\n          [shouldTrimPattern]=\"true\"\n        ></c8y-highlight>\n      </span>\n      @if (formGroup.value.__target) {\n        <small class=\"text-truncate text-muted icon-flex\">\n          <i c8yIcon=\"exchange\"></i>\n          <span class=\"text-truncate\">{{ formGroup.value.__target.name }}</span>\n        </small>\n      }\n    </button>\n\n    @if (!(isValid$ | async)) {\n      @let defaultErrorMessage =\n        'Some entries are invalid. Check the input fields with red borders.' | translate;\n      <button\n        class=\"btn btn-dot btn-dot--danger m-l-auto m-r-4\"\n        [attr.aria-label]=\"'Invalid' | translate\"\n        [popover]=\"errorMessage ? errorMessage : defaultErrorMessage\"\n        placement=\"left\"\n        triggers=\"focus\"\n        container=\"body\"\n        type=\"button\"\n      >\n        <i c8yIcon=\"exclamation-circle\"></i>\n      </button>\n    }\n    @if (addButtonType === AddButtonTypes.addRemove) {\n      <div class=\"m-l-auto a-s-center p-r-4\">\n        @if (isSelected) {\n          <button\n            class=\"btn btn-dot btn-dot--danger\"\n            [attr.aria-label]=\"'Remove' | translate\"\n            [tooltip]=\"'Remove from selected data points' | translate\"\n            type=\"button\"\n            [delay]=\"500\"\n            (click)=\"addOrRemoveItem()\"\n            [attr.data-cy]=\"'datapoint-selector-list-item--remove-datapoint-button'\"\n          >\n            <i\n              class=\"icon-20\"\n              c8yIcon=\"minus-circle\"\n            ></i>\n          </button>\n        }\n        @if (!isSelected) {\n          <button\n            class=\"btn btn-dot text-primary\"\n            [attr.aria-label]=\"'Add to selected data points' | translate\"\n            [tooltip]=\"'Add to selected data points' | translate\"\n            type=\"button\"\n            [delay]=\"500\"\n            [disabled]=\"!(isValid$ | async)\"\n            (click)=\"addOrRemoveItem()\"\n            [attr.data-cy]=\"'datapoint-selector-list-item--add-datapoint-button'\"\n          >\n            <i\n              class=\"text-primary icon-20\"\n              c8yIcon=\"plus-circle\"\n            ></i>\n          </button>\n        }\n      </div>\n    }\n    @if (addButtonType === AddButtonTypes.select) {\n      <button\n        class=\"btn btn-default btn-sm m-l-auto\"\n        [attr.aria-label]=\"'Select' | translate\"\n        [tooltip]=\"'Select data point' | translate\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"addOrRemoveItem()\"\n      >\n        {{ 'Select' | translate }}\n      </button>\n    }\n\n    @if (optionToRemove && !actions?.length) {\n      <button\n        class=\"m-l-auto showOnHover btn btn-dot btn-dot--danger m-r-4\"\n        [attr.aria-label]=\"'Remove from list' | translate\"\n        [tooltip]=\"'Remove from list' | translate\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"remove()\"\n      >\n        <i c8yIcon=\"minus-circle\"></i>\n      </button>\n    }\n  </div>\n\n  @if (optionToRemove && actions?.length) {\n    <c8y-li-action\n      [icon]=\"'minus-circle'\"\n      [label]=\"'Remove from list' | translate\"\n      (click)=\"remove()\"\n    ></c8y-li-action>\n  }\n  @for (action of actions; track action) {\n    <c8y-li-action\n      [icon]=\"action.icon\"\n      [label]=\"action.label\"\n      (click)=\"action.callback(formGroup.value)\"\n    ></c8y-li-action>\n  }\n  @if (editable) {\n    <c8y-li-collapse>\n      <div class=\"data-point-details\">\n        <ul class=\"list-unstyled small m-b-16\">\n          <li class=\"p-t-4 p-b-4 d-flex separator-top-bottom\">\n            <label\n              class=\"small m-b-0 m-r-8 a-s-start text-muted\"\n              translate\n            >\n              Fragment\n            </label>\n            <span\n              class=\"m-l-auto text-truncate\"\n              title=\"{{ formGroup.value.fragment }}\"\n            >\n              <c8y-highlight\n                [text]=\"formGroup.value.fragment\"\n                [pattern]=\"highlightText\"\n                [shouldTrimPattern]=\"true\"\n              ></c8y-highlight>\n            </span>\n          </li>\n          <li class=\"p-t-4 p-b-4 d-flex separator-bottom\">\n            <label\n              class=\"small m-b-0 m-r-8 a-s-start text-muted\"\n              translate\n            >\n              Series\n            </label>\n            <span\n              class=\"m-l-auto text-truncate\"\n              title=\"{{ formGroup.value.series }}\"\n            >\n              <c8y-highlight\n                [text]=\"formGroup.value.series\"\n                [pattern]=\"highlightText\"\n                [shouldTrimPattern]=\"true\"\n              ></c8y-highlight>\n            </span>\n          </li>\n        </ul>\n        @if (datapointLibraryEntries && datapointLibraryEntries | async; as libraryEntries) {\n          <div class=\"form-group form-group-sm\">\n            <label>\n              {{ 'Data point template' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"datapointHintPopoverTemplate\"\n                placement=\"top\"\n                triggers=\"focus\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n              ></button>\n            </label>\n\n            <ng-template #datapointHintPopoverTemplate>\n              {{\n                'Using a data point template sets color, label, unit and ranges. Removing the template allows you to set the values manually.'\n                  | translate\n              }}\n            </ng-template>\n            <div class=\"input-group input-group-sm\">\n              @if (datapointLibraryEntries) {\n                <c8y-typeahead\n                  class=\"flex-grow\"\n                  [placeholder]=\"'No template' | translate\"\n                  [ngModel]=\"formGroup.value.__template ? formGroup.value.details : undefined\"\n                  [ngModelOptions]=\"{ standalone: true }\"\n                  (onSearch)=\"setPipe($event)\"\n                  [displayProperty]=\"'label'\"\n                  [hideNew]=\"true\"\n                  [disabled]=\"isSelected && disableTypeaheadIfSelected\"\n                >\n                  <c8y-li\n                    class=\"p-l-8 p-r-8 c8y-list__item--link interact\"\n                    *c8yFor=\"\n                      let item of datapointLibraryEntries;\n                      loadMore: 'auto';\n                      pipe: filterPipe;\n                      notFound: notFoundTemplate\n                    \"\n                    (click)=\"dataPointTemplateSelected(item)\"\n                    [active]=\"formGroup.value.__template === item.id\"\n                    [attr.role]=\"'menuitem'\"\n                  >\n                    <c8y-highlight\n                      [text]=\"item.c8y_Kpi?.label\"\n                      [pattern]=\"pattern\"\n                    ></c8y-highlight>\n                    <c8y-li-icon\n                      icon=\"circle\"\n                      [style.color]=\"item.c8y_Kpi?.color\"\n                    ></c8y-li-icon>\n                  </c8y-li>\n                  <ng-template #notFoundTemplate>\n                    @if (pattern.length > 0) {\n                      <c8y-li class=\"bg-level-2 p-8\">\n                        <span>{{ 'No match found.' | translate }}</span>\n                      </c8y-li>\n                    }\n                  </ng-template>\n                </c8y-typeahead>\n              }\n              <div class=\"input-group-btn\">\n                @if (formGroup.value.__template) {\n                  <button\n                    class=\"btn btn-default\"\n                    [attr.aria-label]=\"'Info' | translate\"\n                    [popover]=\"datapointOverviewPopoverTemplate\"\n                    placement=\"left\"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                  >\n                    <i\n                      class=\"text-info\"\n                      c8yIcon=\"info\"\n                    ></i>\n                  </button>\n                }\n              </div>\n              <div class=\"input-group-btn\">\n                @if (formGroup.value.__template && hasUnlinkTemplateOption) {\n                  <button\n                    class=\"btn btn-default\"\n                    [attr.aria-label]=\"'Unlink data point template' | translate\"\n                    tooltip=\"{{ 'Unlink data point template' | translate }}\"\n                    placement=\"left\"\n                    container=\"body\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    [adaptivePosition]=\"false\"\n                    (click)=\"unlinkDatapointTemplate()\"\n                  >\n                    <i c8yIcon=\"unlink\"></i>\n                  </button>\n                }\n              </div>\n            </div>\n          </div>\n        }\n        <ng-template #datapointOverviewPopoverTemplate>\n          <c8y-datapoint-template-popover\n            [datapoint]=\"formGroup.value.details\"\n          ></c8y-datapoint-template-popover>\n        </ng-template>\n        @if (defaultFormOptions) {\n          <c8y-datapoint-attributes-form\n            [showTarget]=\"defaultFormOptions.showTarget\"\n            [showRange]=\"defaultFormOptions.showRange\"\n            [showYellowRange]=\"defaultFormOptions.showYellowRange\"\n            [showRedRange]=\"defaultFormOptions.showRedRange\"\n            [showChart]=\"defaultFormOptions.showChart\"\n            [showFormIfTemplateWasSelected]=\"defaultFormOptions.showFormIfTemplateWasSelected\"\n            [selectableChartRenderTypes]=\"defaultFormOptions.selectableChartRenderTypes\"\n            [selectableChartLineTypes]=\"defaultFormOptions.selectableChartLineTypes\"\n            [selectableAxisTypes]=\"defaultFormOptions.selectableAxisTypes\"\n            [showAdvancedChartOptions]=\"defaultFormOptions.showAdvancedChartOptions\"\n            [showErrorsImmediately]=\"true\"\n            formControlName=\"details\"\n          ></c8y-datapoint-attributes-form>\n        }\n      </div>\n    </c8y-li-collapse>\n  }\n</c8y-li>\n", dependencies: [{ kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ListItemDragHandleComponent, selector: "c8y-list-item-drag-handle, c8y-li-drag-handle" }, { kind: "component", type: ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: 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: "component", type: ListItemActionComponent, selector: "c8y-list-item-action, c8y-li-action", inputs: ["label", "icon", "disabled"], outputs: ["click"] }, { kind: "component", type: ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "title", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: DatapointTemplatePopoverComponent, selector: "c8y-datapoint-template-popover", inputs: ["datapoint", "attributes"] }, { kind: "component", type: DatapointAttributesFormComponent, selector: "c8y-datapoint-attributes-form", inputs: ["selectableChartRenderTypes", "selectableChartLineTypes", "selectableAxisTypes", "showTarget", "showRange", "showYellowRange", "showRedRange", "showChart", "showFormIfTemplateWasSelected", "showAdvancedChartOptions", "showErrorsImmediately"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+        ], queries: [{ propertyName: "dragHandle", first: true, predicate: ListItemDragHandleComponent, descendants: true }], ngImport: i0, template: "<c8y-li\n  class=\"c8y-list__item__collapse--container-small\"\n  [formGroup]=\"formGroup\"\n  #li\n>\n  <c8y-li-drag-handle><ng-content select=\"c8y-li-drag-handle\"></ng-content></c8y-li-drag-handle>\n  @if (showActiveToggle) {\n    <c8y-li-checkbox\n      class=\"a-s-center p-r-0\"\n      [displayAsSwitch]=\"true\"\n      formControlName=\"__active\"\n      (click)=\"$event.stopPropagation()\"\n    ></c8y-li-checkbox>\n  }\n\n  <div class=\"d-flex a-i-center\">\n    <div\n      class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-16\"\n      [title]=\"'Change color' | translate\"\n    >\n      <div class=\"c8y-colorpicker\">\n        <input\n          [attr.aria-label]=\"'Color' | translate\"\n          type=\"color\"\n          formControlName=\"color\"\n          (click)=\"$event.stopPropagation()\"\n        />\n        <span [style.background-color]=\"formGroup.value.color\"></span>\n      </div>\n    </div>\n    <button\n      class=\"btn-clean data-point-label text-truncate\"\n      [attr.aria-expanded]=\"!li.collapsed\"\n      type=\"button\"\n      (click)=\"li.collapsed = !li.collapsed\"\n    >\n      <span\n        class=\"text-truncate\"\n        [title]=\"formGroup.value.details?.label\"\n      >\n        <c8y-highlight\n          [text]=\"formGroup.value.details?.label\"\n          [pattern]=\"highlightText\"\n          [shouldTrimPattern]=\"true\"\n        ></c8y-highlight>\n      </span>\n      @if (formGroup.value.__target) {\n        <small class=\"text-truncate text-muted icon-flex\">\n          <i c8yIcon=\"exchange\"></i>\n          <span class=\"text-truncate\">{{ formGroup.value.__target.name }}</span>\n        </small>\n      }\n    </button>\n\n    @if (!(isValid$ | async)) {\n      @let defaultErrorMessage =\n        'Some entries are invalid. Check the input fields with red borders.' | translate;\n      <button\n        class=\"btn btn-dot btn-dot--danger m-l-auto m-r-4\"\n        [attr.aria-label]=\"'Invalid' | translate\"\n        [popover]=\"errorMessage ? errorMessage : defaultErrorMessage\"\n        placement=\"left\"\n        triggers=\"focus\"\n        container=\"body\"\n        type=\"button\"\n      >\n        <i c8yIcon=\"exclamation-circle\"></i>\n      </button>\n    }\n    @if (addButtonType === AddButtonTypes.addRemove) {\n      <div class=\"m-l-auto a-s-center p-r-4\">\n        @if (isSelected) {\n          <button\n            class=\"btn btn-dot btn-dot--danger\"\n            [attr.aria-label]=\"'Remove' | translate\"\n            [tooltip]=\"'Remove from selected data points' | translate\"\n            type=\"button\"\n            [delay]=\"500\"\n            (click)=\"addOrRemoveItem()\"\n            [attr.data-cy]=\"'datapoint-selector-list-item--remove-datapoint-button'\"\n          >\n            <i\n              class=\"icon-20\"\n              c8yIcon=\"minus-circle\"\n            ></i>\n          </button>\n        }\n        @if (!isSelected) {\n          <button\n            class=\"btn btn-dot text-primary\"\n            [attr.aria-label]=\"'Add to selected data points' | translate\"\n            [tooltip]=\"'Add to selected data points' | translate\"\n            type=\"button\"\n            [delay]=\"500\"\n            [disabled]=\"!(isValid$ | async)\"\n            (click)=\"addOrRemoveItem()\"\n            [attr.data-cy]=\"'datapoint-selector-list-item--add-datapoint-button'\"\n          >\n            <i\n              class=\"text-primary icon-20\"\n              c8yIcon=\"plus-circle\"\n            ></i>\n          </button>\n        }\n      </div>\n    }\n    @if (addButtonType === AddButtonTypes.select) {\n      <button\n        class=\"btn btn-default btn-sm m-l-auto\"\n        [attr.aria-label]=\"'Select' | translate\"\n        [tooltip]=\"'Select data point' | translate\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"addOrRemoveItem()\"\n      >\n        {{ 'Select' | translate }}\n      </button>\n    }\n\n    @if (optionToRemove && !actions?.length) {\n      <button\n        class=\"m-l-auto showOnHover btn btn-dot btn-dot--danger m-r-4\"\n        [attr.aria-label]=\"'Remove from list' | translate\"\n        [tooltip]=\"'Remove from list' | translate\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"remove()\"\n      >\n        <i c8yIcon=\"minus-circle\"></i>\n      </button>\n    }\n  </div>\n\n  @if (optionToRemove && actions?.length) {\n    <c8y-li-action\n      [icon]=\"'minus-circle'\"\n      [label]=\"'Remove from list' | translate\"\n      (click)=\"remove()\"\n    ></c8y-li-action>\n  }\n  @for (action of actions; track action) {\n    <c8y-li-action\n      [icon]=\"action.icon\"\n      [label]=\"action.label\"\n      (click)=\"action.callback(formGroup.value)\"\n    ></c8y-li-action>\n  }\n  @if (editable) {\n    <c8y-li-collapse>\n      <div class=\"data-point-details\">\n        <ul class=\"list-unstyled small m-b-16\">\n          <li class=\"p-t-4 p-b-4 d-flex separator-top-bottom\">\n            <label\n              class=\"small m-b-0 m-r-8 a-s-start text-muted\"\n              translate\n            >\n              Fragment\n            </label>\n            <span\n              class=\"m-l-auto text-truncate\"\n              title=\"{{ formGroup.value.fragment }}\"\n            >\n              <c8y-highlight\n                [text]=\"formGroup.value.fragment\"\n                [pattern]=\"highlightText\"\n                [shouldTrimPattern]=\"true\"\n              ></c8y-highlight>\n            </span>\n          </li>\n          <li class=\"p-t-4 p-b-4 d-flex separator-bottom\">\n            <label\n              class=\"small m-b-0 m-r-8 a-s-start text-muted\"\n              translate\n            >\n              Series\n            </label>\n            <span\n              class=\"m-l-auto text-truncate\"\n              title=\"{{ formGroup.value.series }}\"\n            >\n              <c8y-highlight\n                [text]=\"formGroup.value.series\"\n                [pattern]=\"highlightText\"\n                [shouldTrimPattern]=\"true\"\n              ></c8y-highlight>\n            </span>\n          </li>\n        </ul>\n        @if (datapointLibraryEntries && datapointLibraryEntries | async; as libraryEntries) {\n          <div class=\"form-group form-group-sm\">\n            <label>\n              {{ 'Data point template' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"datapointHintPopoverTemplate\"\n                placement=\"top\"\n                triggers=\"focus\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n              ></button>\n            </label>\n\n            <ng-template #datapointHintPopoverTemplate>\n              {{\n                'Using a data point template sets color, label, unit and ranges. Removing the template allows you to set the values manually.'\n                  | translate\n              }}\n            </ng-template>\n            <div class=\"input-group input-group-sm\">\n              @if (datapointLibraryEntries) {\n                <c8y-typeahead\n                  class=\"flex-grow\"\n                  [placeholder]=\"'No template' | translate\"\n                  [ngModel]=\"formGroup.value.__template ? formGroup.value.details : undefined\"\n                  [ngModelOptions]=\"{ standalone: true }\"\n                  (onSearch)=\"setPipe($event)\"\n                  [displayProperty]=\"'label'\"\n                  [hideNew]=\"true\"\n                  [disabled]=\"isSelected && disableTypeaheadIfSelected\"\n                >\n                  <c8y-li\n                    class=\"p-l-8 p-r-8 c8y-list__item--link interact\"\n                    *c8yFor=\"\n                      let item of datapointLibraryEntries;\n                      loadMore: 'auto';\n                      pipe: filterPipe;\n                      notFound: notFoundTemplate\n                    \"\n                    (click)=\"dataPointTemplateSelected(item)\"\n                    [active]=\"formGroup.value.__template === item.id\"\n                    [attr.role]=\"'menuitem'\"\n                  >\n                    <c8y-highlight\n                      [text]=\"item.c8y_Kpi?.label\"\n                      [pattern]=\"pattern\"\n                    ></c8y-highlight>\n                    <c8y-li-icon\n                      icon=\"circle\"\n                      [style.color]=\"item.c8y_Kpi?.color\"\n                    ></c8y-li-icon>\n                  </c8y-li>\n                  <ng-template #notFoundTemplate>\n                    @if (pattern.length > 0) {\n                      <c8y-li class=\"bg-level-2 p-8\">\n                        <span>{{ 'No match found.' | translate }}</span>\n                      </c8y-li>\n                    }\n                  </ng-template>\n                </c8y-typeahead>\n              }\n              <div class=\"input-group-btn\">\n                @if (formGroup.value.__template) {\n                  <button\n                    class=\"btn btn-default\"\n                    [attr.aria-label]=\"'Info' | translate\"\n                    [popover]=\"datapointOverviewPopoverTemplate\"\n                    placement=\"left\"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                  >\n                    <i\n                      class=\"text-info\"\n                      c8yIcon=\"info\"\n                    ></i>\n                  </button>\n                }\n              </div>\n              <div class=\"input-group-btn\">\n                @if (formGroup.value.__template && hasUnlinkTemplateOption) {\n                  <button\n                    class=\"btn btn-default\"\n                    [attr.aria-label]=\"'Unlink data point template' | translate\"\n                    tooltip=\"{{ 'Unlink data point template' | translate }}\"\n                    placement=\"left\"\n                    container=\"body\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    [adaptivePosition]=\"false\"\n                    (click)=\"unlinkDatapointTemplate()\"\n                  >\n                    <i c8yIcon=\"unlink\"></i>\n                  </button>\n                }\n              </div>\n            </div>\n          </div>\n        }\n        <ng-template #datapointOverviewPopoverTemplate>\n          <c8y-datapoint-template-popover\n            [datapoint]=\"formGroup.value.details\"\n          ></c8y-datapoint-template-popover>\n        </ng-template>\n        @if (defaultFormOptions) {\n          <c8y-datapoint-attributes-form\n            [showTarget]=\"defaultFormOptions.showTarget\"\n            [showRange]=\"defaultFormOptions.showRange\"\n            [showYellowRange]=\"defaultFormOptions.showYellowRange\"\n            [showRedRange]=\"defaultFormOptions.showRedRange\"\n            [showChart]=\"defaultFormOptions.showChart\"\n            [showFormIfTemplateWasSelected]=\"defaultFormOptions.showFormIfTemplateWasSelected\"\n            [selectableChartRenderTypes]=\"defaultFormOptions.selectableChartRenderTypes\"\n            [selectableChartLineTypes]=\"defaultFormOptions.selectableChartLineTypes\"\n            [selectableAxisTypes]=\"defaultFormOptions.selectableAxisTypes\"\n            [showAdvancedChartOptions]=\"defaultFormOptions.showAdvancedChartOptions\"\n            [showErrorsImmediately]=\"true\"\n            formControlName=\"details\"\n          ></c8y-datapoint-attributes-form>\n        }\n      </div>\n    </c8y-li-collapse>\n  }\n</c8y-li>\n", dependencies: [{ kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ListItemDragHandleComponent, selector: "c8y-list-item-drag-handle, c8y-li-drag-handle" }, { kind: "component", type: ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: 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: "component", type: ListItemActionComponent, selector: "c8y-list-item-action, c8y-li-action", inputs: ["label", "icon", "disabled"], outputs: ["click"] }, { kind: "component", type: ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "title", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: DatapointTemplatePopoverComponent, selector: "c8y-datapoint-template-popover", inputs: ["datapoint", "attributes"] }, { kind: "component", type: DatapointAttributesFormComponent, selector: "c8y-datapoint-attributes-form", inputs: ["selectableChartRenderTypes", "selectableChartLineTypes", "selectableAxisTypes", "showTarget", "showRange", "showYellowRange", "showRedRange", "showChart", "showFormIfTemplateWasSelected", "showAdvancedChartOptions", "showErrorsImmediately"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointSelectorListItemComponent, decorators: [{
             type: Component,
@@ -849,7 +1116,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         C8yTranslatePipe,
                         AsyncPipe
                     ], template: "<c8y-li\n  class=\"c8y-list__item__collapse--container-small\"\n  [formGroup]=\"formGroup\"\n  #li\n>\n  <c8y-li-drag-handle><ng-content select=\"c8y-li-drag-handle\"></ng-content></c8y-li-drag-handle>\n  @if (showActiveToggle) {\n    <c8y-li-checkbox\n      class=\"a-s-center p-r-0\"\n      [displayAsSwitch]=\"true\"\n      formControlName=\"__active\"\n      (click)=\"$event.stopPropagation()\"\n    ></c8y-li-checkbox>\n  }\n\n  <div class=\"d-flex a-i-center\">\n    <div\n      class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-16\"\n      [title]=\"'Change color' | translate\"\n    >\n      <div class=\"c8y-colorpicker\">\n        <input\n          [attr.aria-label]=\"'Color' | translate\"\n          type=\"color\"\n          formControlName=\"color\"\n          (click)=\"$event.stopPropagation()\"\n        />\n        <span [style.background-color]=\"formGroup.value.color\"></span>\n      </div>\n    </div>\n    <button\n      class=\"btn-clean data-point-label text-truncate\"\n      [attr.aria-expanded]=\"!li.collapsed\"\n      type=\"button\"\n      (click)=\"li.collapsed = !li.collapsed\"\n    >\n      <span\n        class=\"text-truncate\"\n        [title]=\"formGroup.value.details?.label\"\n      >\n        <c8y-highlight\n          [text]=\"formGroup.value.details?.label\"\n          [pattern]=\"highlightText\"\n          [shouldTrimPattern]=\"true\"\n        ></c8y-highlight>\n      </span>\n      @if (formGroup.value.__target) {\n        <small class=\"text-truncate text-muted icon-flex\">\n          <i c8yIcon=\"exchange\"></i>\n          <span class=\"text-truncate\">{{ formGroup.value.__target.name }}</span>\n        </small>\n      }\n    </button>\n\n    @if (!(isValid$ | async)) {\n      @let defaultErrorMessage =\n        'Some entries are invalid. Check the input fields with red borders.' | translate;\n      <button\n        class=\"btn btn-dot btn-dot--danger m-l-auto m-r-4\"\n        [attr.aria-label]=\"'Invalid' | translate\"\n        [popover]=\"errorMessage ? errorMessage : defaultErrorMessage\"\n        placement=\"left\"\n        triggers=\"focus\"\n        container=\"body\"\n        type=\"button\"\n      >\n        <i c8yIcon=\"exclamation-circle\"></i>\n      </button>\n    }\n    @if (addButtonType === AddButtonTypes.addRemove) {\n      <div class=\"m-l-auto a-s-center p-r-4\">\n        @if (isSelected) {\n          <button\n            class=\"btn btn-dot btn-dot--danger\"\n            [attr.aria-label]=\"'Remove' | translate\"\n            [tooltip]=\"'Remove from selected data points' | translate\"\n            type=\"button\"\n            [delay]=\"500\"\n            (click)=\"addOrRemoveItem()\"\n            [attr.data-cy]=\"'datapoint-selector-list-item--remove-datapoint-button'\"\n          >\n            <i\n              class=\"icon-20\"\n              c8yIcon=\"minus-circle\"\n            ></i>\n          </button>\n        }\n        @if (!isSelected) {\n          <button\n            class=\"btn btn-dot text-primary\"\n            [attr.aria-label]=\"'Add to selected data points' | translate\"\n            [tooltip]=\"'Add to selected data points' | translate\"\n            type=\"button\"\n            [delay]=\"500\"\n            [disabled]=\"!(isValid$ | async)\"\n            (click)=\"addOrRemoveItem()\"\n            [attr.data-cy]=\"'datapoint-selector-list-item--add-datapoint-button'\"\n          >\n            <i\n              class=\"text-primary icon-20\"\n              c8yIcon=\"plus-circle\"\n            ></i>\n          </button>\n        }\n      </div>\n    }\n    @if (addButtonType === AddButtonTypes.select) {\n      <button\n        class=\"btn btn-default btn-sm m-l-auto\"\n        [attr.aria-label]=\"'Select' | translate\"\n        [tooltip]=\"'Select data point' | translate\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"addOrRemoveItem()\"\n      >\n        {{ 'Select' | translate }}\n      </button>\n    }\n\n    @if (optionToRemove && !actions?.length) {\n      <button\n        class=\"m-l-auto showOnHover btn btn-dot btn-dot--danger m-r-4\"\n        [attr.aria-label]=\"'Remove from list' | translate\"\n        [tooltip]=\"'Remove from list' | translate\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"remove()\"\n      >\n        <i c8yIcon=\"minus-circle\"></i>\n      </button>\n    }\n  </div>\n\n  @if (optionToRemove && actions?.length) {\n    <c8y-li-action\n      [icon]=\"'minus-circle'\"\n      [label]=\"'Remove from list' | translate\"\n      (click)=\"remove()\"\n    ></c8y-li-action>\n  }\n  @for (action of actions; track action) {\n    <c8y-li-action\n      [icon]=\"action.icon\"\n      [label]=\"action.label\"\n      (click)=\"action.callback(formGroup.value)\"\n    ></c8y-li-action>\n  }\n  @if (editable) {\n    <c8y-li-collapse>\n      <div class=\"data-point-details\">\n        <ul class=\"list-unstyled small m-b-16\">\n          <li class=\"p-t-4 p-b-4 d-flex separator-top-bottom\">\n            <label\n              class=\"small m-b-0 m-r-8 a-s-start text-muted\"\n              translate\n            >\n              Fragment\n            </label>\n            <span\n              class=\"m-l-auto text-truncate\"\n              title=\"{{ formGroup.value.fragment }}\"\n            >\n              <c8y-highlight\n                [text]=\"formGroup.value.fragment\"\n                [pattern]=\"highlightText\"\n                [shouldTrimPattern]=\"true\"\n              ></c8y-highlight>\n            </span>\n          </li>\n          <li class=\"p-t-4 p-b-4 d-flex separator-bottom\">\n            <label\n              class=\"small m-b-0 m-r-8 a-s-start text-muted\"\n              translate\n            >\n              Series\n            </label>\n            <span\n              class=\"m-l-auto text-truncate\"\n              title=\"{{ formGroup.value.series }}\"\n            >\n              <c8y-highlight\n                [text]=\"formGroup.value.series\"\n                [pattern]=\"highlightText\"\n                [shouldTrimPattern]=\"true\"\n              ></c8y-highlight>\n            </span>\n          </li>\n        </ul>\n        @if (datapointLibraryEntries && datapointLibraryEntries | async; as libraryEntries) {\n          <div class=\"form-group form-group-sm\">\n            <label>\n              {{ 'Data point template' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"datapointHintPopoverTemplate\"\n                placement=\"top\"\n                triggers=\"focus\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n              ></button>\n            </label>\n\n            <ng-template #datapointHintPopoverTemplate>\n              {{\n                'Using a data point template sets color, label, unit and ranges. Removing the template allows you to set the values manually.'\n                  | translate\n              }}\n            </ng-template>\n            <div class=\"input-group input-group-sm\">\n              @if (datapointLibraryEntries) {\n                <c8y-typeahead\n                  class=\"flex-grow\"\n                  [placeholder]=\"'No template' | translate\"\n                  [ngModel]=\"formGroup.value.__template ? formGroup.value.details : undefined\"\n                  [ngModelOptions]=\"{ standalone: true }\"\n                  (onSearch)=\"setPipe($event)\"\n                  [displayProperty]=\"'label'\"\n                  [hideNew]=\"true\"\n                  [disabled]=\"isSelected && disableTypeaheadIfSelected\"\n                >\n                  <c8y-li\n                    class=\"p-l-8 p-r-8 c8y-list__item--link interact\"\n                    *c8yFor=\"\n                      let item of datapointLibraryEntries;\n                      loadMore: 'auto';\n                      pipe: filterPipe;\n                      notFound: notFoundTemplate\n                    \"\n                    (click)=\"dataPointTemplateSelected(item)\"\n                    [active]=\"formGroup.value.__template === item.id\"\n                    [attr.role]=\"'menuitem'\"\n                  >\n                    <c8y-highlight\n                      [text]=\"item.c8y_Kpi?.label\"\n                      [pattern]=\"pattern\"\n                    ></c8y-highlight>\n                    <c8y-li-icon\n                      icon=\"circle\"\n                      [style.color]=\"item.c8y_Kpi?.color\"\n                    ></c8y-li-icon>\n                  </c8y-li>\n                  <ng-template #notFoundTemplate>\n                    @if (pattern.length > 0) {\n                      <c8y-li class=\"bg-level-2 p-8\">\n                        <span>{{ 'No match found.' | translate }}</span>\n                      </c8y-li>\n                    }\n                  </ng-template>\n                </c8y-typeahead>\n              }\n              <div class=\"input-group-btn\">\n                @if (formGroup.value.__template) {\n                  <button\n                    class=\"btn btn-default\"\n                    [attr.aria-label]=\"'Info' | translate\"\n                    [popover]=\"datapointOverviewPopoverTemplate\"\n                    placement=\"left\"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                  >\n                    <i\n                      class=\"text-info\"\n                      c8yIcon=\"info\"\n                    ></i>\n                  </button>\n                }\n              </div>\n              <div class=\"input-group-btn\">\n                @if (formGroup.value.__template && hasUnlinkTemplateOption) {\n                  <button\n                    class=\"btn btn-default\"\n                    [attr.aria-label]=\"'Unlink data point template' | translate\"\n                    tooltip=\"{{ 'Unlink data point template' | translate }}\"\n                    placement=\"left\"\n                    container=\"body\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    [adaptivePosition]=\"false\"\n                    (click)=\"unlinkDatapointTemplate()\"\n                  >\n                    <i c8yIcon=\"unlink\"></i>\n                  </button>\n                }\n              </div>\n            </div>\n          </div>\n        }\n        <ng-template #datapointOverviewPopoverTemplate>\n          <c8y-datapoint-template-popover\n            [datapoint]=\"formGroup.value.details\"\n          ></c8y-datapoint-template-popover>\n        </ng-template>\n        @if (defaultFormOptions) {\n          <c8y-datapoint-attributes-form\n            [showTarget]=\"defaultFormOptions.showTarget\"\n            [showRange]=\"defaultFormOptions.showRange\"\n            [showYellowRange]=\"defaultFormOptions.showYellowRange\"\n            [showRedRange]=\"defaultFormOptions.showRedRange\"\n            [showChart]=\"defaultFormOptions.showChart\"\n            [showFormIfTemplateWasSelected]=\"defaultFormOptions.showFormIfTemplateWasSelected\"\n            [selectableChartRenderTypes]=\"defaultFormOptions.selectableChartRenderTypes\"\n            [selectableChartLineTypes]=\"defaultFormOptions.selectableChartLineTypes\"\n            [selectableAxisTypes]=\"defaultFormOptions.selectableAxisTypes\"\n            [showAdvancedChartOptions]=\"defaultFormOptions.showAdvancedChartOptions\"\n            [showErrorsImmediately]=\"true\"\n            formControlName=\"details\"\n          ></c8y-datapoint-attributes-form>\n        }\n      </div>\n    </c8y-li-collapse>\n  }\n</c8y-li>\n" }]
-        }], ctorParameters: () => [{ type: i2.FormBuilder }], propDecorators: { defaultFormOptions: [{
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { defaultFormOptions: [{
                 type: Input
             }], isSelected: [{
                 type: Input
@@ -1077,7 +1344,7 @@ class DatapointSelectorComponent {
                 multi: true,
                 useExisting: forwardRef(() => DatapointSelectorComponent)
             }
-        ], ngImport: i0, template: "<div\n  class=\"d-grid grid__row--1 fit-h\"\n  [ngClass]=\"{\n    'grid__col--3-6-3--md': allowChangingContext && !hideSelection,\n    'grid__col--8-4--md': !allowChangingContext && !hideSelection,\n    'grid__col--4-8--md': allowChangingContext && hideSelection\n  }\"\n>\n  <div\n    class=\"d-flex d-col p-relative bg-level-1\"\n    *ngIf=\"allowChangingContext\"\n  >\n    <c8y-asset-selector-miller\n      class=\"d-contents\"\n      [(ngModel)]=\"contextAsset\"\n      [asset]=\"contextAsset\"\n      (onSelected)=\"selectionChanged($event)\"\n      [container]=\"''\"\n      [config]=\"{\n        view: 'miller',\n        groupsSelectable: true,\n        columnHeaders: true,\n        showChildDevices: true,\n        showUnassignedDevices: true,\n        singleColumn: true,\n        search: allowSearch,\n        showFilter: true\n      }\"\n    ></c8y-asset-selector-miller>\n  </div>\n  <!-- center column -->\n  <div class=\"inner-scroll bg-component\">\n    <ng-template #noDeviceEmptyState>\n      <div class=\"p-16\">\n        <c8y-ui-empty-state\n          [icon]=\"'c8y-data-points'\"\n          [title]=\"emptyStateTitle | translate\"\n          [subtitle]=\"'Select an asset from the list.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      </div>\n    </ng-template>\n    <ng-template #loadingData>\n      <div class=\"p-16 text-center\">\n        <c8y-loading></c8y-loading>\n      </div>\n    </ng-template>\n    <div\n      class=\"bg-inherit\"\n      *ngIf=\"assetSelection | async as asset; else noDeviceEmptyState\"\n    >\n      <div class=\"p-l-16 p-r-16 p-t-8 p-b-8 sticky-top bg-inherit separator-bottom\">\n        <p\n          class=\"text-medium text-truncate\"\n          [title]=\"selectorTitle | translate\"\n        >\n          {{ selectorTitle | translate }}\n        </p>\n        <div\n          class=\"input-group input-group-search m-t-4\"\n          id=\"search\"\n          *ngIf=\"!loadingDatapoints\"\n        >\n          <input\n            class=\"form-control\"\n            placeholder=\"Search\u2026\"\n            type=\"search\"\n            [ngModel]=\"searchString\"\n            (ngModelChange)=\"searchStringChanged($event)\"\n          />\n          <span class=\"input-group-addon\">\n            <i\n              c8yIcon=\"search\"\n              *ngIf=\"!searchString; else clearSearchString\"\n            ></i>\n            <ng-template #clearSearchString>\n              <i\n                class=\"text-muted\"\n                c8yIcon=\"times\"\n                (click)=\"searchStringChanged()\"\n              ></i>\n            </ng-template>\n          </span>\n        </div>\n      </div>\n      <ng-container *ngIf=\"filteredDatapoints$ | async as filteredDatapoints; else loadingData\">\n        <ng-container *ngIf=\"!loadingDatapoints; else loadingData\">\n          <ng-container *ngIf=\"datapoints$ | async as datapoints\">\n            <div\n              class=\"p-16\"\n              *ngIf=\"!filteredDatapoints.length\"\n            >\n              <c8y-ui-empty-state\n                [icon]=\"'c8y-data-points'\"\n                [title]=\"emptyStateTitle | translate\"\n                [subtitle]=\"\n                  datapoints.length\n                    ? (emptyStateSubtitleWhenNoMatchingDataPoints | translate)\n                    : (emptyStateSubtitleWhenNoDataPointsInAsset | translate)\n                \"\n                [horizontal]=\"true\"\n              ></c8y-ui-empty-state>\n            </div>\n\n            <c8y-list-group>\n              <c8y-list-item\n                class=\"sticky-top\"\n                style=\"top: 72px\"\n                *ngIf=\"\n                  datapoints.length > maxNumberOfDatapoints &&\n                  filteredDatapoints.length >= maxNumberOfDatapoints\n                \"\n              >\n                <div class=\"alert alert-warning m-b-0\">\n                  {{\n                    'Due to the large number, only a subset of data points is displayed. Use search to narrow down the number of results.'\n                      | translate\n                  }}\n                </div>\n              </c8y-list-item>\n              <c8y-datapoint-selector-list-item\n                class=\"d-contents\"\n                [ngModel]=\"dp\"\n                [isSelected]=\"selectedDatapoints | includesDatapoint: dp\"\n                [datapointLibraryEntries]=\"datapointLibraryEntries\"\n                [disableTypeaheadIfSelected]=\"true\"\n                [addButtonType]=\"hideSelection ? AddButtonTypes.select : AddButtonTypes.addRemove\"\n                (added)=\"datapointAdded($event)\"\n                (removed)=\"datapointRemoved($event)\"\n                [highlightText]=\"searchStringChanges$ | async\"\n                *ngFor=\"let dp of filteredDatapoints; trackBy: trackByFn\"\n                [editable]=\"itemsEditable\"\n              ></c8y-datapoint-selector-list-item>\n            </c8y-list-group>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n  <!-- last column  -->\n  <div\n    class=\"inner-scroll bg-level-1\"\n    *ngIf=\"!hideSelection\"\n  >\n    <p\n      class=\"text-medium p-l-16 p-r-16 p-t-8 p-b-8 separator-bottom sticky-top text-truncate\"\n      [title]=\"selectedListTitle | translate\"\n    >\n      {{ selectedListTitle | translate }}\n    </p>\n    <div\n      class=\"d-flex flex-wrap gap-8 p-l-16 p-r-16 p-t-8 p-b-16\"\n      *ngIf=\"selectedDatapoints?.length\"\n    >\n      <div\n        class=\"c8y-datapoint-pill\"\n        *ngFor=\"let selectedDp of selectedDatapoints\"\n      >\n        <button\n          class=\"c8y-datapoint-pill__btn\"\n          [title]=\"'Remove' | translate\"\n          type=\"button\"\n          (click)=\"datapointRemoved(selectedDp)\"\n        >\n          <i\n            class=\"icon-14\"\n            c8yIcon=\"remove\"\n          ></i>\n        </button>\n        <div\n          class=\"c8y-datapoint-pill__label\"\n          [title]=\"selectedDp | datapointLabel: { doNotUseLabel: true, includeDevice: true }\"\n        >\n          <i\n            class=\"m-r-4 icon-14\"\n            c8yIcon=\"circle\"\n            [style.color]=\"selectedDp.color\"\n          ></i>\n          <span class=\"text-truncate\">\n            <span class=\"text-truncate\">{{ selectedDp | datapointLabel }}</span>\n            <small\n              class=\"text-muted text-10\"\n              *ngIf=\"selectedDp?.__target?.name\"\n            >\n              {{ selectedDp?.__target?.name }}\n            </small>\n          </span>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"p-r-8\"\n      *ngIf=\"!selectedDatapoints || !selectedDatapoints.length\"\n    >\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-data-points'\"\n        [title]=\"emptyStateTitle | translate\"\n        [subtitle]=\"\n          'Select the asset, then on the available data points list, click on the plus button on the desired data point.'\n            | translate\n        \"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MillerViewComponent, selector: "c8y-asset-selector-miller", inputs: ["config", "asset", "selectedDevice", "rootNode", "container"], outputs: ["onSelected", "onClearSelected"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "progressLabel", "message"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: DatapointSelectorListItemComponent, selector: "c8y-datapoint-selector-list-item", inputs: ["defaultFormOptions", "isSelected", "isCollapsed", "addButtonType", "editable", "showActiveToggle", "activeToggleDisabled", "showOptions", "datapointLibraryEntries", "actions", "optionToRemove", "hasUnlinkTemplateOption", "colorPickerDisabled", "disableTypeaheadIfSelected", "highlightText"], outputs: ["added", "removed"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: IncludesDatapointPipe, name: "includesDatapoint" }, { kind: "pipe", type: DatapointLabelPipe, name: "datapointLabel" }] }); }
+        ], ngImport: i0, template: "<div\n  class=\"d-grid grid__row--1 fit-h\"\n  [ngClass]=\"{\n    'grid__col--3-6-3--md': allowChangingContext && !hideSelection,\n    'grid__col--8-4--md': !allowChangingContext && !hideSelection,\n    'grid__col--4-8--md': allowChangingContext && hideSelection\n  }\"\n>\n  <div\n    class=\"d-flex d-col p-relative bg-level-1\"\n    *ngIf=\"allowChangingContext\"\n  >\n    <c8y-asset-selector-miller\n      class=\"d-contents\"\n      [(ngModel)]=\"contextAsset\"\n      [asset]=\"contextAsset\"\n      (onSelected)=\"selectionChanged($event)\"\n      [container]=\"''\"\n      [config]=\"{\n        view: 'miller',\n        groupsSelectable: true,\n        columnHeaders: true,\n        showChildDevices: true,\n        showUnassignedDevices: true,\n        singleColumn: true,\n        search: allowSearch,\n        showFilter: true\n      }\"\n    ></c8y-asset-selector-miller>\n  </div>\n  <!-- center column -->\n  <div class=\"inner-scroll bg-component\">\n    <ng-template #noDeviceEmptyState>\n      <div class=\"p-16\">\n        <c8y-ui-empty-state\n          [icon]=\"'c8y-data-points'\"\n          [title]=\"emptyStateTitle | translate\"\n          [subtitle]=\"'Select an asset from the list.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      </div>\n    </ng-template>\n    <ng-template #loadingData>\n      <div class=\"p-16 text-center\">\n        <c8y-loading></c8y-loading>\n      </div>\n    </ng-template>\n    <div\n      class=\"bg-inherit\"\n      *ngIf=\"assetSelection | async as asset; else noDeviceEmptyState\"\n    >\n      <div class=\"p-l-16 p-r-16 p-t-8 p-b-8 sticky-top bg-inherit separator-bottom\">\n        <p\n          class=\"text-medium text-truncate\"\n          [title]=\"selectorTitle | translate\"\n        >\n          {{ selectorTitle | translate }}\n        </p>\n        <div\n          class=\"input-group input-group-search m-t-4\"\n          id=\"search\"\n          *ngIf=\"!loadingDatapoints\"\n        >\n          <input\n            class=\"form-control\"\n            placeholder=\"Search\u2026\"\n            type=\"search\"\n            [ngModel]=\"searchString\"\n            (ngModelChange)=\"searchStringChanged($event)\"\n          />\n          <span class=\"input-group-addon\">\n            <i\n              c8yIcon=\"search\"\n              *ngIf=\"!searchString; else clearSearchString\"\n            ></i>\n            <ng-template #clearSearchString>\n              <i\n                class=\"text-muted\"\n                c8yIcon=\"times\"\n                (click)=\"searchStringChanged()\"\n              ></i>\n            </ng-template>\n          </span>\n        </div>\n      </div>\n      <ng-container *ngIf=\"filteredDatapoints$ | async as filteredDatapoints; else loadingData\">\n        <ng-container *ngIf=\"!loadingDatapoints; else loadingData\">\n          <ng-container *ngIf=\"datapoints$ | async as datapoints\">\n            <div\n              class=\"p-16\"\n              *ngIf=\"!filteredDatapoints.length\"\n            >\n              <c8y-ui-empty-state\n                [icon]=\"'c8y-data-points'\"\n                [title]=\"emptyStateTitle | translate\"\n                [subtitle]=\"\n                  datapoints.length\n                    ? (emptyStateSubtitleWhenNoMatchingDataPoints | translate)\n                    : (emptyStateSubtitleWhenNoDataPointsInAsset | translate)\n                \"\n                [horizontal]=\"true\"\n              ></c8y-ui-empty-state>\n            </div>\n\n            <c8y-list-group>\n              <c8y-list-item\n                class=\"sticky-top\"\n                style=\"top: 72px\"\n                *ngIf=\"\n                  datapoints.length > maxNumberOfDatapoints &&\n                  filteredDatapoints.length >= maxNumberOfDatapoints\n                \"\n              >\n                <div class=\"alert alert-warning m-b-0\">\n                  {{\n                    'Due to the large number, only a subset of data points is displayed. Use search to narrow down the number of results.'\n                      | translate\n                  }}\n                </div>\n              </c8y-list-item>\n              <c8y-datapoint-selector-list-item\n                class=\"d-contents\"\n                [ngModel]=\"dp\"\n                [isSelected]=\"selectedDatapoints | includesDatapoint: dp\"\n                [datapointLibraryEntries]=\"datapointLibraryEntries\"\n                [disableTypeaheadIfSelected]=\"true\"\n                [addButtonType]=\"hideSelection ? AddButtonTypes.select : AddButtonTypes.addRemove\"\n                (added)=\"datapointAdded($event)\"\n                (removed)=\"datapointRemoved($event)\"\n                [highlightText]=\"searchStringChanges$ | async\"\n                *ngFor=\"let dp of filteredDatapoints; trackBy: trackByFn\"\n                [editable]=\"itemsEditable\"\n              ></c8y-datapoint-selector-list-item>\n            </c8y-list-group>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n  <!-- last column  -->\n  <div\n    class=\"inner-scroll bg-level-1\"\n    *ngIf=\"!hideSelection\"\n  >\n    <p\n      class=\"text-medium p-l-16 p-r-16 p-t-8 p-b-8 separator-bottom sticky-top text-truncate\"\n      [title]=\"selectedListTitle | translate\"\n    >\n      {{ selectedListTitle | translate }}\n    </p>\n    <div\n      class=\"d-flex flex-wrap gap-8 p-l-16 p-r-16 p-t-8 p-b-16\"\n      *ngIf=\"selectedDatapoints?.length\"\n    >\n      <div\n        class=\"c8y-datapoint-pill\"\n        *ngFor=\"let selectedDp of selectedDatapoints\"\n      >\n        <button\n          class=\"c8y-datapoint-pill__btn\"\n          [title]=\"'Remove' | translate\"\n          type=\"button\"\n          (click)=\"datapointRemoved(selectedDp)\"\n        >\n          <i\n            class=\"icon-14\"\n            c8yIcon=\"remove\"\n          ></i>\n        </button>\n        <div\n          class=\"c8y-datapoint-pill__label\"\n          [title]=\"selectedDp | datapointLabel: { doNotUseLabel: true, includeDevice: true }\"\n        >\n          <i\n            class=\"m-r-4 icon-14\"\n            c8yIcon=\"circle\"\n            [style.color]=\"selectedDp.color\"\n          ></i>\n          <span class=\"text-truncate\">\n            <span class=\"text-truncate\">{{ selectedDp | datapointLabel }}</span>\n            <small\n              class=\"text-muted text-10\"\n              *ngIf=\"selectedDp?.__target?.name\"\n            >\n              {{ selectedDp?.__target?.name }}\n            </small>\n          </span>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"p-r-8\"\n      *ngIf=\"!selectedDatapoints || !selectedDatapoints.length\"\n    >\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-data-points'\"\n        [title]=\"emptyStateTitle | translate\"\n        [subtitle]=\"\n          'Select the asset, then on the available data points list, click on the plus button on the desired data point.'\n            | translate\n        \"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MillerViewComponent, selector: "c8y-asset-selector-miller", inputs: ["config", "asset", "selectedDevice", "rootNode", "container"], outputs: ["onSelected", "onClearSelected"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "progressLabel", "message"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: DatapointSelectorListItemComponent, selector: "c8y-datapoint-selector-list-item", inputs: ["defaultFormOptions", "isSelected", "isCollapsed", "addButtonType", "editable", "showActiveToggle", "activeToggleDisabled", "showOptions", "datapointLibraryEntries", "actions", "optionToRemove", "hasUnlinkTemplateOption", "colorPickerDisabled", "disableTypeaheadIfSelected", "highlightText"], outputs: ["added", "removed"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: IncludesDatapointPipe, name: "includesDatapoint" }, { kind: "pipe", type: DatapointLabelPipe, name: "datapointLabel" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointSelectorComponent, decorators: [{
             type: Component,
@@ -1174,13 +1441,13 @@ class DatapointSelectorModalComponent {
         const modalContainer = get(this.elementRef, 'nativeElement.parentElement.parentElement.parentElement');
         modalContainer.style.zIndex = '1060';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointSelectorModalComponent, deps: [{ token: i1$1.BsModalRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: DatapointSelectorModalComponent, isStandalone: true, selector: "c8y-datapoint-selector-modal", ngImport: i0, template: "<div class=\"modal-header separator\">\n  <h4 id=\"modal-title\" class=\"text-medium\">{{ title | translate }}</h4>\n</div>\n<div class=\"modal-inner-scroll modal-inner-scroll--fixed\" id=\"modal-body\">\n  <c8y-datapoint-selector\n    [contextAsset]=\"contextAsset\"\n    [guessDatapointUnit]=\"guessDatapointUnit\"\n    [allowDatapointsFromMultipleAssets]=\"allowDatapointsFromMultipleAssets\"\n    [allowChangingContext]=\"allowChangingContext\"\n    [defaultActiveState]=\"defaultActiveState\"\n    [allowSearch]=\"allowSearch\"\n    [hideSelection]=\"finishWithFirstSelection\"\n    [ignoreDatapointTemplates]=\"ignoreDatapointTemplates\"\n    [datapointTemplatesOnly]=\"datapointTemplatesOnly\"\n    [itemsEditable]=\"itemsEditable\"\n    [ngModel]=\"selectedDatapoints\"\n    (ngModelChange)=\"selectionChange($event)\"\n  ></c8y-datapoint-selector>\n</div>\n<div class=\"modal-footer\">\n  <button\n    type=\"button\"\n    [title]=\"'Cancel' | translate\"\n    class=\"btn btn-default\"\n    (click)=\"close()\"\n    translate\n  >\n    Cancel\n  </button>\n  <button\n    [title]=\"saveButtonLabel | translate\"\n    class=\"btn btn-primary\"\n    [disabled]=\"!selectedDatapoints?.length\"\n    (click)=\"saveChanges()\"\n    *ngIf=\"!finishWithFirstSelection\"\n  >\n    {{ saveButtonLabel | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "component", type: DatapointSelectorComponent, selector: "c8y-datapoint-selector", inputs: ["contextAsset", "allowChangingContext", "allowDatapointsFromMultipleAssets", "defaultActiveState", "ignoreDatapointTemplates", "datapointTemplatesOnly", "guessDatapointUnit", "allowSearch", "hideSelection", "itemsEditable"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointSelectorModalComponent, deps: [{ token: i1$2.BsModalRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: DatapointSelectorModalComponent, isStandalone: true, selector: "c8y-datapoint-selector-modal", ngImport: i0, template: "<div class=\"modal-header separator\">\n  <h4 id=\"modal-title\" class=\"text-medium\">{{ title | translate }}</h4>\n</div>\n<div class=\"modal-inner-scroll modal-inner-scroll--fixed\" id=\"modal-body\">\n  <c8y-datapoint-selector\n    [contextAsset]=\"contextAsset\"\n    [guessDatapointUnit]=\"guessDatapointUnit\"\n    [allowDatapointsFromMultipleAssets]=\"allowDatapointsFromMultipleAssets\"\n    [allowChangingContext]=\"allowChangingContext\"\n    [defaultActiveState]=\"defaultActiveState\"\n    [allowSearch]=\"allowSearch\"\n    [hideSelection]=\"finishWithFirstSelection\"\n    [ignoreDatapointTemplates]=\"ignoreDatapointTemplates\"\n    [datapointTemplatesOnly]=\"datapointTemplatesOnly\"\n    [itemsEditable]=\"itemsEditable\"\n    [ngModel]=\"selectedDatapoints\"\n    (ngModelChange)=\"selectionChange($event)\"\n  ></c8y-datapoint-selector>\n</div>\n<div class=\"modal-footer\">\n  <button\n    type=\"button\"\n    [title]=\"'Cancel' | translate\"\n    class=\"btn btn-default\"\n    (click)=\"close()\"\n    translate\n  >\n    Cancel\n  </button>\n  <button\n    [title]=\"saveButtonLabel | translate\"\n    class=\"btn btn-primary\"\n    [disabled]=\"!selectedDatapoints?.length\"\n    (click)=\"saveChanges()\"\n    *ngIf=\"!finishWithFirstSelection\"\n  >\n    {{ saveButtonLabel | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "component", type: DatapointSelectorComponent, selector: "c8y-datapoint-selector", inputs: ["contextAsset", "allowChangingContext", "allowDatapointsFromMultipleAssets", "defaultActiveState", "ignoreDatapointTemplates", "datapointTemplatesOnly", "guessDatapointUnit", "allowSearch", "hideSelection", "itemsEditable"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointSelectorModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-datapoint-selector-modal', imports: [DatapointSelectorComponent, FormsModule, C8yTranslateDirective, NgIf, C8yTranslatePipe], template: "<div class=\"modal-header separator\">\n  <h4 id=\"modal-title\" class=\"text-medium\">{{ title | translate }}</h4>\n</div>\n<div class=\"modal-inner-scroll modal-inner-scroll--fixed\" id=\"modal-body\">\n  <c8y-datapoint-selector\n    [contextAsset]=\"contextAsset\"\n    [guessDatapointUnit]=\"guessDatapointUnit\"\n    [allowDatapointsFromMultipleAssets]=\"allowDatapointsFromMultipleAssets\"\n    [allowChangingContext]=\"allowChangingContext\"\n    [defaultActiveState]=\"defaultActiveState\"\n    [allowSearch]=\"allowSearch\"\n    [hideSelection]=\"finishWithFirstSelection\"\n    [ignoreDatapointTemplates]=\"ignoreDatapointTemplates\"\n    [datapointTemplatesOnly]=\"datapointTemplatesOnly\"\n    [itemsEditable]=\"itemsEditable\"\n    [ngModel]=\"selectedDatapoints\"\n    (ngModelChange)=\"selectionChange($event)\"\n  ></c8y-datapoint-selector>\n</div>\n<div class=\"modal-footer\">\n  <button\n    type=\"button\"\n    [title]=\"'Cancel' | translate\"\n    class=\"btn btn-default\"\n    (click)=\"close()\"\n    translate\n  >\n    Cancel\n  </button>\n  <button\n    [title]=\"saveButtonLabel | translate\"\n    class=\"btn btn-primary\"\n    [disabled]=\"!selectedDatapoints?.length\"\n    (click)=\"saveChanges()\"\n    *ngIf=\"!finishWithFirstSelection\"\n  >\n    {{ saveButtonLabel | translate }}\n  </button>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.BsModalRef }, { type: i0.ElementRef }] });
+        }], ctorParameters: () => [{ type: i1$2.BsModalRef }, { type: i0.ElementRef }] });
 
 class DatapointSelectorService {
     constructor(modal) {
@@ -1198,13 +1465,13 @@ class DatapointSelectorService {
         const content = modal.content;
         return content.result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointSelectorService, deps: [{ token: i1$1.BsModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointSelectorService, deps: [{ token: i1$2.BsModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointSelectorService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointSelectorService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$1.BsModalService }] });
+        }], ctorParameters: () => [{ type: i1$2.BsModalService }] });
 
 class DatapointSelectionListComponent {
     constructor(datapointSelector, datapointLibrary, formBuilder, widgetComponent) {
@@ -1231,6 +1498,7 @@ class DatapointSelectionListComponent {
         this.minActiveErrorMessage = gettext('At least {{ minActive }} data point(s) must be selected and active.');
         this.maxActiveErrorMessage = gettext('At maximum {{ maxActive }} data point(s) can be selected and active.');
         this.DATA_POINTS_LABEL = gettext('Data points`display`');
+        this.GLOBAL_AGGREGATION_TYPES = CHART_RENDER_TYPES.filter(rt => rt.val !== 'area');
         this.usedValidators = {};
         this.formArray = this.formBuilder.array([]);
         this.isValid = this.formArray.statusChanges.pipe(map(status => status === 'VALID'));
@@ -1302,6 +1570,56 @@ class DatapointSelectionListComponent {
     onItemRemoved(index) {
         this.formArray.removeAt(index);
     }
+    /**
+     *
+     * @param rtKey render type key
+     * @returns state of the aggregation for the given render type across all datapoints:
+     * 'all' if enabled for all, 'none' if disabled for all, 'mixed' if some datapoints have it enabled and others disabled
+     */
+    getAggregationState(rtKey) {
+        const controls = this.formArray.controls;
+        if (!controls.length)
+            return 'none';
+        let enabledCount = 0;
+        for (const ctrl of controls) {
+            const details = ctrl.get('details')?.value;
+            if (details?.renderTypeConfigs?.[rtKey]?.enabled) {
+                enabledCount++;
+            }
+        }
+        if (enabledCount === 0)
+            return 'none';
+        if (enabledCount === controls.length)
+            return 'all';
+        return 'mixed';
+    }
+    /** Returns true if disabling `rtKey` globally would leave any datapoint with no enabled aggregation. */
+    wouldLeaveAnyEmpty(rtKey) {
+        return this.formArray.controls.some(ctrl => {
+            const configs = ctrl.get('details')?.value?.renderTypeConfigs;
+            if (!configs?.[rtKey]?.enabled)
+                return false;
+            return Object.entries(configs).every(([k, c]) => k === rtKey || !c?.enabled);
+        });
+    }
+    toggleGlobalAggregation(rtKey) {
+        const newEnabled = this.getAggregationState(rtKey) !== 'all';
+        for (const ctrl of this.formArray.controls) {
+            const fg = ctrl;
+            const details = fg.get('details')?.value;
+            if (details?.renderTypeConfigs?.[rtKey]) {
+                const updatedConfigs = { ...details.renderTypeConfigs };
+                updatedConfigs[rtKey] = { ...updatedConfigs[rtKey], enabled: newEnabled };
+                const enabledRenderTypes = Object.keys(updatedConfigs).filter(k => updatedConfigs[k]?.enabled);
+                fg.get('details')?.setValue({
+                    ...details,
+                    renderTypeConfigs: updatedConfigs,
+                    renderTypes: enabledRenderTypes,
+                    renderType: enabledRenderTypes[0] ?? details.renderType
+                });
+            }
+        }
+    }
     get formGroups() {
         return this.formArray.controls;
     }
@@ -1335,7 +1653,7 @@ class DatapointSelectionListComponent {
         this.formArray.setValidators(validators);
         this.formArray.updateValueAndValidity();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointSelectionListComponent, deps: [{ token: DatapointSelectorService }, { token: DatapointLibraryService }, { token: i2.FormBuilder }, { token: i4.WidgetConfigComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointSelectionListComponent, deps: [{ token: DatapointSelectorService }, { token: DatapointLibraryService }, { token: i1.FormBuilder }, { token: i4.WidgetConfigComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DatapointSelectionListComponent, isStandalone: true, selector: "c8y-datapoint-selection-list", inputs: { actions: "actions", allowDragAndDrop: "allowDragAndDrop", config: "config", defaultFormOptions: "defaultFormOptions", maxActiveCount: "maxActiveCount", minActiveCount: "minActiveCount", resolveContext: "resolveContext", listTitle: "listTitle", removeTitle: "removeTitle" }, outputs: { isValid: "isValid", change: "change" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -1347,7 +1665,7 @@ class DatapointSelectionListComponent {
                 useExisting: forwardRef(() => DatapointSelectionListComponent),
                 multi: true
             }
-        ], usesOnChanges: true, ngImport: i0, template: "@if (!removeTitle) {\n  <div class=\"card-header separator sticky-top bg-inherit\">\n    <span class=\"card-title h4\">\n      {{ (listTitle ? listTitle : DATA_POINTS_LABEL) | translate }}\n    </span>\n  </div>\n}\n\n<c8y-list-group\n  class=\"flex-grow ff-scroll-fix cdk-droplist\"\n  [class.separator-top]=\"formArray.controls?.length\"\n  cdkDropList\n  (cdkDropListDropped)=\"drop($event)\"\n  [cdkDropListDisabled]=\"!allowDragAndDrop || formArray.controls?.length < 2\"\n>\n  @if (formArray.errors?.minActiveCount && formArray.touched) {\n    <div\n      class=\"alert alert-warning m-t-8\"\n      role=\"alert\"\n    >\n      {{ minActiveErrorMessage | translate: { minActive: minActiveCount } }}\n    </div>\n  }\n\n  @if (formArray.errors?.maxActiveCount && formArray.touched) {\n    <div\n      class=\"alert alert-warning m-t-8\"\n      role=\"alert\"\n    >\n      {{ maxActiveErrorMessage | translate: { maxActive: maxActiveCount } }}\n    </div>\n  }\n\n  <ng-content select=\".alert\"></ng-content>\n\n  @if (!formArray.controls?.length) {\n    <div class=\"p-t-8\">\n      <c8y-ui-empty-state\n        class=\"p-t-8\"\n        [icon]=\"'c8y-data-points'\"\n        [title]=\"'No data points to display.' | translate\"\n        [subtitle]=\"'Add your first data point.' | translate\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    </div>\n  }\n\n  @for (formGroup of formGroups; track formGroup; let index = $index) {\n    <div [formGroup]=\"formGroup\">\n      <c8y-datapoint-selector-list-item\n        class=\"d-block\"\n        [defaultFormOptions]=\"defaultFormOptions\"\n        [activeToggleDisabled]=\"maxActiveCountReached\"\n        [showActiveToggle]=\"true\"\n        [addButtonType]=\"AddButtonTypes.none\"\n        [showOptions]=\"true\"\n        [editable]=\"true\"\n        [colorPickerDisabled]=\"false\"\n        [actions]=\"actions\"\n        [optionToRemove]=\"true\"\n        [datapointLibraryEntries]=\"datapointLibraryEntries\"\n        [hasUnlinkTemplateOption]=\"true\"\n        formControlName=\"details\"\n        (removed)=\"onItemRemoved(index)\"\n        cdkDrag\n      >\n        <c8y-li-drag-handle\n          title=\"{{ 'Click and drag to reorder' | translate }}\"\n          cdkDragHandle\n        >\n          <i c8yIcon=\"drag-reorder\"></i>\n        </c8y-li-drag-handle>\n      </c8y-datapoint-selector-list-item>\n    </div>\n  }\n\n  <div class=\"card-footer bg-inherit\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      [title]=\"'Add data point' | translate\"\n      type=\"button\"\n      data-cy=\"c8y-datapoint-selection-list--add-datapoint-button\"\n      (click)=\"add()\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add data point' | translate }}\n    </button>\n  </div>\n</c8y-list-group>\n", dependencies: [{ kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DatapointSelectorListItemComponent, selector: "c8y-datapoint-selector-list-item", inputs: ["defaultFormOptions", "isSelected", "isCollapsed", "addButtonType", "editable", "showActiveToggle", "activeToggleDisabled", "showOptions", "datapointLibraryEntries", "actions", "optionToRemove", "hasUnlinkTemplateOption", "colorPickerDisabled", "disableTypeaheadIfSelected", "highlightText"], outputs: ["added", "removed"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ListItemDragHandleComponent, selector: "c8y-list-item-drag-handle, c8y-li-drag-handle" }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+        ], usesOnChanges: true, ngImport: i0, template: "@if (!removeTitle) {\n  <div class=\"card-header separator sticky-top bg-inherit\">\n    <span class=\"card-title h4\">\n      {{ (listTitle ? listTitle : DATA_POINTS_LABEL) | translate }}\n    </span>\n  </div>\n}\n\n<c8y-list-group\n  class=\"flex-grow ff-scroll-fix cdk-droplist\"\n  [class.separator-top]=\"formArray.controls?.length\"\n  cdkDropList\n  (cdkDropListDropped)=\"drop($event)\"\n  [cdkDropListDisabled]=\"!allowDragAndDrop || formArray.controls?.length < 2\"\n>\n  @if (formArray.errors?.minActiveCount && formArray.touched) {\n    <div\n      class=\"alert alert-warning m-t-8\"\n      role=\"alert\"\n    >\n      {{ minActiveErrorMessage | translate: { minActive: minActiveCount } }}\n    </div>\n  }\n\n  @if (formArray.errors?.maxActiveCount && formArray.touched) {\n    <div\n      class=\"alert alert-warning m-t-8\"\n      role=\"alert\"\n    >\n      {{ maxActiveErrorMessage | translate: { maxActive: maxActiveCount } }}\n    </div>\n  }\n\n  <ng-content select=\".alert\"></ng-content>\n\n  @if (defaultFormOptions?.showAdvancedChartOptions && formArray.controls?.length) {\n    <fieldset class=\"c8y-fieldset m-t-0 m-b-16\">\n      <legend>\n        {{ 'Aggregation display' | translate }}\n        <button\n          class=\"btn-help btn-help--sm\"\n          [attr.aria-label]=\"\n            'Select which aggregations to display for all data points. These options apply to every data point in the list.'\n              | translate\n          \"\n          popover=\"{{\n            'Select which aggregations to display for all data points. These options apply to every data point in the list.'\n              | translate\n          }}\"\n          placement=\"top\"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n        ></button>\n      </legend>\n      <div class=\"m-b-8\">\n        @for (rt of GLOBAL_AGGREGATION_TYPES; track rt.val) {\n          @let aggregationState = getAggregationState(rt.val);\n          <label\n            class=\"c8y-checkbox checkbox-inline\"\n            [title]=\"rt.text | translate\"\n            [attr.aria-label]=\"rt.text | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"aggregationState === 'all'\"\n              [indeterminate]=\"aggregationState === 'mixed'\"\n              [disabled]=\"wouldLeaveAnyEmpty(rt.val)\"\n              (change)=\"toggleGlobalAggregation(rt.val)\"\n            />\n            <span></span>\n            <span>{{ rt.text | translate }}</span>\n          </label>\n        }\n      </div>\n    </fieldset>\n  }\n\n  @if (!formArray.controls?.length) {\n    <div class=\"p-t-8\">\n      <c8y-ui-empty-state\n        class=\"p-t-8\"\n        [icon]=\"'c8y-data-points'\"\n        [title]=\"'No data points to display.' | translate\"\n        [subtitle]=\"'Add your first data point.' | translate\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    </div>\n  }\n\n  @for (formGroup of formGroups; track formGroup; let index = $index) {\n    <div [formGroup]=\"formGroup\">\n      <c8y-datapoint-selector-list-item\n        class=\"d-block\"\n        [defaultFormOptions]=\"defaultFormOptions\"\n        [activeToggleDisabled]=\"maxActiveCountReached\"\n        [showActiveToggle]=\"true\"\n        [addButtonType]=\"AddButtonTypes.none\"\n        [showOptions]=\"true\"\n        [editable]=\"true\"\n        [colorPickerDisabled]=\"false\"\n        [actions]=\"actions\"\n        [optionToRemove]=\"true\"\n        [datapointLibraryEntries]=\"datapointLibraryEntries\"\n        [hasUnlinkTemplateOption]=\"true\"\n        formControlName=\"details\"\n        (removed)=\"onItemRemoved(index)\"\n        cdkDrag\n      >\n        <c8y-li-drag-handle\n          title=\"{{ 'Click and drag to reorder' | translate }}\"\n          cdkDragHandle\n        >\n          <i c8yIcon=\"drag-reorder\"></i>\n        </c8y-li-drag-handle>\n      </c8y-datapoint-selector-list-item>\n    </div>\n  }\n\n  <div class=\"card-footer bg-inherit\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      [title]=\"'Add data point' | translate\"\n      type=\"button\"\n      data-cy=\"c8y-datapoint-selection-list--add-datapoint-button\"\n      (click)=\"add()\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add data point' | translate }}\n    </button>\n  </div>\n</c8y-list-group>\n", dependencies: [{ kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DatapointSelectorListItemComponent, selector: "c8y-datapoint-selector-list-item", inputs: ["defaultFormOptions", "isSelected", "isCollapsed", "addButtonType", "editable", "showActiveToggle", "activeToggleDisabled", "showOptions", "datapointLibraryEntries", "actions", "optionToRemove", "hasUnlinkTemplateOption", "colorPickerDisabled", "disableTypeaheadIfSelected", "highlightText"], outputs: ["added", "removed"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ListItemDragHandleComponent, selector: "c8y-list-item-drag-handle, c8y-li-drag-handle" }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i5.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointSelectionListComponent, decorators: [{
             type: Component,
@@ -1373,9 +1691,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         ListItemDragHandleComponent,
                         CdkDragHandle,
                         IconDirective,
-                        C8yTranslatePipe
-                    ], template: "@if (!removeTitle) {\n  <div class=\"card-header separator sticky-top bg-inherit\">\n    <span class=\"card-title h4\">\n      {{ (listTitle ? listTitle : DATA_POINTS_LABEL) | translate }}\n    </span>\n  </div>\n}\n\n<c8y-list-group\n  class=\"flex-grow ff-scroll-fix cdk-droplist\"\n  [class.separator-top]=\"formArray.controls?.length\"\n  cdkDropList\n  (cdkDropListDropped)=\"drop($event)\"\n  [cdkDropListDisabled]=\"!allowDragAndDrop || formArray.controls?.length < 2\"\n>\n  @if (formArray.errors?.minActiveCount && formArray.touched) {\n    <div\n      class=\"alert alert-warning m-t-8\"\n      role=\"alert\"\n    >\n      {{ minActiveErrorMessage | translate: { minActive: minActiveCount } }}\n    </div>\n  }\n\n  @if (formArray.errors?.maxActiveCount && formArray.touched) {\n    <div\n      class=\"alert alert-warning m-t-8\"\n      role=\"alert\"\n    >\n      {{ maxActiveErrorMessage | translate: { maxActive: maxActiveCount } }}\n    </div>\n  }\n\n  <ng-content select=\".alert\"></ng-content>\n\n  @if (!formArray.controls?.length) {\n    <div class=\"p-t-8\">\n      <c8y-ui-empty-state\n        class=\"p-t-8\"\n        [icon]=\"'c8y-data-points'\"\n        [title]=\"'No data points to display.' | translate\"\n        [subtitle]=\"'Add your first data point.' | translate\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    </div>\n  }\n\n  @for (formGroup of formGroups; track formGroup; let index = $index) {\n    <div [formGroup]=\"formGroup\">\n      <c8y-datapoint-selector-list-item\n        class=\"d-block\"\n        [defaultFormOptions]=\"defaultFormOptions\"\n        [activeToggleDisabled]=\"maxActiveCountReached\"\n        [showActiveToggle]=\"true\"\n        [addButtonType]=\"AddButtonTypes.none\"\n        [showOptions]=\"true\"\n        [editable]=\"true\"\n        [colorPickerDisabled]=\"false\"\n        [actions]=\"actions\"\n        [optionToRemove]=\"true\"\n        [datapointLibraryEntries]=\"datapointLibraryEntries\"\n        [hasUnlinkTemplateOption]=\"true\"\n        formControlName=\"details\"\n        (removed)=\"onItemRemoved(index)\"\n        cdkDrag\n      >\n        <c8y-li-drag-handle\n          title=\"{{ 'Click and drag to reorder' | translate }}\"\n          cdkDragHandle\n        >\n          <i c8yIcon=\"drag-reorder\"></i>\n        </c8y-li-drag-handle>\n      </c8y-datapoint-selector-list-item>\n    </div>\n  }\n\n  <div class=\"card-footer bg-inherit\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      [title]=\"'Add data point' | translate\"\n      type=\"button\"\n      data-cy=\"c8y-datapoint-selection-list--add-datapoint-button\"\n      (click)=\"add()\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add data point' | translate }}\n    </button>\n  </div>\n</c8y-list-group>\n" }]
-        }], ctorParameters: () => [{ type: DatapointSelectorService }, { type: DatapointLibraryService }, { type: i2.FormBuilder }, { type: i4.WidgetConfigComponent, decorators: [{
+                        C8yTranslatePipe,
+                        PopoverModule
+                    ], template: "@if (!removeTitle) {\n  <div class=\"card-header separator sticky-top bg-inherit\">\n    <span class=\"card-title h4\">\n      {{ (listTitle ? listTitle : DATA_POINTS_LABEL) | translate }}\n    </span>\n  </div>\n}\n\n<c8y-list-group\n  class=\"flex-grow ff-scroll-fix cdk-droplist\"\n  [class.separator-top]=\"formArray.controls?.length\"\n  cdkDropList\n  (cdkDropListDropped)=\"drop($event)\"\n  [cdkDropListDisabled]=\"!allowDragAndDrop || formArray.controls?.length < 2\"\n>\n  @if (formArray.errors?.minActiveCount && formArray.touched) {\n    <div\n      class=\"alert alert-warning m-t-8\"\n      role=\"alert\"\n    >\n      {{ minActiveErrorMessage | translate: { minActive: minActiveCount } }}\n    </div>\n  }\n\n  @if (formArray.errors?.maxActiveCount && formArray.touched) {\n    <div\n      class=\"alert alert-warning m-t-8\"\n      role=\"alert\"\n    >\n      {{ maxActiveErrorMessage | translate: { maxActive: maxActiveCount } }}\n    </div>\n  }\n\n  <ng-content select=\".alert\"></ng-content>\n\n  @if (defaultFormOptions?.showAdvancedChartOptions && formArray.controls?.length) {\n    <fieldset class=\"c8y-fieldset m-t-0 m-b-16\">\n      <legend>\n        {{ 'Aggregation display' | translate }}\n        <button\n          class=\"btn-help btn-help--sm\"\n          [attr.aria-label]=\"\n            'Select which aggregations to display for all data points. These options apply to every data point in the list.'\n              | translate\n          \"\n          popover=\"{{\n            'Select which aggregations to display for all data points. These options apply to every data point in the list.'\n              | translate\n          }}\"\n          placement=\"top\"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n        ></button>\n      </legend>\n      <div class=\"m-b-8\">\n        @for (rt of GLOBAL_AGGREGATION_TYPES; track rt.val) {\n          @let aggregationState = getAggregationState(rt.val);\n          <label\n            class=\"c8y-checkbox checkbox-inline\"\n            [title]=\"rt.text | translate\"\n            [attr.aria-label]=\"rt.text | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"aggregationState === 'all'\"\n              [indeterminate]=\"aggregationState === 'mixed'\"\n              [disabled]=\"wouldLeaveAnyEmpty(rt.val)\"\n              (change)=\"toggleGlobalAggregation(rt.val)\"\n            />\n            <span></span>\n            <span>{{ rt.text | translate }}</span>\n          </label>\n        }\n      </div>\n    </fieldset>\n  }\n\n  @if (!formArray.controls?.length) {\n    <div class=\"p-t-8\">\n      <c8y-ui-empty-state\n        class=\"p-t-8\"\n        [icon]=\"'c8y-data-points'\"\n        [title]=\"'No data points to display.' | translate\"\n        [subtitle]=\"'Add your first data point.' | translate\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    </div>\n  }\n\n  @for (formGroup of formGroups; track formGroup; let index = $index) {\n    <div [formGroup]=\"formGroup\">\n      <c8y-datapoint-selector-list-item\n        class=\"d-block\"\n        [defaultFormOptions]=\"defaultFormOptions\"\n        [activeToggleDisabled]=\"maxActiveCountReached\"\n        [showActiveToggle]=\"true\"\n        [addButtonType]=\"AddButtonTypes.none\"\n        [showOptions]=\"true\"\n        [editable]=\"true\"\n        [colorPickerDisabled]=\"false\"\n        [actions]=\"actions\"\n        [optionToRemove]=\"true\"\n        [datapointLibraryEntries]=\"datapointLibraryEntries\"\n        [hasUnlinkTemplateOption]=\"true\"\n        formControlName=\"details\"\n        (removed)=\"onItemRemoved(index)\"\n        cdkDrag\n      >\n        <c8y-li-drag-handle\n          title=\"{{ 'Click and drag to reorder' | translate }}\"\n          cdkDragHandle\n        >\n          <i c8yIcon=\"drag-reorder\"></i>\n        </c8y-li-drag-handle>\n      </c8y-datapoint-selector-list-item>\n    </div>\n  }\n\n  <div class=\"card-footer bg-inherit\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      [title]=\"'Add data point' | translate\"\n      type=\"button\"\n      data-cy=\"c8y-datapoint-selection-list--add-datapoint-button\"\n      (click)=\"add()\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add data point' | translate }}\n    </button>\n  </div>\n</c8y-list-group>\n" }]
+        }], ctorParameters: () => [{ type: DatapointSelectorService }, { type: DatapointLibraryService }, { type: i1.FormBuilder }, { type: i4.WidgetConfigComponent, decorators: [{
                     type: Optional
                 }] }], propDecorators: { actions: [{
                 type: Input
@@ -1583,7 +1902,13 @@ class WidgetDatapointsSelectorComponent {
             });
             this.widgetConfigService.currentConfig$
                 .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe(({ showAdvancedChartOptions }) => (this.defaultFormOptions = { ...this.defaultFormOptions, showAdvancedChartOptions }));
+                .subscribe(config => {
+                const hasAggregation = !!(config.aggregation || config.autoAggregation);
+                this.defaultFormOptions = {
+                    ...this.defaultFormOptions,
+                    showAdvancedChartOptions: config.showAdvancedChartOptions && hasAggregation
+                };
+            });
         }
     }
     onDatapointsChange(datapoints) {
@@ -1650,7 +1975,7 @@ class WidgetDatapointsSelectorComponent {
         this.differentUnits = units.some(unit => unit !== firstUnit);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: WidgetDatapointsSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: WidgetDatapointsSelectorComponent, isStandalone: true, selector: "c8y-widget-datapoints-selector", inputs: { minActiveCount: "minActiveCount", maxActiveCount: "maxActiveCount", showDifferentUnitsAlert: "showDifferentUnitsAlert", listTitle: "listTitle", defaultFormOptions: "defaultFormOptions", config: "config", controlName: "controlName", removeTitle: "removeTitle", useAdvancedChartOptions: "useAdvancedChartOptions" }, host: { classAttribute: "bg-level-1" }, ngImport: i0, template: "@let hasDifferentUnits = showDifferentUnitsAlert && differentUnits;\n\n<c8y-datapoint-selection-list\n  class=\"bg-inherit\"\n  [removeTitle]=\"removeTitle\"\n  [listTitle]=\"listTitle\"\n  [name]=\"controlName\"\n  [config]=\"config\"\n  [defaultFormOptions]=\"defaultFormOptions\"\n  [minActiveCount]=\"minActiveCount\"\n  [maxActiveCount]=\"maxActiveCount\"\n  [ngModel]=\"datapoints()\"\n  (ngModelChange)=\"onDatapointsChange($event)\"\n  #dpSelection\n  #dpModel=\"ngModel\"\n>\n  @if (hasDifferentUnits) {\n    <div\n      class=\"alert alert-warning m-t-8\"\n      role=\"alert\"\n    >\n      {{ differentUnitsMessageError | translate }}\n    </div>\n  }\n</c8y-datapoint-selection-list>\n\n<c8y-widget-config-feedback>\n  @let activeCount = activeDatapointsCount();\n  @let hasError = dpModel?.errors?.minActiveCount || dpModel?.errors?.maxActiveCount;\n  <span\n    class=\"tag chip text-12\"\n    [class.tag--danger]=\"hasError\"\n    [class.tag--info]=\"!hasError\"\n  >\n    @if (activeCount === 0) {\n      {{ 'None selected`data point`' | translate }}\n    } @else if (activeCount === 1) {\n      {{ '1 data point' | translate }}\n    } @else {\n      {{ '{{ count }} data points' | translate: { count: activeCount } }}\n    }\n  </span>\n\n  @let minActiveError = dpModel?.errors?.minActiveCount;\n  @let maxActiveError = dpModel?.errors?.maxActiveCount;\n\n  @if ((minActiveError || maxActiveError) && dpModel.touched) {\n    <button\n      class=\"btn-clean\"\n      [attr.aria-label]=\"\n        minActiveError\n          ? (dpSelection.minActiveErrorMessage | translate: { minActive: minActiveCount })\n          : maxActiveError\n            ? (dpSelection.maxActiveErrorMessage | translate: { maxActive: maxActiveCount })\n            : null\n      \"\n      [tooltip]=\"\n        minActiveError\n          ? (dpSelection.minActiveErrorMessage | translate: { minActive: minActiveCount })\n          : maxActiveError\n            ? (dpSelection.maxActiveErrorMessage | translate: { maxActive: maxActiveCount })\n            : null\n      \"\n      type=\"button\"\n      [delay]=\"500\"\n    >\n      <i\n        class=\"status major\"\n        [c8yIcon]=\"'warning'\"\n      ></i>\n    </button>\n  }\n\n  @if (hasDifferentUnits) {\n    <button\n      class=\"btn-clean\"\n      [attr.aria-label]=\"differentUnitsMessageError | translate\"\n      [tooltip]=\"differentUnitsMessageError | translate\"\n      type=\"button\"\n      [delay]=\"500\"\n    >\n      <i\n        class=\"text-warning\"\n        [c8yIcon]=\"'warning'\"\n      ></i>\n    </button>\n  }\n</c8y-widget-config-feedback>\n", dependencies: [{ kind: "component", type: DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle", "removeTitle"], outputs: ["isValid", "change"] }, { kind: "directive", type: 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: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: WidgetConfigFeedbackComponent, selector: "c8y-widget-config-feedback" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: WidgetDatapointsSelectorComponent, isStandalone: true, selector: "c8y-widget-datapoints-selector", inputs: { minActiveCount: "minActiveCount", maxActiveCount: "maxActiveCount", showDifferentUnitsAlert: "showDifferentUnitsAlert", listTitle: "listTitle", defaultFormOptions: "defaultFormOptions", config: "config", controlName: "controlName", removeTitle: "removeTitle", useAdvancedChartOptions: "useAdvancedChartOptions" }, host: { classAttribute: "bg-level-1" }, ngImport: i0, template: "@let hasDifferentUnits = showDifferentUnitsAlert && differentUnits;\n\n<c8y-datapoint-selection-list\n  class=\"bg-inherit\"\n  [removeTitle]=\"removeTitle\"\n  [listTitle]=\"listTitle\"\n  [name]=\"controlName\"\n  [config]=\"config\"\n  [defaultFormOptions]=\"defaultFormOptions\"\n  [minActiveCount]=\"minActiveCount\"\n  [maxActiveCount]=\"maxActiveCount\"\n  [ngModel]=\"datapoints()\"\n  (ngModelChange)=\"onDatapointsChange($event)\"\n  #dpSelection\n  #dpModel=\"ngModel\"\n>\n  @if (hasDifferentUnits) {\n    <div\n      class=\"alert alert-warning m-t-8\"\n      role=\"alert\"\n    >\n      {{ differentUnitsMessageError | translate }}\n    </div>\n  }\n</c8y-datapoint-selection-list>\n\n<c8y-widget-config-feedback>\n  @let activeCount = activeDatapointsCount();\n  @let hasError = dpModel?.errors?.minActiveCount || dpModel?.errors?.maxActiveCount;\n  <span\n    class=\"tag chip text-12\"\n    [class.tag--danger]=\"hasError\"\n    [class.tag--info]=\"!hasError\"\n  >\n    @if (activeCount === 0) {\n      {{ 'None selected`data point`' | translate }}\n    } @else if (activeCount === 1) {\n      {{ '1 data point' | translate }}\n    } @else {\n      {{ '{{ count }} data points' | translate: { count: activeCount } }}\n    }\n  </span>\n\n  @let minActiveError = dpModel?.errors?.minActiveCount;\n  @let maxActiveError = dpModel?.errors?.maxActiveCount;\n\n  @if ((minActiveError || maxActiveError) && dpModel.touched) {\n    <button\n      class=\"btn-clean\"\n      [attr.aria-label]=\"\n        minActiveError\n          ? (dpSelection.minActiveErrorMessage | translate: { minActive: minActiveCount })\n          : maxActiveError\n            ? (dpSelection.maxActiveErrorMessage | translate: { maxActive: maxActiveCount })\n            : null\n      \"\n      [tooltip]=\"\n        minActiveError\n          ? (dpSelection.minActiveErrorMessage | translate: { minActive: minActiveCount })\n          : maxActiveError\n            ? (dpSelection.maxActiveErrorMessage | translate: { maxActive: maxActiveCount })\n            : null\n      \"\n      type=\"button\"\n      [delay]=\"500\"\n    >\n      <i\n        class=\"status major\"\n        [c8yIcon]=\"'warning'\"\n      ></i>\n    </button>\n  }\n\n  @if (hasDifferentUnits) {\n    <button\n      class=\"btn-clean\"\n      [attr.aria-label]=\"differentUnitsMessageError | translate\"\n      [tooltip]=\"differentUnitsMessageError | translate\"\n      type=\"button\"\n      [delay]=\"500\"\n    >\n      <i\n        class=\"text-warning\"\n        [c8yIcon]=\"'warning'\"\n      ></i>\n    </button>\n  }\n</c8y-widget-config-feedback>\n", dependencies: [{ kind: "component", type: DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle", "removeTitle"], outputs: ["isValid", "change"] }, { kind: "directive", type: 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: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: WidgetConfigFeedbackComponent, selector: "c8y-widget-config-feedback" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: WidgetDatapointsSelectorComponent, decorators: [{
             type: Component,
@@ -1686,5 +2011,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AXIS_TYPES, AddButtonTypes, CHART_LINE_TYPES, CHART_RENDER_TYPES, DATAPOINT_LIBRARY_FRAGMENT, DatapointAttributesFormComponent, DatapointAttributesFormValidationService, DatapointLabelPipe, DatapointLibraryService, DatapointSelectionListComponent, DatapointSelectorComponent, DatapointSelectorListItemComponent, DatapointSelectorModalComponent, DatapointSelectorModule, DatapointSelectorService, DatapointTemplatePopoverComponent, IncludesDatapointPipe, WidgetDatapointsSelectorComponent };
+export { AXIS_TYPES, AddButtonTypes, CHART_LINE_TYPES, CHART_RENDER_TYPES, DATAPOINT_LIBRARY_FRAGMENT, DATA_POINT_TOTAL_TYPES, DATA_POINT_VALUE_TYPES, DEFAULT_RENDER_TYPE_LINE_TYPES, DatapointAttributesFormComponent, DatapointAttributesFormValidationService, DatapointLabelPipe, DatapointLibraryService, DatapointSelectionListComponent, DatapointSelectorComponent, DatapointSelectorListItemComponent, DatapointSelectorModalComponent, DatapointSelectorModule, DatapointSelectorService, DatapointTemplatePopoverComponent, IncludesDatapointPipe, WidgetDatapointsSelectorComponent };
 //# sourceMappingURL=c8y-ngx-components-datapoint-selector.mjs.map