@c8y/ngx-components 1017.0.138 → 1017.0.139

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/datapoint-library/datapoint-library-details/datapoint-library-details.component.d.ts +6 -3
  2. package/datapoint-library/datapoint-library.module.d.ts +3 -1
  3. package/datapoint-selector/datapoint-selector-modal/datapoint-selector-modal.component.d.ts +3 -0
  4. package/datapoint-selector/datapoint-selector.component.d.ts +2 -1
  5. package/esm2020/datapoint-library/datapoint-library-details/datapoint-library-details.component.mjs +37 -10
  6. package/esm2020/datapoint-library/datapoint-library.module.mjs +23 -4
  7. package/esm2020/datapoint-selector/datapoint-selector-modal/datapoint-selector-modal.component.mjs +14 -5
  8. package/esm2020/datapoint-selector/datapoint-selector.component.mjs +8 -5
  9. package/fesm2015/c8y-ngx-components-datapoint-library.mjs +61 -14
  10. package/fesm2015/c8y-ngx-components-datapoint-library.mjs.map +1 -1
  11. package/fesm2015/c8y-ngx-components-datapoint-selector.mjs +17 -6
  12. package/fesm2015/c8y-ngx-components-datapoint-selector.mjs.map +1 -1
  13. package/fesm2020/c8y-ngx-components-datapoint-library.mjs +59 -14
  14. package/fesm2020/c8y-ngx-components-datapoint-library.mjs.map +1 -1
  15. package/fesm2020/c8y-ngx-components-datapoint-selector.mjs +17 -6
  16. package/fesm2020/c8y-ngx-components-datapoint-selector.mjs.map +1 -1
  17. package/locales/locales.pot +3 -0
  18. package/package.json +2 -2
package/fesm2020/c8y-ngx-components-datapoint-library.mjs CHANGED
@@ -4,10 +4,12 @@ import * as i0 from '@angular/core';
4
4
  import { InjectionToken, Component, Optional, Inject, NgModule } from '@angular/core';
5
5
  import * as i3$1 from '@c8y/ngx-components';
6
6
  import { gettext, HumanizePipe, C8yValidators, hookRoute, ViewContext, hookNavigator, NavigatorNode, CoreModule } from '@c8y/ngx-components';
7
- import * as i8$1 from 'ngx-bootstrap/dropdown';
7
+ import * as i8 from 'ngx-bootstrap/dropdown';
8
8
  import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
9
- import * as i8 from 'ngx-bootstrap/popover';
9
+ import * as i9 from 'ngx-bootstrap/popover';
10
10
  import { PopoverModule } from 'ngx-bootstrap/popover';
11
+ import * as i10 from 'ngx-bootstrap/tooltip';
12
+ import { TooltipModule } from 'ngx-bootstrap/tooltip';
11
13
  import * as i3 from '@angular/forms';
12
14
  import { Validators } from '@angular/forms';
13
15
  import * as i1 from '@angular/router';
@@ -15,7 +17,9 @@ import * as i2 from '@c8y/client';
15
17
  import * as i5 from '@ngx-translate/core';
16
18
  import { get, isEmpty } from 'lodash-es';
17
19
  import * as i6 from '@c8y/ngx-components/datapoint-library/services';
18
- import * as i7 from '@angular/common';
20
+ import * as i7 from '@c8y/ngx-components/datapoint-selector';
21
+ import { DatapointSelectorModule } from '@c8y/ngx-components/datapoint-selector';
22
+ import * as i7$1 from '@angular/common';
19
23
  import { BehaviorSubject, pipe } from 'rxjs';
20
24
  import { tap, switchMap, shareReplay, map } from 'rxjs/operators';
21
25
 
@@ -23,7 +27,7 @@ const pathToDatapointLibrary = 'datapointlibrary';
23
27
  const DATAPOINT_LIBRARY_CONFIG = new InjectionToken('DatapointLibraryOptions');
24
28
 
