@c8y/ngx-components 1023.10.1 → 1023.14.2

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

@@ -1,28 +1,28 @@
 import { gettext } from '@c8y/ngx-components/gettext';
 import { aggregationType } from '@c8y/client';
 import * as i0 from '@angular/core';
-import { computed, signal, Injectable, inject, input, forwardRef, ChangeDetectionStrategy, Component, DestroyRef, output, Input, ViewChild, EventEmitter, viewChild, effect, ChangeDetectorRef, Output, TemplateRef, untracked, ContentChild, NgModule } from '@angular/core';
+import { computed, signal, Injectable, inject, input, forwardRef, ChangeDetectionStrategy, Component, DestroyRef, output, Input, ChangeDetectorRef, ViewChild, EventEmitter, viewChild, effect, HostListener, Output, 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 } from 'rxjs';
-import * as i1$1 from '@angular/forms';
+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 * as i1 from '@angular/forms';
 import { FormBuilder, FormsModule, NG_VALUE_ACCESSOR, 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$2 from '@angular/common';
+import * as i1$1 from '@angular/common';
 import { NgClass, CommonModule, AsyncPipe, TitleCasePipe, Location, NgTemplateOutlet } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ContextDashboardStateService } from '@c8y/ngx-components/context-dashboard-state';
-import * as i1 from 'ngx-bootstrap/tooltip';
+import * as i2 from 'ngx-bootstrap/tooltip';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
-import * as i1$3 from 'ngx-bootstrap/collapse';
+import * as i1$2 from 'ngx-bootstrap/collapse';
 import { CollapseModule } from 'ngx-bootstrap/collapse';
-import * as i2$1 from 'ngx-bootstrap/popover';
+import * as i2$2 from 'ngx-bootstrap/popover';
 import { PopoverModule } from 'ngx-bootstrap/popover';
-import * as i2 from 'ngx-bootstrap/dropdown';
+import * as i2$1 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule, BsDropdownDirective } from 'ngx-bootstrap/dropdown';
 import { A11yModule } from '@angular/cdk/a11y';
