@c8y/ngx-components 1024.1.8 → 1024.2.4

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

@@ -1,12 +1,12 @@
 import { gettext } from '@c8y/ngx-components/gettext';
-import { aggregationType } from '@c8y/client';
+import { aggregationType, MeasurementService } from '@c8y/client';
 import * as i0 from '@angular/core';
-import { computed, signal, Injectable, inject, input, forwardRef, ChangeDetectionStrategy, Component, DestroyRef, output, Input, ChangeDetectorRef, ViewChild, EventEmitter, viewChild, effect, HostListener, Output, InjectionToken, TemplateRef, untracked, ContentChild, NgModule } from '@angular/core';
+import { computed, signal, Injectable, inject, input, output, forwardRef, ChangeDetectionStrategy, Component, DestroyRef, Input, ChangeDetectorRef, ViewChild, EventEmitter, viewChild, effect, HostListener, Output, InjectionToken, TemplateRef, untracked, ContentChild, NgModule } from '@angular/core';
 import * as i4 from '@c8y/ngx-components';
-import { ViewContext, I18nModule, IconDirective, FormGroupComponent, MessagesComponent, MessageDirective, DateTimePickerModule, C8yTranslatePipe, DatePipe, TabsOutletComponent, FormsModule as FormsModule$1, CountdownIntervalModule, CountdownIntervalComponent, AlertService, ContextRouteService, DashboardChildComponent, hookActionBar } from '@c8y/ngx-components';
-import { BehaviorSubject, map, distinctUntilChanged, shareReplay, fromEvent, filter, debounceTime, startWith, tap as tap$1, firstValueFrom, combineLatest, Subject, take, skip, throttleTime, merge as merge$1, EMPTY } from 'rxjs';
+import { ViewContext, I18nModule, IconDirective, FormGroupComponent, MessagesComponent, MessageDirective, DateTimePickerModule, C8yTranslatePipe, DatePipe, TabsOutletComponent, FormsModule as FormsModule$1, AUTO_POINTS_TOOLTIP, AUTO_POINTS_TOOLTIP_KEPT, CountdownIntervalModule, CountdownIntervalComponent, AlertService, ContextRouteService, DashboardChildComponent, hookActionBar } from '@c8y/ngx-components';
+import { BehaviorSubject, map, distinctUntilChanged, shareReplay, fromEvent, filter, debounce, timer, debounceTime, startWith, tap as tap$1, firstValueFrom, combineLatest, Subject, take, skip, throttleTime, merge as merge$1, EMPTY } from 'rxjs';
 import * as i1 from '@angular/forms';
-import { FormBuilder, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormControl } from '@angular/forms';
+import { FormBuilder, FormsModule, NG_VALUE_ACCESSOR, Validators, ReactiveFormsModule, FormControl } from '@angular/forms';
 import { pick, omit, isObject, isEqual, transform, some, cloneDeep, merge, isEmpty } from 'lodash-es';
 import { ActivatedRoute, Router, NavigationStart, NavigationEnd, ActivationEnd } from '@angular/router';
 import * as i1$1 from '@angular/common';
@@ -17,7 +17,7 @@ import * as i2 from 'ngx-bootstrap/tooltip';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import * as i1$2 from 'ngx-bootstrap/collapse';
 import { CollapseModule } from 'ngx-bootstrap/collapse';
-import * as i2$2 from 'ngx-bootstrap/popover';
+import * as i3 from 'ngx-bootstrap/popover';
 import { PopoverModule } from 'ngx-bootstrap/popover';
 import * as i2$1 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule, BsDropdownDirective } from 'ngx-bootstrap/dropdown';
@@ -189,8 +189,17 @@ const AGGREGATION_ICON_TYPE = {
     UNDEFINED: 'line-chart',
     MINUTELY: 'hourglass',
     HOURLY: 'clock-o',
-    DAILY: 'calendar-o'
+    DAILY: 'calendar-o',
+    AUTO: 'automation'
 };
+/** Short label for the automatic aggregation mode — used as the picker option title. */
+const AUTO_AGGREGATION_TEXT = gettext('Auto`automatic aggregation mode`');
+/**
+ * Long label for the automatic aggregation mode — used where the current value is shown
+ * (picker tooltip, action-bar display) so it reads consistently alongside "Minutely
+ * aggregation", "Hourly aggregation", etc.
+ */
+const AUTO_AGGREGATION_TEXT_LONG = gettext('Automatic aggregation');
 const AGGREGATION_ICONS = {
     undefined: AGGREGATION_ICON_TYPE.UNDEFINED,
     MINUTELY: AGGREGATION_ICON_TYPE.MINUTELY,
@@ -198,7 +207,7 @@ const AGGREGATION_ICONS = {
     DAILY: AGGREGATION_ICON_TYPE.DAILY
 };
 const AGGREGATION_TEXTS = {
-    disabled: gettext('No aggregation with realtime enabled'),
+    disabled: gettext('Unavailable while real-time or auto-refresh is on.'),
     undefined: gettext('No aggregation'),
     null: gettext('No aggregation'),
     MINUTELY: gettext('Minutely aggregation'),
@@ -224,6 +233,12 @@ const AGGREGATION_LABELS = {
     [aggregationType.DAILY]: AGGREGATIONS[3].title
 };
 
+/**
+ * Shared popover text explaining the aggregation control. Used by the history-mode
+ * configuration controls and the (legacy) time-context component so both stay in sync.
+ * "Auto" is intentionally not re-explained here — it has its own dedicated tooltip.
+ */
+const AGGREGATION_POPOVER_TEXT = gettext("Groups measurements into larger time intervals to improve readability and performance. 'None' shows raw data; other options group measurements into minute, hour, or day intervals.");
 /**
  * Time duration constants (ms)
  */
@@ -241,6 +256,8 @@ const TIME_DURATION = {
 const TIMING = {
     /** Debounce time for form value changes (ms) */
     FORM_DEBOUNCE: 100,
+    /** Debounce time while the user is typing into a text/number field (ms) */
+    TYPING_DEBOUNCE: 500,
     /** Throttle time for context changes (ms) */
     CONTEXT_THROTTLE: 200,
     /** Tooltip delay time (ms) */
@@ -255,6 +272,20 @@ const UI_PRIORITIES = {
     /** High priority for configuration controls */
     CONFIGURATION_PRIORITY: 1000
 };
+/**
+ * Bounds for the auto-aggregation "Datapoints target" control (how many buckets the auto
+ * interval aims for). Shared by the slider, the number input, and the clamping/validation logic.
+ */
+const AUTO_AGGREGATION_DATAPOINTS = {
+    /** Minimum number of target datapoints. */
+    MIN: 2,
+    /** Maximum number of target datapoints. */
+    MAX: 2000,
+    /** Increment for slider and number stepper. Must divide MAX - MIN so the slider reaches MAX. */
+    STEP: 1,
+    /** Default target when auto mode is enabled. */
+    DEFAULT: 300
+};
 
 /**
  * Central utility for all DateTimeContext operations.
@@ -2722,6 +2753,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }]
         }] });
 
+/**
+ * Detects whether the current tenant has been migrated to the time series measurement store.
+ *
+ * The automatic ("Auto") aggregation mode relies on `aggregationInterval` support, which is
+ * only available on time-series-migrated tenants, so UI controls offering it must be hidden
+ * on non-migrated tenants.
+ *
+ * @deprecated The detection itself is a workaround: the measurement detail endpoint responds
+ * with 405 on migrated tenants because it is disabled there. To be replaced when the platform
+ * exposes a proper way to identify time series migration (same approach as
+ * `WidgetDatapointsSelectorComponent.detectTimeSeriesMigration`).
+ */
+class TimeSeriesMigrationService {
+    constructor() {
+        this.measurementService = inject(MeasurementService);
+        this.migrationCheck = null;
+    }
+    /**
+     * Resolves to `true` when the tenant is migrated to time series.
+     * The result is cached for the lifetime of the application, as migration
+     * state cannot change within a session.
+     */
+    isTimeSeriesMigrated() {
+        if (!this.migrationCheck) {
+            this.migrationCheck = this.detectMigration();
+        }
+        return this.migrationCheck;
+    }
+    async detectMigration() {
+        try {
+            // Any id works: on migrated tenants the endpoint itself is disabled and returns 405.
+            await this.measurementService.detail(1);
+            return false;
+        }
+        catch (err) {
+            return err?.res?.status === 405;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TimeSeriesMigrationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TimeSeriesMigrationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TimeSeriesMigrationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 class GlobalContextUtilsService {
     /**
      * Compares two objects and returns an object containing only the fields that changed.
@@ -2825,6 +2902,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }]
         }] });
 
+const AUTO_AGGREGATION_ID = 'AUTO';
+const AUTO_ITEM = { id: AUTO_AGGREGATION_ID, title: AUTO_AGGREGATION_TEXT };
 class AggregationPickerComponent {
     constructor() {
         /**
@@ -2845,10 +2924,31 @@ class AggregationPickerComponent {
          * Default is dropdown.
          */
         this.layout = input('dropdown', ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+        /**
+         * When true, appends an "Auto" option to the radio group that signals automatic
+         * aggregation selection. Use together with `autoModeActive` and `(autoModeChange)`.
+         * Only meaningful in radio layout.
+         */
+        this.showAutoMode = input(false, ...(ngDevMode ? [{ debugName: "showAutoMode" }] : /* istanbul ignore next */ []));
+        /**
+         * Controls whether the "Auto" radio option appears checked.
+         * Bind to your form's auto-mode boolean so the picker reflects external state.
+         */
+        this.autoModeActive = input(false, ...(ngDevMode ? [{ debugName: "autoModeActive" }] : /* istanbul ignore next */ []));
+        /**
+         * When true, the "Auto" option is rendered but disabled (greyed out). Use for widgets that show
+         * the option for discoverability but do not support auto mode (only the Data graph does).
+         */
+        this.autoModeDisabled = input(false, ...(ngDevMode ? [{ debugName: "autoModeDisabled" }] : /* istanbul ignore next */ []));
+        /** Emits `true` when the user selects "Auto", `false` when switching away from it. */
+        this.autoModeChange = output();
         this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
         this.disabled = computed(() => this._disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.AGGREGATIONS = AGGREGATIONS;
+        this.AUTO_ITEM_ID = AUTO_AGGREGATION_ID;
+        this.AVAILABLE_AGGREGATIONS = computed(() => this.showAutoMode() ? [...AGGREGATIONS, AUTO_ITEM] : AGGREGATIONS, ...(ngDevMode ? [{ debugName: "AVAILABLE_AGGREGATIONS" }] : /* istanbul ignore next */ []));
         this.AGGREGATION_ICONS = AGGREGATION_ICONS;
+        this.AUTO_ICON = AGGREGATION_ICON_TYPE.AUTO;
         this.AGGREGATION_TEXTS = AGGREGATION_TEXTS;
         this._value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
         this.value = computed(() => this._value(), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -2856,13 +2956,20 @@ class AggregationPickerComponent {
         this.touched = computed(() => this._touched(), ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
         // Computed helpers for cleaner templates
         this.currentText = computed(() => {
+            if (this.autoModeActive()) {
+                return AUTO_AGGREGATION_TEXT_LONG;
+            }
             const value = this._value();
             return value ? this.AGGREGATION_TEXTS[value] : this.AGGREGATION_TEXTS.undefined;
         }, ...(ngDevMode ? [{ debugName: "currentText" }] : /* istanbul ignore next */ []));
         this.currentIcon = computed(() => {
+            if (this.autoModeActive()) {
+                return AGGREGATION_ICON_TYPE.AUTO;
+            }
             const value = this._value();
             return value ? this.AGGREGATION_ICONS[value] : this.AGGREGATION_ICONS.undefined;
         }, ...(ngDevMode ? [{ debugName: "currentIcon" }] : /* istanbul ignore next */ []));
+        this.AUTO_MODE_TOOLTIP = gettext('Auto picks an aggregation interval from the time range and the aggregation points per chart you set. Available only for the Data graph widget.');
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChange = _ => { };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -2893,13 +3000,33 @@ class AggregationPickerComponent {
         }
     }
     selectAggregation(aggregation) {
-        // Early return if value hasn't changed (no-op)
-        if (aggregation === this._value()) {
+        const isAuto = aggregation === AUTO_AGGREGATION_ID;
+        // Early return: Auto is disabled for this widget
+        if (isAuto && this.autoModeDisabled()) {
+            return;
+        }
+        // Early return: clicking Auto when already in auto mode
+        if (isAuto && this.autoModeActive()) {
+            return;
+        }
+        // Early return: clicking the same non-auto aggregation when not in auto mode
+        if (!isAuto && !this.autoModeActive() && aggregation === this._value()) {
             return;
         }
         this.markAsTouched();
-        this._value.set(aggregation);
-        this.onChange(aggregation);
+        const wasAuto = this.autoModeActive();
+        if (isAuto) {
+            this._value.set(null);
+            this.onChange(null);
+            this.autoModeChange.emit(true);
+        }
+        else {
+            this._value.set(aggregation);
+            this.onChange(aggregation);
+            if (wasAuto) {
+                this.autoModeChange.emit(false);
+            }
+        }
     }
     resetValue() {
         if (this._value() !== null) {
@@ -2908,13 +3035,13 @@ class AggregationPickerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AggregationPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AggregationPickerComponent, isStandalone: true, selector: "c8y-aggregation-picker", inputs: { disabledAggregations: { classPropertyName: "disabledAggregations", publicName: "disabledAggregations", isSignal: true, isRequired: false, transformFunction: null }, resetToDefault: { classPropertyName: "resetToDefault", publicName: "resetToDefault", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AggregationPickerComponent, isStandalone: true, selector: "c8y-aggregation-picker", inputs: { disabledAggregations: { classPropertyName: "disabledAggregations", publicName: "disabledAggregations", isSignal: true, isRequired: false, transformFunction: null }, resetToDefault: { classPropertyName: "resetToDefault", publicName: "resetToDefault", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, showAutoMode: { classPropertyName: "showAutoMode", publicName: "showAutoMode", isSignal: true, isRequired: false, transformFunction: null }, autoModeActive: { classPropertyName: "autoModeActive", publicName: "autoModeActive", isSignal: true, isRequired: false, transformFunction: null }, autoModeDisabled: { classPropertyName: "autoModeDisabled", publicName: "autoModeDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { autoModeChange: "autoModeChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AggregationPickerComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "@if (layout() === 'dropdown') {\n  <div\n    class=\"dropdown\"\n    style=\"border: 0; margin-left: -1px\"\n    container=\"body\"\n    #dropdown=\"bs-dropdown\"\n    dropdown\n    [attr.data-cy]=\"'global-context--aggregation-picker'\"\n    [insideClick]=\"true\"\n    [isDisabled]=\"disabled()\"\n  >\n    <button\n      class=\"dropdown-toggle form-control p-t-0 p-b-0 l-h-1 d-flex a-i-center\"\n      [attr.aria-label]=\"currentText() | translate\"\n      tooltip=\"{{ (disabled() ? AGGREGATION_TEXTS.disabled : currentText()) | translate }}\"\n      placement=\"top\"\n      container=\"body\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-expanded]=\"dropdown.isOpen\"\n      type=\"button\"\n      [attr.data-cy]=\"'global-context--aggregation-picker-' + value()\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      dropdownToggle\n    >\n      <i\n        class=\"icon-14\"\n        [c8yIcon]=\"currentIcon()\"\n      ></i>\n      <span class=\"caret m-r-8 m-l-4\"></span>\n    </button>\n\n    <ul\n      class=\"dropdown-menu dropdown-menu-right--xs\"\n      role=\"listbox\"\n      *dropdownMenu\n    >\n      @for (aggregation of AGGREGATIONS; track aggregation.id || $index) {\n        @let isDisabled = aggregation.id ? disabledAggregations()[aggregation.id] : false;\n        <li\n          [class.active]=\"aggregation.id === value()\"\n          [class.disabled]=\"isDisabled\"\n        >\n          <button\n            class=\"\"\n            [attr.aria-selected]=\"aggregation.id === value()\"\n            role=\"option\"\n            (click)=\"selectAggregation(aggregation.id); dropdown.isOpen = false\"\n            [disabled]=\"isDisabled\"\n            [attr.data-cy]=\"'global-context--aggregation-picker-input-' + aggregation.id\"\n          >\n            <i\n              class=\"icon-14\"\n              [c8yIcon]=\"\n                aggregation.id ? AGGREGATION_ICONS[aggregation.id] : AGGREGATION_ICONS.undefined\n              \"\n            ></i>\n            <span>{{ aggregation.title | translate }}</span>\n          </button>\n        </li>\n      }\n    </ul>\n  </div>\n}\n\n@if (layout() === 'radio') {\n  <div\n    class=\"radio-group d-flex-md a-i-center gap-16\"\n    [attr.aria-label]=\"'Aggregation options' | translate\"\n    role=\"radiogroup\"\n  >\n    @for (aggregation of AGGREGATIONS; track aggregation.id || $index) {\n      @let isDisabled = aggregation.id ? disabledAggregations()[aggregation.id] : false;\n      <label\n        class=\"c8y-radio\"\n        [attr.data-cy]=\"'global-context--aggregation-picker-input-' + aggregation.id\"\n      >\n        <input\n          name=\"aggregation\"\n          role=\"radio\"\n          type=\"radio\"\n          [value]=\"aggregation.id\"\n          [checked]=\"aggregation.id === value()\"\n          [disabled]=\"isDisabled\"\n          (change)=\"selectAggregation(aggregation.id)\"\n        />\n        <span></span>\n        <i\n          class=\"icon-16 m-l-4\"\n          [c8yIcon]=\"\n            aggregation.id ? AGGREGATION_ICONS[aggregation.id] : AGGREGATION_ICONS.undefined\n          \"\n        ></i>\n        <span>{{ aggregation.title | translate }}</span>\n      </label>\n    }\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.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: BsDropdownModule }, { kind: "directive", type: i2$1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2$1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2$1.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "ngmodule", type: I18nModule }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "@if (layout() === 'dropdown') {\n  <div\n    class=\"dropdown\"\n    style=\"border: 0; margin-left: -1px\"\n    container=\"body\"\n    #dropdown=\"bs-dropdown\"\n    dropdown\n    [attr.data-cy]=\"'global-context--aggregation-picker'\"\n    [insideClick]=\"true\"\n    [isDisabled]=\"disabled()\"\n  >\n    <button\n      class=\"dropdown-toggle form-control p-t-0 p-b-0 l-h-1 d-flex a-i-center\"\n      [attr.aria-label]=\"currentText() | translate\"\n      tooltip=\"{{ (disabled() ? AGGREGATION_TEXTS.disabled : currentText()) | translate }}\"\n      placement=\"top\"\n      container=\"body\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-expanded]=\"dropdown.isOpen\"\n      type=\"button\"\n      [attr.data-cy]=\"'global-context--aggregation-picker-' + value()\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      dropdownToggle\n    >\n      <i\n        class=\"icon-14\"\n        [c8yIcon]=\"currentIcon()\"\n      ></i>\n      <span class=\"caret m-r-8 m-l-4\"></span>\n    </button>\n\n    <ul\n      class=\"dropdown-menu dropdown-menu-right--xs\"\n      role=\"listbox\"\n      *dropdownMenu\n    >\n      @for (aggregation of AVAILABLE_AGGREGATIONS(); track aggregation.id || $index) {\n        @let isAutoItem = aggregation.id === AUTO_ITEM_ID;\n        @let isDisabled =\n          isAutoItem\n            ? autoModeDisabled()\n            : aggregation.id\n              ? disabledAggregations()[aggregation.id]\n              : false;\n        <li\n          [class.active]=\"\n            isAutoItem ? autoModeActive() : !autoModeActive() && aggregation.id === value()\n          \"\n          [class.disabled]=\"isDisabled\"\n        >\n          <button\n            class=\"\"\n            [attr.aria-selected]=\"\n              isAutoItem ? autoModeActive() : !autoModeActive() && aggregation.id === value()\n            \"\n            role=\"option\"\n            (click)=\"selectAggregation(aggregation.id); dropdown.isOpen = false\"\n            [disabled]=\"isDisabled\"\n            [attr.data-cy]=\"'global-context--aggregation-picker-input-' + aggregation.id\"\n          >\n            <i\n              class=\"icon-14\"\n              [c8yIcon]=\"\n                isAutoItem\n                  ? AUTO_ICON\n                  : aggregation.id\n                    ? AGGREGATION_ICONS[aggregation.id]\n                    : AGGREGATION_ICONS.undefined\n              \"\n            ></i>\n            <span>{{ aggregation.title | translate }}</span>\n          </button>\n        </li>\n      }\n    </ul>\n  </div>\n}\n\n@if (layout() === 'radio') {\n  <div\n    class=\"radio-group d-flex-md a-i-center gap-16\"\n    [class.flex-wrap]=\"showAutoMode()\"\n    [attr.aria-label]=\"'Aggregation options' | translate\"\n    role=\"radiogroup\"\n  >\n    @for (aggregation of AVAILABLE_AGGREGATIONS(); track aggregation.id || $index) {\n      @let isAutoItem = aggregation.id === AUTO_ITEM_ID;\n      @let isDisabled =\n        isAutoItem\n          ? autoModeDisabled()\n          : aggregation.id\n            ? disabledAggregations()[aggregation.id]\n            : false;\n      @let isChecked =\n        isAutoItem ? autoModeActive() : !autoModeActive() && aggregation.id === value();\n      <label\n        class=\"c8y-radio\"\n        [class.disabled]=\"isDisabled\"\n        [attr.data-cy]=\"'global-context--aggregation-picker-input-' + aggregation.id\"\n      >\n        <input\n          name=\"aggregation\"\n          role=\"radio\"\n          type=\"radio\"\n          [value]=\"aggregation.id\"\n          [checked]=\"isChecked\"\n          [disabled]=\"isDisabled\"\n          (change)=\"selectAggregation(aggregation.id)\"\n        />\n        <span></span>\n        <i\n          class=\"icon-16 m-l-4\"\n          [c8yIcon]=\"\n            isAutoItem\n              ? AUTO_ICON\n              : aggregation.id\n                ? AGGREGATION_ICONS[aggregation.id]\n                : AGGREGATION_ICONS.undefined\n          \"\n          aria-hidden=\"true\"\n        ></i>\n        <span>{{ aggregation.title | translate }}</span>\n        @if (isAutoItem) {\n          <button\n            class=\"btn-help btn-help--sm m-l-4\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"AUTO_MODE_TOOLTIP | translate\"\n            placement=\"top\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n            [adaptivePosition]=\"true\"\n          ></button>\n        }\n      </label>\n    }\n\n    @if (showAutoMode() && autoModeActive()) {\n      <ng-content select=\"[autoAggregationOptions]\"></ng-content>\n    }\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.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: BsDropdownModule }, { kind: "directive", type: i2$1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2$1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2$1.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "ngmodule", type: I18nModule }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i3.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AggregationPickerComponent, decorators: [{
             type: Component,
@@ -2924,8 +3051,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             useExisting: forwardRef(() => AggregationPickerComponent),
                             multi: true
                         }
-                    ], standalone: true, imports: [TooltipModule, BsDropdownModule, I18nModule, IconDirective, FormsModule], template: "@if (layout() === 'dropdown') {\n  <div\n    class=\"dropdown\"\n    style=\"border: 0; margin-left: -1px\"\n    container=\"body\"\n    #dropdown=\"bs-dropdown\"\n    dropdown\n    [attr.data-cy]=\"'global-context--aggregation-picker'\"\n    [insideClick]=\"true\"\n    [isDisabled]=\"disabled()\"\n  >\n    <button\n      class=\"dropdown-toggle form-control p-t-0 p-b-0 l-h-1 d-flex a-i-center\"\n      [attr.aria-label]=\"currentText() | translate\"\n      tooltip=\"{{ (disabled() ? AGGREGATION_TEXTS.disabled : currentText()) | translate }}\"\n      placement=\"top\"\n      container=\"body\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-expanded]=\"dropdown.isOpen\"\n      type=\"button\"\n      [attr.data-cy]=\"'global-context--aggregation-picker-' + value()\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      dropdownToggle\n    >\n      <i\n        class=\"icon-14\"\n        [c8yIcon]=\"currentIcon()\"\n      ></i>\n      <span class=\"caret m-r-8 m-l-4\"></span>\n    </button>\n\n    <ul\n      class=\"dropdown-menu dropdown-menu-right--xs\"\n      role=\"listbox\"\n      *dropdownMenu\n    >\n      @for (aggregation of AGGREGATIONS; track aggregation.id || $index) {\n        @let isDisabled = aggregation.id ? disabledAggregations()[aggregation.id] : false;\n        <li\n          [class.active]=\"aggregation.id === value()\"\n          [class.disabled]=\"isDisabled\"\n        >\n          <button\n            class=\"\"\n            [attr.aria-selected]=\"aggregation.id === value()\"\n            role=\"option\"\n            (click)=\"selectAggregation(aggregation.id); dropdown.isOpen = false\"\n            [disabled]=\"isDisabled\"\n            [attr.data-cy]=\"'global-context--aggregation-picker-input-' + aggregation.id\"\n          >\n            <i\n              class=\"icon-14\"\n              [c8yIcon]=\"\n                aggregation.id ? AGGREGATION_ICONS[aggregation.id] : AGGREGATION_ICONS.undefined\n              \"\n            ></i>\n            <span>{{ aggregation.title | translate }}</span>\n          </button>\n        </li>\n      }\n    </ul>\n  </div>\n}\n\n@if (layout() === 'radio') {\n  <div\n    class=\"radio-group d-flex-md a-i-center gap-16\"\n    [attr.aria-label]=\"'Aggregation options' | translate\"\n    role=\"radiogroup\"\n  >\n    @for (aggregation of AGGREGATIONS; track aggregation.id || $index) {\n      @let isDisabled = aggregation.id ? disabledAggregations()[aggregation.id] : false;\n      <label\n        class=\"c8y-radio\"\n        [attr.data-cy]=\"'global-context--aggregation-picker-input-' + aggregation.id\"\n      >\n        <input\n          name=\"aggregation\"\n          role=\"radio\"\n          type=\"radio\"\n          [value]=\"aggregation.id\"\n          [checked]=\"aggregation.id === value()\"\n          [disabled]=\"isDisabled\"\n          (change)=\"selectAggregation(aggregation.id)\"\n        />\n        <span></span>\n        <i\n          class=\"icon-16 m-l-4\"\n          [c8yIcon]=\"\n            aggregation.id ? AGGREGATION_ICONS[aggregation.id] : AGGREGATION_ICONS.undefined\n          \"\n        ></i>\n        <span>{{ aggregation.title | translate }}</span>\n      </label>\n    }\n  </div>\n}\n" }]
-        }], propDecorators: { disabledAggregations: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledAggregations", required: false }] }], resetToDefault: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetToDefault", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }] } });
+                    ], standalone: true, imports: [TooltipModule, BsDropdownModule, I18nModule, IconDirective, FormsModule, PopoverModule], template: "@if (layout() === 'dropdown') {\n  <div\n    class=\"dropdown\"\n    style=\"border: 0; margin-left: -1px\"\n    container=\"body\"\n    #dropdown=\"bs-dropdown\"\n    dropdown\n    [attr.data-cy]=\"'global-context--aggregation-picker'\"\n    [insideClick]=\"true\"\n    [isDisabled]=\"disabled()\"\n  >\n    <button\n      class=\"dropdown-toggle form-control p-t-0 p-b-0 l-h-1 d-flex a-i-center\"\n      [attr.aria-label]=\"currentText() | translate\"\n      tooltip=\"{{ (disabled() ? AGGREGATION_TEXTS.disabled : currentText()) | translate }}\"\n      placement=\"top\"\n      container=\"body\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-expanded]=\"dropdown.isOpen\"\n      type=\"button\"\n      [attr.data-cy]=\"'global-context--aggregation-picker-' + value()\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      dropdownToggle\n    >\n      <i\n        class=\"icon-14\"\n        [c8yIcon]=\"currentIcon()\"\n      ></i>\n      <span class=\"caret m-r-8 m-l-4\"></span>\n    </button>\n\n    <ul\n      class=\"dropdown-menu dropdown-menu-right--xs\"\n      role=\"listbox\"\n      *dropdownMenu\n    >\n      @for (aggregation of AVAILABLE_AGGREGATIONS(); track aggregation.id || $index) {\n        @let isAutoItem = aggregation.id === AUTO_ITEM_ID;\n        @let isDisabled =\n          isAutoItem\n            ? autoModeDisabled()\n            : aggregation.id\n              ? disabledAggregations()[aggregation.id]\n              : false;\n        <li\n          [class.active]=\"\n            isAutoItem ? autoModeActive() : !autoModeActive() && aggregation.id === value()\n          \"\n          [class.disabled]=\"isDisabled\"\n        >\n          <button\n            class=\"\"\n            [attr.aria-selected]=\"\n              isAutoItem ? autoModeActive() : !autoModeActive() && aggregation.id === value()\n            \"\n            role=\"option\"\n            (click)=\"selectAggregation(aggregation.id); dropdown.isOpen = false\"\n            [disabled]=\"isDisabled\"\n            [attr.data-cy]=\"'global-context--aggregation-picker-input-' + aggregation.id\"\n          >\n            <i\n              class=\"icon-14\"\n              [c8yIcon]=\"\n                isAutoItem\n                  ? AUTO_ICON\n                  : aggregation.id\n                    ? AGGREGATION_ICONS[aggregation.id]\n                    : AGGREGATION_ICONS.undefined\n              \"\n            ></i>\n            <span>{{ aggregation.title | translate }}</span>\n          </button>\n        </li>\n      }\n    </ul>\n  </div>\n}\n\n@if (layout() === 'radio') {\n  <div\n    class=\"radio-group d-flex-md a-i-center gap-16\"\n    [class.flex-wrap]=\"showAutoMode()\"\n    [attr.aria-label]=\"'Aggregation options' | translate\"\n    role=\"radiogroup\"\n  >\n    @for (aggregation of AVAILABLE_AGGREGATIONS(); track aggregation.id || $index) {\n      @let isAutoItem = aggregation.id === AUTO_ITEM_ID;\n      @let isDisabled =\n        isAutoItem\n          ? autoModeDisabled()\n          : aggregation.id\n            ? disabledAggregations()[aggregation.id]\n            : false;\n      @let isChecked =\n        isAutoItem ? autoModeActive() : !autoModeActive() && aggregation.id === value();\n      <label\n        class=\"c8y-radio\"\n        [class.disabled]=\"isDisabled\"\n        [attr.data-cy]=\"'global-context--aggregation-picker-input-' + aggregation.id\"\n      >\n        <input\n          name=\"aggregation\"\n          role=\"radio\"\n          type=\"radio\"\n          [value]=\"aggregation.id\"\n          [checked]=\"isChecked\"\n          [disabled]=\"isDisabled\"\n          (change)=\"selectAggregation(aggregation.id)\"\n        />\n        <span></span>\n        <i\n          class=\"icon-16 m-l-4\"\n          [c8yIcon]=\"\n            isAutoItem\n              ? AUTO_ICON\n              : aggregation.id\n                ? AGGREGATION_ICONS[aggregation.id]\n                : AGGREGATION_ICONS.undefined\n          \"\n          aria-hidden=\"true\"\n        ></i>\n        <span>{{ aggregation.title | translate }}</span>\n        @if (isAutoItem) {\n          <button\n            class=\"btn-help btn-help--sm m-l-4\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"AUTO_MODE_TOOLTIP | translate\"\n            placement=\"top\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n            [adaptivePosition]=\"true\"\n          ></button>\n        }\n      </label>\n    }\n\n    @if (showAutoMode() && autoModeActive()) {\n      <ng-content select=\"[autoAggregationOptions]\"></ng-content>\n    }\n  </div>\n}\n" }]
+        }], propDecorators: { disabledAggregations: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledAggregations", required: false }] }], resetToDefault: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetToDefault", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], showAutoMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAutoMode", required: false }] }], autoModeActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoModeActive", required: false }] }], autoModeDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoModeDisabled", required: false }] }], autoModeChange: [{ type: i0.Output, args: ["autoModeChange"] }] } });
 
 /**
  * Component for configuring history mode settings
@@ -2956,6 +3083,7 @@ class HistoryModeConfigurationControlsComponent {
     constructor() {
         this.AGGREGATION_TEXTS = AGGREGATION_TEXTS;
         this.DATE_FORMAT = 'medium';
+        this.AUTO_AGGREGATION_DATAPOINTS = AUTO_AGGREGATION_DATAPOINTS;
         this.errorMessages = {
             dateAfterRangeMax: gettext('This date is after the latest allowed date.'),
             dateBeforeRangeMin: gettext('This date is before the earliest allowed date.'),
@@ -2964,10 +3092,11 @@ class HistoryModeConfigurationControlsComponent {
         };
         // Popover messages for translation extraction
         this.TIME_RANGE_PICKER_POPOVER = gettext('Specify the exact start and end date/time of the time period to analyse. This provides a static view of historical data within the selected timeframe.');
-        this.AGGREGATION_POPOVER = gettext("Groups data points into larger time intervals to simplify visualization and improve performance. 'None' shows raw data, while other options combine data points into minute, hour, or day groupings.");
+        this.AGGREGATION_POPOVER = AGGREGATION_POPOVER_TEXT;
         this.destroyRef = inject(DestroyRef);
         this.formBuilder = inject(FormBuilder);
         this.aggregationPickerService = inject(AggregationPickerService);
+        this.timeSeriesMigrationService = inject(TimeSeriesMigrationService);
         this.settingsSignal = signal({
             showAutoRefresh: true,
             showTimeContext: true,
@@ -2979,14 +3108,35 @@ class HistoryModeConfigurationControlsComponent {
         this.disabledAggregations = signal({}, ...(ngDevMode ? [{ debugName: "disabledAggregations" }] : /* istanbul ignore next */ []));
         this.dateFromErrors = signal(null, ...(ngDevMode ? [{ debugName: "dateFromErrors" }] : /* istanbul ignore next */ []));
         this.dateToErrors = signal(null, ...(ngDevMode ? [{ debugName: "dateToErrors" }] : /* istanbul ignore next */ []));