25
29
  class DatapointLibraryDetailsComponent {
26
- constructor(activatedRoute, inventory, formBuilder, alertService, router, translate, colorService, parser, config) {
30
+ constructor(activatedRoute, inventory, formBuilder, alertService, router, translate, colorService, parser, datapointSelectorService, config) {
27
31
  this.activatedRoute = activatedRoute;
28
32
  this.inventory = inventory;
29
33
  this.formBuilder = formBuilder;
@@ -32,11 +36,12 @@ class DatapointLibraryDetailsComponent {
32
36
  this.translate = translate;
33
37
  this.colorService = colorService;
34
38
  this.parser = parser;
39
+ this.datapointSelectorService = datapointSelectorService;
35
40
  this.config = config;
36
41
  this.path = pathToDatapointLibrary;
37
42
  this.isLoading = true;
38
43
  this.rangeConfig = {};
39
- this.initForm();
44
+ this.formGroup = this.initForm();
40
45
  }
41
46
  ngOnInit() {
42
47
  this.routeSub = this.activatedRoute.parent.data.subscribe(data => {
@@ -84,6 +89,29 @@ class DatapointLibraryDetailsComponent {
84
89
  const kpiValues = this.extractKpiValuesFromFormValue(this.formGroup.value);
85
90
  this.rangeConfig = Object.assign({ orientation: 'horizontal' }, kpiValues);
86
91
  }
92
+ async pickDatapoint() {
93
+ try {
94
+ const datapoints = await this.datapointSelectorService.selectDataPoints({
95
+ finishWithFirstSelection: true,
96
+ ignoreDatapointTemplates: true,
97
+ guessDatapointUnit: false
98
+ });
99
+ if (datapoints.length) {
100
+ const datapoint = datapoints[0];
101
+ this.formGroup.patchValue({
102
+ fragment: datapoint.fragment,
103
+ series: datapoint.series,
104
+ color: datapoint.color,
105
+ label: datapoint.label
106
+ });
107
+ this.formGroup.markAsTouched();
108
+ this.formGroup.markAsDirty();
109
+ }
110
+ }
111
+ catch (_e) {
112
+ // modal closed
113
+ }
114
+ }
87
115
  navigateBackToList() {
88
116
  return this.router.navigate([pathToDatapointLibrary]);
89
117
  }
@@ -169,7 +197,7 @@ class DatapointLibraryDetailsComponent {
169
197
  min: [undefined, []],
170
198
  max: [undefined, []]
171
199
  }, { validators: [C8yValidators.minMaxValidator(), C8yValidators.requireBothMinAndMax()] });
172
- this.formGroup = this.formBuilder.group({
200
+ return this.formBuilder.group({
173
201
  color: ['', [Validators.required, Validators.minLength(4)]],
174
202
  label: ['', [Validators.required, Validators.minLength(1), Validators.maxLength(120)]],
175
203
  description: ['', []],
@@ -218,12 +246,12 @@ class DatapointLibraryDetailsComponent {
218
246
  return cleanedupValues;
219
247
  }
220
248
  }
221
- DatapointLibraryDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapointLibraryDetailsComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.InventoryService }, { token: i3.FormBuilder }, { token: i3$1.AlertService }, { token: i1.Router }, { token: i5.TranslateService }, { token: i3$1.ColorService }, { token: i6.DatapointParserService }, { token: DATAPOINT_LIBRARY_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
222
- DatapointLibraryDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DatapointLibraryDetailsComponent, 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 <!-- TODO: add description to data point library templates -->\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=\"row\">\n <div class=\"col-sm-6\">\n <c8y-form-group>\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]=\"\n formGroup.controls?.fragment?.touched && formGroup.controls?.fragment?.errors\n \"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n\n <div class=\"col-sm-6\">\n <c8y-form-group>\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>\n </div>\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 btn-clean\"\n [popover]=\"\n 'Will make this entry available to all users on the tenant if checked.'\n | translate\n \"\n container=\"body\"\n type=\"button\"\n [outsideClick]=\"true\"\n >\n <i [c8yIcon]=\"'question-circle-o'\" class=\"text-info\"></i>\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 <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 (click)=\"cancel()\" class=\"btn btn-default\" [title]=\"'Cancel' | translate\" type=\"button\">\n {{ 'Cancel' | translate }}\n </button>\n <button\n *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN', 'ROLE_INVENTORY_UPDATE']; allowAny: true\"\n [disabled]=\"formGroup.invalid || formGroup.pristine\"\n class=\"btn btn-primary btn-form\"\n [title]=\"'Save' | translate\"\n type=\"submit\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n</form>\n", dependencies: [{ kind: "component", type: i3$1.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i3$1.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: i3$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3$1.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$1.IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "component", type: i3$1.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: i3$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i3$1.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults"] }, { kind: "directive", type: i3$1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i3$1.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: "directive", type: i8.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i3$1.C8yTranslatePipe, name: "translate" }] });
249
+ DatapointLibraryDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapointLibraryDetailsComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.InventoryService }, { token: i3.FormBuilder }, { token: i3$1.AlertService }, { token: i1.Router }, { token: i5.TranslateService }, { token: i3$1.ColorService }, { token: i6.DatapointParserService }, { token: i7.DatapointSelectorService }, { token: DATAPOINT_LIBRARY_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
250
+ DatapointLibraryDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DatapointLibraryDetailsComponent, 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 container=\"body\"\n type=\"button\"\n [outsideClick]=\"true\"\n >\n <i [c8yIcon]=\"'question-circle-o'\" class=\"text-info\"></i>\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 (click)=\"cancel()\" class=\"btn btn-default\" [title]=\"'Cancel' | translate\" type=\"button\">\n {{ 'Cancel' | translate }}\n </button>\n <button\n *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN', 'ROLE_INVENTORY_UPDATE']; allowAny: true\"\n [disabled]=\"formGroup.invalid || formGroup.pristine\"\n class=\"btn btn-primary btn-form\"\n [title]=\"'Save' | translate\"\n type=\"submit\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n</form>\n", dependencies: [{ kind: "component", type: i3$1.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i3$1.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: i3$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i7$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "component", type: i3$1.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: i3$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i3$1.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults"] }, { kind: "directive", type: i3$1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i3$1.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: "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: "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: "pipe", type: i3$1.C8yTranslatePipe, name: "translate" }] });
223
251
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapointLibraryDetailsComponent, decorators: [{
224
252
  type: Component,
225
- args: [{ selector: 'c8y-datapoint-library-details', 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 <!-- TODO: add description to data point library templates -->\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=\"row\">\n <div class=\"col-sm-6\">\n <c8y-form-group>\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]=\"\n formGroup.controls?.fragment?.touched && formGroup.controls?.fragment?.errors\n \"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n\n <div class=\"col-sm-6\">\n <c8y-form-group>\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>\n </div>\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 btn-clean\"\n [popover]=\"\n 'Will make this entry available to all users on the tenant if checked.'\n | translate\n \"\n container=\"body\"\n type=\"button\"\n [outsideClick]=\"true\"\n >\n <i [c8yIcon]=\"'question-circle-o'\" class=\"text-info\"></i>\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 <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 (click)=\"cancel()\" class=\"btn btn-default\" [title]=\"'Cancel' | translate\" type=\"button\">\n {{ 'Cancel' | translate }}\n </button>\n <button\n *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN', 'ROLE_INVENTORY_UPDATE']; allowAny: true\"\n [disabled]=\"formGroup.invalid || formGroup.pristine\"\n class=\"btn btn-primary btn-form\"\n [title]=\"'Save' | translate\"\n type=\"submit\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n</form>\n" }]
226
- }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.InventoryService }, { type: i3.FormBuilder }, { type: i3$1.AlertService }, { type: i1.Router }, { type: i5.TranslateService }, { type: i3$1.ColorService }, { type: i6.DatapointParserService }, { type: undefined, decorators: [{
253
+ args: [{ selector: 'c8y-datapoint-library-details', 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 container=\"body\"\n type=\"button\"\n [outsideClick]=\"true\"\n >\n <i [c8yIcon]=\"'question-circle-o'\" class=\"text-info\"></i>\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 (click)=\"cancel()\" class=\"btn btn-default\" [title]=\"'Cancel' | translate\" type=\"button\">\n {{ 'Cancel' | translate }}\n </button>\n <button\n *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN', 'ROLE_INVENTORY_UPDATE']; allowAny: true\"\n [disabled]=\"formGroup.invalid || formGroup.pristine\"\n class=\"btn btn-primary btn-form\"\n [title]=\"'Save' | translate\"\n type=\"submit\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n</form>\n" }]
254
+ }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.InventoryService }, { type: i3.FormBuilder }, { type: i3$1.AlertService }, { type: i1.Router }, { type: i5.TranslateService }, { type: i3$1.ColorService }, { type: i6.DatapointParserService }, { type: i7.DatapointSelectorService }, { type: undefined, decorators: [{
227
255
  type: Optional
228
256
  }, {
229
257
  type: Inject,
@@ -277,7 +305,7 @@ class DatapointLibraryListComponent {
277
305
  }
278
306
  }
279
307
  DatapointLibraryListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapointLibraryListComponent, deps: [{ token: i2.InventoryService }, { token: i1.Router }, { token: i3$1.ModalService }, { token: i5.TranslateService }, { token: i3$1.AlertService }, { token: i6.DatapointParserService }], target: i0.ɵɵFactoryTarget.Component });
280
- DatapointLibraryListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DatapointLibraryListComponent, selector: "c8y-datapoint-library-list", ngImport: i0, template: "<c8y-title>Data point library</c8y-title>\n<c8y-breadcrumb>\n <c8y-breadcrumb-item [icon]=\"'c8y-tools'\" [label]=\"'Configuration' | translate\"></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n [icon]=\"'c8y-tools'\"\n [label]=\"'Data point library' | translate\"\n ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n<c8y-action-bar-item [placement]=\"'right'\" *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN']\" [priority]=\"1\">\n <button (click)=\"addDatapointEntry()\" class=\"btn btn-link\" [title]=\"'Add data point' | translate\">\n <i c8yIcon=\"plus-circle\"></i>\n {{ 'Add data point' | translate }}\n </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\" [priority]=\"0\">\n <button\n (click)=\"reload()\"\n class=\"btn btn-link\"\n [disabled]=\"isLoading\"\n [title]=\"'Reload' | translate\"\n type=\"button\"\n >\n <i c8yIcon=\"refresh\" [ngClass]=\"{ 'icon-spin': isLoading }\"></i>\n {{ 'Reload' | translate }}\n </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'left'\" itemClass=\"navbar-form hidden-xs\">\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=\"/users-guide/cockpit/#data-point-library\"></c8y-help>\n\n<!-- empty state\n-->\n<c8y-ui-empty-state\n *ngIf=\"(datapoints$ | async)?.data?.length === 0\"\n [icon]=\"'c8y-data-points'\"\n [title]=\"'No data points to display.' | translate\"\n [subtitle]=\"'Add a data point using the button below.' | translate\"\n>\n <p>\n <button\n (click)=\"addDatapointEntry()\"\n class=\"btn btn-primary\"\n [title]=\"'Add data point' | translate\"\n type=\"button\"\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 *ngIf=\"isLoading\" class=\"d-flex j-c-center\">\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 class=\"page-sticky-header hidden-xs\" *ngIf=\"datapoints.data.length\">\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 *c8yFor=\"let datapoint of datapoints; loadMore: 'hidden'; pipe: parsePipe\"\n class=\"col-sm-6 col-md-4 col-lg-3 col-xs-12\"\n >\n <div class=\"card pointer\" (click)=\"editDatapointEntry(datapoint)\">\n <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n <div class=\"dropdown settings pull-right\" dropdown #datapointOptionsDropdown=\"bs-dropdown\" [cdkTrapFocus]=\"datapointOptionsDropdown.isOpen\">\n <button\n [title]=\"'Actions' | translate\"\n type=\"button\"\n class=\"dropdown-toggle c8y-dropdown\"\n dropdownToggle\n >\n <i c8yIcon=\"ellipsis-v\"></i>\n </button>\n <ul class=\"dropdown-menu\" *dropdownMenu>\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 c8yIcon=\"circle\" [style.color]=\"datapoint.c8y_Kpi?.color\"></i>\n </div>\n <div class=\"card-title text-truncate\" [title]=\"datapoint.c8y_Kpi?.label\">\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 [config]=\"datapoint.c8y_Kpi\" [display]=\"'compact'\"></c8y-range-display>\n </div>\n </div>\n <div class=\"card-block\">\n <div class=\"col-sm-3 text-truncate\">\n <span>\n <label class=\"text-label-small m-r-4\" translate>Fragment</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 class=\"text-label-small m-r-4\" translate>Series</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 class=\"text-label-small m-r-4\" translate>Unit</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 class=\"text-label-small m-r-4\" translate>Target</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 [config]=\"datapoint.c8y_Kpi\" [display]=\"'inline'\"></c8y-range-display>\n </div>\n </div>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i6$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i3$1.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { kind: "component", type: i3$1.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i3$1.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i3$1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3$1.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$1.IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "directive", type: i3$1.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount"] }, { kind: "component", type: i3$1.LoadingComponent, selector: "c8y-loading" }, { kind: "component", type: i3$1.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i3$1.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: i3$1.RangeDisplayComponent, selector: "c8y-range-display", inputs: ["config", "display"] }, { kind: "component", type: i3$1.ListDisplaySwitchComponent, selector: "c8y-list-display-switch", inputs: ["listKey", "listLength", "filterPipe"], outputs: ["onListClassChange"] }, { kind: "directive", type: i8$1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i8$1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i8$1.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "pipe", type: i3$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }] });
308
+ DatapointLibraryListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DatapointLibraryListComponent, selector: "c8y-datapoint-library-list", ngImport: i0, template: "<c8y-title>Data point library</c8y-title>\n<c8y-breadcrumb>\n <c8y-breadcrumb-item [icon]=\"'c8y-tools'\" [label]=\"'Configuration' | translate\"></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n [icon]=\"'c8y-tools'\"\n [label]=\"'Data point library' | translate\"\n ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n<c8y-action-bar-item [placement]=\"'right'\" *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN']\" [priority]=\"1\">\n <button (click)=\"addDatapointEntry()\" class=\"btn btn-link\" [title]=\"'Add data point' | translate\">\n <i c8yIcon=\"plus-circle\"></i>\n {{ 'Add data point' | translate }}\n </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\" [priority]=\"0\">\n <button\n (click)=\"reload()\"\n class=\"btn btn-link\"\n [disabled]=\"isLoading\"\n [title]=\"'Reload' | translate\"\n type=\"button\"\n >\n <i c8yIcon=\"refresh\" [ngClass]=\"{ 'icon-spin': isLoading }\"></i>\n {{ 'Reload' | translate }}\n </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'left'\" itemClass=\"navbar-form hidden-xs\">\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=\"/users-guide/cockpit/#data-point-library\"></c8y-help>\n\n<!-- empty state\n-->\n<c8y-ui-empty-state\n *ngIf=\"(datapoints$ | async)?.data?.length === 0\"\n [icon]=\"'c8y-data-points'\"\n [title]=\"'No data points to display.' | translate\"\n [subtitle]=\"'Add a data point using the button below.' | translate\"\n>\n <p>\n <button\n (click)=\"addDatapointEntry()\"\n class=\"btn btn-primary\"\n [title]=\"'Add data point' | translate\"\n type=\"button\"\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 *ngIf=\"isLoading\" class=\"d-flex j-c-center\">\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 class=\"page-sticky-header hidden-xs\" *ngIf=\"datapoints.data.length\">\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 *c8yFor=\"let datapoint of datapoints; loadMore: 'hidden'; pipe: parsePipe\"\n class=\"col-sm-6 col-md-4 col-lg-3 col-xs-12\"\n >\n <div class=\"card pointer\" (click)=\"editDatapointEntry(datapoint)\">\n <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n <div class=\"dropdown settings pull-right\" dropdown #datapointOptionsDropdown=\"bs-dropdown\" [cdkTrapFocus]=\"datapointOptionsDropdown.isOpen\">\n <button\n [title]=\"'Actions' | translate\"\n type=\"button\"\n class=\"dropdown-toggle c8y-dropdown\"\n dropdownToggle\n >\n <i c8yIcon=\"ellipsis-v\"></i>\n </button>\n <ul class=\"dropdown-menu\" *dropdownMenu>\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 c8yIcon=\"circle\" [style.color]=\"datapoint.c8y_Kpi?.color\"></i>\n </div>\n <div class=\"card-title text-truncate\" [title]=\"datapoint.c8y_Kpi?.label\">\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 [config]=\"datapoint.c8y_Kpi\" [display]=\"'compact'\"></c8y-range-display>\n </div>\n </div>\n <div class=\"card-block\">\n <div class=\"col-sm-3 text-truncate\">\n <span>\n <label class=\"text-label-small m-r-4\" translate>Fragment</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 class=\"text-label-small m-r-4\" translate>Series</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 class=\"text-label-small m-r-4\" translate>Unit</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 class=\"text-label-small m-r-4\" translate>Target</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 [config]=\"datapoint.c8y_Kpi\" [display]=\"'inline'\"></c8y-range-display>\n </div>\n </div>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i6$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i3$1.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { kind: "component", type: i3$1.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i3$1.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i3$1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i7$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "directive", type: i3$1.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount"] }, { kind: "component", type: i3$1.LoadingComponent, selector: "c8y-loading" }, { kind: "component", type: i3$1.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i3$1.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: i3$1.RangeDisplayComponent, selector: "c8y-range-display", inputs: ["config", "display"] }, { kind: "component", type: i3$1.ListDisplaySwitchComponent, selector: "c8y-list-display-switch", inputs: ["listKey", "listLength", "filterPipe"], outputs: ["onListClassChange"] }, { 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: "pipe", type: i3$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i7$1.AsyncPipe, name: "async" }] });
281
309
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapointLibraryListComponent, decorators: [{
282
310
  type: Component,
283
311
  args: [{ selector: 'c8y-datapoint-library-list', template: "<c8y-title>Data point library</c8y-title>\n<c8y-breadcrumb>\n <c8y-breadcrumb-item [icon]=\"'c8y-tools'\" [label]=\"'Configuration' | translate\"></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n [icon]=\"'c8y-tools'\"\n [label]=\"'Data point library' | translate\"\n ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n<c8y-action-bar-item [placement]=\"'right'\" *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN']\" [priority]=\"1\">\n <button (click)=\"addDatapointEntry()\" class=\"btn btn-link\" [title]=\"'Add data point' | translate\">\n <i c8yIcon=\"plus-circle\"></i>\n {{ 'Add data point' | translate }}\n </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\" [priority]=\"0\">\n <button\n (click)=\"reload()\"\n class=\"btn btn-link\"\n [disabled]=\"isLoading\"\n [title]=\"'Reload' | translate\"\n type=\"button\"\n >\n <i c8yIcon=\"refresh\" [ngClass]=\"{ 'icon-spin': isLoading }\"></i>\n {{ 'Reload' | translate }}\n </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'left'\" itemClass=\"navbar-form hidden-xs\">\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=\"/users-guide/cockpit/#data-point-library\"></c8y-help>\n\n<!-- empty state\n-->\n<c8y-ui-empty-state\n *ngIf=\"(datapoints$ | async)?.data?.length === 0\"\n [icon]=\"'c8y-data-points'\"\n [title]=\"'No data points to display.' | translate\"\n [subtitle]=\"'Add a data point using the button below.' | translate\"\n>\n <p>\n <button\n (click)=\"addDatapointEntry()\"\n class=\"btn btn-primary\"\n [title]=\"'Add data point' | translate\"\n type=\"button\"\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 *ngIf=\"isLoading\" class=\"d-flex j-c-center\">\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 class=\"page-sticky-header hidden-xs\" *ngIf=\"datapoints.data.length\">\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 *c8yFor=\"let datapoint of datapoints; loadMore: 'hidden'; pipe: parsePipe\"\n class=\"col-sm-6 col-md-4 col-lg-3 col-xs-12\"\n >\n <div class=\"card pointer\" (click)=\"editDatapointEntry(datapoint)\">\n <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n <div class=\"dropdown settings pull-right\" dropdown #datapointOptionsDropdown=\"bs-dropdown\" [cdkTrapFocus]=\"datapointOptionsDropdown.isOpen\">\n <button\n [title]=\"'Actions' | translate\"\n type=\"button\"\n class=\"dropdown-toggle c8y-dropdown\"\n dropdownToggle\n >\n <i c8yIcon=\"ellipsis-v\"></i>\n </button>\n <ul class=\"dropdown-menu\" *dropdownMenu>\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 c8yIcon=\"circle\" [style.color]=\"datapoint.c8y_Kpi?.color\"></i>\n </div>\n <div class=\"card-title text-truncate\" [title]=\"datapoint.c8y_Kpi?.label\">\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 [config]=\"datapoint.c8y_Kpi\" [display]=\"'compact'\"></c8y-range-display>\n </div>\n </div>\n <div class=\"card-block\">\n <div class=\"col-sm-3 text-truncate\">\n <span>\n <label class=\"text-label-small m-r-4\" translate>Fragment</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 class=\"text-label-small m-r-4\" translate>Series</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 class=\"text-label-small m-r-4\" translate>Unit</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 class=\"text-label-small m-r-4\" translate>Target</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 [config]=\"datapoint.c8y_Kpi\" [display]=\"'inline'\"></c8y-range-display>\n </div>\n </div>\n </div>\n </div>\n</div>\n" }]
@@ -321,12 +349,29 @@ class DatapointLibraryModule {
321
349
  }
322
350
  }
323
351
  DatapointLibraryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapointLibraryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
324
- DatapointLibraryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: DatapointLibraryModule, declarations: [DatapointLibraryListComponent, DatapointLibraryDetailsComponent], imports: [A11yModule, CoreModule, BsDropdownModule, PopoverModule], exports: [DatapointLibraryListComponent, DatapointLibraryDetailsComponent] });
325
- DatapointLibraryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapointLibraryModule, imports: [A11yModule, CoreModule, BsDropdownModule, PopoverModule] });
352
+ DatapointLibraryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: DatapointLibraryModule, declarations: [DatapointLibraryListComponent, DatapointLibraryDetailsComponent], imports: [A11yModule,
353
+ CoreModule,
354
+ BsDropdownModule,
355
+ PopoverModule,
356
+ TooltipModule,
357
+ DatapointSelectorModule], exports: [DatapointLibraryListComponent, DatapointLibraryDetailsComponent] });
358
+ DatapointLibraryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapointLibraryModule, imports: [A11yModule,
359
+ CoreModule,
360
+ BsDropdownModule,
361
+ PopoverModule,
362
+ TooltipModule,
363
+ DatapointSelectorModule] });
326
364
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapointLibraryModule, decorators: [{
327
365
  type: NgModule,
328
366
  args: [{
329
- imports: [A11yModule, CoreModule, BsDropdownModule, PopoverModule],
367
+ imports: [
368
+ A11yModule,
369
+ CoreModule,
370
+ BsDropdownModule,
371
+ PopoverModule,
372
+ TooltipModule,
373
+ DatapointSelectorModule
374
+ ],
330
375
  declarations: [DatapointLibraryListComponent, DatapointLibraryDetailsComponent],
331
376
  exports: [DatapointLibraryListComponent, DatapointLibraryDetailsComponent]
332
377
  }]