@c8y/ngx-components 1018.0.176 → 1018.0.186

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 (44) hide show
  1. package/core/bootstrap/cookie-banner/cookie-banner.service.d.ts +1 -1
  2. package/core/common/ApplicationOptions.d.ts +2 -0
  3. package/core/date-time-picker/close-date-picker.directive.d.ts +14 -0
  4. package/core/date-time-picker/date-time-picker.component.d.ts +7 -2
  5. package/core/date-time-picker/date-time-picker.module.d.ts +8 -7
  6. package/core/product-experience/gainsight.service.d.ts +86 -28
  7. package/core/product-experience/index.d.ts +1 -0
  8. package/core/product-experience/product-experience.module.d.ts +18 -5
  9. package/core/product-experience/user-engagements.service.d.ts +109 -0
  10. package/core/user/user-edit-modal.component.d.ts +33 -6
  11. package/core/user/user-edit.component.d.ts +6 -11
  12. package/esm2020/context-dashboard/widget-config.component.mjs +3 -3
  13. package/esm2020/core/bootstrap/cookie-banner/cookie-banner.service.mjs +2 -2
  14. package/esm2020/core/common/ApplicationOptions.mjs +1 -1
  15. package/esm2020/core/dashboard/widget-time-context.component.mjs +3 -3
  16. package/esm2020/core/date-time-picker/close-date-picker.directive.mjs +36 -0
  17. package/esm2020/core/date-time-picker/date-time-picker.component.mjs +28 -8
  18. package/esm2020/core/date-time-picker/date-time-picker.module.mjs +4 -3
  19. package/esm2020/core/product-experience/gainsight.service.mjs +170 -81
  20. package/esm2020/core/product-experience/index.mjs +2 -1
  21. package/esm2020/core/product-experience/product-experience.module.mjs +42 -24
  22. package/esm2020/core/product-experience/user-engagements.service.mjs +174 -0
  23. package/esm2020/core/user/user-edit-modal.component.mjs +68 -33
  24. package/esm2020/core/user/user-edit.component.mjs +30 -39
  25. package/esm2020/datapoint-selector/datapoint-attributes-form/datapoint-attributes-form.component.mjs +3 -3
  26. package/esm2020/ecosystem/packages/package-details/package-details.component.mjs +2 -1
  27. package/fesm2015/c8y-ngx-components-context-dashboard.mjs +2 -2
  28. package/fesm2015/c8y-ngx-components-context-dashboard.mjs.map +1 -1
  29. package/fesm2015/c8y-ngx-components-datapoint-selector.mjs +2 -2
  30. package/fesm2015/c8y-ngx-components-datapoint-selector.mjs.map +1 -1
  31. package/fesm2015/c8y-ngx-components-ecosystem.mjs +1 -0
  32. package/fesm2015/c8y-ngx-components-ecosystem.mjs.map +1 -1
  33. package/fesm2015/c8y-ngx-components.mjs +518 -169
  34. package/fesm2015/c8y-ngx-components.mjs.map +1 -1
  35. package/fesm2020/c8y-ngx-components-context-dashboard.mjs +2 -2
  36. package/fesm2020/c8y-ngx-components-context-dashboard.mjs.map +1 -1
  37. package/fesm2020/c8y-ngx-components-datapoint-selector.mjs +2 -2
  38. package/fesm2020/c8y-ngx-components-datapoint-selector.mjs.map +1 -1
  39. package/fesm2020/c8y-ngx-components-ecosystem.mjs +1 -0
  40. package/fesm2020/c8y-ngx-components-ecosystem.mjs.map +1 -1
  41. package/fesm2020/c8y-ngx-components.mjs +513 -163
  42. package/fesm2020/c8y-ngx-components.mjs.map +1 -1
  43. package/locales/locales.pot +2 -2
  44. package/package.json +1 -1
@@ -274,7 +274,7 @@ DatapointAttributesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
274
274
  useExisting: forwardRef(() => DatapointAttributesFormComponent),
275
275
  multi: true
276
276
  }
