@c8y/ngx-components 1023.0.2 → 1023.4.5

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

@@ -3529,7 +3529,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 flex-grow\"\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 fit-w\">\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$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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: DateTimeContextPickerComponent, decorators: [{
             type: Component,
@@ -3551,7 +3551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                             useExisting: forwardRef(() => DateTimeContextPickerComponent),
                             multi: true
                         }
-                    ], 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 flex-grow\"\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 fit-w\">\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" }]
+                    ], 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" }]
         }], propDecorators: { disabled: [{
                 type: Input
             }], shouldDisableInterval: [{
@@ -3770,7 +3770,7 @@ class ConfigurationControlsComponent {
         ></c8y-tabs-outlet>
 
         @if (selectedMode() === REFRESH_OPTION.LIVE) {
-          <div class="p-l-24 p-r-24 fit-w">
+          <div class="p-l-24 p-r-24 fit-w min-width-0">
             <c8y-live-mode-configuration-controls
               [settings]="settings()"
               [context]="liveContext()"
@@ -3780,7 +3780,7 @@ class ConfigurationControlsComponent {
         }
 
         @if (selectedMode() === REFRESH_OPTION.HISTORY) {
-          <div class="p-l-24 p-r-24 fit-w">
+          <div class="p-l-24 p-r-24 fit-w min-width-0">
             <c8y-history-mode-configuration-controls
               [settings]="settings()"
               [context]="historyContext()"
@@ -3829,7 +3829,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         ></c8y-tabs-outlet>
 
         @if (selectedMode() === REFRESH_OPTION.LIVE) {
-          <div class="p-l-24 p-r-24 fit-w">
+          <div class="p-l-24 p-r-24 fit-w min-width-0">
             <c8y-live-mode-configuration-controls
               [settings]="settings()"
               [context]="liveContext()"
@@ -3839,7 +3839,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }
 
         @if (selectedMode() === REFRESH_OPTION.HISTORY) {
-          <div class="p-l-24 p-r-24 fit-w">
+          <div class="p-l-24 p-r-24 fit-w min-width-0">
             <c8y-history-mode-configuration-controls
               [settings]="settings()"
               [context]="historyContext()"
@@ -4931,7 +4931,7 @@ class ContextControlsComponent {
         return pick(settings, requiredKeys);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ContextControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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 class=\"d-col a-i-center form-control\">\n            <i\n              class=\"dlt-c8y-icon-disconnected icon-20 text-danger\"\n              [tooltip]=\"'The widgets have not been connected' | 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 class=\"d-col a-i-center form-control\">\n            <i\n              class=\"dlt-c8y-icon-disconnected icon-20 text-danger\"\n              [tooltip]=\"'The widgets have not been connected' | 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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 linked 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 linked 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.3", ngImport: i0, type: ContextControlsComponent, decorators: [{
             type: Component,
@@ -4947,7 +4947,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         TimeRangeDisplayComponent,
                         AggregationDisplayComponent,
                         AsyncPipe
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (form) {\n  @let SHOW_TIME_CONTEXT = settings.showTimeContext;\n  @let SHOW_AGGREGATION = settings.showAggregation;\n  @let SHOW_AUTO_REFRESH = settings.showAutoRefresh;\n  @let refreshIntervalValue = form?.get('refreshInterval')?.value;\n  @let isLiveMode = refreshOption === REFRESH_OPTION.LIVE;\n\n  @if (isLiveMode) {\n    <form\n      class=\"input-group\"\n      [formGroup]=\"form\"\n    >\n      <c8y-auto-refresh-control\n        #autoRefreshControl\n        [isLoading]=\"isLoading\"\n        [isAutoRefreshConnected]=\"isAutoRefreshConnected\"\n        formControlName=\"isAutoRefreshEnabled\"\n        [autoRefreshSeconds]=\"refreshIntervalValue\"\n        (refresh)=\"refresh.emit()\"\n      ></c8y-auto-refresh-control>\n      <button\n        class=\"btn-clean d-flex p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\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 class=\"d-col a-i-center form-control\">\n            <i\n              class=\"dlt-c8y-icon-disconnected icon-20 text-danger\"\n              [tooltip]=\"'The widgets have not been connected' | 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 class=\"d-col a-i-center form-control\">\n            <i\n              class=\"dlt-c8y-icon-disconnected icon-20 text-danger\"\n              [tooltip]=\"'The widgets have not been connected' | translate\"\n              placement=\"right\"\n              container=\"body\"\n              [delay]=\"500\"\n              data-cy=\"global-time-context-controls--Widgets-disconnected\"\n            ></i>\n          </div>\n        }\n      </button>\n    </form>\n  }\n}\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (form) {\n  @let SHOW_TIME_CONTEXT = settings.showTimeContext;\n  @let SHOW_AGGREGATION = settings.showAggregation;\n  @let SHOW_AUTO_REFRESH = settings.showAutoRefresh;\n  @let refreshIntervalValue = form?.get('refreshInterval')?.value;\n  @let isLiveMode = refreshOption === REFRESH_OPTION.LIVE;\n\n  @if (isLiveMode) {\n    <form\n      class=\"input-group\"\n      [formGroup]=\"form\"\n    >\n      <c8y-auto-refresh-control\n        #autoRefreshControl\n        [isLoading]=\"isLoading\"\n        [isAutoRefreshConnected]=\"isAutoRefreshConnected\"\n        formControlName=\"isAutoRefreshEnabled\"\n        [autoRefreshSeconds]=\"refreshIntervalValue\"\n        (refresh)=\"refresh.emit()\"\n      ></c8y-auto-refresh-control>\n      <button\n        class=\"btn-clean d-flex p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\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 linked 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 linked widgets' | translate\"\n              placement=\"right\"\n              container=\"body\"\n              [delay]=\"500\"\n              data-cy=\"global-time-context-controls--Widgets-disconnected\"\n            ></i>\n          </div>\n        }\n      </button>\n    </form>\n  }\n}\n" }]
         }], propDecorators: { showDisplayModeLabel: [{
                 type: Input
             }], isLoading: [{
@@ -8499,7 +8499,7 @@ class GlobalContextInlineComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GlobalContextInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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      (linkToggled)=\"handleLinkToggle($event)\"\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\">\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          @if (settings.showRefreshInterval) {\n            <c8y-auto-refresh-select-control\n              style=\"margin-left: -1px\"\n              formControlName=\"refreshInterval\"\n            ></c8y-auto-refresh-select-control>\n          }\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: ["linkToggled", "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: AutoRefreshSelectControlComponent, selector: "c8y-auto-refresh-select-control", outputs: ["intervalValueChange"] }, { 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.3", 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      (linkToggled)=\"handleLinkToggle($event)\"\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          @if (settings.showRefreshInterval) {\n            <c8y-auto-refresh-select-control\n              style=\"margin-left: -1px\"\n              formControlName=\"refreshInterval\"\n            ></c8y-auto-refresh-select-control>\n          }\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: ["linkToggled", "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: AutoRefreshSelectControlComponent, selector: "c8y-auto-refresh-select-control", outputs: ["intervalValueChange"] }, { 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GlobalContextInlineComponent, decorators: [{
             type: Component,
@@ -8514,7 +8514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         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      (linkToggled)=\"handleLinkToggle($event)\"\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\">\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          @if (settings.showRefreshInterval) {\n            <c8y-auto-refresh-select-control\n              style=\"margin-left: -1px\"\n              formControlName=\"refreshInterval\"\n            ></c8y-auto-refresh-select-control>\n          }\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" }]
+                    ], 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      (linkToggled)=\"handleLinkToggle($event)\"\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          @if (settings.showRefreshInterval) {\n            <c8y-auto-refresh-select-control\n              style=\"margin-left: -1px\"\n              formControlName=\"refreshInterval\"\n            ></c8y-auto-refresh-select-control>\n          }\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: { headerTemplateRef: [{
                 type: ViewChild,
                 args: ['headerContent', { static: true, read: TemplateRef }]