+        /** Whether auto-aggregation mode is active. */
+        this.isAutoModeActive = signal(false, ...(ngDevMode ? [{ debugName: "isAutoModeActive" }] : /* istanbul ignore next */ []));
+        /** Whether the "Auto" option should be shown but disabled (greyed) for the current widget. */
+        this.autoModeDisabled = computed(() => !!this.settingsSignal().autoModeDisabled, ...(ngDevMode ? [{ debugName: "autoModeDisabled" }] : /* istanbul ignore next */ []));
+        /**
+         * The "Auto" 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 */ []));
+        /** Popover text for the "Keep point count on zoom" checkbox. */
+        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.');
         this.currentForm = this.createForm();
+        this.lastProcessedFormValue = this.currentForm.value;
+        this.timeSeriesMigrationService
+            .isTimeSeriesMigrated()
+            .then(isMigrated => this.isTimeSeriesMigrated.set(isMigrated));
         this.currentForm.valueChanges
-            .pipe(takeUntilDestroyed(this.destroyRef), debounceTime(100))
+            .pipe(takeUntilDestroyed(this.destroyRef), 
+        // Typing into the datapoints number field gets a longer debounce so the context (and
+        // the charts consuming it) does not refresh on every keystroke.
+        debounce(formValue => timer(this.isDatapointsOnlyChange(formValue)
+            ? TIMING.TYPING_DEBOUNCE
+            : TIMING.FORM_DEBOUNCE)))
             .subscribe(formValue => {
             this.handleFormValueChange(formValue);
+            this.lastProcessedFormValue = this.currentForm.value;
         });
         this.currentForm.statusChanges