277
- ], ngImport: i0, template: "<div [formGroup]=\"formGroup\" *ngIf=\"!rawValue?.__template || showFormIfTemplateWasSelected\">\n <fieldset\n class=\"c8y-fieldset\"\n *ngIf=\"formGroup.controls?.label || formGroup.controls?.unit || formGroup.controls?.target\"\n >\n <legend translate>Details</legend>\n <div class=\"row\">\n <div class=\"col-md-6\" *ngIf=\"formGroup.controls?.label\">\n <c8y-form-group>\n <label translate>Label</label>\n <input\n class=\"form-control\"\n name=\"label\"\n formControlName=\"label\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'Temperature' }\"\n />\n <c8y-messages\n [show]=\"formGroup.controls.label.touched && formGroup.controls.label.errors\"\n >\n <c8y-message\n *ngFor=\"let item of customValidationErrorMessages['label'] | keyvalue\"\n [name]=\"item.key\"\n [text]=\"item.value\"\n ></c8y-message>\n </c8y-messages>\n </c8y-form-group>\n </div>\n\n <div class=\"col-md-6\" *ngIf=\"formGroup.controls?.unit\">\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 [show]=\"formGroup.controls.unit.touched && formGroup.controls.unit.errors\">\n <c8y-message\n *ngFor=\"let item of customValidationErrorMessages['unit'] | keyvalue\"\n [name]=\"item.key\"\n [text]=\"item.value\"\n ></c8y-message>\n </c8y-messages>\n </c8y-form-group>\n </div>\n\n <div class=\"col-md-6\" *ngIf=\"formGroup.controls?.target && showTarget\">\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 >\n <c8y-message\n *ngFor=\"let item of customValidationErrorMessages['target'] | keyvalue\"\n [name]=\"item.key\"\n [text]=\"item.value\"\n ></c8y-message>\n </c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n </fieldset>\n <fieldset class=\"c8y-fieldset\" *ngIf=\"range && showRange\">\n <legend translate>Range</legend>\n <div class=\"row\" formGroupName=\"range\">\n <div class=\"col-md-6\">\n <c8y-form-group [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.min?.errors }\">\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 [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.max?.errors }\">\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\">\n <c8y-message\n *ngFor=\"let item of customValidationErrorMessages['max'] | keyvalue\"\n [name]=\"item.key\"\n [text]=\"item.value\"\n ></c8y-message>\n </c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n </fieldset>\n\n <fieldset class=\"c8y-fieldset\" formGroupName=\"yellowRange\" *ngIf=\"yellowRange && showYellowRange\">\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]=\"(range?.touched || yellowRange?.touched) && yellowRange.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 || 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]=\"(range?.touched || yellowRange?.touched) && yellowRange.controls?.max?.errors\"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n </fieldset>\n\n <fieldset class=\"c8y-fieldset\" formGroupName=\"redRange\" *ngIf=\"redRange && showRedRange\">\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': (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': (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\n <fieldset class=\"c8y-fieldset\" *ngIf=\"chart && showChart\" formGroupName=\"chart\">\n <legend translate>Chart</legend>\n <div class=\"tight-grid\">\n <div class=\"col-xs-6 col-sm-4\">\n <c8y-form-group>\n <label for=\"display\">\n {{ 'Display' | translate }}\n <button\n class=\"btn-help btn-help--sm\"\n type=\"button\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{ 'Value displayed when data is aggregated' | translate }}\"\n [placement]=\"'right'\"\n triggers=\"focus\"\n [container]=\"'body'\"\n ></button>\n </label>\n <div class=\"c8y-select-wrapper\">\n <select class=\"form-control\" formControlName=\"renderType\">\n <option *ngFor=\"let type of CHART_RENDER_TYPES\" [ngValue]=\"type.val\">\n {{ type.text | translate }}\n </option>\n </select>\n </div>\n </c8y-form-group>\n </div>\n <div class=\"col-xs-6 col-sm-4\">\n <c8y-form-group>\n <label for=\"chartType\" translate>Chart type</label>\n <div class=\"c8y-select-wrapper\">\n <select class=\"form-control\" formControlName=\"lineType\">\n <option *ngFor=\"let type of CHART_LINE_TYPES\" [ngValue]=\"type.val\">\n {{ type.text | translate }}\n </option>\n </select>\n <span></span>\n </div>\n </c8y-form-group>\n </div>\n <div class=\"col-xs-6 col-sm-4\">\n <c8y-form-group>\n <label for=\"yAxis\" translate>Y-axis</label>\n <div class=\"c8y-select-wrapper\">\n <select class=\"form-control\" formControlName=\"yAxisType\">\n <option *ngFor=\"let type of AXIS_TYPES\" [ngValue]=\"type.val\">\n {{ type.text | translate }}\n </option>\n </select>\n <span></span>\n </div>\n </c8y-form-group>\n </div>\n </div>\n </fieldset>\n</div>\n", dependencies: [{ kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i5.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }] });
277
+ ], ngImport: i0, template: "<div [formGroup]=\"formGroup\">\n <ng-container *ngIf=\"!rawValue?.__template || showFormIfTemplateWasSelected\">\n <fieldset\n class=\"c8y-fieldset\"\n *ngIf=\"formGroup.controls?.label || formGroup.controls?.unit || formGroup.controls?.target\"\n >\n <legend translate>Details</legend>\n <div class=\"row\">\n <div class=\"col-md-6\" *ngIf=\"formGroup.controls?.label\">\n <c8y-form-group>\n <label translate>Label</label>\n <input\n class=\"form-control\"\n [placeholder]=\"'e.g. {{ example }}' | translate : { example: 'Temperature' }\"\n name=\"label\"\n formControlName=\"label\"\n />\n <c8y-messages\n [show]=\"formGroup.controls.label.touched && formGroup.controls.label.errors\"\n >\n <c8y-message\n *ngFor=\"let item of customValidationErrorMessages['label'] | keyvalue\"\n [name]=\"item.key\"\n [text]=\"item.value\"\n ></c8y-message>\n </c8y-messages>\n </c8y-form-group>\n </div>\n\n <div class=\"col-md-6\" *ngIf=\"formGroup.controls?.unit\">\n <c8y-form-group>\n <label translate>Unit</label>\n <input\n class=\"form-control\"\n [placeholder]=\"'e.g. {{ example }}' | translate : { example: '\u00BAC' }\"\n name=\"unit\"\n formControlName=\"unit\"\n />\n <c8y-messages\n [show]=\"formGroup.controls.unit.touched && formGroup.controls.unit.errors\"\n >\n <c8y-message\n *ngFor=\"let item of customValidationErrorMessages['unit'] | keyvalue\"\n [name]=\"item.key\"\n [text]=\"item.value\"\n ></c8y-message>\n </c8y-messages>\n </c8y-form-group>\n </div>\n\n <div class=\"col-md-6\" *ngIf=\"formGroup.controls?.target && showTarget\">\n <c8y-form-group\n [ngClass]=\"{\n 'has-error':\n (range?.touched || formGroup.controls.target.touched) &&\n formGroup.controls?.target?.errors\n }\"\n >\n <label translate>Target</label>\n <input\n class=\"form-control\"\n [placeholder]=\"'e.g. {{ example }}' | translate : { example: 25 }\"\n type=\"number\"\n name=\"target\"\n formControlName=\"target\"\n />\n <c8y-messages\n [show]=\"\n (range?.touched || formGroup.controls.target.touched) &&\n formGroup.controls.target.errors\n \"\n >\n <c8y-message\n *ngFor=\"let item of customValidationErrorMessages['target'] | keyvalue\"\n [name]=\"item.key\"\n [text]=\"item.value\"\n ></c8y-message>\n </c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n </fieldset>\n <fieldset class=\"c8y-fieldset\" *ngIf=\"range && showRange\">\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 class=\"form-control\"\n [placeholder]=\"'e.g. {{ example }}' | translate : { example: 0 }\"\n type=\"number\"\n name=\"min\"\n formControlName=\"min\"\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 class=\"form-control\"\n [placeholder]=\"'e.g. {{ example }}' | translate : { example: 100 }\"\n type=\"number\"\n name=\"max\"\n formControlName=\"max\"\n />\n <c8y-messages [show]=\"range?.touched && range.controls?.max?.errors\">\n <c8y-message\n *ngFor=\"let item of customValidationErrorMessages['max'] | keyvalue\"\n [name]=\"item.key\"\n [text]=\"item.value\"\n ></c8y-message>\n </c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n </fieldset>\n\n <fieldset\n class=\"c8y-fieldset\"\n *ngIf=\"yellowRange && showYellowRange\"\n formGroupName=\"yellowRange\"\n >\n <legend translate>Yellow range</legend>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <c8y-form-group\n [ngClass]=\"{\n 'has-error':\n (range?.touched || yellowRange?.touched) && yellowRange?.controls?.min?.errors\n }\"\n >\n <label translate>Min</label>\n <input\n class=\"form-control\"\n [placeholder]=\"'e.g. {{ example }}' | translate : { example: 50 }\"\n type=\"number\"\n name=\"min\"\n formControlName=\"min\"\n />\n <c8y-messages\n [show]=\"(range?.touched || yellowRange?.touched) && yellowRange.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 || yellowRange?.touched) && yellowRange?.controls?.max?.errors\n }\"\n >\n <label translate>Max</label>\n <input\n class=\"form-control\"\n [placeholder]=\"'e.g. {{ example }}' | translate : { example: 75 }\"\n type=\"number\"\n name=\"max\"\n formControlName=\"max\"\n />\n <c8y-messages\n [show]=\"(range?.touched || yellowRange?.touched) && yellowRange.controls?.max?.errors\"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n </fieldset>\n\n <fieldset class=\"c8y-fieldset\" *ngIf=\"redRange && showRedRange\" 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': (range?.touched || redRange?.touched) && redRange?.controls?.min?.errors\n }\"\n >\n <label translate>Min</label>\n <input\n class=\"form-control\"\n [placeholder]=\"'e.g. {{ example }}' | translate : { example: 75 }\"\n type=\"number\"\n name=\"min\"\n formControlName=\"min\"\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': (range?.touched || redRange?.touched) && redRange?.controls?.max?.errors\n }\"\n >\n <label translate>Max</label>\n <input\n class=\"form-control\"\n [placeholder]=\"'e.g. {{ example }}' | translate : { example: 100 }\"\n type=\"number\"\n name=\"max\"\n formControlName=\"max\"\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 </ng-container>\n\n <fieldset class=\"c8y-fieldset\" *ngIf=\"chart && showChart\" formGroupName=\"chart\">\n <legend translate>Chart</legend>\n <div class=\"tight-grid\">\n <div class=\"col-xs-6 col-sm-4\">\n <c8y-form-group>\n <label for=\"display\">\n {{ 'Display' | translate }}\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n [placement]=\"'right'\"\n [container]=\"'body'\"\n type=\"button\"\n popover=\"{{ 'Value displayed when data is aggregated' | translate }}\"\n triggers=\"focus\"\n ></button>\n </label>\n <div class=\"c8y-select-wrapper\">\n <select class=\"form-control\" formControlName=\"renderType\">\n <option *ngFor=\"let type of CHART_RENDER_TYPES\" [ngValue]=\"type.val\">\n {{ type.text | translate }}\n </option>\n </select>\n </div>\n </c8y-form-group>\n </div>\n <div class=\"col-xs-6 col-sm-4\">\n <c8y-form-group>\n <label for=\"chartType\" translate>Chart type</label>\n <div class=\"c8y-select-wrapper\">\n <select class=\"form-control\" formControlName=\"lineType\">\n <option *ngFor=\"let type of CHART_LINE_TYPES\" [ngValue]=\"type.val\">\n {{ type.text | translate }}\n </option>\n </select>\n <span></span>\n </div>\n </c8y-form-group>\n </div>\n <div class=\"col-xs-6 col-sm-4\">\n <c8y-form-group>\n <label for=\"yAxis\" translate>Y-axis</label>\n <div class=\"c8y-select-wrapper\">\n <select class=\"form-control\" formControlName=\"yAxisType\">\n <option *ngFor=\"let type of AXIS_TYPES\" [ngValue]=\"type.val\">\n {{ type.text | translate }}\n </option>\n </select>\n <span></span>\n </div>\n </c8y-form-group>\n </div>\n </div>\n </fieldset>\n</div>\n", dependencies: [{ kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i5.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }] });
278
278
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapointAttributesFormComponent, decorators: [{
279
279
  type: Component,
280
280
  args: [{ selector: 'c8y-datapoint-attributes-form', providers: [
@@ -288,7 +288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
288
288
  useExisting: forwardRef(() => DatapointAttributesFormComponent),
289
289
  multi: true
290
290
  }
291
- ], template: "<div [formGroup]=\"formGroup\" *ngIf=\"!rawValue?.__template || showFormIfTemplateWasSelected\">\n <fieldset\n class=\"c8y-fieldset\"\n *ngIf=\"formGroup.controls?.label || formGroup.controls?.unit || formGroup.controls?.target\"\n >\n <legend translate>Details</legend>\n <div class=\"row\">\n <div class=\"col-md-6\" *ngIf=\"formGroup.controls?.label\">\n <c8y-form-group>\n <label translate>Label</label>\n <input\n class=\"form-control\"\n name=\"label\"\n formControlName=\"label\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'Temperature' }\"\n />\n <c8y-messages\n [show]=\"formGroup.controls.label.touched && formGroup.controls.label.errors\"\n >\n <c8y-message\n *ngFor=\"let item of customValidationErrorMessages['label'] | keyvalue\"\n [name]=\"item.key\"\n [text]=\"item.value\"\n ></c8y-message>\n </c8y-messages>\n </c8y-form-group>\n </div>\n\n <div class=\"col-md-6\" *ngIf=\"formGroup.controls?.unit\">\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 [show]=\"formGroup.controls.unit.touched && formGroup.controls.unit.errors\">\n <c8y-message\n *ngFor=\"let item of customValidationErrorMessages['unit'] | keyvalue\"\n [name]=\"item.key\"\n [text]=\"item.value\"\n ></c8y-message>\n </c8y-messages>\n </c8y-form-group>\n </div>\n\n <div class=\"col-md-6\" *ngIf=\"formGroup.controls?.target && showTarget\">\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 >\n <c8y-message\n *ngFor=\"let item of customValidationErrorMessages['target'] | keyvalue\"\n [name]=\"item.key\"\n [text]=\"item.value\"\n ></c8y-message>\n </c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n </fieldset>\n <fieldset class=\"c8y-fieldset\" *ngIf=\"range && showRange\">\n <legend translate>Range</legend>\n <div class=\"row\" formGroupName=\"range\">\n <div class=\"col-md-6\">\n <c8y-form-group [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.min?.errors }\">\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 [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.max?.errors }\">\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\">\n <c8y-message\n *ngFor=\"let item of customValidationErrorMessages['max'] | keyvalue\"\n [name]=\"item.key\"\n [text]=\"item.value\"\n ></c8y-message>\n </c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n </fieldset>\n\n <fieldset class=\"c8y-fieldset\" formGroupName=\"yellowRange\" *ngIf=\"yellowRange && showYellowRange\">\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]=\"(range?.touched || yellowRange?.touched) && yellowRange.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 || 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]=\"(range?.touched || yellowRange?.touched) && yellowRange.controls?.max?.errors\"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n </fieldset>\n\n <fieldset class=\"c8y-fieldset\" formGroupName=\"redRange\" *ngIf=\"redRange && showRedRange\">\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': (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': (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\n <fieldset class=\"c8y-fieldset\" *ngIf=\"chart && showChart\" formGroupName=\"chart\">\n <legend translate>Chart</legend>\n <div class=\"tight-grid\">\n <div class=\"col-xs-6 col-sm-4\">\n <c8y-form-group>\n <label for=\"display\">\n {{ 'Display' | translate }}\n <button\n class=\"btn-help btn-help--sm\"\n type=\"button\"\n [attr.aria-label]=\"'Help' | translate\"\n popover=\"{{ 'Value displayed when data is aggregated' | translate }}\"\n [placement]=\"'right'\"\n triggers=\"focus\"\n [container]=\"'body'\"\n ></button>\n </label>\n <div class=\"c8y-select-wrapper\">\n <select class=\"form-control\" formControlName=\"renderType\">\n <option *ngFor=\"let type of CHART_RENDER_TYPES\" [ngValue]=\"type.val\">\n {{ type.text | translate }}\n </option>\n </select>\n </div>\n </c8y-form-group>\n </div>\n <div class=\"col-xs-6 col-sm-4\">\n <c8y-form-group>\n <label for=\"chartType\" translate>Chart type</label>\n <div class=\"c8y-select-wrapper\">\n <select class=\"form-control\" formControlName=\"lineType\">\n <option *ngFor=\"let type of CHART_LINE_TYPES\" [ngValue]=\"type.val\">\n {{ type.text | translate }}\n </option>\n </select>\n <span></span>\n </div>\n </c8y-form-group>\n </div>\n <div class=\"col-xs-6 col-sm-4\">\n <c8y-form-group>\n <label for=\"yAxis\" translate>Y-axis</label>\n <div class=\"c8y-select-wrapper\">\n <select class=\"form-control\" formControlName=\"yAxisType\">\n <option *ngFor=\"let type of AXIS_TYPES\" [ngValue]=\"type.val\">\n {{ type.text | translate }}\n </option>\n </select>\n <span></span>\n </div>\n </c8y-form-group>\n </div>\n </div>\n </fieldset>\n</div>\n" }]
291
+ ], template: "<div [formGroup]=\"formGroup\">\n <ng-container *ngIf=\"!rawValue?.__template || showFormIfTemplateWasSelected\">\n <fieldset\n class=\"c8y-fieldset\"\n *ngIf=\"formGroup.controls?.label || formGroup.controls?.unit || formGroup.controls?.target\"\n >\n <legend translate>Details</legend>\n <div class=\"row\">\n <div class=\"col-md-6\" *ngIf=\"formGroup.controls?.label\">\n <c8y-form-group>\n <label translate>Label</label>\n <input\n class=\"form-control\"\n [placeholder]=\"'e.g. {{ example }}' | translate : { example: 'Temperature' }\"\n name=\"label\"\n formControlName=\"label\"\n />\n <c8y-messages\n [show]=\"formGroup.controls.label.touched && formGroup.controls.label.errors\"\n >\n <c8y-message\n *ngFor=\"let item of customValidationErrorMessages['label'] | keyvalue\"\n [name]=\"item.key\"\n [text]=\"item.value\"\n ></c8y-message>\n </c8y-messages>\n </c8y-form-group>\n </div>\n\n <div class=\"col-md-6\" *ngIf=\"formGroup.controls?.unit\">\n <c8y-form-group>\n <label translate>Unit</label>\n <input\n class=\"form-control\"\n [placeholder]=\"'e.g. {{ example }}' | translate : { example: '\u00BAC' }\"\n name=\"unit\"\n formControlName=\"unit\"\n />\n <c8y-messages\n [show]=\"formGroup.controls.unit.touched && formGroup.controls.unit.errors\"\n >\n <c8y-message\n *ngFor=\"let item of customValidationErrorMessages['unit'] | keyvalue\"\n [name]=\"item.key\"\n [text]=\"item.value\"\n ></c8y-message>\n </c8y-messages>\n </c8y-form-group>\n </div>\n\n <div class=\"col-md-6\" *ngIf=\"formGroup.controls?.target && showTarget\">\n <c8y-form-group\n [ngClass]=\"{\n 'has-error':\n (range?.touched || formGroup.controls.target.touched) &&\n formGroup.controls?.target?.errors\n }\"\n >\n <label translate>Target</label>\n <input\n class=\"form-control\"\n [placeholder]=\"'e.g. {{ example }}' | translate : { example: 25 }\"\n type=\"number\"\n name=\"target\"\n formControlName=\"target\"\n />\n <c8y-messages\n [show]=\"\n (range?.touched || formGroup.controls.target.touched) &&\n formGroup.controls.target.errors\n \"\n >\n <c8y-message\n *ngFor=\"let item of customValidationErrorMessages['target'] | keyvalue\"\n [name]=\"item.key\"\n [text]=\"item.value\"\n ></c8y-message>\n </c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n </fieldset>\n <fieldset class=\"c8y-fieldset\" *ngIf=\"range && showRange\">\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 class=\"form-control\"\n [placeholder]=\"'e.g. {{ example }}' | translate : { example: 0 }\"\n type=\"number\"\n name=\"min\"\n formControlName=\"min\"\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 class=\"form-control\"\n [placeholder]=\"'e.g. {{ example }}' | translate : { example: 100 }\"\n type=\"number\"\n name=\"max\"\n formControlName=\"max\"\n />\n <c8y-messages [show]=\"range?.touched && range.controls?.max?.errors\">\n <c8y-message\n *ngFor=\"let item of customValidationErrorMessages['max'] | keyvalue\"\n [name]=\"item.key\"\n [text]=\"item.value\"\n ></c8y-message>\n </c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n </fieldset>\n\n <fieldset\n class=\"c8y-fieldset\"\n *ngIf=\"yellowRange && showYellowRange\"\n formGroupName=\"yellowRange\"\n >\n <legend translate>Yellow range</legend>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <c8y-form-group\n [ngClass]=\"{\n 'has-error':\n (range?.touched || yellowRange?.touched) && yellowRange?.controls?.min?.errors\n }\"\n >\n <label translate>Min</label>\n <input\n class=\"form-control\"\n [placeholder]=\"'e.g. {{ example }}' | translate : { example: 50 }\"\n type=\"number\"\n name=\"min\"\n formControlName=\"min\"\n />\n <c8y-messages\n [show]=\"(range?.touched || yellowRange?.touched) && yellowRange.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 || yellowRange?.touched) && yellowRange?.controls?.max?.errors\n }\"\n >\n <label translate>Max</label>\n <input\n class=\"form-control\"\n [placeholder]=\"'e.g. {{ example }}' | translate : { example: 75 }\"\n type=\"number\"\n name=\"max\"\n formControlName=\"max\"\n />\n <c8y-messages\n [show]=\"(range?.touched || yellowRange?.touched) && yellowRange.controls?.max?.errors\"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n </fieldset>\n\n <fieldset class=\"c8y-fieldset\" *ngIf=\"redRange && showRedRange\" 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': (range?.touched || redRange?.touched) && redRange?.controls?.min?.errors\n }\"\n >\n <label translate>Min</label>\n <input\n class=\"form-control\"\n [placeholder]=\"'e.g. {{ example }}' | translate : { example: 75 }\"\n type=\"number\"\n name=\"min\"\n formControlName=\"min\"\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': (range?.touched || redRange?.touched) && redRange?.controls?.max?.errors\n }\"\n >\n <label translate>Max</label>\n <input\n class=\"form-control\"\n [placeholder]=\"'e.g. {{ example }}' | translate : { example: 100 }\"\n type=\"number\"\n name=\"max\"\n formControlName=\"max\"\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 </ng-container>\n\n <fieldset class=\"c8y-fieldset\" *ngIf=\"chart && showChart\" formGroupName=\"chart\">\n <legend translate>Chart</legend>\n <div class=\"tight-grid\">\n <div class=\"col-xs-6 col-sm-4\">\n <c8y-form-group>\n <label for=\"display\">\n {{ 'Display' | translate }}\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n [placement]=\"'right'\"\n [container]=\"'body'\"\n type=\"button\"\n popover=\"{{ 'Value displayed when data is aggregated' | translate }}\"\n triggers=\"focus\"\n ></button>\n </label>\n <div class=\"c8y-select-wrapper\">\n <select class=\"form-control\" formControlName=\"renderType\">\n <option *ngFor=\"let type of CHART_RENDER_TYPES\" [ngValue]=\"type.val\">\n {{ type.text | translate }}\n </option>\n </select>\n </div>\n </c8y-form-group>\n </div>\n <div class=\"col-xs-6 col-sm-4\">\n <c8y-form-group>\n <label for=\"chartType\" translate>Chart type</label>\n <div class=\"c8y-select-wrapper\">\n <select class=\"form-control\" formControlName=\"lineType\">\n <option *ngFor=\"let type of CHART_LINE_TYPES\" [ngValue]=\"type.val\">\n {{ type.text | translate }}\n </option>\n </select>\n <span></span>\n </div>\n </c8y-form-group>\n </div>\n <div class=\"col-xs-6 col-sm-4\">\n <c8y-form-group>\n <label for=\"yAxis\" translate>Y-axis</label>\n <div class=\"c8y-select-wrapper\">\n <select class=\"form-control\" formControlName=\"yAxisType\">\n <option *ngFor=\"let type of AXIS_TYPES\" [ngValue]=\"type.val\">\n {{ type.text | translate }}\n </option>\n </select>\n <span></span>\n </div>\n </c8y-form-group>\n </div>\n </div>\n </fieldset>\n</div>\n" }]
292
292
  }], ctorParameters: function () { return [{ type: DatapointAttributesFormValidationService }]; }, propDecorators: { showTarget: [{
293
293
  type: Input
294
294
  }], showRange: [{