@c8y/ngx-components 1024.10.8 → 1024.14.0

package/fesm2022/c8y-ngx-components-time-context.mjs

@@ -90,10 +90,10 @@ class DatapointExplorerService {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointExplorerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointExplorerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DatapointExplorerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DatapointExplorerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatapointExplorerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DatapointExplorerService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -430,10 +430,10 @@ class TimeContextComponent {
             autoAggregationKeepDataOnZoomIn: autoAggregation?.keepDataOnZoomIn ?? this.form.value.autoAggregationKeepDataOnZoomIn
         }, { emitEvent: false });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TimeContextComponent, deps: [{ token: i1.WidgetTimeContextDateRangeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TimeContextComponent, isStandalone: true, selector: "c8y-time-context", inputs: { changedDateContext: { classPropertyName: "changedDateContext", publicName: "changedDateContext", isSignal: false, isRequired: false, transformFunction: null }, controlsAvailable: { classPropertyName: "controlsAvailable", publicName: "controlsAvailable", isSignal: false, isRequired: false, transformFunction: null }, timeContext: { classPropertyName: "timeContext", publicName: "timeContext", isSignal: false, isRequired: false, transformFunction: null }, timePickerConfig: { classPropertyName: "timePickerConfig", publicName: "timePickerConfig", isSignal: false, isRequired: false, transformFunction: null }, enableAutoAggregation: { classPropertyName: "enableAutoAggregation", publicName: "enableAutoAggregation", isSignal: false, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { context: "contextChange" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: BsDropdownDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (controlsAvailable) {\n  <ng-container\n    [ngTemplateOutlet]=\"dateTimePicker\"\n    [ngTemplateOutletContext]=\"{\n      date: [form.value.currentDateContextFromDate, form.value.currentDateContextToDate]\n    }\"\n  ></ng-container>\n} @else {\n  <c8y-action-bar-item\n    [groupId]=\"'timeContext'\"\n    [inGroupPriority]=\"1\"\n    [placement]=\"'left'\"\n    itemClass=\"navbar-form\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"dateTimePicker\"\n      [ngTemplateOutletContext]=\"{\n        date: [form.value.currentDateContextFromDate, form.value.currentDateContextToDate]\n      }\"\n    ></ng-container>\n  </c8y-action-bar-item>\n}\n\n<ng-template\n  #dateTimePicker\n  let-date=\"date\"\n>\n  <form\n    class=\"d-flex gap-8 p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\n    [formGroup]=\"form\"\n  >\n    <ng-container>\n      @if (date) {\n        <div\n          class=\"dropdown flex-grow\"\n          #dropdown=\"bs-dropdown\"\n          dropdown\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n            attr.aria-label=\"{{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{\n              date[1] | c8yDate: DATE_FORMAT\n            }}\"\n            tooltip=\"{{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date[1] | c8yDate: DATE_FORMAT }}\"\n            placement=\"top\"\n            container=\"body\"\n            data-cy=\"widget-time-context--date-picker-dropdown-button\"\n            [adaptivePosition]=\"false\"\n            [delay]=\"500\"\n            dropdownToggle\n          >\n            <i\n              class=\"m-r-8\"\n              c8yIcon=\"schedule1\"\n            ></i>\n            <div class=\"d-col text-left fit-w\">\n              <span\n                class=\"text-muted fit-w text-10 l-h-1\"\n                data-cy=\"widget-time-context--selected-interval\"\n              >\n                {{ INTERVAL_TITLES[form.controls.currentDateContextInterval.value] | translate }}\n              </span>\n              <span\n                class=\"text-bold text-12 fit-w l-h-1 text-truncate\"\n                data-cy=\"widget-time-context--selected-time-range\"\n              >\n                {{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date[1] | c8yDate: DATE_FORMAT }}\n              </span>\n            </div>\n            <span class=\"caret m-r-16 m-l-4\"></span>\n          </button>\n\n          <ul\n            class=\"dropdown-menu dropdown-menu-wide dropdown-menu--date-range\"\n            *dropdownMenu\n          >\n            <c8y-interval-picker\n              class=\"d-contents\"\n              formControlName=\"currentDateContextInterval\"\n            ></c8y-interval-picker>\n\n            @if (form.controls.currentDateContextInterval.value === 'custom') {\n              <div class=\"p-l-16 p-r-16\">\n                <c8y-form-group\n                  [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n                >\n                  <label\n                    [title]=\"'From`date`' | translate\"\n                    for=\"temporaryUserSelectedFromDate\"\n                    translate\n                  >\n                    From`date`\n                  </label>\n                  <c8y-date-time-picker\n                    id=\"temporaryUserSelectedFromDate\"\n                    [maxDate]=\"form.value.temporaryUserSelectedToDate\"\n                    [config]=\"timePickerConfig\"\n                    [placeholder]=\"'From`date`' | translate\"\n                    [formControl]=\"form.controls.temporaryUserSelectedFromDate\"\n                    [ngClass]=\"\n                      form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\n                    \"\n                  ></c8y-date-time-picker>\n                  <c8y-messages [show]=\"form.controls.temporaryUserSelectedFromDate.errors\">\n                    <c8y-message\n                      name=\"dateAfterRangeMax\"\n                      [text]=\"'This date is after the latest allowed date.' | translate\"\n                    ></c8y-message>\n                    <c8y-message\n                      name=\"invalidDateTime\"\n                      [text]=\"'This date is invalid.' | translate\"\n                    ></c8y-message>\n                  </c8y-messages>\n                </c8y-form-group>\n\n                <c8y-form-group\n                  [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n                >\n                  <label\n                    [title]=\"'To`date`' | translate\"\n                    for=\"temporaryUserSelectedToDate\"\n                    translate\n                  >\n                    To`date`\n                  </label>\n                  <c8y-date-time-picker\n                    id=\"temporaryUserSelectedToDate\"\n                    [minDate]=\"form.value.temporaryUserSelectedFromDate\"\n                    [config]=\"timePickerConfig\"\n                    [placeholder]=\"'To`date`' | translate\"\n                    [formControl]=\"form.controls.temporaryUserSelectedToDate\"\n                    [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n                  ></c8y-date-time-picker>\n                  <c8y-messages [show]=\"form.controls.temporaryUserSelectedToDate.errors\">\n                    <c8y-message\n                      name=\"dateBeforeRangeMin\"\n                      [text]=\"'This date is before the earliest allowed date.' | translate\"\n                    ></c8y-message>\n                    <c8y-message\n                      name=\"invalidDateTime\"\n                      [text]=\"'This date is invalid.' | translate\"\n                    ></c8y-message>\n                  </c8y-messages>\n                </c8y-form-group>\n              </div>\n\n              <div class=\"p-16 d-flex gap-8 separator-top\">\n                <button\n                  class=\"btn btn-default btn-sm flex-grow\"\n                  title=\"{{ 'Reset' | translate }}\"\n                  type=\"button\"\n                  (click)=\"dropdown.isOpen = false\"\n                  [disabled]=\"form.value.realtime\"\n                  translate\n                >\n                  Reset\n                </button>\n\n                <button\n                  class=\"btn btn-primary btn-sm flex-grow\"\n                  title=\"{{ 'Apply' | translate }}\"\n                  type=\"button\"\n                  (click)=\"applyDatetimeContext(); dropdown.isOpen = false\"\n                  [disabled]=\"\n                    (form.pristine && form.untouched) || form.invalid || form.value.realtime\n                  \"\n                  translate\n                >\n                  Apply\n                </button>\n              </div>\n            }\n          </ul>\n        </div>\n      }\n    </ng-container>\n\n    <div class=\"input-group w-auto\">\n      <c8y-realtime-control\n        class=\"form-control p-0 flex-no-grow w-auto\"\n        formControlName=\"realtime\"\n      ></c8y-realtime-control>\n\n      @if (enableAutoAggregation && isTimeSeriesMigrated()) {\n        <c8y-aggregation-picker\n          formControlName=\"aggregation\"\n          [showAutoMode]=\"true\"\n          [autoModeActive]=\"isAutoModeActive()\"\n          [autoPoints]=\"form.value.autoAggregationDatapoints\"\n          [autoKeepPointCount]=\"form.value.autoAggregationKeepDataOnZoomIn\"\n          [disabledAggregations]=\"disabledAggregations\"\n          (autoModeChange)=\"onAutoModeChange($event)\"\n        >\n          <div\n            class=\"d-col\"\n            autoAggregationOptions\n          >\n            <div class=\"d-flex a-i-center gap-8\">\n              <label class=\"m-b-0 m-r-8\">\n                {{ 'Points per chart' | translate }}\n              </label>\n              <input\n                class=\"form-control input-sm\"\n                style=\"width: 80px\"\n                [attr.title]=\"\n                  'Enter a value between {{ min }} and {{ max }}.'\n                    | translate\n                      : {\n                          min: AUTO_AGGREGATION_DATAPOINTS.MIN,\n                          max: AUTO_AGGREGATION_DATAPOINTS.MAX\n                        }\n                \"\n                [attr.aria-label]=\"'Points per chart' | translate\"\n                type=\"number\"\n                [min]=\"AUTO_AGGREGATION_DATAPOINTS.MIN\"\n                [max]=\"AUTO_AGGREGATION_DATAPOINTS.MAX\"\n                [step]=\"AUTO_AGGREGATION_DATAPOINTS.STEP\"\n                [formControl]=\"form.controls.autoAggregationDatapoints\"\n              />\n            </div>\n            <label\n              class=\"c8y-switch m-b-0 m-t-8 text-nowrap\"\n              [title]=\"'Keep point count on zoom' | translate\"\n            >\n              <input\n                type=\"checkbox\"\n                [formControl]=\"form.controls.autoAggregationKeepDataOnZoomIn\"\n                data-cy=\"time-context--auto-aggregation-keep-data-on-zoom-in\"\n              />\n              <span></span>\n              <span class=\"text-12\">{{ 'Keep point count on zoom' | translate }}</span>\n              <button\n                class=\"btn-help btn-help--sm m-l-4\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"KEEP_DATA_ON_ZOOM_IN_POPOVER | translate\"\n                placement=\"top\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </label>\n          </div>\n        </c8y-aggregation-picker>\n      } @else if (\n        enableAutoAggregation || (controlsAvailable ? controlsAvailable.aggregation : true)\n      ) {\n        <c8y-aggregation-picker\n          formControlName=\"aggregation\"\n          [disabledAggregations]=\"disabledAggregations\"\n        ></c8y-aggregation-picker>\n      }\n\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      ></button>\n    </div>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "component", type: i1.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.MinValidationDirective, selector: "[min]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidationDirective, selector: "[max]", inputs: ["max"] }, { 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],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "component", type: i1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i1.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i1.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "component", type: i1.AggregationPickerComponent, selector: "c8y-aggregation-picker", inputs: ["disabledAggregations", "autoPoints", "autoKeepPointCount", "showAutoMode", "autoModeActive"], outputs: ["autoModeChange"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "component", type: i1.DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }, { kind: "ngmodule", type: BsDatepickerModule }, { kind: "ngmodule", type: DateTimePickerModule }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i4.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i4.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i4.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i6.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: IntervalPickerComponent, selector: "c8y-interval-picker", inputs: ["INTERVALS"] }, { kind: "component", type: RealtimeControlComponent, selector: "c8y-realtime-control" }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i1.DatePipe, name: "c8yDate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TimeContextComponent, deps: [{ token: i1.WidgetTimeContextDateRangeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: TimeContextComponent, isStandalone: true, selector: "c8y-time-context", inputs: { changedDateContext: { classPropertyName: "changedDateContext", publicName: "changedDateContext", isSignal: false, isRequired: false, transformFunction: null }, controlsAvailable: { classPropertyName: "controlsAvailable", publicName: "controlsAvailable", isSignal: false, isRequired: false, transformFunction: null }, timeContext: { classPropertyName: "timeContext", publicName: "timeContext", isSignal: false, isRequired: false, transformFunction: null }, timePickerConfig: { classPropertyName: "timePickerConfig", publicName: "timePickerConfig", isSignal: false, isRequired: false, transformFunction: null }, enableAutoAggregation: { classPropertyName: "enableAutoAggregation", publicName: "enableAutoAggregation", isSignal: false, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { context: "contextChange" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: BsDropdownDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (controlsAvailable) {\n  <ng-container\n    [ngTemplateOutlet]=\"dateTimePicker\"\n    [ngTemplateOutletContext]=\"{\n      date: [form.value.currentDateContextFromDate, form.value.currentDateContextToDate]\n    }\"\n  ></ng-container>\n} @else {\n  <c8y-action-bar-item\n    [groupId]=\"'timeContext'\"\n    [inGroupPriority]=\"1\"\n    [placement]=\"'left'\"\n    itemClass=\"navbar-form\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"dateTimePicker\"\n      [ngTemplateOutletContext]=\"{\n        date: [form.value.currentDateContextFromDate, form.value.currentDateContextToDate]\n      }\"\n    ></ng-container>\n  </c8y-action-bar-item>\n}\n\n<ng-template\n  #dateTimePicker\n  let-date=\"date\"\n>\n  <form\n    class=\"d-flex gap-8 p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\n    [formGroup]=\"form\"\n  >\n    <ng-container>\n      @if (date) {\n        <div\n          class=\"dropdown flex-grow\"\n          #dropdown=\"bs-dropdown\"\n          dropdown\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n            attr.aria-label=\"{{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{\n              date[1] | c8yDate: DATE_FORMAT\n            }}\"\n            tooltip=\"{{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date[1] | c8yDate: DATE_FORMAT }}\"\n            placement=\"top\"\n            container=\"body\"\n            data-cy=\"widget-time-context--date-picker-dropdown-button\"\n            [adaptivePosition]=\"false\"\n            [delay]=\"500\"\n            dropdownToggle\n          >\n            <i\n              class=\"m-r-8\"\n              c8yIcon=\"schedule1\"\n            ></i>\n            <div class=\"d-col text-left fit-w\">\n              <span\n                class=\"text-muted fit-w text-10 l-h-1\"\n                data-cy=\"widget-time-context--selected-interval\"\n              >\n                {{ INTERVAL_TITLES[form.controls.currentDateContextInterval.value] | translate }}\n              </span>\n              <span\n                class=\"text-bold text-12 fit-w l-h-1 text-truncate\"\n                data-cy=\"widget-time-context--selected-time-range\"\n              >\n                {{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date[1] | c8yDate: DATE_FORMAT }}\n              </span>\n            </div>\n            <span class=\"caret m-r-16 m-l-4\"></span>\n          </button>\n\n          <ul\n            class=\"dropdown-menu dropdown-menu-wide dropdown-menu--date-range\"\n            *dropdownMenu\n          >\n            <c8y-interval-picker\n              class=\"d-contents\"\n              formControlName=\"currentDateContextInterval\"\n            ></c8y-interval-picker>\n\n            @if (form.controls.currentDateContextInterval.value === 'custom') {\n              <div class=\"p-l-16 p-r-16\">\n                <c8y-form-group\n                  [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n                >\n                  <label\n                    [title]=\"'From`date`' | translate\"\n                    for=\"temporaryUserSelectedFromDate\"\n                    translate\n                  >\n                    From`date`\n                  </label>\n                  <c8y-date-time-picker\n                    id=\"temporaryUserSelectedFromDate\"\n                    [maxDate]=\"form.value.temporaryUserSelectedToDate\"\n                    [config]=\"timePickerConfig\"\n                    [placeholder]=\"'From`date`' | translate\"\n                    [formControl]=\"form.controls.temporaryUserSelectedFromDate\"\n                    [ngClass]=\"\n                      form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\n                    \"\n                  ></c8y-date-time-picker>\n                  <c8y-messages [show]=\"form.controls.temporaryUserSelectedFromDate.errors\">\n                    <c8y-message\n                      name=\"dateAfterRangeMax\"\n                      [text]=\"'This date is after the latest allowed date.' | translate\"\n                    ></c8y-message>\n                    <c8y-message\n                      name=\"invalidDateTime\"\n                      [text]=\"'This date is invalid.' | translate\"\n                    ></c8y-message>\n                  </c8y-messages>\n                </c8y-form-group>\n\n                <c8y-form-group\n                  [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n                >\n                  <label\n                    [title]=\"'To`date`' | translate\"\n                    for=\"temporaryUserSelectedToDate\"\n                    translate\n                  >\n                    To`date`\n                  </label>\n                  <c8y-date-time-picker\n                    id=\"temporaryUserSelectedToDate\"\n                    [minDate]=\"form.value.temporaryUserSelectedFromDate\"\n                    [config]=\"timePickerConfig\"\n                    [placeholder]=\"'To`date`' | translate\"\n                    [formControl]=\"form.controls.temporaryUserSelectedToDate\"\n                    [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n                  ></c8y-date-time-picker>\n                  <c8y-messages [show]=\"form.controls.temporaryUserSelectedToDate.errors\">\n                    <c8y-message\n                      name=\"dateBeforeRangeMin\"\n                      [text]=\"'This date is before the earliest allowed date.' | translate\"\n                    ></c8y-message>\n                    <c8y-message\n                      name=\"invalidDateTime\"\n                      [text]=\"'This date is invalid.' | translate\"\n                    ></c8y-message>\n                  </c8y-messages>\n                </c8y-form-group>\n              </div>\n\n              <div class=\"p-16 d-flex gap-8 separator-top\">\n                <button\n                  class=\"btn btn-default btn-sm flex-grow\"\n                  title=\"{{ 'Reset' | translate }}\"\n                  type=\"button\"\n                  (click)=\"dropdown.isOpen = false\"\n                  [disabled]=\"form.value.realtime\"\n                  translate\n                >\n                  Reset\n                </button>\n\n                <button\n                  class=\"btn btn-primary btn-sm flex-grow\"\n                  title=\"{{ 'Apply' | translate }}\"\n                  type=\"button\"\n                  (click)=\"applyDatetimeContext(); dropdown.isOpen = false\"\n                  [disabled]=\"\n                    (form.pristine && form.untouched) || form.invalid || form.value.realtime\n                  \"\n                  translate\n                >\n                  Apply\n                </button>\n              </div>\n            }\n          </ul>\n        </div>\n      }\n    </ng-container>\n\n    <div class=\"input-group w-auto\">\n      <c8y-realtime-control\n        class=\"form-control p-0 flex-no-grow w-auto\"\n        formControlName=\"realtime\"\n      ></c8y-realtime-control>\n\n      @if (enableAutoAggregation && isTimeSeriesMigrated()) {\n        <c8y-aggregation-picker\n          formControlName=\"aggregation\"\n          [showAutoMode]=\"true\"\n          [autoModeActive]=\"isAutoModeActive()\"\n          [autoPoints]=\"form.value.autoAggregationDatapoints\"\n          [autoKeepPointCount]=\"form.value.autoAggregationKeepDataOnZoomIn\"\n          [disabledAggregations]=\"disabledAggregations\"\n          (autoModeChange)=\"onAutoModeChange($event)\"\n        >\n          <div\n            class=\"d-col\"\n            autoAggregationOptions\n          >\n            <div class=\"d-flex a-i-center gap-8\">\n              <label class=\"m-b-0 m-r-8\">\n                {{ 'Points per chart' | translate }}\n              </label>\n              <input\n                class=\"form-control input-sm\"\n                style=\"width: 80px\"\n                [attr.title]=\"\n                  'Enter a value between {{ min }} and {{ max }}.'\n                    | translate\n                      : {\n                          min: AUTO_AGGREGATION_DATAPOINTS.MIN,\n                          max: AUTO_AGGREGATION_DATAPOINTS.MAX\n                        }\n                \"\n                [attr.aria-label]=\"'Points per chart' | translate\"\n                type=\"number\"\n                [min]=\"AUTO_AGGREGATION_DATAPOINTS.MIN\"\n                [max]=\"AUTO_AGGREGATION_DATAPOINTS.MAX\"\n                [step]=\"AUTO_AGGREGATION_DATAPOINTS.STEP\"\n                [formControl]=\"form.controls.autoAggregationDatapoints\"\n              />\n            </div>\n            <label\n              class=\"c8y-switch m-b-0 m-t-8 text-nowrap\"\n              [title]=\"'Keep point count on zoom' | translate\"\n            >\n              <input\n                type=\"checkbox\"\n                [formControl]=\"form.controls.autoAggregationKeepDataOnZoomIn\"\n                data-cy=\"time-context--auto-aggregation-keep-data-on-zoom-in\"\n              />\n              <span></span>\n              <span class=\"text-12\">{{ 'Keep point count on zoom' | translate }}</span>\n              <button\n                class=\"btn-help btn-help--sm m-l-4\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"KEEP_DATA_ON_ZOOM_IN_POPOVER | translate\"\n                placement=\"top\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </label>\n          </div>\n        </c8y-aggregation-picker>\n      } @else if (\n        enableAutoAggregation || (controlsAvailable ? controlsAvailable.aggregation : true)\n      ) {\n        <c8y-aggregation-picker\n          formControlName=\"aggregation\"\n          [disabledAggregations]=\"disabledAggregations\"\n        ></c8y-aggregation-picker>\n      }\n\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      ></button>\n    </div>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "component", type: i1.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.MinValidationDirective, selector: "[min]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidationDirective, selector: "[max]", inputs: ["max"] }, { 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],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "component", type: i1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i1.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i1.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "component", type: i1.AggregationPickerComponent, selector: "c8y-aggregation-picker", inputs: ["disabledAggregations", "autoPoints", "autoKeepPointCount", "showAutoMode", "autoModeActive"], outputs: ["autoModeChange"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "component", type: i1.DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }, { kind: "ngmodule", type: BsDatepickerModule }, { kind: "ngmodule", type: DateTimePickerModule }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i4.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i4.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i4.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i6.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: IntervalPickerComponent, selector: "c8y-interval-picker", inputs: ["INTERVALS"] }, { kind: "component", type: RealtimeControlComponent, selector: "c8y-realtime-control" }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i1.DatePipe, name: "c8yDate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TimeContextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TimeContextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-time-context', standalone: true, imports: [
                         CoreModule,

package/fesm2022/c8y-ngx-components-tracking.mjs

@@ -95,10 +95,10 @@ class TrackingService {
     compareEvents(a, b) {
         return Date.parse(a?.time) - Date.parse(b?.time);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TrackingService, deps: [{ token: i1.EventService }, { token: i2.GeoService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TrackingService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TrackingService, deps: [{ token: i1.EventService }, { token: i2.GeoService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TrackingService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TrackingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TrackingService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -123,10 +123,10 @@ class TrackingMarkerPopupComponent {
             this.date = this.context.time;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TrackingMarkerPopupComponent, deps: [{ token: TrackingService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TrackingMarkerPopupComponent, isStandalone: true, selector: "c8y-tracking-marker-popup", inputs: { context: "context", showTrackingLink: "showTrackingLink" }, ngImport: i0, template: "<div class=\"map-marker\">\n  @if (isDevice) {\n    <a\n      class=\"text-truncate text-14 text-medium p-0 m-b-8 deviceLink\"\n      [title]=\"context?.name\"\n      [routerLink]=\"['/device/', context?.id]\"\n    >\n      {{ context?.name }}\n    </a>\n  }\n  <div\n    class=\"m-b-8\"\n    ng-if=\"lastUpdated\"\n  >\n    <p class=\"m-0\">{{ 'Position:' | translate }}</p>\n    <div class=\"text-muted\">\n      <p class=\"m-b-0\">{{ context?.c8y_Position?.lat }},</p>\n      <p class=\"m-t-0\">{{ context?.c8y_Position?.lng }}</p>\n    </div>\n    @if (!!context?.c8y_Position?.alt || context?.c8y_Position?.alt === 0) {\n      <p class=\"m-0\">{{ 'Altitude:' | translate }}</p>\n      <div class=\"text-muted\">\n        <p\n          class=\"m-b-0\"\n          [translate]=\"'{{alt}} m`meters, altitude`'\"\n          [translateParams]=\"{ alt: context?.c8y_Position?.alt }\"\n        ></p>\n      </div>\n    }\n    @if (!!date) {\n      <p class=\"m-0 p-t-4\">{{ 'Date and time:' | translate }}</p>\n      <span class=\"text-muted\">{{ date | c8yDate }}</span>\n    }\n  </div>\n\n  @if (isDevice) {\n    @if (showTrackingLink) {\n      <span>\n        Go to\n        <a [routerLink]=\"['/device', context?.id, 'tracking']\">Tracking</a>\n      </span>\n    } @else {\n      <div class=\"d-flex a-i-center\">\n        <label\n          class=\"c8y-switch\"\n          for=\"switch\"\n        >\n          <input\n            id=\"switch\"\n            type=\"checkbox\"\n            [checked]=\"trackingService.trackVisible\"\n            (change)=\"trackingService.toggleTrack()\"\n          />\n          <span></span>\n        </label>\n        <div class=\"description p-b-0\">\n          {{ 'Show track' | translate }}\n        </div>\n      </div>\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.DatePipe, name: "c8yDate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TrackingMarkerPopupComponent, deps: [{ token: TrackingService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: TrackingMarkerPopupComponent, isStandalone: true, selector: "c8y-tracking-marker-popup", inputs: { context: "context", showTrackingLink: "showTrackingLink" }, ngImport: i0, template: "<div class=\"map-marker\">\n  @if (isDevice) {\n    <a\n      class=\"text-truncate text-14 text-medium p-0 m-b-8 deviceLink\"\n      [title]=\"context?.name\"\n      [routerLink]=\"['/device/', context?.id]\"\n    >\n      {{ context?.name }}\n    </a>\n  }\n  <div\n    class=\"m-b-8\"\n    ng-if=\"lastUpdated\"\n  >\n    <p class=\"m-0\">{{ 'Position:' | translate }}</p>\n    <div class=\"text-muted\">\n      <p class=\"m-b-0\">{{ context?.c8y_Position?.lat }},</p>\n      <p class=\"m-t-0\">{{ context?.c8y_Position?.lng }}</p>\n    </div>\n    @if (!!context?.c8y_Position?.alt || context?.c8y_Position?.alt === 0) {\n      <p class=\"m-0\">{{ 'Altitude:' | translate }}</p>\n      <div class=\"text-muted\">\n        <p\n          class=\"m-b-0\"\n          [translate]=\"'{{alt}} m`meters, altitude`'\"\n          [translateParams]=\"{ alt: context?.c8y_Position?.alt }\"\n        ></p>\n      </div>\n    }\n    @if (!!date) {\n      <p class=\"m-0 p-t-4\">{{ 'Date and time:' | translate }}</p>\n      <span class=\"text-muted\">{{ date | c8yDate }}</span>\n    }\n  </div>\n\n  @if (isDevice) {\n    @if (showTrackingLink) {\n      <span>\n        Go to\n        <a [routerLink]=\"['/device', context?.id, 'tracking']\">Tracking</a>\n      </span>\n    } @else {\n      <div class=\"d-flex a-i-center\">\n        <label\n          class=\"c8y-switch\"\n          for=\"switch\"\n        >\n          <input\n            id=\"switch\"\n            type=\"checkbox\"\n            [checked]=\"trackingService.trackVisible\"\n            (change)=\"trackingService.toggleTrack()\"\n          />\n          <span></span>\n        </label>\n        <div class=\"description p-b-0\">\n          {{ 'Show track' | translate }}\n        </div>\n      </div>\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.DatePipe, name: "c8yDate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TrackingMarkerPopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TrackingMarkerPopupComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'c8y-tracking-marker-popup', imports: [CoreModule, RouterModule, FormsModule], template: "<div class=\"map-marker\">\n  @if (isDevice) {\n    <a\n      class=\"text-truncate text-14 text-medium p-0 m-b-8 deviceLink\"\n      [title]=\"context?.name\"\n      [routerLink]=\"['/device/', context?.id]\"\n    >\n      {{ context?.name }}\n    </a>\n  }\n  <div\n    class=\"m-b-8\"\n    ng-if=\"lastUpdated\"\n  >\n    <p class=\"m-0\">{{ 'Position:' | translate }}</p>\n    <div class=\"text-muted\">\n      <p class=\"m-b-0\">{{ context?.c8y_Position?.lat }},</p>\n      <p class=\"m-t-0\">{{ context?.c8y_Position?.lng }}</p>\n    </div>\n    @if (!!context?.c8y_Position?.alt || context?.c8y_Position?.alt === 0) {\n      <p class=\"m-0\">{{ 'Altitude:' | translate }}</p>\n      <div class=\"text-muted\">\n        <p\n          class=\"m-b-0\"\n          [translate]=\"'{{alt}} m`meters, altitude`'\"\n          [translateParams]=\"{ alt: context?.c8y_Position?.alt }\"\n        ></p>\n      </div>\n    }\n    @if (!!date) {\n      <p class=\"m-0 p-t-4\">{{ 'Date and time:' | translate }}</p>\n      <span class=\"text-muted\">{{ date | c8yDate }}</span>\n    }\n  </div>\n\n  @if (isDevice) {\n    @if (showTrackingLink) {\n      <span>\n        Go to\n        <a [routerLink]=\"['/device', context?.id, 'tracking']\">Tracking</a>\n      </span>\n    } @else {\n      <div class=\"d-flex a-i-center\">\n        <label\n          class=\"c8y-switch\"\n          for=\"switch\"\n        >\n          <input\n            id=\"switch\"\n            type=\"checkbox\"\n            [checked]=\"trackingService.trackVisible\"\n            (change)=\"trackingService.toggleTrack()\"\n          />\n          <span></span>\n        </label>\n        <div class=\"description p-b-0\">\n          {{ 'Show track' | translate }}\n        </div>\n      </div>\n    }\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: TrackingService }], propDecorators: { context: [{
@@ -145,10 +145,10 @@ class TrackingTabFactory {
         return (contextData?.context === ViewContext.Device &&
             !isEmpty(this.geoService.getLatLong(contextData?.contextData)));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TrackingTabFactory, deps: [{ token: i2.ContextRouteService }, { token: i2.GeoService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TrackingTabFactory, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TrackingTabFactory, deps: [{ token: i2.ContextRouteService }, { token: i2.GeoService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TrackingTabFactory, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TrackingTabFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TrackingTabFactory, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -212,10 +212,10 @@ class TrackingComponent {
             this.realtime.stop();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TrackingComponent, deps: [{ token: TrackingService }, { token: i2.EventRealtimeService }, { token: i2.ContextRouteService }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TrackingComponent, isStandalone: true, selector: "c8y-tracking", providers: [EventRealtimeService], viewQueries: [{ propertyName: "map", first: true, predicate: MapComponent, descendants: true }], ngImport: i0, template: "<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"100\"\n>\n  <c8y-realtime-btn\n    [service]=\"realtime\"\n    [disabled]=\"realtimeDisabled\"\n    (onToggle)=\"togglePositionRealtime($event)\"\n  ></c8y-realtime-btn>\n</c8y-action-bar-item>\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"60\"\n>\n  <c8y-time-interval\n    [maxCustomDate]=\"maxDate\"\n    [dateRangePickerConfig]=\"dateRangePickerConfig\"\n    (interval)=\"service.setInterval($event); toggleRealtime($event)\"\n  ></c8y-time-interval>\n</c8y-action-bar-item>\n\n<div class=\"card card--grid content-fullpage d-grid grid__col--8-4--md\">\n  <div\n    class=\"bg-white p-relative\"\n    style=\"min-height: 30vh\"\n  >\n    <c8y-map\n      [config]=\"config\"\n      [assets]=\"device\"\n      [polyline$]=\"service.polyline$\"\n      [polylineOptions]=\"{ color: 'darkblue' }\"\n    >\n      <div *c8yMapPopup=\"let context\">\n        <c8y-tracking-marker-popup [context]=\"context\"></c8y-tracking-marker-popup>\n      </div>\n    </c8y-map>\n  </div>\n\n  <div class=\"d-flex d-col bg-inherit content-fullpage bg-gray-white\">\n    <div class=\"card-header large-padding separator sticky-top\">\n      <span\n        class=\"card-title\"\n        translate\n      >\n        Tracking events\n      </span>\n    </div>\n    <div class=\"inner-scroll\">\n      <c8y-list-group class=\"c8y-list__group--strip\">\n        <ng-template\n          c8yFor\n          let-event\n          [c8yForOf]=\"service.events$\"\n          [c8yForPipe]=\"service.pipe\"\n          [c8yForRealtime]=\"realtime\"\n          [c8yForRealtimeOptions]=\"{ entityOrId: device }\"\n          [c8yForLoadMore]=\"'hidden'\"\n          [c8yForNotFound]=\"empty\"\n          (c8yForLoadMoreComponent)=\"\n            loadMoreComponent = $event; loadMoreComponent.useIntersection = false\n          \"\n        >\n          <c8y-li\n            class=\"pointer\"\n            [ngClass]=\"{ 'text-primary text-bold': activeMarkers['p' + event?.id] }\"\n            (click)=\"toggleMarker(event)\"\n            [attr.data-cy]=\"'c8y-tracking--tracking-event-item-' + event?.id\"\n          >\n            <c8y-li-icon [ngClass]=\"{ 'text-primary': activeMarkers['p' + event?.id] }\">\n              <i c8yIcon=\"c8y-location\"></i>\n            </c8y-li-icon>\n            <c8y-li-body>\n              <div class=\"d-flex\">\n                <span>\n                  {{ event.time | date: 'mediumDate' }}\n                </span>\n                <span class=\"m-l-auto\">\n                  {{ event.time | date: 'mediumTime' }}\n                </span>\n              </div>\n            </c8y-li-body>\n          </c8y-li>\n        </ng-template>\n      </c8y-list-group>\n    </div>\n\n    <!-- empty state -->\n    <ng-template #empty>\n      @if (!service.hasEvents) {\n        <c8y-ui-empty-state\n          icon=\"c8y-location\"\n          [title]=\"'No tracking events found.' | translate\"\n          [subtitle]=\"'Select another time range.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      }\n    </ng-template>\n\n    @if (loadMoreComponent?.hasMore) {\n      <div>\n        <button\n          class=\"btn btn-link fit-w sticky-bottom separator-top\"\n          [title]=\"'Load more' | translate\"\n          type=\"button\"\n          [disabled]=\"loadMoreComponent?.isLoading\"\n          (click)=\"loadMoreComponent.loadMore()\"\n          data-cy=\"c8y-tracking--load-more\"\n        >\n          {{ 'Load more' | translate }}\n        </button>\n      </div>\n    }\n\n    <div class=\"card-footer separator\">\n      <button\n        class=\"btn btn-default\"\n        [title]=\"'Deselect all markers' | translate\"\n        type=\"button\"\n        [disabled]=\"(activeMarkers | json) === '{}'\"\n        (click)=\"map.clearMarkers('event'); activeMarkers = {}\"\n      >\n        {{ 'Deselect all markers' | translate }}\n      </button>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: MapModule }, { kind: "component", type: i4.MapComponent, selector: "c8y-map", inputs: ["config", "assets", "polyline$", "polylineOptions"], outputs: ["onRealtimeUpdate", "onMove", "onMoveEnd", "onZoomStart", "onZoomEnd", "onMap", "onInit"] }, { kind: "directive", type: i4.MapPopupDirective, selector: "[c8yMapPopup]" }, { kind: "ngmodule", type: ActionBarModule }, { kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i2.RealtimeButtonComponent, selector: "c8y-realtime-btn", inputs: ["service", "label", "title", "disabled"], outputs: ["onToggle"] }, { kind: "component", type: i2.TimeIntervalComponent, selector: "c8y-time-interval", inputs: ["minCustomDate", "maxCustomDate", "dateRangePickerConfig", "selectedInterval"], outputs: ["interval"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: TrackingMarkerPopupComponent, selector: "c8y-tracking-marker-popup", inputs: ["context", "showTrackingLink"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.JsonPipe, name: "json" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TrackingComponent, deps: [{ token: TrackingService }, { token: i2.EventRealtimeService }, { token: i2.ContextRouteService }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: TrackingComponent, isStandalone: true, selector: "c8y-tracking", providers: [EventRealtimeService], viewQueries: [{ propertyName: "map", first: true, predicate: MapComponent, descendants: true }], ngImport: i0, template: "<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"100\"\n>\n  <c8y-realtime-btn\n    [service]=\"realtime\"\n    [disabled]=\"realtimeDisabled\"\n    (onToggle)=\"togglePositionRealtime($event)\"\n  ></c8y-realtime-btn>\n</c8y-action-bar-item>\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"60\"\n>\n  <c8y-time-interval\n    [maxCustomDate]=\"maxDate\"\n    [dateRangePickerConfig]=\"dateRangePickerConfig\"\n    (interval)=\"service.setInterval($event); toggleRealtime($event)\"\n  ></c8y-time-interval>\n</c8y-action-bar-item>\n\n<div class=\"card card--grid content-fullpage d-grid grid__col--8-4--md\">\n  <div\n    class=\"bg-white p-relative\"\n    style=\"min-height: 30vh\"\n  >\n    <c8y-map\n      [config]=\"config\"\n      [assets]=\"device\"\n      [polyline$]=\"service.polyline$\"\n      [polylineOptions]=\"{ color: 'darkblue' }\"\n    >\n      <div *c8yMapPopup=\"let context\">\n        <c8y-tracking-marker-popup [context]=\"context\"></c8y-tracking-marker-popup>\n      </div>\n    </c8y-map>\n  </div>\n\n  <div class=\"d-flex d-col bg-inherit content-fullpage bg-gray-white\">\n    <div class=\"card-header large-padding separator sticky-top\">\n      <span\n        class=\"card-title\"\n        translate\n      >\n        Tracking events\n      </span>\n    </div>\n    <div class=\"inner-scroll\">\n      <c8y-list-group class=\"c8y-list__group--strip\">\n        <ng-template\n          c8yFor\n          let-event\n          [c8yForOf]=\"service.events$\"\n          [c8yForPipe]=\"service.pipe\"\n          [c8yForRealtime]=\"realtime\"\n          [c8yForRealtimeOptions]=\"{ entityOrId: device }\"\n          [c8yForLoadMore]=\"'hidden'\"\n          [c8yForNotFound]=\"empty\"\n          (c8yForLoadMoreComponent)=\"\n            loadMoreComponent = $event; loadMoreComponent.useIntersection = false\n          \"\n        >\n          <c8y-li\n            class=\"pointer\"\n            [ngClass]=\"{ 'text-primary text-bold': activeMarkers['p' + event?.id] }\"\n            (click)=\"toggleMarker(event)\"\n            [attr.data-cy]=\"'c8y-tracking--tracking-event-item-' + event?.id\"\n          >\n            <c8y-li-icon [ngClass]=\"{ 'text-primary': activeMarkers['p' + event?.id] }\">\n              <i c8yIcon=\"c8y-location\"></i>\n            </c8y-li-icon>\n            <c8y-li-body>\n              <div class=\"d-flex\">\n                <span>\n                  {{ event.time | date: 'mediumDate' }}\n                </span>\n                <span class=\"m-l-auto\">\n                  {{ event.time | date: 'mediumTime' }}\n                </span>\n              </div>\n            </c8y-li-body>\n          </c8y-li>\n        </ng-template>\n      </c8y-list-group>\n    </div>\n\n    <!-- empty state -->\n    <ng-template #empty>\n      @if (!service.hasEvents) {\n        <c8y-ui-empty-state\n          icon=\"c8y-location\"\n          [title]=\"'No tracking events found.' | translate\"\n          [subtitle]=\"'Select another time range.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      }\n    </ng-template>\n\n    @if (loadMoreComponent?.hasMore) {\n      <div>\n        <button\n          class=\"btn btn-link fit-w sticky-bottom separator-top\"\n          [title]=\"'Load more' | translate\"\n          type=\"button\"\n          [disabled]=\"loadMoreComponent?.isLoading\"\n          (click)=\"loadMoreComponent.loadMore()\"\n          data-cy=\"c8y-tracking--load-more\"\n        >\n          {{ 'Load more' | translate }}\n        </button>\n      </div>\n    }\n\n    <div class=\"card-footer separator\">\n      <button\n        class=\"btn btn-default\"\n        [title]=\"'Deselect all markers' | translate\"\n        type=\"button\"\n        [disabled]=\"(activeMarkers | json) === '{}'\"\n        (click)=\"map.clearMarkers('event'); activeMarkers = {}\"\n      >\n        {{ 'Deselect all markers' | translate }}\n      </button>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: MapModule }, { kind: "component", type: i4.MapComponent, selector: "c8y-map", inputs: ["config", "assets", "polyline$", "polylineOptions"], outputs: ["onRealtimeUpdate", "onMove", "onMoveEnd", "onZoomStart", "onZoomEnd", "onMap", "onInit"] }, { kind: "directive", type: i4.MapPopupDirective, selector: "[c8yMapPopup]" }, { kind: "ngmodule", type: ActionBarModule }, { kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i2.RealtimeButtonComponent, selector: "c8y-realtime-btn", inputs: ["service", "label", "title", "disabled"], outputs: ["onToggle"] }, { kind: "component", type: i2.TimeIntervalComponent, selector: "c8y-time-interval", inputs: ["minCustomDate", "maxCustomDate", "dateRangePickerConfig", "selectedInterval"], outputs: ["interval"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: TrackingMarkerPopupComponent, selector: "c8y-tracking-marker-popup", inputs: ["context", "showTrackingLink"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.JsonPipe, name: "json" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TrackingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TrackingComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         MapModule,

package/fesm2022/c8y-ngx-components-translation-editor-data.mjs

@@ -166,10 +166,10 @@ class TranslationStoreService {
         }
         return response.json();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TranslationStoreService, deps: [{ token: i1.ApplicationService }, { token: i2.AppStateService }, { token: i2.ZipService }, { token: i1.FetchClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TranslationStoreService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TranslationStoreService, deps: [{ token: i1.ApplicationService }, { token: i2.AppStateService }, { token: i2.ZipService }, { token: i1.FetchClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TranslationStoreService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TranslationStoreService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TranslationStoreService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'

package/fesm2022/c8y-ngx-components-translation-editor-lazy.mjs

@@ -42,10 +42,10 @@ class ManageTranslationCellRendererComponent {
             this.cellInput.nativeElement.focus();
         }, this.FOCUS_RENDER_WAIT_TIME_IN_MS);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ManageTranslationCellRendererComponent, deps: [{ token: i1.CellRendererContext }, { token: i1.Permissions }, { token: TranslationEditorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ManageTranslationCellRendererComponent, isStandalone: true, selector: "c8y-manage-translation-cell-renderer", viewQueries: [{ propertyName: "cellInput", first: true, predicate: ["cellInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"text-truncate pointer d-flex\"\n  title=\"{{ context.value }}\"\n  data-cy=\"c8y-manage-translation-cell-renderer--edit\"\n  (click)=\"!isCreateDisabled ? editCell() : ''\"\n  *ngIf=\"!isCellEditable\"\n>\n  <span\n    class=\"text-truncate\"\n    *ngIf=\"!isCellEditable && context.value !== ''\"\n  >\n    {{ context.value }}\n  </span>\n  <span\n    class=\"text-truncate\"\n    title=\"{{ 'Add translation' | translate }}\"\n    *ngIf=\"!isCellEditable && context.value === ''\"\n  >\n    <em class=\"text-muted\">{{ 'Add translation' | translate }}</em>\n  </span>\n  <i\n    class=\"showOnHover text-primary m-l-4\"\n    c8yIcon=\"pencil\"\n    title=\"{{ 'Edit translation' | translate }}\"\n    *ngIf=\"!isCreateDisabled\"\n  ></i>\n</div>\n\n<div\n  class=\"input-group input-group-sm\"\n  *ngIf=\"isCellEditable && !isCreateDisabled\"\n>\n  <input\n    class=\"form-control\"\n    placeholder=\"{{ 'Add translation' | translate }}\"\n    type=\"text\"\n    #cellInput\n    data-cy=\"c8y-manage-translation-cell-renderer--input\"\n    [(ngModel)]=\"cellValue\"\n  />\n  <div class=\"input-group-btn\">\n    <button\n      class=\"btn btn-clean\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n      data-cy=\"c8y-manage-translation-cell-renderer--cancel\"\n    >\n      <i\n        class=\"text-danger\"\n        c8yIcon=\"times\"\n      ></i>\n    </button>\n    <button\n      class=\"btn btn-clean\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      (click)=\"save()\"\n      data-cy=\"c8y-manage-translation-cell-renderer--save\"\n    >\n      <i\n        class=\"text-primary\"\n        c8yIcon=\"check\"\n      ></i>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ManageTranslationCellRendererComponent, deps: [{ token: i1.CellRendererContext }, { token: i1.Permissions }, { token: TranslationEditorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: ManageTranslationCellRendererComponent, isStandalone: true, selector: "c8y-manage-translation-cell-renderer", viewQueries: [{ propertyName: "cellInput", first: true, predicate: ["cellInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"text-truncate pointer d-flex\"\n  title=\"{{ context.value }}\"\n  data-cy=\"c8y-manage-translation-cell-renderer--edit\"\n  (click)=\"!isCreateDisabled ? editCell() : ''\"\n  *ngIf=\"!isCellEditable\"\n>\n  <span\n    class=\"text-truncate\"\n    *ngIf=\"!isCellEditable && context.value !== ''\"\n  >\n    {{ context.value }}\n  </span>\n  <span\n    class=\"text-truncate\"\n    title=\"{{ 'Add translation' | translate }}\"\n    *ngIf=\"!isCellEditable && context.value === ''\"\n  >\n    <em class=\"text-muted\">{{ 'Add translation' | translate }}</em>\n  </span>\n  <i\n    class=\"showOnHover text-primary m-l-4\"\n    c8yIcon=\"pencil\"\n    title=\"{{ 'Edit translation' | translate }}\"\n    *ngIf=\"!isCreateDisabled\"\n  ></i>\n</div>\n\n<div\n  class=\"input-group input-group-sm\"\n  *ngIf=\"isCellEditable && !isCreateDisabled\"\n>\n  <input\n    class=\"form-control\"\n    placeholder=\"{{ 'Add translation' | translate }}\"\n    type=\"text\"\n    #cellInput\n    data-cy=\"c8y-manage-translation-cell-renderer--input\"\n    [(ngModel)]=\"cellValue\"\n  />\n  <div class=\"input-group-btn\">\n    <button\n      class=\"btn btn-clean\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n      data-cy=\"c8y-manage-translation-cell-renderer--cancel\"\n    >\n      <i\n        class=\"text-danger\"\n        c8yIcon=\"times\"\n      ></i>\n    </button>\n    <button\n      class=\"btn btn-clean\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      (click)=\"save()\"\n      data-cy=\"c8y-manage-translation-cell-renderer--save\"\n    >\n      <i\n        class=\"text-primary\"\n        c8yIcon=\"check\"\n      ></i>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ManageTranslationCellRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ManageTranslationCellRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-manage-translation-cell-renderer', standalone: true, imports: [NgIf, C8yTranslatePipe, IconDirective, FormsModule], template: "<div\n  class=\"text-truncate pointer d-flex\"\n  title=\"{{ context.value }}\"\n  data-cy=\"c8y-manage-translation-cell-renderer--edit\"\n  (click)=\"!isCreateDisabled ? editCell() : ''\"\n  *ngIf=\"!isCellEditable\"\n>\n  <span\n    class=\"text-truncate\"\n    *ngIf=\"!isCellEditable && context.value !== ''\"\n  >\n    {{ context.value }}\n  </span>\n  <span\n    class=\"text-truncate\"\n    title=\"{{ 'Add translation' | translate }}\"\n    *ngIf=\"!isCellEditable && context.value === ''\"\n  >\n    <em class=\"text-muted\">{{ 'Add translation' | translate }}</em>\n  </span>\n  <i\n    class=\"showOnHover text-primary m-l-4\"\n    c8yIcon=\"pencil\"\n    title=\"{{ 'Edit translation' | translate }}\"\n    *ngIf=\"!isCreateDisabled\"\n  ></i>\n</div>\n\n<div\n  class=\"input-group input-group-sm\"\n  *ngIf=\"isCellEditable && !isCreateDisabled\"\n>\n  <input\n    class=\"form-control\"\n    placeholder=\"{{ 'Add translation' | translate }}\"\n    type=\"text\"\n    #cellInput\n    data-cy=\"c8y-manage-translation-cell-renderer--input\"\n    [(ngModel)]=\"cellValue\"\n  />\n  <div class=\"input-group-btn\">\n    <button\n      class=\"btn btn-clean\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n      data-cy=\"c8y-manage-translation-cell-renderer--cancel\"\n    >\n      <i\n        class=\"text-danger\"\n        c8yIcon=\"times\"\n      ></i>\n    </button>\n    <button\n      class=\"btn btn-clean\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      (click)=\"save()\"\n      data-cy=\"c8y-manage-translation-cell-renderer--save\"\n    >\n      <i\n        class=\"text-primary\"\n        c8yIcon=\"check\"\n      ></i>\n    </button>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.CellRendererContext }, { type: i1.Permissions }, { type: TranslationEditorComponent, decorators: [{
@@ -99,10 +99,10 @@ class AddTranslationModalComponent {
             return null;
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AddTranslationModalComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: AddTranslationModalComponent, isStandalone: true, selector: "c8y-add-translation-modal", ngImport: i0, template: "<c8y-modal\n  [title]=\"title\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"cancel()\"\n  (onClose)=\"save()\"\n  [disabled]=\"form.invalid\"\n  [labels]=\"{ cancel: 'Cancel', ok: 'Add' }\"\n>\n<ng-container c8y-modal-title>\n  <span [c8yIcon]=\"'language1'\"></span>\n</ng-container>\n  <div [formGroup]=\"form\" class=\"p-24\">\n    <c8y-form-group>\n      <label\n        for=\"label\"\n        translate\n      >\n        Translation key\n      </label>\n      <input\n        class=\"form-control\"\n        name=\"key\"\n        id=\"key\"\n        type=\"text\"\n        formControlName=\"key\"\n        placeholder=\"{{'e.g. {{ example }}' | translate : { example: 'Home' } }}\"\n      />\n      <c8y-messages>\n        <c8y-message\n          name=\"keyAlreadyTaken\"\n          [text]=\"alreadyTakenMsg | translate\"\n        ></c8y-message>\n      </c8y-messages>\n    </c8y-form-group>\n\n    <c8y-form-group *ngFor=\"let language of availableLangs\">\n      <label\n        [for]=\"language.lang\"\n      >\n        {{ language.nativeLanguage }} ({{ language.lang }})\n      </label>\n      <input\n        class=\"form-control\"\n        [name]=\"language.lang\"\n        [id]=\"language.lang\"\n        type=\"text\"\n        [formControlName]=\"language.lang\"\n      />\n    </c8y-form-group>\n  </div>\n</c8y-modal>\n", dependencies: [{ kind: "ngmodule", type: ModalModule }, { kind: "component", type: i1.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AddTranslationModalComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: AddTranslationModalComponent, isStandalone: true, selector: "c8y-add-translation-modal", ngImport: i0, template: "<c8y-modal\n  [title]=\"title\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"cancel()\"\n  (onClose)=\"save()\"\n  [disabled]=\"form.invalid\"\n  [labels]=\"{ cancel: 'Cancel', ok: 'Add' }\"\n>\n<ng-container c8y-modal-title>\n  <span [c8yIcon]=\"'language1'\"></span>\n</ng-container>\n  <div [formGroup]=\"form\" class=\"p-24\">\n    <c8y-form-group>\n      <label\n        for=\"label\"\n        translate\n      >\n        Translation key\n      </label>\n      <input\n        class=\"form-control\"\n        name=\"key\"\n        id=\"key\"\n        type=\"text\"\n        formControlName=\"key\"\n        placeholder=\"{{'e.g. {{ example }}' | translate : { example: 'Home' } }}\"\n      />\n      <c8y-messages>\n        <c8y-message\n          name=\"keyAlreadyTaken\"\n          [text]=\"alreadyTakenMsg | translate\"\n        ></c8y-message>\n      </c8y-messages>\n    </c8y-form-group>\n\n    <c8y-form-group *ngFor=\"let language of availableLangs\">\n      <label\n        [for]=\"language.lang\"\n      >\n        {{ language.nativeLanguage }} ({{ language.lang }})\n      </label>\n      <input\n        class=\"form-control\"\n        [name]=\"language.lang\"\n        [id]=\"language.lang\"\n        type=\"text\"\n        [formControlName]=\"language.lang\"\n      />\n    </c8y-form-group>\n  </div>\n</c8y-modal>\n", dependencies: [{ kind: "ngmodule", type: ModalModule }, { kind: "component", type: i1.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AddTranslationModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AddTranslationModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-add-translation-modal', standalone: true, imports: [
                         ModalModule,
@@ -213,10 +213,10 @@ class TranslationEditorComponent {
         })));
         return columns;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TranslationEditorComponent, deps: [{ token: i1$2.TranslationStoreService }, { token: i2.BsModalService }, { token: i1.AlertService }, { token: i1.AppStateService }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TranslationEditorComponent, isStandalone: true, selector: "c8y-translation-editor", ngImport: i0, template: "<c8y-title>{{ 'Localization' | translate }}</c8y-title>\n\n@if (isLoading) {\n  <c8y-loading></c8y-loading>\n} @else {\n  <c8y-action-bar-item placement=\"right\">\n    <button\n      class=\"btn btn-link\"\n      (click)=\"addEntry()\"\n      data-cy=\"c8y-translation-editor--add-translation\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      <span translate>Add translation</span>\n    </button>\n  </c8y-action-bar-item>\n\n  <c8y-action-bar-item placement=\"right\">\n    <button\n      class=\"btn btn-link\"\n      (click)=\"saveTranslations()\"\n      data-cy=\"c8y-translation-editor--save-and-apply\"\n    >\n      <i c8yIcon=\"save\"></i>\n      <span translate>Save and apply</span>\n    </button>\n  </c8y-action-bar-item>\n\n  <c8y-help src=\"/docs/standard-tenant/changing-settings/#localization\"></c8y-help>\n\n  <c8y-data-grid\n    class=\"content-fullpage d-flex d-col\"\n    [title]=\"'Translations' | translate\"\n    [columns]=\"columns\"\n    [actionControls]=\"actionControls\"\n    [pagination]=\"pagination\"\n    [displayOptions]=\"displayOptions\"\n    (onReload)=\"refresh()\"\n    [rows]=\"items\"\n  ></c8y-data-grid>\n}\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "ngmodule", type: DataGridModule }, { kind: "component", type: i1.DataGridComponent, selector: "c8y-data-grid", inputs: ["title", "loadMoreItemsLabel", "loadingItemsLabel", "showSearch", "refresh", "loading", "columns", "rows", "pagination", "childNodePagination", "infiniteScroll", "serverSideDataCallback", "selectable", "singleSelection", "selectionPrimaryKey", "displayOptions", "actionControls", "bulkActionControls", "headerActionControls", "searchText", "configureColumnsEnabled", "showCounterWarning", "activeClassName", "expandableRows", "treeGrid", "hideReload", "childNodesProperty", "parentNodeLabelProperty"], outputs: ["rowMouseOver", "rowMouseLeave", "rowClick", "onConfigChange", "onBeforeFilter", "onBeforeSearch", "onFilter", "itemsSelect", "onReload", "onAddCustomColumn", "onRemoveCustomColumn", "onColumnFilterReset", "onSort", "onPageSizeChange", "onColumnReordered", "onColumnVisibilityChange"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "progressLabel", "message"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TranslationEditorComponent, deps: [{ token: i1$2.TranslationStoreService }, { token: i2.BsModalService }, { token: i1.AlertService }, { token: i1.AppStateService }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: TranslationEditorComponent, isStandalone: true, selector: "c8y-translation-editor", ngImport: i0, template: "<c8y-title>{{ 'Localization' | translate }}</c8y-title>\n\n@if (isLoading) {\n  <c8y-loading></c8y-loading>\n} @else {\n  <c8y-action-bar-item placement=\"right\">\n    <button\n      class=\"btn btn-link\"\n      (click)=\"addEntry()\"\n      data-cy=\"c8y-translation-editor--add-translation\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      <span translate>Add translation</span>\n    </button>\n  </c8y-action-bar-item>\n\n  <c8y-action-bar-item placement=\"right\">\n    <button\n      class=\"btn btn-link\"\n      (click)=\"saveTranslations()\"\n      data-cy=\"c8y-translation-editor--save-and-apply\"\n    >\n      <i c8yIcon=\"save\"></i>\n      <span translate>Save and apply</span>\n    </button>\n  </c8y-action-bar-item>\n\n  <c8y-help src=\"/docs/standard-tenant/changing-settings/#localization\"></c8y-help>\n\n  <c8y-data-grid\n    class=\"content-fullpage d-flex d-col\"\n    [title]=\"'Translations' | translate\"\n    [columns]=\"columns\"\n    [actionControls]=\"actionControls\"\n    [pagination]=\"pagination\"\n    [displayOptions]=\"displayOptions\"\n    (onReload)=\"refresh()\"\n    [rows]=\"items\"\n  ></c8y-data-grid>\n}\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "ngmodule", type: DataGridModule }, { kind: "component", type: i1.DataGridComponent, selector: "c8y-data-grid", inputs: ["title", "loadMoreItemsLabel", "loadingItemsLabel", "showSearch", "refresh", "loading", "columns", "rows", "pagination", "childNodePagination", "infiniteScroll", "serverSideDataCallback", "selectable", "singleSelection", "selectionPrimaryKey", "displayOptions", "actionControls", "bulkActionControls", "headerActionControls", "searchText", "configureColumnsEnabled", "showCounterWarning", "activeClassName", "expandableRows", "treeGrid", "hideReload", "childNodesProperty", "parentNodeLabelProperty"], outputs: ["rowMouseOver", "rowMouseLeave", "rowClick", "onConfigChange", "onBeforeFilter", "onBeforeSearch", "onFilter", "itemsSelect", "onReload", "onAddCustomColumn", "onRemoveCustomColumn", "onColumnFilterReset", "onSort", "onPageSizeChange", "onColumnReordered", "onColumnVisibilityChange"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "progressLabel", "message"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TranslationEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TranslationEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-translation-editor', standalone: true, imports: [
                         TitleComponent,
@@ -333,10 +333,10 @@ class AdvancedTranslationEditorComponent {
             this.alert.addServerFailure(e);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AdvancedTranslationEditorComponent, deps: [{ token: i1.AppStateService }, { token: i1$2.TranslationStoreService }, { token: i1.AlertService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AdvancedTranslationEditorComponent, isStandalone: true, selector: "c8y-advanced-translation-editor", viewQueries: [{ propertyName: "editorComponent", first: true, predicate: EditorComponent, descendants: true }], ngImport: i0, template: "<c8y-title>{{ 'Localization' | translate }}</c8y-title>\n\n@if (isLoading()) {\n  <c8y-loading></c8y-loading>\n} @else {\n  <c8y-action-bar-item placement=\"right\">\n    <button\n      class=\"btn btn-link\"\n      [disabled]=\"!isValidJSON()\"\n      (click)=\"saveTranslations()\"\n      data-cy=\"c8y-translation-editor--save-and-apply\"\n    >\n      <i c8yIcon=\"save\"></i>\n      <span translate>Save and apply</span>\n    </button>\n  </c8y-action-bar-item>\n\n  <c8y-action-bar-item placement=\"right\">\n    <button\n      class=\"btn btn-link\"\n      [disabled]=\"!isValidJSON()\"\n      (click)=\"importTranslationKeys()\"\n      data-cy=\"c8y-translation-editor--import-translation-keys\"\n    >\n      <i [c8yIcon]=\"'import'\"></i>\n      <span translate>Import translation keys from apps</span>\n    </button>\n  </c8y-action-bar-item>\n\n  <div class=\"card card--fullpage content-fullpage\">\n    <c8y-editor\n      class=\"flex-grow\"\n      [editorOptions]=\"editorOptions\"\n      [ngModel]=\"valueString()\"\n      (ngModelChange)=\"onValueChange($event)\"\n      (editorInit)=\"onEditorInit($event)\"\n      monacoEditorMarkerValidator\n    ></c8y-editor>\n  </div>\n}\n", dependencies: [{ kind: "component", type: EditorComponent, selector: "c8y-editor", inputs: ["editorOptions", "theme"], outputs: ["editorInit"] }, { kind: "directive", type: MonacoEditorMarkerValidatorDirective, selector: "c8y-editor [monacoEditorMarkerValidator]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "progressLabel", "message"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AdvancedTranslationEditorComponent, deps: [{ token: i1.AppStateService }, { token: i1$2.TranslationStoreService }, { token: i1.AlertService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: AdvancedTranslationEditorComponent, isStandalone: true, selector: "c8y-advanced-translation-editor", viewQueries: [{ propertyName: "editorComponent", first: true, predicate: EditorComponent, descendants: true }], ngImport: i0, template: "<c8y-title>{{ 'Localization' | translate }}</c8y-title>\n\n@if (isLoading()) {\n  <c8y-loading></c8y-loading>\n} @else {\n  <c8y-action-bar-item placement=\"right\">\n    <button\n      class=\"btn btn-link\"\n      [disabled]=\"!isValidJSON()\"\n      (click)=\"saveTranslations()\"\n      data-cy=\"c8y-translation-editor--save-and-apply\"\n    >\n      <i c8yIcon=\"save\"></i>\n      <span translate>Save and apply</span>\n    </button>\n  </c8y-action-bar-item>\n\n  <c8y-action-bar-item placement=\"right\">\n    <button\n      class=\"btn btn-link\"\n      [disabled]=\"!isValidJSON()\"\n      (click)=\"importTranslationKeys()\"\n      data-cy=\"c8y-translation-editor--import-translation-keys\"\n    >\n      <i [c8yIcon]=\"'import'\"></i>\n      <span translate>Import translation keys from apps</span>\n    </button>\n  </c8y-action-bar-item>\n\n  <div class=\"card card--fullpage content-fullpage\">\n    <c8y-editor\n      class=\"flex-grow\"\n      [editorOptions]=\"editorOptions\"\n      [ngModel]=\"valueString()\"\n      (ngModelChange)=\"onValueChange($event)\"\n      (editorInit)=\"onEditorInit($event)\"\n      monacoEditorMarkerValidator\n    ></c8y-editor>\n  </div>\n}\n", dependencies: [{ kind: "component", type: EditorComponent, selector: "c8y-editor", inputs: ["editorOptions", "theme"], outputs: ["editorInit"] }, { kind: "directive", type: MonacoEditorMarkerValidatorDirective, selector: "c8y-editor [monacoEditorMarkerValidator]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "progressLabel", "message"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AdvancedTranslationEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AdvancedTranslationEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-advanced-translation-editor', standalone: true, imports: [
                         EditorComponent,

package/fesm2022/c8y-ngx-components-translation-editor.mjs

@@ -21,10 +21,10 @@ class TranslationEditorNaviagtorFactoryService {
         }
         return this.node;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TranslationEditorNaviagtorFactoryService, deps: [{ token: i1.Permissions }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TranslationEditorNaviagtorFactoryService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TranslationEditorNaviagtorFactoryService, deps: [{ token: i1.Permissions }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TranslationEditorNaviagtorFactoryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TranslationEditorNaviagtorFactoryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TranslationEditorNaviagtorFactoryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -59,10 +59,10 @@ class TranslationEditorTabFactoryService {
         }
         return [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TranslationEditorTabFactoryService, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TranslationEditorTabFactoryService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TranslationEditorTabFactoryService, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TranslationEditorTabFactoryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TranslationEditorTabFactoryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TranslationEditorTabFactoryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'