@c8y/ngx-components 1024.20.1 → 1024.21.3

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

@@ -1130,7 +1130,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    @if (addButtonType === AddButtonTypes.addRemove) {\n      <div class=\"datapoint-selector-list-item__primary-action 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 datapoint-selector-list-item__primary-action\"\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    <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 | datapointLabel\"\n      >\n        <c8y-highlight\n          [text]=\"formGroup.value.details?.label | datapointLabel\"\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 (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]=\"templateForTypeahead\"\n                  [ngModelOptions]=\"{ standalone: true }\"\n                  (onSearch)=\"setPipe($event)\"\n                  [displayProperty]=\"'translatedLabel'\"\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 | datapointLabel\"\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" }, { kind: "pipe", type: DatapointLabelPipe, name: "datapointLabel" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+        ], 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    @if (addButtonType === AddButtonTypes.addRemove) {\n      <div class=\"datapoint-selector-list-item__primary-action 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 datapoint-selector-list-item__primary-action\"\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    <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 | datapointLabel\"\n      >\n        <c8y-highlight\n          [text]=\"formGroup.value.details?.label | datapointLabel\"\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 (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]=\"templateForTypeahead\"\n                  [ngModelOptions]=\"{ standalone: true }\"\n                  (onSearch)=\"setPipe($event)\"\n                  [displayProperty]=\"'translatedLabel'\"\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 | datapointLabel\"\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", "selectOnClick"], 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", "ariaLabel", "ariaLabelledby", "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" }, { kind: "pipe", type: DatapointLabelPipe, name: "datapointLabel" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DatapointSelectorListItemComponent, decorators: [{
             type: Component,
@@ -1369,7 +1369,7 @@ class DatapointSelectorComponent {
                 multi: true,
                 useExisting: forwardRef(() => DatapointSelectorComponent)
             }
