@c8y/ngx-components 1024.1.8 → 1024.5.1

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

@@ -1,18 +1,21 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, DestroyRef, model, ViewChild, Input, Component } from '@angular/core';
+import { Injectable, inject, DestroyRef, signal, model, ViewChild, Input, Component } from '@angular/core';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i3 from '@angular/forms';
 import { FormBuilder } from '@angular/forms';
 import * as i1 from '@c8y/ngx-components';
 import { AGGREGATION_LIMITS, CoreModule, DateTimePickerModule, AggregationPickerComponent } from '@c8y/ngx-components';
-import { RealtimeControlComponent } from '@c8y/ngx-components/global-context';
+import { TimeSeriesMigrationService, AUTO_AGGREGATION_DATAPOINTS, AGGREGATION_POPOVER_TEXT, TIMING, RealtimeControlComponent } from '@c8y/ngx-components/global-context';
 import { INTERVALS, TimeSpanInMs, INTERVAL_TITLES, IntervalPickerComponent } from '@c8y/ngx-components/interval-picker';
+import { gettext } from '@c8y/ngx-components/gettext';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 import * as i4 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule, BsDropdownDirective } from 'ngx-bootstrap/dropdown';
 import * as i5 from 'ngx-bootstrap/tooltip';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
-import { interval } from 'rxjs';
+import * as i6 from 'ngx-bootstrap/popover';
+import { PopoverModule } from 'ngx-bootstrap/popover';
+import { debounceTime, interval } from 'rxjs';
 import { aggregationType } from '@c8y/client';
 import * as i2 from '@angular/common';
 
