@c8y/ngx-components 1023.17.13 → 1023.17.19

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

@@ -4553,11 +4553,11 @@ class AggregationDisplayComponent {
         this.AGGREGATION_TEXTS = AGGREGATION_TEXTS;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AggregationDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: AggregationDisplayComponent, isStandalone: true, selector: "c8y-aggregation-display", inputs: { aggregation: { classPropertyName: "aggregation", publicName: "aggregation", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"d-flex a-i-center l-h-tight form-control\">\n  <i\n    class=\"m-r-4\"\n    [c8yIcon]=\"aggregation() ? AGGREGATION_ICONS[aggregation()] : AGGREGATION_ICONS.undefined\"\n  ></i>\n  <div class=\"d-col text-left fit-w\">\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", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: AggregationDisplayComponent, isStandalone: true, selector: "c8y-aggregation-display", inputs: { aggregation: { classPropertyName: "aggregation", publicName: "aggregation", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"d-flex a-i-center l-h-tight form-control\">\n  <i\n    class=\"m-r-4\"\n    [c8yIcon]=\"aggregation() ? AGGREGATION_ICONS[aggregation()] : AGGREGATION_ICONS.undefined\"\n  ></i>\n  <div class=\"d-col text-left fit-w min-width-0\">\n    <span\n      class=\"text-10 l-h-1 text-muted text-truncate\"\n      title=\"{{ 'Aggregation' | translate }}\"\n    >\n      {{ 'Aggregation' | translate }}\n    </span>\n    <span\n      class=\"text-12 l-h-1 text-medium text-truncate\"\n      title=\"{{ AGGREGATION_TEXTS[aggregation()] | translate }}\"\n      data-cy=\"global-date-context--Aggregation-display-value\"\n    >\n      {{ AGGREGATION_TEXTS[aggregation()] | translate }}\n    </span>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AggregationDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-aggregation-display', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [C8yTranslatePipe, IconDirective], template: "<div class=\"d-flex a-i-center l-h-tight form-control\">\n  <i\n    class=\"m-r-4\"\n    [c8yIcon]=\"aggregation() ? AGGREGATION_ICONS[aggregation()] : AGGREGATION_ICONS.undefined\"\n  ></i>\n  <div class=\"d-col text-left fit-w\">\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" }]
+            args: [{ selector: 'c8y-aggregation-display', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [C8yTranslatePipe, IconDirective], template: "<div class=\"d-flex a-i-center l-h-tight form-control\">\n  <i\n    class=\"m-r-4\"\n    [c8yIcon]=\"aggregation() ? AGGREGATION_ICONS[aggregation()] : AGGREGATION_ICONS.undefined\"\n  ></i>\n  <div class=\"d-col text-left fit-w min-width-0\">\n    <span\n      class=\"text-10 l-h-1 text-muted text-truncate\"\n      title=\"{{ 'Aggregation' | translate }}\"\n    >\n      {{ 'Aggregation' | translate }}\n    </span>\n    <span\n      class=\"text-12 l-h-1 text-medium text-truncate\"\n      title=\"{{ AGGREGATION_TEXTS[aggregation()] | translate }}\"\n      data-cy=\"global-date-context--Aggregation-display-value\"\n    >\n      {{ AGGREGATION_TEXTS[aggregation()] | translate }}\n    </span>\n  </div>\n</div>\n" }]
         }], propDecorators: { aggregation: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregation", required: false }] }] } });
 
 /**
@@ -4776,11 +4776,11 @@ class TimeRangeDisplayComponent {
         this.DATE_FORMAT = 'medium';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TimeRangeDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TimeRangeDisplayComponent, isStandalone: true, selector: "c8y-time-range-display", inputs: { dateTimeContext: "dateTimeContext", mode: "mode" }, ngImport: i0, template: "@if (dateTimeContext) {\n  <div class=\"d-flex a-i-center l-h-tight form-control\">\n    <i\n      class=\"m-r-4\"\n      [c8yIcon]=\"'schedule1'\"\n    ></i>\n    <div class=\"d-col text-left fit-w\">\n      <span\n        class=\"text-10 l-h-1 text-muted\"\n        data-cy=\"global-date-context--Selected-interval\"\n      >\n        {{ INTERVALS[dateTimeContext.interval] | translate }}\n      </span>\n\n      @if (mode === 'from') {\n        <span class=\"text-12 text-medium text-truncate\">\n          {{ 'From`date`' | translate }} {{ dateTimeContext.dateFrom | c8yDate: DATE_FORMAT }}\n        </span>\n      }\n\n      @if (mode === 'to') {\n        <span class=\"text-12 l-h-1 text-medium text-truncate\">\n          {{ 'To`date`' | translate }} {{ dateTimeContext.dateTo | c8yDate: DATE_FORMAT }}\n        </span>\n      }\n\n      @if (mode === 'default') {\n        <span\n          class=\"text-12 l-h-1 text-medium text-truncate\"\n          data-cy=\"global-date-context--Selected-time-range\"\n        >\n          {{ dateTimeContext.dateFrom | c8yDate: DATE_FORMAT }} \u2014\n          {{ dateTimeContext.dateTo | c8yDate: DATE_FORMAT }}\n        </span>\n      }\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TimeRangeDisplayComponent, isStandalone: true, selector: "c8y-time-range-display", inputs: { dateTimeContext: "dateTimeContext", mode: "mode" }, ngImport: i0, template: "@if (dateTimeContext) {\n  <div class=\"d-flex a-i-center l-h-tight form-control\">\n    <i\n      class=\"m-r-4\"\n      [c8yIcon]=\"'schedule1'\"\n    ></i>\n    <div class=\"d-col text-left fit-w min-width-0\">\n      <span\n        class=\"text-10 l-h-1 text-muted\"\n        data-cy=\"global-date-context--Selected-interval\"\n      >\n        {{ INTERVALS[dateTimeContext.interval] | translate }}\n      </span>\n\n      @if (mode === 'from') {\n        <span\n          class=\"text-12 text-medium text-truncate\"\n          title=\"{{ dateTimeContext.dateFrom | c8yDate: DATE_FORMAT }}\"\n        >\n          {{ 'From`date`' | translate }} {{ dateTimeContext.dateFrom | c8yDate: DATE_FORMAT }}\n        </span>\n      }\n\n      @if (mode === 'to') {\n        <span\n          class=\"text-12 l-h-1 text-medium text-truncate\"\n          title=\"{{ dateTimeContext.dateTo | c8yDate: DATE_FORMAT }}\"\n        >\n          {{ 'To`date`' | translate }} {{ dateTimeContext.dateTo | c8yDate: DATE_FORMAT }}\n        </span>\n      }\n\n      @if (mode === 'default') {\n        <span\n          class=\"text-12 l-h-1 text-medium text-truncate\"\n          title=\"{{ dateTimeContext.dateFrom | c8yDate: DATE_FORMAT }} \u2014 {{\n            dateTimeContext.dateTo | c8yDate: DATE_FORMAT\n          }}\"\n          data-cy=\"global-date-context--Selected-time-range\"\n        >\n          {{ dateTimeContext.dateFrom | c8yDate: DATE_FORMAT }} \u2014\n          {{ dateTimeContext.dateTo | c8yDate: DATE_FORMAT }}\n        </span>\n      }\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TimeRangeDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-time-range-display', standalone: true, imports: [IconDirective, C8yTranslatePipe, DatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (dateTimeContext) {\n  <div class=\"d-flex a-i-center l-h-tight form-control\">\n    <i\n      class=\"m-r-4\"\n      [c8yIcon]=\"'schedule1'\"\n    ></i>\n    <div class=\"d-col text-left fit-w\">\n      <span\n        class=\"text-10 l-h-1 text-muted\"\n        data-cy=\"global-date-context--Selected-interval\"\n      >\n        {{ INTERVALS[dateTimeContext.interval] | translate }}\n      </span>\n\n      @if (mode === 'from') {\n        <span class=\"text-12 text-medium text-truncate\">\n          {{ 'From`date`' | translate }} {{ dateTimeContext.dateFrom | c8yDate: DATE_FORMAT }}\n        </span>\n      }\n\n      @if (mode === 'to') {\n        <span class=\"text-12 l-h-1 text-medium text-truncate\">\n          {{ 'To`date`' | translate }} {{ dateTimeContext.dateTo | c8yDate: DATE_FORMAT }}\n        </span>\n      }\n\n      @if (mode === 'default') {\n        <span\n          class=\"text-12 l-h-1 text-medium text-truncate\"\n          data-cy=\"global-date-context--Selected-time-range\"\n        >\n          {{ dateTimeContext.dateFrom | c8yDate: DATE_FORMAT }} \u2014\n          {{ dateTimeContext.dateTo | c8yDate: DATE_FORMAT }}\n        </span>\n      }\n    </div>\n  </div>\n}\n" }]
+            args: [{ selector: 'c8y-time-range-display', standalone: true, imports: [IconDirective, C8yTranslatePipe, DatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (dateTimeContext) {\n  <div class=\"d-flex a-i-center l-h-tight form-control\">\n    <i\n      class=\"m-r-4\"\n      [c8yIcon]=\"'schedule1'\"\n    ></i>\n    <div class=\"d-col text-left fit-w min-width-0\">\n      <span\n        class=\"text-10 l-h-1 text-muted\"\n        data-cy=\"global-date-context--Selected-interval\"\n      >\n        {{ INTERVALS[dateTimeContext.interval] | translate }}\n      </span>\n\n      @if (mode === 'from') {\n        <span\n          class=\"text-12 text-medium text-truncate\"\n          title=\"{{ dateTimeContext.dateFrom | c8yDate: DATE_FORMAT }}\"\n        >\n          {{ 'From`date`' | translate }} {{ dateTimeContext.dateFrom | c8yDate: DATE_FORMAT }}\n        </span>\n      }\n\n      @if (mode === 'to') {\n        <span\n          class=\"text-12 l-h-1 text-medium text-truncate\"\n          title=\"{{ dateTimeContext.dateTo | c8yDate: DATE_FORMAT }}\"\n        >\n          {{ 'To`date`' | translate }} {{ dateTimeContext.dateTo | c8yDate: DATE_FORMAT }}\n        </span>\n      }\n\n      @if (mode === 'default') {\n        <span\n          class=\"text-12 l-h-1 text-medium text-truncate\"\n          title=\"{{ dateTimeContext.dateFrom | c8yDate: DATE_FORMAT }} \u2014 {{\n            dateTimeContext.dateTo | c8yDate: DATE_FORMAT\n          }}\"\n          data-cy=\"global-date-context--Selected-time-range\"\n        >\n          {{ dateTimeContext.dateFrom | c8yDate: DATE_FORMAT }} \u2014\n          {{ dateTimeContext.dateTo | c8yDate: DATE_FORMAT }}\n        </span>\n      }\n    </div>\n  </div>\n}\n" }]
         }], propDecorators: { dateTimeContext: [{
                 type: Input
             }], mode: [{
@@ -4891,7 +4891,7 @@ let ContextControlsComponent$1 = class ContextControlsComponent {
         return pick(settings, requiredKeys);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ContextControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ContextControlsComponent, isStandalone: true, selector: "c8y-context-controls", inputs: { showDisplayModeLabel: "showDisplayModeLabel", isLoading: "isLoading", settings: "settings", context: "context" }, outputs: { contextChange: "contextChange", refresh: "refresh", contextClick: "contextClick" }, ngImport: i0, template: "@if (form) {\n  @let SHOW_TIME_CONTEXT = settings.showTimeContext;\n  @let SHOW_AGGREGATION = settings.showAggregation;\n  @let SHOW_AUTO_REFRESH = settings.showAutoRefresh;\n  @let refreshIntervalValue = form?.get('refreshInterval')?.value;\n  @let isLiveMode = refreshOption === REFRESH_OPTION.LIVE;\n\n  @if (isLiveMode) {\n    <form\n      class=\"input-group\"\n      [formGroup]=\"form\"\n    >\n      <c8y-auto-refresh-control\n        #autoRefreshControl\n        [isLoading]=\"isLoading\"\n        [isAutoRefreshConnected]=\"isAutoRefreshConnected\"\n        formControlName=\"isAutoRefreshEnabled\"\n        [autoRefreshSeconds]=\"refreshIntervalValue\"\n        (refresh)=\"refresh.emit()\"\n      ></c8y-auto-refresh-control>\n      <button\n        class=\"btn-clean d-flex p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8 min-width-0\"\n        style=\"margin-left: -1px\"\n        (click)=\"contextClick.emit($event); $event.stopPropagation()\"\n      >\n        <div\n          class=\"d-col a-i-start form-control\"\n          style=\"flex: 0\"\n        >\n          <p class=\"text-muted fit-w text-10 l-h-1\">\n            {{ 'Time mode' | translate }}\n          </p>\n          <p\n            class=\"text-bold text-12 fit-w l-h-1\"\n            data-cy=\"global-time-context-controls--Display-mode\"\n          >\n            {{ refreshOption | translate | titlecase }}\n          </p>\n        </div>\n\n        @let interval = form.get('dateTimeContext')?.value?.interval;\n        @let isCustomInterval = interval === 'custom';\n\n        <c8y-time-range-display\n          style=\"margin-left: -1px; min-width: 0\"\n          [dateTimeContext]=\"form.get('dateTimeContext')?.value\"\n        ></c8y-time-range-display>\n\n        @if (!(isAnySettingsEnabled$ | async)) {\n          <div\n            class=\"d-col a-i-center form-control\"\n            style=\"margin-left: -1px; flex: 0\"\n          >\n            <i\n              class=\"dlt-c8y-icon-disconnected icon-20 text-danger\"\n              [tooltip]=\"'No synced widgets' | translate\"\n              placement=\"right\"\n              container=\"body\"\n              [delay]=\"500\"\n              data-cy=\"global-time-context-controls--Widgets-disconnected\"\n            ></i>\n          </div>\n        }\n      </button>\n    </form>\n  } @else {\n    <form [formGroup]=\"form\">\n      <button\n        class=\"btn-clean d-flex p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\n        (click)=\"contextClick.emit($event); $event.stopPropagation()\"\n      >\n        <div\n          class=\"d-col a-i-center form-control\"\n          style=\"flex: 0\"\n        >\n          <i class=\"dlt-c8y-icon-schedule1 icon-20 text-primary\"></i>\n        </div>\n\n        <div\n          class=\"d-col a-i-start form-control\"\n          style=\"margin-left: -1px; flex: 0\"\n        >\n          <p class=\"text-muted fit-w text-10 l-h-1\">\n            {{ 'Time mode' | translate }}\n          </p>\n          <p\n            class=\"text-bold text-12 fit-w l-h-1\"\n            data-cy=\"global-time-context-controls--Display-mode\"\n          >\n            {{ refreshOption | translate | titlecase }}\n          </p>\n        </div>\n\n        <c8y-time-range-display\n          style=\"margin-left: -1px; min-width: 0\"\n          [dateTimeContext]=\"form.get('dateTimeContext')?.value\"\n        ></c8y-time-range-display>\n        <c8y-aggregation-display\n          style=\"margin-left: -1px; min-width: 0\"\n          [aggregation]=\"form.get('aggregation')?.value\"\n        ></c8y-aggregation-display>\n\n        @if (!(isAnySettingsEnabled$ | async)) {\n          <div\n            class=\"d-col a-i-center form-control\"\n            style=\"margin-left: -1px; flex: 0\"\n          >\n            <i\n              class=\"dlt-c8y-icon-disconnected icon-20 text-danger\"\n              [tooltip]=\"'No synced widgets' | translate\"\n              placement=\"right\"\n              container=\"body\"\n              [delay]=\"500\"\n              data-cy=\"global-time-context-controls--Widgets-disconnected\"\n            ></i>\n          </div>\n        }\n      </button>\n    </form>\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "ngmodule", type: CollapseModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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.16", ngImport: i0, type: ContextControlsComponent$1, decorators: [{
             type: Component,
@@ -4907,7 +4907,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         TimeRangeDisplayComponent,
                         AggregationDisplayComponent,
                         AsyncPipe
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (form) {\n  @let SHOW_TIME_CONTEXT = settings.showTimeContext;\n  @let SHOW_AGGREGATION = settings.showAggregation;\n  @let SHOW_AUTO_REFRESH = settings.showAutoRefresh;\n  @let refreshIntervalValue = form?.get('refreshInterval')?.value;\n  @let isLiveMode = refreshOption === REFRESH_OPTION.LIVE;\n\n  @if (isLiveMode) {\n    <form\n      class=\"input-group\"\n      [formGroup]=\"form\"\n    >\n      <c8y-auto-refresh-control\n        #autoRefreshControl\n        [isLoading]=\"isLoading\"\n        [isAutoRefreshConnected]=\"isAutoRefreshConnected\"\n        formControlName=\"isAutoRefreshEnabled\"\n        [autoRefreshSeconds]=\"refreshIntervalValue\"\n        (refresh)=\"refresh.emit()\"\n      ></c8y-auto-refresh-control>\n      <button\n        class=\"btn-clean d-flex p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\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" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (form) {\n  @let SHOW_TIME_CONTEXT = settings.showTimeContext;\n  @let SHOW_AGGREGATION = settings.showAggregation;\n  @let SHOW_AUTO_REFRESH = settings.showAutoRefresh;\n  @let refreshIntervalValue = form?.get('refreshInterval')?.value;\n  @let isLiveMode = refreshOption === REFRESH_OPTION.LIVE;\n\n  @if (isLiveMode) {\n    <form\n      class=\"input-group\"\n      [formGroup]=\"form\"\n    >\n      <c8y-auto-refresh-control\n        #autoRefreshControl\n        [isLoading]=\"isLoading\"\n        [isAutoRefreshConnected]=\"isAutoRefreshConnected\"\n        formControlName=\"isAutoRefreshEnabled\"\n        [autoRefreshSeconds]=\"refreshIntervalValue\"\n        (refresh)=\"refresh.emit()\"\n      ></c8y-auto-refresh-control>\n      <button\n        class=\"btn-clean d-flex p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8 min-width-0\"\n        style=\"margin-left: -1px\"\n        (click)=\"contextClick.emit($event); $event.stopPropagation()\"\n      >\n        <div\n          class=\"d-col a-i-start form-control\"\n          style=\"flex: 0\"\n        >\n          <p class=\"text-muted fit-w text-10 l-h-1\">\n            {{ 'Time mode' | translate }}\n          </p>\n          <p\n            class=\"text-bold text-12 fit-w l-h-1\"\n            data-cy=\"global-time-context-controls--Display-mode\"\n          >\n            {{ refreshOption | translate | titlecase }}\n          </p>\n        </div>\n\n        @let interval = form.get('dateTimeContext')?.value?.interval;\n        @let isCustomInterval = interval === 'custom';\n\n        <c8y-time-range-display\n          style=\"margin-left: -1px; min-width: 0\"\n          [dateTimeContext]=\"form.get('dateTimeContext')?.value\"\n        ></c8y-time-range-display>\n\n        @if (!(isAnySettingsEnabled$ | async)) {\n          <div\n            class=\"d-col a-i-center form-control\"\n            style=\"margin-left: -1px; flex: 0\"\n          >\n            <i\n              class=\"dlt-c8y-icon-disconnected icon-20 text-danger\"\n              [tooltip]=\"'No synced widgets' | translate\"\n              placement=\"right\"\n              container=\"body\"\n              [delay]=\"500\"\n              data-cy=\"global-time-context-controls--Widgets-disconnected\"\n            ></i>\n          </div>\n        }\n      </button>\n    </form>\n  } @else {\n    <form [formGroup]=\"form\">\n      <button\n        class=\"btn-clean d-flex p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\n        (click)=\"contextClick.emit($event); $event.stopPropagation()\"\n      >\n        <div\n          class=\"d-col a-i-center form-control\"\n          style=\"flex: 0\"\n        >\n          <i class=\"dlt-c8y-icon-schedule1 icon-20 text-primary\"></i>\n        </div>\n\n        <div\n          class=\"d-col a-i-start form-control\"\n          style=\"margin-left: -1px; flex: 0\"\n        >\n          <p class=\"text-muted fit-w text-10 l-h-1\">\n            {{ 'Time mode' | translate }}\n          </p>\n          <p\n            class=\"text-bold text-12 fit-w l-h-1\"\n            data-cy=\"global-time-context-controls--Display-mode\"\n          >\n            {{ refreshOption | translate | titlecase }}\n          </p>\n        </div>\n\n        <c8y-time-range-display\n          style=\"margin-left: -1px; min-width: 0\"\n          [dateTimeContext]=\"form.get('dateTimeContext')?.value\"\n        ></c8y-time-range-display>\n        <c8y-aggregation-display\n          style=\"margin-left: -1px; min-width: 0\"\n          [aggregation]=\"form.get('aggregation')?.value\"\n        ></c8y-aggregation-display>\n\n        @if (!(isAnySettingsEnabled$ | async)) {\n          <div\n            class=\"d-col a-i-center form-control\"\n            style=\"margin-left: -1px; flex: 0\"\n          >\n            <i\n              class=\"dlt-c8y-icon-disconnected icon-20 text-danger\"\n              [tooltip]=\"'No synced widgets' | translate\"\n              placement=\"right\"\n              container=\"body\"\n              [delay]=\"500\"\n              data-cy=\"global-time-context-controls--Widgets-disconnected\"\n            ></i>\n          </div>\n        }\n      </button>\n    </form>\n  }\n}\n" }]
         }], propDecorators: { showDisplayModeLabel: [{
                 type: Input
             }], isLoading: [{
@@ -5426,7 +5426,7 @@ class GlobalContextComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GlobalContextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: GlobalContextComponent, isStandalone: true, selector: "c8y-global-context", host: { classAttribute: "min-width-0" }, 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.16", ngImport: i0, type: GlobalContextComponent, decorators: [{
             type: Component,
@@ -5435,7 +5435,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         TooltipModule,
                         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" }]
+                    ], selector: 'c8y-global-context', host: { class: 'min-width-0' }, 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: [{
                 type: ViewChild,
                 args: [ConfigurationCollapseComponent, { static: false }]