@c8y/ngx-components 1021.22.139 → 1021.22.140

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

@@ -138,24 +138,18 @@ class DatapointAttributesFormValidationService {
         return [Validators.required, Validators.minLength(4)];
     }
     getLabelValidators() {
-        return [Validators.required, Validators.minLength(1), Validators.maxLength(120)];
+        return [Validators.required, Validators.minLength(1)];
     }
     getDescriptionValidators() {
         return [];
     }
     getFragmentValidators() {
-        return [
-            Validators.required,
-            Validators.minLength(1),
-            Validators.maxLength(120),
-            Validators.pattern(/^[^.]*$/)
-        ];
+        return [Validators.required, Validators.minLength(1), Validators.pattern(/^[^.]*$/)];
     }
     getSeriesValidators() {
         return [
             Validators.required,
             Validators.minLength(1),
-            Validators.maxLength(120),
             (control) => {
                 const forbidden = control.value?.includes('.') || '';
                 return forbidden
@@ -236,6 +230,8 @@ class DatapointAttributesFormComponent {
         this.showRedRange = true;
         this.showChart = true;
         this.showFormIfTemplateWasSelected = false;
+        /** Displays all errors even if the form was not touched yet. */
+        this.showErrorsImmediately = false;
         this.rawValue = {};
         this.CHART_RENDER_TYPES = Array.from(CHART_RENDER_TYPES);
         this.CHART_LINE_TYPES = Array.from(CHART_LINE_TYPES);
@@ -249,6 +245,11 @@ class DatapointAttributesFormComponent {
         this.initializeFormVisibility();
         this.filterChartTypes();
     }
+    ngAfterViewInit() {
+        if (this.showErrorsImmediately) {
+            this.formGroup.markAllAsTouched();
+        }
+    }
     validate(_control) {
         if (this.formGroup?.get('series')?.errors?.noPeriods) {
             return this.formGroup?.get('series')?.errors;
@@ -323,7 +324,7 @@ class DatapointAttributesFormComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointAttributesFormComponent, deps: [{ token: DatapointAttributesFormValidationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DatapointAttributesFormComponent, selector: "c8y-datapoint-attributes-form", inputs: { selectableChartRenderTypes: "selectableChartRenderTypes", selectableChartLineTypes: "selectableChartLineTypes", selectableAxisTypes: "selectableAxisTypes", showTarget: "showTarget", showRange: "showRange", showYellowRange: "showYellowRange", showRedRange: "showRedRange", showChart: "showChart", showFormIfTemplateWasSelected: "showFormIfTemplateWasSelected" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DatapointAttributesFormComponent, selector: "c8y-datapoint-attributes-form", inputs: { selectableChartRenderTypes: "selectableChartRenderTypes", selectableChartLineTypes: "selectableChartLineTypes", selectableAxisTypes: "selectableAxisTypes", showTarget: "showTarget", showRange: "showRange", showYellowRange: "showYellowRange", showRedRange: "showRedRange", showChart: "showChart", showFormIfTemplateWasSelected: "showFormIfTemplateWasSelected", showErrorsImmediately: "showErrorsImmediately" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DatapointAttributesFormComponent),
@@ -368,6 +369,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 type: Input
             }], showFormIfTemplateWasSelected: [{
                 type: Input
+            }], showErrorsImmediately: [{
+                type: Input
             }] } });
 
 const DATAPOINT_LIBRARY_FRAGMENT = 'c8y_Kpi';
@@ -776,7 +779,7 @@ class DatapointSelectorListItemComponent {
                 useExisting: forwardRef(() => DatapointSelectorListItemComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "dragHandle", first: true, predicate: ListItemDragHandleComponent, descendants: true }], ngImport: i0, template: "<c8y-li class=\"c8y-list__item__collapse--container-small\" [formGroup]=\"formGroup\" #li>\n  <c8y-li-drag-handle><ng-content select=\"c8y-li-drag-handle\"></ng-content></c8y-li-drag-handle>\n  <c8y-li-checkbox\n    class=\"a-s-center p-r-0\"\n    *ngIf=\"showActiveToggle\"\n    [displayAsSwitch]=\"true\"\n    formControlName=\"__active\"\n    (click)=\"$event.stopPropagation()\"\n  ></c8y-li-checkbox>\n\n  <div class=\"d-flex a-i-center p-l-16\">\n    <div class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-0\" [title]=\"'Change color' | translate\">\n      <div class=\"c8y-colorpicker\">\n        <input\n          type=\"color\"\n          [attr.aria-label]=\"'Color' | translate\"\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      type=\"button\"\n      [attr.aria-expanded]=\"!li.collapsed\"\n      (click)=\"li.collapsed = !li.collapsed\"\n    >\n      <span class=\"text-truncate\" [title]=\"formGroup.value.details?.label\">\n        <c8y-highlight\n          [text]=\"formGroup.value.details?.label\"\n          [pattern]=\"highlightText\"\n          [shouldTrimPattern]=\"true\"\n        ></c8y-highlight>\n      </span>\n      <small class=\"text-truncate text-muted icon-flex\" *ngIf=\"formGroup.value.__target\">\n        <i c8yIcon=\"exchange\"></i>\n        <span class=\"text-truncate\">{{ formGroup.value.__target.name }}</span>\n      </small>\n    </button>\n\n    <button\n      class=\"btn btn-dot btn-dot--danger m-l-auto\"\n      type=\"button\"\n      [attr.aria-label]=\"'Invalid' | translate\"\n      [popover]=\"\n        errorMessage\n          ? errorMessage\n          : ('Some entries are invalid. Check the input fields with red borders.' | translate)\n      \"\n      triggers=\"focus\"\n      placement=\"left\"\n      container=\"body\"\n      *ngIf=\"!(isValid$ | async)\"\n    >\n      <i c8yIcon=\"warning\"></i>\n    </button>\n    <div class=\"m-l-auto a-s-center p-r-4\" *ngIf=\"showAddRemoveButton\">\n      <button\n        class=\"btn btn-dot btn-dot--danger\"\n        type=\"button\"\n        [attr.aria-label]=\"'Remove' | translate\"\n        [tooltip]=\"'Remove from selected data points' | translate\"\n        [delay]=\"500\"\n        (click)=\"addOrRemoveItem()\"\n        *ngIf=\"isSelected\"\n        [attr.data-cy]=\"'datapoint-selector-list-item--remove-datapoint-button'\"\n      >\n        <i class=\"icon-20\" c8yIcon=\"minus-circle\"></i>\n      </button>\n      <button\n        class=\"btn btn-dot text-primary\"\n        type=\"button\"\n        [attr.aria-label]=\"'Add to selected data points' | translate\"\n        [tooltip]=\"'Add to selected data points' | translate\"\n        [delay]=\"500\"\n        [disabled]=\"!(isValid$ | async)\"\n        (click)=\"addOrRemoveItem()\"\n        *ngIf=\"!isSelected\"\n        [attr.data-cy]=\"'datapoint-selector-list-item--add-datapoint-button'\"\n      >\n        <i class=\"text-primary icon-20\" c8yIcon=\"plus-circle\"></i>\n      </button>\n    </div>\n  </div>\n\n  <c8y-li-action\n    *ngIf=\"optionToRemove\"\n    [icon]=\"'minus-circle'\"\n    [label]=\"'Remove from list' | translate\"\n    (click)=\"remove()\"\n  ></c8y-li-action>\n  <c8y-li-action\n    *ngFor=\"let action of actions\"\n    [icon]=\"action.icon\"\n    [label]=\"action.label\"\n    (click)=\"action.callback(formGroup.value)\"\n  ></c8y-li-action>\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 class=\"small m-b-0 m-r-8 a-s-start text-muted\" translate>Fragment</label>\n          <span class=\"m-l-auto\">\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 class=\"small m-b-0 m-r-8 a-s-start text-muted\" translate>Series</label>\n          <span class=\"m-l-auto\">\n            <c8y-highlight\n              [text]=\"formGroup.value.series\"\n              [pattern]=\"highlightText\"\n              [shouldTrimPattern]=\"true\"\n            ></c8y-highlight>\n          </span>\n        </li>\n      </ul>\n      <div\n        class=\"form-group\"\n        *ngIf=\"datapointLibraryEntries && datapointLibraryEntries | async as libraryEntries\"\n      >\n        <label class=\"d-inline-block\" translate>Data point template</label>\n        <button\n          class=\"btn-help btn-help--sm\"\n          type=\"button\"\n          [attr.aria-label]=\"'Help' | translate\"\n          [popover]=\"datapointHintPopoverTemplate\"\n          (click)=\"$event.stopPropagation()\"\n          triggers=\"focus\"\n          placement=\"top\"\n          container=\"body\"\n        ></button>\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=\"d-flex\">\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            *ngIf=\"datapointLibraryEntries\"\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 [text]=\"item.c8y_Kpi?.label\" [pattern]=\"pattern\"></c8y-highlight>\n              <c8y-li-icon icon=\"circle\" [style.color]=\"item.c8y_Kpi?.color\"></c8y-li-icon>\n            </c8y-li>\n            <ng-template #notFoundTemplate>\n              <c8y-li class=\"bg-level-2 p-8\" *ngIf=\"pattern.length > 0\">\n                <span>No match found.</span>\n              </c8y-li>\n            </ng-template>\n          </c8y-typeahead>\n          <button\n            class=\"btn btn-info btn-xs btn-icon a-s-center m-l-8\"\n            type=\"button\"\n            [attr.aria-label]=\"'Info' | translate\"\n            [popover]=\"datapointOverviewPopoverTemplate\"\n            placement=\"left\"\n            triggers=\"focus\"\n            container=\"body\"\n            *ngIf=\"formGroup.value.__template\"\n          >\n            <i class=\"text-info\" c8yIcon=\"info\"></i>\n          </button>\n          <button\n            class=\"btn btn-danger btn-xs btn-icon a-s-center m-l-8\"\n            type=\"button\"\n            tooltip=\"{{ 'Unlink data point template' | translate }}\"\n            [attr.aria-label]=\"'Unlink data point template' | translate\"\n            triggers=\"mouseenter\"\n            [delay]=\"500\"\n            *ngIf=\"formGroup.value.__template && hasUnlinkTemplateOption\"\n            (click)=\"unlinkDatapointTemplate()\"\n          >\n            <i c8yIcon=\"unlink\"></i>\n          </button>\n        </div>\n      </div>\n      <ng-template #datapointOverviewPopoverTemplate>\n        <c8y-datapoint-template-popover\n          [datapoint]=\"formGroup.value.details\"\n        ></c8y-datapoint-template-popover>\n      </ng-template>\n      <c8y-datapoint-attributes-form\n        *ngIf=\"defaultFormOptions\"\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        formControlName=\"details\"\n      ></c8y-datapoint-attributes-form>\n    </div>\n  </c8y-li-collapse>\n</c8y-li>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: i2.TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemActionComponent, selector: "c8y-list-item-action, c8y-li-action", inputs: ["label", "icon", "disabled"], outputs: ["click"] }, { kind: "component", type: i2.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: i2.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: i2.ListItemDragHandleComponent, selector: "c8y-list-item-drag-handle, c8y-li-drag-handle" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "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: "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"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
+        ], queries: [{ propertyName: "dragHandle", first: true, predicate: ListItemDragHandleComponent, descendants: true }], ngImport: i0, template: "<c8y-li class=\"c8y-list__item__collapse--container-small\" [formGroup]=\"formGroup\" #li>\n  <c8y-li-drag-handle><ng-content select=\"c8y-li-drag-handle\"></ng-content></c8y-li-drag-handle>\n  <c8y-li-checkbox\n    class=\"a-s-center p-r-0\"\n    *ngIf=\"showActiveToggle\"\n    [displayAsSwitch]=\"true\"\n    formControlName=\"__active\"\n    (click)=\"$event.stopPropagation()\"\n  ></c8y-li-checkbox>\n\n  <div class=\"d-flex a-i-center p-l-16\">\n    <div class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-0\" [title]=\"'Change color' | translate\">\n      <div class=\"c8y-colorpicker\">\n        <input\n          type=\"color\"\n          [attr.aria-label]=\"'Color' | translate\"\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      type=\"button\"\n      [attr.aria-expanded]=\"!li.collapsed\"\n      (click)=\"li.collapsed = !li.collapsed\"\n    >\n      <span class=\"text-truncate\" [title]=\"formGroup.value.details?.label\">\n        <c8y-highlight\n          [text]=\"formGroup.value.details?.label\"\n          [pattern]=\"highlightText\"\n          [shouldTrimPattern]=\"true\"\n        ></c8y-highlight>\n      </span>\n      <small class=\"text-truncate text-muted icon-flex\" *ngIf=\"formGroup.value.__target\">\n        <i c8yIcon=\"exchange\"></i>\n        <span class=\"text-truncate\">{{ formGroup.value.__target.name }}</span>\n      </small>\n    </button>\n\n    <button\n      class=\"btn btn-dot btn-dot--danger m-l-auto\"\n      type=\"button\"\n      [attr.aria-label]=\"'Invalid' | translate\"\n      [popover]=\"\n        errorMessage\n          ? errorMessage\n          : ('Some entries are invalid. Check the input fields with red borders.' | translate)\n      \"\n      triggers=\"focus\"\n      placement=\"left\"\n      container=\"body\"\n      *ngIf=\"!(isValid$ | async)\"\n    >\n      <i c8yIcon=\"warning\"></i>\n    </button>\n    <div class=\"m-l-auto a-s-center p-r-4\" *ngIf=\"showAddRemoveButton\">\n      <button\n        class=\"btn btn-dot btn-dot--danger\"\n        type=\"button\"\n        [attr.aria-label]=\"'Remove' | translate\"\n        [tooltip]=\"'Remove from selected data points' | translate\"\n        [delay]=\"500\"\n        (click)=\"addOrRemoveItem()\"\n        *ngIf=\"isSelected\"\n        [attr.data-cy]=\"'datapoint-selector-list-item--remove-datapoint-button'\"\n      >\n        <i class=\"icon-20\" c8yIcon=\"minus-circle\"></i>\n      </button>\n      <button\n        class=\"btn btn-dot text-primary\"\n        type=\"button\"\n        [attr.aria-label]=\"'Add to selected data points' | translate\"\n        [tooltip]=\"'Add to selected data points' | translate\"\n        [delay]=\"500\"\n        [disabled]=\"!(isValid$ | async)\"\n        (click)=\"addOrRemoveItem()\"\n        *ngIf=\"!isSelected\"\n        [attr.data-cy]=\"'datapoint-selector-list-item--add-datapoint-button'\"\n      >\n        <i class=\"text-primary icon-20\" c8yIcon=\"plus-circle\"></i>\n      </button>\n    </div>\n  </div>\n\n  <c8y-li-action\n    *ngIf=\"optionToRemove\"\n    [icon]=\"'minus-circle'\"\n    [label]=\"'Remove from list' | translate\"\n    (click)=\"remove()\"\n  ></c8y-li-action>\n  <c8y-li-action\n    *ngFor=\"let action of actions\"\n    [icon]=\"action.icon\"\n    [label]=\"action.label\"\n    (click)=\"action.callback(formGroup.value)\"\n  ></c8y-li-action>\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      <div\n        class=\"form-group\"\n        *ngIf=\"datapointLibraryEntries && datapointLibraryEntries | async as libraryEntries\"\n      >\n        <label class=\"d-inline-block\" translate>Data point template</label>\n        <button\n          class=\"btn-help btn-help--sm\"\n          type=\"button\"\n          [attr.aria-label]=\"'Help' | translate\"\n          [popover]=\"datapointHintPopoverTemplate\"\n          (click)=\"$event.stopPropagation()\"\n          triggers=\"focus\"\n          placement=\"top\"\n          container=\"body\"\n        ></button>\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=\"d-flex\">\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            *ngIf=\"datapointLibraryEntries\"\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 [text]=\"item.c8y_Kpi?.label\" [pattern]=\"pattern\"></c8y-highlight>\n              <c8y-li-icon icon=\"circle\" [style.color]=\"item.c8y_Kpi?.color\"></c8y-li-icon>\n            </c8y-li>\n            <ng-template #notFoundTemplate>\n              <c8y-li class=\"bg-level-2 p-8\" *ngIf=\"pattern.length > 0\">\n                <span>No match found.</span>\n              </c8y-li>\n            </ng-template>\n          </c8y-typeahead>\n          <button\n            class=\"btn btn-info btn-xs btn-icon a-s-center m-l-8\"\n            type=\"button\"\n            [attr.aria-label]=\"'Info' | translate\"\n            [popover]=\"datapointOverviewPopoverTemplate\"\n            placement=\"left\"\n            triggers=\"focus\"\n            container=\"body\"\n            *ngIf=\"formGroup.value.__template\"\n          >\n            <i class=\"text-info\" c8yIcon=\"info\"></i>\n          </button>\n          <button\n            class=\"btn btn-danger btn-xs btn-icon a-s-center m-l-8\"\n            type=\"button\"\n            tooltip=\"{{ 'Unlink data point template' | translate }}\"\n            [attr.aria-label]=\"'Unlink data point template' | translate\"\n            triggers=\"mouseenter\"\n            [delay]=\"500\"\n            *ngIf=\"formGroup.value.__template && hasUnlinkTemplateOption\"\n            (click)=\"unlinkDatapointTemplate()\"\n          >\n            <i c8yIcon=\"unlink\"></i>\n          </button>\n        </div>\n      </div>\n      <ng-template #datapointOverviewPopoverTemplate>\n        <c8y-datapoint-template-popover\n          [datapoint]=\"formGroup.value.details\"\n        ></c8y-datapoint-template-popover>\n      </ng-template>\n      <c8y-datapoint-attributes-form\n        *ngIf=\"defaultFormOptions\"\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        [showErrorsImmediately]=\"true\"\n        formControlName=\"details\"\n      ></c8y-datapoint-attributes-form>\n    </div>\n  </c8y-li-collapse>\n</c8y-li>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: i2.TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemActionComponent, selector: "c8y-list-item-action, c8y-li-action", inputs: ["label", "icon", "disabled"], outputs: ["click"] }, { kind: "component", type: i2.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: i2.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: i2.ListItemDragHandleComponent, selector: "c8y-list-item-drag-handle, c8y-li-drag-handle" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "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: "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", "showErrorsImmediately"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatapointSelectorListItemComponent, decorators: [{
             type: Component,
@@ -791,7 +794,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                             useExisting: forwardRef(() => DatapointSelectorListItemComponent),
                             multi: true
                         }
-                    ], template: "<c8y-li class=\"c8y-list__item__collapse--container-small\" [formGroup]=\"formGroup\" #li>\n  <c8y-li-drag-handle><ng-content select=\"c8y-li-drag-handle\"></ng-content></c8y-li-drag-handle>\n  <c8y-li-checkbox\n    class=\"a-s-center p-r-0\"\n    *ngIf=\"showActiveToggle\"\n    [displayAsSwitch]=\"true\"\n    formControlName=\"__active\"\n    (click)=\"$event.stopPropagation()\"\n  ></c8y-li-checkbox>\n\n  <div class=\"d-flex a-i-center p-l-16\">\n    <div class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-0\" [title]=\"'Change color' | translate\">\n      <div class=\"c8y-colorpicker\">\n        <input\n          type=\"color\"\n          [attr.aria-label]=\"'Color' | translate\"\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      type=\"button\"\n      [attr.aria-expanded]=\"!li.collapsed\"\n      (click)=\"li.collapsed = !li.collapsed\"\n    >\n      <span class=\"text-truncate\" [title]=\"formGroup.value.details?.label\">\n        <c8y-highlight\n          [text]=\"formGroup.value.details?.label\"\n          [pattern]=\"highlightText\"\n          [shouldTrimPattern]=\"true\"\n        ></c8y-highlight>\n      </span>\n      <small class=\"text-truncate text-muted icon-flex\" *ngIf=\"formGroup.value.__target\">\n        <i c8yIcon=\"exchange\"></i>\n        <span class=\"text-truncate\">{{ formGroup.value.__target.name }}</span>\n      </small>\n    </button>\n\n    <button\n      class=\"btn btn-dot btn-dot--danger m-l-auto\"\n      type=\"button\"\n      [attr.aria-label]=\"'Invalid' | translate\"\n      [popover]=\"\n        errorMessage\n          ? errorMessage\n          : ('Some entries are invalid. Check the input fields with red borders.' | translate)\n      \"\n      triggers=\"focus\"\n      placement=\"left\"\n      container=\"body\"\n      *ngIf=\"!(isValid$ | async)\"\n    >\n      <i c8yIcon=\"warning\"></i>\n    </button>\n    <div class=\"m-l-auto a-s-center p-r-4\" *ngIf=\"showAddRemoveButton\">\n      <button\n        class=\"btn btn-dot btn-dot--danger\"\n        type=\"button\"\n        [attr.aria-label]=\"'Remove' | translate\"\n        [tooltip]=\"'Remove from selected data points' | translate\"\n        [delay]=\"500\"\n        (click)=\"addOrRemoveItem()\"\n        *ngIf=\"isSelected\"\n        [attr.data-cy]=\"'datapoint-selector-list-item--remove-datapoint-button'\"\n      >\n        <i class=\"icon-20\" c8yIcon=\"minus-circle\"></i>\n      </button>\n      <button\n        class=\"btn btn-dot text-primary\"\n        type=\"button\"\n        [attr.aria-label]=\"'Add to selected data points' | translate\"\n        [tooltip]=\"'Add to selected data points' | translate\"\n        [delay]=\"500\"\n        [disabled]=\"!(isValid$ | async)\"\n        (click)=\"addOrRemoveItem()\"\n        *ngIf=\"!isSelected\"\n        [attr.data-cy]=\"'datapoint-selector-list-item--add-datapoint-button'\"\n      >\n        <i class=\"text-primary icon-20\" c8yIcon=\"plus-circle\"></i>\n      </button>\n    </div>\n  </div>\n\n  <c8y-li-action\n    *ngIf=\"optionToRemove\"\n    [icon]=\"'minus-circle'\"\n    [label]=\"'Remove from list' | translate\"\n    (click)=\"remove()\"\n  ></c8y-li-action>\n  <c8y-li-action\n    *ngFor=\"let action of actions\"\n    [icon]=\"action.icon\"\n    [label]=\"action.label\"\n    (click)=\"action.callback(formGroup.value)\"\n  ></c8y-li-action>\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 class=\"small m-b-0 m-r-8 a-s-start text-muted\" translate>Fragment</label>\n          <span class=\"m-l-auto\">\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 class=\"small m-b-0 m-r-8 a-s-start text-muted\" translate>Series</label>\n          <span class=\"m-l-auto\">\n            <c8y-highlight\n              [text]=\"formGroup.value.series\"\n              [pattern]=\"highlightText\"\n              [shouldTrimPattern]=\"true\"\n            ></c8y-highlight>\n          </span>\n        </li>\n      </ul>\n      <div\n        class=\"form-group\"\n        *ngIf=\"datapointLibraryEntries && datapointLibraryEntries | async as libraryEntries\"\n      >\n        <label class=\"d-inline-block\" translate>Data point template</label>\n        <button\n          class=\"btn-help btn-help--sm\"\n          type=\"button\"\n          [attr.aria-label]=\"'Help' | translate\"\n          [popover]=\"datapointHintPopoverTemplate\"\n          (click)=\"$event.stopPropagation()\"\n          triggers=\"focus\"\n          placement=\"top\"\n          container=\"body\"\n        ></button>\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=\"d-flex\">\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            *ngIf=\"datapointLibraryEntries\"\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 [text]=\"item.c8y_Kpi?.label\" [pattern]=\"pattern\"></c8y-highlight>\n              <c8y-li-icon icon=\"circle\" [style.color]=\"item.c8y_Kpi?.color\"></c8y-li-icon>\n            </c8y-li>\n            <ng-template #notFoundTemplate>\n              <c8y-li class=\"bg-level-2 p-8\" *ngIf=\"pattern.length > 0\">\n                <span>No match found.</span>\n              </c8y-li>\n            </ng-template>\n          </c8y-typeahead>\n          <button\n            class=\"btn btn-info btn-xs btn-icon a-s-center m-l-8\"\n            type=\"button\"\n            [attr.aria-label]=\"'Info' | translate\"\n            [popover]=\"datapointOverviewPopoverTemplate\"\n            placement=\"left\"\n            triggers=\"focus\"\n            container=\"body\"\n            *ngIf=\"formGroup.value.__template\"\n          >\n            <i class=\"text-info\" c8yIcon=\"info\"></i>\n          </button>\n          <button\n            class=\"btn btn-danger btn-xs btn-icon a-s-center m-l-8\"\n            type=\"button\"\n            tooltip=\"{{ 'Unlink data point template' | translate }}\"\n            [attr.aria-label]=\"'Unlink data point template' | translate\"\n            triggers=\"mouseenter\"\n            [delay]=\"500\"\n            *ngIf=\"formGroup.value.__template && hasUnlinkTemplateOption\"\n            (click)=\"unlinkDatapointTemplate()\"\n          >\n            <i c8yIcon=\"unlink\"></i>\n          </button>\n        </div>\n      </div>\n      <ng-template #datapointOverviewPopoverTemplate>\n        <c8y-datapoint-template-popover\n          [datapoint]=\"formGroup.value.details\"\n        ></c8y-datapoint-template-popover>\n      </ng-template>\n      <c8y-datapoint-attributes-form\n        *ngIf=\"defaultFormOptions\"\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        formControlName=\"details\"\n      ></c8y-datapoint-attributes-form>\n    </div>\n  </c8y-li-collapse>\n</c8y-li>\n" }]
+                    ], template: "<c8y-li class=\"c8y-list__item__collapse--container-small\" [formGroup]=\"formGroup\" #li>\n  <c8y-li-drag-handle><ng-content select=\"c8y-li-drag-handle\"></ng-content></c8y-li-drag-handle>\n  <c8y-li-checkbox\n    class=\"a-s-center p-r-0\"\n    *ngIf=\"showActiveToggle\"\n    [displayAsSwitch]=\"true\"\n    formControlName=\"__active\"\n    (click)=\"$event.stopPropagation()\"\n  ></c8y-li-checkbox>\n\n  <div class=\"d-flex a-i-center p-l-16\">\n    <div class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-0\" [title]=\"'Change color' | translate\">\n      <div class=\"c8y-colorpicker\">\n        <input\n          type=\"color\"\n          [attr.aria-label]=\"'Color' | translate\"\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      type=\"button\"\n      [attr.aria-expanded]=\"!li.collapsed\"\n      (click)=\"li.collapsed = !li.collapsed\"\n    >\n      <span class=\"text-truncate\" [title]=\"formGroup.value.details?.label\">\n        <c8y-highlight\n          [text]=\"formGroup.value.details?.label\"\n          [pattern]=\"highlightText\"\n          [shouldTrimPattern]=\"true\"\n        ></c8y-highlight>\n      </span>\n      <small class=\"text-truncate text-muted icon-flex\" *ngIf=\"formGroup.value.__target\">\n        <i c8yIcon=\"exchange\"></i>\n        <span class=\"text-truncate\">{{ formGroup.value.__target.name }}</span>\n      </small>\n    </button>\n\n    <button\n      class=\"btn btn-dot btn-dot--danger m-l-auto\"\n      type=\"button\"\n      [attr.aria-label]=\"'Invalid' | translate\"\n      [popover]=\"\n        errorMessage\n          ? errorMessage\n          : ('Some entries are invalid. Check the input fields with red borders.' | translate)\n      \"\n      triggers=\"focus\"\n      placement=\"left\"\n      container=\"body\"\n      *ngIf=\"!(isValid$ | async)\"\n    >\n      <i c8yIcon=\"warning\"></i>\n    </button>\n    <div class=\"m-l-auto a-s-center p-r-4\" *ngIf=\"showAddRemoveButton\">\n      <button\n        class=\"btn btn-dot btn-dot--danger\"\n        type=\"button\"\n        [attr.aria-label]=\"'Remove' | translate\"\n        [tooltip]=\"'Remove from selected data points' | translate\"\n        [delay]=\"500\"\n        (click)=\"addOrRemoveItem()\"\n        *ngIf=\"isSelected\"\n        [attr.data-cy]=\"'datapoint-selector-list-item--remove-datapoint-button'\"\n      >\n        <i class=\"icon-20\" c8yIcon=\"minus-circle\"></i>\n      </button>\n      <button\n        class=\"btn btn-dot text-primary\"\n        type=\"button\"\n        [attr.aria-label]=\"'Add to selected data points' | translate\"\n        [tooltip]=\"'Add to selected data points' | translate\"\n        [delay]=\"500\"\n        [disabled]=\"!(isValid$ | async)\"\n        (click)=\"addOrRemoveItem()\"\n        *ngIf=\"!isSelected\"\n        [attr.data-cy]=\"'datapoint-selector-list-item--add-datapoint-button'\"\n      >\n        <i class=\"text-primary icon-20\" c8yIcon=\"plus-circle\"></i>\n      </button>\n    </div>\n  </div>\n\n  <c8y-li-action\n    *ngIf=\"optionToRemove\"\n    [icon]=\"'minus-circle'\"\n    [label]=\"'Remove from list' | translate\"\n    (click)=\"remove()\"\n  ></c8y-li-action>\n  <c8y-li-action\n    *ngFor=\"let action of actions\"\n    [icon]=\"action.icon\"\n    [label]=\"action.label\"\n    (click)=\"action.callback(formGroup.value)\"\n  ></c8y-li-action>\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      <div\n        class=\"form-group\"\n        *ngIf=\"datapointLibraryEntries && datapointLibraryEntries | async as libraryEntries\"\n      >\n        <label class=\"d-inline-block\" translate>Data point template</label>\n        <button\n          class=\"btn-help btn-help--sm\"\n          type=\"button\"\n          [attr.aria-label]=\"'Help' | translate\"\n          [popover]=\"datapointHintPopoverTemplate\"\n          (click)=\"$event.stopPropagation()\"\n          triggers=\"focus\"\n          placement=\"top\"\n          container=\"body\"\n        ></button>\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=\"d-flex\">\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            *ngIf=\"datapointLibraryEntries\"\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 [text]=\"item.c8y_Kpi?.label\" [pattern]=\"pattern\"></c8y-highlight>\n              <c8y-li-icon icon=\"circle\" [style.color]=\"item.c8y_Kpi?.color\"></c8y-li-icon>\n            </c8y-li>\n            <ng-template #notFoundTemplate>\n              <c8y-li class=\"bg-level-2 p-8\" *ngIf=\"pattern.length > 0\">\n                <span>No match found.</span>\n              </c8y-li>\n            </ng-template>\n          </c8y-typeahead>\n          <button\n            class=\"btn btn-info btn-xs btn-icon a-s-center m-l-8\"\n            type=\"button\"\n            [attr.aria-label]=\"'Info' | translate\"\n            [popover]=\"datapointOverviewPopoverTemplate\"\n            placement=\"left\"\n            triggers=\"focus\"\n            container=\"body\"\n            *ngIf=\"formGroup.value.__template\"\n          >\n            <i class=\"text-info\" c8yIcon=\"info\"></i>\n          </button>\n          <button\n            class=\"btn btn-danger btn-xs btn-icon a-s-center m-l-8\"\n            type=\"button\"\n            tooltip=\"{{ 'Unlink data point template' | translate }}\"\n            [attr.aria-label]=\"'Unlink data point template' | translate\"\n            triggers=\"mouseenter\"\n            [delay]=\"500\"\n            *ngIf=\"formGroup.value.__template && hasUnlinkTemplateOption\"\n            (click)=\"unlinkDatapointTemplate()\"\n          >\n            <i c8yIcon=\"unlink\"></i>\n          </button>\n        </div>\n      </div>\n      <ng-template #datapointOverviewPopoverTemplate>\n        <c8y-datapoint-template-popover\n          [datapoint]=\"formGroup.value.details\"\n        ></c8y-datapoint-template-popover>\n      </ng-template>\n      <c8y-datapoint-attributes-form\n        *ngIf=\"defaultFormOptions\"\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        [showErrorsImmediately]=\"true\"\n        formControlName=\"details\"\n      ></c8y-datapoint-attributes-form>\n    </div>\n  </c8y-li-collapse>\n</c8y-li>\n" }]
         }], ctorParameters: () => [{ type: i4.FormBuilder }], propDecorators: { defaultFormOptions: [{
                 type: Input
             }], isSelected: [{