@c8y/ngx-components 1024.15.13 → 1024.16.10

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

@@ -8,7 +8,7 @@ import { CollapseModule } from 'ngx-bootstrap/collapse';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import * as i1$2 from 'ngx-bootstrap/modal';
 import { ModalModule } from 'ngx-bootstrap/modal';
-import * as i5 from 'ngx-bootstrap/popover';
+import * as i6 from 'ngx-bootstrap/popover';
 import { PopoverDirective, PopoverModule } from 'ngx-bootstrap/popover';
 import { TooltipDirective, TooltipModule } from 'ngx-bootstrap/tooltip';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -18,7 +18,7 @@ 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 * as i5 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$1 from '@c8y/client';
@@ -294,34 +294,10 @@ class DatapointAttributesFormValidationService {
             name: [undefined, []]
         });
     }
-    convertStringToNumber(possibleString) {
-        if (typeof possibleString === 'string') {
-            try {
-                return Number.parseFloat(possibleString);
-            }
-            catch {
-                return undefined;
-            }
-        }
-        else {
-            return possibleString;
-        }
-    }
-    /**
-     * 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).
+     * and legacy format (only has renderType/renderTypes/renderTypeColors). Falls back to `avg`,
+     * matching the default the attributes form starts with.
      */
     buildRenderTypeConfigs(backend) {
         if (backend.renderTypeConfigs) {
@@ -347,6 +323,31 @@ class DatapointAttributesFormValidationService {
         }
         return configs;
     }
+    convertStringToNumber(possibleString) {
+        if (typeof possibleString === 'string') {
+            try {
+                return Number.parseFloat(possibleString);
+            }
+            catch {
+                return undefined;
+            }
+        }
+        else {
+            return possibleString;
+        }
+    }
+    /**
+     * 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';
+    }
     /**
      * Derives the `renderTypes` array from `renderTypeConfigs`.
      * If configs exist, returns enabled types; otherwise falls back to `chart.renderTypes`.
@@ -442,8 +443,18 @@ class DatapointAttributesFormComponent {
         }
         this.updateRenderAsBandState();
         if (this.shouldForceInitialValidation) {
+            const validBefore = this.formGroup.valid;
             queueMicrotask(() => {
-                this.formGroup.updateValueAndValidity();
+                // CVA contract: a writeValue must not echo a value change. Validate silently.
+                this.formGroup.updateValueAndValidity({ emitEvent: false });
+                // Only notify the host when the outcome actually changed. Angular's validator-change hook
+                // runs updateValueAndValidity() on the host control, which emits a value event that is
+                // indistinguishable from a user edit further up: the list item then re-emits the datapoint
+                // enriched with its own control defaults, the parent rebuilds the widget config and the
+                // chart refetches. Re-running validation that cannot change anything is not worth a reload.
+                if (this.formGroup.valid !== validBefore) {
+                    this.onValidatorChange?.();
+                }
             });
             this.shouldForceInitialValidation = false;
         }
@@ -456,6 +467,9 @@ class DatapointAttributesFormComponent {
     registerOnTouched(fn) {
         this.formGroup.valueChanges.pipe(take(1)).subscribe(fn);
     }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
+    }
     setDisabledState(isDisabled) {
         if (this.formGroup?.disabled === isDisabled) {
             return;
@@ -971,8 +985,9 @@ class DatapointSelectorListItemComponent {
         }
         return this.formGroup?.valid ? null : { formInvalid: {} };
     }
-    writeValue(obj) {
-        this.formGroup.patchValue({ ...obj, details: obj });
+    writeValue(datapoint) {
+        // CVA contract: a model→view write must not re-emit through registerOnChange.
+        this.formGroup.patchValue(this.toFormValue(datapoint), { emitEvent: false });
     }
     registerOnChange(fn) {
         this.formGroup.valueChanges.pipe(map(tmp => this.transformFormValue(tmp))).subscribe(fn);
@@ -984,7 +999,12 @@ class DatapointSelectorListItemComponent {
         if (this.formGroup?.disabled === isDisabled) {
             return;
         }
-        isDisabled ? this.formGroup.disable() : this.formGroup.enable();
+        if (isDisabled) {
+            this.formGroup.disable();
+        }
+        else {
+            this.formGroup.enable();
+        }
     }
     collapse() {
         this.isCollapsed = !this.isCollapsed;
@@ -1038,7 +1058,8 @@ class DatapointSelectorListItemComponent {
             const value = template[DATAPOINT_LIBRARY_FRAGMENT][attribute];
             dataPoint[attribute] = value;
         }
-        this.writeValue(dataPoint);
+        // A user selection must propagate to the parent form, unlike a writeValue.
+        this.formGroup.patchValue(this.toFormValue(dataPoint));
         this.setPipe('');
     }
     resetUnusedProperties(details) {
@@ -1062,6 +1083,10 @@ class DatapointSelectorListItemComponent {
             typeof mo[DATAPOINT_LIBRARY_FRAGMENT].label === 'string' &&
             mo[DATAPOINT_LIBRARY_FRAGMENT].label.toLowerCase().indexOf(filterStr.toLowerCase()) > -1);
     }
+    /** Inverse of transformFormValue: expands a flat datapoint into the form's { details } shape. */
+    toFormValue(datapoint) {
+        return { ...datapoint, details: datapoint };
+    }
     transformFormValue(formValue) {
         const obj = Object.assign({}, formValue.details || {}, formValue);
         delete obj.details;
@@ -1474,10 +1499,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
         }], ctorParameters: () => [{ type: i1$2.BsModalService }] });
 
 class DatapointSelectionListComponent {
-    constructor(datapointSelector, datapointLibrary, formBuilder, widgetComponent) {
+    constructor(datapointSelector, datapointLibrary, formBuilder, formValidations, widgetComponent) {
         this.datapointSelector = datapointSelector;
         this.datapointLibrary = datapointLibrary;
         this.formBuilder = formBuilder;
+        this.formValidations = formValidations;
         this.widgetComponent = widgetComponent;
         this.actions = [];
         /**
@@ -1532,15 +1558,8 @@ class DatapointSelectionListComponent {
         };
     }
     writeValue(datapoints) {
-        this.formArray.clear();
-        if (datapoints?.length) {
-            datapoints.forEach(dp => {
-                const formgroup = this.formBuilder.group({ details: [] });
-                formgroup.patchValue({ details: dp });
-                this.formArray.push(formgroup);
-            });
-        }
-        this.calculateMaxActiveCount();
+        // CVA contract: a model→view write must not re-emit through registerOnChange.
+        this.setDatapoints(datapoints, { emitEvent: false });
     }
     registerOnChange(fn) {
         this.formArray.valueChanges
@@ -1562,7 +1581,8 @@ class DatapointSelectionListComponent {
             allowSearch: !this.config?.contextAsset
         })
             .then(result => {
-            this.writeValue(result);
+            // A user selection must propagate to the parent form, unlike a writeValue.
+            this.setDatapoints(result);
         }, () => {
             // nothing to do, modal was closed
         });
@@ -1628,6 +1648,31 @@ class DatapointSelectionListComponent {
         moveItemInArray(currentSorting, event.previousIndex, event.currentIndex);
         this.formArray.setValue(currentSorting);
     }
+    setDatapoints(datapoints, options) {
+        this.formArray.clear(options);
+        if (datapoints?.length) {
+            datapoints.forEach(dp => {
+                const formgroup = this.formBuilder.group({ details: [] });
+                formgroup.patchValue({ details: this.withRenderTypeConfigs(dp) });
+                this.formArray.push(formgroup, options);
+            });
+        }
+        this.calculateMaxActiveCount();
+    }
+    /**
+     * A datapoint coming out of the selector modal carries no `renderTypeConfigs`, and the attributes
+     * form is not allowed to emit its defaults back up through the ControlValueAccessor chain.
+     * Without them the aggregation checkboxes read as empty and toggling one is a no-op.
+     */
+    withRenderTypeConfigs(datapoint) {
+        if (!this.defaultFormOptions?.showChart || !datapoint || datapoint.renderTypeConfigs) {
+            return datapoint;
+        }
+        return {
+            ...datapoint,
+            renderTypeConfigs: this.formValidations.buildRenderTypeConfigs(datapoint)
+        };
+    }
     transformValue(formArrayValue) {
         if (!formArrayValue) {
             return [];
@@ -1653,7 +1698,7 @@ class DatapointSelectionListComponent {
         this.formArray.setValidators(validators);
         this.formArray.updateValueAndValidity();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DatapointSelectionListComponent, deps: [{ token: DatapointSelectorService }, { token: DatapointLibraryService }, { token: i1.FormBuilder }, { token: i4.WidgetConfigComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DatapointSelectionListComponent, deps: [{ token: DatapointSelectorService }, { token: DatapointLibraryService }, { token: i1.FormBuilder }, { token: DatapointAttributesFormValidationService }, { token: i5.WidgetConfigComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", 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,
@@ -1665,7 +1710,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 (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" }] }); }
+        ], 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: i6.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.19", ngImport: i0, type: DatapointSelectionListComponent, decorators: [{
             type: Component,
@@ -1694,7 +1739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         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: [{
+        }], ctorParameters: () => [{ type: DatapointSelectorService }, { type: DatapointLibraryService }, { type: i1.FormBuilder }, { type: DatapointAttributesFormValidationService }, { type: i5.WidgetConfigComponent, decorators: [{
                     type: Optional
                 }] }], propDecorators: { actions: [{
                 type: Input