@c8y/ngx-components 1023.14.2 → 1023.14.33

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

@@ -29,10 +29,10 @@ class DatapointExplorerNavigationFactory {
             return [];
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointExplorerNavigationFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointExplorerNavigationFactory }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointExplorerNavigationFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointExplorerNavigationFactory }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointExplorerNavigationFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointExplorerNavigationFactory, decorators: [{
             type: Injectable
         }] });
 
@@ -41,9 +41,9 @@ function canActivateDatapointExplorer() {
     return previewFeatureService.getState$('ui.datapoint-explorer.v2').pipe(first());
 }
 class DatapointExplorerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointExplorerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: DatapointExplorerModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointExplorerModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointExplorerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: DatapointExplorerModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointExplorerModule, providers: [
             hookRoute([
                 {
                     path: 'datapointexplorer-v2',
@@ -82,7 +82,7 @@ class DatapointExplorerModule {
             })
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointExplorerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointExplorerModule, decorators: [{
             type: NgModule,
             args: [{
                     providers: [
@@ -334,10 +334,10 @@ class WorkspaceConfigurationService {
         }
         return configCopy;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WorkspaceConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WorkspaceConfigurationService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WorkspaceConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WorkspaceConfigurationService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WorkspaceConfigurationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WorkspaceConfigurationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -437,10 +437,10 @@ class DataExplorerService {
     async loadAChunkOfManagedObjects(uniqIds) {
         return this.moChunkLoader.loadAChunkOfManagedObjectsBase(uniqIds, this.inventory, this.maxNumberOfManagedObjectsPerRequest, id => this.moChunkLoader.getStatusDetails(id));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DataExplorerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DataExplorerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DataExplorerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DataExplorerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DataExplorerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DataExplorerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'

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

@@ -198,26 +198,13 @@ class DatapointLibraryDetailsComponent {
         }, { validators: [C8yValidators.minMaxValidator(), C8yValidators.requireBothMinAndMax()] });
         return this.formBuilder.group({
             color: ['', [Validators.required, Validators.minLength(4)]],
-            label: ['', [Validators.required, Validators.minLength(1), Validators.maxLength(120)]],
+            label: ['', [Validators.required, Validators.minLength(1)]],
             description: ['', []],
             fragment: [
                 '',
-                [
-                    Validators.required,
-                    Validators.minLength(1),
-                    Validators.maxLength(120),
-                    Validators.pattern(/^[^.]*$/)
-                ]
-            ],
-            series: [
-                '',
-                [
-                    Validators.required,
-                    Validators.minLength(1),
-                    Validators.maxLength(120),
-                    Validators.pattern(/^[^.]*$/)
-                ]
+                [Validators.required, Validators.minLength(1), Validators.pattern(/^[^.]*$/)]
             ],
+            series: ['', [Validators.required, Validators.minLength(1), Validators.pattern(/^[^.]*$/)]],
             range: this.range,
             unit: [undefined, []],
             target: [undefined, []],
@@ -244,10 +231,10 @@ class DatapointLibraryDetailsComponent {
         });
         return cleanedupValues;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", 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.15", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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.16", 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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointLibraryDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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" }]
         }], 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: [{

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), Validators.maxLength(120)]],\n        description: ['', []],\n        fragment: [\n          '',\n          [\n            Validators.required,\n            Validators.minLength(1),\n            Validators.maxLength(120),\n            Validators.pattern(/^[^.]*$/)\n          ]\n        ],\n        series: [\n          '',\n          [\n            Validators.required,\n            Validators.minLength(1),\n            Validators.maxLength(120),\n            Validators.pattern(/^[^.]*$/)\n          ]\n        ],\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","<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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"}

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

@@ -63,10 +63,10 @@ class DatapointLibraryListComponent {
     reload() {
         this.reload$.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", 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.15", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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.16", 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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointLibraryListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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" }]
         }], ctorParameters: () => [{ type: i1.InventoryService }, { type: i2.Router }, { type: i3.ModalService }, { type: i4.TranslateService }, { type: i3.AlertService }, { type: i5.DatapointParserService }] });

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

@@ -34,10 +34,10 @@ class DatapointParserService {
         }
         return datapoint;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointParserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointParserService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointParserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointParserService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointParserService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointParserService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });

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

@@ -16,9 +16,9 @@ class DatapointLibraryModule {
             ]
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointLibraryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: DatapointLibraryModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointLibraryModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointLibraryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: DatapointLibraryModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointLibraryModule, providers: [
             hookRoute([
                 {
                     path: pathToDatapointLibrary,
@@ -45,7 +45,7 @@ class DatapointLibraryModule {
             ])
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatapointLibraryModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatapointLibraryModule, decorators: [{
             type: NgModule,
             args: [{
                     providers: [