-            .pipe(takeUntilDestroyed(this.destroyRef), debounceTime(100))
+            .pipe(takeUntilDestroyed(this.destroyRef), debounceTime(TIMING.FORM_DEBOUNCE))
             .subscribe(() => {
             this.updateErrorSignals();
             this.validationStatus.emit(this.currentForm.valid);
@@ -2994,11 +3144,47 @@ class HistoryModeConfigurationControlsComponent {
         this.updateErrorSignals();
         this.validationStatus.emit(this.currentForm.valid);
     }
+    /** Called by the aggregation picker's (autoModeChange) output. */
+    onAutoModeChange(isAuto) {
+        this.currentForm.patchValue({ autoAggregationEnabled: isAuto });
+        this.isAutoModeActive.set(isAuto);
+    }
     setDateToNow() {
         const now = new Date();
         now.setSeconds(0, 0);
         this.currentForm.get('dateTimeContext')?.get('dateTo')?.setValue(now.toISOString());
     }
+    /**
+     * Commits a valid "Points per chart" value when the user leaves the field: snaps
+     * an out-of-range number back into [MIN, MAX], and restores the last applied value when the
+     * field was left empty. Called on the number input's change/blur — while typing, invalid or
+     * empty values are simply not emitted (see handleFormValueChange).
+     */
+    clampDatapoints() {
+        const control = this.currentForm.get('autoAggregationDatapoints');
+        const value = control?.value;
+        if (value === null || value === undefined || Number.isNaN(value)) {
+            const lastApplied = this.contextState()?.autoAggregation?.datapoints ?? AUTO_AGGREGATION_DATAPOINTS.DEFAULT;
+            control?.setValue(this.clampToDatapointsBounds(lastApplied));
+            return;
+        }
+        const clamped = this.clampToDatapointsBounds(value);
+        if (clamped !== value) {
+            control?.setValue(clamped);
+        }
+    }
+    clampToDatapointsBounds(value) {
+        return Math.min(AUTO_AGGREGATION_DATAPOINTS.MAX, Math.max(AUTO_AGGREGATION_DATAPOINTS.MIN, value));
+    }
+    /**
+     * Whether `formValue` differs from the last processed form value only in the
+     * `autoAggregationDatapoints` field, i.e. the user is typing into the datapoints input.
+     */
+    isDatapointsOnlyChange(formValue) {
+        const previous = this.lastProcessedFormValue;
+        return (formValue.autoAggregationDatapoints !== previous.autoAggregationDatapoints &&
+            isEqual({ ...formValue, autoAggregationDatapoints: null }, { ...previous, autoAggregationDatapoints: null }));
+    }
     updateErrorSignals() {
         const dateTimeContext = this.currentForm?.get('dateTimeContext');
         const dateFromControl = dateTimeContext?.get('dateFrom');
@@ -3018,7 +3204,7 @@ class HistoryModeConfigurationControlsComponent {
         this.dateToErrors.set(Object.keys(dateToControlErrors).length > 0 ? dateToControlErrors : null);
     }
     handleFormValueChange(formValue) {
-        const { dateTimeContext, aggregation } = formValue;
+        const { dateTimeContext, aggregation, autoAggregationEnabled, autoAggregationDatapoints, autoAggregationKeepDataOnZoomIn } = formValue;
         if (!dateTimeContext) {
             return;
         }
@@ -3032,18 +3218,37 @@ class HistoryModeConfigurationControlsComponent {
         // Calculate disabled aggregations regardless of validation
         // This allows us to disable aggregations even for edge cases like dateFrom === dateTo
         dateTimeContext.interval = TIME_INTERVAL.CUSTOM;
-        const { selectedAggregation, disabledAggregations } = this.aggregationPickerService.calculateAggregation([new Date(dateTimeContext.dateFrom), new Date(dateTimeContext.dateTo)], aggregation ?? null);
+        const { selectedAggregation, disabledAggregations } = this.aggregationPickerService.calculateAggregation([new Date(dateTimeContext.dateFrom), new Date(dateTimeContext.dateTo)], autoAggregationEnabled ? null : (aggregation ?? null));
         this.disabledAggregations.set(disabledAggregations);
         // Skip emission if validation fails (e.g., dateFrom > dateTo), but still update UI
         if (!this.isValidDateTimeContext(dateTimeContext)) {
             return;
         }
-        if (selectedAggregation !== undefined) {
+        if (autoAggregationEnabled && !this.isValidDatapoints(autoAggregationDatapoints)) {
+            return;
+        }
+        // Only auto-update the standard aggregation when not in auto mode
+        if (!autoAggregationEnabled && selectedAggregation !== undefined) {
             this.currentForm.patchValue({ aggregation: selectedAggregation }, { emitEvent: false });
         }
-        const emission = structuredClone(this.currentForm.value);
+        const emission = {
+            dateTimeContext: structuredClone(dateTimeContext),
+            aggregation: autoAggregationEnabled ? null : (this.currentForm.value.aggregation ?? null),
+            autoAggregation: autoAggregationEnabled
+                ? {
+                    datapoints: autoAggregationDatapoints,
+                    keepDataOnZoomIn: autoAggregationKeepDataOnZoomIn ?? true
+                }
+                : null
+        };
         this.contextChange.emit(emission);
     }
+    isValidDatapoints(value) {
+        return (typeof value === 'number' &&
+            !Number.isNaN(value) &&
+            value >= AUTO_AGGREGATION_DATAPOINTS.MIN &&
+            value <= AUTO_AGGREGATION_DATAPOINTS.MAX);
+    }
     isValidDateTimeContext(dateTimeContext) {
         if (!dateTimeContext) {
             return false;
@@ -3067,8 +3272,12 @@ class HistoryModeConfigurationControlsComponent {
                     dateFrom: defaults.dateFrom,
                     dateTo: defaults.dateTo
                 },
-                aggregation: null
+                aggregation: null,
+                autoAggregationEnabled: false,
+                autoAggregationDatapoints: AUTO_AGGREGATION_DATAPOINTS.DEFAULT,
+                autoAggregationKeepDataOnZoomIn: true
             }, { emitEvent: false });
+            this.lastProcessedFormValue = this.currentForm.value;
             this.disabledAggregations.set({});
             this.validationStatus.emit(this.currentForm.valid);
             return;
@@ -3094,10 +3303,15 @@ class HistoryModeConfigurationControlsComponent {
         clonedContext.dateTo = normalizedTo.toISOString();
         this.currentForm.patchValue({
             dateTimeContext: clonedContext,
-            aggregation: ctx.aggregation ?? null
+            aggregation: ctx.autoAggregation ? null : (ctx.aggregation ?? null),
+            autoAggregationEnabled: !!ctx.autoAggregation,
+            autoAggregationDatapoints: this.clampToDatapointsBounds(ctx.autoAggregation?.datapoints ?? AUTO_AGGREGATION_DATAPOINTS.DEFAULT),
+            autoAggregationKeepDataOnZoomIn: ctx.autoAggregation?.keepDataOnZoomIn ?? true
         }, { emitEvent: false });
+        this.lastProcessedFormValue = this.currentForm.value;
+        this.isAutoModeActive.set(!!ctx.autoAggregation);
         // Update disabled aggregations but DON'T override the value
-        const { disabledAggregations } = this.aggregationPickerService.calculateAggregation([new Date(clonedContext.dateFrom), new Date(clonedContext.dateTo)], ctx.aggregation ?? null);
+        const { disabledAggregations } = this.aggregationPickerService.calculateAggregation([new Date(clonedContext.dateFrom), new Date(clonedContext.dateTo)], ctx.autoAggregation ? null : (ctx.aggregation ?? null));
         this.disabledAggregations.set(disabledAggregations);
         this.validationStatus.emit(this.currentForm.valid);
     }
@@ -3112,7 +3326,13 @@ class HistoryModeConfigurationControlsComponent {
         });
         return this.formBuilder.group({
             dateTimeContext,
-            aggregation: this.formBuilder.control(null)
+            aggregation: this.formBuilder.control(null),
+            autoAggregationEnabled: this.formBuilder.control(false),
+            autoAggregationDatapoints: this.formBuilder.control(AUTO_AGGREGATION_DATAPOINTS.DEFAULT, [
+                Validators.min(AUTO_AGGREGATION_DATAPOINTS.MIN),
+                Validators.max(AUTO_AGGREGATION_DATAPOINTS.MAX)
+            ]),
+            autoAggregationKeepDataOnZoomIn: this.formBuilder.control(true)
         });
     }
     getDefaultDateRange() {
@@ -3143,7 +3363,7 @@ class HistoryModeConfigurationControlsComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: HistoryModeConfigurationControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: HistoryModeConfigurationControlsComponent, isStandalone: true, selector: "c8y-history-mode-configuration-controls", inputs: { settings: "settings", context: "context" }, outputs: { contextChange: "contextChange", validationStatus: "validationStatus" }, ngImport: i0, template: "@if (currentForm) {\n  @let SHOW_TIME_CONTEXT = settings.showTimeContext;\n  @let SHOW_AGGREGATION = settings.showAggregation;\n\n  <form [formGroup]=\"currentForm\">\n    <div class=\"content-flex-100\">\n      <div\n        class=\"col-4\"\n        [ngClass]=\"{ 'm-b-8': !SHOW_AGGREGATION }\"\n      >\n        @if (SHOW_TIME_CONTEXT) {\n          @let dateTimeContext = currentForm.get('dateTimeContext');\n          @let tempDateFromValue = dateTimeContext.get('dateFrom')?.value;\n          @let tempDateToValue = dateTimeContext.get('dateTo')?.value;\n          @let fromErrors = dateFromErrors();\n          @let toErrors = dateToErrors();\n\n          <fieldset class=\"c8y-fieldset\">\n            <legend>\n              <div class=\"standalone btn-icon-dot__item time-context m-r-4\">\n                <i\n                  class=\"\"\n                  [c8yIcon]=\"'calendar'\"\n                ></i>\n              </div>\n              {{ 'Date & time range' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"TIME_RANGE_PICKER_POPOVER | translate\"\n                placement=\"top\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n                [adaptivePosition]=\"true\"\n              ></button>\n            </legend>\n            <c8y-form-group class=\"content-flex-58 d-flex a-i-center m-b-0 p-t-16\">\n              <c8y-form-group\n                [class.has-error]=\"fromErrors\"\n                class=\"form-group-sm d-flex a-i-center col-5 flex-wrap\"\n              >\n                <label\n                  class=\"m-b-sm-0 m-r-8 text-nowrap\"\n                  style=\"min-width: 30px\"\n                  [title]=\"'From`date`' | translate\"\n                  for=\"dateFrom\"\n                  translate\n                >\n                  From`date`\n                </label>\n                <c8y-date-time-picker\n                  [class.has-error]=\"fromErrors\"\n                  id=\"dateFrom\"\n                  [maxDate]=\"tempDateToValue\"\n                  [placeholder]=\"'From`date`' | translate\"\n                  [formControl]=\"dateTimeContext.get('dateFrom')\"\n                ></c8y-date-time-picker>\n                <c8y-messages [show]=\"fromErrors\">\n                  <c8y-message\n                    name=\"dateAfterRangeMax\"\n                    [text]=\"errorMessages.dateAfterRangeMax | translate\"\n                  ></c8y-message>\n                  <c8y-message\n                    name=\"invalidDateTime\"\n                    [text]=\"errorMessages.invalidDateTime | translate\"\n                  ></c8y-message>\n                  <c8y-message\n                    name=\"invalidDateRange\"\n                    [text]=\"errorMessages.invalidDateRange | translate\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n\n              <c8y-form-group\n                [class.has-error]=\"toErrors\"\n                class=\"form-group-sm d-flex flex-wrap col-7 a-i-center\"\n              >\n                <label\n                  class=\"m-b-sm-0 text-nowrap m-r-8\"\n                  style=\"min-width: 30px\"\n                  [title]=\"'To`date`' | translate\"\n                  for=\"dateTo\"\n                  translate\n                >\n                  To`date`\n                </label>\n                <c8y-date-time-picker\n                  [class.has-error]=\"toErrors\"\n                  id=\"dateTo\"\n                  [minDate]=\"tempDateFromValue\"\n                  [placeholder]=\"'To`date`' | translate\"\n                  [formControl]=\"dateTimeContext.get('dateTo')\"\n                ></c8y-date-time-picker>\n                <button\n                  class=\"btn btn-sm btn-default m-l-4\"\n                  [title]=\"'Set to current time' | translate\"\n                  type=\"button\"\n                  (click)=\"setDateToNow()\"\n                >\n                  <i\n                    class=\"m-r-4\"\n                    [c8yIcon]=\"'clock-o'\"\n                  ></i>\n                  {{ 'Now' | translate }}\n                </button>\n                <c8y-messages [show]=\"toErrors\">\n                  <c8y-message\n                    name=\"dateBeforeRangeMin\"\n                    [text]=\"errorMessages.dateBeforeRangeMin | translate\"\n                  ></c8y-message>\n                  <c8y-message\n                    name=\"invalidDateTime\"\n                    [text]=\"errorMessages.invalidDateTime | translate\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n            </c8y-form-group>\n          </fieldset>\n        }\n      </div>\n      <div class=\"col-\">\n        @if (SHOW_AGGREGATION) {\n          @let selectedAggregation = currentForm.get('aggregation')?.value;\n\n          <fieldset class=\"c8y-fieldset\">\n            <legend>\n              <div class=\"standalone btn-icon-dot__item aggregation m-r-4\">\n                <i [c8yIcon]=\"'input'\"></i>\n              </div>\n              {{ 'Aggregation' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"AGGREGATION_POPOVER | translate\"\n                placement=\"top\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n                [adaptivePosition]=\"true\"\n              ></button>\n            </legend>\n            <c8y-form-group class=\"p-t-16 p-b-16 m-b-4\">\n              <c8y-aggregation-picker\n                formControlName=\"aggregation\"\n                [resetToDefault]=\"true\"\n                [disabledAggregations]=\"disabledAggregations()\"\n                [layout]=\"'radio'\"\n              ></c8y-aggregation-picker>\n            </c8y-form-group>\n          </fieldset>\n        }\n      </div>\n    </div>\n  </form>\n}\n", dependencies: [{ kind: "ngmodule", type: I18nModule }, { kind: "directive", type: i4.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i2$2.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: AggregationPickerComponent, selector: "c8y-aggregation-picker", inputs: ["disabledAggregations", "resetToDefault", "layout"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "ngmodule", type: DateTimePickerModule }, { kind: "component", type: i4.DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: HistoryModeConfigurationControlsComponent, isStandalone: true, selector: "c8y-history-mode-configuration-controls", inputs: { settings: "settings", context: "context" }, outputs: { contextChange: "contextChange", validationStatus: "validationStatus" }, ngImport: i0, template: "@if (currentForm) {\n  @let SHOW_TIME_CONTEXT = settings.showTimeContext;\n  @let SHOW_AGGREGATION = settings.showAggregation;\n\n  <form [formGroup]=\"currentForm\">\n    <div class=\"content-flex-100\">\n      <div\n        class=\"col-4\"\n        [ngClass]=\"{ 'm-b-8': !SHOW_AGGREGATION }\"\n      >\n        @if (SHOW_TIME_CONTEXT) {\n          @let dateTimeContext = currentForm.get('dateTimeContext');\n          @let tempDateFromValue = dateTimeContext.get('dateFrom')?.value;\n          @let tempDateToValue = dateTimeContext.get('dateTo')?.value;\n          @let fromErrors = dateFromErrors();\n          @let toErrors = dateToErrors();\n\n          <fieldset class=\"c8y-fieldset\">\n            <legend>\n              <div class=\"standalone btn-icon-dot__item time-context m-r-4\">\n                <i\n                  class=\"\"\n                  [c8yIcon]=\"'calendar'\"\n                ></i>\n              </div>\n              {{ 'Date & time range' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"TIME_RANGE_PICKER_POPOVER | translate\"\n                placement=\"top\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n                [adaptivePosition]=\"true\"\n              ></button>\n            </legend>\n            <c8y-form-group class=\"content-flex-58 d-flex a-i-center m-b-0 p-t-16\">\n              <c8y-form-group\n                [class.has-error]=\"fromErrors\"\n                class=\"form-group-sm d-flex a-i-center col-5 flex-wrap\"\n              >\n                <label\n                  class=\"m-b-sm-0 m-r-8 text-nowrap\"\n                  style=\"min-width: 30px\"\n                  [title]=\"'From`date`' | translate\"\n                  for=\"dateFrom\"\n                  translate\n                >\n                  From`date`\n                </label>\n                <c8y-date-time-picker\n                  [class.has-error]=\"fromErrors\"\n                  id=\"dateFrom\"\n                  [maxDate]=\"tempDateToValue\"\n                  [placeholder]=\"'From`date`' | translate\"\n                  [formControl]=\"dateTimeContext.get('dateFrom')\"\n                ></c8y-date-time-picker>\n                <c8y-messages [show]=\"fromErrors\">\n                  <c8y-message\n                    name=\"dateAfterRangeMax\"\n                    [text]=\"errorMessages.dateAfterRangeMax | translate\"\n                  ></c8y-message>\n                  <c8y-message\n                    name=\"invalidDateTime\"\n                    [text]=\"errorMessages.invalidDateTime | translate\"\n                  ></c8y-message>\n                  <c8y-message\n                    name=\"invalidDateRange\"\n                    [text]=\"errorMessages.invalidDateRange | translate\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n\n              <c8y-form-group\n                [class.has-error]=\"toErrors\"\n                class=\"form-group-sm d-flex col-7 a-i-center\"\n              >\n                <label\n                  class=\"m-b-sm-0 text-nowrap m-r-8\"\n                  style=\"min-width: 30px\"\n                  [title]=\"'To`date`' | translate\"\n                  for=\"dateTo\"\n                  translate\n                >\n                  To`date`\n                </label>\n                <c8y-date-time-picker\n                  [class.has-error]=\"toErrors\"\n                  id=\"dateTo\"\n                  [minDate]=\"tempDateFromValue\"\n                  [placeholder]=\"'To`date`' | translate\"\n                  [formControl]=\"dateTimeContext.get('dateTo')\"\n                ></c8y-date-time-picker>\n                <button\n                  class=\"btn btn-sm btn-default m-l-4\"\n                  [title]=\"'Set to current time' | translate\"\n                  type=\"button\"\n                  (click)=\"setDateToNow()\"\n                >\n                  <i\n                    class=\"m-r-4\"\n                    [c8yIcon]=\"'clock-o'\"\n                  ></i>\n                  {{ 'Now' | translate }}\n                </button>\n                <c8y-messages [show]=\"toErrors\">\n                  <c8y-message\n                    name=\"dateBeforeRangeMin\"\n                    [text]=\"errorMessages.dateBeforeRangeMin | translate\"\n                  ></c8y-message>\n                  <c8y-message\n                    name=\"invalidDateTime\"\n                    [text]=\"errorMessages.invalidDateTime | translate\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n            </c8y-form-group>\n          </fieldset>\n        }\n      </div>\n      <div class=\"col-8\">\n        @if (SHOW_AGGREGATION) {\n          <fieldset class=\"c8y-fieldset\">\n            <legend>\n              <div class=\"standalone btn-icon-dot__item aggregation m-r-4\">\n                <i [c8yIcon]=\"'input'\"></i>\n              </div>\n              {{ 'Aggregation' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"AGGREGATION_POPOVER | translate\"\n                placement=\"top\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n                [adaptivePosition]=\"true\"\n              ></button>\n            </legend>\n\n            <c8y-form-group class=\"p-t-16 m-b-4 p-b-16\">\n              <c8y-aggregation-picker\n                formControlName=\"aggregation\"\n                [layout]=\"'radio'\"\n                [resetToDefault]=\"true\"\n                [showAutoMode]=\"isTimeSeriesMigrated()\"\n                [autoModeActive]=\"isAutoModeActive()\"\n                [autoModeDisabled]=\"autoModeDisabled()\"\n                [disabledAggregations]=\"disabledAggregations()\"\n                (autoModeChange)=\"onAutoModeChange($event)\"\n              >\n                <div\n                  class=\"d-flex a-i-center gap-16 flex-wrap\"\n                  autoAggregationOptions\n                >\n                  <div class=\"d-flex a-i-center\">\n                    <label\n                      class=\"m-b-0 m-r-8 text-nowrap\"\n                      for=\"autoAggregationDatapoints\"\n                    >\n                      {{ 'Points per chart' | translate }}\n                    </label>\n                    @let datapointsRangeText =\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                    <c8y-form-group class=\"form-group-sm m-b-0\">\n                      <input\n                        class=\"form-control input-sm\"\n                        style=\"width: 60px\"\n                        [attr.title]=\"datapointsRangeText\"\n                        [attr.aria-label]=\"'Points per chart' | translate\"\n                        id=\"autoAggregationDatapoints\"\n                        type=\"number\"\n                        [min]=\"AUTO_AGGREGATION_DATAPOINTS.MIN\"\n                        [max]=\"AUTO_AGGREGATION_DATAPOINTS.MAX\"\n                        [step]=\"AUTO_AGGREGATION_DATAPOINTS.STEP\"\n                        [formControl]=\"currentForm.controls.autoAggregationDatapoints\"\n                        (change)=\"clampDatapoints()\"\n                        data-cy=\"global-context--auto-aggregation-datapoints-input\"\n                      />\n                      @let datapointsErrors = currentForm.get('autoAggregationDatapoints')?.errors;\n                      <c8y-messages\n                        class=\"m-t-4\"\n                        [show]=\"datapointsErrors\"\n                      >\n                        <c8y-message\n                          name=\"min\"\n                          [text]=\"datapointsRangeText\"\n                        ></c8y-message>\n                        <c8y-message\n                          name=\"max\"\n                          [text]=\"datapointsRangeText\"\n                        ></c8y-message>\n                      </c8y-messages>\n                    </c8y-form-group>\n                  </div>\n                  <label\n                    class=\"c8y-switch m-b-0\"\n                    [title]=\"'Keep point count on zoom' | translate\"\n                  >\n                    <input\n                      type=\"checkbox\"\n                      [formControl]=\"currentForm.controls.autoAggregationKeepDataOnZoomIn\"\n                      data-cy=\"global-context--auto-aggregation-keep-data-on-zoom-in\"\n                    />\n                    <span></span>\n                    <span>{{ '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                      [adaptivePosition]=\"true\"\n                    ></button>\n                  </label>\n                </div>\n              </c8y-aggregation-picker>\n            </c8y-form-group>\n          </fieldset>\n        }\n      </div>\n    </div>\n  </form>\n}\n", dependencies: [{ kind: "ngmodule", type: I18nModule }, { kind: "directive", type: i4.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i3.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "ngmodule", type: DateTimePickerModule }, { kind: "component", type: i4.DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AggregationPickerComponent, selector: "c8y-aggregation-picker", inputs: ["disabledAggregations", "resetToDefault", "layout", "showAutoMode", "autoModeActive", "autoModeDisabled"], outputs: ["autoModeChange"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: HistoryModeConfigurationControlsComponent, decorators: [{
             type: Component,
@@ -3156,12 +3376,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         FormsModule,
                         PopoverModule,
                         FormGroupComponent,
-                        AggregationPickerComponent,
                         MessagesComponent,
                         MessageDirective,
                         DateTimePickerModule,
-                        NgClass
-                    ], template: "@if (currentForm) {\n  @let SHOW_TIME_CONTEXT = settings.showTimeContext;\n  @let SHOW_AGGREGATION = settings.showAggregation;\n\n  <form [formGroup]=\"currentForm\">\n    <div class=\"content-flex-100\">\n      <div\n        class=\"col-4\"\n        [ngClass]=\"{ 'm-b-8': !SHOW_AGGREGATION }\"\n      >\n        @if (SHOW_TIME_CONTEXT) {\n          @let dateTimeContext = currentForm.get('dateTimeContext');\n          @let tempDateFromValue = dateTimeContext.get('dateFrom')?.value;\n          @let tempDateToValue = dateTimeContext.get('dateTo')?.value;\n          @let fromErrors = dateFromErrors();\n          @let toErrors = dateToErrors();\n\n          <fieldset class=\"c8y-fieldset\">\n            <legend>\n              <div class=\"standalone btn-icon-dot__item time-context m-r-4\">\n                <i\n                  class=\"\"\n                  [c8yIcon]=\"'calendar'\"\n                ></i>\n              </div>\n              {{ 'Date & time range' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"TIME_RANGE_PICKER_POPOVER | translate\"\n                placement=\"top\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n                [adaptivePosition]=\"true\"\n              ></button>\n            </legend>\n            <c8y-form-group class=\"content-flex-58 d-flex a-i-center m-b-0 p-t-16\">\n              <c8y-form-group\n                [class.has-error]=\"fromErrors\"\n                class=\"form-group-sm d-flex a-i-center col-5 flex-wrap\"\n              >\n                <label\n                  class=\"m-b-sm-0 m-r-8 text-nowrap\"\n                  style=\"min-width: 30px\"\n                  [title]=\"'From`date`' | translate\"\n                  for=\"dateFrom\"\n                  translate\n                >\n                  From`date`\n                </label>\n                <c8y-date-time-picker\n                  [class.has-error]=\"fromErrors\"\n                  id=\"dateFrom\"\n                  [maxDate]=\"tempDateToValue\"\n                  [placeholder]=\"'From`date`' | translate\"\n                  [formControl]=\"dateTimeContext.get('dateFrom')\"\n                ></c8y-date-time-picker>\n                <c8y-messages [show]=\"fromErrors\">\n                  <c8y-message\n                    name=\"dateAfterRangeMax\"\n                    [text]=\"errorMessages.dateAfterRangeMax | translate\"\n                  ></c8y-message>\n                  <c8y-message\n                    name=\"invalidDateTime\"\n                    [text]=\"errorMessages.invalidDateTime | translate\"\n                  ></c8y-message>\n                  <c8y-message\n                    name=\"invalidDateRange\"\n                    [text]=\"errorMessages.invalidDateRange | translate\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n\n              <c8y-form-group\n                [class.has-error]=\"toErrors\"\n                class=\"form-group-sm d-flex flex-wrap col-7 a-i-center\"\n              >\n                <label\n                  class=\"m-b-sm-0 text-nowrap m-r-8\"\n                  style=\"min-width: 30px\"\n                  [title]=\"'To`date`' | translate\"\n                  for=\"dateTo\"\n                  translate\n                >\n                  To`date`\n                </label>\n                <c8y-date-time-picker\n                  [class.has-error]=\"toErrors\"\n                  id=\"dateTo\"\n                  [minDate]=\"tempDateFromValue\"\n                  [placeholder]=\"'To`date`' | translate\"\n                  [formControl]=\"dateTimeContext.get('dateTo')\"\n                ></c8y-date-time-picker>\n                <button\n                  class=\"btn btn-sm btn-default m-l-4\"\n                  [title]=\"'Set to current time' | translate\"\n                  type=\"button\"\n                  (click)=\"setDateToNow()\"\n                >\n                  <i\n                    class=\"m-r-4\"\n                    [c8yIcon]=\"'clock-o'\"\n                  ></i>\n                  {{ 'Now' | translate }}\n                </button>\n                <c8y-messages [show]=\"toErrors\">\n                  <c8y-message\n                    name=\"dateBeforeRangeMin\"\n                    [text]=\"errorMessages.dateBeforeRangeMin | translate\"\n                  ></c8y-message>\n                  <c8y-message\n                    name=\"invalidDateTime\"\n                    [text]=\"errorMessages.invalidDateTime | translate\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n            </c8y-form-group>\n          </fieldset>\n        }\n      </div>\n      <div class=\"col-\">\n        @if (SHOW_AGGREGATION) {\n          @let selectedAggregation = currentForm.get('aggregation')?.value;\n\n          <fieldset class=\"c8y-fieldset\">\n            <legend>\n              <div class=\"standalone btn-icon-dot__item aggregation m-r-4\">\n                <i [c8yIcon]=\"'input'\"></i>\n              </div>\n              {{ 'Aggregation' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"AGGREGATION_POPOVER | translate\"\n                placement=\"top\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n                [adaptivePosition]=\"true\"\n              ></button>\n            </legend>\n            <c8y-form-group class=\"p-t-16 p-b-16 m-b-4\">\n              <c8y-aggregation-picker\n                formControlName=\"aggregation\"\n                [resetToDefault]=\"true\"\n                [disabledAggregations]=\"disabledAggregations()\"\n                [layout]=\"'radio'\"\n              ></c8y-aggregation-picker>\n            </c8y-form-group>\n          </fieldset>\n        }\n      </div>\n    </div>\n  </form>\n}\n" }]
+                        NgClass,
+                        AggregationPickerComponent
+                    ], template: "@if (currentForm) {\n  @let SHOW_TIME_CONTEXT = settings.showTimeContext;\n  @let SHOW_AGGREGATION = settings.showAggregation;\n\n  <form [formGroup]=\"currentForm\">\n    <div class=\"content-flex-100\">\n      <div\n        class=\"col-4\"\n        [ngClass]=\"{ 'm-b-8': !SHOW_AGGREGATION }\"\n      >\n        @if (SHOW_TIME_CONTEXT) {\n          @let dateTimeContext = currentForm.get('dateTimeContext');\n          @let tempDateFromValue = dateTimeContext.get('dateFrom')?.value;\n          @let tempDateToValue = dateTimeContext.get('dateTo')?.value;\n          @let fromErrors = dateFromErrors();\n          @let toErrors = dateToErrors();\n\n          <fieldset class=\"c8y-fieldset\">\n            <legend>\n              <div class=\"standalone btn-icon-dot__item time-context m-r-4\">\n                <i\n                  class=\"\"\n                  [c8yIcon]=\"'calendar'\"\n                ></i>\n              </div>\n              {{ 'Date & time range' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"TIME_RANGE_PICKER_POPOVER | translate\"\n                placement=\"top\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n                [adaptivePosition]=\"true\"\n              ></button>\n            </legend>\n            <c8y-form-group class=\"content-flex-58 d-flex a-i-center m-b-0 p-t-16\">\n              <c8y-form-group\n                [class.has-error]=\"fromErrors\"\n                class=\"form-group-sm d-flex a-i-center col-5 flex-wrap\"\n              >\n                <label\n                  class=\"m-b-sm-0 m-r-8 text-nowrap\"\n                  style=\"min-width: 30px\"\n                  [title]=\"'From`date`' | translate\"\n                  for=\"dateFrom\"\n                  translate\n                >\n                  From`date`\n                </label>\n                <c8y-date-time-picker\n                  [class.has-error]=\"fromErrors\"\n                  id=\"dateFrom\"\n                  [maxDate]=\"tempDateToValue\"\n                  [placeholder]=\"'From`date`' | translate\"\n                  [formControl]=\"dateTimeContext.get('dateFrom')\"\n                ></c8y-date-time-picker>\n                <c8y-messages [show]=\"fromErrors\">\n                  <c8y-message\n                    name=\"dateAfterRangeMax\"\n                    [text]=\"errorMessages.dateAfterRangeMax | translate\"\n                  ></c8y-message>\n                  <c8y-message\n                    name=\"invalidDateTime\"\n                    [text]=\"errorMessages.invalidDateTime | translate\"\n                  ></c8y-message>\n                  <c8y-message\n                    name=\"invalidDateRange\"\n                    [text]=\"errorMessages.invalidDateRange | translate\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n\n              <c8y-form-group\n                [class.has-error]=\"toErrors\"\n                class=\"form-group-sm d-flex col-7 a-i-center\"\n              >\n                <label\n                  class=\"m-b-sm-0 text-nowrap m-r-8\"\n                  style=\"min-width: 30px\"\n                  [title]=\"'To`date`' | translate\"\n                  for=\"dateTo\"\n                  translate\n                >\n                  To`date`\n                </label>\n                <c8y-date-time-picker\n                  [class.has-error]=\"toErrors\"\n                  id=\"dateTo\"\n                  [minDate]=\"tempDateFromValue\"\n                  [placeholder]=\"'To`date`' | translate\"\n                  [formControl]=\"dateTimeContext.get('dateTo')\"\n                ></c8y-date-time-picker>\n                <button\n                  class=\"btn btn-sm btn-default m-l-4\"\n                  [title]=\"'Set to current time' | translate\"\n                  type=\"button\"\n                  (click)=\"setDateToNow()\"\n                >\n                  <i\n                    class=\"m-r-4\"\n                    [c8yIcon]=\"'clock-o'\"\n                  ></i>\n                  {{ 'Now' | translate }}\n                </button>\n                <c8y-messages [show]=\"toErrors\">\n                  <c8y-message\n                    name=\"dateBeforeRangeMin\"\n                    [text]=\"errorMessages.dateBeforeRangeMin | translate\"\n                  ></c8y-message>\n                  <c8y-message\n                    name=\"invalidDateTime\"\n                    [text]=\"errorMessages.invalidDateTime | translate\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n            </c8y-form-group>\n          </fieldset>\n        }\n      </div>\n      <div class=\"col-8\">\n        @if (SHOW_AGGREGATION) {\n          <fieldset class=\"c8y-fieldset\">\n            <legend>\n              <div class=\"standalone btn-icon-dot__item aggregation m-r-4\">\n                <i [c8yIcon]=\"'input'\"></i>\n              </div>\n              {{ 'Aggregation' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"AGGREGATION_POPOVER | translate\"\n                placement=\"top\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n                [adaptivePosition]=\"true\"\n              ></button>\n            </legend>\n\n            <c8y-form-group class=\"p-t-16 m-b-4 p-b-16\">\n              <c8y-aggregation-picker\n                formControlName=\"aggregation\"\n                [layout]=\"'radio'\"\n                [resetToDefault]=\"true\"\n                [showAutoMode]=\"isTimeSeriesMigrated()\"\n                [autoModeActive]=\"isAutoModeActive()\"\n                [autoModeDisabled]=\"autoModeDisabled()\"\n                [disabledAggregations]=\"disabledAggregations()\"\n                (autoModeChange)=\"onAutoModeChange($event)\"\n              >\n                <div\n                  class=\"d-flex a-i-center gap-16 flex-wrap\"\n                  autoAggregationOptions\n                >\n                  <div class=\"d-flex a-i-center\">\n                    <label\n                      class=\"m-b-0 m-r-8 text-nowrap\"\n                      for=\"autoAggregationDatapoints\"\n                    >\n                      {{ 'Points per chart' | translate }}\n                    </label>\n                    @let datapointsRangeText =\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                    <c8y-form-group class=\"form-group-sm m-b-0\">\n                      <input\n                        class=\"form-control input-sm\"\n                        style=\"width: 60px\"\n                        [attr.title]=\"datapointsRangeText\"\n                        [attr.aria-label]=\"'Points per chart' | translate\"\n                        id=\"autoAggregationDatapoints\"\n                        type=\"number\"\n                        [min]=\"AUTO_AGGREGATION_DATAPOINTS.MIN\"\n                        [max]=\"AUTO_AGGREGATION_DATAPOINTS.MAX\"\n                        [step]=\"AUTO_AGGREGATION_DATAPOINTS.STEP\"\n                        [formControl]=\"currentForm.controls.autoAggregationDatapoints\"\n                        (change)=\"clampDatapoints()\"\n                        data-cy=\"global-context--auto-aggregation-datapoints-input\"\n                      />\n                      @let datapointsErrors = currentForm.get('autoAggregationDatapoints')?.errors;\n                      <c8y-messages\n                        class=\"m-t-4\"\n                        [show]=\"datapointsErrors\"\n                      >\n                        <c8y-message\n                          name=\"min\"\n                          [text]=\"datapointsRangeText\"\n                        ></c8y-message>\n                        <c8y-message\n                          name=\"max\"\n                          [text]=\"datapointsRangeText\"\n                        ></c8y-message>\n                      </c8y-messages>\n                    </c8y-form-group>\n                  </div>\n                  <label\n                    class=\"c8y-switch m-b-0\"\n                    [title]=\"'Keep point count on zoom' | translate\"\n                  >\n                    <input\n                      type=\"checkbox\"\n                      [formControl]=\"currentForm.controls.autoAggregationKeepDataOnZoomIn\"\n                      data-cy=\"global-context--auto-aggregation-keep-data-on-zoom-in\"\n                    />\n                    <span></span>\n                    <span>{{ '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                      [adaptivePosition]=\"true\"\n                    ></button>\n                  </label>\n                </div>\n              </c8y-aggregation-picker>\n            </c8y-form-group>\n          </fieldset>\n        }\n      </div>\n    </div>\n  </form>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { settings: [{
                 type: Input
             }], context: [{
@@ -3618,7 +3838,7 @@ class LiveModeConfigurationControlsComponent {
         }, { emitEvent: false });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LiveModeConfigurationControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LiveModeConfigurationControlsComponent, isStandalone: true, selector: "c8y-live-mode-configuration-controls", inputs: { settings: "settings", intervalOptions: "intervalOptions", context: "context" }, outputs: { contextChange: "contextChange" }, ngImport: i0, template: "@if (form) {\n  @let SHOW_TIME_CONTEXT = settings.showTimeContext;\n  @let SHOW_AUTO_REFRESH = settings.showAutoRefresh;\n\n  <form [formGroup]=\"form\">\n    <div class=\"content-flex-82\">\n      <div class=\"col-5\">\n        @if (SHOW_TIME_CONTEXT) {\n          <fieldset class=\"c8y-fieldset\">\n            <legend>\n              <div class=\"standalone btn-icon-dot__item time-context m-r-4\">\n                <i [c8yIcon]=\"'calendar'\"></i>\n              </div>\n              {{ 'Date & time' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"TIME_RANGE_PICKER_POPOVER | translate\"\n                placement=\"top\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n                [adaptivePosition]=\"true\"\n              ></button>\n            </legend>\n            <c8y-form-group class=\"m-b-4 p-t-16 p-b-16\">\n              <c8y-date-time-context-picker\n                formControlName=\"dateTimeContext\"\n                [config]=\"{ showDateTo: false, showDateFrom: true }\"\n                [intervalOptions]=\"intervalOptions\"\n              ></c8y-date-time-context-picker>\n            </c8y-form-group>\n          </fieldset>\n        }\n      </div>\n      <div class=\"col-3\">\n        @if (SHOW_AUTO_REFRESH) {\n          <fieldset class=\"c8y-fieldset\">\n            <legend class=\"d-flex\">\n              <div class=\"standalone btn-icon-dot__item auto-refresh m-r-4\">\n                <i [c8yIcon]=\"'refresh'\"></i>\n              </div>\n              {{ 'Auto refresh' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"REFRESH_POPOVER_MESSAGE | translate\"\n                placement=\"top\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n                [adaptivePosition]=\"true\"\n              ></button>\n            </legend>\n            <c8y-form-group class=\"m-b-8 form-group-sm p-t-16 p-b-16\">\n              <div class=\"d-flex gap-8 a-i-center\">\n                <label class=\"c8y-switch c8y-switch--inline\">\n                  <input\n                    type=\"checkbox\"\n                    #arInput\n                    formControlName=\"isAutoRefreshEnabled\"\n                  />\n                  <span></span>\n                  <span>\n                    {{ 'Auto refresh enabled' | translate }}\n                  </span>\n                </label>\n              </div>\n            </c8y-form-group>\n          </fieldset>\n        }\n      </div>\n    </div>\n  </form>\n}\n", dependencies: [{ kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DateTimeContextPickerComponent, selector: "c8y-date-time-context-picker", inputs: ["disabled", "shouldDisableInterval", "config", "intervalOptions"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i2$2.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LiveModeConfigurationControlsComponent, isStandalone: true, selector: "c8y-live-mode-configuration-controls", inputs: { settings: "settings", intervalOptions: "intervalOptions", context: "context" }, outputs: { contextChange: "contextChange" }, ngImport: i0, template: "@if (form) {\n  @let SHOW_TIME_CONTEXT = settings.showTimeContext;\n  @let SHOW_AUTO_REFRESH = settings.showAutoRefresh;\n\n  <form [formGroup]=\"form\">\n    <div class=\"content-flex-82\">\n      <div class=\"col-5\">\n        @if (SHOW_TIME_CONTEXT) {\n          <fieldset class=\"c8y-fieldset\">\n            <legend>\n              <div class=\"standalone btn-icon-dot__item time-context m-r-4\">\n                <i [c8yIcon]=\"'calendar'\"></i>\n              </div>\n              {{ 'Date & time' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"TIME_RANGE_PICKER_POPOVER | translate\"\n                placement=\"top\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n                [adaptivePosition]=\"true\"\n              ></button>\n            </legend>\n            <c8y-form-group class=\"m-b-4 p-t-16 p-b-16\">\n              <c8y-date-time-context-picker\n                formControlName=\"dateTimeContext\"\n                [config]=\"{ showDateTo: false, showDateFrom: true }\"\n                [intervalOptions]=\"intervalOptions\"\n              ></c8y-date-time-context-picker>\n            </c8y-form-group>\n          </fieldset>\n        }\n      </div>\n      <div class=\"col-3\">\n        @if (SHOW_AUTO_REFRESH) {\n          <fieldset class=\"c8y-fieldset\">\n            <legend class=\"d-flex\">\n              <div class=\"standalone btn-icon-dot__item auto-refresh m-r-4\">\n                <i [c8yIcon]=\"'refresh'\"></i>\n              </div>\n              {{ 'Auto refresh' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"REFRESH_POPOVER_MESSAGE | translate\"\n                placement=\"top\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n                [adaptivePosition]=\"true\"\n              ></button>\n            </legend>\n            <c8y-form-group class=\"m-b-8 form-group-sm p-t-16 p-b-16\">\n              <div class=\"d-flex gap-8 a-i-center\">\n                <label class=\"c8y-switch c8y-switch--inline\">\n                  <input\n                    type=\"checkbox\"\n                    #arInput\n                    formControlName=\"isAutoRefreshEnabled\"\n                  />\n                  <span></span>\n                  <span>\n                    {{ 'Auto refresh enabled' | translate }}\n                  </span>\n                </label>\n              </div>\n            </c8y-form-group>\n          </fieldset>\n        }\n      </div>\n    </div>\n  </form>\n}\n", dependencies: [{ kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DateTimeContextPickerComponent, selector: "c8y-date-time-context-picker", inputs: ["disabled", "shouldDisableInterval", "config", "intervalOptions"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i3.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LiveModeConfigurationControlsComponent, decorators: [{
             type: Component,
@@ -4057,7 +4277,7 @@ class ConfigurationCollapseComponent {
         this.hasPendingChanges.set(!isEqual(snapshot, latest));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ConfigurationCollapseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ConfigurationCollapseComponent, isStandalone: true, selector: "c8y-configuration-collapse", inputs: { supportedModes: { classPropertyName: "supportedModes", publicName: "supportedModes", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { contextChange: "contextChange", refreshOptionChange: "refreshOptionChange", savePreferenceChange: "savePreferenceChange" }, host: { classAttribute: "d-contents" }, ngImport: i0, template: "<div\n  class=\"c8y-global-context\"\n  data-cy=\"global-context--configuration-panel\"\n  [collapse]=\"isCollapsed()\"\n  (collapsed)=\"onCollapsed()\"\n  (expanded)=\"onExpanded()\"\n  [isAnimated]=\"true\"\n>\n  <div class=\"p-t-16 p-b-16 p-l-24 p-r-24 separator-bottom\">\n    <span\n      class=\"h4\"\n      translate\n    >\n      Time mode\n    </span>\n  </div>\n  <div>\n    @if (!isCollapsed()) {\n      <c8y-configuration-controls\n        [activeMode]=\"activeMode()\"\n        [liveContext]=\"liveViewContext()\"\n        [historyContext]=\"historyViewContext()\"\n        [supportedModes]=\"supportedModes()\"\n        (refreshOptionChange)=\"onModeSelected($event)\"\n        (contextChange)=\"onModeChange($event)\"\n        (validationStatus)=\"onValidationStatusChange($event)\"\n      ></c8y-configuration-controls>\n    }\n  </div>\n  <div class=\"c8y-top-drawer--footer\">\n    <div class=\"d-flex a-i-center gap-8\">\n      <button\n        class=\"btn btn-default\"\n        [title]=\"'Close help' | translate\"\n        aria-controls=\"collapseHelp\"\n        [attr.aria-expanded]=\"!isCollapsed()\"\n        type=\"button\"\n        (click)=\"toggle()\"\n        data-cy=\"global-context--Close-button\"\n        translate\n      >\n        Close\n      </button>\n      <button\n        class=\"btn btn-primary\"\n        [title]=\"'Apply global context' | translate\"\n        aria-controls=\"collapseHelp\"\n        [attr.aria-expanded]=\"!isCollapsed()\"\n        type=\"button\"\n        (click)=\"apply()\"\n        [disabled]=\"!hasPendingChanges() || !isFormValid()\"\n        translate\n        data-cy=\"global-date-context--Apply-button\"\n      >\n        Apply\n      </button>\n\n      <label class=\"c8y-checkbox d-flex align-items-center m-b-0\">\n        <input\n          class=\"m-r-4\"\n          type=\"checkbox\"\n          [ngModel]=\"shouldSave()\"\n          (ngModelChange)=\"shouldSaveInDashboard($event)\"\n        />\n        <span class=\"a-s-center m-r-8\"></span>\n        <span\n          class=\"text-truncate\"\n          translate\n        >\n          Save in dashboard configuration\n        </span>\n        <button\n          class=\"btn-help btn-help--sm m-l-4\"\n          [attr.aria-label]=\"'Help' | translate\"\n          [popover]=\"helpText | translate\"\n          placement=\"right\"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n          [adaptivePosition]=\"true\"\n        ></button>\n      </label>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i1$2.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i2$2.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: ConfigurationControlsComponent, selector: "c8y-configuration-controls", inputs: ["controlsDisplayMode", "settings", "activeMode", "liveContext", "historyContext", "supportedModes", "intervalOptions", "tabsOutletName"], outputs: ["refreshOptionChange", "contextChange", "validationStatus"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ConfigurationCollapseComponent, isStandalone: true, selector: "c8y-configuration-collapse", inputs: { supportedModes: { classPropertyName: "supportedModes", publicName: "supportedModes", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { contextChange: "contextChange", refreshOptionChange: "refreshOptionChange", savePreferenceChange: "savePreferenceChange" }, host: { classAttribute: "d-contents" }, ngImport: i0, template: "<div\n  class=\"c8y-global-context\"\n  data-cy=\"global-context--configuration-panel\"\n  [collapse]=\"isCollapsed()\"\n  (collapsed)=\"onCollapsed()\"\n  (expanded)=\"onExpanded()\"\n  [isAnimated]=\"true\"\n>\n  <div class=\"p-t-16 p-b-16 p-l-24 p-r-24 separator-bottom\">\n    <span\n      class=\"h4\"\n      translate\n    >\n      Time mode\n    </span>\n  </div>\n  <div>\n    @if (!isCollapsed()) {\n      <c8y-configuration-controls\n        [activeMode]=\"activeMode()\"\n        [liveContext]=\"liveViewContext()\"\n        [historyContext]=\"historyViewContext()\"\n        [supportedModes]=\"supportedModes()\"\n        (refreshOptionChange)=\"onModeSelected($event)\"\n        (contextChange)=\"onModeChange($event)\"\n        (validationStatus)=\"onValidationStatusChange($event)\"\n      ></c8y-configuration-controls>\n    }\n  </div>\n  <div class=\"c8y-top-drawer--footer\">\n    <div class=\"d-flex a-i-center gap-8\">\n      <button\n        class=\"btn btn-default\"\n        [title]=\"'Close help' | translate\"\n        aria-controls=\"collapseHelp\"\n        [attr.aria-expanded]=\"!isCollapsed()\"\n        type=\"button\"\n        (click)=\"toggle()\"\n        data-cy=\"global-context--Close-button\"\n        translate\n      >\n        Close\n      </button>\n      <button\n        class=\"btn btn-primary\"\n        [title]=\"'Apply global context' | translate\"\n        aria-controls=\"collapseHelp\"\n        [attr.aria-expanded]=\"!isCollapsed()\"\n        type=\"button\"\n        (click)=\"apply()\"\n        [disabled]=\"!hasPendingChanges() || !isFormValid()\"\n        translate\n        data-cy=\"global-date-context--Apply-button\"\n      >\n        Apply\n      </button>\n\n      <label class=\"c8y-checkbox d-flex align-items-center m-b-0\">\n        <input\n          class=\"m-r-4\"\n          type=\"checkbox\"\n          [ngModel]=\"shouldSave()\"\n          (ngModelChange)=\"shouldSaveInDashboard($event)\"\n        />\n        <span class=\"a-s-center m-r-8\"></span>\n        <span\n          class=\"text-truncate\"\n          translate\n        >\n          Save in dashboard configuration\n        </span>\n        <button\n          class=\"btn-help btn-help--sm m-l-4\"\n          [attr.aria-label]=\"'Help' | translate\"\n          [popover]=\"helpText | translate\"\n          placement=\"right\"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n          [adaptivePosition]=\"true\"\n        ></button>\n      </label>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i1$2.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i3.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: ConfigurationControlsComponent, selector: "c8y-configuration-controls", inputs: ["controlsDisplayMode", "settings", "activeMode", "liveContext", "historyContext", "supportedModes", "intervalOptions", "tabsOutletName"], outputs: ["refreshOptionChange", "contextChange", "validationStatus"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ConfigurationCollapseComponent, decorators: [{
             type: Component,
@@ -4612,16 +4832,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 class AggregationDisplayComponent {
     constructor() {
         this.aggregation = input(null, ...(ngDevMode ? [{ debugName: "aggregation" }] : /* istanbul ignore next */ []));
-        this.AGGREGATION_ICONS = AGGREGATION_ICONS;
+        /**
+         * When true, the display shows "Auto" regardless of `aggregation`. Auto mode stores a null
+         * aggregation, so without this flag the display would fall back to "No aggregation".
+         */
+        this.autoMode = input(false, ...(ngDevMode ? [{ debugName: "autoMode" }] : /* istanbul ignore next */ []));
+        /** Number of aggregation points, shown as a badge next to "Auto" while auto mode is active. */
+        this.autoPoints = input(null, ...(ngDevMode ? [{ debugName: "autoPoints" }] : /* istanbul ignore next */ []));
+        /** Whether the point count is kept on zoom; surfaced in the tooltip while auto mode is active. */
+        this.autoKeepPointCount = input(null, ...(ngDevMode ? [{ debugName: "autoKeepPointCount" }] : /* istanbul ignore next */ []));
+        // Exposed for the template's tooltip (`@let`).
         this.AGGREGATION_TEXTS = AGGREGATION_TEXTS;
+        this.AUTO_AGGREGATION_TEXT = AUTO_AGGREGATION_TEXT;
+        this.AUTO_POINTS_TOOLTIP = AUTO_POINTS_TOOLTIP;
+        this.AUTO_POINTS_TOOLTIP_KEPT = AUTO_POINTS_TOOLTIP_KEPT;
+        /** Short label shown as the current aggregation, accounting for auto mode. */
+        this.displayText = computed(() => {
+            if (this.autoMode()) {
+                return AUTO_AGGREGATION_TEXT;
+            }
+            const aggregation = this.aggregation();
+            return aggregation ? AGGREGATION_LABELS[aggregation] : AGGREGATION_LABELS.NONE;
+        }, ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
+        /** Icon shown next to the current aggregation, accounting for auto mode. */
+        this.displayIcon = computed(() => {
+            if (this.autoMode()) {
+                return AGGREGATION_ICON_TYPE.AUTO;
+            }
+            const aggregation = this.aggregation();
+            return aggregation ? AGGREGATION_ICONS[aggregation] : AGGREGATION_ICONS.undefined;
+        }, ...(ngDevMode ? [{ debugName: "displayIcon" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AggregationDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: AggregationDisplayComponent, isStandalone: true, selector: "c8y-aggregation-display", inputs: { aggregation: { classPropertyName: "aggregation", publicName: "aggregation", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"d-flex a-i-center l-h-tight form-control\">\n  <i\n    class=\"m-r-4\"\n    [c8yIcon]=\"aggregation() ? AGGREGATION_ICONS[aggregation()] : AGGREGATION_ICONS.undefined\"\n  ></i>\n  <div class=\"d-col text-left fit-w min-width-0\">\n    <span\n      class=\"text-10 l-h-1 text-muted text-truncate\"\n      title=\"{{ 'Aggregation' | translate }}\"\n    >\n      {{ 'Aggregation' | translate }}\n    </span>\n    <span\n      class=\"text-12 l-h-1 text-medium text-truncate\"\n      title=\"{{ AGGREGATION_TEXTS[aggregation()] | translate }}\"\n      data-cy=\"global-date-context--Aggregation-display-value\"\n    >\n      {{ AGGREGATION_TEXTS[aggregation()] | translate }}\n    </span>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AggregationDisplayComponent, isStandalone: true, selector: "c8y-aggregation-display", inputs: { aggregation: { classPropertyName: "aggregation", publicName: "aggregation", isSignal: true, isRequired: false, transformFunction: null }, autoMode: { classPropertyName: "autoMode", publicName: "autoMode", isSignal: true, isRequired: false, transformFunction: null }, autoPoints: { classPropertyName: "autoPoints", publicName: "autoPoints", isSignal: true, isRequired: false, transformFunction: null }, autoKeepPointCount: { classPropertyName: "autoKeepPointCount", publicName: "autoKeepPointCount", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"d-flex a-i-center l-h-tight form-control\">\n  <i\n    class=\"m-r-4\"\n    [c8yIcon]=\"displayIcon()\"\n  ></i>\n  <div class=\"d-col text-left fit-w min-width-0\">\n    <span\n      class=\"text-10 l-h-1 text-muted text-truncate\"\n      title=\"{{ 'Aggregation' | translate }}\"\n    >\n      {{ 'Aggregation' | translate }}\n    </span>\n    @let titleText =\n      autoMode()\n        ? autoPoints() != null\n          ? ((autoKeepPointCount() ? AUTO_POINTS_TOOLTIP_KEPT : AUTO_POINTS_TOOLTIP)\n            | translate: { points: autoPoints() })\n          : (AUTO_AGGREGATION_TEXT | translate)\n        : aggregation()\n          ? (AGGREGATION_TEXTS[aggregation()] | translate)\n          : (AGGREGATION_TEXTS.null | translate);\n    <span\n      class=\"text-12 l-h-1 text-medium d-flex a-i-center gap-4\"\n      [title]=\"titleText\"\n      data-cy=\"global-date-context--Aggregation-display-value\"\n    >\n      <span class=\"text-truncate\">{{ displayText() | translate }}</span>\n      @if (autoMode() && autoPoints() != null) {\n        <span\n          class=\"m-l-auto badge badge-info flex-no-shrink l-h-1 text-10\"\n          style=\"min-height: 12px\"\n        >\n          {{ autoPoints() }}\n        </span>\n      }\n    </span>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AggregationDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-aggregation-display', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [C8yTranslatePipe, IconDirective], template: "<div class=\"d-flex a-i-center l-h-tight form-control\">\n  <i\n    class=\"m-r-4\"\n    [c8yIcon]=\"aggregation() ? AGGREGATION_ICONS[aggregation()] : AGGREGATION_ICONS.undefined\"\n  ></i>\n  <div class=\"d-col text-left fit-w min-width-0\">\n    <span\n      class=\"text-10 l-h-1 text-muted text-truncate\"\n      title=\"{{ 'Aggregation' | translate }}\"\n    >\n      {{ 'Aggregation' | translate }}\n    </span>\n    <span\n      class=\"text-12 l-h-1 text-medium text-truncate\"\n      title=\"{{ AGGREGATION_TEXTS[aggregation()] | translate }}\"\n      data-cy=\"global-date-context--Aggregation-display-value\"\n    >\n      {{ AGGREGATION_TEXTS[aggregation()] | translate }}\n    </span>\n  </div>\n</div>\n" }]
-        }], propDecorators: { aggregation: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregation", required: false }] }] } });
+            args: [{ selector: 'c8y-aggregation-display', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [C8yTranslatePipe, IconDirective], template: "<div class=\"d-flex a-i-center l-h-tight form-control\">\n  <i\n    class=\"m-r-4\"\n    [c8yIcon]=\"displayIcon()\"\n  ></i>\n  <div class=\"d-col text-left fit-w min-width-0\">\n    <span\n      class=\"text-10 l-h-1 text-muted text-truncate\"\n      title=\"{{ 'Aggregation' | translate }}\"\n    >\n      {{ 'Aggregation' | translate }}\n    </span>\n    @let titleText =\n      autoMode()\n        ? autoPoints() != null\n          ? ((autoKeepPointCount() ? AUTO_POINTS_TOOLTIP_KEPT : AUTO_POINTS_TOOLTIP)\n            | translate: { points: autoPoints() })\n          : (AUTO_AGGREGATION_TEXT | translate)\n        : aggregation()\n          ? (AGGREGATION_TEXTS[aggregation()] | translate)\n          : (AGGREGATION_TEXTS.null | translate);\n    <span\n      class=\"text-12 l-h-1 text-medium d-flex a-i-center gap-4\"\n      [title]=\"titleText\"\n      data-cy=\"global-date-context--Aggregation-display-value\"\n    >\n      <span class=\"text-truncate\">{{ displayText() | translate }}</span>\n      @if (autoMode() && autoPoints() != null) {\n        <span\n          class=\"m-l-auto badge badge-info flex-no-shrink l-h-1 text-10\"\n          style=\"min-height: 12px\"\n        >\n          {{ autoPoints() }}\n        </span>\n      }\n    </span>\n  </div>\n</div>\n" }]
+        }], propDecorators: { aggregation: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregation", required: false }] }], autoMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoMode", required: false }] }], autoPoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPoints", required: false }] }], autoKeepPointCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoKeepPointCount", required: false }] }] } });
 
 /**
  * Source of auto-refresh state change.
@@ -4954,7 +5202,7 @@ let ContextControlsComponent$1 = class ContextControlsComponent {
         return pick(settings, requiredKeys);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ContextControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ContextControlsComponent, isStandalone: true, selector: "c8y-context-controls", inputs: { showDisplayModeLabel: "showDisplayModeLabel", isLoading: "isLoading", settings: "settings", context: "context" }, outputs: { contextChange: "contextChange", refresh: "refresh", contextClick: "contextClick" }, ngImport: i0, template: "@if (form) {\n  @let SHOW_TIME_CONTEXT = settings.showTimeContext;\n  @let SHOW_AGGREGATION = settings.showAggregation;\n  @let SHOW_AUTO_REFRESH = settings.showAutoRefresh;\n  @let refreshIntervalValue = form?.get('refreshInterval')?.value;\n  @let isLiveMode = refreshOption === REFRESH_OPTION.LIVE;\n\n  @if (isLiveMode) {\n    <form\n      class=\"input-group\"\n      [formGroup]=\"form\"\n    >\n      <c8y-auto-refresh-control\n        #autoRefreshControl\n        [isLoading]=\"isLoading\"\n        [isAutoRefreshConnected]=\"isAutoRefreshConnected\"\n        formControlName=\"isAutoRefreshEnabled\"\n        [autoRefreshSeconds]=\"refreshIntervalValue\"\n        (refresh)=\"refresh.emit()\"\n      ></c8y-auto-refresh-control>\n      <button\n        class=\"btn-clean d-flex p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8 min-width-0\"\n        style=\"margin-left: -1px\"\n        (click)=\"contextClick.emit($event)\"\n      >\n        <div\n          class=\"d-col a-i-start form-control\"\n          style=\"flex: 0\"\n        >\n          <p class=\"text-muted fit-w text-10 l-h-1\">\n            {{ 'Time mode' | translate }}\n          </p>\n          <p\n            class=\"text-bold text-12 fit-w l-h-1\"\n            data-cy=\"global-time-context-controls--Display-mode\"\n          >\n            {{ refreshOption | translate | titlecase }}\n          </p>\n        </div>\n\n        @let interval = form.get('dateTimeContext')?.value?.interval;\n        @let isCustomInterval = interval === 'custom';\n\n        <c8y-time-range-display\n          style=\"margin-left: -1px; min-width: 0\"\n          [dateTimeContext]=\"form.get('dateTimeContext')?.value\"\n        ></c8y-time-range-display>\n\n        @if (!(isAnySettingsEnabled$ | async)) {\n          <div\n            class=\"d-col a-i-center form-control\"\n            style=\"margin-left: -1px; flex: 0\"\n          >\n            <i\n              class=\"dlt-c8y-icon-disconnected icon-20 text-danger\"\n              [tooltip]=\"'No synced widgets' | translate\"\n              placement=\"right\"\n              container=\"body\"\n              [delay]=\"500\"\n              data-cy=\"global-time-context-controls--Widgets-disconnected\"\n            ></i>\n          </div>\n        }\n      </button>\n    </form>\n  } @else {\n    <form [formGroup]=\"form\">\n      <button\n        class=\"btn-clean d-flex p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\n        (click)=\"contextClick.emit($event)\"\n      >\n        <div\n          class=\"d-col a-i-center form-control\"\n          style=\"flex: 0\"\n        >\n          <i class=\"dlt-c8y-icon-schedule1 icon-20 text-primary\"></i>\n        </div>\n\n        <div\n          class=\"d-col a-i-start form-control\"\n          style=\"margin-left: -1px; flex: 0\"\n        >\n          <p class=\"text-muted fit-w text-10 l-h-1\">\n            {{ 'Time mode' | translate }}\n          </p>\n          <p\n            class=\"text-bold text-12 fit-w l-h-1\"\n            data-cy=\"global-time-context-controls--Display-mode\"\n          >\n            {{ refreshOption | translate | titlecase }}\n          </p>\n        </div>\n\n        <c8y-time-range-display\n          style=\"margin-left: -1px; min-width: 0\"\n          [dateTimeContext]=\"form.get('dateTimeContext')?.value\"\n        ></c8y-time-range-display>\n        <c8y-aggregation-display\n          style=\"margin-left: -1px; min-width: 0\"\n          [aggregation]=\"form.get('aggregation')?.value\"\n        ></c8y-aggregation-display>\n\n        @if (!(isAnySettingsEnabled$ | async)) {\n          <div\n            class=\"d-col a-i-center form-control\"\n            style=\"margin-left: -1px; flex: 0\"\n          >\n            <i\n              class=\"dlt-c8y-icon-disconnected icon-20 text-danger\"\n              [tooltip]=\"'No synced widgets' | translate\"\n              placement=\"right\"\n              container=\"body\"\n              [delay]=\"500\"\n              data-cy=\"global-time-context-controls--Widgets-disconnected\"\n            ></i>\n          </div>\n        }\n      </button>\n    </form>\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.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: CollapseModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: AutoRefreshControlComponent, selector: "c8y-auto-refresh-control", inputs: ["isAutoRefreshConnected", "autoRefreshSeconds", "disableCounter", "isEnabled", "isLoading"], outputs: ["loadingChange", "refresh"] }, { kind: "component", type: TimeRangeDisplayComponent, selector: "c8y-time-range-display", inputs: ["dateTimeContext", "mode"] }, { kind: "component", type: AggregationDisplayComponent, selector: "c8y-aggregation-display", inputs: ["aggregation"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ContextControlsComponent, isStandalone: true, selector: "c8y-context-controls", inputs: { showDisplayModeLabel: "showDisplayModeLabel", isLoading: "isLoading", settings: "settings", context: "context" }, outputs: { contextChange: "contextChange", refresh: "refresh", contextClick: "contextClick" }, ngImport: i0, template: "@if (form) {\n  @let SHOW_TIME_CONTEXT = settings.showTimeContext;\n  @let SHOW_AGGREGATION = settings.showAggregation;\n  @let SHOW_AUTO_REFRESH = settings.showAutoRefresh;\n  @let refreshIntervalValue = form?.get('refreshInterval')?.value;\n  @let isLiveMode = refreshOption === REFRESH_OPTION.LIVE;\n\n  @if (isLiveMode) {\n    <form\n      class=\"input-group\"\n      [formGroup]=\"form\"\n    >\n      <c8y-auto-refresh-control\n        #autoRefreshControl\n        [isLoading]=\"isLoading\"\n        [isAutoRefreshConnected]=\"isAutoRefreshConnected\"\n        formControlName=\"isAutoRefreshEnabled\"\n        [autoRefreshSeconds]=\"refreshIntervalValue\"\n        (refresh)=\"refresh.emit()\"\n      ></c8y-auto-refresh-control>\n      <button\n        class=\"btn-clean d-flex p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8 min-width-0\"\n        style=\"margin-left: -1px\"\n        (click)=\"contextClick.emit($event)\"\n      >\n        <div\n          class=\"d-col a-i-start form-control\"\n          style=\"flex: 0\"\n        >\n          <p class=\"text-muted fit-w text-10 l-h-1\">\n            {{ 'Time mode' | translate }}\n          </p>\n          <p\n            class=\"text-bold text-12 fit-w l-h-1\"\n            data-cy=\"global-time-context-controls--Display-mode\"\n          >\n            {{ refreshOption | translate | titlecase }}\n          </p>\n        </div>\n\n        @let interval = form.get('dateTimeContext')?.value?.interval;\n        @let isCustomInterval = interval === 'custom';\n\n        <c8y-time-range-display\n          style=\"margin-left: -1px; min-width: 0\"\n          [dateTimeContext]=\"form.get('dateTimeContext')?.value\"\n        ></c8y-time-range-display>\n\n        @if (!(isAnySettingsEnabled$ | async)) {\n          <div\n            class=\"d-col a-i-center form-control\"\n            style=\"margin-left: -1px; flex: 0\"\n          >\n            <i\n              class=\"dlt-c8y-icon-disconnected icon-20 text-danger\"\n              [tooltip]=\"'No synced widgets' | translate\"\n              placement=\"right\"\n              container=\"body\"\n              [delay]=\"500\"\n              data-cy=\"global-time-context-controls--Widgets-disconnected\"\n            ></i>\n          </div>\n        }\n      </button>\n    </form>\n  } @else {\n    <form [formGroup]=\"form\">\n      <button\n        class=\"btn-clean d-flex p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\n        (click)=\"contextClick.emit($event)\"\n      >\n        <div\n          class=\"d-col a-i-center form-control\"\n          style=\"flex: 0\"\n        >\n          <i class=\"dlt-c8y-icon-schedule1 icon-20 text-primary\"></i>\n        </div>\n\n        <div\n          class=\"d-col a-i-start form-control\"\n          style=\"margin-left: -1px; flex: 0\"\n        >\n          <p class=\"text-muted fit-w text-10 l-h-1\">\n            {{ 'Time mode' | translate }}\n          </p>\n          <p\n            class=\"text-bold text-12 fit-w l-h-1\"\n            data-cy=\"global-time-context-controls--Display-mode\"\n          >\n            {{ refreshOption | translate | titlecase }}\n          </p>\n        </div>\n\n        <c8y-time-range-display\n          style=\"margin-left: -1px; min-width: 0\"\n          [dateTimeContext]=\"form.get('dateTimeContext')?.value\"\n        ></c8y-time-range-display>\n        <c8y-aggregation-display\n          style=\"margin-left: -1px; min-width: 0\"\n          [aggregation]=\"form.get('aggregation')?.value\"\n          [autoMode]=\"!!context?.autoAggregation\"\n          [autoPoints]=\"context?.autoAggregation?.datapoints\"\n          [autoKeepPointCount]=\"context?.autoAggregation?.keepDataOnZoomIn\"\n        ></c8y-aggregation-display>\n\n        @if (!(isAnySettingsEnabled$ | async)) {\n          <div\n            class=\"d-col a-i-center form-control\"\n            style=\"margin-left: -1px; flex: 0\"\n          >\n            <i\n              class=\"dlt-c8y-icon-disconnected icon-20 text-danger\"\n              [tooltip]=\"'No synced widgets' | translate\"\n              placement=\"right\"\n              container=\"body\"\n              [delay]=\"500\"\n              data-cy=\"global-time-context-controls--Widgets-disconnected\"\n            ></i>\n          </div>\n        }\n      </button>\n    </form>\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.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: CollapseModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: AutoRefreshControlComponent, selector: "c8y-auto-refresh-control", inputs: ["isAutoRefreshConnected", "autoRefreshSeconds", "disableCounter", "isEnabled", "isLoading"], outputs: ["loadingChange", "refresh"] }, { kind: "component", type: TimeRangeDisplayComponent, selector: "c8y-time-range-display", inputs: ["dateTimeContext", "mode"] }, { kind: "component", type: AggregationDisplayComponent, selector: "c8y-aggregation-display", inputs: ["aggregation", "autoMode", "autoPoints", "autoKeepPointCount"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ContextControlsComponent$1, decorators: [{
             type: Component,
@@ -4970,7 +5218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         TimeRangeDisplayComponent,
                         AggregationDisplayComponent,
                         AsyncPipe
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (form) {\n  @let SHOW_TIME_CONTEXT = settings.showTimeContext;\n  @let SHOW_AGGREGATION = settings.showAggregation;\n  @let SHOW_AUTO_REFRESH = settings.showAutoRefresh;\n  @let refreshIntervalValue = form?.get('refreshInterval')?.value;\n  @let isLiveMode = refreshOption === REFRESH_OPTION.LIVE;\n\n  @if (isLiveMode) {\n    <form\n      class=\"input-group\"\n      [formGroup]=\"form\"\n    >\n      <c8y-auto-refresh-control\n        #autoRefreshControl\n        [isLoading]=\"isLoading\"\n        [isAutoRefreshConnected]=\"isAutoRefreshConnected\"\n        formControlName=\"isAutoRefreshEnabled\"\n        [autoRefreshSeconds]=\"refreshIntervalValue\"\n        (refresh)=\"refresh.emit()\"\n      ></c8y-auto-refresh-control>\n      <button\n        class=\"btn-clean d-flex p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8 min-width-0\"\n        style=\"margin-left: -1px\"\n        (click)=\"contextClick.emit($event)\"\n      >\n        <div\n          class=\"d-col a-i-start form-control\"\n          style=\"flex: 0\"\n        >\n          <p class=\"text-muted fit-w text-10 l-h-1\">\n            {{ 'Time mode' | translate }}\n          </p>\n          <p\n            class=\"text-bold text-12 fit-w l-h-1\"\n            data-cy=\"global-time-context-controls--Display-mode\"\n          >\n            {{ refreshOption | translate | titlecase }}\n          </p>\n        </div>\n\n        @let interval = form.get('dateTimeContext')?.value?.interval;\n        @let isCustomInterval = interval === 'custom';\n\n        <c8y-time-range-display\n          style=\"margin-left: -1px; min-width: 0\"\n          [dateTimeContext]=\"form.get('dateTimeContext')?.value\"\n        ></c8y-time-range-display>\n\n        @if (!(isAnySettingsEnabled$ | async)) {\n          <div\n            class=\"d-col a-i-center form-control\"\n            style=\"margin-left: -1px; flex: 0\"\n          >\n            <i\n              class=\"dlt-c8y-icon-disconnected icon-20 text-danger\"\n              [tooltip]=\"'No synced widgets' | translate\"\n              placement=\"right\"\n              container=\"body\"\n              [delay]=\"500\"\n              data-cy=\"global-time-context-controls--Widgets-disconnected\"\n            ></i>\n          </div>\n        }\n      </button>\n    </form>\n  } @else {\n    <form [formGroup]=\"form\">\n      <button\n        class=\"btn-clean d-flex p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\n        (click)=\"contextClick.emit($event)\"\n      >\n        <div\n          class=\"d-col a-i-center form-control\"\n          style=\"flex: 0\"\n        >\n          <i class=\"dlt-c8y-icon-schedule1 icon-20 text-primary\"></i>\n        </div>\n\n        <div\n          class=\"d-col a-i-start form-control\"\n          style=\"margin-left: -1px; flex: 0\"\n        >\n          <p class=\"text-muted fit-w text-10 l-h-1\">\n            {{ 'Time mode' | translate }}\n          </p>\n          <p\n            class=\"text-bold text-12 fit-w l-h-1\"\n            data-cy=\"global-time-context-controls--Display-mode\"\n          >\n            {{ refreshOption | translate | titlecase }}\n          </p>\n        </div>\n\n        <c8y-time-range-display\n          style=\"margin-left: -1px; min-width: 0\"\n          [dateTimeContext]=\"form.get('dateTimeContext')?.value\"\n        ></c8y-time-range-display>\n        <c8y-aggregation-display\n          style=\"margin-left: -1px; min-width: 0\"\n          [aggregation]=\"form.get('aggregation')?.value\"\n        ></c8y-aggregation-display>\n\n        @if (!(isAnySettingsEnabled$ | async)) {\n          <div\n            class=\"d-col a-i-center form-control\"\n            style=\"margin-left: -1px; flex: 0\"\n          >\n            <i\n              class=\"dlt-c8y-icon-disconnected icon-20 text-danger\"\n              [tooltip]=\"'No synced widgets' | translate\"\n              placement=\"right\"\n              container=\"body\"\n              [delay]=\"500\"\n              data-cy=\"global-time-context-controls--Widgets-disconnected\"\n            ></i>\n          </div>\n        }\n      </button>\n    </form>\n  }\n}\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (form) {\n  @let SHOW_TIME_CONTEXT = settings.showTimeContext;\n  @let SHOW_AGGREGATION = settings.showAggregation;\n  @let SHOW_AUTO_REFRESH = settings.showAutoRefresh;\n  @let refreshIntervalValue = form?.get('refreshInterval')?.value;\n  @let isLiveMode = refreshOption === REFRESH_OPTION.LIVE;\n\n  @if (isLiveMode) {\n    <form\n      class=\"input-group\"\n      [formGroup]=\"form\"\n    >\n      <c8y-auto-refresh-control\n        #autoRefreshControl\n        [isLoading]=\"isLoading\"\n        [isAutoRefreshConnected]=\"isAutoRefreshConnected\"\n        formControlName=\"isAutoRefreshEnabled\"\n        [autoRefreshSeconds]=\"refreshIntervalValue\"\n        (refresh)=\"refresh.emit()\"\n      ></c8y-auto-refresh-control>\n      <button\n        class=\"btn-clean d-flex p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8 min-width-0\"\n        style=\"margin-left: -1px\"\n        (click)=\"contextClick.emit($event)\"\n      >\n        <div\n          class=\"d-col a-i-start form-control\"\n          style=\"flex: 0\"\n        >\n          <p class=\"text-muted fit-w text-10 l-h-1\">\n            {{ 'Time mode' | translate }}\n          </p>\n          <p\n            class=\"text-bold text-12 fit-w l-h-1\"\n            data-cy=\"global-time-context-controls--Display-mode\"\n          >\n            {{ refreshOption | translate | titlecase }}\n          </p>\n        </div>\n\n        @let interval = form.get('dateTimeContext')?.value?.interval;\n        @let isCustomInterval = interval === 'custom';\n\n        <c8y-time-range-display\n          style=\"margin-left: -1px; min-width: 0\"\n          [dateTimeContext]=\"form.get('dateTimeContext')?.value\"\n        ></c8y-time-range-display>\n\n        @if (!(isAnySettingsEnabled$ | async)) {\n          <div\n            class=\"d-col a-i-center form-control\"\n            style=\"margin-left: -1px; flex: 0\"\n          >\n            <i\n              class=\"dlt-c8y-icon-disconnected icon-20 text-danger\"\n              [tooltip]=\"'No synced widgets' | translate\"\n              placement=\"right\"\n              container=\"body\"\n              [delay]=\"500\"\n              data-cy=\"global-time-context-controls--Widgets-disconnected\"\n            ></i>\n          </div>\n        }\n      </button>\n    </form>\n  } @else {\n    <form [formGroup]=\"form\">\n      <button\n        class=\"btn-clean d-flex p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\n        (click)=\"contextClick.emit($event)\"\n      >\n        <div\n          class=\"d-col a-i-center form-control\"\n          style=\"flex: 0\"\n        >\n          <i class=\"dlt-c8y-icon-schedule1 icon-20 text-primary\"></i>\n        </div>\n\n        <div\n          class=\"d-col a-i-start form-control\"\n          style=\"margin-left: -1px; flex: 0\"\n        >\n          <p class=\"text-muted fit-w text-10 l-h-1\">\n            {{ 'Time mode' | translate }}\n          </p>\n          <p\n            class=\"text-bold text-12 fit-w l-h-1\"\n            data-cy=\"global-time-context-controls--Display-mode\"\n          >\n            {{ refreshOption | translate | titlecase }}\n          </p>\n        </div>\n\n        <c8y-time-range-display\n          style=\"margin-left: -1px; min-width: 0\"\n          [dateTimeContext]=\"form.get('dateTimeContext')?.value\"\n        ></c8y-time-range-display>\n        <c8y-aggregation-display\n          style=\"margin-left: -1px; min-width: 0\"\n          [aggregation]=\"form.get('aggregation')?.value\"\n          [autoMode]=\"!!context?.autoAggregation\"\n          [autoPoints]=\"context?.autoAggregation?.datapoints\"\n          [autoKeepPointCount]=\"context?.autoAggregation?.keepDataOnZoomIn\"\n        ></c8y-aggregation-display>\n\n        @if (!(isAnySettingsEnabled$ | async)) {\n          <div\n            class=\"d-col a-i-center form-control\"\n            style=\"margin-left: -1px; flex: 0\"\n          >\n            <i\n              class=\"dlt-c8y-icon-disconnected icon-20 text-danger\"\n              [tooltip]=\"'No synced widgets' | translate\"\n              placement=\"right\"\n              container=\"body\"\n              [delay]=\"500\"\n              data-cy=\"global-time-context-controls--Widgets-disconnected\"\n            ></i>\n          </div>\n        }\n      </button>\n    </form>\n  }\n}\n" }]
         }], propDecorators: { showDisplayModeLabel: [{
                 type: Input
             }], isLoading: [{
@@ -5223,6 +5471,7 @@ class GlobalContextComponent {
         return pick(changes, [
             'dateTimeContext',
             'aggregation',
+            'autoAggregation',
             'isAutoRefreshEnabled',
             'refreshInterval',
             'refreshOption',
@@ -6453,6 +6702,10 @@ function resolveConfigurationValue(key, sources, localStateValues, globalStateVa
             return undefined;
         case 'isGlobalContextReady':
             return undefined;
+        case 'autoAggregation':
+            return undefined;
+        case 'aggregationFunction':
+            return undefined;
         default: {
             // Exhaustive check: ensures all keys are handled at compile time
             const _exhaustive = key;
@@ -8641,7 +8894,7 @@ class GlobalContextInlineComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GlobalContextInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GlobalContextInlineComponent, isStandalone: true, selector: "c8y-global-context-inline", inputs: { widgetControls: { classPropertyName: "widgetControls", publicName: "widgetControls", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, dashboardChildForLegacy: { classPropertyName: "dashboardChildForLegacy", publicName: "dashboardChildForLegacy", isSignal: true, isRequired: false, transformFunction: null }, disableRefreshEmits: { classPropertyName: "disableRefreshEmits", publicName: "disableRefreshEmits", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { refresh: "refresh", globalContextChange: "globalContextChange" }, providers: [GlobalContextInlineOrchestratorService], viewQueries: [{ propertyName: "headerTemplateRef", first: true, predicate: ["headerContent"], descendants: true, read: TemplateRef, static: true }], exportAs: ["globalContextInline"], ngImport: i0, template: "<ng-template #headerContent>\n  @let linkModel = linkDisplayModel();\n  <ng-content select=\"#header\"></ng-content>\n\n  @if (shouldShowHeaderLinks()) {\n    <c8y-global-context-link-controls\n      [linkStates]=\"linkModel.linkStates\"\n      [controlConfigs]=\"linkModel.controlConfig\"\n      (allLinksToggled)=\"toggleAllLinks($event)\"\n    ></c8y-global-context-link-controls>\n  }\n</ng-template>\n\n<ng-template #inlineContent>\n  @let settings = inlineSettings();\n  @let linkModel = linkDisplayModel();\n\n  @if (form && settings) {\n    <form\n      class=\"d-flex gap-16 p-l-16 p-r-16 inner-scroll\"\n      [ngClass]=\"{\n        'p-b-8':\n          settings.showTimeContext ||\n          settings.showRefresh ||\n          settings.showAutoRefresh ||\n          settings.showAggregation\n      }\"\n      [formGroup]=\"form\"\n    >\n      <div class=\"input-group w-auto input-group-sm\">\n        @if (settings.showAggregation) {\n          <c8y-aggregation-picker\n            data-cy=\"global-inline-date-context--Aggregation-display\"\n            [disabledAggregations]=\"getDisabledAggregations()\"\n            formControlName=\"aggregation\"\n            [resetToDefault]=\"true\"\n          ></c8y-aggregation-picker>\n        }\n\n        @if (settings.showAutoRefresh) {\n          <c8y-auto-refresh-control\n            [isLoading]=\"isLoading()\"\n            [disableCounter]=\"shouldDisableCounter\"\n            formControlName=\"isAutoRefreshEnabled\"\n            [autoRefreshSeconds]=\"getAutoRefreshSeconds()\"\n            [isAutoRefreshConnected]=\"linkModel.linkStates.isAutoRefreshEnabled ?? false\"\n            (refresh)=\"onLocalRefreshTrigger()\"\n          ></c8y-auto-refresh-control>\n        }\n\n        @if (settings.showTimeContext) {\n          @let isHistoryMode = form.get('refreshOption')?.value === REFRESH_OPTION.HISTORY;\n          <c8y-date-time-context-picker\n            style=\"margin-left: -1px\"\n            formControlName=\"dateTimeContext\"\n            [shouldDisableInterval]=\"getIntervalDisableConfig()\"\n            [config]=\"\n              isHistoryMode\n                ? { showDateTo: true, showDateFrom: true }\n                : { showDateTo: false, showDateFrom: true }\n            \"\n          ></c8y-date-time-context-picker>\n        }\n\n        @if (settings.showRefresh) {\n          <div class=\"input-group-btn\">\n            <button\n              class=\"btn btn-default\"\n              [attr.aria-label]=\"'Refresh' | translate\"\n              [tooltip]=\"'Refresh' | translate\"\n              placement=\"bottom\"\n              container=\"body\"\n              type=\"button\"\n              data-cy=\"global-inline-date-context--reload-button\"\n              [adaptivePosition]=\"false\"\n              [delay]=\"500\"\n              [disabled]=\"isLoading()\"\n              (click)=\"refresh.emit(null)\"\n            >\n              <i\n                [class.icon-spin]=\"isLoading()\"\n                [c8yIcon]=\"'refresh'\"\n              ></i>\n            </button>\n          </div>\n        }\n      </div>\n    </form>\n  }\n\n  <ng-content select=\"#body\"></ng-content>\n</ng-template>\n\n@switch (effectiveConfig().displayMode) {\n  @case (GLOBAL_CONTEXT_DISPLAY_MODE.CONFIG) {\n    <ng-container [ngTemplateOutlet]=\"inlineContent\"></ng-container>\n  }\n  @case (GLOBAL_CONTEXT_DISPLAY_MODE.VIEW_AND_CONFIG) {\n    <ng-container [ngTemplateOutlet]=\"headerContent\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"inlineContent\"></ng-container>\n  }\n  @default {\n    @if (shouldRenderHeaderInline()) {\n      <ng-container [ngTemplateOutlet]=\"headerContent\"></ng-container>\n    }\n    <ng-container [ngTemplateOutlet]=\"inlineContent\"></ng-container>\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: GlobalContextLinkControlsComponent, selector: "c8y-global-context-link-controls", inputs: ["linkStates", "controlConfigs"], outputs: ["allLinksToggled"] }, { kind: "component", type: AggregationPickerComponent, selector: "c8y-aggregation-picker", inputs: ["disabledAggregations", "resetToDefault", "layout"] }, { kind: "component", type: AutoRefreshControlComponent, selector: "c8y-auto-refresh-control", inputs: ["isAutoRefreshConnected", "autoRefreshSeconds", "disableCounter", "isEnabled", "isLoading"], outputs: ["loadingChange", "refresh"] }, { kind: "component", type: DateTimeContextPickerComponent, selector: "c8y-date-time-context-picker", inputs: ["disabled", "shouldDisableInterval", "config", "intervalOptions"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GlobalContextInlineComponent, isStandalone: true, selector: "c8y-global-context-inline", inputs: { widgetControls: { classPropertyName: "widgetControls", publicName: "widgetControls", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, dashboardChildForLegacy: { classPropertyName: "dashboardChildForLegacy", publicName: "dashboardChildForLegacy", isSignal: true, isRequired: false, transformFunction: null }, disableRefreshEmits: { classPropertyName: "disableRefreshEmits", publicName: "disableRefreshEmits", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { refresh: "refresh", globalContextChange: "globalContextChange" }, providers: [GlobalContextInlineOrchestratorService], viewQueries: [{ propertyName: "headerTemplateRef", first: true, predicate: ["headerContent"], descendants: true, read: TemplateRef, static: true }], exportAs: ["globalContextInline"], ngImport: i0, template: "<ng-template #headerContent>\n  @let linkModel = linkDisplayModel();\n  <ng-content select=\"#header\"></ng-content>\n\n  @if (shouldShowHeaderLinks()) {\n    <c8y-global-context-link-controls\n      [linkStates]=\"linkModel.linkStates\"\n      [controlConfigs]=\"linkModel.controlConfig\"\n      (allLinksToggled)=\"toggleAllLinks($event)\"\n    ></c8y-global-context-link-controls>\n  }\n</ng-template>\n\n<ng-template #inlineContent>\n  @let settings = inlineSettings();\n  @let linkModel = linkDisplayModel();\n\n  @if (form && settings) {\n    <form\n      class=\"d-flex gap-16 p-l-16 p-r-16 inner-scroll\"\n      [ngClass]=\"{\n        'p-b-8':\n          settings.showTimeContext ||\n          settings.showRefresh ||\n          settings.showAutoRefresh ||\n          settings.showAggregation\n      }\"\n      [formGroup]=\"form\"\n    >\n      <div class=\"input-group w-auto input-group-sm\">\n        @if (settings.showAggregation) {\n          <c8y-aggregation-picker\n            data-cy=\"global-inline-date-context--Aggregation-display\"\n            [disabledAggregations]=\"getDisabledAggregations()\"\n            formControlName=\"aggregation\"\n            [resetToDefault]=\"true\"\n          ></c8y-aggregation-picker>\n        }\n\n        @if (settings.showAutoRefresh) {\n          <c8y-auto-refresh-control\n            [isLoading]=\"isLoading()\"\n            [disableCounter]=\"shouldDisableCounter\"\n            formControlName=\"isAutoRefreshEnabled\"\n            [autoRefreshSeconds]=\"getAutoRefreshSeconds()\"\n            [isAutoRefreshConnected]=\"linkModel.linkStates.isAutoRefreshEnabled ?? false\"\n            (refresh)=\"onLocalRefreshTrigger()\"\n          ></c8y-auto-refresh-control>\n        }\n\n        @if (settings.showTimeContext) {\n          @let isHistoryMode = form.get('refreshOption')?.value === REFRESH_OPTION.HISTORY;\n          <c8y-date-time-context-picker\n            style=\"margin-left: -1px\"\n            formControlName=\"dateTimeContext\"\n            [shouldDisableInterval]=\"getIntervalDisableConfig()\"\n            [config]=\"\n              isHistoryMode\n                ? { showDateTo: true, showDateFrom: true }\n                : { showDateTo: false, showDateFrom: true }\n            \"\n          ></c8y-date-time-context-picker>\n        }\n\n        @if (settings.showRefresh) {\n          <div class=\"input-group-btn\">\n            <button\n              class=\"btn btn-default\"\n              [attr.aria-label]=\"'Refresh' | translate\"\n              [tooltip]=\"'Refresh' | translate\"\n              placement=\"bottom\"\n              container=\"body\"\n              type=\"button\"\n              data-cy=\"global-inline-date-context--reload-button\"\n              [adaptivePosition]=\"false\"\n              [delay]=\"500\"\n              [disabled]=\"isLoading()\"\n              (click)=\"refresh.emit(null)\"\n            >\n              <i\n                [class.icon-spin]=\"isLoading()\"\n                [c8yIcon]=\"'refresh'\"\n              ></i>\n            </button>\n          </div>\n        }\n      </div>\n    </form>\n  }\n\n  <ng-content select=\"#body\"></ng-content>\n</ng-template>\n\n@switch (effectiveConfig().displayMode) {\n  @case (GLOBAL_CONTEXT_DISPLAY_MODE.CONFIG) {\n    <ng-container [ngTemplateOutlet]=\"inlineContent\"></ng-container>\n  }\n  @case (GLOBAL_CONTEXT_DISPLAY_MODE.VIEW_AND_CONFIG) {\n    <ng-container [ngTemplateOutlet]=\"headerContent\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"inlineContent\"></ng-container>\n  }\n  @default {\n    @if (shouldRenderHeaderInline()) {\n      <ng-container [ngTemplateOutlet]=\"headerContent\"></ng-container>\n    }\n    <ng-container [ngTemplateOutlet]=\"inlineContent\"></ng-container>\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: GlobalContextLinkControlsComponent, selector: "c8y-global-context-link-controls", inputs: ["linkStates", "controlConfigs"], outputs: ["allLinksToggled"] }, { kind: "component", type: AggregationPickerComponent, selector: "c8y-aggregation-picker", inputs: ["disabledAggregations", "resetToDefault", "layout", "showAutoMode", "autoModeActive", "autoModeDisabled"], outputs: ["autoModeChange"] }, { kind: "component", type: AutoRefreshControlComponent, selector: "c8y-auto-refresh-control", inputs: ["isAutoRefreshConnected", "autoRefreshSeconds", "disableCounter", "isEnabled", "isLoading"], outputs: ["loadingChange", "refresh"] }, { kind: "component", type: DateTimeContextPickerComponent, selector: "c8y-date-time-context-picker", inputs: ["disabled", "shouldDisableInterval", "config", "intervalOptions"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GlobalContextInlineComponent, decorators: [{
             type: Component,
@@ -9523,7 +9776,7 @@ class GlobalContextWidgetConfigComponent {
         ></c8y-global-context-config>
       </fieldset>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ConfigContextSelectorComponent, selector: "c8y-config-context-selector" }, { kind: "component", type: GlobalContextConfigComponent, selector: "c8y-global-context-config", inputs: ["config", "isLoading", "widgetControls", "liveSnapshot", "historySnapshot"], outputs: ["refresh", "globalContextChange"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i2$2.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ConfigContextSelectorComponent, selector: "c8y-config-context-selector" }, { kind: "component", type: GlobalContextConfigComponent, selector: "c8y-global-context-config", inputs: ["config", "isLoading", "widgetControls", "liveSnapshot", "historySnapshot"], outputs: ["refresh", "globalContextChange"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i3.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GlobalContextWidgetConfigComponent, decorators: [{
             type: Component,
@@ -9746,7 +9999,7 @@ class PreviewControlsComponent {
         this.config.displayMode = GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PreviewControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PreviewControlsComponent, isStandalone: true, selector: "c8y-preview-controls", inputs: { widgetControls: "widgetControls", config: "config" }, ngImport: i0, template: "<!-- Main Controls -->\n@let isConfigMode = config?.displayMode === GLOBAL_CONTEXT_DISPLAY_MODE.CONFIG;\n@let settings = inlineControlsSettings$ | async;\n\n@if (form && settings) {\n  <form\n    class=\"d-flex gap-16 p-l-16 p-r-16 p-b-8 inner-scroll\"\n    [formGroup]=\"form\"\n  >\n    <!-- Control Group Container -->\n    <div class=\"input-group w-auto\">\n      <!-- Aggregation Picker -->\n      @if (settings.showAggregation) {\n        <c8y-aggregation-picker\n          formControlName=\"aggregation\"\n          [resetToDefault]=\"true\"\n        ></c8y-aggregation-picker>\n      }\n\n      <!-- Auto Refresh Controls -->\n      @if (settings.showAutoRefresh) {\n        <!-- Auto Refresh Toggle -->\n        <c8y-auto-refresh-control\n          [isLoading]=\"isLoading\"\n          [disableCounter]=\"shouldDisableCounter\"\n          formControlName=\"isAutoRefreshEnabled\"\n          [autoRefreshSeconds]=\"form.get('refreshInterval')?.value\"\n        ></c8y-auto-refresh-control>\n      }\n\n      @if (settings.showTimeContext) {\n        @let isHistoryMode = form.get('refreshOption')?.value === REFRESH_OPTION.HISTORY;\n        @let configValue =\n          isHistoryMode\n            ? {\n                showDateTo: true,\n                showDateFrom: true\n              }\n            : {\n                showDateTo: false,\n                showDateFrom: true\n              };\n        <c8y-date-time-context-picker\n          style=\"margin-left: -1px\"\n          formControlName=\"dateTimeContext\"\n          [shouldDisableInterval]=\"shouldDisableCustomInterval\"\n          [config]=\"configValue\"\n        ></c8y-date-time-context-picker>\n      }\n\n      <!-- Manual Refresh Button -->\n      @if (settings.showRefresh) {\n        <div class=\"input-group-btn\">\n          <button\n            class=\"btn btn-default\"\n            [attr.aria-label]=\"'Refresh' | translate\"\n            [tooltip]=\"'Refresh' | translate\"\n            placement=\"bottom\"\n            type=\"button\"\n            [adaptivePosition]=\"false\"\n            [delay]=\"500\"\n            [disabled]=\"isLoading\"\n          >\n            <i\n              [class.icon-spin]=\"isLoading\"\n              [c8yIcon]=\"'refresh'\"\n            ></i>\n          </button>\n        </div>\n      }\n    </div>\n  </form>\n}\n", styles: [":host{position:relative;display:block;cursor:not-allowed}:host form{position:relative;pointer-events:none;-webkit-user-select:none;user-select:none}:host form:after{content:\"\";position:absolute;inset:0;background:#ffffff0d;z-index:1;pointer-events:none}:host form button,:host form input,:host form select,:host form .dropdown-toggle,:host form .btn{cursor:not-allowed!important;opacity:.85}:host form *{pointer-events:none!important;-webkit-user-select:none!important;user-select:none!important}\n"], dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DateTimeContextPickerComponent, selector: "c8y-date-time-context-picker", inputs: ["disabled", "shouldDisableInterval", "config", "intervalOptions"] }, { kind: "component", type: AggregationPickerComponent, selector: "c8y-aggregation-picker", inputs: ["disabledAggregations", "resetToDefault", "layout"] }, { kind: "component", type: AutoRefreshControlComponent, selector: "c8y-auto-refresh-control", inputs: ["isAutoRefreshConnected", "autoRefreshSeconds", "disableCounter", "isEnabled", "isLoading"], outputs: ["loadingChange", "refresh"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PreviewControlsComponent, isStandalone: true, selector: "c8y-preview-controls", inputs: { widgetControls: "widgetControls", config: "config" }, ngImport: i0, template: "<!-- Main Controls -->\n@let isConfigMode = config?.displayMode === GLOBAL_CONTEXT_DISPLAY_MODE.CONFIG;\n@let settings = inlineControlsSettings$ | async;\n\n@if (form && settings) {\n  <form\n    class=\"d-flex gap-16 p-l-16 p-r-16 p-b-8 inner-scroll\"\n    [formGroup]=\"form\"\n  >\n    <!-- Control Group Container -->\n    <div class=\"input-group w-auto\">\n      <!-- Aggregation Picker -->\n      @if (settings.showAggregation) {\n        <c8y-aggregation-picker\n          formControlName=\"aggregation\"\n          [resetToDefault]=\"true\"\n        ></c8y-aggregation-picker>\n      }\n\n      <!-- Auto Refresh Controls -->\n      @if (settings.showAutoRefresh) {\n        <!-- Auto Refresh Toggle -->\n        <c8y-auto-refresh-control\n          [isLoading]=\"isLoading\"\n          [disableCounter]=\"shouldDisableCounter\"\n          formControlName=\"isAutoRefreshEnabled\"\n          [autoRefreshSeconds]=\"form.get('refreshInterval')?.value\"\n        ></c8y-auto-refresh-control>\n      }\n\n      @if (settings.showTimeContext) {\n        @let isHistoryMode = form.get('refreshOption')?.value === REFRESH_OPTION.HISTORY;\n        @let configValue =\n          isHistoryMode\n            ? {\n                showDateTo: true,\n                showDateFrom: true\n              }\n            : {\n                showDateTo: false,\n                showDateFrom: true\n              };\n        <c8y-date-time-context-picker\n          style=\"margin-left: -1px\"\n          formControlName=\"dateTimeContext\"\n          [shouldDisableInterval]=\"shouldDisableCustomInterval\"\n          [config]=\"configValue\"\n        ></c8y-date-time-context-picker>\n      }\n\n      <!-- Manual Refresh Button -->\n      @if (settings.showRefresh) {\n        <div class=\"input-group-btn\">\n          <button\n            class=\"btn btn-default\"\n            [attr.aria-label]=\"'Refresh' | translate\"\n            [tooltip]=\"'Refresh' | translate\"\n            placement=\"bottom\"\n            type=\"button\"\n            [adaptivePosition]=\"false\"\n            [delay]=\"500\"\n            [disabled]=\"isLoading\"\n          >\n            <i\n              [class.icon-spin]=\"isLoading\"\n              [c8yIcon]=\"'refresh'\"\n            ></i>\n          </button>\n        </div>\n      }\n    </div>\n  </form>\n}\n", styles: [":host{position:relative;display:block;cursor:not-allowed}:host form{position:relative;pointer-events:none;-webkit-user-select:none;user-select:none}:host form:after{content:\"\";position:absolute;inset:0;background:#ffffff0d;z-index:1;pointer-events:none}:host form button,:host form input,:host form select,:host form .dropdown-toggle,:host form .btn{cursor:not-allowed!important;opacity:.85}:host form *{pointer-events:none!important;-webkit-user-select:none!important;user-select:none!important}\n"], dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DateTimeContextPickerComponent, selector: "c8y-date-time-context-picker", inputs: ["disabled", "shouldDisableInterval", "config", "intervalOptions"] }, { kind: "component", type: AggregationPickerComponent, selector: "c8y-aggregation-picker", inputs: ["disabledAggregations", "resetToDefault", "layout", "showAutoMode", "autoModeActive", "autoModeDisabled"], outputs: ["autoModeChange"] }, { kind: "component", type: AutoRefreshControlComponent, selector: "c8y-auto-refresh-control", inputs: ["isAutoRefreshConnected", "autoRefreshSeconds", "disableCounter", "isEnabled", "isLoading"], outputs: ["loadingChange", "refresh"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PreviewControlsComponent, decorators: [{
             type: Component,
@@ -10866,7 +11119,13 @@ const CONTEXT_FEATURE = {
     /** Manual refresh button - live mode only */
     REFRESH_LIVE: 'refreshLive',
     /** Manual refresh button - history mode only */
-    REFRESH_HISTORY: 'refreshHistory'
+    REFRESH_HISTORY: 'refreshHistory',
+    /**
+     * Automatic aggregation mode ("Auto"). Computes the interval from the time frame and a target
+     * datapoint count. Only meaningful for the Data graph widget; presets without it keep the
+     * "Auto" option visible but disabled.
+     */
+    AUTO_AGGREGATION: 'autoAggregation'
 };
 /** Preset name constants for type-safe access */
 const PRESET_NAME = {
@@ -11041,6 +11300,7 @@ const CONTROL_PRESETS = {
             CONTEXT_FEATURE.HISTORY_TIME,
             CONTEXT_FEATURE.AUTO_REFRESH,
             CONTEXT_FEATURE.AGGREGATION,
+            CONTEXT_FEATURE.AUTO_AGGREGATION,
             CONTEXT_FEATURE.REFRESH
         ],
         config: [CONTEXT_FEATURE.AUTO_REFRESH, CONTEXT_FEATURE.REFRESH],
@@ -11048,6 +11308,7 @@ const CONTROL_PRESETS = {
             CONTEXT_FEATURE.LIVE_TIME,
             CONTEXT_FEATURE.HISTORY_TIME,
             CONTEXT_FEATURE.AGGREGATION,
+            CONTEXT_FEATURE.AUTO_AGGREGATION,
             CONTEXT_FEATURE.AUTO_REFRESH,
             CONTEXT_FEATURE.REFRESH
         ]
@@ -11059,6 +11320,7 @@ const CONTROL_PRESETS = {
             CONTEXT_FEATURE.HISTORY_TIME,
             CONTEXT_FEATURE.AUTO_REFRESH,
             CONTEXT_FEATURE.AGGREGATION,
+            CONTEXT_FEATURE.AUTO_AGGREGATION,
             CONTEXT_FEATURE.REFRESH
         ],
         config: [
@@ -11066,12 +11328,14 @@ const CONTROL_PRESETS = {
             CONTEXT_FEATURE.HISTORY_TIME,
             CONTEXT_FEATURE.AUTO_REFRESH,
             CONTEXT_FEATURE.AGGREGATION,
+            CONTEXT_FEATURE.AUTO_AGGREGATION,
             CONTEXT_FEATURE.REFRESH
         ],
         view_and_config: [
             CONTEXT_FEATURE.LIVE_TIME,
             CONTEXT_FEATURE.HISTORY_TIME,
             CONTEXT_FEATURE.AGGREGATION,
+            CONTEXT_FEATURE.AUTO_AGGREGATION,
             CONTEXT_FEATURE.AUTO_REFRESH,
             CONTEXT_FEATURE.REFRESH
         ]
@@ -11206,6 +11470,9 @@ function controlsToSettings(controls, displayMode, refreshOption) {
         showAutoRefresh: activeControls.includes(CONTEXT_FEATURE.AUTO_REFRESH),
         showRefreshInterval: false,
         showAggregation: activeControls.includes(CONTEXT_FEATURE.AGGREGATION),
+        // The "Auto" aggregation option stays visible everywhere but is only selectable for presets
+        // that opt in via AUTO_AGGREGATION (the Data graph widget). Elsewhere it is greyed out.
+        autoModeDisabled: !activeControls.includes(CONTEXT_FEATURE.AUTO_AGGREGATION),
         showRefresh: activeControls.includes(CONTEXT_FEATURE.REFRESH) ||
             activeControls.includes(CONTEXT_FEATURE.REFRESH_LIVE) ||
             activeControls.includes(CONTEXT_FEATURE.REFRESH_HISTORY)
@@ -11265,11 +11532,15 @@ class ConfigModeControls {
     onRefreshOptionChange(option) {
         this.refreshOption.set(option);
         const snapshot = option === REFRESH_OPTION.LIVE ? this.liveState() : this.historyState();
+        const base = snapshot ?? this.config();
+        const isLive = option === REFRESH_OPTION.LIVE;
         const context = {
-            ...(snapshot ?? this.config()),
+            ...base,
             refreshOption: option,
             displayMode: this.displayMode(),
-            aggregation: option === REFRESH_OPTION.LIVE ? null : (snapshot ?? this.config()).aggregation
+            aggregation: isLive ? null : base.aggregation,
+            autoAggregation: isLive ? null : base.autoAggregation,
+            aggregationFunction: isLive ? null : base.aggregationFunction
         };
         this.emit(context);
     }
@@ -11320,13 +11591,30 @@ class ConfigModeControls {
     }
     /** Emits configChange if the diff contains changes beyond transient flags. */
     emit(context) {
-        const diff = this.globalContextUtils.getChangedFields(this.lastEmittedContext(), context);
+        const cleanContext = this.toContextState(context);
+        const diff = this.globalContextUtils.getChangedFields(this.lastEmittedContext(), cleanContext);
         const substantiveDiff = { ...diff };
         delete substantiveDiff.isGlobalContextReady;
         if (Object.keys(substantiveDiff).length === 0)
             return;
-        this.lastEmittedContext.set(context);
-        this.configChange.emit({ context, diff });
+        this.lastEmittedContext.set(cleanContext);
+        this.configChange.emit({ context: cleanContext, diff });
+    }
+    /** Picks only known GlobalContextState fields, dropping any extra properties (e.g. datapoints) that callers may pass at runtime. */
+    toContextState(cfg) {
+        return {
+            dateTimeContext: cfg.dateTimeContext,
+            aggregation: cfg.aggregation,
+            aggregationFunction: cfg.aggregationFunction,
+            autoAggregation: cfg.autoAggregation,
+            isAutoRefreshEnabled: cfg.isAutoRefreshEnabled,
+            refreshInterval: cfg.refreshInterval,
+            refreshOption: cfg.refreshOption,
+            displayMode: cfg.displayMode,
+            source: cfg.source,
+            eventSourceId: cfg.eventSourceId,
+            isGlobalContextReady: cfg.isGlobalContextReady
+        };
     }
     getGlobalContextState(mode) {
         const globalState = this.globalContextEventService.getLatestValue(GLOBAL_CONTEXT_EVENTS.STATE_CHANGE);
@@ -11336,6 +11624,7 @@ class ConfigModeControls {
                 dateTimeContext: globalState.dateTimeContext,
                 refreshOption: globalState.refreshOption,
                 aggregation: globalState.aggregation,
+                autoAggregation: globalState.autoAggregation ?? null,
                 isAutoRefreshEnabled: globalState.isAutoRefreshEnabled,
                 refreshInterval: globalState.refreshInterval,
                 isGlobalContextReady: true
@@ -11385,7 +11674,7 @@ class ConfigModeControls {
         ></c8y-configuration-controls>
       </fieldset>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ConfigContextSelectorComponent, selector: "c8y-config-context-selector" }, { kind: "component", type: ConfigurationControlsComponent, selector: "c8y-configuration-controls", inputs: ["controlsDisplayMode", "settings", "activeMode", "liveContext", "historyContext", "supportedModes", "intervalOptions", "tabsOutletName"], outputs: ["refreshOptionChange", "contextChange", "validationStatus"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i2$2.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ConfigContextSelectorComponent, selector: "c8y-config-context-selector" }, { kind: "component", type: ConfigurationControlsComponent, selector: "c8y-configuration-controls", inputs: ["controlsDisplayMode", "settings", "activeMode", "liveContext", "historyContext", "supportedModes", "intervalOptions", "tabsOutletName"], outputs: ["refreshOptionChange", "contextChange", "validationStatus"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i3.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ConfigModeControls, decorators: [{
             type: Component,
@@ -11451,6 +11740,7 @@ class ContextControlsComponent {
         this.fb = inject(FormBuilder);
         this.aggregationValidationService = inject(AggregationValidationService);
         this.globalContextUtils = inject(GlobalContextUtilsService);
+        this.timeSeriesMigrationService = inject(TimeSeriesMigrationService);
         this.controls = input(PRESET_NAME.DEFAULT, ...(ngDevMode ? [{ debugName: "controls" }] : /* istanbul ignore next */ []));
         this.displayMode = input(GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD, ...(ngDevMode ? [{ debugName: "displayMode" }] : /* istanbul ignore next */ []));
         this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
@@ -11488,6 +11778,12 @@ class ContextControlsComponent {
          */
         this.refresh = output();
         this.lastEmittedState = signal({}, ...(ngDevMode ? [{ debugName: "lastEmittedState" }] : /* istanbul ignore next */ []));
+        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.visibleControls = computed(() => {
             const cfg = this.config();
             if (!cfg)
@@ -11513,6 +11809,7 @@ class ContextControlsComponent {
             }
             return normalized;
         }, ...(ngDevMode ? [{ debugName: "visibleControls" }] : /* istanbul ignore next */ []));
+        this.isAutoModeActive = this._isAutoModeActive.asReadonly();
         this.disabledAggregations = computed(() => {
             const dateCtx = this.config()?.dateTimeContext;
             if (!dateCtx)
@@ -11537,6 +11834,12 @@ class ContextControlsComponent {
         });
         this.syncConfigToForm();
         this.subscribeToFormChanges();
+        effect(() => {
+            this._isAutoModeActive.set(!!this.config()?.autoAggregation);
+        });
+        this.timeSeriesMigrationService
+            .isTimeSeriesMigrated()
+            .then(isMigrated => this.isTimeSeriesMigrated.set(isMigrated));
     }
     ngOnInit() {
         this.emitInitialNonDashboardState();
@@ -11546,6 +11849,15 @@ class ContextControlsComponent {
             this.onRefresh();
         }
     }
+    onAutoModeChange(isAuto) {
+        this._isAutoModeActive.set(isAuto);
+        const context = {
+            ...this.config(),
+            aggregation: isAuto ? null : (this.form.get('aggregation')?.value ?? null),
+            autoAggregation: isAuto ? { datapoints: AUTO_AGGREGATION_DATAPOINTS.DEFAULT } : null
+        };
+        this.emitIfChanged(context);
+    }
     onRefresh() {
         const cfg = this.config();
         if (!cfg.dateTimeContext) {
@@ -11596,7 +11908,12 @@ class ContextControlsComponent {
     subscribeToFormChanges() {
         this.form.valueChanges.pipe(takeUntilDestroyed()).subscribe(value => {
             const context = this.clearInvalidAggregation(value);
-            this.emitIfChanged(context);
+            // Preserve aggregation-related fields in history mode; clear them when switching to live.
+            const isLive = context.refreshOption === REFRESH_OPTION.LIVE;
+            const cfg = this.config();
+            const autoAgg = isLive ? null : (cfg?.autoAggregation ?? null);
+            const aggregationFunction = isLive ? null : (cfg?.aggregationFunction ?? null);
+            this.emitIfChanged({ ...context, autoAggregation: autoAgg, aggregationFunction });
         });
     }
     /** Clears aggregation if in LIVE mode or invalid for current time range (HISTORY mode). */
@@ -11634,7 +11951,12 @@ class ContextControlsComponent {
             data-cy="global-inline-date-context--Aggregation-display"
             formControlName="aggregation"
             [disabledAggregations]="disabledAggregations()"
+            [autoModeActive]="isAutoModeActive()"
+            [showAutoMode]="
+              visibleControls()?.includes('autoAggregation') && isTimeSeriesMigrated()
+            "
             [resetToDefault]="true"
+            (autoModeChange)="onAutoModeChange($event)"
           >
           </c8y-aggregation-picker>
         }
@@ -11680,7 +12002,7 @@ class ContextControlsComponent {
         }
       </div>
     </form>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DateTimeContextPickerComponent, selector: "c8y-date-time-context-picker", inputs: ["disabled", "shouldDisableInterval", "config", "intervalOptions"] }, { kind: "component", type: AggregationPickerComponent, selector: "c8y-aggregation-picker", inputs: ["disabledAggregations", "resetToDefault", "layout"] }, { kind: "component", type: AutoRefreshControlComponent, selector: "c8y-auto-refresh-control", inputs: ["isAutoRefreshConnected", "autoRefreshSeconds", "disableCounter", "isEnabled", "isLoading"], outputs: ["loadingChange", "refresh"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DateTimeContextPickerComponent, selector: "c8y-date-time-context-picker", inputs: ["disabled", "shouldDisableInterval", "config", "intervalOptions"] }, { kind: "component", type: AggregationPickerComponent, selector: "c8y-aggregation-picker", inputs: ["disabledAggregations", "resetToDefault", "layout", "showAutoMode", "autoModeActive", "autoModeDisabled"], outputs: ["autoModeChange"] }, { kind: "component", type: AutoRefreshControlComponent, selector: "c8y-auto-refresh-control", inputs: ["isAutoRefreshConnected", "autoRefreshSeconds", "disableCounter", "isEnabled", "isLoading"], outputs: ["loadingChange", "refresh"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ContextControlsComponent, decorators: [{
             type: Component,
@@ -11704,7 +12026,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             data-cy="global-inline-date-context--Aggregation-display"
             formControlName="aggregation"
             [disabledAggregations]="disabledAggregations()"
+            [autoModeActive]="isAutoModeActive()"
+            [showAutoMode]="
+              visibleControls()?.includes('autoAggregation') && isTimeSeriesMigrated()
+            "
             [resetToDefault]="true"
+            (autoModeChange)="onAutoModeChange($event)"
           >
           </c8y-aggregation-picker>
         }
@@ -12050,8 +12377,18 @@ class GlobalContextConnectorComponent {
         this.linkedChange.emit(linked);
         if (linked) {
             const cached = this.eventService.getLatestValue(GLOBAL_CONTEXT_EVENTS.STATE_CHANGE);
-            if (cached)
-                this.emitIfChanged(cached);
+            if (cached) {
+                // Normalize auto-aggregation fields to null when absent from the cached GC state.
+                // getChangedFields() only iterates the new state's keys, so if the user enabled
+                // autoAggregation locally while unlinked, the diff would be empty (the key is absent
+                // from the GC state) and the widget would not re-sync to the GC aggregation.
+                const normalizedState = {
+                    autoAggregation: null,
+                    aggregationFunction: null,
+                    ...cached
+                };
+                this.emitIfChanged(normalizedState);
+            }
         }
     }
     onLocalChange(event) {
@@ -12332,5 +12669,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AGGREGATIONS, AGGREGATION_ICONS, AGGREGATION_ICON_TYPE, AGGREGATION_LABELS, AGGREGATION_LIMITS, AGGREGATION_TEXTS, AGGREGATION_VALUES, AGGREGATION_VALUES_ARR, AggregationDisplayComponent, AggregationPickerComponent, AggregationPickerService, AggregationValidationService, AutoRefreshControlComponent, CONTEXT_FEATURE, CONTROL_PRESETS, ConfigContextSelectorComponent, ConfigModeControls, ConfigModeControls as ConfigModeControlsComponent, ConfigurationCollapseComponent, ConfigurationControlsComponent, ContextControlsComponent$1 as ContextControlsComponent, DEFAULT_WIDGET_TEMPLATE, DateContextQueryParamNames, DateTimeContextPickerComponent, DateTimeContextPickerService, DateTimeContextUtil, GLOBAL_CONTEXT_DASHBOARD_PATHS, GLOBAL_CONTEXT_DEFAULTS, GLOBAL_CONTEXT_DISPLAY_MODE, GLOBAL_CONTEXT_EVENTS, GLOBAL_CONTEXT_SOURCE, GlobalContextComponent, GlobalContextConfigComponent, GlobalContextConnectorComponent, GlobalContextEventService, GlobalContextFormService, GlobalContextInlineComponent, GlobalContextLinkControlsComponent, GlobalContextModule, GlobalContextNavigationService, GlobalContextQueryService, GlobalContextService, GlobalContextUtilsService, GlobalContextValidationService, GlobalContextWidgetConfigComponent, GlobalContextWidgetWrapperComponent, HistoryModeConfigurationControlsComponent, INTERVALS, INTERVAL_TITLES, IntervalPickerComponent, LIFETIME_INTERVAL, LINK_BTNS_CONFIG, LinkButtonsComponent, LiveModeConfigurationControlsComponent, LocalControlsComponent, PRESET_NAME, PreviewControlsComponent, REFRESH_OPTION, ROUTE_PATHS, RealtimeControlComponent, TIME_DURATION, TIME_INTERVAL, TIME_SPAN_MS, TIMING, TimeRangeDisplayComponent, UI_PRIORITIES, WIDGET_DISPLAY_MODE, WIDGET_FEATURE_MAP, WidgetConfigMigrationService, WidgetControlService, applyModeConstraints, buildAggregationExtensions, buildBaselineControls, buildWidgetControlsFromPresets, controlsToSettings, createAutoRefreshHandlers, createResult, defineWidgetControls, getSupportedModes, guards, isAggregationLinked, isAggregationUnlinked, isAutoRefreshDisabled, isAutoRefreshEnabled, isConfig, isDashboard, isDateTimeContextLinked, isDateTimeContextUnlinked, isHistory, isLive, isViewAndConfig, mergePartialControls, resolveWidgetControlsInput, setAutoRefreshControlsVisibility, setAutoRefreshLinks, updateBothSettings };
+export { AGGREGATIONS, AGGREGATION_ICONS, AGGREGATION_ICON_TYPE, AGGREGATION_LABELS, AGGREGATION_LIMITS, AGGREGATION_POPOVER_TEXT, AGGREGATION_TEXTS, AGGREGATION_VALUES, AGGREGATION_VALUES_ARR, AUTO_AGGREGATION_DATAPOINTS, AUTO_AGGREGATION_TEXT, AUTO_AGGREGATION_TEXT_LONG, AggregationDisplayComponent, AggregationPickerComponent, AggregationPickerService, AggregationValidationService, AutoRefreshControlComponent, CONTEXT_FEATURE, CONTROL_PRESETS, ConfigContextSelectorComponent, ConfigModeControls, ConfigModeControls as ConfigModeControlsComponent, ConfigurationCollapseComponent, ConfigurationControlsComponent, ContextControlsComponent$1 as ContextControlsComponent, DEFAULT_WIDGET_TEMPLATE, DateContextQueryParamNames, DateTimeContextPickerComponent, DateTimeContextPickerService, DateTimeContextUtil, GLOBAL_CONTEXT_DASHBOARD_PATHS, GLOBAL_CONTEXT_DEFAULTS, GLOBAL_CONTEXT_DISPLAY_MODE, GLOBAL_CONTEXT_EVENTS, GLOBAL_CONTEXT_SOURCE, GlobalContextComponent, GlobalContextConfigComponent, GlobalContextConnectorComponent, GlobalContextEventService, GlobalContextFormService, GlobalContextInlineComponent, GlobalContextLinkControlsComponent, GlobalContextModule, GlobalContextNavigationService, GlobalContextQueryService, GlobalContextService, GlobalContextUtilsService, GlobalContextValidationService, GlobalContextWidgetConfigComponent, GlobalContextWidgetWrapperComponent, HistoryModeConfigurationControlsComponent, INTERVALS, INTERVAL_TITLES, IntervalPickerComponent, LIFETIME_INTERVAL, LINK_BTNS_CONFIG, LinkButtonsComponent, LiveModeConfigurationControlsComponent, LocalControlsComponent, PRESET_NAME, PreviewControlsComponent, REFRESH_OPTION, ROUTE_PATHS, RealtimeControlComponent, TIME_DURATION, TIME_INTERVAL, TIME_SPAN_MS, TIMING, TimeRangeDisplayComponent, TimeSeriesMigrationService, UI_PRIORITIES, WIDGET_DISPLAY_MODE, WIDGET_FEATURE_MAP, WidgetConfigMigrationService, WidgetControlService, applyModeConstraints, buildAggregationExtensions, buildBaselineControls, buildWidgetControlsFromPresets, controlsToSettings, createAutoRefreshHandlers, createResult, defineWidgetControls, getSupportedModes, guards, isAggregationLinked, isAggregationUnlinked, isAutoRefreshDisabled, isAutoRefreshEnabled, isConfig, isDashboard, isDateTimeContextLinked, isDateTimeContextUnlinked, isHistory, isLive, isViewAndConfig, mergePartialControls, resolveWidgetControlsInput, setAutoRefreshControlsVisibility, setAutoRefreshLinks, updateBothSettings };
 //# sourceMappingURL=c8y-ngx-components-global-context.mjs.map