@@ -98,6 +101,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 // TODO: REMOVE THIS FILE
 class TimeContextComponent {
     #destroyRef;
+    #timeSeriesMigrationService;
     constructor(widgetTimeContextDateRangeService) {
         this.widgetTimeContextDateRangeService = widgetTimeContextDateRangeService;
         this.timeContext = {};
@@ -106,13 +110,27 @@ class TimeContextComponent {
             showSeconds: false,
             showSpinners: false
         };
+        this.enableAutoAggregation = false;
         this.datapointExplorerService = inject(DatapointExplorerService);
         this.formBuilder = inject(FormBuilder);
         this.#destroyRef = inject(DestroyRef);
+        this.#timeSeriesMigrationService = inject(TimeSeriesMigrationService);
         this.DATE_FORMAT = 'short';
         this.INTERVAL_TITLES = INTERVAL_TITLES;
         this.REALTIME_INTERVAL = 1000;
+        this.AUTO_AGGREGATION_DATAPOINTS = AUTO_AGGREGATION_DATAPOINTS;
+        this.AGGREGATION_POPOVER = AGGREGATION_POPOVER_TEXT;
+        this.KEEP_DATA_ON_ZOOM_IN_POPOVER = gettext('When enabled, the chart reloads data at a finer or coarser interval as you zoom in or out, so it always shows the number of points you set. When disabled, it reuses the already loaded data.');
+        /** Whether auto-aggregation mode is active. */
+        this.isAutoModeActive = signal(false, ...(ngDevMode ? [{ debugName: "isAutoModeActive" }] : /* istanbul ignore next */ []));
+        /**
+         * The "Auto" aggregation option requires the tenant to be migrated to time series
+         * (auto mode uses `aggregationInterval`, unsupported on non-migrated tenants).
+         */
+        this.isTimeSeriesMigrated = signal(false, ...(ngDevMode ? [{ debugName: "isTimeSeriesMigrated" }] : /* istanbul ignore next */ []));
         this.form = this.createForm(this.datapointExplorerService.getDefaultContext());
+        /** Last datapoints value applied to the context; restored when the field is left empty. */
+        this.lastAppliedDatapoints = AUTO_AGGREGATION_DATAPOINTS.DEFAULT;
         this.valuesSignal = toSignal(this.form.controls.currentDateContextFromDate.valueChanges, {
             initialValue: this.form.controls.currentDateContextFromDate.value
         });
@@ -123,9 +141,14 @@ class TimeContextComponent {
         const context = this.datapointExplorerService.getDefaultContext(this.timeContext);
         const { disabledAggregations } = this.datapointExplorerService.calculateAggregation(context.date, context.aggregation);
         this.disabledAggregations = disabledAggregations;
+        this.#timeSeriesMigrationService
+            .isTimeSeriesMigrated()
+            .then(isMigrated => this.isTimeSeriesMigrated.set(isMigrated));
         this.subscribeToIntervalChange();
         this.subscribeToRealtimeChange();
         this.subscribeToAggregationChange();
+        this.subscribeToDatapointsChange();
+        this.subscribeToKeepDataOnZoomInChange();
     }
     ngOnChanges(changes) {
         if (changes.changedDateContext && changes.changedDateContext.currentValue) {
@@ -141,23 +164,42 @@ class TimeContextComponent {
                 newDateTo !== currentFormValues.currentDateContextToDate ||
                 this.changedDateContext.interval !== currentFormValues.currentDateContextInterval ||
                 this.changedDateContext.realtime !== currentFormValues.realtime ||
-                this.changedDateContext.aggregation !== currentFormValues.aggregation;
+                this.changedDateContext.aggregation !== currentFormValues.aggregation ||
+                !!this.changedDateContext.autoAggregation !== currentFormValues.autoAggregationEnabled;
             if (!hasActualChanges) {
                 return;
             }
             // Don't emit when update comes from parent (avoid infinite loop)
+            const incomingAutoAggregation = this.changedDateContext.autoAggregation ?? null;
+            this.isAutoModeActive.set(!!incomingAutoAggregation);
             this.update({
                 date: [this.changedDateContext.dateFrom, this.changedDateContext.dateTo],
                 interval: this.changedDateContext.interval,
                 realtime: this.changedDateContext.realtime || false,
-                aggregation: this.changedDateContext.aggregation
+                aggregation: incomingAutoAggregation ? null : this.changedDateContext.aggregation,
+                autoAggregation: incomingAutoAggregation
             }, false);
             if (this.changedDateContext.realtime) {
                 this.form.controls.aggregation.disable();
             }
         }
     }
+    /** Called by the aggregation picker's (autoModeChange) output. */
+    onAutoModeChange(isAuto) {
+        this.isAutoModeActive.set(isAuto);
+        this.update({
+            date: [
+                new Date(this.form.value.currentDateContextFromDate),
+                new Date(this.form.value.currentDateContextToDate)
+            ],
+            interval: this.form.value.currentDateContextInterval,
+            realtime: this.form.value.realtime,
+            aggregation: isAuto ? null : this.form.value.aggregation,
+            autoAggregation: isAuto ? this.buildAutoAggregationConfig() : null
+        });
+    }
     applyDatetimeContext() {
+        const isAuto = this.isAutoModeActive();
         this.update({
             date: [
                 new Date(this.form.controls.temporaryUserSelectedFromDate.value),
@@ -165,7 +207,8 @@ class TimeContextComponent {
             ],
             interval: 'custom',
             realtime: this.form.value.realtime,
-            aggregation: this.form.value.aggregation
+            aggregation: isAuto ? null : this.form.value.aggregation,
+            autoAggregation: isAuto ? this.buildAutoAggregationConfig() : null
         });
     }
     stopRealtime() {
@@ -202,7 +245,8 @@ class TimeContextComponent {
                 date,
                 interval,
                 realtime: this.form.value.realtime,
-                aggregation: this.form.value.aggregation
+                aggregation: this.isAutoModeActive() ? null : this.form.value.aggregation,
+                autoAggregation: this.isAutoModeActive() ? this.buildAutoAggregationConfig() : null
             });
         });
     }
@@ -223,6 +267,10 @@ class TimeContextComponent {
         this.form.controls.aggregation.valueChanges
             .pipe(takeUntilDestroyed(this.#destroyRef))
             .subscribe(aggregation => {
+            // Skip during auto mode transitions — onAutoModeChange handles the update
+            if (this.isAutoModeActive()) {
+                return;
+            }
             this.update({
                 date: [
                     new Date(this.form.value.currentDateContextFromDate),
@@ -230,10 +278,73 @@ class TimeContextComponent {
                 ],
                 interval: this.form.value.currentDateContextInterval,
                 realtime: this.form.value.realtime,
-                aggregation
+                aggregation,
+                autoAggregation: null
             });
         });
     }
+    subscribeToDatapointsChange() {
+        this.form.controls.autoAggregationDatapoints.valueChanges
+            .pipe(takeUntilDestroyed(this.#destroyRef), debounceTime(TIMING.TYPING_DEBOUNCE))
+            .subscribe(datapoints => {
+            if (!this.isAutoModeActive()) {
+                return;
+            }
+            // Skip while the field is empty or out of range — the user is still typing. Rewriting
+            // or emitting a clamped value here would snap the field back mid-edit;
+            // commitDatapoints() (blur) commits a valid value instead.
+            if (!this.isValidDatapoints(datapoints)) {
+                return;
+            }
+            this.emitAutoAggregationUpdate();
+        });
+    }
+    isValidDatapoints(value) {
+        return (typeof value === 'number' &&
+            !Number.isNaN(value) &&
+            value >= AUTO_AGGREGATION_DATAPOINTS.MIN &&
+            value <= AUTO_AGGREGATION_DATAPOINTS.MAX);
+    }
+    clampToDatapointsBounds(value) {
+        return Math.min(AUTO_AGGREGATION_DATAPOINTS.MAX, Math.max(AUTO_AGGREGATION_DATAPOINTS.MIN, value));
+    }
+    subscribeToKeepDataOnZoomInChange() {
+        this.form.controls.autoAggregationKeepDataOnZoomIn.valueChanges
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(() => {
+            if (!this.isAutoModeActive()) {
+                return;
+            }
+            this.emitAutoAggregationUpdate();
+        });
+    }
+    emitAutoAggregationUpdate() {
+        this.update({
+            date: [
+                new Date(this.form.value.currentDateContextFromDate),
+                new Date(this.form.value.currentDateContextToDate)
+            ],
+            interval: this.form.value.currentDateContextInterval,
+            realtime: this.form.value.realtime,
+            aggregation: null,
+            autoAggregation: this.buildAutoAggregationConfig()
+        });
+    }
+    /**
+     * Builds the auto-aggregation config from the current form state, clamped to the allowed
+     * range. Falls back to the last applied value while the field is empty (mid-edit).
+     *
+     * Reads control values instead of `this.form.value`: a control's valueChanges fires before
+     * the parent group recomputes its cached value, so the group value is stale inside the
+     * subscriptions that call this method.
+     */
+    buildAutoAggregationConfig() {
+        const datapoints = this.clampToDatapointsBounds(this.form.controls.autoAggregationDatapoints.value ?? this.lastAppliedDatapoints);
+        return {
+            datapoints,
+            keepDataOnZoomIn: this.form.controls.autoAggregationKeepDataOnZoomIn.value ?? true
+        };
+    }
     onRealtimeValueChange(realtime) {
         let dateTimeContext;
         if (this.form.value.currentDateContextInterval !== 'custom') {
@@ -246,11 +357,13 @@ class TimeContextComponent {
             const dateFrom = new Date(dateTo.valueOf() - currentTimeSpanInMs);
             dateTimeContext = [dateFrom, dateTo];
         }
+        this.isAutoModeActive.set(false);
         this.update({
             date: dateTimeContext,
             interval: this.form.value.currentDateContextInterval,
             realtime,
-            aggregation: null
+            aggregation: null,
+            autoAggregation: null
         });
     }
     startRealtime() {
@@ -274,10 +387,10 @@ class TimeContextComponent {
             }, false); // Don't emit during automatic realtime ticks
         });
     }
-    update({ date, interval, realtime, aggregation }, shouldEmit = true) {
-        const { selectedAggregation, disabledAggregations } = this.datapointExplorerService.calculateAggregation(date, aggregation);
+    update({ date, interval, realtime, aggregation, autoAggregation = null }, shouldEmit = true) {
+        const { selectedAggregation, disabledAggregations } = this.datapointExplorerService.calculateAggregation(date, autoAggregation ? null : aggregation);
         this.disabledAggregations = disabledAggregations;
-        this.updateFormValues({ date, interval, realtime, aggregation: selectedAggregation }, shouldEmit);
+        this.updateFormValues({ date, interval, realtime, aggregation: selectedAggregation, autoAggregation }, shouldEmit);
     }
     createForm(context) {
         return this.formBuilder.group({
@@ -287,10 +400,13 @@ class TimeContextComponent {
             currentDateContextToDate: context.date[1].toISOString(),
             currentDateContextInterval: context.interval || 'custom',
             realtime: context.realtime,
-            aggregation: context.aggregation
+            aggregation: context.aggregation,
+            autoAggregationEnabled: false,
+            autoAggregationDatapoints: AUTO_AGGREGATION_DATAPOINTS.DEFAULT,
+            autoAggregationKeepDataOnZoomIn: true
         });
     }
-    updateFormValues({ date, interval, realtime, aggregation }, shouldEmit = true) {
+    updateFormValues({ date, interval, realtime, aggregation, autoAggregation = null }, shouldEmit = true) {
         const newFormValues = {
             temporaryUserSelectedFromDate: date[0].toISOString(),
             temporaryUserSelectedToDate: date[1].toISOString(),
@@ -298,17 +414,24 @@ class TimeContextComponent {
             currentDateContextToDate: date[1].toISOString(),
             realtime,
             currentDateContextInterval: interval || 'custom',
-            aggregation: aggregation || null
+            aggregation: autoAggregation ? null : aggregation || null,
+            autoAggregation
         };
         if (shouldEmit) {
             this.context.set(newFormValues);
         }
-        this.form.patchValue(newFormValues, {
-            emitEvent: false
-        });
+        if (autoAggregation?.datapoints != null) {
+            this.lastAppliedDatapoints = this.clampToDatapointsBounds(autoAggregation.datapoints);
+        }
+        this.form.patchValue({
+            ...newFormValues,
+            autoAggregationEnabled: !!autoAggregation,
+            autoAggregationDatapoints: autoAggregation?.datapoints ?? this.form.value.autoAggregationDatapoints,
+            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 }, 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  >\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-4\"\n              c8yIcon=\"schedule1\"\n            ></i>\n            <div class=\"d-col text-left fit-w\">\n              <span\n                class=\"text-12\"\n                data-cy=\"widget-time-context--selected-interval\"\n              >\n                {{ INTERVAL_TITLES[form.controls.currentDateContextInterval.value] | translate }}\n              </span>\n              <span\n                class=\"text-10 text-muted 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 (controlsAvailable ? controlsAvailable.aggregation : true) {\n        <c8y-aggregation-picker\n          formControlName=\"aggregation\"\n          [disabledAggregations]=\"disabledAggregations\"\n        ></c8y-aggregation-picker>\n      }\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: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: "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"] }, { 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: "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.ɵ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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TimeContextComponent, decorators: [{
             type: Component,
@@ -319,9 +442,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         BsDropdownModule,
                         AggregationPickerComponent,
                         TooltipModule,
+                        PopoverModule,
                         IntervalPickerComponent,
                         RealtimeControlComponent
-                    ], 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  >\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-4\"\n              c8yIcon=\"schedule1\"\n            ></i>\n            <div class=\"d-col text-left fit-w\">\n              <span\n                class=\"text-12\"\n                data-cy=\"widget-time-context--selected-interval\"\n              >\n                {{ INTERVAL_TITLES[form.controls.currentDateContextInterval.value] | translate }}\n              </span>\n              <span\n                class=\"text-10 text-muted 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 (controlsAvailable ? controlsAvailable.aggregation : true) {\n        <c8y-aggregation-picker\n          formControlName=\"aggregation\"\n          [disabledAggregations]=\"disabledAggregations\"\n        ></c8y-aggregation-picker>\n      }\n    </div>\n  </form>\n</ng-template>\n" }]
+                    ], 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" }]
         }], ctorParameters: () => [{ type: i1.WidgetTimeContextDateRangeService }], propDecorators: { changedDateContext: [{
                 type: Input
             }], controlsAvailable: [{
@@ -330,6 +454,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Input
             }], timePickerConfig: [{
                 type: Input
+            }], enableAutoAggregation: [{
+                type: Input
             }], dropdown: [{
                 type: ViewChild,
                 args: [BsDropdownDirective]