@c8y/ngx-components 1023.14.219 → 1023.14.222

package/fesm2022/c8y-ngx-components-datapoint-library-details.mjs

@@ -232,11 +232,11 @@ class DatapointLibraryDetailsComponent {
         return cleanedupValues;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DatapointLibraryDetailsComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.InventoryService }, { token: i3.FormBuilder }, { token: i4.AlertService }, { token: i1.Router }, { token: i5.TranslateService }, { token: i4.ColorService }, { token: i6.DatapointParserService }, { token: i7.DatapointSelectorService }, { token: DATAPOINT_LIBRARY_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: DatapointLibraryDetailsComponent, isStandalone: true, selector: "c8y-datapoint-library-details", ngImport: i0, template: "<c8y-title *ngIf=\"!isLoading\">\n  {{ formGroup.value?.label }}\n  <small *ngIf=\"formGroup.value?.fragment && formGroup.value?.series\">\n    {{ formGroup.value?.fragment }} / {{ formGroup.value?.series }}\n  </small>\n</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-tools'\"\n    [label]=\"'Configuration' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-data-points'\"\n    [label]=\"'Data point library' | translate\"\n    [path]=\"path\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-data-points'\"\n    [label]=\"formGroup.value?.label\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<form\n  (ngSubmit)=\"formGroup.valid && save(formGroup.value)\"\n  (change)=\"formChange()\"\n  [formGroup]=\"formGroup\"\n  class=\"card content-fullpage card--grid grid__col--6-6--md grid__row--fit-auto\"\n  novalidate\n>\n  <div class=\"card-header large-padding separator grid__col--fullspan\">\n    <div class=\"card-title\">\n      {{ formGroup.value?.label }}\n    </div>\n  </div>\n  <div *ngIf=\"!isLoading\" class=\"d-contents\">\n    <div class=\"inner-scroll bg-level-0 flex-grow\">\n      <div class=\"card-block large-padding\">\n        <div class=\"d-flex\">\n          <c8y-form-group>\n            <label translate>Color</label>\n            <div class=\"data-point-color form-control\">\n              <div class=\"c8y-colorpicker\">\n                <input\n                  [attr.aria-label]=\"'Color picker' | translate\"\n                  type=\"color\"\n                  name=\"color\"\n                  formControlName=\"color\"\n                />\n                <span [style.background-color]=\"formGroup.value?.color\"></span>\n              </div>\n            </div>\n          </c8y-form-group>\n          <c8y-form-group class=\"flex-grow p-l-8\">\n            <label translate>Label</label>\n            <input\n              class=\"form-control\"\n              formControlName=\"label\"\n              name=\"label\"\n              [placeholder]=\"'e.g. Temperature' | translate\"\n              type=\"text\"\n            />\n            <c8y-messages\n              [show]=\"formGroup.controls?.label?.touched && formGroup.controls?.label?.errors\"\n            ></c8y-messages>\n          </c8y-form-group>\n        </div>\n        <c8y-form-group>\n          <label translate>Description</label>\n          <textarea\n            class=\"form-control\"\n            formControlName=\"description\"\n            name=\"description\"\n            [placeholder]=\"'e.g. Ambient Temperature in Celsius' | translate\"\n            rows=\"3\"\n          ></textarea>\n        </c8y-form-group>\n\n        <div class=\"d-flex a-i-center gap-8\">\n          <c8y-form-group class=\"flex-grow\">\n            <label translate>Fragment</label>\n            <input\n              class=\"form-control\"\n              name=\"fragment\"\n              formControlName=\"fragment\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Temperature' }\"\n              type=\"text\"\n            />\n            <c8y-messages\n              [show]=\"formGroup.controls?.fragment?.touched && formGroup.controls?.fragment?.errors\"\n            ></c8y-messages>\n          </c8y-form-group>\n\n          <c8y-form-group class=\"flex-grow\">\n            <label translate>Series</label>\n            <input\n              class=\"form-control\"\n              formControlName=\"series\"\n              name=\"series\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'T' }\"\n              type=\"text\"\n            />\n            <c8y-messages\n              [show]=\"formGroup.controls?.series?.touched && formGroup.controls?.series?.errors\"\n            ></c8y-messages>\n          </c8y-form-group>\n          <div class=\"flex-no-grow\">\n            <button\n              class=\"btn btn-default p-l-8 p-r-8\"\n              (click)=\"pickDatapoint()\"\n              type=\"button\"\n              [tooltip]=\"'Load fragment and series from an existing data point' | translate\"\n              [delay]=\"500\"\n              [attr.aria-label]=\"'Load fragment and series from an existing data point' | translate\"\n            >\n              <i c8yIcon=\"eyedropper\"></i>\n            </button>\n          </div>\n        </div>\n\n        <div class=\"row\" *ngIf=\"config?.showCheckboxForGlobalFragment\">\n          <div class=\"col-sm-6\">\n            <c8y-form-group>\n              <label class=\"c8y-checkbox\">\n                <input name=\"c8y_Global\" formControlName=\"c8y_Global\" type=\"checkbox\" />\n                <span></span>\n                <span translate>Globally available</span>\n                <button\n                  class=\"btn-help\"\n                  type=\"button\"\n                  [attr.aria-label]=\"'Help' | translate\"\n                  [popover]=\"\n                    'Will make this entry available to all users on the tenant if checked.'\n                      | translate\n                  \"\n                  placement=\"right\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                ></button>\n              </label>\n            </c8y-form-group>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"inner-scroll bg-level-1\">\n      <div class=\"card-block large-padding\">\n        <fieldset class=\"c8y-fieldset\">\n          <legend translate>Preview</legend>\n          <c8y-range-display [config]=\"rangeConfig\" class=\"m-b-16 d-block\"></c8y-range-display>\n        </fieldset>\n\n        <fieldset class=\"c8y-fieldset\">\n          <legend translate>Range</legend>\n          <div class=\"row\" formGroupName=\"range\">\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.min?.errors }\"\n              >\n                <label translate>Min</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"min\"\n                  formControlName=\"min\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 0 }\"\n                />\n                <c8y-messages [show]=\"range?.touched && range.controls?.min?.errors\"></c8y-messages>\n              </c8y-form-group>\n            </div>\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.max?.errors }\"\n              >\n                <label translate>Max</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"max\"\n                  formControlName=\"max\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n                />\n                <c8y-messages [show]=\"range?.touched && range.controls?.max?.errors\"></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-md-6\">\n              <c8y-form-group>\n                <label translate>Unit</label>\n                <input\n                  class=\"form-control\"\n                  name=\"unit\"\n                  formControlName=\"unit\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: '\u00BAC' }\"\n                />\n                <c8y-messages\n                  [show]=\"formGroup.controls?.unit?.touched && formGroup.controls?.unit?.errors\"\n                ></c8y-messages>\n              </c8y-form-group>\n            </div>\n\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{\n                  'has-error':\n                    (range?.touched || formGroup.controls?.target?.touched) &&\n                    formGroup.controls?.target?.errors\n                }\"\n              >\n                <label translate>Target</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"target\"\n                  formControlName=\"target\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 25 }\"\n                />\n                <c8y-messages\n                  [show]=\"\n                    (range?.touched || formGroup.controls?.target?.touched) &&\n                    formGroup.controls?.target?.errors\n                  \"\n                ></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n        </fieldset>\n\n        <fieldset class=\"c8y-fieldset\" formGroupName=\"yellowRange\">\n          <legend translate>Yellow range</legend>\n          <div class=\"row\">\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{\n                  'has-error':\n                    (range?.touched || yellowRange?.touched) && yellowRange?.controls?.min?.errors\n                }\"\n              >\n                <label translate>Min</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"min\"\n                  formControlName=\"min\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 50 }\"\n                />\n                <c8y-messages\n                  [show]=\"\n                    (range?.touched || yellowRange?.touched) && yellowRange.controls?.min?.errors\n                  \"\n                ></c8y-messages>\n              </c8y-form-group>\n            </div>\n\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{\n                  'has-error':\n                    (range?.touched || yellowRange?.touched) && yellowRange?.controls?.max?.errors\n                }\"\n              >\n                <label translate>Max</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"max\"\n                  formControlName=\"max\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n                />\n                <c8y-messages\n                  [show]=\"\n                    (range?.touched || yellowRange?.touched) && yellowRange.controls?.max?.errors\n                  \"\n                ></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n        </fieldset>\n\n        <fieldset class=\"c8y-fieldset\" formGroupName=\"redRange\">\n          <legend translate>Red range</legend>\n          <div class=\"row\">\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{\n                  'has-error':\n                    (range?.touched || redRange?.touched) && redRange?.controls?.min?.errors\n                }\"\n              >\n                <label translate>Min</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"min\"\n                  formControlName=\"min\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n                />\n                <c8y-messages\n                  [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.min?.errors\"\n                ></c8y-messages>\n              </c8y-form-group>\n            </div>\n\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{\n                  'has-error':\n                    (range?.touched || redRange?.touched) && redRange?.controls?.max?.errors\n                }\"\n              >\n                <label translate>Max</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"max\"\n                  formControlName=\"max\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n                />\n                <c8y-messages\n                  [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.max?.errors\"\n                ></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n  <div class=\"card-footer separator grid__col--fullspan\">\n    <button class=\"btn btn-default\" type=\"button\" [title]=\"'Cancel' | translate\" (click)=\"cancel()\">\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary btn-form\"\n      type=\"submit\"\n      [title]=\"'Save' | translate\"\n      *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN', 'ROLE_INVENTORY_UPDATE']; allowAny: true\"\n      [disabled]=\"formGroup.invalid || formGroup.pristine\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "component", type: i4.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i4.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: i4.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i4.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "component", type: i4.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i4.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i4.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i4.RangeDisplayComponent, selector: "c8y-range-display", inputs: ["config", "display"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i10.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DatapointLibraryDetailsComponent, isStandalone: true, selector: "c8y-datapoint-library-details", ngImport: i0, template: "@if (!isLoading) {\n  <c8y-title>\n    {{ formGroup.value | datapointLabel }}\n    @if (formGroup.value?.fragment && formGroup.value?.series) {\n      <small>{{ formGroup.value?.fragment }} / {{ formGroup.value?.series }}</small>\n    }\n  </c8y-title>\n\n  <c8y-breadcrumb>\n    <c8y-breadcrumb-item\n      [icon]=\"'c8y-tools'\"\n      [label]=\"'Configuration' | translate\"\n    ></c8y-breadcrumb-item>\n    <c8y-breadcrumb-item\n      [icon]=\"'c8y-data-points'\"\n      [label]=\"'Data point library' | translate\"\n      [path]=\"path\"\n    ></c8y-breadcrumb-item>\n    <c8y-breadcrumb-item\n      [icon]=\"'c8y-data-points'\"\n      [label]=\"formGroup.value | datapointLabel\"\n    ></c8y-breadcrumb-item>\n  </c8y-breadcrumb>\n}\n\n<form\n  class=\"card content-fullpage card--grid grid__col--6-6--md grid__row--fit-auto\"\n  (ngSubmit)=\"formGroup.valid && save(formGroup.value)\"\n  (change)=\"formChange()\"\n  [formGroup]=\"formGroup\"\n  novalidate\n>\n  <div class=\"card-header large-padding separator grid__col--fullspan\">\n    <div class=\"card-title\">\n      {{ formGroup.value | datapointLabel }}\n    </div>\n  </div>\n  @if (!isLoading) {\n    <div class=\"d-contents\">\n      <div class=\"inner-scroll bg-level-0 flex-grow\">\n        <div class=\"card-block large-padding\">\n          <div class=\"d-flex\">\n            <c8y-form-group>\n              <label translate>Color</label>\n              <div class=\"data-point-color form-control\">\n                <div class=\"c8y-colorpicker\">\n                  <input\n                    [attr.aria-label]=\"'Color picker' | translate\"\n                    name=\"color\"\n                    type=\"color\"\n                    formControlName=\"color\"\n                  />\n                  <span [style.background-color]=\"formGroup.value?.color\"></span>\n                </div>\n              </div>\n            </c8y-form-group>\n            <c8y-form-group class=\"flex-grow p-l-8\">\n              <label translate>Label</label>\n              <input\n                class=\"form-control\"\n                name=\"label\"\n                type=\"text\"\n                formControlName=\"label\"\n                [placeholder]=\"'e.g. Temperature' | translate\"\n              />\n              <c8y-messages\n                [show]=\"formGroup.controls?.label?.touched && formGroup.controls?.label?.errors\"\n              ></c8y-messages>\n            </c8y-form-group>\n          </div>\n          <c8y-form-group>\n            <label translate>Description</label>\n            <textarea\n              class=\"form-control\"\n              name=\"description\"\n              rows=\"3\"\n              formControlName=\"description\"\n              [placeholder]=\"'e.g. Ambient Temperature in Celsius' | translate\"\n            ></textarea>\n          </c8y-form-group>\n          <div class=\"d-flex a-i-center gap-8\">\n            <c8y-form-group class=\"flex-grow\">\n              <label translate>Fragment</label>\n              <input\n                class=\"form-control\"\n                name=\"fragment\"\n                type=\"text\"\n                formControlName=\"fragment\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Temperature' }\"\n              />\n              <c8y-messages\n                [show]=\"\n                  formGroup.controls?.fragment?.touched && formGroup.controls?.fragment?.errors\n                \"\n              ></c8y-messages>\n            </c8y-form-group>\n            <c8y-form-group class=\"flex-grow\">\n              <label translate>Series</label>\n              <input\n                class=\"form-control\"\n                name=\"series\"\n                type=\"text\"\n                formControlName=\"series\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'T' }\"\n              />\n              <c8y-messages\n                [show]=\"formGroup.controls?.series?.touched && formGroup.controls?.series?.errors\"\n              ></c8y-messages>\n            </c8y-form-group>\n            <div class=\"flex-no-grow\">\n              <button\n                class=\"btn btn-default p-l-8 p-r-8\"\n                [attr.aria-label]=\"\n                  'Load fragment and series from an existing data point' | translate\n                \"\n                [tooltip]=\"'Load fragment and series from an existing data point' | translate\"\n                type=\"button\"\n                (click)=\"pickDatapoint()\"\n                [delay]=\"500\"\n              >\n                <i c8yIcon=\"eyedropper\"></i>\n              </button>\n            </div>\n          </div>\n          @if (config?.showCheckboxForGlobalFragment) {\n            <div class=\"row\">\n              <div class=\"col-sm-6\">\n                <c8y-form-group>\n                  <label class=\"c8y-checkbox\">\n                    <input\n                      name=\"c8y_Global\"\n                      type=\"checkbox\"\n                      formControlName=\"c8y_Global\"\n                    />\n                    <span></span>\n                    <span translate>Globally available</span>\n                    <button\n                      class=\"btn-help\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      [popover]=\"\n                        'Will make this entry available to all users on the tenant if checked.'\n                          | translate\n                      \"\n                      placement=\"right\"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                    ></button>\n                  </label>\n                </c8y-form-group>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      <div class=\"inner-scroll bg-level-1\">\n        <div class=\"card-block large-padding\">\n          <fieldset class=\"c8y-fieldset\">\n            <legend translate>Preview</legend>\n            <c8y-range-display\n              class=\"m-b-16 d-block\"\n              [config]=\"rangeConfig\"\n            ></c8y-range-display>\n          </fieldset>\n          <fieldset class=\"c8y-fieldset\">\n            <legend translate>Range</legend>\n            <div\n              class=\"row\"\n              formGroupName=\"range\"\n            >\n              <div class=\"col-md-6\">\n                <c8y-form-group\n                  [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.min?.errors }\"\n                >\n                  <label translate>Min</label>\n                  <input\n                    class=\"form-control\"\n                    name=\"min\"\n                    type=\"number\"\n                    formControlName=\"min\"\n                    [placeholder]=\"'e.g. {{ example }}' | translate: { example: 0 }\"\n                  />\n                  <c8y-messages\n                    [show]=\"range?.touched && range.controls?.min?.errors\"\n                  ></c8y-messages>\n                </c8y-form-group>\n              </div>\n              <div class=\"col-md-6\">\n                <c8y-form-group\n                  [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.max?.errors }\"\n                >\n                  <label translate>Max</label>\n                  <input\n                    class=\"form-control\"\n                    name=\"max\"\n                    type=\"number\"\n                    formControlName=\"max\"\n                    [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n                  />\n                  <c8y-messages\n                    [show]=\"range?.touched && range.controls?.max?.errors\"\n                  ></c8y-messages>\n                </c8y-form-group>\n              </div>\n            </div>\n            <div class=\"row\">\n              <div class=\"col-md-6\">\n                <c8y-form-group>\n                  <label translate>Unit</label>\n                  <input\n                    class=\"form-control\"\n                    name=\"unit\"\n                    formControlName=\"unit\"\n                    [placeholder]=\"'e.g. {{ example }}' | translate: { example: '\u00BAC' }\"\n                  />\n                  <c8y-messages\n                    [show]=\"formGroup.controls?.unit?.touched && formGroup.controls?.unit?.errors\"\n                  ></c8y-messages>\n                </c8y-form-group>\n              </div>\n              <div class=\"col-md-6\">\n                <c8y-form-group\n                  [ngClass]=\"{\n                    'has-error':\n                      (range?.touched || formGroup.controls?.target?.touched) &&\n                      formGroup.controls?.target?.errors\n                  }\"\n                >\n                  <label translate>Target</label>\n                  <input\n                    class=\"form-control\"\n                    name=\"target\"\n                    type=\"number\"\n                    formControlName=\"target\"\n                    [placeholder]=\"'e.g. {{ example }}' | translate: { example: 25 }\"\n                  />\n                  <c8y-messages\n                    [show]=\"\n                      (range?.touched || formGroup.controls?.target?.touched) &&\n                      formGroup.controls?.target?.errors\n                    \"\n                  ></c8y-messages>\n                </c8y-form-group>\n              </div>\n            </div>\n          </fieldset>\n          <fieldset\n            class=\"c8y-fieldset\"\n            formGroupName=\"yellowRange\"\n          >\n            <legend translate>Yellow range</legend>\n            <div class=\"row\">\n              <div class=\"col-md-6\">\n                <c8y-form-group\n                  [ngClass]=\"{\n                    'has-error':\n                      (range?.touched || yellowRange?.touched) && yellowRange?.controls?.min?.errors\n                  }\"\n                >\n                  <label translate>Min</label>\n                  <input\n                    class=\"form-control\"\n                    name=\"min\"\n                    type=\"number\"\n                    formControlName=\"min\"\n                    [placeholder]=\"'e.g. {{ example }}' | translate: { example: 50 }\"\n                  />\n                  <c8y-messages\n                    [show]=\"\n                      (range?.touched || yellowRange?.touched) && yellowRange.controls?.min?.errors\n                    \"\n                  ></c8y-messages>\n                </c8y-form-group>\n              </div>\n              <div class=\"col-md-6\">\n                <c8y-form-group\n                  [ngClass]=\"{\n                    'has-error':\n                      (range?.touched || yellowRange?.touched) && yellowRange?.controls?.max?.errors\n                  }\"\n                >\n                  <label translate>Max</label>\n                  <input\n                    class=\"form-control\"\n                    name=\"max\"\n                    type=\"number\"\n                    formControlName=\"max\"\n                    [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n                  />\n                  <c8y-messages\n                    [show]=\"\n                      (range?.touched || yellowRange?.touched) && yellowRange.controls?.max?.errors\n                    \"\n                  ></c8y-messages>\n                </c8y-form-group>\n              </div>\n            </div>\n          </fieldset>\n          <fieldset\n            class=\"c8y-fieldset\"\n            formGroupName=\"redRange\"\n          >\n            <legend translate>Red range</legend>\n            <div class=\"row\">\n              <div class=\"col-md-6\">\n                <c8y-form-group\n                  [ngClass]=\"{\n                    'has-error':\n                      (range?.touched || redRange?.touched) && redRange?.controls?.min?.errors\n                  }\"\n                >\n                  <label translate>Min</label>\n                  <input\n                    class=\"form-control\"\n                    name=\"min\"\n                    type=\"number\"\n                    formControlName=\"min\"\n                    [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n                  />\n                  <c8y-messages\n                    [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.min?.errors\"\n                  ></c8y-messages>\n                </c8y-form-group>\n              </div>\n              <div class=\"col-md-6\">\n                <c8y-form-group\n                  [ngClass]=\"{\n                    'has-error':\n                      (range?.touched || redRange?.touched) && redRange?.controls?.max?.errors\n                  }\"\n                >\n                  <label translate>Max</label>\n                  <input\n                    class=\"form-control\"\n                    name=\"max\"\n                    type=\"number\"\n                    formControlName=\"max\"\n                    [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n                  />\n                  <c8y-messages\n                    [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.max?.errors\"\n                  ></c8y-messages>\n                </c8y-form-group>\n              </div>\n            </div>\n          </fieldset>\n        </div>\n      </div>\n    </div>\n  }\n  <div class=\"card-footer separator grid__col--fullspan\">\n    <button\n      class=\"btn btn-default\"\n      [title]=\"'Cancel' | translate\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary btn-form\"\n      [title]=\"'Save' | translate\"\n      type=\"submit\"\n      *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN', 'ROLE_INVENTORY_UPDATE']; allowAny: true\"\n      [disabled]=\"formGroup.invalid || formGroup.pristine\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "component", type: i4.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i4.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: i4.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i4.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "component", type: i4.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i4.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i4.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i4.RangeDisplayComponent, selector: "c8y-range-display", inputs: ["config", "display"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i10.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i7.DatapointLabelPipe, name: "datapointLabel" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DatapointLibraryDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-datapoint-library-details', standalone: true, imports: [CoreModule, RouterModule, PopoverModule, TooltipModule, DatapointSelectorModule], template: "<c8y-title *ngIf=\"!isLoading\">\n  {{ formGroup.value?.label }}\n  <small *ngIf=\"formGroup.value?.fragment && formGroup.value?.series\">\n    {{ formGroup.value?.fragment }} / {{ formGroup.value?.series }}\n  </small>\n</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-tools'\"\n    [label]=\"'Configuration' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-data-points'\"\n    [label]=\"'Data point library' | translate\"\n    [path]=\"path\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-data-points'\"\n    [label]=\"formGroup.value?.label\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<form\n  (ngSubmit)=\"formGroup.valid && save(formGroup.value)\"\n  (change)=\"formChange()\"\n  [formGroup]=\"formGroup\"\n  class=\"card content-fullpage card--grid grid__col--6-6--md grid__row--fit-auto\"\n  novalidate\n>\n  <div class=\"card-header large-padding separator grid__col--fullspan\">\n    <div class=\"card-title\">\n      {{ formGroup.value?.label }}\n    </div>\n  </div>\n  <div *ngIf=\"!isLoading\" class=\"d-contents\">\n    <div class=\"inner-scroll bg-level-0 flex-grow\">\n      <div class=\"card-block large-padding\">\n        <div class=\"d-flex\">\n          <c8y-form-group>\n            <label translate>Color</label>\n            <div class=\"data-point-color form-control\">\n              <div class=\"c8y-colorpicker\">\n                <input\n                  [attr.aria-label]=\"'Color picker' | translate\"\n                  type=\"color\"\n                  name=\"color\"\n                  formControlName=\"color\"\n                />\n                <span [style.background-color]=\"formGroup.value?.color\"></span>\n              </div>\n            </div>\n          </c8y-form-group>\n          <c8y-form-group class=\"flex-grow p-l-8\">\n            <label translate>Label</label>\n            <input\n              class=\"form-control\"\n              formControlName=\"label\"\n              name=\"label\"\n              [placeholder]=\"'e.g. Temperature' | translate\"\n              type=\"text\"\n            />\n            <c8y-messages\n              [show]=\"formGroup.controls?.label?.touched && formGroup.controls?.label?.errors\"\n            ></c8y-messages>\n          </c8y-form-group>\n        </div>\n        <c8y-form-group>\n          <label translate>Description</label>\n          <textarea\n            class=\"form-control\"\n            formControlName=\"description\"\n            name=\"description\"\n            [placeholder]=\"'e.g. Ambient Temperature in Celsius' | translate\"\n            rows=\"3\"\n          ></textarea>\n        </c8y-form-group>\n\n        <div class=\"d-flex a-i-center gap-8\">\n          <c8y-form-group class=\"flex-grow\">\n            <label translate>Fragment</label>\n            <input\n              class=\"form-control\"\n              name=\"fragment\"\n              formControlName=\"fragment\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Temperature' }\"\n              type=\"text\"\n            />\n            <c8y-messages\n              [show]=\"formGroup.controls?.fragment?.touched && formGroup.controls?.fragment?.errors\"\n            ></c8y-messages>\n          </c8y-form-group>\n\n          <c8y-form-group class=\"flex-grow\">\n            <label translate>Series</label>\n            <input\n              class=\"form-control\"\n              formControlName=\"series\"\n              name=\"series\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'T' }\"\n              type=\"text\"\n            />\n            <c8y-messages\n              [show]=\"formGroup.controls?.series?.touched && formGroup.controls?.series?.errors\"\n            ></c8y-messages>\n          </c8y-form-group>\n          <div class=\"flex-no-grow\">\n            <button\n              class=\"btn btn-default p-l-8 p-r-8\"\n              (click)=\"pickDatapoint()\"\n              type=\"button\"\n              [tooltip]=\"'Load fragment and series from an existing data point' | translate\"\n              [delay]=\"500\"\n              [attr.aria-label]=\"'Load fragment and series from an existing data point' | translate\"\n            >\n              <i c8yIcon=\"eyedropper\"></i>\n            </button>\n          </div>\n        </div>\n\n        <div class=\"row\" *ngIf=\"config?.showCheckboxForGlobalFragment\">\n          <div class=\"col-sm-6\">\n            <c8y-form-group>\n              <label class=\"c8y-checkbox\">\n                <input name=\"c8y_Global\" formControlName=\"c8y_Global\" type=\"checkbox\" />\n                <span></span>\n                <span translate>Globally available</span>\n                <button\n                  class=\"btn-help\"\n                  type=\"button\"\n                  [attr.aria-label]=\"'Help' | translate\"\n                  [popover]=\"\n                    'Will make this entry available to all users on the tenant if checked.'\n                      | translate\n                  \"\n                  placement=\"right\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                ></button>\n              </label>\n            </c8y-form-group>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"inner-scroll bg-level-1\">\n      <div class=\"card-block large-padding\">\n        <fieldset class=\"c8y-fieldset\">\n          <legend translate>Preview</legend>\n          <c8y-range-display [config]=\"rangeConfig\" class=\"m-b-16 d-block\"></c8y-range-display>\n        </fieldset>\n\n        <fieldset class=\"c8y-fieldset\">\n          <legend translate>Range</legend>\n          <div class=\"row\" formGroupName=\"range\">\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.min?.errors }\"\n              >\n                <label translate>Min</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"min\"\n                  formControlName=\"min\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 0 }\"\n                />\n                <c8y-messages [show]=\"range?.touched && range.controls?.min?.errors\"></c8y-messages>\n              </c8y-form-group>\n            </div>\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.max?.errors }\"\n              >\n                <label translate>Max</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"max\"\n                  formControlName=\"max\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n                />\n                <c8y-messages [show]=\"range?.touched && range.controls?.max?.errors\"></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-md-6\">\n              <c8y-form-group>\n                <label translate>Unit</label>\n                <input\n                  class=\"form-control\"\n                  name=\"unit\"\n                  formControlName=\"unit\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: '\u00BAC' }\"\n                />\n                <c8y-messages\n                  [show]=\"formGroup.controls?.unit?.touched && formGroup.controls?.unit?.errors\"\n                ></c8y-messages>\n              </c8y-form-group>\n            </div>\n\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{\n                  'has-error':\n                    (range?.touched || formGroup.controls?.target?.touched) &&\n                    formGroup.controls?.target?.errors\n                }\"\n              >\n                <label translate>Target</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"target\"\n                  formControlName=\"target\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 25 }\"\n                />\n                <c8y-messages\n                  [show]=\"\n                    (range?.touched || formGroup.controls?.target?.touched) &&\n                    formGroup.controls?.target?.errors\n                  \"\n                ></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n        </fieldset>\n\n        <fieldset class=\"c8y-fieldset\" formGroupName=\"yellowRange\">\n          <legend translate>Yellow range</legend>\n          <div class=\"row\">\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{\n                  'has-error':\n                    (range?.touched || yellowRange?.touched) && yellowRange?.controls?.min?.errors\n                }\"\n              >\n                <label translate>Min</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"min\"\n                  formControlName=\"min\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 50 }\"\n                />\n                <c8y-messages\n                  [show]=\"\n                    (range?.touched || yellowRange?.touched) && yellowRange.controls?.min?.errors\n                  \"\n                ></c8y-messages>\n              </c8y-form-group>\n            </div>\n\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{\n                  'has-error':\n                    (range?.touched || yellowRange?.touched) && yellowRange?.controls?.max?.errors\n                }\"\n              >\n                <label translate>Max</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"max\"\n                  formControlName=\"max\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n                />\n                <c8y-messages\n                  [show]=\"\n                    (range?.touched || yellowRange?.touched) && yellowRange.controls?.max?.errors\n                  \"\n                ></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n        </fieldset>\n\n        <fieldset class=\"c8y-fieldset\" formGroupName=\"redRange\">\n          <legend translate>Red range</legend>\n          <div class=\"row\">\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{\n                  'has-error':\n                    (range?.touched || redRange?.touched) && redRange?.controls?.min?.errors\n                }\"\n              >\n                <label translate>Min</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"min\"\n                  formControlName=\"min\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n                />\n                <c8y-messages\n                  [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.min?.errors\"\n                ></c8y-messages>\n              </c8y-form-group>\n            </div>\n\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{\n                  'has-error':\n                    (range?.touched || redRange?.touched) && redRange?.controls?.max?.errors\n                }\"\n              >\n                <label translate>Max</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"max\"\n                  formControlName=\"max\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n                />\n                <c8y-messages\n                  [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.max?.errors\"\n                ></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n  <div class=\"card-footer separator grid__col--fullspan\">\n    <button class=\"btn btn-default\" type=\"button\" [title]=\"'Cancel' | translate\" (click)=\"cancel()\">\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary btn-form\"\n      type=\"submit\"\n      [title]=\"'Save' | translate\"\n      *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN', 'ROLE_INVENTORY_UPDATE']; allowAny: true\"\n      [disabled]=\"formGroup.invalid || formGroup.pristine\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n" }]