-        ], ngImport: i0, template: "<div class=\"datapoint-selector__skip-links\">\n  <button\n    class=\"btn btn-default btn-sm sr-only sr-only-focusable\"\n    type=\"button\"\n    [c8ySkipLink]=\"'datapoint-selector-available'\"\n  >\n    {{ 'Skip to available data points' | translate }}\n  </button>\n  @if (!hideSelection) {\n    <button\n      class=\"btn btn-default btn-sm sr-only sr-only-focusable\"\n      type=\"button\"\n      [c8ySkipLink]=\"'datapoint-selector-selected'\"\n    >\n      {{ 'Skip to selected data points' | translate }}\n    </button>\n  }\n</div>\n\n<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  @if (allowChangingContext) {\n    <div\n      class=\"d-flex d-col p-relative bg-level-1\"\n      [attr.aria-label]=\"'Assets' | translate\"\n      role=\"region\"\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  }\n  <!-- center column -->\n  <!-- named by aria-label rather than by the heading below, because the heading is replaced by an\n       empty state until an asset is picked and a region without a name is not a landmark -->\n  <div\n    class=\"inner-scroll bg-component\"\n    [attr.aria-label]=\"selectorTitle | translate\"\n    id=\"datapoint-selector-available\"\n    tabindex=\"-1\"\n    role=\"region\"\n  >\n    @if (assetSelection | async; as asset) {\n      <div class=\"bg-inherit\">\n        <div class=\"p-l-16 p-r-16 p-t-8 p-b-8 sticky-top bg-inherit separator-bottom\">\n          <h2\n            class=\"h5 text-medium text-truncate\"\n            [title]=\"selectorTitle | translate\"\n          >\n            {{ selectorTitle | translate }}\n          </h2>\n          @if (!loadingDatapoints) {\n            <div\n              class=\"input-group input-group-search m-t-4\"\n              id=\"search\"\n            >\n              <input\n                class=\"form-control\"\n                [attr.aria-label]=\"'Search' | translate\"\n                placeholder=\"{{ 'Search\u2026' | translate }}\"\n                type=\"search\"\n                [ngModel]=\"searchString\"\n                (ngModelChange)=\"searchStringChanged($event)\"\n              />\n              <span class=\"input-group-addon\">\n                @if (!searchString) {\n                  <i c8yIcon=\"search\"></i>\n                } @else {\n                  <i\n                    class=\"text-muted\"\n                    c8yIcon=\"times\"\n                    (click)=\"searchStringChanged()\"\n                  ></i>\n                }\n              </span>\n            </div>\n          }\n        </div>\n        @if (filteredDatapoints$ | async; as filteredDatapoints) {\n          @if (!loadingDatapoints) {\n            @if (datapoints$ | async; as datapoints) {\n              @if (!filteredDatapoints.length) {\n                <div class=\"p-16\">\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\n              <c8y-list-group>\n                @if (\n                  datapoints.length > maxNumberOfDatapoints &&\n                  filteredDatapoints.length >= maxNumberOfDatapoints\n                ) {\n                  <c8y-list-item\n                    class=\"sticky-top\"\n                    style=\"top: 72px\"\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                }\n                @for (dp of filteredDatapoints; track trackByFn($index, dp)) {\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]=\"\n                      hideSelection ? AddButtonTypes.select : AddButtonTypes.addRemove\n                    \"\n                    (added)=\"datapointAdded($event)\"\n                    (removed)=\"datapointRemoved($event)\"\n                    [highlightText]=\"searchStringChanges$ | async\"\n                    [editable]=\"itemsEditable\"\n                  ></c8y-datapoint-selector-list-item>\n                }\n              </c8y-list-group>\n            }\n          } @else {\n            <div class=\"p-16 text-center\">\n              <c8y-loading></c8y-loading>\n            </div>\n          }\n        } @else {\n          <div class=\"p-16 text-center\">\n            <c8y-loading></c8y-loading>\n          </div>\n        }\n      </div>\n    } @else {\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    }\n  </div>\n  <!-- last column  -->\n  @if (!hideSelection) {\n    <div\n      class=\"inner-scroll bg-level-1\"\n      aria-labelledby=\"datapoint-selector-selected-title\"\n      id=\"datapoint-selector-selected\"\n      tabindex=\"-1\"\n      role=\"region\"\n    >\n      <h2\n        class=\"h5 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        id=\"datapoint-selector-selected-title\"\n      >\n        {{ selectedListTitle | translate }}\n      </h2>\n      @if (selectedDatapoints?.length) {\n        <div class=\"d-flex flex-wrap gap-8 p-l-16 p-r-16 p-t-8 p-b-16\">\n          @for (selectedDp of selectedDatapoints; track selectedDp) {\n            <div class=\"c8y-datapoint-pill\">\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                  @if (selectedDp?.__target?.name) {\n                    <small class=\"text-muted text-10\">\n                      {{ selectedDp?.__target?.name }}\n                    </small>\n                  }\n                </span>\n              </div>\n            </div>\n          }\n        </div>\n      }\n      @if (!selectedDatapoints || !selectedDatapoints.length) {\n        <div class=\"p-r-8\">\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      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "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: SkipLinkDirective, selector: "[c8ySkipLink]", inputs: ["c8ySkipLink"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: IncludesDatapointPipe, name: "includesDatapoint" }, { kind: "pipe", type: DatapointLabelPipe, name: "datapointLabel" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+        ], ngImport: i0, template: "<div class=\"datapoint-selector__skip-links\">\n  <button\n    class=\"btn btn-default btn-sm sr-only sr-only-focusable\"\n    type=\"button\"\n    [c8ySkipLink]=\"'datapoint-selector-available'\"\n  >\n    {{ 'Skip to available data points' | translate }}\n  </button>\n  @if (!hideSelection) {\n    <button\n      class=\"btn btn-default btn-sm sr-only sr-only-focusable\"\n      type=\"button\"\n      [c8ySkipLink]=\"'datapoint-selector-selected'\"\n    >\n      {{ 'Skip to selected data points' | translate }}\n    </button>\n  }\n</div>\n\n<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  @if (allowChangingContext) {\n    <div\n      class=\"d-flex d-col p-relative bg-level-1\"\n      [attr.aria-label]=\"'Assets' | translate\"\n      role=\"region\"\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  }\n  <!-- center column -->\n  <!-- named by aria-label rather than by the heading below, because the heading is replaced by an\n       empty state until an asset is picked and a region without a name is not a landmark -->\n  <div\n    class=\"inner-scroll bg-component\"\n    [attr.aria-label]=\"selectorTitle | translate\"\n    id=\"datapoint-selector-available\"\n    tabindex=\"-1\"\n    role=\"region\"\n  >\n    @if (assetSelection | async; as asset) {\n      <div class=\"bg-inherit\">\n        <div class=\"p-l-16 p-r-16 p-t-8 p-b-8 sticky-top bg-inherit separator-bottom\">\n          <h2\n            class=\"h5 text-medium text-truncate\"\n            [title]=\"selectorTitle | translate\"\n          >\n            {{ selectorTitle | translate }}\n          </h2>\n          @if (!loadingDatapoints) {\n            <div\n              class=\"input-group input-group-search m-t-4\"\n              id=\"search\"\n            >\n              <input\n                class=\"form-control\"\n                [attr.aria-label]=\"'Search' | translate\"\n                placeholder=\"{{ 'Search\u2026' | translate }}\"\n                type=\"search\"\n                [ngModel]=\"searchString\"\n                (ngModelChange)=\"searchStringChanged($event)\"\n              />\n              <span class=\"input-group-addon\">\n                @if (!searchString) {\n                  <i c8yIcon=\"search\"></i>\n                } @else {\n                  <i\n                    class=\"text-muted\"\n                    c8yIcon=\"times\"\n                    (click)=\"searchStringChanged()\"\n                  ></i>\n                }\n              </span>\n            </div>\n          }\n        </div>\n        @if (filteredDatapoints$ | async; as filteredDatapoints) {\n          @if (!loadingDatapoints) {\n            @if (datapoints$ | async; as datapoints) {\n              @if (!filteredDatapoints.length) {\n                <div class=\"p-16\">\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\n              <c8y-list-group>\n                @if (\n                  datapoints.length > maxNumberOfDatapoints &&\n                  filteredDatapoints.length >= maxNumberOfDatapoints\n                ) {\n                  <c8y-list-item\n                    class=\"sticky-top\"\n                    style=\"top: 72px\"\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                }\n                @for (dp of filteredDatapoints; track trackByFn($index, dp)) {\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]=\"\n                      hideSelection ? AddButtonTypes.select : AddButtonTypes.addRemove\n                    \"\n                    (added)=\"datapointAdded($event)\"\n                    (removed)=\"datapointRemoved($event)\"\n                    [highlightText]=\"searchStringChanges$ | async\"\n                    [editable]=\"itemsEditable\"\n                  ></c8y-datapoint-selector-list-item>\n                }\n              </c8y-list-group>\n            }\n          } @else {\n            <div class=\"p-16 text-center\">\n              <c8y-loading></c8y-loading>\n            </div>\n          }\n        } @else {\n          <div class=\"p-16 text-center\">\n            <c8y-loading></c8y-loading>\n          </div>\n        }\n      </div>\n    } @else {\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    }\n  </div>\n  <!-- last column  -->\n  @if (!hideSelection) {\n    <div\n      class=\"inner-scroll bg-level-1\"\n      aria-labelledby=\"datapoint-selector-selected-title\"\n      id=\"datapoint-selector-selected\"\n      tabindex=\"-1\"\n      role=\"region\"\n    >\n      <h2\n        class=\"h5 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        id=\"datapoint-selector-selected-title\"\n      >\n        {{ selectedListTitle | translate }}\n      </h2>\n      @if (selectedDatapoints?.length) {\n        <div class=\"d-flex flex-wrap gap-8 p-l-16 p-r-16 p-t-8 p-b-16\">\n          @for (selectedDp of selectedDatapoints; track selectedDp) {\n            <div class=\"c8y-datapoint-pill\">\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                  @if (selectedDp?.__target?.name) {\n                    <small class=\"text-muted text-10\">\n                      {{ selectedDp?.__target?.name }}\n                    </small>\n                  }\n                </span>\n              </div>\n            </div>\n          }\n        </div>\n      }\n      @if (!selectedDatapoints || !selectedDatapoints.length) {\n        <div class=\"p-r-8\">\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      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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", "selectOnClick"], outputs: ["collapsedChange"] }, { 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: SkipLinkDirective, selector: "[c8ySkipLink]", inputs: ["c8ySkipLink"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: IncludesDatapointPipe, name: "includesDatapoint" }, { kind: "pipe", type: DatapointLabelPipe, name: "datapointLabel" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DatapointSelectorComponent, decorators: [{
             type: Component,