-import { withLatestFrom, filter as filter$1, tap, distinctUntilChanged as distinctUntilChanged$1, map as map$1 } from 'rxjs/operators';
+import { withLatestFrom, filter as filter$1, tap, distinctUntilChanged as distinctUntilChanged$1, map as map$1, catchError } from 'rxjs/operators';
 import { TranslateService } from '@ngx-translate/core';
 
 const GLOBAL_CONTEXT_EVENTS = {
@@ -62,7 +62,6 @@ const REFRESH_OPTION = {
     LIVE: 'live',
     HISTORY: 'history'
 };
-const DEFAULT_INTERVAL_VALUES = [5_000, 10_000, 15_000, 30_000, 60_000];
 
 const todayDate = new Date();
 const TIME_SPAN_MS = {
@@ -2874,7 +2873,7 @@ class AggregationPickerComponent {
                 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: i1.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.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2.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 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AggregationPickerComponent, decorators: [{
             type: Component,
@@ -3098,7 +3097,7 @@ class HistoryModeConfigurationControlsComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HistoryModeConfigurationControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: HistoryModeConfigurationControlsComponent, isStandalone: true, selector: "c8y-history-mode-configuration-controls", inputs: { settings: "settings", context: "context" }, outputs: { contextChange: "contextChange", validationStatus: "validationStatus" }, ngImport: i0, template: "@if (currentForm) {\n  @let SHOW_TIME_CONTEXT = settings.showTimeContext;\n  @let SHOW_AGGREGATION = settings.showAggregation;\n\n  <form [formGroup]=\"currentForm\">\n    <div class=\"content-flex-100\">\n      <div\n        class=\"col-4\"\n        [ngClass]=\"{ 'm-b-8': !SHOW_AGGREGATION }\"\n      >\n        @if (SHOW_TIME_CONTEXT) {\n          @let dateTimeContext = currentForm.get('dateTimeContext');\n          @let tempDateFromValue = dateTimeContext.get('dateFrom')?.value;\n          @let tempDateToValue = dateTimeContext.get('dateTo')?.value;\n          @let fromErrors = dateFromErrors();\n          @let toErrors = dateToErrors();\n\n          <fieldset class=\"c8y-fieldset\">\n            <legend>\n              <div class=\"standalone btn-icon-dot__item time-context m-r-4\">\n                <i\n                  class=\"\"\n                  [c8yIcon]=\"'calendar'\"\n                ></i>\n              </div>\n              {{ 'Date & time range' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"TIME_RANGE_PICKER_POPOVER | translate\"\n                placement=\"top\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n                [adaptivePosition]=\"true\"\n              ></button>\n            </legend>\n            <c8y-form-group class=\"content-flex-58 d-flex a-i-center m-b-0 p-t-16\">\n              <c8y-form-group\n                [class.has-error]=\"fromErrors\"\n                class=\"form-group-sm d-flex a-i-center col-6 flex-wrap\"\n              >\n                <label\n                  class=\"m-b-sm-0 m-r-8 text-nowrap\"\n                  style=\"min-width: 30px\"\n                  [title]=\"'From`date`' | translate\"\n                  for=\"dateFrom\"\n                  translate\n                >\n                  From`date`\n                </label>\n                <c8y-date-time-picker\n                  [class.has-error]=\"fromErrors\"\n                  id=\"dateFrom\"\n                  [maxDate]=\"tempDateToValue\"\n                  [placeholder]=\"'From`date`' | translate\"\n                  [formControl]=\"dateTimeContext.get('dateFrom')\"\n                ></c8y-date-time-picker>\n                <c8y-messages [show]=\"fromErrors\">\n                  <c8y-message\n                    name=\"dateAfterRangeMax\"\n                    [text]=\"errorMessages.dateAfterRangeMax | translate\"\n                  ></c8y-message>\n                  <c8y-message\n                    name=\"invalidDateTime\"\n                    [text]=\"errorMessages.invalidDateTime | translate\"\n                  ></c8y-message>\n                  <c8y-message\n                    name=\"invalidDateRange\"\n                    [text]=\"errorMessages.invalidDateRange | translate\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n\n              <c8y-form-group\n                [class.has-error]=\"toErrors\"\n                class=\"form-group-sm d-flex flex-wrap col-6 a-i-center\"\n              >\n                <label\n                  class=\"m-b-sm-0 text-nowrap m-r-8\"\n                  style=\"min-width: 30px\"\n                  [title]=\"'To`date`' | translate\"\n                  for=\"dateTo\"\n                  translate\n                >\n                  To`date`\n                </label>\n                <c8y-date-time-picker\n                  [class.has-error]=\"toErrors\"\n                  id=\"dateTo\"\n                  [minDate]=\"tempDateFromValue\"\n                  [placeholder]=\"'To`date`' | translate\"\n                  [formControl]=\"dateTimeContext.get('dateTo')\"\n                ></c8y-date-time-picker>\n                <c8y-messages [show]=\"toErrors\">\n                  <c8y-message\n                    name=\"dateBeforeRangeMin\"\n                    [text]=\"errorMessages.dateBeforeRangeMin | translate\"\n                  ></c8y-message>\n                  <c8y-message\n                    name=\"invalidDateTime\"\n                    [text]=\"errorMessages.invalidDateTime | translate\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n            </c8y-form-group>\n          </fieldset>\n        }\n      </div>\n      <div class=\"col-\">\n        @if (SHOW_AGGREGATION) {\n          @let selectedAggregation = currentForm.get('aggregation')?.value;\n\n          <fieldset class=\"c8y-fieldset\">\n            <legend>\n              <div class=\"standalone btn-icon-dot__item aggregation m-r-4\">\n                <i [c8yIcon]=\"'input'\"></i>\n              </div>\n              {{ 'Aggregation' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"AGGREGATION_POPOVER | translate\"\n                placement=\"top\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n                [adaptivePosition]=\"true\"\n              ></button>\n            </legend>\n            <c8y-form-group class=\"p-t-16 p-b-16 m-b-4\">\n              <c8y-aggregation-picker\n                formControlName=\"aggregation\"\n                [resetToDefault]=\"true\"\n                [disabledAggregations]=\"disabledAggregations()\"\n                [layout]=\"'radio'\"\n              ></c8y-aggregation-picker>\n            </c8y-form-group>\n          </fieldset>\n        }\n      </div>\n    </div>\n  </form>\n}\n", dependencies: [{ kind: "ngmodule", type: I18nModule }, { kind: "directive", type: i4.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i2$1.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: AggregationPickerComponent, selector: "c8y-aggregation-picker", inputs: ["disabledAggregations", "resetToDefault", "layout"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "ngmodule", type: DateTimePickerModule }, { kind: "component", type: i4.DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: HistoryModeConfigurationControlsComponent, isStandalone: true, selector: "c8y-history-mode-configuration-controls", inputs: { settings: "settings", context: "context" }, outputs: { contextChange: "contextChange", validationStatus: "validationStatus" }, ngImport: i0, template: "@if (currentForm) {\n  @let SHOW_TIME_CONTEXT = settings.showTimeContext;\n  @let SHOW_AGGREGATION = settings.showAggregation;\n\n  <form [formGroup]=\"currentForm\">\n    <div class=\"content-flex-100\">\n      <div\n        class=\"col-4\"\n        [ngClass]=\"{ 'm-b-8': !SHOW_AGGREGATION }\"\n      >\n        @if (SHOW_TIME_CONTEXT) {\n          @let dateTimeContext = currentForm.get('dateTimeContext');\n          @let tempDateFromValue = dateTimeContext.get('dateFrom')?.value;\n          @let tempDateToValue = dateTimeContext.get('dateTo')?.value;\n          @let fromErrors = dateFromErrors();\n          @let toErrors = dateToErrors();\n\n          <fieldset class=\"c8y-fieldset\">\n            <legend>\n              <div class=\"standalone btn-icon-dot__item time-context m-r-4\">\n                <i\n                  class=\"\"\n                  [c8yIcon]=\"'calendar'\"\n                ></i>\n              </div>\n              {{ 'Date & time range' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"TIME_RANGE_PICKER_POPOVER | translate\"\n                placement=\"top\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n                [adaptivePosition]=\"true\"\n              ></button>\n            </legend>\n            <c8y-form-group class=\"content-flex-58 d-flex a-i-center m-b-0 p-t-16\">\n              <c8y-form-group\n                [class.has-error]=\"fromErrors\"\n                class=\"form-group-sm d-flex a-i-center col-6 flex-wrap\"\n              >\n                <label\n                  class=\"m-b-sm-0 m-r-8 text-nowrap\"\n                  style=\"min-width: 30px\"\n                  [title]=\"'From`date`' | translate\"\n                  for=\"dateFrom\"\n                  translate\n                >\n                  From`date`\n                </label>\n                <c8y-date-time-picker\n                  [class.has-error]=\"fromErrors\"\n                  id=\"dateFrom\"\n                  [maxDate]=\"tempDateToValue\"\n                  [placeholder]=\"'From`date`' | translate\"\n                  [formControl]=\"dateTimeContext.get('dateFrom')\"\n                ></c8y-date-time-picker>\n                <c8y-messages [show]=\"fromErrors\">\n                  <c8y-message\n                    name=\"dateAfterRangeMax\"\n                    [text]=\"errorMessages.dateAfterRangeMax | translate\"\n                  ></c8y-message>\n                  <c8y-message\n                    name=\"invalidDateTime\"\n                    [text]=\"errorMessages.invalidDateTime | translate\"\n                  ></c8y-message>\n                  <c8y-message\n                    name=\"invalidDateRange\"\n                    [text]=\"errorMessages.invalidDateRange | translate\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n\n              <c8y-form-group\n                [class.has-error]=\"toErrors\"\n                class=\"form-group-sm d-flex flex-wrap col-6 a-i-center\"\n              >\n                <label\n                  class=\"m-b-sm-0 text-nowrap m-r-8\"\n                  style=\"min-width: 30px\"\n                  [title]=\"'To`date`' | translate\"\n                  for=\"dateTo\"\n                  translate\n                >\n                  To`date`\n                </label>\n                <c8y-date-time-picker\n                  [class.has-error]=\"toErrors\"\n                  id=\"dateTo\"\n                  [minDate]=\"tempDateFromValue\"\n                  [placeholder]=\"'To`date`' | translate\"\n                  [formControl]=\"dateTimeContext.get('dateTo')\"\n                ></c8y-date-time-picker>\n                <c8y-messages [show]=\"toErrors\">\n                  <c8y-message\n                    name=\"dateBeforeRangeMin\"\n                    [text]=\"errorMessages.dateBeforeRangeMin | translate\"\n                  ></c8y-message>\n                  <c8y-message\n                    name=\"invalidDateTime\"\n                    [text]=\"errorMessages.invalidDateTime | translate\"\n                  ></c8y-message>\n                </c8y-messages>\n              </c8y-form-group>\n            </c8y-form-group>\n          </fieldset>\n        }\n      </div>\n      <div class=\"col-\">\n        @if (SHOW_AGGREGATION) {\n          @let selectedAggregation = currentForm.get('aggregation')?.value;\n\n          <fieldset class=\"c8y-fieldset\">\n            <legend>\n              <div class=\"standalone btn-icon-dot__item aggregation m-r-4\">\n                <i [c8yIcon]=\"'input'\"></i>\n              </div>\n              {{ 'Aggregation' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"AGGREGATION_POPOVER | translate\"\n                placement=\"top\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n                [adaptivePosition]=\"true\"\n              ></button>\n            </legend>\n            <c8y-form-group class=\"p-t-16 p-b-16 m-b-4\">\n              <c8y-aggregation-picker\n                formControlName=\"aggregation\"\n                [resetToDefault]=\"true\"\n                [disabledAggregations]=\"disabledAggregations()\"\n                [layout]=\"'radio'\"\n              ></c8y-aggregation-picker>\n            </c8y-form-group>\n          </fieldset>\n        }\n      </div>\n    </div>\n  </form>\n}\n", dependencies: [{ kind: "ngmodule", type: I18nModule }, { kind: "directive", type: i4.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i2$2.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: AggregationPickerComponent, selector: "c8y-aggregation-picker", inputs: ["disabledAggregations", "resetToDefault", "layout"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "ngmodule", type: DateTimePickerModule }, { kind: "component", type: i4.DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HistoryModeConfigurationControlsComponent, decorators: [{
             type: Component,
@@ -3164,7 +3163,7 @@ class IntervalPickerComponent {
                 useExisting: forwardRef(() => IntervalPickerComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "@for (interval of INTERVALS; track interval.id) {\n  @let isSelected = interval.id === value;\n  @let checkVisibility = isSelected ? 'visible' : 'hidden';\n  @let isIntervalDisabled = shouldDisableInterval?.isDisabled;\n  @let isIntervalDisabledMsg = shouldDisableInterval?.msg;\n  @let isCustom = interval.id === 'custom';\n\n  <li [class.active]=\"isSelected\">\n    <div\n      [ngStyle]=\"{\n        display: 'flex',\n        flexDirection: 'row',\n        alignItems: 'center'\n      }\"\n    >\n      <button\n        class=\"mr-2\"\n        type=\"button\"\n        [attr.data-cy]=\"'global-context--interval-' + interval.id\"\n        (click)=\"onIntervalSelect(interval.id)\"\n        [disabled]=\"isCustom && isIntervalDisabled\"\n      >\n        <span [class.text-primary]=\"isSelected\">\n          <span\n            [c8yIcon]=\"'check'\"\n            [style.visibility]=\"checkVisibility\"\n          ></span>\n          {{ interval.title | translate }}\n        </span>\n      </button>\n    </div>\n  </li>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: A11yModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "@for (interval of INTERVALS; track interval.id) {\n  @let isSelected = interval.id === value;\n  @let checkVisibility = isSelected ? 'visible' : 'hidden';\n  @let isIntervalDisabled = shouldDisableInterval?.isDisabled;\n  @let isIntervalDisabledMsg = shouldDisableInterval?.msg;\n  @let isCustom = interval.id === 'custom';\n\n  <li [class.active]=\"isSelected\">\n    <div\n      [ngStyle]=\"{\n        display: 'flex',\n        flexDirection: 'row',\n        alignItems: 'center'\n      }\"\n    >\n      <button\n        class=\"mr-2\"\n        type=\"button\"\n        [attr.data-cy]=\"'global-context--interval-' + interval.id\"\n        (click)=\"onIntervalSelect(interval.id)\"\n        [disabled]=\"isCustom && isIntervalDisabled\"\n      >\n        <span [class.text-primary]=\"isSelected\">\n          <span\n            [c8yIcon]=\"'check'\"\n            [style.visibility]=\"checkVisibility\"\n          ></span>\n          {{ interval.title | translate }}\n        </span>\n      </button>\n    </div>\n  </li>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: A11yModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IntervalPickerComponent, decorators: [{
             type: Component,
@@ -3202,6 +3201,7 @@ class DateTimeContextPickerComponent {
         this.formBuilder = inject(FormBuilder);
         this.destroyRef = inject(DestroyRef);
         this.datePipe = inject(DatePipe);
+        this.cdr = inject(ChangeDetectorRef);
         this.INTERVALS = INTERVAL_TITLES;
         this.DATE_FORMAT = 'medium';
         this.TIME_INTERVAL = TIME_INTERVAL;
@@ -3245,6 +3245,7 @@ class DateTimeContextPickerComponent {
                 this.canEmit.set(true);
                 this.customSnapshot.set(null);
             }
+            this.cdr.markForCheck();
         }
     }
     registerOnChange(fn) {
@@ -3453,7 +3454,7 @@ class DateTimeContextPickerComponent {
                 useExisting: forwardRef(() => DateTimeContextPickerComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: BsDropdownDirective, descendants: true }], ngImport: i0, template: "@if (form) {\n  @let intervalValue = form.get('interval')?.value;\n  @let isIntervalNone = intervalValue === 'none';\n  @let dateFromControl = form.get('dateFrom');\n  @let dateToControl = form.get('dateTo');\n  @let dateRangeLabel = getDateRangeLabel();\n\n  <form [formGroup]=\"form\">\n    <div\n      class=\"dropdown max-width-100\"\n      container=\"body\"\n      #dropdown=\"bs-dropdown\"\n      dropdown\n      [insideClick]=\"true\"\n      [isDisabled]=\"disabled\"\n      (onShown)=\"onShownDropdown()\"\n      (onHidden)=\"onHiddenDropdown()\"\n    >\n      <!-- Dropdown toggle button with better accessibility -->\n      <button\n        class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n        [attr.aria-label]=\"dateRangeLabel\"\n        [tooltip]=\"dateRangeLabel\"\n        placement=\"top\"\n        container=\"body\"\n        [adaptivePosition]=\"false\"\n        [delay]=\"500\"\n        dropdownToggle\n        data-cy=\"c8y-date-time-context-picker--picker-toggle\"\n      >\n        <i\n          class=\"m-r-4\"\n          [c8yIcon]=\"'schedule1'\"\n          aria-hidden=\"true\"\n        ></i>\n        <div class=\"d-col text-left flex-grow min-width-0\">\n          @if (isIntervalNone) {\n            <span class=\"text-10 text-muted l-h-1\">\n              {{ 'No date filter' | translate }}\n            </span>\n          } @else {\n            <span\n              class=\"text-10 text-muted l-h-1\"\n              data-cy=\"c8y-date-time-context-picker--picker-label\"\n            >\n              {{ INTERVALS[intervalValue] | translate }}\n            </span>\n            <span\n              class=\"text-12 l-h-1 text-medium text-truncate\"\n              data-cy=\"c8y-date-time-context-picker--picker-time-range\"\n            >\n              {{ form.get('dateFrom')?.value | c8yDate: DATE_FORMAT }} \u2014\n              {{ form.get('dateTo')?.value | c8yDate: DATE_FORMAT }}\n            </span>\n          }\n        </div>\n        <span\n          class=\"caret m-r-16 m-l-4\"\n          aria-hidden=\"true\"\n        ></span>\n      </button>\n\n      <!-- Dropdown menu -->\n      <ul\n        class=\"dropdown-menu dropdown-menu--date-range\"\n        role=\"menu\"\n        *dropdownMenu\n      >\n        @if (dropdown.isOpen) {\n          <!-- Interval picker section -->\n          <c8y-interval-picker\n            class=\"d-contents\"\n            formControlName=\"interval\"\n            [shouldDisableInterval]=\"shouldDisableInterval\"\n          ></c8y-interval-picker>\n\n          <!-- Custom date range section -->\n          @if (isCustomMode() && (config?.showDateFrom || config?.showDateTo)) {\n            <div class=\"p-l-16 p-r-16\">\n              @if (config?.showDateFrom) {\n                <c8y-form-group [class.has-error]=\"getDateFromErrors()\">\n                  <label\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]=\"getDateFromErrors()\"\n                    id=\"dateFrom\"\n                    [maxDate]=\"tempDateToControl?.value\"\n                    [placeholder]=\"'From`date`' | translate\"\n                    [formControl]=\"tempDateFromControl\"\n                  ></c8y-date-time-picker>\n                  <c8y-messages [show]=\"getDateFromErrors()\">\n                    <c8y-message\n                      name=\"dateAfterRangeMax\"\n                      [text]=\"errorMessages.dateAfterRangeMax | translate\"\n                    ></c8y-message>\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-message\n                      name=\"bsDate\"\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\n              @if (config?.showDateTo) {\n                <c8y-form-group [class.has-error]=\"getDateToErrors()\">\n                  <label\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]=\"getDateToErrors()\"\n                    id=\"dateTo\"\n                    [minDate]=\"tempDateFromControl?.value\"\n                    [placeholder]=\"'To`date`' | translate\"\n                    [formControl]=\"tempDateToControl\"\n                  ></c8y-date-time-picker>\n                  <c8y-messages [show]=\"getDateToErrors()\">\n                    <c8y-message\n                      name=\"dateAfterRangeMax\"\n                      [text]=\"errorMessages.dateAfterRangeMax | translate\"\n                    ></c8y-message>\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-message\n                      name=\"bsDate\"\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            </div>\n\n            <!-- Action buttons -->\n            <div class=\"p-16 d-flex gap-8 separator-top\">\n              <button\n                class=\"btn btn-default btn-sm flex-grow\"\n                title=\"{{ 'Reset' | translate }}\"\n                type=\"button\"\n                (click)=\"reset()\"\n                translate\n              >\n                Reset\n              </button>\n\n              <button\n                class=\"btn btn-primary btn-sm flex-grow\"\n                title=\"{{ 'Apply' | translate }}\"\n                type=\"button\"\n                (click)=\"applyDateTimeContext()\"\n                [disabled]=\"isApplyDisabled()\"\n                translate\n              >\n                Apply\n              </button>\n            </div>\n          }\n        }\n      </ul>\n    </div>\n  </form>\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.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.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2.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: i4.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: IntervalPickerComponent, selector: "c8y-interval-picker", inputs: ["INTERVALS", "shouldDisableInterval"] }, { 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: "pipe", type: i4.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: BsDropdownDirective, descendants: true }], ngImport: i0, template: "@if (form) {\n  @let intervalValue = form.get('interval')?.value;\n  @let isIntervalNone = intervalValue === 'none';\n  @let dateFromControl = form.get('dateFrom');\n  @let dateToControl = form.get('dateTo');\n  @let dateRangeLabel = getDateRangeLabel();\n\n  <form [formGroup]=\"form\">\n    <div\n      class=\"dropdown max-width-100\"\n      container=\"body\"\n      #dropdown=\"bs-dropdown\"\n      dropdown\n      [insideClick]=\"true\"\n      [isDisabled]=\"disabled\"\n      (onShown)=\"onShownDropdown()\"\n      (onHidden)=\"onHiddenDropdown()\"\n    >\n      <!-- Dropdown toggle button with better accessibility -->\n      <button\n        class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n        [attr.aria-label]=\"dateRangeLabel\"\n        [tooltip]=\"dateRangeLabel\"\n        placement=\"top\"\n        container=\"body\"\n        [adaptivePosition]=\"false\"\n        [delay]=\"500\"\n        dropdownToggle\n        data-cy=\"c8y-date-time-context-picker--picker-toggle\"\n      >\n        <i\n          class=\"m-r-4\"\n          [c8yIcon]=\"'schedule1'\"\n          aria-hidden=\"true\"\n        ></i>\n        <div class=\"d-col text-left flex-grow min-width-0\">\n          @if (isIntervalNone) {\n            <span class=\"text-10 text-muted l-h-1\">\n              {{ 'No date filter' | translate }}\n            </span>\n          } @else {\n            <span\n              class=\"text-10 text-muted l-h-1\"\n              data-cy=\"c8y-date-time-context-picker--picker-label\"\n            >\n              {{ INTERVALS[intervalValue] | translate }}\n            </span>\n            <span\n              class=\"text-12 l-h-1 text-medium text-truncate\"\n              data-cy=\"c8y-date-time-context-picker--picker-time-range\"\n            >\n              {{ form.get('dateFrom')?.value | c8yDate: DATE_FORMAT }} \u2014\n              {{ form.get('dateTo')?.value | c8yDate: DATE_FORMAT }}\n            </span>\n          }\n        </div>\n        <span\n          class=\"caret m-r-16 m-l-4\"\n          aria-hidden=\"true\"\n        ></span>\n      </button>\n\n      <!-- Dropdown menu -->\n      <ul\n        class=\"dropdown-menu dropdown-menu--date-range\"\n        role=\"menu\"\n        *dropdownMenu\n      >\n        @if (dropdown.isOpen) {\n          <!-- Interval picker section -->\n          <c8y-interval-picker\n            class=\"d-contents\"\n            formControlName=\"interval\"\n            [shouldDisableInterval]=\"shouldDisableInterval\"\n          ></c8y-interval-picker>\n\n          <!-- Custom date range section -->\n          @if (isCustomMode() && (config?.showDateFrom || config?.showDateTo)) {\n            <div class=\"p-l-16 p-r-16\">\n              @if (config?.showDateFrom) {\n                <c8y-form-group [class.has-error]=\"getDateFromErrors()\">\n                  <label\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]=\"getDateFromErrors()\"\n                    id=\"dateFrom\"\n                    [maxDate]=\"tempDateToControl?.value\"\n                    [placeholder]=\"'From`date`' | translate\"\n                    [formControl]=\"tempDateFromControl\"\n                  ></c8y-date-time-picker>\n                  <c8y-messages [show]=\"getDateFromErrors()\">\n                    <c8y-message\n                      name=\"dateAfterRangeMax\"\n                      [text]=\"errorMessages.dateAfterRangeMax | translate\"\n                    ></c8y-message>\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-message\n                      name=\"bsDate\"\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\n              @if (config?.showDateTo) {\n                <c8y-form-group [class.has-error]=\"getDateToErrors()\">\n                  <label\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]=\"getDateToErrors()\"\n                    id=\"dateTo\"\n                    [minDate]=\"tempDateFromControl?.value\"\n                    [placeholder]=\"'To`date`' | translate\"\n                    [formControl]=\"tempDateToControl\"\n                  ></c8y-date-time-picker>\n                  <c8y-messages [show]=\"getDateToErrors()\">\n                    <c8y-message\n                      name=\"dateAfterRangeMax\"\n                      [text]=\"errorMessages.dateAfterRangeMax | translate\"\n                    ></c8y-message>\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-message\n                      name=\"bsDate\"\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            </div>\n\n            <!-- Action buttons -->\n            <div class=\"p-16 d-flex gap-8 separator-top\">\n              <button\n                class=\"btn btn-default btn-sm flex-grow\"\n                title=\"{{ 'Reset' | translate }}\"\n                type=\"button\"\n                (click)=\"reset()\"\n                translate\n              >\n                Reset\n              </button>\n\n              <button\n                class=\"btn btn-primary btn-sm flex-grow\"\n                title=\"{{ 'Apply' | translate }}\"\n                type=\"button\"\n                (click)=\"applyDateTimeContext()\"\n                [disabled]=\"isApplyDisabled()\"\n                translate\n              >\n                Apply\n              </button>\n            </div>\n          }\n        }\n      </ul>\n    </div>\n  </form>\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],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: "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: i4.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: IntervalPickerComponent, selector: "c8y-interval-picker", inputs: ["INTERVALS", "shouldDisableInterval"] }, { 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: "pipe", type: i4.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DateTimeContextPickerComponent, decorators: [{
             type: Component,
@@ -3560,7 +3561,7 @@ class LiveModeConfigurationControlsComponent {
         }, { emitEvent: false });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LiveModeConfigurationControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: LiveModeConfigurationControlsComponent, isStandalone: true, selector: "c8y-live-mode-configuration-controls", inputs: { settings: "settings", 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              ></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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DateTimeContextPickerComponent, selector: "c8y-date-time-context-picker", inputs: ["disabled", "shouldDisableInterval", "config"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i2$1.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: "20.3.15", type: LiveModeConfigurationControlsComponent, isStandalone: true, selector: "c8y-live-mode-configuration-controls", inputs: { settings: "settings", 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              ></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],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"] }, { 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LiveModeConfigurationControlsComponent, decorators: [{
             type: Component,
@@ -3993,7 +3994,7 @@ class ConfigurationCollapseComponent {
         this.hasPendingChanges.set(!isEqual(snapshot, latest));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigurationCollapseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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  [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        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$3.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i2$1.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", "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: "20.3.15", 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  [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        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", "tabsOutletName"], outputs: ["refreshOptionChange", "contextChange", "validationStatus"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigurationCollapseComponent, decorators: [{
             type: Component,
@@ -4559,6 +4560,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             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\">\n    <span class=\"text-10 l-h-1 text-muted\">\n      {{ 'Aggregation' | translate }}\n    </span>\n    <span\n      class=\"text-12 l-h-1 text-medium text-truncate\"\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 }] }] } });
 
+/**
+ * Source of auto-refresh state change.
+ */
+var AutoRefreshChangeSource;
+(function (AutoRefreshChangeSource) {
+    /** External change from user interaction or form value changes */
+    AutoRefreshChangeSource["External"] = "external";
+    /** Internal change from tab visibility detection */
+    AutoRefreshChangeSource["Visibility"] = "visibility";
+})(AutoRefreshChangeSource || (AutoRefreshChangeSource = {}));
 /**
  * Auto-refresh toggle control with countdown timer.
  *
@@ -4581,6 +4592,8 @@ class AutoRefreshControlComponent {
         this.cdr = inject(ChangeDetectorRef);
         // Grace period handling for widgets without proper loading state
         this.gracePeriodTimeout = null;
+        // Track if auto-refresh was disabled by tab visibility (not user action)
+        this.disabledByTabVisibility = false;
         this.loadingChange = new EventEmitter();
         this.refresh = new EventEmitter();
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -4620,17 +4633,28 @@ class AutoRefreshControlComponent {
     ngOnDestroy() {
         this.clearGracePeriod();
     }
+    onVisibilityChange() {
+        if (document.hidden && this.isEnabled) {
+            this.disabledByTabVisibility = true;
+            this.setAutoRefreshEnabled(false, AutoRefreshChangeSource.Visibility);
+        }
+        else {
+            if (this.disabledByTabVisibility) {
+                this.setAutoRefreshEnabled(true, AutoRefreshChangeSource.Visibility);
+            }
+        }
+    }
     toggleIntervalRefresh() {
-        this.isEnabled = !this.isEnabled;
-        this.onChange(this.isEnabled);
-        this.syncCountdownState();
-        this.cdr.markForCheck();
+        this.setAutoRefreshEnabled(!this.isEnabled, AutoRefreshChangeSource.External);
     }
     registerOnChange(fn) {
         this.onChange = fn;
     }
     writeValue(showIntervalRefresh) {
         this.isEnabled = showIntervalRefresh;
+        // External state change always clears the flag
+        // This ensures visibility doesn't re-enable after external disable
+        this.disabledByTabVisibility = false;
         this.syncCountdownState();
         this.cdr.markForCheck();
     }
@@ -4641,6 +4665,22 @@ class AutoRefreshControlComponent {
         this.clearGracePeriod();
         this.countdownIntervalComponent?.reset();
     }
+    /**
+     * Internal method to change auto-refresh state with proper flag management.
+     * @param enabled - New enabled state
+     * @param source - Source of the change (External or Visibility)
+     */
+    setAutoRefreshEnabled(enabled, source) {
+        this.isEnabled = enabled;
+        if (enabled || source === AutoRefreshChangeSource.External) {
+            this.disabledByTabVisibility = false;
+        }
+        if (source === AutoRefreshChangeSource.External) {
+            this.onChange(this.isEnabled);
+        }
+        this.syncCountdownState();
+        this.cdr.markForCheck();
+    }
     setupLoadingHandler() {
         this.loading$
             .pipe(withLatestFrom(this.countdownComponentReady$), filter$1(([_, component]) => component !== null), tap(([isLoading, component]) => {
@@ -4688,13 +4728,13 @@ class AutoRefreshControlComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AutoRefreshControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AutoRefreshControlComponent, isStandalone: true, selector: "c8y-auto-refresh-control", inputs: { isAutoRefreshConnected: "isAutoRefreshConnected", autoRefreshSeconds: "autoRefreshSeconds", disableCounter: "disableCounter", isEnabled: "isEnabled", isLoading: "isLoading" }, outputs: { loadingChange: "loadingChange", refresh: "refresh" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AutoRefreshControlComponent, isStandalone: true, selector: "c8y-auto-refresh-control", inputs: { isAutoRefreshConnected: "isAutoRefreshConnected", autoRefreshSeconds: "autoRefreshSeconds", disableCounter: "disableCounter", isEnabled: "isEnabled", isLoading: "isLoading" }, outputs: { loadingChange: "loadingChange", refresh: "refresh" }, host: { listeners: { "document:visibilitychange": "onVisibilityChange()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AutoRefreshControlComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "countdownIntervalComponent", first: true, predicate: CountdownIntervalComponent, descendants: true }], ngImport: i0, template: "@let autoRefreshTooltip = (isEnabled ? DISABLE_AUTO_REFRESH : ENABLE_AUTO_REFRESH) | translate;\n@let countdownInterval = (autoRefreshSeconds$ | async) ?? DEFAULT_INTERVAL_VALUE;\n\n<button\n  [class.btn]=\"disableCounter\"\n  [class.btn-link]=\"disableCounter\"\n  [class.c8y-realtime]=\"disableCounter\"\n  [class.toggle-countdown]=\"!disableCounter\"\n  [attr.aria-label]=\"autoRefreshTooltip\"\n  [tooltip]=\"tooltipTpl\"\n  placement=\"bottom\"\n  container=\"body\"\n  [delay]=\"500\"\n  (click)=\"toggleIntervalRefresh(); $event.stopPropagation()\"\n  [adaptivePosition]=\"false\"\n  [disabled]=\"isLoading\"\n  mode\n  data-cy=\"global-date-context--Auto-refresh-toggle\"\n>\n  <div class=\"d-flex a-i-center\">\n    @if (!disableCounter) {\n      <c8y-countdown-interval\n        #countdown\n        [hidden]=\"!isEnabled\"\n        [countdownInterval]=\"countdownInterval\"\n        [config]=\"countdownIntervalConfig\"\n      ></c8y-countdown-interval>\n    }\n\n    @if (!isEnabled) {\n      <i\n        class=\"icon-20 text-primary\"\n        [c8yIcon]=\"'pause-circle'\"\n        data-cy=\"global-date-context--Auto-refresh-toggle-pause\"\n      ></i>\n    } @else if (disableCounter) {\n      <span class=\"c8y-pulse m-0 active\"></span>\n    }\n  </div>\n</button>\n\n<ng-template #tooltipTpl>\n  {{ autoRefreshTooltip }}\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CountdownIntervalModule }, { kind: "component", type: i4.CountdownIntervalComponent, selector: "c8y-countdown-interval", inputs: ["countdownInterval", "config"], outputs: ["countdownEnded"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.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: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "countdownIntervalComponent", first: true, predicate: CountdownIntervalComponent, descendants: true }], ngImport: i0, template: "@let autoRefreshTooltip = (isEnabled ? DISABLE_AUTO_REFRESH : ENABLE_AUTO_REFRESH) | translate;\n@let countdownInterval = (autoRefreshSeconds$ | async) ?? DEFAULT_INTERVAL_VALUE;\n\n<button\n  [class.btn]=\"disableCounter\"\n  [class.btn-link]=\"disableCounter\"\n  [class.c8y-realtime]=\"disableCounter\"\n  [class.toggle-countdown]=\"!disableCounter\"\n  [attr.aria-label]=\"autoRefreshTooltip\"\n  [tooltip]=\"tooltipTpl\"\n  placement=\"bottom\"\n  container=\"body\"\n  [delay]=\"500\"\n  (click)=\"toggleIntervalRefresh(); $event.stopPropagation()\"\n  [adaptivePosition]=\"false\"\n  [disabled]=\"isLoading\"\n  mode\n  data-cy=\"global-date-context--Auto-refresh-toggle\"\n>\n  <div class=\"d-flex a-i-center\">\n    @if (!disableCounter) {\n      <c8y-countdown-interval\n        #countdown\n        [hidden]=\"!isEnabled\"\n        [countdownInterval]=\"countdownInterval\"\n        [config]=\"countdownIntervalConfig\"\n      ></c8y-countdown-interval>\n    }\n\n    @if (!isEnabled) {\n      <i\n        class=\"icon-20 text-primary\"\n        [c8yIcon]=\"'pause-circle'\"\n        data-cy=\"global-date-context--Auto-refresh-toggle-pause\"\n      ></i>\n    } @else if (disableCounter) {\n      <span class=\"c8y-pulse m-0 active\"></span>\n    }\n  </div>\n</button>\n\n<ng-template #tooltipTpl>\n  {{ autoRefreshTooltip }}\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CountdownIntervalModule }, { kind: "component", type: i4.CountdownIntervalComponent, selector: "c8y-countdown-interval", inputs: ["countdownInterval", "config"], outputs: ["countdownEnded"] }, { 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: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AutoRefreshControlComponent, decorators: [{
             type: Component,
@@ -4722,6 +4762,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Output
             }], refresh: [{
                 type: Output
+            }], onVisibilityChange: [{
+                type: HostListener,
+                args: ['document:visibilitychange']
             }] } });
 
 class TimeRangeDisplayComponent {
@@ -4765,7 +4808,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * ```
  *
  */
-class ContextControlsComponent {
+let ContextControlsComponent$1 = class ContextControlsComponent {
     constructor() {
         // Static properties
         this.REFRESH_OPTION = REFRESH_OPTION;
@@ -4848,9 +4891,9 @@ class ContextControlsComponent {
         return pick(settings, requiredKeys);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ContextControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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\"\n        style=\"margin-left: -1px\"\n        (click)=\"contextClick.emit($event); $event.stopPropagation()\"\n      >\n        <div class=\"d-col a-i-start form-control\">\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\"\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\"\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); $event.stopPropagation()\"\n      >\n        <div class=\"d-col a-i-center form-control\">\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\"\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\"\n          [dateTimeContext]=\"form.get('dateTimeContext')?.value\"\n        ></c8y-time-range-display>\n        <c8y-aggregation-display\n          style=\"margin-left: -1px\"\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\"\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: i1.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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "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 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ContextControlsComponent, decorators: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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\"\n        style=\"margin-left: -1px\"\n        (click)=\"contextClick.emit($event); $event.stopPropagation()\"\n      >\n        <div class=\"d-col a-i-start form-control\">\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\"\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\"\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); $event.stopPropagation()\"\n      >\n        <div class=\"d-col a-i-center form-control\">\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\"\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\"\n          [dateTimeContext]=\"form.get('dateTimeContext')?.value\"\n        ></c8y-time-range-display>\n        <c8y-aggregation-display\n          style=\"margin-left: -1px\"\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\"\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],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 }); }
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ContextControlsComponent$1, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-context-controls', standalone: true, imports: [
                         C8yTranslatePipe,
@@ -5383,14 +5426,14 @@ class GlobalContextComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GlobalContextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: GlobalContextComponent, isStandalone: true, selector: "c8y-global-context", viewQueries: [{ propertyName: "configurationCollapseComponent", first: true, predicate: ConfigurationCollapseComponent, descendants: true }], ngImport: i0, template: "@if (globalContextState() !== null && isVisible()) {\n  <c8y-context-controls\n    [settings]=\"settings\"\n    [context]=\"globalContextState()\"\n    [isLoading]=\"globalContextService.isLoading()\"\n    (refresh)=\"onRefresh()\"\n    (contextChange)=\"onChanges($event)\"\n    (contextClick)=\"gcs.toggle()\"\n  ></c8y-context-controls>\n\n  <c8y-configuration-collapse\n    #gcs\n    [context]=\"globalContextState()\"\n    (contextChange)=\"onChanges($event)\"\n    (refreshOptionChange)=\"onRefreshOptionChanges($event)\"\n    (savePreferenceChange)=\"shouldSaveDashboardState = $event\"\n  ></c8y-configuration-collapse>\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "component", type: ContextControlsComponent, selector: "c8y-context-controls", inputs: ["showDisplayModeLabel", "isLoading", "settings", "context"], outputs: ["contextChange", "refresh", "contextClick"] }, { kind: "component", type: ConfigurationCollapseComponent, selector: "c8y-configuration-collapse", inputs: ["supportedModes", "context"], outputs: ["contextChange", "refreshOptionChange", "savePreferenceChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: GlobalContextComponent, isStandalone: true, selector: "c8y-global-context", viewQueries: [{ propertyName: "configurationCollapseComponent", first: true, predicate: ConfigurationCollapseComponent, descendants: true }], ngImport: i0, template: "@if (globalContextState() !== null && isVisible()) {\n  <c8y-context-controls\n    [settings]=\"settings\"\n    [context]=\"globalContextState()\"\n    [isLoading]=\"globalContextService.isLoading()\"\n    (refresh)=\"onRefresh()\"\n    (contextChange)=\"onChanges($event)\"\n    (contextClick)=\"gcs.toggle()\"\n  ></c8y-context-controls>\n\n  <c8y-configuration-collapse\n    #gcs\n    [context]=\"globalContextState()\"\n    (contextChange)=\"onChanges($event)\"\n    (refreshOptionChange)=\"onRefreshOptionChanges($event)\"\n    (savePreferenceChange)=\"shouldSaveDashboardState = $event\"\n  ></c8y-configuration-collapse>\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "component", type: ContextControlsComponent$1, selector: "c8y-context-controls", inputs: ["showDisplayModeLabel", "isLoading", "settings", "context"], outputs: ["contextChange", "refresh", "contextClick"] }, { kind: "component", type: ConfigurationCollapseComponent, selector: "c8y-configuration-collapse", inputs: ["supportedModes", "context"], outputs: ["contextChange", "refreshOptionChange", "savePreferenceChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GlobalContextComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         ReactiveFormsModule,
                         TooltipModule,
-                        ContextControlsComponent,
+                        ContextControlsComponent$1,
                         ConfigurationCollapseComponent
                     ], selector: 'c8y-global-context', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (globalContextState() !== null && isVisible()) {\n  <c8y-context-controls\n    [settings]=\"settings\"\n    [context]=\"globalContextState()\"\n    [isLoading]=\"globalContextService.isLoading()\"\n    (refresh)=\"onRefresh()\"\n    (contextChange)=\"onChanges($event)\"\n    (contextClick)=\"gcs.toggle()\"\n  ></c8y-context-controls>\n\n  <c8y-configuration-collapse\n    #gcs\n    [context]=\"globalContextState()\"\n    (contextChange)=\"onChanges($event)\"\n    (refreshOptionChange)=\"onRefreshOptionChanges($event)\"\n    (savePreferenceChange)=\"shouldSaveDashboardState = $event\"\n  ></c8y-configuration-collapse>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { configurationCollapseComponent: [{
@@ -5905,7 +5948,7 @@ class GlobalContextLinkControlsComponent {
       </button>
       <ng-template #masterTooltipTemplate>{{ masterTooltipText() | translate }}</ng-template>
     }
-  `, isInline: true, styles: [".btn-icon-dot[disabled]{cursor:not-allowed;opacity:.75}.btn-icon-dot.link-auto-unlinked,.btn-icon-dot.link-auto-unlinked:focus{box-shadow:0 0 0 2px var(--c8y-palette-status-danger);border-color:var(--c8y-palette-status-danger)}\n"], dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".btn-icon-dot[disabled]{cursor:not-allowed;opacity:.75}.btn-icon-dot.link-auto-unlinked,.btn-icon-dot.link-auto-unlinked:focus{box-shadow:0 0 0 2px var(--c8y-palette-status-danger);border-color:var(--c8y-palette-status-danger)}\n"], dependencies: [{ 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GlobalContextLinkControlsComponent, decorators: [{
             type: Component,
@@ -6289,6 +6332,8 @@ function resolveConfigurationValue(key, sources, localStateValues, globalStateVa
             return undefined;
         case 'eventSourceId':
             return undefined;
+        case 'isGlobalContextReady':
+            return undefined;
         default: {
             // Exhaustive check: ensures all keys are handled at compile time
             const _exhaustive = key;
@@ -8460,7 +8505,7 @@ class GlobalContextInlineComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GlobalContextInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 } }, 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 p-b-8 inner-scroll\"\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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "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"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.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: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 } }, 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],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"] }, { 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: "20.3.15", ngImport: i0, type: GlobalContextInlineComponent, decorators: [{
             type: Component,
@@ -8473,8 +8518,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         IconDirective,
                         C8yTranslatePipe,
                         TooltipModule,
-                        NgTemplateOutlet
-                    ], selector: 'c8y-global-context-inline', exportAs: 'globalContextInline', providers: [GlobalContextInlineOrchestratorService], 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 p-b-8 inner-scroll\"\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" }]
+                        NgTemplateOutlet,
+                        NgClass
+                    ], selector: 'c8y-global-context-inline', exportAs: 'globalContextInline', providers: [GlobalContextInlineOrchestratorService], 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" }]
         }], ctorParameters: () => [], propDecorators: { widgetControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetControls", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], dashboardChildForLegacy: [{ type: i0.Input, args: [{ isSignal: true, alias: "dashboardChildForLegacy", required: false }] }], refresh: [{ type: i0.Output, args: ["refresh"] }], globalContextChange: [{ type: i0.Output, args: ["globalContextChange"] }], headerTemplateRef: [{
                 type: ViewChild,
                 args: ['headerContent', { static: true, read: TemplateRef }]
@@ -9043,7 +9089,7 @@ class ConfigContextSelectorComponent {
         }
       </form>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i2$1.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: FormsModule }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigContextSelectorComponent, decorators: [{
             type: Component,
@@ -9373,7 +9419,7 @@ class GlobalContextWidgetConfigComponent {
         ></c8y-global-context-config>
       </fieldset>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "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$1.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],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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GlobalContextWidgetConfigComponent, decorators: [{
             type: Component,
@@ -9475,7 +9521,7 @@ class RealtimeControlComponent {
                 useExisting: forwardRef(() => RealtimeControlComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "@let buttonLabel = (isActive ? disableRealtimeLabel : enableRealtimeLabel) | translate;\n\n<button\n  class=\"btn btn-icon c8y-realtime\"\n  [attr.aria-label]=\"buttonLabel\"\n  [tooltip]=\"tooltipTpl\"\n  placement=\"top\"\n  container=\"body\"\n  type=\"button\"\n  data-cy=\"global-context--realtime-toggle\"\n  (click)=\"onButtonClick()\"\n  [adaptivePosition]=\"false\"\n  [delay]=\"500\"\n  [disabled]=\"disabled\"\n>\n  <span\n    class=\"c8y-pulse m-0\"\n    [class.active]=\"isActive\"\n    [class.inactive]=\"!isActive\"\n  ></span>\n</button>\n<ng-template #tooltipTpl>\n  {{ buttonLabel }}\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.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: FormsModule }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "@let buttonLabel = (isActive ? disableRealtimeLabel : enableRealtimeLabel) | translate;\n\n<button\n  class=\"btn btn-icon c8y-realtime\"\n  [attr.aria-label]=\"buttonLabel\"\n  [tooltip]=\"tooltipTpl\"\n  placement=\"top\"\n  container=\"body\"\n  type=\"button\"\n  data-cy=\"global-context--realtime-toggle\"\n  (click)=\"onButtonClick()\"\n  [adaptivePosition]=\"false\"\n  [delay]=\"500\"\n  [disabled]=\"disabled\"\n>\n  <span\n    class=\"c8y-pulse m-0\"\n    [class.active]=\"isActive\"\n    [class.inactive]=\"!isActive\"\n  ></span>\n</button>\n<ng-template #tooltipTpl>\n  {{ buttonLabel }}\n</ng-template>\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: FormsModule }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RealtimeControlComponent, decorators: [{
             type: Component,
@@ -9596,7 +9642,7 @@ class PreviewControlsComponent {
         this.config.displayMode = GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PreviewControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DateTimeContextPickerComponent, selector: "c8y-date-time-context-picker", inputs: ["disabled", "shouldDisableInterval", "config"] }, { 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: i1.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: "20.3.15", 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],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"] }, { 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PreviewControlsComponent, decorators: [{
             type: Component,
@@ -10690,7 +10736,1016 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Output
             }] } });
 
-// Export widget integration components
+/** Context control feature constants for type-safe access */
+const CONTEXT_FEATURE = {
+    /** Time range selector for live mode (relative time window that moves with current time) */
+    LIVE_TIME: 'liveTime',
+    /** Time range selector for history mode (fixed date range for historical analysis) */
+    HISTORY_TIME: 'historyTime',
+    /** Data aggregation options (hourly, daily, etc.) - history mode only */
+    AGGREGATION: 'aggregation',
+    /** Auto-refresh toggle (fixed 5s interval) - live mode only */
+    AUTO_REFRESH: 'autoRefresh',
+    /** Manual refresh button */
+    REFRESH: 'refresh'
+};
+/** Preset name constants for type-safe access */
+const PRESET_NAME = {
+    DEFAULT: 'default',
+    ALARM_LIST: 'alarmList',
+    CHART: 'chart',
+    LIVE_ONLY: 'liveOnly',
+    HISTORY_ONLY: 'historyOnly',
+    ALARM_LIST_CONFIG: 'alarmListConfig',
+    ALARM_LIST_LEGACY: 'alarmListLegacy'
+};
+/** Control presets for different widget types (mode constraints applied by applyModeConstraints) */
+const CONTROL_PRESETS = {
+    /** Full-featured preset for most widgets (supports both live and history modes) */
+    [PRESET_NAME.DEFAULT]: {
+        dashboard: [
+            CONTEXT_FEATURE.LIVE_TIME,
+            CONTEXT_FEATURE.HISTORY_TIME,
+            CONTEXT_FEATURE.AUTO_REFRESH
+        ],
+        config: [CONTEXT_FEATURE.LIVE_TIME, CONTEXT_FEATURE.HISTORY_TIME, CONTEXT_FEATURE.AUTO_REFRESH],
+        view_and_config: [
+            CONTEXT_FEATURE.LIVE_TIME,
+            CONTEXT_FEATURE.HISTORY_TIME,
+            CONTEXT_FEATURE.AUTO_REFRESH,
+            CONTEXT_FEATURE.AGGREGATION,
+            CONTEXT_FEATURE.REFRESH
+        ]
+    },
+    /** For alarm/event lists (supports both live and history modes) */
+    [PRESET_NAME.ALARM_LIST]: {
+        dashboard: [
+            CONTEXT_FEATURE.LIVE_TIME,
+            CONTEXT_FEATURE.HISTORY_TIME,
+            CONTEXT_FEATURE.AUTO_REFRESH
+        ],
+        config: [CONTEXT_FEATURE.AUTO_REFRESH],
+        view_and_config: [
+            CONTEXT_FEATURE.LIVE_TIME,
+            CONTEXT_FEATURE.HISTORY_TIME,
+            CONTEXT_FEATURE.AUTO_REFRESH
+        ]
+    },
+    /** For alarm/event lists in config mode (supports both live and history modes with time in config) */
+    [PRESET_NAME.ALARM_LIST_CONFIG]: {
+        dashboard: [
+            CONTEXT_FEATURE.LIVE_TIME,
+            CONTEXT_FEATURE.HISTORY_TIME,
+            CONTEXT_FEATURE.AUTO_REFRESH
+        ],
+        config: [
+            CONTEXT_FEATURE.LIVE_TIME,
+            CONTEXT_FEATURE.HISTORY_TIME,
+            CONTEXT_FEATURE.AUTO_REFRESH,
+            CONTEXT_FEATURE.AGGREGATION
+        ],
+        view_and_config: [
+            CONTEXT_FEATURE.LIVE_TIME,
+            CONTEXT_FEATURE.HISTORY_TIME,
+            CONTEXT_FEATURE.AUTO_REFRESH
+        ]
+    },
+    /** For charts with aggregation support (supports both live and history modes) */
+    [PRESET_NAME.CHART]: {
+        dashboard: [
+            CONTEXT_FEATURE.LIVE_TIME,
+            CONTEXT_FEATURE.HISTORY_TIME,
+            CONTEXT_FEATURE.AUTO_REFRESH
+        ],
+        config: [CONTEXT_FEATURE.LIVE_TIME, CONTEXT_FEATURE.HISTORY_TIME, CONTEXT_FEATURE.AUTO_REFRESH],
+        view_and_config: [
+            CONTEXT_FEATURE.LIVE_TIME,
+            CONTEXT_FEATURE.HISTORY_TIME,
+            CONTEXT_FEATURE.AGGREGATION,
+            CONTEXT_FEATURE.AUTO_REFRESH,
+            CONTEXT_FEATURE.REFRESH
+        ]
+    },
+    /** For live-only widgets (no history mode support) */
+    [PRESET_NAME.LIVE_ONLY]: {
+        dashboard: [CONTEXT_FEATURE.LIVE_TIME, CONTEXT_FEATURE.AUTO_REFRESH],
+        config: [CONTEXT_FEATURE.LIVE_TIME, CONTEXT_FEATURE.AUTO_REFRESH],
+        view_and_config: [
+            CONTEXT_FEATURE.LIVE_TIME,
+            CONTEXT_FEATURE.AUTO_REFRESH,
+            CONTEXT_FEATURE.REFRESH
+        ]
+    },
+    /** For history-only widgets (no live mode support) */
+    [PRESET_NAME.HISTORY_ONLY]: {
+        dashboard: [CONTEXT_FEATURE.HISTORY_TIME],
+        config: [CONTEXT_FEATURE.HISTORY_TIME, CONTEXT_FEATURE.AGGREGATION],
+        view_and_config: [
+            CONTEXT_FEATURE.HISTORY_TIME,
+            CONTEXT_FEATURE.AGGREGATION,
+            CONTEXT_FEATURE.REFRESH
+        ]
+    },
+    [PRESET_NAME.ALARM_LIST_LEGACY]: {
+        dashboard: [
+            CONTEXT_FEATURE.LIVE_TIME,
+            CONTEXT_FEATURE.HISTORY_TIME,
+            CONTEXT_FEATURE.AUTO_REFRESH
+        ],
+        config: [CONTEXT_FEATURE.AUTO_REFRESH, CONTEXT_FEATURE.REFRESH],
+        view_and_config: [
+            CONTEXT_FEATURE.LIVE_TIME,
+            CONTEXT_FEATURE.HISTORY_TIME,
+            CONTEXT_FEATURE.AUTO_REFRESH
+        ]
+    }
+};
+/**
+ * Apply mode constraints (hard rules) to filter controls based on refresh option.
+ *
+ * @param controls - Array of control features
+ * @param refreshOption - Current refresh option (REFRESH_OPTION.LIVE or REFRESH_OPTION.HISTORY)
+ * @returns Filtered array with mode constraints applied
+ */
+function applyModeConstraints(controls, refreshOption) {
+    if (refreshOption === REFRESH_OPTION.HISTORY) {
+        // History mode: no auto-refresh, no live time
+        return controls.filter(c => c !== CONTEXT_FEATURE.AUTO_REFRESH && c !== CONTEXT_FEATURE.LIVE_TIME);
+    }
+    if (refreshOption === REFRESH_OPTION.LIVE) {
+        // Live mode: no aggregation, no history time
+        return controls.filter(c => c !== CONTEXT_FEATURE.AGGREGATION && c !== CONTEXT_FEATURE.HISTORY_TIME);
+    }
+    return controls;
+}
+/**
+ * Get supported modes from a preset definition.
+ * Modes are derived from features:
+ * - LIVE mode: supported if preset has AUTO_REFRESH (LIVE_TIME is optional)
+ * - HISTORY mode: supported if preset has HISTORY_TIME
+ *
+ * @param controls - Preset name or definition
+ * @param displayMode - Current display mode
+ * @returns Array of supported refresh options
+ */
+function getSupportedModes(controls, displayMode) {
+    const presetDef = typeof controls === 'string' ? CONTROL_PRESETS[controls] : controls;
+    const features = presetDef[displayMode];
+    const modes = [];
+    // Support LIVE if has autoRefresh (with optional liveTime)
+    if (features.includes(CONTEXT_FEATURE.AUTO_REFRESH)) {
+        modes.push(REFRESH_OPTION.LIVE);
+    }
+    // Support HISTORY if has historyTime
+    if (features.includes(CONTEXT_FEATURE.HISTORY_TIME)) {
+        modes.push(REFRESH_OPTION.HISTORY);
+    }
+    // Fallback to LIVE if no mode features detected
+    return modes.length > 0 ? modes : [REFRESH_OPTION.LIVE];
+}
+/**
+ * Convert controls preset to GlobalContextSettings for registration.
+ */
+function controlsToSettings(controls, displayMode, refreshOption) {
+    const presetDef = typeof controls === 'string' ? CONTROL_PRESETS[controls] : controls;
+    const activeControls = applyModeConstraints(presetDef[displayMode], refreshOption);
+    return {
+        showTimeContext: activeControls.includes(CONTEXT_FEATURE.LIVE_TIME) ||
+            activeControls.includes(CONTEXT_FEATURE.HISTORY_TIME),
+        showAutoRefresh: activeControls.includes(CONTEXT_FEATURE.AUTO_REFRESH),
+        showRefreshInterval: false,
+        showAggregation: activeControls.includes(CONTEXT_FEATURE.AGGREGATION),
+        showRefresh: activeControls.includes(CONTEXT_FEATURE.REFRESH)
+    };
+}
+
+class ConfigModeControls {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.globalContextUtils = inject(GlobalContextUtilsService);
+        this.globalContextEventService = inject(GlobalContextEventService);
+        this.controls = input(PRESET_NAME.DEFAULT, ...(ngDevMode ? [{ debugName: "controls" }] : []));
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.configChange = output();
+        this.displayModeControl = new FormControl(GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD, { nonNullable: true });
+        this.GLOBAL_CONTEXT_DISPLAY_MODE = GLOBAL_CONTEXT_DISPLAY_MODE;
+        this.displayMode = signal(GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD, ...(ngDevMode ? [{ debugName: "displayMode" }] : []));
+        this.refreshOption = signal(REFRESH_OPTION.LIVE, ...(ngDevMode ? [{ debugName: "refreshOption" }] : []));
+        this.liveState = signal(null, ...(ngDevMode ? [{ debugName: "liveState" }] : []));
+        this.historyState = signal(null, ...(ngDevMode ? [{ debugName: "historyState" }] : []));
+        this.lastEmittedContext = signal({}, ...(ngDevMode ? [{ debugName: "lastEmittedContext" }] : []));
+        this.settings = computed(() => controlsToSettings(this.controls(), this.displayMode(), this.refreshOption()), ...(ngDevMode ? [{ debugName: "settings" }] : []));
+        this.supportedModes = computed(() => getSupportedModes(this.controls(), this.displayMode()), ...(ngDevMode ? [{ debugName: "supportedModes" }] : []));
+        // Sync with incoming config
+        effect(() => {
+            const cfg = this.config();
+            if (!cfg)
+                return;
+            untracked(() => {
+                const mode = cfg.displayMode ?? GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD;
+                if (this.displayModeControl.value !== mode) {
+                    this.displayModeControl.setValue(mode, { emitEvent: false });
+                    this.displayMode.set(mode);
+                }
+                const refreshOpt = cfg.refreshOption ?? REFRESH_OPTION.LIVE;
+                this.refreshOption.set(refreshOpt);
+                if (refreshOpt === REFRESH_OPTION.LIVE) {
+                    this.liveState.set({ ...cfg });
+                }
+                else {
+                    this.historyState.set({ ...cfg });
+                }
+                this.lastEmittedContext.set(cfg);
+            });
+        });
+    }
+    ngOnInit() {
+        this.displayModeControl.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(mode => {
+            this.displayMode.set(mode);
+            this.emitForDisplayMode(mode);
+        });
+        this.emitInitialState();
+    }
+    onRefreshOptionChange(option) {
+        this.refreshOption.set(option);
+        const snapshot = option === REFRESH_OPTION.LIVE ? this.liveState() : this.historyState();
+        const context = {
+            ...(snapshot ?? this.config()),
+            refreshOption: option,
+            displayMode: this.displayMode(),
+            aggregation: option === REFRESH_OPTION.LIVE ? null : (snapshot ?? this.config()).aggregation
+        };
+        this.emit(context);
+    }
+    onConfigurationChange(changes) {
+        const context = {
+            ...this.config(),
+            ...changes,
+            refreshOption: this.refreshOption(),
+            displayMode: this.displayMode()
+        };
+        // Update snapshot for current mode
+        if (this.refreshOption() === REFRESH_OPTION.LIVE) {
+            this.liveState.set({ ...context });
+        }
+        else {
+            this.historyState.set({ ...context });
+        }
+        this.emit(context);
+    }
+    emitInitialState() {
+        const cfg = this.config();
+        if (!cfg)
+            return;
+        const mode = cfg.displayMode ?? GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD;
+        const context = mode === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD
+            ? this.getGlobalContextState(mode)
+            : { ...cfg, isGlobalContextReady: true };
+        this.lastEmittedContext.set(context);
+        this.configChange.emit({ context, diff: context });
+    }
+    emitForDisplayMode(mode) {
+        if (mode === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {
+            this.emit(this.getGlobalContextState(mode));
+        }
+        else {
+            const snapshot = this.refreshOption() === REFRESH_OPTION.LIVE ? this.liveState() : this.historyState();
+            this.emit({ ...(snapshot ?? this.config()), displayMode: mode, isGlobalContextReady: true });
+        }
+    }
+    emit(context) {
+        const diff = this.globalContextUtils.getChangedFields(this.lastEmittedContext(), context);
+        if (Object.keys(diff).length === 0)
+            return;
+        this.lastEmittedContext.set(context);
+        this.configChange.emit({ context, diff });
+    }
+    getGlobalContextState(mode) {
+        const globalState = this.globalContextEventService.getLatestValue(GLOBAL_CONTEXT_EVENTS.STATE_CHANGE);
+        return globalState
+            ? {
+                displayMode: mode,
+                dateTimeContext: globalState.dateTimeContext,
+                refreshOption: globalState.refreshOption,
+                aggregation: globalState.aggregation,
+                isAutoRefreshEnabled: globalState.isAutoRefreshEnabled,
+                refreshInterval: globalState.refreshInterval,
+                isGlobalContextReady: true
+            }
+            : { displayMode: mode, isGlobalContextReady: true };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigModeControls, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfigModeControls, isStandalone: true, selector: "c8y-config-mode-controls", inputs: { controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { configChange: "configChange" }, ngImport: i0, template: `
+    <form>
+      <fieldset class="c8y-fieldset">
+        <legend>
+          {{ 'Time context' | translate }}
+          <button
+            class="btn-help btn-help--sm"
+            [attr.aria-label]="'Help' | translate"
+            [popover]="
+              'Sync with dashboard settings or set independent time controls for this widget.'
+                | translate
+            "
+            placement="right"
+            triggers="focus"
+            container="body"
+            type="button"
+            [adaptivePosition]="true"
+          ></button>
+        </legend>
+        <c8y-config-context-selector
+          [formControl]="displayModeControl"
+        ></c8y-config-context-selector>
+      </fieldset>
+    </form>
+
+    @if (displayMode() !== GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {
+      <fieldset class="c8y-fieldset p-l-0 p-r-0 p-t-16">
+        <legend class="m-l-16">{{ 'Widget time context' | translate }}</legend>
+        <c8y-configuration-controls
+          [settings]="settings()"
+          [controlsDisplayMode]="'horizontal'"
+          [tabsOutletName]="'verticalTabOutletForConfigurationModes'"
+          [activeMode]="refreshOption()"
+          [liveContext]="liveState()"
+          [historyContext]="historyState()"
+          [supportedModes]="supportedModes()"
+          (contextChange)="onConfigurationChange($event)"
+          (refreshOptionChange)="onRefreshOptionChange($event)"
+        ></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],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", "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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigModeControls, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'c8y-config-mode-controls',
+                    standalone: true,
+                    imports: [
+                        ReactiveFormsModule,
+                        ConfigContextSelectorComponent,
+                        ConfigurationControlsComponent,
+                        C8yTranslatePipe,
+                        PopoverModule
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <form>
+      <fieldset class="c8y-fieldset">
+        <legend>
+          {{ 'Time context' | translate }}
+          <button
+            class="btn-help btn-help--sm"
+            [attr.aria-label]="'Help' | translate"
+            [popover]="
+              'Sync with dashboard settings or set independent time controls for this widget.'
+                | translate
+            "
+            placement="right"
+            triggers="focus"
+            container="body"
+            type="button"
+            [adaptivePosition]="true"
+          ></button>
+        </legend>
+        <c8y-config-context-selector
+          [formControl]="displayModeControl"
+        ></c8y-config-context-selector>
+      </fieldset>
+    </form>
+
+    @if (displayMode() !== GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {
+      <fieldset class="c8y-fieldset p-l-0 p-r-0 p-t-16">
+        <legend class="m-l-16">{{ 'Widget time context' | translate }}</legend>
+        <c8y-configuration-controls
+          [settings]="settings()"
+          [controlsDisplayMode]="'horizontal'"
+          [tabsOutletName]="'verticalTabOutletForConfigurationModes'"
+          [activeMode]="refreshOption()"
+          [liveContext]="liveState()"
+          [historyContext]="historyState()"
+          [supportedModes]="supportedModes()"
+          (contextChange)="onConfigurationChange($event)"
+          (refreshOptionChange)="onRefreshOptionChange($event)"
+        ></c8y-configuration-controls>
+      </fieldset>
+    }
+  `
+                }]
+        }], ctorParameters: () => [], propDecorators: { controls: [{ type: i0.Input, args: [{ isSignal: true, alias: "controls", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], configChange: [{ type: i0.Output, args: ["configChange"] }] } });
+
+class ContextControlsComponent {
+    constructor() {
+        this.fb = inject(FormBuilder);
+        this.aggregationValidationService = inject(AggregationValidationService);
+        this.globalContextUtils = inject(GlobalContextUtilsService);
+        this.controls = input(PRESET_NAME.DEFAULT, ...(ngDevMode ? [{ debugName: "controls" }] : []));
+        this.displayMode = input(GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD, ...(ngDevMode ? [{ debugName: "displayMode" }] : []));
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.configChange = output();
+        this.refresh = output();
+        this.lastEmittedState = signal({}, ...(ngDevMode ? [{ debugName: "lastEmittedState" }] : []));
+        /**
+         * Visible controls for the template.
+         * LIVE_TIME and HISTORY_TIME are normalized to 'time' for template simplicity.
+         */
+        this.visibleControls = computed(() => {
+            const controlsInput = this.controls();
+            const presetDef = typeof controlsInput === 'string' ? CONTROL_PRESETS[controlsInput] : controlsInput;
+            const baseControls = presetDef[this.displayMode()];
+            const refreshOption = this.config().refreshOption || REFRESH_OPTION.LIVE;
+            const filteredControls = applyModeConstraints(baseControls, refreshOption);
+            // Normalize LIVE_TIME/HISTORY_TIME to 'time' for template
+            return filteredControls.map(c => c === CONTEXT_FEATURE.LIVE_TIME || c === CONTEXT_FEATURE.HISTORY_TIME ? 'time' : c);
+        }, ...(ngDevMode ? [{ debugName: "visibleControls" }] : []));
+        this.disabledAggregations = computed(() => {
+            const dateCtx = this.config().dateTimeContext;
+            if (!dateCtx)
+                return {};
+            const [from, to] = this.parseDateRange(dateCtx);
+            return this.aggregationValidationService.getDisabledAggregations([from, to]);
+        }, ...(ngDevMode ? [{ debugName: "disabledAggregations" }] : []));
+        this.dateTimePickerConfig = computed(() => {
+            const refreshOption = this.config().refreshOption;
+            return refreshOption === REFRESH_OPTION.HISTORY
+                ? { showDateFrom: true, showDateTo: true }
+                : { showDateFrom: true, showDateTo: false };
+        }, ...(ngDevMode ? [{ debugName: "dateTimePickerConfig" }] : []));
+        this.autoRefreshSeconds = computed(() => this.config().refreshInterval || GLOBAL_CONTEXT_DEFAULTS.REFRESH_INTERVAL, ...(ngDevMode ? [{ debugName: "autoRefreshSeconds" }] : []));
+        this.form = this.fb.group({
+            dateTimeContext: [null],
+            aggregation: [null],
+            isAutoRefreshEnabled: [false],
+            refreshInterval: [GLOBAL_CONTEXT_DEFAULTS.REFRESH_INTERVAL],
+            refreshOption: [GLOBAL_CONTEXT_DEFAULTS.REFRESH_OPTION]
+        });
+        this.syncConfigToForm();
+        this.subscribeToFormChanges();
+    }
+    onRefresh() {
+        const { dateTimeContext } = this.config();
+        if (!dateTimeContext) {
+            this.refresh.emit();
+            return;
+        }
+        const context = {
+            ...this.config(),
+            dateTimeContext: DateTimeContextUtil.normalizeForLive(dateTimeContext)
+        };
+        if (!this.emitIfChanged(context)) {
+            this.refresh.emit();
+        }
+    }
+    /** Emits configChange if context differs from last emitted state. Returns true if emitted. */
+    emitIfChanged(context) {
+        const diff = this.globalContextUtils.getChangedFields(this.lastEmittedState(), context);
+        if (Object.keys(diff).length === 0)
+            return false;
+        this.lastEmittedState.set(context);
+        this.configChange.emit({ context, diff });
+        return true;
+    }
+    syncConfigToForm() {
+        effect(() => {
+            const cfg = this.config();
+            this.form.patchValue(cfg, { emitEvent: false });
+            this.lastEmittedState.set(this.form.value);
+        });
+    }
+    subscribeToFormChanges() {
+        this.form.valueChanges.pipe(takeUntilDestroyed()).subscribe(value => {
+            const context = this.clearInvalidAggregation(value);
+            this.emitIfChanged(context);
+        });
+    }
+    /** Clears aggregation if in LIVE mode or invalid for current time range (HISTORY mode). */
+    clearInvalidAggregation(context) {
+        const { aggregation, dateTimeContext, refreshOption } = context;
+        if (!aggregation)
+            return context;
+        // LIVE mode doesn't support aggregation
+        if (refreshOption === REFRESH_OPTION.LIVE) {
+            this.form.patchValue({ aggregation: null }, { emitEvent: false });
+            return { ...context, aggregation: null };
+        }
+        // HISTORY mode: validate aggregation for time range
+        if (!dateTimeContext)
+            return context;
+        const [from, to] = this.parseDateRange(dateTimeContext);
+        const disabledAggs = this.aggregationValidationService.getDisabledAggregations([from, to]);
+        if (disabledAggs[aggregation]) {
+            this.form.patchValue({ aggregation: null }, { emitEvent: false });
+            return { ...context, aggregation: null };
+        }
+        return context;
+    }
+    parseDateRange(dateCtx) {
+        const from = typeof dateCtx.dateFrom === 'string' ? new Date(dateCtx.dateFrom) : dateCtx.dateFrom;
+        const to = typeof dateCtx.dateTo === 'string' ? new Date(dateCtx.dateTo) : dateCtx.dateTo;
+        return [from, to];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ContextControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ContextControlsComponent, isStandalone: true, selector: "c8y-context-controls", inputs: { controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { configChange: "configChange", refresh: "refresh" }, ngImport: i0, template: `
+    <form
+      class="d-flex gap-16 p-l-16 p-r-16 p-b-8 inner-scroll h-auto min-width-0 widget-controls"
+      [formGroup]="form"
+    >
+      <div class="input-group w-auto">
+        @if (visibleControls().includes('aggregation')) {
+          <c8y-aggregation-picker
+            formControlName="aggregation"
+            [disabledAggregations]="disabledAggregations()"
+            [resetToDefault]="true"
+          >
+          </c8y-aggregation-picker>
+        }
+
+        @if (visibleControls().includes('autoRefresh')) {
+          <c8y-auto-refresh-control
+            formControlName="isAutoRefreshEnabled"
+            [autoRefreshSeconds]="autoRefreshSeconds()"
+            [isLoading]="isLoading()"
+            (refresh)="onRefresh()"
+          >
+          </c8y-auto-refresh-control>
+        }
+
+        @if (visibleControls().includes('time')) {
+          <c8y-date-time-context-picker
+            style="margin-left: -1px"
+            formControlName="dateTimeContext"
+            [config]="dateTimePickerConfig()"
+          >
+          </c8y-date-time-context-picker>
+        }
+
+        @if (visibleControls().includes('refresh')) {
+          <div class="input-group-btn">
+            <button
+              class="btn btn-default"
+              [attr.aria-label]="'Refresh' | translate"
+              [tooltip]="'Refresh' | translate"
+              placement="bottom"
+              container="body"
+              type="button"
+              [delay]="500"
+              [disabled]="isLoading()"
+              (click)="onRefresh()"
+              data-cy="widget-controls--refresh-button"
+            >
+              <i [class.icon-spin]="isLoading()" [c8yIcon]="'refresh'"></i>
+            </button>
+          </div>
+        }
+      </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],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"] }, { 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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ContextControlsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'c8y-context-controls',
+                    standalone: true,
+                    imports: [
+                        ReactiveFormsModule,
+                        DateTimeContextPickerComponent,
+                        AggregationPickerComponent,
+                        AutoRefreshControlComponent,
+                        IconDirective,
+                        C8yTranslatePipe,
+                        TooltipModule
+                    ],
+                    template: `
+    <form
+      class="d-flex gap-16 p-l-16 p-r-16 p-b-8 inner-scroll h-auto min-width-0 widget-controls"
+      [formGroup]="form"
+    >
+      <div class="input-group w-auto">
+        @if (visibleControls().includes('aggregation')) {
+          <c8y-aggregation-picker
+            formControlName="aggregation"
+            [disabledAggregations]="disabledAggregations()"
+            [resetToDefault]="true"
+          >
+          </c8y-aggregation-picker>
+        }
+
+        @if (visibleControls().includes('autoRefresh')) {
+          <c8y-auto-refresh-control
+            formControlName="isAutoRefreshEnabled"
+            [autoRefreshSeconds]="autoRefreshSeconds()"
+            [isLoading]="isLoading()"
+            (refresh)="onRefresh()"
+          >
+          </c8y-auto-refresh-control>
+        }
+
+        @if (visibleControls().includes('time')) {
+          <c8y-date-time-context-picker
+            style="margin-left: -1px"
+            formControlName="dateTimeContext"
+            [config]="dateTimePickerConfig()"
+          >
+          </c8y-date-time-context-picker>
+        }
+
+        @if (visibleControls().includes('refresh')) {
+          <div class="input-group-btn">
+            <button
+              class="btn btn-default"
+              [attr.aria-label]="'Refresh' | translate"
+              [tooltip]="'Refresh' | translate"
+              placement="bottom"
+              container="body"
+              type="button"
+              [delay]="500"
+              [disabled]="isLoading()"
+              (click)="onRefresh()"
+              data-cy="widget-controls--refresh-button"
+            >
+              <i [class.icon-spin]="isLoading()" [c8yIcon]="'refresh'"></i>
+            </button>
+          </div>
+        }
+      </div>
+    </form>
+  `
+                }]
+        }], ctorParameters: () => [], propDecorators: { controls: [{ type: i0.Input, args: [{ isSignal: true, alias: "controls", required: false }] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], configChange: [{ type: i0.Output, args: ["configChange"] }], refresh: [{ type: i0.Output, args: ["refresh"] }] } });
+
+// Map preset controls to state keys
+const CONTROL_DISPLAY_CONFIG = {
+    liveTime: {
+        key: 'liveTime',
+        stateKey: 'dateTimeContext',
+        cssClass: 'time-context',
+        label: gettext('date/time'),
+        icon: 'calendar'
+    },
+    historyTime: {
+        key: 'historyTime',
+        stateKey: 'dateTimeContext',
+        cssClass: 'time-context',
+        label: gettext('date/time'),
+        icon: 'calendar'
+    },
+    aggregation: {
+        key: 'aggregation',
+        stateKey: 'aggregation',
+        cssClass: 'aggregation',
+        label: gettext('aggregation'),
+        icon: 'input'
+    },
+    autoRefresh: {
+        key: 'autoRefresh',
+        stateKey: 'isAutoRefreshEnabled',
+        cssClass: 'auto-refresh',
+        label: gettext('auto refresh'),
+        icon: 'refresh'
+    }
+};
+class LinkButtonsComponent {
+    constructor() {
+        this.injectedDashboardChild = inject(DashboardChildComponent, { optional: true });
+        this.translateService = inject(TranslateService);
+        this.dashboardChild = input(...(ngDevMode ? [undefined, { debugName: "dashboardChild" }] : []));
+        this.isLinked = input.required(...(ngDevMode ? [{ debugName: "isLinked" }] : []));
+        this.controls = input(PRESET_NAME.DEFAULT, ...(ngDevMode ? [{ debugName: "controls" }] : []));
+        this.config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.toggle = output();
+        this.visibleControls = computed(() => {
+            const controlsInput = this.controls();
+            const presetDef = typeof controlsInput === 'string' ? CONTROL_PRESETS[controlsInput] : controlsInput;
+            const refreshOption = this.config().refreshOption || REFRESH_OPTION.LIVE;
+            const dashboardControls = presetDef[GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD];
+            const activeControls = applyModeConstraints(dashboardControls, refreshOption);
+            return activeControls.map(key => CONTROL_DISPLAY_CONFIG[key]).filter(Boolean);
+        }, ...(ngDevMode ? [{ debugName: "visibleControls" }] : []));
+        this.masterTooltipText = computed(() => {
+            const controls = this.visibleControls();
+            const clickToToggleLabel = this.translateService.instant(gettext('(click to toggle)'));
+            if (!this.isLinked()) {
+                const usingWidgetCustomTimeSettingsLabel = this.translateService.instant(gettext('Using widget custom time settings'));
+                return `${usingWidgetCustomTimeSettingsLabel}\n${clickToToggleLabel}`;
+            }
+            const linkedNames = controls.map(control => this.translateService.instant(control.label));
+            const formatter = new Intl.ListFormat(this.translateService.getCurrentLang()?.replace('_', '-'), {
+                type: 'conjunction'
+            });
+            const linkedNamesList = formatter.format(linkedNames);
+            const linkedToDashboardLabel = this.translateService.instant(gettext('Synced to dashboard:'));
+            return `${linkedToDashboardLabel}\n${linkedNamesList}\n${clickToToggleLabel}`;
+        }, ...(ngDevMode ? [{ debugName: "masterTooltipText" }] : []));
+    }
+    ngAfterViewInit() {
+        const dashChild = this.getDashboardChild();
+        if (dashChild && this.headerTemplateRef) {
+            const headers = dashChild.additionalHeaderTemplates;
+            if (!headers.includes(this.headerTemplateRef)) {
+                headers.push(this.headerTemplateRef);
+            }
+        }
+    }
+    ngOnDestroy() {
+        const dashChild = this.getDashboardChild();
+        if (dashChild && this.headerTemplateRef) {
+            const idx = dashChild.additionalHeaderTemplates.indexOf(this.headerTemplateRef);
+            if (idx >= 0) {
+                dashChild.additionalHeaderTemplates.splice(idx, 1);
+            }
+        }
+    }
+    getDashboardChild() {
+        return this.dashboardChild() ?? this.injectedDashboardChild ?? null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LinkButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: LinkButtonsComponent, isStandalone: true, selector: "c8y-link-buttons", inputs: { dashboardChild: { classPropertyName: "dashboardChild", publicName: "dashboardChild", isSignal: true, isRequired: false, transformFunction: null }, isLinked: { classPropertyName: "isLinked", publicName: "isLinked", isSignal: true, isRequired: true, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle" }, viewQueries: [{ propertyName: "headerTemplateRef", first: true, predicate: ["headerContent"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: `
+    <ng-template #headerContent>
+      <button
+        class="btn-icon-dot-set"
+        [class.active]="isLinked()"
+        [attr.aria-label]="'Global context sync controls' | translate"
+        [tooltip]="masterTooltipTemplate"
+        delay="500"
+        container="body"
+        (click)="toggle.emit(!isLinked())"
+        data-cy="global-context-link--all"
+      >
+        <span class="btn-icon-dot__item default" [class.active]="isLinked()">
+          <i [c8yIcon]="isLinked() ? 'link' : 'unlink'"></i>
+        </span>
+        @for (control of visibleControls(); track control.stateKey) {
+          <span
+            [class]="control.cssClass + ' btn-icon-dot__item'"
+            [class.active]="isLinked()"
+            [attr.data-cy]="'global-context-link--' + control.stateKey"
+          >
+            <i [c8yIcon]="control.icon"></i>
+          </span>
+        }
+      </button>
+      <ng-template #masterTooltipTemplate>{{ masterTooltipText() }}</ng-template>
+    </ng-template>
+  `, isInline: true, dependencies: [{ 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: "20.3.15", ngImport: i0, type: LinkButtonsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'c8y-link-buttons',
+                    standalone: true,
+                    imports: [IconDirective, TooltipModule, C8yTranslatePipe],
+                    template: `
+    <ng-template #headerContent>
+      <button
+        class="btn-icon-dot-set"
+        [class.active]="isLinked()"
+        [attr.aria-label]="'Global context sync controls' | translate"
+        [tooltip]="masterTooltipTemplate"
+        delay="500"
+        container="body"
+        (click)="toggle.emit(!isLinked())"
+        data-cy="global-context-link--all"
+      >
+        <span class="btn-icon-dot__item default" [class.active]="isLinked()">
+          <i [c8yIcon]="isLinked() ? 'link' : 'unlink'"></i>
+        </span>
+        @for (control of visibleControls(); track control.stateKey) {
+          <span
+            [class]="control.cssClass + ' btn-icon-dot__item'"
+            [class.active]="isLinked()"
+            [attr.data-cy]="'global-context-link--' + control.stateKey"
+          >
+            <i [c8yIcon]="control.icon"></i>
+          </span>
+        }
+      </button>
+      <ng-template #masterTooltipTemplate>{{ masterTooltipText() }}</ng-template>
+    </ng-template>
+  `
+                }]
+        }], propDecorators: { headerTemplateRef: [{
+                type: ViewChild,
+                args: ['headerContent', { static: true, read: TemplateRef }]
+            }], dashboardChild: [{ type: i0.Input, args: [{ isSignal: true, alias: "dashboardChild", required: false }] }], isLinked: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLinked", required: true }] }], controls: [{ type: i0.Input, args: [{ isSignal: true, alias: "controls", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }] } });
+
+class GlobalContextConnectorComponent {
+    constructor() {
+        this.eventService = inject(GlobalContextEventService);
+        this.globalContextService = inject(GlobalContextService);
+        this.globalContextUtils = inject(GlobalContextUtilsService);
+        this.destroyRef = inject(DestroyRef);
+        this.lastEmittedState = signal({}, ...(ngDevMode ? [{ debugName: "lastEmittedState" }] : []));
+        this.controls = input(PRESET_NAME.DEFAULT, ...(ngDevMode ? [{ debugName: "controls" }] : []));
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.dashboardChild = input.required(...(ngDevMode ? [{ debugName: "dashboardChild" }] : []));
+        this.linked = input(undefined, ...(ngDevMode ? [{ debugName: "linked" }] : []));
+        this.configChange = output();
+        this.refresh = output();
+        this.isLinked = signal(true, ...(ngDevMode ? [{ debugName: "isLinked" }] : []));
+        this.syncExternalLinkState();
+        this.subscribeToGlobalContext();
+        this.registerWithGlobalContext();
+        this.trackLoadingState();
+        this.destroyRef.onDestroy(() => {
+            this.globalContextService.unregister(this.componentId);
+            this.globalContextService.unregisterLoading(this.componentId);
+        });
+    }
+    onLinkToggle(linked) {
+        this.isLinked.set(linked);
+        if (linked) {
+            const cached = this.eventService.getLatestValue(GLOBAL_CONTEXT_EVENTS.STATE_CHANGE);
+            if (cached)
+                this.emitIfChanged(cached);
+        }
+    }
+    onLocalChange(event) {
+        this.lastEmittedState.set(event.context);
+        this.configChange.emit(event);
+    }
+    onLocalRefresh() {
+        const { dateTimeContext } = this.config();
+        if (!dateTimeContext) {
+            this.refresh.emit();
+            return;
+        }
+        const context = {
+            ...this.config(),
+            dateTimeContext: DateTimeContextUtil.normalizeForLive(dateTimeContext)
+        };
+        if (!this.emitIfChanged(context)) {
+            this.refresh.emit();
+        }
+    }
+    /** Emits configChange if context differs from last emitted state. Returns true if emitted. */
+    emitIfChanged(context) {
+        const diff = this.globalContextUtils.getChangedFields(this.lastEmittedState(), context);
+        if (Object.keys(diff).length === 0)
+            return false;
+        this.lastEmittedState.set(context);
+        this.configChange.emit({ context, diff });
+        return true;
+    }
+    get componentId() {
+        const data = this.dashboardChild()['data'];
+        return data.id;
+    }
+    syncExternalLinkState() {
+        effect(() => {
+            const external = this.linked();
+            if (external !== undefined)
+                this.isLinked.set(external);
+        });
+    }
+    subscribeToGlobalContext() {
+        let subscription = null;
+        effect(() => {
+            subscription?.unsubscribe();
+            if (!this.isLinked())
+                return;
+            const cached = this.eventService.getLatestValue(GLOBAL_CONTEXT_EVENTS.STATE_CHANGE);
+            if (cached)
+                this.emitIfChanged(cached);
+            const stateChanges$ = this.eventService.on(GLOBAL_CONTEXT_EVENTS.STATE_CHANGE);
+            const refresh$ = this.eventService.on(GLOBAL_CONTEXT_EVENTS.REFRESH).pipe(map$1(data => ({
+                ...this.config(),
+                dateTimeContext: {
+                    dateFrom: data.dateFrom,
+                    dateTo: data.dateTo,
+                    interval: data.interval
+                }
+            })));
+            subscription = merge$1(stateChanges$, refresh$)
+                .pipe(takeUntilDestroyed(this.destroyRef), catchError(() => EMPTY))
+                .subscribe(state => {
+                if (state)
+                    this.emitIfChanged(state);
+            });
+        });
+    }
+    registerWithGlobalContext() {
+        effect(() => {
+            if (this.isLinked()) {
+                const settings = controlsToSettings(this.controls(), GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD, this.config().refreshOption || REFRESH_OPTION.LIVE);
+                this.globalContextService.register(this.componentId, settings);
+            }
+            else {
+                this.globalContextService.unregister(this.componentId);
+            }
+        });
+    }
+    trackLoadingState() {
+        effect(() => {
+            const shouldTrack = this.isLinked() && this.isLoading();
+            if (shouldTrack) {
+                this.globalContextService.registerLoading(this.componentId);
+            }
+            else {
+                this.globalContextService.unregisterLoading(this.componentId);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GlobalContextConnectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: GlobalContextConnectorComponent, isStandalone: true, selector: "c8y-global-context-connector", inputs: { controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, dashboardChild: { classPropertyName: "dashboardChild", publicName: "dashboardChild", isSignal: true, isRequired: true, transformFunction: null }, linked: { classPropertyName: "linked", publicName: "linked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { configChange: "configChange", refresh: "refresh" }, ngImport: i0, template: `
+    <c8y-link-buttons
+      [dashboardChild]="dashboardChild()"
+      [isLinked]="isLinked()"
+      [controls]="controls()"
+      [config]="config()"
+      (toggle)="onLinkToggle($event)"
+    ></c8y-link-buttons>
+
+    @if (!isLinked()) {
+      <c8y-context-controls
+        [controls]="controls()"
+        displayMode="dashboard"
+        [config]="config()"
+        [isLoading]="isLoading()"
+        (configChange)="onLocalChange($event)"
+        (refresh)="onLocalRefresh()"
+      ></c8y-context-controls>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: ContextControlsComponent, selector: "c8y-context-controls", inputs: ["controls", "displayMode", "config", "isLoading"], outputs: ["configChange", "refresh"] }, { kind: "component", type: LinkButtonsComponent, selector: "c8y-link-buttons", inputs: ["dashboardChild", "isLinked", "controls", "config"], outputs: ["toggle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GlobalContextConnectorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'c8y-global-context-connector',
+                    standalone: true,
+                    imports: [ContextControlsComponent, LinkButtonsComponent],
+                    template: `
+    <c8y-link-buttons
+      [dashboardChild]="dashboardChild()"
+      [isLinked]="isLinked()"
+      [controls]="controls()"
+      [config]="config()"
+      (toggle)="onLinkToggle($event)"
+    ></c8y-link-buttons>
+
+    @if (!isLinked()) {
+      <c8y-context-controls
+        [controls]="controls()"
+        displayMode="dashboard"
+        [config]="config()"
+        [isLoading]="isLoading()"
+        (configChange)="onLocalChange($event)"
+        (refresh)="onLocalRefresh()"
+      ></c8y-context-controls>
+    }
+  `
+                }]
+        }], ctorParameters: () => [], propDecorators: { controls: [{ type: i0.Input, args: [{ isSignal: true, alias: "controls", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], dashboardChild: [{ type: i0.Input, args: [{ isSignal: true, alias: "dashboardChild", required: true }] }], linked: [{ type: i0.Input, args: [{ isSignal: true, alias: "linked", required: false }] }], configChange: [{ type: i0.Output, args: ["configChange"] }], refresh: [{ type: i0.Output, args: ["refresh"] }] } });
+
+class LocalControlsComponent {
+    constructor() {
+        this.controls = input(PRESET_NAME.DEFAULT, ...(ngDevMode ? [{ debugName: "controls" }] : []));
+        this.displayMode = input(GLOBAL_CONTEXT_DISPLAY_MODE.CONFIG, ...(ngDevMode ? [{ debugName: "displayMode" }] : []));
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.configChange = output();
+        this.refresh = output();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LocalControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: LocalControlsComponent, isStandalone: true, selector: "c8y-local-controls", inputs: { controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { configChange: "configChange", refresh: "refresh" }, host: { attributes: { "data-local-controls": "true" }, properties: { "class.disabled": "disabled()" } }, ngImport: i0, template: `
+    <div [class.disabled-overlay]="disabled()">
+      <c8y-context-controls
+        [controls]="controls()"
+        [displayMode]="displayMode()"
+        [config]="config()"
+        [isLoading]="isLoading()"
+        (configChange)="configChange.emit($event)"
+        (refresh)="refresh.emit()"
+      ></c8y-context-controls>
+    </div>
+  `, isInline: true, styles: [".disabled-overlay{position:relative;cursor:not-allowed}.disabled-overlay:after{content:\"\";position:absolute;inset:0;z-index:10}\n"], dependencies: [{ kind: "component", type: ContextControlsComponent, selector: "c8y-context-controls", inputs: ["controls", "displayMode", "config", "isLoading"], outputs: ["configChange", "refresh"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LocalControlsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-local-controls', standalone: true, imports: [ContextControlsComponent], host: {
+                        'data-local-controls': 'true',
+                        '[class.disabled]': 'disabled()'
+                    }, template: `
+    <div [class.disabled-overlay]="disabled()">
+      <c8y-context-controls
+        [controls]="controls()"
+        [displayMode]="displayMode()"
+        [config]="config()"
+        [isLoading]="isLoading()"
+        (configChange)="configChange.emit($event)"
+        (refresh)="refresh.emit()"
+      ></c8y-context-controls>
+    </div>
+  `, styles: [".disabled-overlay{position:relative;cursor:not-allowed}.disabled-overlay:after{content:\"\";position:absolute;inset:0;z-index:10}\n"] }]
+        }], propDecorators: { controls: [{ type: i0.Input, args: [{ isSignal: true, alias: "controls", required: false }] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], configChange: [{ type: i0.Output, args: ["configChange"] }], refresh: [{ type: i0.Output, args: ["refresh"] }] } });
+
+/** @deprecated Use LocalControlsComponent or GlobalContextConnectorComponent instead */
 
 class GlobalContextModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GlobalContextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -10707,11 +11762,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 }]
         }] });
 
-// Export models
-
 /**
  * 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, ConfigContextSelectorComponent, ConfigurationCollapseComponent, ConfigurationControlsComponent, ContextControlsComponent, DEFAULT_INTERVAL_VALUES, DEFAULT_WIDGET_TEMPLATE, DateContextQueryParamNames, DateTimeContextPickerComponent, DateTimeContextPickerService, GLOBAL_CONTEXT_DEFAULTS, GLOBAL_CONTEXT_DISPLAY_MODE, GLOBAL_CONTEXT_EVENTS, GLOBAL_CONTEXT_SOURCE, GlobalContextComponent, GlobalContextConfigComponent, GlobalContextEventService, GlobalContextFormService, GlobalContextInlineComponent, GlobalContextLinkControlsComponent, GlobalContextModule, GlobalContextNavigationService, GlobalContextQueryService, GlobalContextService, GlobalContextUtilsService, GlobalContextValidationService, GlobalContextWidgetConfigComponent, GlobalContextWidgetWrapperComponent, HistoryModeConfigurationControlsComponent, INTERVALS, INTERVAL_TITLES, IntervalPickerComponent, LINK_BTNS_CONFIG, LiveModeConfigurationControlsComponent, 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, buildAggregationExtensions, buildBaselineControls, buildWidgetControlsFromPresets, createAutoRefreshHandlers, createResult, defineWidgetControls, 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_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, 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, 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 };
 //# sourceMappingURL=c8y-ngx-components-global-context.mjs.map