@c8y/ngx-components 1023.48.3 → 1023.52.0

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 (70) hide show
  1. package/asset-properties/index.d.ts +1 -2
  2. package/asset-properties/index.d.ts.map +1 -1
  3. package/context-dashboard/index.d.ts.map +1 -1
  4. package/datapoint-explorer/view/index.d.ts +8 -0
  5. package/datapoint-explorer/view/index.d.ts.map +1 -1
  6. package/datapoint-selector/index.d.ts +14 -1
  7. package/datapoint-selector/index.d.ts.map +1 -1
  8. package/echart/index.d.ts +7 -2
  9. package/echart/index.d.ts.map +1 -1
  10. package/echart/models/index.d.ts +1 -0
  11. package/echart/models/index.d.ts.map +1 -1
  12. package/fesm2022/c8y-ngx-components-asset-properties.mjs +3 -4
  13. package/fesm2022/c8y-ngx-components-asset-properties.mjs.map +1 -1
  14. package/fesm2022/c8y-ngx-components-context-dashboard.mjs +2 -3
  15. package/fesm2022/c8y-ngx-components-context-dashboard.mjs.map +1 -1
  16. package/fesm2022/c8y-ngx-components-datapoint-explorer-view.mjs +33 -4
  17. package/fesm2022/c8y-ngx-components-datapoint-explorer-view.mjs.map +1 -1
  18. package/fesm2022/c8y-ngx-components-datapoint-selector.mjs +24 -7
  19. package/fesm2022/c8y-ngx-components-datapoint-selector.mjs.map +1 -1
  20. package/fesm2022/c8y-ngx-components-device-grid.mjs +1 -1
  21. package/fesm2022/c8y-ngx-components-device-grid.mjs.map +1 -1
  22. package/fesm2022/c8y-ngx-components-echart-models.mjs.map +1 -1
  23. package/fesm2022/c8y-ngx-components-echart.mjs +128 -52
  24. package/fesm2022/c8y-ngx-components-echart.mjs.map +1 -1
  25. package/fesm2022/c8y-ngx-components-global-context.mjs +7 -2
  26. package/fesm2022/c8y-ngx-components-global-context.mjs.map +1 -1
  27. package/fesm2022/c8y-ngx-components-widgets-definitions-asset-table.mjs +127 -0
  28. package/fesm2022/c8y-ngx-components-widgets-definitions-asset-table.mjs.map +1 -0
  29. package/fesm2022/c8y-ngx-components-widgets-definitions-datapoints-graph.mjs +3 -3
  30. package/fesm2022/c8y-ngx-components-widgets-definitions-datapoints-graph.mjs.map +1 -1
  31. package/fesm2022/c8y-ngx-components-widgets-definitions.mjs +1 -0
  32. package/fesm2022/c8y-ngx-components-widgets-definitions.mjs.map +1 -1
  33. package/fesm2022/c8y-ngx-components-widgets-exports.mjs +8 -1
  34. package/fesm2022/c8y-ngx-components-widgets-exports.mjs.map +1 -1
  35. package/fesm2022/c8y-ngx-components-widgets-implementations-asset-table.mjs +1959 -0
  36. package/fesm2022/c8y-ngx-components-widgets-implementations-asset-table.mjs.map +1 -0
  37. package/fesm2022/c8y-ngx-components-widgets-implementations-datapoints-graph.mjs +90 -56
  38. package/fesm2022/c8y-ngx-components-widgets-implementations-datapoints-graph.mjs.map +1 -1
  39. package/fesm2022/c8y-ngx-components.mjs +1724 -1464
  40. package/fesm2022/c8y-ngx-components.mjs.map +1 -1
  41. package/global-context/index.d.ts +1 -0
  42. package/global-context/index.d.ts.map +1 -1
  43. package/index.d.ts +1453 -1339
  44. package/index.d.ts.map +1 -1
  45. package/locales/de.po +213 -3
  46. package/locales/es.po +213 -3
  47. package/locales/fr.po +213 -3
  48. package/locales/ja_JP.po +213 -3
  49. package/locales/ko.po +213 -3
  50. package/locales/locales.pot +219 -3
  51. package/locales/nl.po +213 -3
  52. package/locales/pl.po +213 -3
  53. package/locales/pt_BR.po +213 -3
  54. package/locales/zh_CN.po +213 -3
  55. package/locales/zh_TW.po +213 -3
  56. package/package.json +1 -1
  57. package/widgets/cockpit-exports/index.d.ts +6 -0
  58. package/widgets/cockpit-exports/index.d.ts.map +1 -1
  59. package/widgets/definitions/asset-table/index.d.ts +6 -0
  60. package/widgets/definitions/asset-table/index.d.ts.map +1 -0
  61. package/widgets/definitions/index.d.ts +1 -0
  62. package/widgets/definitions/index.d.ts.map +1 -1
  63. package/widgets/device-management-exports/index.d.ts +6 -0
  64. package/widgets/device-management-exports/index.d.ts.map +1 -1
  65. package/widgets/exports/index.d.ts +8 -1
  66. package/widgets/exports/index.d.ts.map +1 -1
  67. package/widgets/implementations/asset-table/index.d.ts +229 -0
  68. package/widgets/implementations/asset-table/index.d.ts.map +1 -0
  69. package/widgets/implementations/datapoints-graph/index.d.ts +14 -3
  70. package/widgets/implementations/datapoints-graph/index.d.ts.map +1 -1