+            args: [{ selector: 'c8y-datapoint-library-details', standalone: true, imports: [CoreModule, RouterModule, PopoverModule, TooltipModule, DatapointSelectorModule], template: "@if (!isLoading) {\n  <c8y-title>\n    {{ formGroup.value | datapointLabel }}\n    @if (formGroup.value?.fragment && formGroup.value?.series) {\n      <small>{{ formGroup.value?.fragment }} / {{ formGroup.value?.series }}</small>\n    }\n  </c8y-title>\n\n  <c8y-breadcrumb>\n    <c8y-breadcrumb-item\n      [icon]=\"'c8y-tools'\"\n      [label]=\"'Configuration' | translate\"\n    ></c8y-breadcrumb-item>\n    <c8y-breadcrumb-item\n      [icon]=\"'c8y-data-points'\"\n      [label]=\"'Data point library' | translate\"\n      [path]=\"path\"\n    ></c8y-breadcrumb-item>\n    <c8y-breadcrumb-item\n      [icon]=\"'c8y-data-points'\"\n      [label]=\"formGroup.value | datapointLabel\"\n    ></c8y-breadcrumb-item>\n  </c8y-breadcrumb>\n}\n\n<form\n  class=\"card content-fullpage card--grid grid__col--6-6--md grid__row--fit-auto\"\n  (ngSubmit)=\"formGroup.valid && save(formGroup.value)\"\n  (change)=\"formChange()\"\n  [formGroup]=\"formGroup\"\n  novalidate\n>\n  <div class=\"card-header large-padding separator grid__col--fullspan\">\n    <div class=\"card-title\">\n      {{ formGroup.value | datapointLabel }}\n    </div>\n  </div>\n  @if (!isLoading) {\n    <div class=\"d-contents\">\n      <div class=\"inner-scroll bg-level-0 flex-grow\">\n        <div class=\"card-block large-padding\">\n          <div class=\"d-flex\">\n            <c8y-form-group>\n              <label translate>Color</label>\n              <div class=\"data-point-color form-control\">\n                <div class=\"c8y-colorpicker\">\n                  <input\n                    [attr.aria-label]=\"'Color picker' | translate\"\n                    name=\"color\"\n                    type=\"color\"\n                    formControlName=\"color\"\n                  />\n                  <span [style.background-color]=\"formGroup.value?.color\"></span>\n                </div>\n              </div>\n            </c8y-form-group>\n            <c8y-form-group class=\"flex-grow p-l-8\">\n              <label translate>Label</label>\n              <input\n                class=\"form-control\"\n                name=\"label\"\n                type=\"text\"\n                formControlName=\"label\"\n                [placeholder]=\"'e.g. Temperature' | translate\"\n              />\n              <c8y-messages\n                [show]=\"formGroup.controls?.label?.touched && formGroup.controls?.label?.errors\"\n              ></c8y-messages>\n            </c8y-form-group>\n          </div>\n          <c8y-form-group>\n            <label translate>Description</label>\n            <textarea\n              class=\"form-control\"\n              name=\"description\"\n              rows=\"3\"\n              formControlName=\"description\"\n              [placeholder]=\"'e.g. Ambient Temperature in Celsius' | translate\"\n            ></textarea>\n          </c8y-form-group>\n          <div class=\"d-flex a-i-center gap-8\">\n            <c8y-form-group class=\"flex-grow\">\n              <label translate>Fragment</label>\n              <input\n                class=\"form-control\"\n                name=\"fragment\"\n                type=\"text\"\n                formControlName=\"fragment\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Temperature' }\"\n              />\n              <c8y-messages\n                [show]=\"\n                  formGroup.controls?.fragment?.touched && formGroup.controls?.fragment?.errors\n                \"\n              ></c8y-messages>\n            </c8y-form-group>\n            <c8y-form-group class=\"flex-grow\">\n              <label translate>Series</label>\n              <input\n                class=\"form-control\"\n                name=\"series\"\n                type=\"text\"\n                formControlName=\"series\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'T' }\"\n              />\n              <c8y-messages\n                [show]=\"formGroup.controls?.series?.touched && formGroup.controls?.series?.errors\"\n              ></c8y-messages>\n            </c8y-form-group>\n            <div class=\"flex-no-grow\">\n              <button\n                class=\"btn btn-default p-l-8 p-r-8\"\n                [attr.aria-label]=\"\n                  'Load fragment and series from an existing data point' | translate\n                \"\n                [tooltip]=\"'Load fragment and series from an existing data point' | translate\"\n                type=\"button\"\n                (click)=\"pickDatapoint()\"\n                [delay]=\"500\"\n              >\n                <i c8yIcon=\"eyedropper\"></i>\n              </button>\n            </div>\n          </div>\n          @if (config?.showCheckboxForGlobalFragment) {\n            <div class=\"row\">\n              <div class=\"col-sm-6\">\n                <c8y-form-group>\n                  <label class=\"c8y-checkbox\">\n                    <input\n                      name=\"c8y_Global\"\n                      type=\"checkbox\"\n                      formControlName=\"c8y_Global\"\n                    />\n                    <span></span>\n                    <span translate>Globally available</span>\n                    <button\n                      class=\"btn-help\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      [popover]=\"\n                        'Will make this entry available to all users on the tenant if checked.'\n                          | translate\n                      \"\n                      placement=\"right\"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                    ></button>\n                  </label>\n                </c8y-form-group>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      <div class=\"inner-scroll bg-level-1\">\n        <div class=\"card-block large-padding\">\n          <fieldset class=\"c8y-fieldset\">\n            <legend translate>Preview</legend>\n            <c8y-range-display\n              class=\"m-b-16 d-block\"\n              [config]=\"rangeConfig\"\n            ></c8y-range-display>\n          </fieldset>\n          <fieldset class=\"c8y-fieldset\">\n            <legend translate>Range</legend>\n            <div\n              class=\"row\"\n              formGroupName=\"range\"\n            >\n              <div class=\"col-md-6\">\n                <c8y-form-group\n                  [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.min?.errors }\"\n                >\n                  <label translate>Min</label>\n                  <input\n                    class=\"form-control\"\n                    name=\"min\"\n                    type=\"number\"\n                    formControlName=\"min\"\n                    [placeholder]=\"'e.g. {{ example }}' | translate: { example: 0 }\"\n                  />\n                  <c8y-messages\n                    [show]=\"range?.touched && range.controls?.min?.errors\"\n                  ></c8y-messages>\n                </c8y-form-group>\n              </div>\n              <div class=\"col-md-6\">\n                <c8y-form-group\n                  [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.max?.errors }\"\n                >\n                  <label translate>Max</label>\n                  <input\n                    class=\"form-control\"\n                    name=\"max\"\n                    type=\"number\"\n                    formControlName=\"max\"\n                    [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n                  />\n                  <c8y-messages\n                    [show]=\"range?.touched && range.controls?.max?.errors\"\n                  ></c8y-messages>\n                </c8y-form-group>\n              </div>\n            </div>\n            <div class=\"row\">\n              <div class=\"col-md-6\">\n                <c8y-form-group>\n                  <label translate>Unit</label>\n                  <input\n                    class=\"form-control\"\n                    name=\"unit\"\n                    formControlName=\"unit\"\n                    [placeholder]=\"'e.g. {{ example }}' | translate: { example: '\u00BAC' }\"\n                  />\n                  <c8y-messages\n                    [show]=\"formGroup.controls?.unit?.touched && formGroup.controls?.unit?.errors\"\n                  ></c8y-messages>\n                </c8y-form-group>\n              </div>\n              <div class=\"col-md-6\">\n                <c8y-form-group\n                  [ngClass]=\"{\n                    'has-error':\n                      (range?.touched || formGroup.controls?.target?.touched) &&\n                      formGroup.controls?.target?.errors\n                  }\"\n                >\n                  <label translate>Target</label>\n                  <input\n                    class=\"form-control\"\n                    name=\"target\"\n                    type=\"number\"\n                    formControlName=\"target\"\n                    [placeholder]=\"'e.g. {{ example }}' | translate: { example: 25 }\"\n                  />\n                  <c8y-messages\n                    [show]=\"\n                      (range?.touched || formGroup.controls?.target?.touched) &&\n                      formGroup.controls?.target?.errors\n                    \"\n                  ></c8y-messages>\n                </c8y-form-group>\n              </div>\n            </div>\n          </fieldset>\n          <fieldset\n            class=\"c8y-fieldset\"\n            formGroupName=\"yellowRange\"\n          >\n            <legend translate>Yellow range</legend>\n            <div class=\"row\">\n              <div class=\"col-md-6\">\n                <c8y-form-group\n                  [ngClass]=\"{\n                    'has-error':\n                      (range?.touched || yellowRange?.touched) && yellowRange?.controls?.min?.errors\n                  }\"\n                >\n                  <label translate>Min</label>\n                  <input\n                    class=\"form-control\"\n                    name=\"min\"\n                    type=\"number\"\n                    formControlName=\"min\"\n                    [placeholder]=\"'e.g. {{ example }}' | translate: { example: 50 }\"\n                  />\n                  <c8y-messages\n                    [show]=\"\n                      (range?.touched || yellowRange?.touched) && yellowRange.controls?.min?.errors\n                    \"\n                  ></c8y-messages>\n                </c8y-form-group>\n              </div>\n              <div class=\"col-md-6\">\n                <c8y-form-group\n                  [ngClass]=\"{\n                    'has-error':\n                      (range?.touched || yellowRange?.touched) && yellowRange?.controls?.max?.errors\n                  }\"\n                >\n                  <label translate>Max</label>\n                  <input\n                    class=\"form-control\"\n                    name=\"max\"\n                    type=\"number\"\n                    formControlName=\"max\"\n                    [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n                  />\n                  <c8y-messages\n                    [show]=\"\n                      (range?.touched || yellowRange?.touched) && yellowRange.controls?.max?.errors\n                    \"\n                  ></c8y-messages>\n                </c8y-form-group>\n              </div>\n            </div>\n          </fieldset>\n          <fieldset\n            class=\"c8y-fieldset\"\n            formGroupName=\"redRange\"\n          >\n            <legend translate>Red range</legend>\n            <div class=\"row\">\n              <div class=\"col-md-6\">\n                <c8y-form-group\n                  [ngClass]=\"{\n                    'has-error':\n                      (range?.touched || redRange?.touched) && redRange?.controls?.min?.errors\n                  }\"\n                >\n                  <label translate>Min</label>\n                  <input\n                    class=\"form-control\"\n                    name=\"min\"\n                    type=\"number\"\n                    formControlName=\"min\"\n                    [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n                  />\n                  <c8y-messages\n                    [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.min?.errors\"\n                  ></c8y-messages>\n                </c8y-form-group>\n              </div>\n              <div class=\"col-md-6\">\n                <c8y-form-group\n                  [ngClass]=\"{\n                    'has-error':\n                      (range?.touched || redRange?.touched) && redRange?.controls?.max?.errors\n                  }\"\n                >\n                  <label translate>Max</label>\n                  <input\n                    class=\"form-control\"\n                    name=\"max\"\n                    type=\"number\"\n                    formControlName=\"max\"\n                    [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n                  />\n                  <c8y-messages\n                    [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.max?.errors\"\n                  ></c8y-messages>\n                </c8y-form-group>\n              </div>\n            </div>\n          </fieldset>\n        </div>\n      </div>\n    </div>\n  }\n  <div class=\"card-footer separator grid__col--fullspan\">\n    <button\n      class=\"btn btn-default\"\n      [title]=\"'Cancel' | translate\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary btn-form\"\n      [title]=\"'Save' | translate\"\n      type=\"submit\"\n      *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN', 'ROLE_INVENTORY_UPDATE']; allowAny: true\"\n      [disabled]=\"formGroup.invalid || formGroup.pristine\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n" }]
         }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i2.InventoryService }, { type: i3.FormBuilder }, { type: i4.AlertService }, { type: i1.Router }, { type: i5.TranslateService }, { type: i4.ColorService }, { type: i6.DatapointParserService }, { type: i7.DatapointSelectorService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {

package/fesm2022/c8y-ngx-components-datapoint-library-details.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"c8y-ngx-components-datapoint-library-details.mjs","sources":["../../datapoint-library/details/datapoint-library-details.component.ts","../../datapoint-library/details/datapoint-library-details.component.html","../../datapoint-library/details/c8y-ngx-components-datapoint-library-details.ts"],"sourcesContent":["import { Component, Inject, OnDestroy, OnInit, Optional } from '@angular/core';\nimport { FormBuilder, FormGroup, Validators } from '@angular/forms';\nimport { ActivatedRoute, Data, Router, RouterModule } from '@angular/router';\nimport { IManagedObject, InventoryService } from '@c8y/client';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport {\n  AlertService,\n  CoreModule,\n  HumanizePipe,\n  C8yValidators,\n  ColorService\n} from '@c8y/ngx-components';\nimport { TranslateService } from '@ngx-translate/core';\nimport { get, isEmpty } from 'lodash-es';\nimport { Subscription } from 'rxjs';\nimport {\n  DatapointLibraryOptions,\n  DATAPOINT_LIBRARY_CONFIG,\n  pathToDatapointLibrary\n} from '@c8y/ngx-components/datapoint-library/model';\nimport { PopoverModule } from 'ngx-bootstrap/popover';\nimport { TooltipModule } from 'ngx-bootstrap/tooltip';\nimport { DatapointParserService } from '@c8y/ngx-components/datapoint-library/services';\nimport {\n  DatapointSelectorModule,\n  DatapointSelectorService\n} from '@c8y/ngx-components/datapoint-selector';\n\n@Component({\n  selector: 'c8y-datapoint-library-details',\n  templateUrl: './datapoint-library-details.component.html',\n  standalone: true,\n  imports: [CoreModule, RouterModule, PopoverModule, TooltipModule, DatapointSelectorModule]\n})\nexport class DatapointLibraryDetailsComponent implements OnInit, OnDestroy {\n  path = pathToDatapointLibrary;\n  formGroup: ReturnType<DatapointLibraryDetailsComponent['initForm']>;\n  range: FormGroup;\n  redRange: FormGroup;\n  yellowRange: FormGroup;\n  datapoint: IManagedObject;\n  isLoading = true;\n\n  rangeConfig = {};\n\n  routeSub: Subscription;\n\n  constructor(\n    private activatedRoute: ActivatedRoute,\n    private inventory: InventoryService,\n    private formBuilder: FormBuilder,\n    private alertService: AlertService,\n    private router: Router,\n    private translate: TranslateService,\n    private colorService: ColorService,\n    private parser: DatapointParserService,\n    private datapointSelectorService: DatapointSelectorService,\n    @Optional() @Inject(DATAPOINT_LIBRARY_CONFIG) public config: DatapointLibraryOptions\n  ) {\n    this.formGroup = this.initForm();\n  }\n\n  ngOnInit() {\n    this.routeSub = this.activatedRoute.parent.data.subscribe(data => {\n      this.load(data);\n    });\n  }\n\n  ngOnDestroy(): void {\n    if (this.routeSub) {\n      this.routeSub.unsubscribe();\n    }\n  }\n\n  async save(value) {\n    const kpiValues = this.extractKpiValuesFromFormValue(value);\n    const kpi = Object.assign({}, this.datapoint?.c8y_Kpi || {}, kpiValues);\n    const cleanedUpKpi = this.removeNullValues(kpi);\n\n    const mo: Partial<IManagedObject> = {\n      c8y_Kpi: cleanedUpKpi,\n      c8y_Global: value.c8y_Global ? {} : null\n    };\n    try {\n      if (this.datapoint?.id) {\n        mo.id = this.datapoint.id;\n        const res = await this.inventory.update(mo);\n        this.datapointUpdate(res.data);\n        this.alertService.saveSuccess(gettext('Data point library entry'))();\n      } else {\n        // during managedObject creation (POST) a fragment with the value null is actually being created and stored to the DB compared to an update (PUT) which would remove the fragment.\n        // as we don't want to have that fragment stored in DB (if set to null), we will just set it to undefined.\n        if (mo.c8y_Global === null) {\n          mo.c8y_Global = undefined;\n        }\n        const res = await this.inventory.create(mo);\n        this.datapointUpdate(res.data);\n        this.alertService.createSuccess(gettext('Data point library entry'))();\n      }\n      this.navigateBackToList();\n    } catch (e) {\n      this.alertService.addServerFailure(e);\n    }\n  }\n\n  cancel() {\n    this.navigateBackToList();\n  }\n\n  formChange() {\n    if (this.formGroup.invalid) {\n      return;\n    }\n    const kpiValues = this.extractKpiValuesFromFormValue(this.formGroup.value);\n    this.rangeConfig = Object.assign({ orientation: 'horizontal' }, kpiValues);\n  }\n\n  async pickDatapoint() {\n    try {\n      const datapoints = await this.datapointSelectorService.selectDataPoints({\n        finishWithFirstSelection: true,\n        ignoreDatapointTemplates: true,\n        guessDatapointUnit: false\n      });\n      if (datapoints.length) {\n        const datapoint = datapoints[0];\n        this.formGroup.patchValue({\n          fragment: datapoint.fragment,\n          series: datapoint.series,\n          color: datapoint.color,\n          label: datapoint.label\n        });\n        this.formGroup.markAsTouched();\n        this.formGroup.markAsDirty();\n      }\n    } catch (_e) {\n      // modal closed\n    }\n  }\n\n  private navigateBackToList() {\n    return this.router.navigate([pathToDatapointLibrary]);\n  }\n\n  private datapointUpdate(tmpDatapoint: IManagedObject) {\n    const datapoint = this.parser.parseDatapoint(tmpDatapoint);\n    this.datapoint = datapoint;\n    const {\n      fragment,\n      series,\n      description,\n      unit,\n      target,\n      label,\n      color,\n      yellowRangeMin,\n      yellowRangeMax,\n      redRangeMin,\n      redRangeMax,\n      min,\n      max\n    } = datapoint.c8y_Kpi;\n    this.formGroup.patchValue({\n      fragment,\n      series,\n      description,\n      unit,\n      target,\n      label,\n      color,\n      range: { min, max },\n      yellowRange: { min: yellowRangeMin, max: yellowRangeMax },\n      redRange: { min: redRangeMin, max: redRangeMax },\n      c8y_Global: !!datapoint.c8y_Global\n    });\n    this.formChange();\n  }\n\n  private extractKpiValuesFromFormValue(formValue: any) {\n    const { fragment, series, description, unit, target, label, color } = formValue;\n    return {\n      fragment,\n      series,\n      description,\n      unit,\n      target,\n      label,\n      color,\n      yellowRangeMin: get(formValue, 'yellowRange.min'),\n      yellowRangeMax: get(formValue, 'yellowRange.max'),\n      redRangeMin: get(formValue, 'redRange.min'),\n      redRangeMax: get(formValue, 'redRange.max'),\n      min: get(formValue, 'range.min'),\n      max: get(formValue, 'range.max')\n    };\n  }\n\n  private async load(data: Data) {\n    this.isLoading = true;\n    this.formGroup.reset();\n    const { fragment, series } = this.activatedRoute.snapshot.queryParams;\n    const humanize = new HumanizePipe();\n    const label =\n      fragment && series\n        ? humanize.transform(`${fragment} => ${series}`)\n        : this.translate.instant(gettext('New data point template'));\n    const currentDate = new Date().toISOString();\n    const color = await this.colorService.generateColor(currentDate);\n\n    const contextFallback = {\n      c8y_Kpi: {\n        label,\n        fragment,\n        series,\n        color\n      },\n      c8y_Global: !this.config?.doNotAddGlobalFragmentByDefault ? {} : null\n    };\n    const contextData = this.isContextSet(data) ? data.contextData : contextFallback;\n\n    const { id } = contextData;\n    if (id) {\n      this.datapointUpdate((await this.inventory.detail(id)).data);\n    } else {\n      this.datapointUpdate(contextData);\n    }\n    this.isLoading = false;\n  }\n\n  private isContextSet(data: Data): boolean {\n    return data && !isEmpty(data.contextData);\n  }\n\n  private initForm() {\n    this.range = this.formBuilder.group(\n      {\n        min: [undefined, []],\n        max: [undefined, []]\n      },\n      { validators: [C8yValidators.minMaxValidator(), C8yValidators.requireBothMinAndMax()] }\n    );\n    this.redRange = this.formBuilder.group(\n      {\n        min: [undefined, []],\n        max: [undefined, []]\n      },\n      { validators: [C8yValidators.minMaxValidator(), C8yValidators.requireBothMinAndMax()] }\n    );\n    this.yellowRange = this.formBuilder.group(\n      {\n        min: [undefined, []],\n        max: [undefined, []]\n      },\n      { validators: [C8yValidators.minMaxValidator(), C8yValidators.requireBothMinAndMax()] }\n    );\n    return this.formBuilder.group(\n      {\n        color: ['', [Validators.required, Validators.minLength(4)]],\n        label: ['', [Validators.required, Validators.minLength(1)]],\n        description: ['', []],\n        fragment: [\n          '',\n          [Validators.required, Validators.minLength(1), Validators.pattern(/^[^.]*$/)]\n        ],\n        series: ['', [Validators.required, Validators.minLength(1), Validators.pattern(/^[^.]*$/)]],\n        range: this.range,\n        unit: [undefined, []],\n        target: [undefined, []],\n        redRange: this.redRange,\n        yellowRange: this.yellowRange,\n        c8y_Global: [!this.config?.doNotAddGlobalFragmentByDefault, []]\n      },\n      {\n        validators: [\n          C8yValidators.withinScale('redRange.min'),\n          C8yValidators.withinScale('redRange.max'),\n          C8yValidators.withinScale('yellowRange.min'),\n          C8yValidators.withinScale('yellowRange.max'),\n          C8yValidators.withinScale('target')\n        ]\n      }\n    );\n  }\n\n  private removeNullValues(value) {\n    // remove null values before sending data to backend\n    const cleanedupValues = Object.assign({}, value);\n    Object.keys(cleanedupValues).forEach(key => {\n      if (cleanedupValues[key] === null) {\n        delete cleanedupValues[key];\n      }\n    });\n    return cleanedupValues;\n  }\n}\n","<c8y-title *ngIf=\"!isLoading\">\n  {{ formGroup.value?.label }}\n  <small *ngIf=\"formGroup.value?.fragment && formGroup.value?.series\">\n    {{ formGroup.value?.fragment }} / {{ formGroup.value?.series }}\n  </small>\n</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-tools'\"\n    [label]=\"'Configuration' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-data-points'\"\n    [label]=\"'Data point library' | translate\"\n    [path]=\"path\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-data-points'\"\n    [label]=\"formGroup.value?.label\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<form\n  (ngSubmit)=\"formGroup.valid && save(formGroup.value)\"\n  (change)=\"formChange()\"\n  [formGroup]=\"formGroup\"\n  class=\"card content-fullpage card--grid grid__col--6-6--md grid__row--fit-auto\"\n  novalidate\n>\n  <div class=\"card-header large-padding separator grid__col--fullspan\">\n    <div class=\"card-title\">\n      {{ formGroup.value?.label }}\n    </div>\n  </div>\n  <div *ngIf=\"!isLoading\" class=\"d-contents\">\n    <div class=\"inner-scroll bg-level-0 flex-grow\">\n      <div class=\"card-block large-padding\">\n        <div class=\"d-flex\">\n          <c8y-form-group>\n            <label translate>Color</label>\n            <div class=\"data-point-color form-control\">\n              <div class=\"c8y-colorpicker\">\n                <input\n                  [attr.aria-label]=\"'Color picker' | translate\"\n                  type=\"color\"\n                  name=\"color\"\n                  formControlName=\"color\"\n                />\n                <span [style.background-color]=\"formGroup.value?.color\"></span>\n              </div>\n            </div>\n          </c8y-form-group>\n          <c8y-form-group class=\"flex-grow p-l-8\">\n            <label translate>Label</label>\n            <input\n              class=\"form-control\"\n              formControlName=\"label\"\n              name=\"label\"\n              [placeholder]=\"'e.g. Temperature' | translate\"\n              type=\"text\"\n            />\n            <c8y-messages\n              [show]=\"formGroup.controls?.label?.touched && formGroup.controls?.label?.errors\"\n            ></c8y-messages>\n          </c8y-form-group>\n        </div>\n        <c8y-form-group>\n          <label translate>Description</label>\n          <textarea\n            class=\"form-control\"\n            formControlName=\"description\"\n            name=\"description\"\n            [placeholder]=\"'e.g. Ambient Temperature in Celsius' | translate\"\n            rows=\"3\"\n          ></textarea>\n        </c8y-form-group>\n\n        <div class=\"d-flex a-i-center gap-8\">\n          <c8y-form-group class=\"flex-grow\">\n            <label translate>Fragment</label>\n            <input\n              class=\"form-control\"\n              name=\"fragment\"\n              formControlName=\"fragment\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Temperature' }\"\n              type=\"text\"\n            />\n            <c8y-messages\n              [show]=\"formGroup.controls?.fragment?.touched && formGroup.controls?.fragment?.errors\"\n            ></c8y-messages>\n          </c8y-form-group>\n\n          <c8y-form-group class=\"flex-grow\">\n            <label translate>Series</label>\n            <input\n              class=\"form-control\"\n              formControlName=\"series\"\n              name=\"series\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'T' }\"\n              type=\"text\"\n            />\n            <c8y-messages\n              [show]=\"formGroup.controls?.series?.touched && formGroup.controls?.series?.errors\"\n            ></c8y-messages>\n          </c8y-form-group>\n          <div class=\"flex-no-grow\">\n            <button\n              class=\"btn btn-default p-l-8 p-r-8\"\n              (click)=\"pickDatapoint()\"\n              type=\"button\"\n              [tooltip]=\"'Load fragment and series from an existing data point' | translate\"\n              [delay]=\"500\"\n              [attr.aria-label]=\"'Load fragment and series from an existing data point' | translate\"\n            >\n              <i c8yIcon=\"eyedropper\"></i>\n            </button>\n          </div>\n        </div>\n\n        <div class=\"row\" *ngIf=\"config?.showCheckboxForGlobalFragment\">\n          <div class=\"col-sm-6\">\n            <c8y-form-group>\n              <label class=\"c8y-checkbox\">\n                <input name=\"c8y_Global\" formControlName=\"c8y_Global\" type=\"checkbox\" />\n                <span></span>\n                <span translate>Globally available</span>\n                <button\n                  class=\"btn-help\"\n                  type=\"button\"\n                  [attr.aria-label]=\"'Help' | translate\"\n                  [popover]=\"\n                    'Will make this entry available to all users on the tenant if checked.'\n                      | translate\n                  \"\n                  placement=\"right\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                ></button>\n              </label>\n            </c8y-form-group>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"inner-scroll bg-level-1\">\n      <div class=\"card-block large-padding\">\n        <fieldset class=\"c8y-fieldset\">\n          <legend translate>Preview</legend>\n          <c8y-range-display [config]=\"rangeConfig\" class=\"m-b-16 d-block\"></c8y-range-display>\n        </fieldset>\n\n        <fieldset class=\"c8y-fieldset\">\n          <legend translate>Range</legend>\n          <div class=\"row\" formGroupName=\"range\">\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.min?.errors }\"\n              >\n                <label translate>Min</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"min\"\n                  formControlName=\"min\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 0 }\"\n                />\n                <c8y-messages [show]=\"range?.touched && range.controls?.min?.errors\"></c8y-messages>\n              </c8y-form-group>\n            </div>\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.max?.errors }\"\n              >\n                <label translate>Max</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"max\"\n                  formControlName=\"max\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n                />\n                <c8y-messages [show]=\"range?.touched && range.controls?.max?.errors\"></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-md-6\">\n              <c8y-form-group>\n                <label translate>Unit</label>\n                <input\n                  class=\"form-control\"\n                  name=\"unit\"\n                  formControlName=\"unit\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'ºC' }\"\n                />\n                <c8y-messages\n                  [show]=\"formGroup.controls?.unit?.touched && formGroup.controls?.unit?.errors\"\n                ></c8y-messages>\n              </c8y-form-group>\n            </div>\n\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{\n                  'has-error':\n                    (range?.touched || formGroup.controls?.target?.touched) &&\n                    formGroup.controls?.target?.errors\n                }\"\n              >\n                <label translate>Target</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"target\"\n                  formControlName=\"target\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 25 }\"\n                />\n                <c8y-messages\n                  [show]=\"\n                    (range?.touched || formGroup.controls?.target?.touched) &&\n                    formGroup.controls?.target?.errors\n                  \"\n                ></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n        </fieldset>\n\n        <fieldset class=\"c8y-fieldset\" formGroupName=\"yellowRange\">\n          <legend translate>Yellow range</legend>\n          <div class=\"row\">\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{\n                  'has-error':\n                    (range?.touched || yellowRange?.touched) && yellowRange?.controls?.min?.errors\n                }\"\n              >\n                <label translate>Min</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"min\"\n                  formControlName=\"min\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 50 }\"\n                />\n                <c8y-messages\n                  [show]=\"\n                    (range?.touched || yellowRange?.touched) && yellowRange.controls?.min?.errors\n                  \"\n                ></c8y-messages>\n              </c8y-form-group>\n            </div>\n\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{\n                  'has-error':\n                    (range?.touched || yellowRange?.touched) && yellowRange?.controls?.max?.errors\n                }\"\n              >\n                <label translate>Max</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"max\"\n                  formControlName=\"max\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n                />\n                <c8y-messages\n                  [show]=\"\n                    (range?.touched || yellowRange?.touched) && yellowRange.controls?.max?.errors\n                  \"\n                ></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n        </fieldset>\n\n        <fieldset class=\"c8y-fieldset\" formGroupName=\"redRange\">\n          <legend translate>Red range</legend>\n          <div class=\"row\">\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{\n                  'has-error':\n                    (range?.touched || redRange?.touched) && redRange?.controls?.min?.errors\n                }\"\n              >\n                <label translate>Min</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"min\"\n                  formControlName=\"min\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n                />\n                <c8y-messages\n                  [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.min?.errors\"\n                ></c8y-messages>\n              </c8y-form-group>\n            </div>\n\n            <div class=\"col-md-6\">\n              <c8y-form-group\n                [ngClass]=\"{\n                  'has-error':\n                    (range?.touched || redRange?.touched) && redRange?.controls?.max?.errors\n                }\"\n              >\n                <label translate>Max</label>\n                <input\n                  type=\"number\"\n                  class=\"form-control\"\n                  name=\"max\"\n                  formControlName=\"max\"\n                  [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n                />\n                <c8y-messages\n                  [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.max?.errors\"\n                ></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n  <div class=\"card-footer separator grid__col--fullspan\">\n    <button class=\"btn btn-default\" type=\"button\" [title]=\"'Cancel' | translate\" (click)=\"cancel()\">\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary btn-form\"\n      type=\"submit\"\n      [title]=\"'Save' | translate\"\n      *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN', 'ROLE_INVENTORY_UPDATE']; allowAny: true\"\n      [disabled]=\"formGroup.invalid || formGroup.pristine\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"c8y-ngx-components-datapoint-library-details.mjs","sources":["../../datapoint-library/details/datapoint-library-details.component.ts","../../datapoint-library/details/datapoint-library-details.component.html","../../datapoint-library/details/c8y-ngx-components-datapoint-library-details.ts"],"sourcesContent":["import { Component, Inject, OnDestroy, OnInit, Optional } from '@angular/core';\nimport { FormBuilder, FormGroup, Validators } from '@angular/forms';\nimport { ActivatedRoute, Data, Router, RouterModule } from '@angular/router';\nimport { IManagedObject, InventoryService } from '@c8y/client';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport {\n  AlertService,\n  CoreModule,\n  HumanizePipe,\n  C8yValidators,\n  ColorService\n} from '@c8y/ngx-components';\nimport { TranslateService } from '@ngx-translate/core';\nimport { get, isEmpty } from 'lodash-es';\nimport { Subscription } from 'rxjs';\nimport {\n  DatapointLibraryOptions,\n  DATAPOINT_LIBRARY_CONFIG,\n  pathToDatapointLibrary\n} from '@c8y/ngx-components/datapoint-library/model';\nimport { PopoverModule } from 'ngx-bootstrap/popover';\nimport { TooltipModule } from 'ngx-bootstrap/tooltip';\nimport { DatapointParserService } from '@c8y/ngx-components/datapoint-library/services';\nimport {\n  DatapointSelectorModule,\n  DatapointSelectorService\n} from '@c8y/ngx-components/datapoint-selector';\n\n@Component({\n  selector: 'c8y-datapoint-library-details',\n  templateUrl: './datapoint-library-details.component.html',\n  standalone: true,\n  imports: [CoreModule, RouterModule, PopoverModule, TooltipModule, DatapointSelectorModule]\n})\nexport class DatapointLibraryDetailsComponent implements OnInit, OnDestroy {\n  path = pathToDatapointLibrary;\n  formGroup: ReturnType<DatapointLibraryDetailsComponent['initForm']>;\n  range: FormGroup;\n  redRange: FormGroup;\n  yellowRange: FormGroup;\n  datapoint: IManagedObject;\n  isLoading = true;\n\n  rangeConfig = {};\n\n  routeSub: Subscription;\n\n  constructor(\n    private activatedRoute: ActivatedRoute,\n    private inventory: InventoryService,\n    private formBuilder: FormBuilder,\n    private alertService: AlertService,\n    private router: Router,\n    private translate: TranslateService,\n    private colorService: ColorService,\n    private parser: DatapointParserService,\n    private datapointSelectorService: DatapointSelectorService,\n    @Optional() @Inject(DATAPOINT_LIBRARY_CONFIG) public config: DatapointLibraryOptions\n  ) {\n    this.formGroup = this.initForm();\n  }\n\n  ngOnInit() {\n    this.routeSub = this.activatedRoute.parent.data.subscribe(data => {\n      this.load(data);\n    });\n  }\n\n  ngOnDestroy(): void {\n    if (this.routeSub) {\n      this.routeSub.unsubscribe();\n    }\n  }\n\n  async save(value) {\n    const kpiValues = this.extractKpiValuesFromFormValue(value);\n    const kpi = Object.assign({}, this.datapoint?.c8y_Kpi || {}, kpiValues);\n    const cleanedUpKpi = this.removeNullValues(kpi);\n\n    const mo: Partial<IManagedObject> = {\n      c8y_Kpi: cleanedUpKpi,\n      c8y_Global: value.c8y_Global ? {} : null\n    };\n    try {\n      if (this.datapoint?.id) {\n        mo.id = this.datapoint.id;\n        const res = await this.inventory.update(mo);\n        this.datapointUpdate(res.data);\n        this.alertService.saveSuccess(gettext('Data point library entry'))();\n      } else {\n        // during managedObject creation (POST) a fragment with the value null is actually being created and stored to the DB compared to an update (PUT) which would remove the fragment.\n        // as we don't want to have that fragment stored in DB (if set to null), we will just set it to undefined.\n        if (mo.c8y_Global === null) {\n          mo.c8y_Global = undefined;\n        }\n        const res = await this.inventory.create(mo);\n        this.datapointUpdate(res.data);\n        this.alertService.createSuccess(gettext('Data point library entry'))();\n      }\n      this.navigateBackToList();\n    } catch (e) {\n      this.alertService.addServerFailure(e);\n    }\n  }\n\n  cancel() {\n    this.navigateBackToList();\n  }\n\n  formChange() {\n    if (this.formGroup.invalid) {\n      return;\n    }\n    const kpiValues = this.extractKpiValuesFromFormValue(this.formGroup.value);\n    this.rangeConfig = Object.assign({ orientation: 'horizontal' }, kpiValues);\n  }\n\n  async pickDatapoint() {\n    try {\n      const datapoints = await this.datapointSelectorService.selectDataPoints({\n        finishWithFirstSelection: true,\n        ignoreDatapointTemplates: true,\n        guessDatapointUnit: false\n      });\n      if (datapoints.length) {\n        const datapoint = datapoints[0];\n        this.formGroup.patchValue({\n          fragment: datapoint.fragment,\n          series: datapoint.series,\n          color: datapoint.color,\n          label: datapoint.label\n        });\n        this.formGroup.markAsTouched();\n        this.formGroup.markAsDirty();\n      }\n    } catch (_e) {\n      // modal closed\n    }\n  }\n\n  private navigateBackToList() {\n    return this.router.navigate([pathToDatapointLibrary]);\n  }\n\n  private datapointUpdate(tmpDatapoint: IManagedObject) {\n    const datapoint = this.parser.parseDatapoint(tmpDatapoint);\n    this.datapoint = datapoint;\n    const {\n      fragment,\n      series,\n      description,\n      unit,\n      target,\n      label,\n      color,\n      yellowRangeMin,\n      yellowRangeMax,\n      redRangeMin,\n      redRangeMax,\n      min,\n      max\n    } = datapoint.c8y_Kpi;\n    this.formGroup.patchValue({\n      fragment,\n      series,\n      description,\n      unit,\n      target,\n      label,\n      color,\n      range: { min, max },\n      yellowRange: { min: yellowRangeMin, max: yellowRangeMax },\n      redRange: { min: redRangeMin, max: redRangeMax },\n      c8y_Global: !!datapoint.c8y_Global\n    });\n    this.formChange();\n  }\n\n  private extractKpiValuesFromFormValue(formValue: any) {\n    const { fragment, series, description, unit, target, label, color } = formValue;\n    return {\n      fragment,\n      series,\n      description,\n      unit,\n      target,\n      label,\n      color,\n      yellowRangeMin: get(formValue, 'yellowRange.min'),\n      yellowRangeMax: get(formValue, 'yellowRange.max'),\n      redRangeMin: get(formValue, 'redRange.min'),\n      redRangeMax: get(formValue, 'redRange.max'),\n      min: get(formValue, 'range.min'),\n      max: get(formValue, 'range.max')\n    };\n  }\n\n  private async load(data: Data) {\n    this.isLoading = true;\n    this.formGroup.reset();\n    const { fragment, series } = this.activatedRoute.snapshot.queryParams;\n    const humanize = new HumanizePipe();\n    const label =\n      fragment && series\n        ? humanize.transform(`${fragment} => ${series}`)\n        : this.translate.instant(gettext('New data point template'));\n    const currentDate = new Date().toISOString();\n    const color = await this.colorService.generateColor(currentDate);\n\n    const contextFallback = {\n      c8y_Kpi: {\n        label,\n        fragment,\n        series,\n        color\n      },\n      c8y_Global: !this.config?.doNotAddGlobalFragmentByDefault ? {} : null\n    };\n    const contextData = this.isContextSet(data) ? data.contextData : contextFallback;\n\n    const { id } = contextData;\n    if (id) {\n      this.datapointUpdate((await this.inventory.detail(id)).data);\n    } else {\n      this.datapointUpdate(contextData);\n    }\n    this.isLoading = false;\n  }\n\n  private isContextSet(data: Data): boolean {\n    return data && !isEmpty(data.contextData);\n  }\n\n  private initForm() {\n    this.range = this.formBuilder.group(\n      {\n        min: [undefined, []],\n        max: [undefined, []]\n      },\n      { validators: [C8yValidators.minMaxValidator(), C8yValidators.requireBothMinAndMax()] }\n    );\n    this.redRange = this.formBuilder.group(\n      {\n        min: [undefined, []],\n        max: [undefined, []]\n      },\n      { validators: [C8yValidators.minMaxValidator(), C8yValidators.requireBothMinAndMax()] }\n    );\n    this.yellowRange = this.formBuilder.group(\n      {\n        min: [undefined, []],\n        max: [undefined, []]\n      },\n      { validators: [C8yValidators.minMaxValidator(), C8yValidators.requireBothMinAndMax()] }\n    );\n    return this.formBuilder.group(\n      {\n        color: ['', [Validators.required, Validators.minLength(4)]],\n        label: ['', [Validators.required, Validators.minLength(1)]],\n        description: ['', []],\n        fragment: [\n          '',\n          [Validators.required, Validators.minLength(1), Validators.pattern(/^[^.]*$/)]\n        ],\n        series: ['', [Validators.required, Validators.minLength(1), Validators.pattern(/^[^.]*$/)]],\n        range: this.range,\n        unit: [undefined, []],\n        target: [undefined, []],\n        redRange: this.redRange,\n        yellowRange: this.yellowRange,\n        c8y_Global: [!this.config?.doNotAddGlobalFragmentByDefault, []]\n      },\n      {\n        validators: [\n          C8yValidators.withinScale('redRange.min'),\n          C8yValidators.withinScale('redRange.max'),\n          C8yValidators.withinScale('yellowRange.min'),\n          C8yValidators.withinScale('yellowRange.max'),\n          C8yValidators.withinScale('target')\n        ]\n      }\n    );\n  }\n\n  private removeNullValues(value) {\n    // remove null values before sending data to backend\n    const cleanedupValues = Object.assign({}, value);\n    Object.keys(cleanedupValues).forEach(key => {\n      if (cleanedupValues[key] === null) {\n        delete cleanedupValues[key];\n      }\n    });\n    return cleanedupValues;\n  }\n}\n","@if (!isLoading) {\n  <c8y-title>\n    {{ formGroup.value | datapointLabel }}\n    @if (formGroup.value?.fragment && formGroup.value?.series) {\n      <small>{{ formGroup.value?.fragment }} / {{ formGroup.value?.series }}</small>\n    }\n  </c8y-title>\n\n  <c8y-breadcrumb>\n    <c8y-breadcrumb-item\n      [icon]=\"'c8y-tools'\"\n      [label]=\"'Configuration' | translate\"\n    ></c8y-breadcrumb-item>\n    <c8y-breadcrumb-item\n      [icon]=\"'c8y-data-points'\"\n      [label]=\"'Data point library' | translate\"\n      [path]=\"path\"\n    ></c8y-breadcrumb-item>\n    <c8y-breadcrumb-item\n      [icon]=\"'c8y-data-points'\"\n      [label]=\"formGroup.value | datapointLabel\"\n    ></c8y-breadcrumb-item>\n  </c8y-breadcrumb>\n}\n\n<form\n  class=\"card content-fullpage card--grid grid__col--6-6--md grid__row--fit-auto\"\n  (ngSubmit)=\"formGroup.valid && save(formGroup.value)\"\n  (change)=\"formChange()\"\n  [formGroup]=\"formGroup\"\n  novalidate\n>\n  <div class=\"card-header large-padding separator grid__col--fullspan\">\n    <div class=\"card-title\">\n      {{ formGroup.value | datapointLabel }}\n    </div>\n  </div>\n  @if (!isLoading) {\n    <div class=\"d-contents\">\n      <div class=\"inner-scroll bg-level-0 flex-grow\">\n        <div class=\"card-block large-padding\">\n          <div class=\"d-flex\">\n            <c8y-form-group>\n              <label translate>Color</label>\n              <div class=\"data-point-color form-control\">\n                <div class=\"c8y-colorpicker\">\n                  <input\n                    [attr.aria-label]=\"'Color picker' | translate\"\n                    name=\"color\"\n                    type=\"color\"\n                    formControlName=\"color\"\n                  />\n                  <span [style.background-color]=\"formGroup.value?.color\"></span>\n                </div>\n              </div>\n            </c8y-form-group>\n            <c8y-form-group class=\"flex-grow p-l-8\">\n              <label translate>Label</label>\n              <input\n                class=\"form-control\"\n                name=\"label\"\n                type=\"text\"\n                formControlName=\"label\"\n                [placeholder]=\"'e.g. Temperature' | translate\"\n              />\n              <c8y-messages\n                [show]=\"formGroup.controls?.label?.touched && formGroup.controls?.label?.errors\"\n              ></c8y-messages>\n            </c8y-form-group>\n          </div>\n          <c8y-form-group>\n            <label translate>Description</label>\n            <textarea\n              class=\"form-control\"\n              name=\"description\"\n              rows=\"3\"\n              formControlName=\"description\"\n              [placeholder]=\"'e.g. Ambient Temperature in Celsius' | translate\"\n            ></textarea>\n          </c8y-form-group>\n          <div class=\"d-flex a-i-center gap-8\">\n            <c8y-form-group class=\"flex-grow\">\n              <label translate>Fragment</label>\n              <input\n                class=\"form-control\"\n                name=\"fragment\"\n                type=\"text\"\n                formControlName=\"fragment\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Temperature' }\"\n              />\n              <c8y-messages\n                [show]=\"\n                  formGroup.controls?.fragment?.touched && formGroup.controls?.fragment?.errors\n                \"\n              ></c8y-messages>\n            </c8y-form-group>\n            <c8y-form-group class=\"flex-grow\">\n              <label translate>Series</label>\n              <input\n                class=\"form-control\"\n                name=\"series\"\n                type=\"text\"\n                formControlName=\"series\"\n                [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'T' }\"\n              />\n              <c8y-messages\n                [show]=\"formGroup.controls?.series?.touched && formGroup.controls?.series?.errors\"\n              ></c8y-messages>\n            </c8y-form-group>\n            <div class=\"flex-no-grow\">\n              <button\n                class=\"btn btn-default p-l-8 p-r-8\"\n                [attr.aria-label]=\"\n                  'Load fragment and series from an existing data point' | translate\n                \"\n                [tooltip]=\"'Load fragment and series from an existing data point' | translate\"\n                type=\"button\"\n                (click)=\"pickDatapoint()\"\n                [delay]=\"500\"\n              >\n                <i c8yIcon=\"eyedropper\"></i>\n              </button>\n            </div>\n          </div>\n          @if (config?.showCheckboxForGlobalFragment) {\n            <div class=\"row\">\n              <div class=\"col-sm-6\">\n                <c8y-form-group>\n                  <label class=\"c8y-checkbox\">\n                    <input\n                      name=\"c8y_Global\"\n                      type=\"checkbox\"\n                      formControlName=\"c8y_Global\"\n                    />\n                    <span></span>\n                    <span translate>Globally available</span>\n                    <button\n                      class=\"btn-help\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      [popover]=\"\n                        'Will make this entry available to all users on the tenant if checked.'\n                          | translate\n                      \"\n                      placement=\"right\"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                    ></button>\n                  </label>\n                </c8y-form-group>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      <div class=\"inner-scroll bg-level-1\">\n        <div class=\"card-block large-padding\">\n          <fieldset class=\"c8y-fieldset\">\n            <legend translate>Preview</legend>\n            <c8y-range-display\n              class=\"m-b-16 d-block\"\n              [config]=\"rangeConfig\"\n            ></c8y-range-display>\n          </fieldset>\n          <fieldset class=\"c8y-fieldset\">\n            <legend translate>Range</legend>\n            <div\n              class=\"row\"\n              formGroupName=\"range\"\n            >\n              <div class=\"col-md-6\">\n                <c8y-form-group\n                  [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.min?.errors }\"\n                >\n                  <label translate>Min</label>\n                  <input\n                    class=\"form-control\"\n                    name=\"min\"\n                    type=\"number\"\n                    formControlName=\"min\"\n                    [placeholder]=\"'e.g. {{ example }}' | translate: { example: 0 }\"\n                  />\n                  <c8y-messages\n                    [show]=\"range?.touched && range.controls?.min?.errors\"\n                  ></c8y-messages>\n                </c8y-form-group>\n              </div>\n              <div class=\"col-md-6\">\n                <c8y-form-group\n                  [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.max?.errors }\"\n                >\n                  <label translate>Max</label>\n                  <input\n                    class=\"form-control\"\n                    name=\"max\"\n                    type=\"number\"\n                    formControlName=\"max\"\n                    [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n                  />\n                  <c8y-messages\n                    [show]=\"range?.touched && range.controls?.max?.errors\"\n                  ></c8y-messages>\n                </c8y-form-group>\n              </div>\n            </div>\n            <div class=\"row\">\n              <div class=\"col-md-6\">\n                <c8y-form-group>\n                  <label translate>Unit</label>\n                  <input\n                    class=\"form-control\"\n                    name=\"unit\"\n                    formControlName=\"unit\"\n                    [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'ºC' }\"\n                  />\n                  <c8y-messages\n                    [show]=\"formGroup.controls?.unit?.touched && formGroup.controls?.unit?.errors\"\n                  ></c8y-messages>\n                </c8y-form-group>\n              </div>\n              <div class=\"col-md-6\">\n                <c8y-form-group\n                  [ngClass]=\"{\n                    'has-error':\n                      (range?.touched || formGroup.controls?.target?.touched) &&\n                      formGroup.controls?.target?.errors\n                  }\"\n                >\n                  <label translate>Target</label>\n                  <input\n                    class=\"form-control\"\n                    name=\"target\"\n                    type=\"number\"\n                    formControlName=\"target\"\n                    [placeholder]=\"'e.g. {{ example }}' | translate: { example: 25 }\"\n                  />\n                  <c8y-messages\n                    [show]=\"\n                      (range?.touched || formGroup.controls?.target?.touched) &&\n                      formGroup.controls?.target?.errors\n                    \"\n                  ></c8y-messages>\n                </c8y-form-group>\n              </div>\n            </div>\n          </fieldset>\n          <fieldset\n            class=\"c8y-fieldset\"\n            formGroupName=\"yellowRange\"\n          >\n            <legend translate>Yellow range</legend>\n            <div class=\"row\">\n              <div class=\"col-md-6\">\n                <c8y-form-group\n                  [ngClass]=\"{\n                    'has-error':\n                      (range?.touched || yellowRange?.touched) && yellowRange?.controls?.min?.errors\n                  }\"\n                >\n                  <label translate>Min</label>\n                  <input\n                    class=\"form-control\"\n                    name=\"min\"\n                    type=\"number\"\n                    formControlName=\"min\"\n                    [placeholder]=\"'e.g. {{ example }}' | translate: { example: 50 }\"\n                  />\n                  <c8y-messages\n                    [show]=\"\n                      (range?.touched || yellowRange?.touched) && yellowRange.controls?.min?.errors\n                    \"\n                  ></c8y-messages>\n                </c8y-form-group>\n              </div>\n              <div class=\"col-md-6\">\n                <c8y-form-group\n                  [ngClass]=\"{\n                    'has-error':\n                      (range?.touched || yellowRange?.touched) && yellowRange?.controls?.max?.errors\n                  }\"\n                >\n                  <label translate>Max</label>\n                  <input\n                    class=\"form-control\"\n                    name=\"max\"\n                    type=\"number\"\n                    formControlName=\"max\"\n                    [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n                  />\n                  <c8y-messages\n                    [show]=\"\n                      (range?.touched || yellowRange?.touched) && yellowRange.controls?.max?.errors\n                    \"\n                  ></c8y-messages>\n                </c8y-form-group>\n              </div>\n            </div>\n          </fieldset>\n          <fieldset\n            class=\"c8y-fieldset\"\n            formGroupName=\"redRange\"\n          >\n            <legend translate>Red range</legend>\n            <div class=\"row\">\n              <div class=\"col-md-6\">\n                <c8y-form-group\n                  [ngClass]=\"{\n                    'has-error':\n                      (range?.touched || redRange?.touched) && redRange?.controls?.min?.errors\n                  }\"\n                >\n                  <label translate>Min</label>\n                  <input\n                    class=\"form-control\"\n                    name=\"min\"\n                    type=\"number\"\n                    formControlName=\"min\"\n                    [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n                  />\n                  <c8y-messages\n                    [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.min?.errors\"\n                  ></c8y-messages>\n                </c8y-form-group>\n              </div>\n              <div class=\"col-md-6\">\n                <c8y-form-group\n                  [ngClass]=\"{\n                    'has-error':\n                      (range?.touched || redRange?.touched) && redRange?.controls?.max?.errors\n                  }\"\n                >\n                  <label translate>Max</label>\n                  <input\n                    class=\"form-control\"\n                    name=\"max\"\n                    type=\"number\"\n                    formControlName=\"max\"\n                    [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n                  />\n                  <c8y-messages\n                    [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.max?.errors\"\n                  ></c8y-messages>\n                </c8y-form-group>\n              </div>\n            </div>\n          </fieldset>\n        </div>\n      </div>\n    </div>\n  }\n  <div class=\"card-footer separator grid__col--fullspan\">\n    <button\n      class=\"btn btn-default\"\n      [title]=\"'Cancel' | translate\"\n      type=\"button\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary btn-form\"\n      [title]=\"'Save' | translate\"\n      type=\"submit\"\n      *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN', 'ROLE_INVENTORY_UPDATE']; allowAny: true\"\n      [disabled]=\"formGroup.invalid || formGroup.pristine\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/c8y-ngx-components-datapoint-library-list.mjs

@@ -5,7 +5,8 @@ import { RouterModule } from '@angular/router';
 import * as i1 from '@c8y/client';
 import { gettext } from '@c8y/ngx-components/gettext';
 import * as i3 from '@c8y/ngx-components';
-import { CoreModule } from '@c8y/ngx-components';
+import { translateDatapointLabel, CoreModule, DatapointUnitPipe } from '@c8y/ngx-components';
+import { DatapointLabelPipe } from '@c8y/ngx-components/datapoint-selector';
 import * as i4 from '@ngx-translate/core';
 import { BehaviorSubject, pipe } from 'rxjs';
 import { tap, switchMap, shareReplay, map } from 'rxjs/operators';
@@ -47,9 +48,9 @@ class DatapointLibraryListComponent {
     }
     async removeDatapointEntry(entry) {
         try {
-            await this.modalService.confirm(gettext('Delete data point'), this.translateService.instant(gettext('You are about to delete data point "{{ dpLabel }}". Do you want to proceed?'), { dpLabel: entry.c8y_Kpi.label }), 'danger');
+            await this.modalService.confirm(gettext('Delete data point'), this.translateService.instant(gettext('You are about to delete data point "{{ dpLabel }}". Do you want to proceed?'), { dpLabel: translateDatapointLabel(entry.c8y_Kpi.label, this.translateService) }), 'danger');
         }
-        catch (e) {
+        catch {
             return;
         }
         try {
@@ -64,11 +65,18 @@ class DatapointLibraryListComponent {
         this.reload$.next();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DatapointLibraryListComponent, deps: [{ token: i1.InventoryService }, { token: i2.Router }, { token: i3.ModalService }, { token: i4.TranslateService }, { token: i3.AlertService }, { token: i5.DatapointParserService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: DatapointLibraryListComponent, isStandalone: true, selector: "c8y-datapoint-library-list", ngImport: i0, template: "<c8y-title>{{ title | translate }}</c8y-title>\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-tools'\"\n    [label]=\"'Configuration' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-tools'\"\n    [label]=\"title | translate\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN']\"\n  [priority]=\"1\"\n>\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Add data point' | translate\"\n    type=\"button\"\n    (click)=\"addDatapointEntry()\"\n    data-cy=\"c8y-datapoint-library-list--add-data-point\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add data point' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"0\"\n>\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Reload' | translate\"\n    type=\"button\"\n    [disabled]=\"isLoading\"\n    (click)=\"reload()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': isLoading }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form hidden-xs\"\n>\n  <c8y-list-display-switch\n    (onListClassChange)=\"listClass = $event\"\n    [listLength]=\"(datapoints$ | async)?.data?.length\"\n  ></c8y-list-display-switch>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/docs/cockpit/data-point-library/#data-point-library\"></c8y-help>\n\n<!-- empty state\n-->\n<c8y-ui-empty-state\n  [icon]=\"'c8y-data-points'\"\n  [title]=\"'No data points to display.' | translate\"\n  [subtitle]=\"'Add a data point using the button below.' | translate\"\n  *ngIf=\"(datapoints$ | async)?.data?.length === 0\"\n>\n  <p>\n    <button\n      class=\"btn btn-primary\"\n      [title]=\"'Add data point' | translate\"\n      type=\"button\"\n      (click)=\"addDatapointEntry()\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add data point' | translate }}\n    </button>\n  </p>\n</c8y-ui-empty-state>\n\n<!-- loading indicator -->\n<div\n  class=\"d-flex j-c-center\"\n  *ngIf=\"isLoading\"\n>\n  <c8y-loading></c8y-loading>\n</div>\n\n<div\n  class=\"card-group\"\n  [ngClass]=\"listClass\"\n  *ngIf=\"!isLoading && (datapoints$ | async) as datapoints\"\n>\n  <div\n    class=\"page-sticky-header hidden-xs\"\n    *ngIf=\"datapoints.data.length\"\n  >\n    <div class=\"d-flex\">\n      <div class=\"card-header\">\n        <div class=\"card-icon\"></div>\n        <p translate>Label</p>\n      </div>\n      <div class=\"card-actions\"></div>\n      <div class=\"card-block p-l-0\">\n        <div class=\"col-sm-3 p-l-16\">\n          <p translate>Fragment</p>\n        </div>\n        <div class=\"col-sm-2\">\n          <p translate>Series</p>\n        </div>\n        <div class=\"col-sm-1\">\n          <span translate>Unit</span>\n        </div>\n        <div class=\"col-sm-2\">\n          <span translate>Target</span>\n        </div>\n        <div class=\"col-sm-4\">\n          <span translate>Range</span>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"col-sm-6 col-md-4 col-lg-3 col-xs-12\"\n    *c8yFor=\"let datapoint of datapoints; loadMore: 'hidden'; pipe: parsePipe\"\n  >\n    <div\n      class=\"card pointer\"\n      (click)=\"editDatapointEntry(datapoint)\"\n    >\n      <div\n        class=\"card-actions\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <div\n          class=\"dropdown settings\"\n          dropdown\n          #datapointOptionsDropdown=\"bs-dropdown\"\n          [cdkTrapFocus]=\"datapointOptionsDropdown.isOpen\"\n        >\n          <button\n            class=\"dropdown-toggle c8y-dropdown\"\n            [title]=\"'Actions' | translate\"\n            type=\"button\"\n            dropdownToggle\n          >\n            <i c8yIcon=\"ellipsis-v\"></i>\n          </button>\n          <ul\n            class=\"dropdown-menu dropdown-menu-right\"\n            *dropdownMenu\n          >\n            <li>\n              <button\n                [title]=\"'Edit' | translate\"\n                type=\"button\"\n                (click)=\"editDatapointEntry(datapoint)\"\n              >\n                <i c8yIcon=\"pencil\"></i>\n                {{ 'Edit' | translate }}\n              </button>\n            </li>\n            <li>\n              <button\n                [title]=\"'Remove' | translate\"\n                type=\"button\"\n                (click)=\"removeDatapointEntry(datapoint)\"\n              >\n                <i c8yIcon=\"delete\"></i>\n                {{ 'Remove' | translate }}\n              </button>\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      <div class=\"card-header separator\">\n        <div class=\"card-icon\">\n          <i\n            c8yIcon=\"circle\"\n            [style.color]=\"datapoint.c8y_Kpi?.color\"\n          ></i>\n        </div>\n        <div\n          class=\"card-title text-truncate\"\n          [title]=\"datapoint.c8y_Kpi?.label\"\n        >\n          {{ datapoint.c8y_Kpi?.label }}\n        </div>\n      </div>\n      <div class=\"card-block bg-level-1 p-b-24 card-hidden-list\">\n        <div class=\"col-sm-3 col-md-2\">\n          <c8y-range-display\n            [config]=\"datapoint.c8y_Kpi\"\n            [display]=\"'compact'\"\n          ></c8y-range-display>\n        </div>\n      </div>\n      <div class=\"card-block\">\n        <div class=\"col-sm-3 text-truncate\">\n          <span>\n            <label\n              class=\"text-label-small m-r-4\"\n              translate\n            >\n              Fragment\n            </label>\n            <span [title]=\"datapoint.c8y_Kpi?.fragment\">\n              {{ datapoint.c8y_Kpi?.fragment }}\n            </span>\n          </span>\n        </div>\n        <div class=\"col-sm-2 text-truncate\">\n          <label\n            class=\"text-label-small m-r-4\"\n            translate\n          >\n            Series\n          </label>\n          <span [title]=\"datapoint.c8y_Kpi?.series\">\n            {{ datapoint.c8y_Kpi?.series }}\n          </span>\n        </div>\n        <div class=\"col-sm-1 text-truncate card-hidden-grid\">\n          <span *ngIf=\"datapoint.c8y_Kpi?.unit\">\n            <label\n              class=\"text-label-small m-r-4\"\n              translate\n            >\n              Unit\n            </label>\n            <span [title]=\"datapoint.c8y_Kpi?.unit\">\n              {{ datapoint.c8y_Kpi?.unit }}\n            </span>\n          </span>\n        </div>\n        <div class=\"col-sm-2 text-truncate\">\n          <span *ngIf=\"datapoint.c8y_Kpi?.target\">\n            <label\n              class=\"text-label-small m-r-4\"\n              translate\n            >\n              Target\n            </label>\n            <span [title]=\"datapoint.c8y_Kpi?.target\">\n              {{ datapoint.c8y_Kpi?.target }}\n            </span>\n          </span>\n        </div>\n        <div class=\"col-sm-4 card-hidden-grid\">\n          <c8y-range-display\n            [config]=\"datapoint.c8y_Kpi\"\n            [display]=\"'inline'\"\n          ></c8y-range-display>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i6.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i3.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i3.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i3.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "directive", type: i3.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: i3.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i3.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: i3.RangeDisplayComponent, selector: "c8y-range-display", inputs: ["config", "display"] }, { kind: "component", type: i3.ListDisplaySwitchComponent, selector: "c8y-list-display-switch", inputs: ["listKey", "listLength", "filterPipe"], outputs: ["onListClassChange"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i8.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i8.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i8.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "ngmodule", type: RouterModule }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DatapointLibraryListComponent, isStandalone: true, selector: "c8y-datapoint-library-list", ngImport: i0, template: "<c8y-title>{{ title | translate }}</c8y-title>\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-tools'\"\n    [label]=\"'Configuration' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-tools'\"\n    [label]=\"title | translate\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN']\"\n  [priority]=\"1\"\n>\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Add data point' | translate\"\n    type=\"button\"\n    (click)=\"addDatapointEntry()\"\n    data-cy=\"c8y-datapoint-library-list--add-data-point\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add data point' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"0\"\n>\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Reload' | translate\"\n    type=\"button\"\n    [disabled]=\"isLoading\"\n    (click)=\"reload()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': isLoading }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form hidden-xs\"\n>\n  <c8y-list-display-switch\n    (onListClassChange)=\"listClass = $event\"\n    [listLength]=\"(datapoints$ | async)?.data?.length\"\n  ></c8y-list-display-switch>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/docs/cockpit/data-point-library/#data-point-library\"></c8y-help>\n\n<!-- empty state\n-->\n@if ((datapoints$ | async)?.data?.length === 0) {\n  <c8y-ui-empty-state\n    [icon]=\"'c8y-data-points'\"\n    [title]=\"'No data points to display.' | translate\"\n    [subtitle]=\"'Add a data point using the button below.' | translate\"\n  >\n    <p>\n      <button\n        class=\"btn btn-primary\"\n        [title]=\"'Add data point' | translate\"\n        type=\"button\"\n        (click)=\"addDatapointEntry()\"\n      >\n        <i c8yIcon=\"plus-circle\"></i>\n        {{ 'Add data point' | translate }}\n      </button>\n    </p>\n  </c8y-ui-empty-state>\n}\n\n<!-- loading indicator -->\n@if (isLoading) {\n  <div class=\"d-flex j-c-center\">\n    <c8y-loading></c8y-loading>\n  </div>\n}\n\n@if (!isLoading && (datapoints$ | async); as datapoints) {\n  <div\n    class=\"card-group\"\n    [ngClass]=\"listClass\"\n  >\n    @if (datapoints.data.length) {\n      <div class=\"page-sticky-header hidden-xs\">\n        <div class=\"d-flex\">\n          <div class=\"card-header\">\n            <div class=\"card-icon\"></div>\n            <p translate>Label</p>\n          </div>\n          <div class=\"card-actions\"></div>\n          <div class=\"card-block p-l-0\">\n            <div class=\"col-sm-3 p-l-16\">\n              <p translate>Fragment</p>\n            </div>\n            <div class=\"col-sm-2\">\n              <p translate>Series</p>\n            </div>\n            <div class=\"col-sm-1\">\n              <span translate>Unit</span>\n            </div>\n            <div class=\"col-sm-2\">\n              <span translate>Target</span>\n            </div>\n            <div class=\"col-sm-4\">\n              <span translate>Range</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    <div\n      class=\"col-sm-6 col-md-4 col-lg-3 col-xs-12\"\n      *c8yFor=\"let datapoint of datapoints; loadMore: 'hidden'; pipe: parsePipe\"\n    >\n      <div\n        class=\"card pointer\"\n        (click)=\"editDatapointEntry(datapoint)\"\n      >\n        <div\n          class=\"card-actions\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <div\n            class=\"dropdown settings\"\n            dropdown\n            #datapointOptionsDropdown=\"bs-dropdown\"\n            [cdkTrapFocus]=\"datapointOptionsDropdown.isOpen\"\n          >\n            <button\n              class=\"dropdown-toggle c8y-dropdown\"\n              [title]=\"'Actions' | translate\"\n              type=\"button\"\n              dropdownToggle\n            >\n              <i c8yIcon=\"ellipsis-v\"></i>\n            </button>\n            <ul\n              class=\"dropdown-menu dropdown-menu-right\"\n              *dropdownMenu\n            >\n              <li>\n                <button\n                  [title]=\"'Edit' | translate\"\n                  type=\"button\"\n                  (click)=\"editDatapointEntry(datapoint)\"\n                >\n                  <i c8yIcon=\"pencil\"></i>\n                  {{ 'Edit' | translate }}\n                </button>\n              </li>\n              <li>\n                <button\n                  [title]=\"'Remove' | translate\"\n                  type=\"button\"\n                  (click)=\"removeDatapointEntry(datapoint)\"\n                >\n                  <i c8yIcon=\"delete\"></i>\n                  {{ 'Remove' | translate }}\n                </button>\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"card-header separator\">\n          <div class=\"card-icon\">\n            <i\n              c8yIcon=\"circle\"\n              [style.color]=\"datapoint.c8y_Kpi?.color\"\n            ></i>\n          </div>\n          <div\n            class=\"card-title text-truncate\"\n            [title]=\"datapoint.c8y_Kpi | datapointLabel\"\n          >\n            {{ datapoint.c8y_Kpi | datapointLabel }}\n          </div>\n        </div>\n        <div class=\"card-block bg-level-1 p-b-24 card-hidden-list\">\n          <div class=\"col-sm-3 col-md-2\">\n            <c8y-range-display\n              [config]=\"datapoint.c8y_Kpi\"\n              [display]=\"'compact'\"\n            ></c8y-range-display>\n          </div>\n        </div>\n        <div class=\"card-block\">\n          <div class=\"col-sm-3 text-truncate\">\n            <span>\n              <label\n                class=\"text-label-small m-r-4\"\n                translate\n              >\n                Fragment\n              </label>\n              <span [title]=\"datapoint.c8y_Kpi?.fragment\">\n                {{ datapoint.c8y_Kpi?.fragment }}\n              </span>\n            </span>\n          </div>\n          <div class=\"col-sm-2 text-truncate\">\n            <label\n              class=\"text-label-small m-r-4\"\n              translate\n            >\n              Series\n            </label>\n            <span [title]=\"datapoint.c8y_Kpi?.series\">\n              {{ datapoint.c8y_Kpi?.series }}\n            </span>\n          </div>\n          <div class=\"col-sm-1 text-truncate card-hidden-grid\">\n            @if (datapoint.c8y_Kpi?.unit) {\n              <span>\n                <label\n                  class=\"text-label-small m-r-4\"\n                  translate\n                >\n                  Unit\n                </label>\n                <span [title]=\"datapoint.c8y_Kpi?.unit | datapointUnit\">\n                  {{ datapoint.c8y_Kpi?.unit | datapointUnit }}\n                </span>\n              </span>\n            }\n          </div>\n          <div class=\"col-sm-2 text-truncate\">\n            @if (datapoint.c8y_Kpi?.target) {\n              <span>\n                <label\n                  class=\"text-label-small m-r-4\"\n                  translate\n                >\n                  Target\n                </label>\n                <span [title]=\"datapoint.c8y_Kpi?.target\">\n                  {{ datapoint.c8y_Kpi?.target }}\n                </span>\n              </span>\n            }\n          </div>\n          <div class=\"col-sm-4 card-hidden-grid\">\n            <c8y-range-display\n              [config]=\"datapoint.c8y_Kpi\"\n              [display]=\"'inline'\"\n            ></c8y-range-display>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i6.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i3.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i3.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i3.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "directive", type: i3.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: i3.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i3.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: i3.RangeDisplayComponent, selector: "c8y-range-display", inputs: ["config", "display"] }, { kind: "component", type: i3.ListDisplaySwitchComponent, selector: "c8y-list-display-switch", inputs: ["listKey", "listLength", "filterPipe"], outputs: ["onListClassChange"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i8.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i8.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i8.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "ngmodule", type: RouterModule }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: DatapointLabelPipe, name: "datapointLabel" }, { kind: "pipe", type: DatapointUnitPipe, name: "datapointUnit" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DatapointLibraryListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-datapoint-library-list', standalone: true, imports: [A11yModule, CoreModule, BsDropdownModule, RouterModule], template: "<c8y-title>{{ title | translate }}</c8y-title>\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-tools'\"\n    [label]=\"'Configuration' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-tools'\"\n    [label]=\"title | translate\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN']\"\n  [priority]=\"1\"\n>\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Add data point' | translate\"\n    type=\"button\"\n    (click)=\"addDatapointEntry()\"\n    data-cy=\"c8y-datapoint-library-list--add-data-point\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add data point' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"0\"\n>\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Reload' | translate\"\n    type=\"button\"\n    [disabled]=\"isLoading\"\n    (click)=\"reload()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': isLoading }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form hidden-xs\"\n>\n  <c8y-list-display-switch\n    (onListClassChange)=\"listClass = $event\"\n    [listLength]=\"(datapoints$ | async)?.data?.length\"\n  ></c8y-list-display-switch>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/docs/cockpit/data-point-library/#data-point-library\"></c8y-help>\n\n<!-- empty state\n-->\n<c8y-ui-empty-state\n  [icon]=\"'c8y-data-points'\"\n  [title]=\"'No data points to display.' | translate\"\n  [subtitle]=\"'Add a data point using the button below.' | translate\"\n  *ngIf=\"(datapoints$ | async)?.data?.length === 0\"\n>\n  <p>\n    <button\n      class=\"btn btn-primary\"\n      [title]=\"'Add data point' | translate\"\n      type=\"button\"\n      (click)=\"addDatapointEntry()\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add data point' | translate }}\n    </button>\n  </p>\n</c8y-ui-empty-state>\n\n<!-- loading indicator -->\n<div\n  class=\"d-flex j-c-center\"\n  *ngIf=\"isLoading\"\n>\n  <c8y-loading></c8y-loading>\n</div>\n\n<div\n  class=\"card-group\"\n  [ngClass]=\"listClass\"\n  *ngIf=\"!isLoading && (datapoints$ | async) as datapoints\"\n>\n  <div\n    class=\"page-sticky-header hidden-xs\"\n    *ngIf=\"datapoints.data.length\"\n  >\n    <div class=\"d-flex\">\n      <div class=\"card-header\">\n        <div class=\"card-icon\"></div>\n        <p translate>Label</p>\n      </div>\n      <div class=\"card-actions\"></div>\n      <div class=\"card-block p-l-0\">\n        <div class=\"col-sm-3 p-l-16\">\n          <p translate>Fragment</p>\n        </div>\n        <div class=\"col-sm-2\">\n          <p translate>Series</p>\n        </div>\n        <div class=\"col-sm-1\">\n          <span translate>Unit</span>\n        </div>\n        <div class=\"col-sm-2\">\n          <span translate>Target</span>\n        </div>\n        <div class=\"col-sm-4\">\n          <span translate>Range</span>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"col-sm-6 col-md-4 col-lg-3 col-xs-12\"\n    *c8yFor=\"let datapoint of datapoints; loadMore: 'hidden'; pipe: parsePipe\"\n  >\n    <div\n      class=\"card pointer\"\n      (click)=\"editDatapointEntry(datapoint)\"\n    >\n      <div\n        class=\"card-actions\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <div\n          class=\"dropdown settings\"\n          dropdown\n          #datapointOptionsDropdown=\"bs-dropdown\"\n          [cdkTrapFocus]=\"datapointOptionsDropdown.isOpen\"\n        >\n          <button\n            class=\"dropdown-toggle c8y-dropdown\"\n            [title]=\"'Actions' | translate\"\n            type=\"button\"\n            dropdownToggle\n          >\n            <i c8yIcon=\"ellipsis-v\"></i>\n          </button>\n          <ul\n            class=\"dropdown-menu dropdown-menu-right\"\n            *dropdownMenu\n          >\n            <li>\n              <button\n                [title]=\"'Edit' | translate\"\n                type=\"button\"\n                (click)=\"editDatapointEntry(datapoint)\"\n              >\n                <i c8yIcon=\"pencil\"></i>\n                {{ 'Edit' | translate }}\n              </button>\n            </li>\n            <li>\n              <button\n                [title]=\"'Remove' | translate\"\n                type=\"button\"\n                (click)=\"removeDatapointEntry(datapoint)\"\n              >\n                <i c8yIcon=\"delete\"></i>\n                {{ 'Remove' | translate }}\n              </button>\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      <div class=\"card-header separator\">\n        <div class=\"card-icon\">\n          <i\n            c8yIcon=\"circle\"\n            [style.color]=\"datapoint.c8y_Kpi?.color\"\n          ></i>\n        </div>\n        <div\n          class=\"card-title text-truncate\"\n          [title]=\"datapoint.c8y_Kpi?.label\"\n        >\n          {{ datapoint.c8y_Kpi?.label }}\n        </div>\n      </div>\n      <div class=\"card-block bg-level-1 p-b-24 card-hidden-list\">\n        <div class=\"col-sm-3 col-md-2\">\n          <c8y-range-display\n            [config]=\"datapoint.c8y_Kpi\"\n            [display]=\"'compact'\"\n          ></c8y-range-display>\n        </div>\n      </div>\n      <div class=\"card-block\">\n        <div class=\"col-sm-3 text-truncate\">\n          <span>\n            <label\n              class=\"text-label-small m-r-4\"\n              translate\n            >\n              Fragment\n            </label>\n            <span [title]=\"datapoint.c8y_Kpi?.fragment\">\n              {{ datapoint.c8y_Kpi?.fragment }}\n            </span>\n          </span>\n        </div>\n        <div class=\"col-sm-2 text-truncate\">\n          <label\n            class=\"text-label-small m-r-4\"\n            translate\n          >\n            Series\n          </label>\n          <span [title]=\"datapoint.c8y_Kpi?.series\">\n            {{ datapoint.c8y_Kpi?.series }}\n          </span>\n        </div>\n        <div class=\"col-sm-1 text-truncate card-hidden-grid\">\n          <span *ngIf=\"datapoint.c8y_Kpi?.unit\">\n            <label\n              class=\"text-label-small m-r-4\"\n              translate\n            >\n              Unit\n            </label>\n            <span [title]=\"datapoint.c8y_Kpi?.unit\">\n              {{ datapoint.c8y_Kpi?.unit }}\n            </span>\n          </span>\n        </div>\n        <div class=\"col-sm-2 text-truncate\">\n          <span *ngIf=\"datapoint.c8y_Kpi?.target\">\n            <label\n              class=\"text-label-small m-r-4\"\n              translate\n            >\n              Target\n            </label>\n            <span [title]=\"datapoint.c8y_Kpi?.target\">\n              {{ datapoint.c8y_Kpi?.target }}\n            </span>\n          </span>\n        </div>\n        <div class=\"col-sm-4 card-hidden-grid\">\n          <c8y-range-display\n            [config]=\"datapoint.c8y_Kpi\"\n            [display]=\"'inline'\"\n          ></c8y-range-display>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'c8y-datapoint-library-list', standalone: true, imports: [
+                        A11yModule,
+                        CoreModule,
+                        BsDropdownModule,
+                        RouterModule,
+                        DatapointLabelPipe,
+                        DatapointUnitPipe
+                    ], template: "<c8y-title>{{ title | translate }}</c8y-title>\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-tools'\"\n    [label]=\"'Configuration' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-tools'\"\n    [label]=\"title | translate\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN']\"\n  [priority]=\"1\"\n>\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Add data point' | translate\"\n    type=\"button\"\n    (click)=\"addDatapointEntry()\"\n    data-cy=\"c8y-datapoint-library-list--add-data-point\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add data point' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"0\"\n>\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Reload' | translate\"\n    type=\"button\"\n    [disabled]=\"isLoading\"\n    (click)=\"reload()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': isLoading }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form hidden-xs\"\n>\n  <c8y-list-display-switch\n    (onListClassChange)=\"listClass = $event\"\n    [listLength]=\"(datapoints$ | async)?.data?.length\"\n  ></c8y-list-display-switch>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/docs/cockpit/data-point-library/#data-point-library\"></c8y-help>\n\n<!-- empty state\n-->\n@if ((datapoints$ | async)?.data?.length === 0) {\n  <c8y-ui-empty-state\n    [icon]=\"'c8y-data-points'\"\n    [title]=\"'No data points to display.' | translate\"\n    [subtitle]=\"'Add a data point using the button below.' | translate\"\n  >\n    <p>\n      <button\n        class=\"btn btn-primary\"\n        [title]=\"'Add data point' | translate\"\n        type=\"button\"\n        (click)=\"addDatapointEntry()\"\n      >\n        <i c8yIcon=\"plus-circle\"></i>\n        {{ 'Add data point' | translate }}\n      </button>\n    </p>\n  </c8y-ui-empty-state>\n}\n\n<!-- loading indicator -->\n@if (isLoading) {\n  <div class=\"d-flex j-c-center\">\n    <c8y-loading></c8y-loading>\n  </div>\n}\n\n@if (!isLoading && (datapoints$ | async); as datapoints) {\n  <div\n    class=\"card-group\"\n    [ngClass]=\"listClass\"\n  >\n    @if (datapoints.data.length) {\n      <div class=\"page-sticky-header hidden-xs\">\n        <div class=\"d-flex\">\n          <div class=\"card-header\">\n            <div class=\"card-icon\"></div>\n            <p translate>Label</p>\n          </div>\n          <div class=\"card-actions\"></div>\n          <div class=\"card-block p-l-0\">\n            <div class=\"col-sm-3 p-l-16\">\n              <p translate>Fragment</p>\n            </div>\n            <div class=\"col-sm-2\">\n              <p translate>Series</p>\n            </div>\n            <div class=\"col-sm-1\">\n              <span translate>Unit</span>\n            </div>\n            <div class=\"col-sm-2\">\n              <span translate>Target</span>\n            </div>\n            <div class=\"col-sm-4\">\n              <span translate>Range</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    <div\n      class=\"col-sm-6 col-md-4 col-lg-3 col-xs-12\"\n      *c8yFor=\"let datapoint of datapoints; loadMore: 'hidden'; pipe: parsePipe\"\n    >\n      <div\n        class=\"card pointer\"\n        (click)=\"editDatapointEntry(datapoint)\"\n      >\n        <div\n          class=\"card-actions\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <div\n            class=\"dropdown settings\"\n            dropdown\n            #datapointOptionsDropdown=\"bs-dropdown\"\n            [cdkTrapFocus]=\"datapointOptionsDropdown.isOpen\"\n          >\n            <button\n              class=\"dropdown-toggle c8y-dropdown\"\n              [title]=\"'Actions' | translate\"\n              type=\"button\"\n              dropdownToggle\n            >\n              <i c8yIcon=\"ellipsis-v\"></i>\n            </button>\n            <ul\n              class=\"dropdown-menu dropdown-menu-right\"\n              *dropdownMenu\n            >\n              <li>\n                <button\n                  [title]=\"'Edit' | translate\"\n                  type=\"button\"\n                  (click)=\"editDatapointEntry(datapoint)\"\n                >\n                  <i c8yIcon=\"pencil\"></i>\n                  {{ 'Edit' | translate }}\n                </button>\n              </li>\n              <li>\n                <button\n                  [title]=\"'Remove' | translate\"\n                  type=\"button\"\n                  (click)=\"removeDatapointEntry(datapoint)\"\n                >\n                  <i c8yIcon=\"delete\"></i>\n                  {{ 'Remove' | translate }}\n                </button>\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"card-header separator\">\n          <div class=\"card-icon\">\n            <i\n              c8yIcon=\"circle\"\n              [style.color]=\"datapoint.c8y_Kpi?.color\"\n            ></i>\n          </div>\n          <div\n            class=\"card-title text-truncate\"\n            [title]=\"datapoint.c8y_Kpi | datapointLabel\"\n          >\n            {{ datapoint.c8y_Kpi | datapointLabel }}\n          </div>\n        </div>\n        <div class=\"card-block bg-level-1 p-b-24 card-hidden-list\">\n          <div class=\"col-sm-3 col-md-2\">\n            <c8y-range-display\n              [config]=\"datapoint.c8y_Kpi\"\n              [display]=\"'compact'\"\n            ></c8y-range-display>\n          </div>\n        </div>\n        <div class=\"card-block\">\n          <div class=\"col-sm-3 text-truncate\">\n            <span>\n              <label\n                class=\"text-label-small m-r-4\"\n                translate\n              >\n                Fragment\n              </label>\n              <span [title]=\"datapoint.c8y_Kpi?.fragment\">\n                {{ datapoint.c8y_Kpi?.fragment }}\n              </span>\n            </span>\n          </div>\n          <div class=\"col-sm-2 text-truncate\">\n            <label\n              class=\"text-label-small m-r-4\"\n              translate\n            >\n              Series\n            </label>\n            <span [title]=\"datapoint.c8y_Kpi?.series\">\n              {{ datapoint.c8y_Kpi?.series }}\n            </span>\n          </div>\n          <div class=\"col-sm-1 text-truncate card-hidden-grid\">\n            @if (datapoint.c8y_Kpi?.unit) {\n              <span>\n                <label\n                  class=\"text-label-small m-r-4\"\n                  translate\n                >\n                  Unit\n                </label>\n                <span [title]=\"datapoint.c8y_Kpi?.unit | datapointUnit\">\n                  {{ datapoint.c8y_Kpi?.unit | datapointUnit }}\n                </span>\n              </span>\n            }\n          </div>\n          <div class=\"col-sm-2 text-truncate\">\n            @if (datapoint.c8y_Kpi?.target) {\n              <span>\n                <label\n                  class=\"text-label-small m-r-4\"\n                  translate\n                >\n                  Target\n                </label>\n                <span [title]=\"datapoint.c8y_Kpi?.target\">\n                  {{ datapoint.c8y_Kpi?.target }}\n                </span>\n              </span>\n            }\n          </div>\n          <div class=\"col-sm-4 card-hidden-grid\">\n            <c8y-range-display\n              [config]=\"datapoint.c8y_Kpi\"\n              [display]=\"'inline'\"\n            ></c8y-range-display>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.InventoryService }, { type: i2.Router }, { type: i3.ModalService }, { type: i4.TranslateService }, { type: i3.AlertService }, { type: i5.DatapointParserService }] });
 
 /**