@@ -2953,6 +2953,11 @@ class HistoryModeConfigurationControlsComponent {
2953
2953
  this.updateErrorSignals();
2954
2954
  this.validationStatus.emit(this.currentForm.valid);
2955
2955
  }
2956
+ setDateToNow() {
2957
+ const now = new Date();
2958
+ now.setSeconds(0, 0);
2959
+ this.currentForm.get('dateTimeContext')?.get('dateTo')?.setValue(now.toISOString());
2960
+ }
2956
2961
  updateErrorSignals() {
2957
2962
  const dateTimeContext = this.currentForm?.get('dateTimeContext');
2958
2963
  const dateFromControl = dateTimeContext?.get('dateFrom');
@@ -3097,7 +3102,7 @@ class HistoryModeConfigurationControlsComponent {
3097
3102
  };
3098
3103
  }
3099
3104
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HistoryModeConfigurationControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3100
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: HistoryModeConfigurationControlsComponent, isStandalone: true, selector: "c8y-history-mode-configuration-controls", inputs: { settings: "settings", context: "context" }, outputs: { contextChange: "contextChange", validationStatus: "validationStatus" }, ngImport: i0, template: "@if (currentForm) {\n @let SHOW_TIME_CONTEXT = settings.showTimeContext;\n @let SHOW_AGGREGATION = settings.showAggregation;\n\n <form [formGroup]=\"currentForm\">\n <div class=\"content-flex-100\">\n <div\n class=\"col-4\"\n [ngClass]=\"{ 'm-b-8': !SHOW_AGGREGATION }\"\n >\n @if (SHOW_TIME_CONTEXT) {\n @let dateTimeContext = currentForm.get('dateTimeContext');\n @let tempDateFromValue = dateTimeContext.get('dateFrom')?.value;\n @let tempDateToValue = dateTimeContext.get('dateTo')?.value;\n @let fromErrors = dateFromErrors();\n @let toErrors = dateToErrors();\n\n <fieldset class=\"c8y-fieldset\">\n <legend>\n <div class=\"standalone btn-icon-dot__item time-context m-r-4\">\n <i\n class=\"\"\n [c8yIcon]=\"'calendar'\"\n ></i>\n </div>\n {{ 'Date & time range' | translate }}\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"TIME_RANGE_PICKER_POPOVER | translate\"\n placement=\"top\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n [adaptivePosition]=\"true\"\n ></button>\n </legend>\n <c8y-form-group class=\"content-flex-58 d-flex a-i-center m-b-0 p-t-16\">\n <c8y-form-group\n [class.has-error]=\"fromErrors\"\n class=\"form-group-sm d-flex a-i-center col-6 flex-wrap\"\n >\n <label\n class=\"m-b-sm-0 m-r-8 text-nowrap\"\n style=\"min-width: 30px\"\n [title]=\"'From`date`' | translate\"\n for=\"dateFrom\"\n translate\n >\n From`date`\n </label>\n <c8y-date-time-picker\n [class.has-error]=\"fromErrors\"\n id=\"dateFrom\"\n [maxDate]=\"tempDateToValue\"\n [placeholder]=\"'From`date`' | translate\"\n [formControl]=\"dateTimeContext.get('dateFrom')\"\n ></c8y-date-time-picker>\n <c8y-messages [show]=\"fromErrors\">\n <c8y-message\n name=\"dateAfterRangeMax\"\n [text]=\"errorMessages.dateAfterRangeMax | translate\"\n ></c8y-message>\n <c8y-message\n name=\"invalidDateTime\"\n [text]=\"errorMessages.invalidDateTime | translate\"\n ></c8y-message>\n <c8y-message\n name=\"invalidDateRange\"\n [text]=\"errorMessages.invalidDateRange | translate\"\n ></c8y-message>\n </c8y-messages>\n </c8y-form-group>\n\n <c8y-form-group\n [class.has-error]=\"toErrors\"\n class=\"form-group-sm d-flex flex-wrap col-6 a-i-center\"\n >\n <label\n class=\"m-b-sm-0 text-nowrap m-r-8\"\n style=\"min-width: 30px\"\n [title]=\"'To`date`' | translate\"\n for=\"dateTo\"\n translate\n >\n To`date`\n </label>\n <c8y-date-time-picker\n [class.has-error]=\"toErrors\"\n id=\"dateTo\"\n [minDate]=\"tempDateFromValue\"\n [placeholder]=\"'To`date`' | translate\"\n [formControl]=\"dateTimeContext.get('dateTo')\"\n ></c8y-date-time-picker>\n <c8y-messages [show]=\"toErrors\">\n <c8y-message\n name=\"dateBeforeRangeMin\"\n [text]=\"errorMessages.dateBeforeRangeMin | translate\"\n ></c8y-message>\n <c8y-message\n name=\"invalidDateTime\"\n [text]=\"errorMessages.invalidDateTime | translate\"\n ></c8y-message>\n </c8y-messages>\n </c8y-form-group>\n </c8y-form-group>\n </fieldset>\n }\n </div>\n <div class=\"col-\">\n @if (SHOW_AGGREGATION) {\n @let selectedAggregation = currentForm.get('aggregation')?.value;\n\n <fieldset class=\"c8y-fieldset\">\n <legend>\n <div class=\"standalone btn-icon-dot__item aggregation m-r-4\">\n <i [c8yIcon]=\"'input'\"></i>\n </div>\n {{ 'Aggregation' | translate }}\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"AGGREGATION_POPOVER | translate\"\n placement=\"top\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n [adaptivePosition]=\"true\"\n ></button>\n </legend>\n <c8y-form-group class=\"p-t-16 p-b-16 m-b-4\">\n <c8y-aggregation-picker\n formControlName=\"aggregation\"\n [resetToDefault]=\"true\"\n [disabledAggregations]=\"disabledAggregations()\"\n [layout]=\"'radio'\"\n ></c8y-aggregation-picker>\n </c8y-form-group>\n </fieldset>\n }\n </div>\n </div>\n </form>\n}\n", dependencies: [{ kind: "ngmodule", type: I18nModule }, { kind: "directive", type: i4.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i2$2.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: AggregationPickerComponent, selector: "c8y-aggregation-picker", inputs: ["disabledAggregations", "resetToDefault", "layout"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "ngmodule", type: DateTimePickerModule }, { kind: "component", type: i4.DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3105
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: HistoryModeConfigurationControlsComponent, isStandalone: true, selector: "c8y-history-mode-configuration-controls", inputs: { settings: "settings", context: "context" }, outputs: { contextChange: "contextChange", validationStatus: "validationStatus" }, ngImport: i0, template: "@if (currentForm) {\n @let SHOW_TIME_CONTEXT = settings.showTimeContext;\n @let SHOW_AGGREGATION = settings.showAggregation;\n\n <form [formGroup]=\"currentForm\">\n <div class=\"content-flex-100\">\n <div\n class=\"col-4\"\n [ngClass]=\"{ 'm-b-8': !SHOW_AGGREGATION }\"\n >\n @if (SHOW_TIME_CONTEXT) {\n @let dateTimeContext = currentForm.get('dateTimeContext');\n @let tempDateFromValue = dateTimeContext.get('dateFrom')?.value;\n @let tempDateToValue = dateTimeContext.get('dateTo')?.value;\n @let fromErrors = dateFromErrors();\n @let toErrors = dateToErrors();\n\n <fieldset class=\"c8y-fieldset\">\n <legend>\n <div class=\"standalone btn-icon-dot__item time-context m-r-4\">\n <i\n class=\"\"\n [c8yIcon]=\"'calendar'\"\n ></i>\n </div>\n {{ 'Date & time range' | translate }}\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"TIME_RANGE_PICKER_POPOVER | translate\"\n placement=\"top\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n [adaptivePosition]=\"true\"\n ></button>\n </legend>\n <c8y-form-group class=\"content-flex-58 d-flex a-i-center m-b-0 p-t-16\">\n <c8y-form-group\n [class.has-error]=\"fromErrors\"\n class=\"form-group-sm d-flex a-i-center col-5 flex-wrap\"\n >\n <label\n class=\"m-b-sm-0 m-r-8 text-nowrap\"\n style=\"min-width: 30px\"\n [title]=\"'From`date`' | translate\"\n for=\"dateFrom\"\n translate\n >\n From`date`\n </label>\n <c8y-date-time-picker\n [class.has-error]=\"fromErrors\"\n id=\"dateFrom\"\n [maxDate]=\"tempDateToValue\"\n [placeholder]=\"'From`date`' | translate\"\n [formControl]=\"dateTimeContext.get('dateFrom')\"\n ></c8y-date-time-picker>\n <c8y-messages [show]=\"fromErrors\">\n <c8y-message\n name=\"dateAfterRangeMax\"\n [text]=\"errorMessages.dateAfterRangeMax | translate\"\n ></c8y-message>\n <c8y-message\n name=\"invalidDateTime\"\n [text]=\"errorMessages.invalidDateTime | translate\"\n ></c8y-message>\n <c8y-message\n name=\"invalidDateRange\"\n [text]=\"errorMessages.invalidDateRange | translate\"\n ></c8y-message>\n </c8y-messages>\n </c8y-form-group>\n\n <c8y-form-group\n [class.has-error]=\"toErrors\"\n class=\"form-group-sm d-flex flex-wrap col-7 a-i-center\"\n >\n <label\n class=\"m-b-sm-0 text-nowrap m-r-8\"\n style=\"min-width: 30px\"\n [title]=\"'To`date`' | translate\"\n for=\"dateTo\"\n translate\n >\n To`date`\n </label>\n <c8y-date-time-picker\n [class.has-error]=\"toErrors\"\n id=\"dateTo\"\n [minDate]=\"tempDateFromValue\"\n [placeholder]=\"'To`date`' | translate\"\n [formControl]=\"dateTimeContext.get('dateTo')\"\n ></c8y-date-time-picker>\n <button\n class=\"btn btn-xs btn-default m-l-4\"\n [title]=\"'Set to current time' | translate\"\n type=\"button\"\n (click)=\"setDateToNow()\"\n >\n <i\n class=\"m-r-4\"\n [c8yIcon]=\"'clock-o'\"\n ></i>\n {{ 'Now' | translate }}\n </button>\n <c8y-messages [show]=\"toErrors\">\n <c8y-message\n name=\"dateBeforeRangeMin\"\n [text]=\"errorMessages.dateBeforeRangeMin | translate\"\n ></c8y-message>\n <c8y-message\n name=\"invalidDateTime\"\n [text]=\"errorMessages.invalidDateTime | translate\"\n ></c8y-message>\n </c8y-messages>\n </c8y-form-group>\n </c8y-form-group>\n </fieldset>\n }\n </div>\n <div class=\"col-\">\n @if (SHOW_AGGREGATION) {\n @let selectedAggregation = currentForm.get('aggregation')?.value;\n\n <fieldset class=\"c8y-fieldset\">\n <legend>\n <div class=\"standalone btn-icon-dot__item aggregation m-r-4\">\n <i [c8yIcon]=\"'input'\"></i>\n </div>\n {{ 'Aggregation' | translate }}\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"AGGREGATION_POPOVER | translate\"\n placement=\"top\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n [adaptivePosition]=\"true\"\n ></button>\n </legend>\n <c8y-form-group class=\"p-t-16 p-b-16 m-b-4\">\n <c8y-aggregation-picker\n formControlName=\"aggregation\"\n [resetToDefault]=\"true\"\n [disabledAggregations]=\"disabledAggregations()\"\n [layout]=\"'radio'\"\n ></c8y-aggregation-picker>\n </c8y-form-group>\n </fieldset>\n }\n </div>\n </div>\n </form>\n}\n", dependencies: [{ kind: "ngmodule", type: I18nModule }, { kind: "directive", type: i4.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i2$2.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: AggregationPickerComponent, selector: "c8y-aggregation-picker", inputs: ["disabledAggregations", "resetToDefault", "layout"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "ngmodule", type: DateTimePickerModule }, { kind: "component", type: i4.DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3101
3106
  }
3102
3107
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HistoryModeConfigurationControlsComponent, decorators: [{
3103
3108
  type: Component,
@@ -3115,7 +3120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
3115
3120
  MessageDirective,
3116
3121
  DateTimePickerModule,
3117
3122
  NgClass
3118
- ], template: "@if (currentForm) {\n @let SHOW_TIME_CONTEXT = settings.showTimeContext;\n @let SHOW_AGGREGATION = settings.showAggregation;\n\n <form [formGroup]=\"currentForm\">\n <div class=\"content-flex-100\">\n <div\n class=\"col-4\"\n [ngClass]=\"{ 'm-b-8': !SHOW_AGGREGATION }\"\n >\n @if (SHOW_TIME_CONTEXT) {\n @let dateTimeContext = currentForm.get('dateTimeContext');\n @let tempDateFromValue = dateTimeContext.get('dateFrom')?.value;\n @let tempDateToValue = dateTimeContext.get('dateTo')?.value;\n @let fromErrors = dateFromErrors();\n @let toErrors = dateToErrors();\n\n <fieldset class=\"c8y-fieldset\">\n <legend>\n <div class=\"standalone btn-icon-dot__item time-context m-r-4\">\n <i\n class=\"\"\n [c8yIcon]=\"'calendar'\"\n ></i>\n </div>\n {{ 'Date & time range' | translate }}\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"TIME_RANGE_PICKER_POPOVER | translate\"\n placement=\"top\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n [adaptivePosition]=\"true\"\n ></button>\n </legend>\n <c8y-form-group class=\"content-flex-58 d-flex a-i-center m-b-0 p-t-16\">\n <c8y-form-group\n [class.has-error]=\"fromErrors\"\n class=\"form-group-sm d-flex a-i-center col-6 flex-wrap\"\n >\n <label\n class=\"m-b-sm-0 m-r-8 text-nowrap\"\n style=\"min-width: 30px\"\n [title]=\"'From`date`' | translate\"\n for=\"dateFrom\"\n translate\n >\n From`date`\n </label>\n <c8y-date-time-picker\n [class.has-error]=\"fromErrors\"\n id=\"dateFrom\"\n [maxDate]=\"tempDateToValue\"\n [placeholder]=\"'From`date`' | translate\"\n [formControl]=\"dateTimeContext.get('dateFrom')\"\n ></c8y-date-time-picker>\n <c8y-messages [show]=\"fromErrors\">\n <c8y-message\n name=\"dateAfterRangeMax\"\n [text]=\"errorMessages.dateAfterRangeMax | translate\"\n ></c8y-message>\n <c8y-message\n name=\"invalidDateTime\"\n [text]=\"errorMessages.invalidDateTime | translate\"\n ></c8y-message>\n <c8y-message\n name=\"invalidDateRange\"\n [text]=\"errorMessages.invalidDateRange | translate\"\n ></c8y-message>\n </c8y-messages>\n </c8y-form-group>\n\n <c8y-form-group\n [class.has-error]=\"toErrors\"\n class=\"form-group-sm d-flex flex-wrap col-6 a-i-center\"\n >\n <label\n class=\"m-b-sm-0 text-nowrap m-r-8\"\n style=\"min-width: 30px\"\n [title]=\"'To`date`' | translate\"\n for=\"dateTo\"\n translate\n >\n To`date`\n </label>\n <c8y-date-time-picker\n [class.has-error]=\"toErrors\"\n id=\"dateTo\"\n [minDate]=\"tempDateFromValue\"\n [placeholder]=\"'To`date`' | translate\"\n [formControl]=\"dateTimeContext.get('dateTo')\"\n ></c8y-date-time-picker>\n <c8y-messages [show]=\"toErrors\">\n <c8y-message\n name=\"dateBeforeRangeMin\"\n [text]=\"errorMessages.dateBeforeRangeMin | translate\"\n ></c8y-message>\n <c8y-message\n name=\"invalidDateTime\"\n [text]=\"errorMessages.invalidDateTime | translate\"\n ></c8y-message>\n </c8y-messages>\n </c8y-form-group>\n </c8y-form-group>\n </fieldset>\n }\n </div>\n <div class=\"col-\">\n @if (SHOW_AGGREGATION) {\n @let selectedAggregation = currentForm.get('aggregation')?.value;\n\n <fieldset class=\"c8y-fieldset\">\n <legend>\n <div class=\"standalone btn-icon-dot__item aggregation m-r-4\">\n <i [c8yIcon]=\"'input'\"></i>\n </div>\n {{ 'Aggregation' | translate }}\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"AGGREGATION_POPOVER | translate\"\n placement=\"top\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n [adaptivePosition]=\"true\"\n ></button>\n </legend>\n <c8y-form-group class=\"p-t-16 p-b-16 m-b-4\">\n <c8y-aggregation-picker\n formControlName=\"aggregation\"\n [resetToDefault]=\"true\"\n [disabledAggregations]=\"disabledAggregations()\"\n [layout]=\"'radio'\"\n ></c8y-aggregation-picker>\n </c8y-form-group>\n </fieldset>\n }\n </div>\n </div>\n </form>\n}\n" }]
3123
+ ], template: "@if (currentForm) {\n @let SHOW_TIME_CONTEXT = settings.showTimeContext;\n @let SHOW_AGGREGATION = settings.showAggregation;\n\n <form [formGroup]=\"currentForm\">\n <div class=\"content-flex-100\">\n <div\n class=\"col-4\"\n [ngClass]=\"{ 'm-b-8': !SHOW_AGGREGATION }\"\n >\n @if (SHOW_TIME_CONTEXT) {\n @let dateTimeContext = currentForm.get('dateTimeContext');\n @let tempDateFromValue = dateTimeContext.get('dateFrom')?.value;\n @let tempDateToValue = dateTimeContext.get('dateTo')?.value;\n @let fromErrors = dateFromErrors();\n @let toErrors = dateToErrors();\n\n <fieldset class=\"c8y-fieldset\">\n <legend>\n <div class=\"standalone btn-icon-dot__item time-context m-r-4\">\n <i\n class=\"\"\n [c8yIcon]=\"'calendar'\"\n ></i>\n </div>\n {{ 'Date & time range' | translate }}\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"TIME_RANGE_PICKER_POPOVER | translate\"\n placement=\"top\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n [adaptivePosition]=\"true\"\n ></button>\n </legend>\n <c8y-form-group class=\"content-flex-58 d-flex a-i-center m-b-0 p-t-16\">\n <c8y-form-group\n [class.has-error]=\"fromErrors\"\n class=\"form-group-sm d-flex a-i-center col-5 flex-wrap\"\n >\n <label\n class=\"m-b-sm-0 m-r-8 text-nowrap\"\n style=\"min-width: 30px\"\n [title]=\"'From`date`' | translate\"\n for=\"dateFrom\"\n translate\n >\n From`date`\n </label>\n <c8y-date-time-picker\n [class.has-error]=\"fromErrors\"\n id=\"dateFrom\"\n [maxDate]=\"tempDateToValue\"\n [placeholder]=\"'From`date`' | translate\"\n [formControl]=\"dateTimeContext.get('dateFrom')\"\n ></c8y-date-time-picker>\n <c8y-messages [show]=\"fromErrors\">\n <c8y-message\n name=\"dateAfterRangeMax\"\n [text]=\"errorMessages.dateAfterRangeMax | translate\"\n ></c8y-message>\n <c8y-message\n name=\"invalidDateTime\"\n [text]=\"errorMessages.invalidDateTime | translate\"\n ></c8y-message>\n <c8y-message\n name=\"invalidDateRange\"\n [text]=\"errorMessages.invalidDateRange | translate\"\n ></c8y-message>\n </c8y-messages>\n </c8y-form-group>\n\n <c8y-form-group\n [class.has-error]=\"toErrors\"\n class=\"form-group-sm d-flex flex-wrap col-7 a-i-center\"\n >\n <label\n class=\"m-b-sm-0 text-nowrap m-r-8\"\n style=\"min-width: 30px\"\n [title]=\"'To`date`' | translate\"\n for=\"dateTo\"\n translate\n >\n To`date`\n </label>\n <c8y-date-time-picker\n [class.has-error]=\"toErrors\"\n id=\"dateTo\"\n [minDate]=\"tempDateFromValue\"\n [placeholder]=\"'To`date`' | translate\"\n [formControl]=\"dateTimeContext.get('dateTo')\"\n ></c8y-date-time-picker>\n <button\n class=\"btn btn-xs btn-default m-l-4\"\n [title]=\"'Set to current time' | translate\"\n type=\"button\"\n (click)=\"setDateToNow()\"\n >\n <i\n class=\"m-r-4\"\n [c8yIcon]=\"'clock-o'\"\n ></i>\n {{ 'Now' | translate }}\n </button>\n <c8y-messages [show]=\"toErrors\">\n <c8y-message\n name=\"dateBeforeRangeMin\"\n [text]=\"errorMessages.dateBeforeRangeMin | translate\"\n ></c8y-message>\n <c8y-message\n name=\"invalidDateTime\"\n [text]=\"errorMessages.invalidDateTime | translate\"\n ></c8y-message>\n </c8y-messages>\n </c8y-form-group>\n </c8y-form-group>\n </fieldset>\n }\n </div>\n <div class=\"col-\">\n @if (SHOW_AGGREGATION) {\n @let selectedAggregation = currentForm.get('aggregation')?.value;\n\n <fieldset class=\"c8y-fieldset\">\n <legend>\n <div class=\"standalone btn-icon-dot__item aggregation m-r-4\">\n <i [c8yIcon]=\"'input'\"></i>\n </div>\n {{ 'Aggregation' | translate }}\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"AGGREGATION_POPOVER | translate\"\n placement=\"top\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n [adaptivePosition]=\"true\"\n ></button>\n </legend>\n <c8y-form-group class=\"p-t-16 p-b-16 m-b-4\">\n <c8y-aggregation-picker\n formControlName=\"aggregation\"\n [resetToDefault]=\"true\"\n [disabledAggregations]=\"disabledAggregations()\"\n [layout]=\"'radio'\"\n ></c8y-aggregation-picker>\n </c8y-form-group>\n </fieldset>\n }\n </div>\n </div>\n </form>\n}\n" }]
3119
3124
  }], ctorParameters: () => [], propDecorators: { settings: [{
3120
3125
  type: Input
3121
3126
  }], context: [{